@firestitch/2fa 12.11.5 → 12.11.7

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('@firestitch/code-input'), require('@firestitch/message'), require('@firestitch/phone'), require('@angular/material/progress-spinner'), require('@firestitch/list'), require('@firestitch/label'), require('@firestitch/country'), require('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', '@firestitch/code-input', '@firestitch/message', '@firestitch/phone', '@angular/material/progress-spinner', '@firestitch/list', '@firestitch/label', '@firestitch/country', '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.i8$1, global.ng.material.progressSpinner, global.i2$1, global.i3$2, global.i4$1, global.QRCode, 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, i8$1, i1$2, i2$1, i3$2, i4$1, QRCode, i1$3) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/common'), require('@angular/material/icon'), require('@angular/material/radio'), require('@angular/material/button'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/checkbox'), require('@firestitch/form'), require('@firestitch/skeleton'), require('@firestitch/radiogroup'), require('@firestitch/dialog'), require('rxjs'), require('rxjs/operators'), require('@angular/material/dialog'), require('@firestitch/code-input'), require('@firestitch/message'), require('@firestitch/phone'), require('@angular/material/progress-spinner'), require('@firestitch/country'), require('@firestitch/label'), require('@firestitch/list'), require('@firestitch/prompt'), require('qrcode')) :
+    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', '@firestitch/code-input', '@firestitch/message', '@firestitch/phone', '@angular/material/progress-spinner', '@firestitch/country', '@firestitch/label', '@firestitch/list', '@firestitch/prompt', 'qrcode'], 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.i8$1, global.ng.material.progressSpinner, global.i4$1, global.i3$2, global.i2$1, global.i1$3, global.QRCode));
+})(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, i8$1, i1$2, i4$1, i3$2, i2$1, i1$3, QRCode) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -42,1525 +42,1534 @@
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i8__namespace$1 = /*#__PURE__*/_interopNamespace(i8$1);
     var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$2);
-    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
-    var i3__namespace$2 = /*#__PURE__*/_interopNamespace(i3$2);
     var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
-    var QRCode__default = /*#__PURE__*/_interopDefaultLegacy(QRCode);
+    var i3__namespace$2 = /*#__PURE__*/_interopNamespace(i3$2);
+    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
     var i1__namespace$3 = /*#__PURE__*/_interopNamespace(i1$3);
+    var QRCode__default = /*#__PURE__*/_interopDefaultLegacy(QRCode);
 
-    exports.VerificationMethodType = void 0;
-    (function (VerificationMethodType) {
-        VerificationMethodType["Sms"] = "sms";
-        VerificationMethodType["Email"] = "email";
-        VerificationMethodType["App"] = "app";
+    exports.VerificationMethodType = void 0;
+    (function (VerificationMethodType) {
+        VerificationMethodType["Sms"] = "sms";
+        VerificationMethodType["Email"] = "email";
+        VerificationMethodType["App"] = "app";
     })(exports.VerificationMethodType || (exports.VerificationMethodType = {}));
 
-    var Fs2faVerificationMethodsComponent = /** @class */ (function () {
-        function Fs2faVerificationMethodsComponent(_dialogData, _dialogRef) {
-            var _this = this;
-            this._dialogData = _dialogData;
-            this._dialogRef = _dialogRef;
-            this.verificationMethodType = exports.VerificationMethodType;
-            this.setVerificationMethod = function () {
-                return _this._selectVerificationMethod(_this.verificationMethod)
-                    .pipe(operators.tap(function (method) {
-                    _this._dialogRef.close(method);
-                }));
-            };
-            this._selectVerificationMethod = _dialogData.selectVerificationMethod;
-            this._setActiveMethod();
-            this._initMethods(_dialogData.verificationMethods);
-        }
-        Fs2faVerificationMethodsComponent.prototype.compareWith = function (o1, o2) {
-            return o1 && o2 && o1.id === o2.id;
-        };
-        Fs2faVerificationMethodsComponent.prototype._setActiveMethod = function () {
-            var _a;
-            this.verificationMethod = (_a = this._dialogData) === null || _a === void 0 ? void 0 : _a.verificationMethod;
-        };
-        Fs2faVerificationMethodsComponent.prototype._initMethods = function (verificationMethods) {
-            this.verificationMethods = verificationMethods
-                .reduce(function (acc, method) {
-                if (!acc[method.type]) {
-                    acc[method.type] = [];
-                }
-                acc[method.type].push(method);
-                return acc;
-            }, {});
-        };
-        return Fs2faVerificationMethodsComponent;
-    }());
-    Fs2faVerificationMethodsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationMethodsComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    Fs2faVerificationMethodsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Fs2faVerificationMethodsComponent, selector: "ng-component", ngImport: i0__namespace, template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    Verification Methods\n  </h1>\n  <form fsForm [submit]=\"setVerificationMethod\" [dirtySubmitButton]=\"false\">\n    <mat-dialog-content>\n      <ng-container>\n        <fs-radio-group [(ngModel)]=\"verificationMethod\" name=\"method\" [compareWith]=\"compareWith\">\n          <ng-container *ngFor=\"let methodMap of verificationMethods | keyvalue\">\n            <div class=\"method\">\n              <ng-container [ngSwitch]=\"methodMap.key\">\n                <ng-container *ngSwitchCase=\"verificationMethodType.Sms\">\n                  <div class=\"method-header\">\n                    <div class=\"method-icon\">\n                      <mat-icon>\n                        textsms\n                      </mat-icon>\n                    </div>\n                    <div class=\"method-name\">\n                      <div class=\"method-title\">Text Message</div>\n                      <div class=\"method-subtitle\">\n                        Send verification code to a mobile number\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n\n                <ng-container *ngSwitchCase=\"verificationMethodType.Email\">\n                  <div class=\"method-header\">\n                    <div class=\"method-icon\">\n                      <mat-icon>\n                        mail\n                      </mat-icon>\n                    </div>\n                    <div class=\"method-name\">\n                      <div class=\"method-title\">Email</div>\n                      <div class=\"method-subtitle\">\n                        Send verification code to an email address\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n\n                <ng-container *ngSwitchCase=\"verificationMethodType.App\">\n                  <div class=\"method-header\">\n                    <div class=\"method-icon\">\n                      <mat-icon>\n                        phone_iphone\n                      </mat-icon>\n                    </div>\n                    <div class=\"method-name\">\n                      <div class=\"method-title\">Authenticator App</div>\n                      <div class=\"method-subtitle\">\n                        Send verification code to your authenticator app\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>                \n              </ng-container>\n\n              <mat-radio-button class=\"method-item\" *ngFor=\"let method of methodMap.value\" [value]=\"method\">\n                <ng-container [ngSwitch]=\"methodMap.key\">\n                  <ng-container *ngSwitchCase=\"verificationMethodType.Sms\">\n                    {{ method.phoneNumber }}\n                  </ng-container>\n                  <ng-container *ngSwitchCase=\"verificationMethodType.Email\">\n                    {{ method.email }}\n                  </ng-container>\n                  <ng-container *ngSwitchCase=\"verificationMethodType.App\">\n                    Authenticator App\n                  </ng-container>                      \n                </ng-container>\n              </mat-radio-button>\n            </div>\n          </ng-container>\n        </fs-radio-group>\n      </ng-container>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <div class=\"actions\">\n        <button mat-button type=\"submit\" color=\"primary\">Next</button>\n        <button mat-button type=\"button\" [mat-dialog-close]=\"null\">Cancel</button>\n      </div>\n    </mat-dialog-actions>\n  </form>\n</fs-dialog>\n", styles: [".method{display:block;margin-bottom:20px}.method .method-header{display:flex;align-items:flex-start}.method .method-header .method-name{margin-left:10px}.method .method-header .method-name .method-title{font-size:14px;font-weight:400}.method .method-header .method-name .method-subtitle{font-size:12px;color:#a3a3a3}.method .method-item{display:block;margin:10px 0 0 35px}\n"], components: [{ type: i3__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i3__namespace$1.FsRadioGroupComponent, selector: "fs-radio-group", inputs: ["orientation", "label", "name", "disabled", "radioPosition", "compareWith", "required"] }, { type: i4__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5__namespace.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: i6__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i8__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i8__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i8__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i8__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9__namespace.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])" }, { type: i9__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9__namespace$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i9__namespace$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i9__namespace.FsSubmitButtonDirective, selector: "button[type=\"submit\"]", inputs: ["name", "dirtySubmit"] }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "keyvalue": i9__namespace$1.KeyValuePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationMethodsComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        templateUrl: './2fa-verification-methods.component.html',
-                        styleUrls: ['./2fa-verification-methods.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [i1.MAT_DIALOG_DATA]
-                        }] }, { type: i1__namespace.MatDialogRef }];
+    var Fs2faVerificationMethodsComponent = /** @class */ (function () {
+        function Fs2faVerificationMethodsComponent(_dialogData, _dialogRef) {
+            var _this = this;
+            this._dialogData = _dialogData;
+            this._dialogRef = _dialogRef;
+            this.verificationMethodType = exports.VerificationMethodType;
+            this.setVerificationMethod = function () {
+                return _this._selectVerificationMethod(_this.verificationMethod)
+                    .pipe(operators.tap(function (method) {
+                    _this._dialogRef.close(method);
+                }));
+            };
+            this._selectVerificationMethod = _dialogData.selectVerificationMethod;
+            this._setActiveMethod();
+            this._initMethods(_dialogData.verificationMethods);
+        }
+        Fs2faVerificationMethodsComponent.prototype.compareWith = function (o1, o2) {
+            return o1 && o2 && o1.id === o2.id;
+        };
+        Fs2faVerificationMethodsComponent.prototype._setActiveMethod = function () {
+            var _a;
+            this.verificationMethod = (_a = this._dialogData) === null || _a === void 0 ? void 0 : _a.verificationMethod;
+        };
+        Fs2faVerificationMethodsComponent.prototype._initMethods = function (verificationMethods) {
+            this.verificationMethods = verificationMethods
+                .reduce(function (acc, method) {
+                if (!acc[method.type]) {
+                    acc[method.type] = [];
+                }
+                acc[method.type].push(method);
+                return acc;
+            }, {});
+        };
+        return Fs2faVerificationMethodsComponent;
+    }());
+    Fs2faVerificationMethodsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationMethodsComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    Fs2faVerificationMethodsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Fs2faVerificationMethodsComponent, selector: "ng-component", ngImport: i0__namespace, template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    Verification Methods\n  </h1>\n  <form fsForm [submit]=\"setVerificationMethod\" [dirtySubmitButton]=\"false\">\n    <mat-dialog-content>\n      <ng-container>\n        <fs-radio-group [(ngModel)]=\"verificationMethod\" name=\"method\" [compareWith]=\"compareWith\">\n          <ng-container *ngFor=\"let methodMap of verificationMethods | keyvalue\">\n            <div class=\"method\">\n              <ng-container [ngSwitch]=\"methodMap.key\">\n                <ng-container *ngSwitchCase=\"verificationMethodType.Sms\">\n                  <div class=\"method-header\">\n                    <div class=\"method-icon\">\n                      <mat-icon>\n                        textsms\n                      </mat-icon>\n                    </div>\n                    <div class=\"method-name\">\n                      <div class=\"method-title\">Text Message</div>\n                      <div class=\"method-subtitle\">\n                        Send verification code to a mobile number\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n\n                <ng-container *ngSwitchCase=\"verificationMethodType.Email\">\n                  <div class=\"method-header\">\n                    <div class=\"method-icon\">\n                      <mat-icon>\n                        mail\n                      </mat-icon>\n                    </div>\n                    <div class=\"method-name\">\n                      <div class=\"method-title\">Email</div>\n                      <div class=\"method-subtitle\">\n                        Send verification code to an email address\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n\n                <ng-container *ngSwitchCase=\"verificationMethodType.App\">\n                  <div class=\"method-header\">\n                    <div class=\"method-icon\">\n                      <mat-icon>\n                        phone_iphone\n                      </mat-icon>\n                    </div>\n                    <div class=\"method-name\">\n                      <div class=\"method-title\">Authenticator App</div>\n                      <div class=\"method-subtitle\">\n                        Send verification code to your authenticator app\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>                \n              </ng-container>\n\n              <mat-radio-button class=\"method-item\" *ngFor=\"let method of methodMap.value\" [value]=\"method\">\n                <ng-container [ngSwitch]=\"methodMap.key\">\n                  <ng-container *ngSwitchCase=\"verificationMethodType.Sms\">\n                    {{ method.phoneNumber }}\n                  </ng-container>\n                  <ng-container *ngSwitchCase=\"verificationMethodType.Email\">\n                    {{ method.email }}\n                  </ng-container>\n                  <ng-container *ngSwitchCase=\"verificationMethodType.App\">\n                    Authenticator App\n                  </ng-container>                      \n                </ng-container>\n              </mat-radio-button>\n            </div>\n          </ng-container>\n        </fs-radio-group>\n      </ng-container>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <div class=\"actions\">\n        <button mat-button type=\"submit\" color=\"primary\">Next</button>\n        <button mat-button type=\"button\" [mat-dialog-close]=\"null\">Cancel</button>\n      </div>\n    </mat-dialog-actions>\n  </form>\n</fs-dialog>\n", styles: [".method{display:block;margin-bottom:20px}.method .method-header{display:flex;align-items:flex-start}.method .method-header .method-name{margin-left:10px}.method .method-header .method-name .method-title{font-size:14px;font-weight:400}.method .method-header .method-name .method-subtitle{font-size:12px;color:#a3a3a3}.method .method-item{display:block;margin:10px 0 0 35px}\n"], components: [{ type: i3__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i3__namespace$1.FsRadioGroupComponent, selector: "fs-radio-group", inputs: ["orientation", "label", "name", "disabled", "radioPosition", "compareWith", "required"] }, { type: i4__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5__namespace.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: i6__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i8__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i8__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i8__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i8__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9__namespace.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])" }, { type: i9__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9__namespace$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i9__namespace$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i9__namespace.FsSubmitButtonDirective, selector: "button[type=\"submit\"]", inputs: ["name", "dirtySubmit"] }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "keyvalue": i9__namespace$1.KeyValuePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationMethodsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        templateUrl: './2fa-verification-methods.component.html',
+                        styleUrls: ['./2fa-verification-methods.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.MAT_DIALOG_DATA]
+                        }] }, { type: i1__namespace.MatDialogRef }];
         } });
 
-    var CodeInputComponent = /** @class */ (function () {
-        function CodeInputComponent() {
-            this.codeCompleted = new i0.EventEmitter();
-            this.codeChanged = new i0.EventEmitter();
-        }
-        CodeInputComponent.prototype.focus = function () {
-            this.codeInput.focusOnField(0);
-        };
-        return CodeInputComponent;
-    }());
-    CodeInputComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CodeInputComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    CodeInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CodeInputComponent, selector: "app-code-input", inputs: { codeLength: "codeLength", code: "code" }, outputs: { codeCompleted: "codeCompleted", codeChanged: "codeChanged" }, viewQueries: [{ propertyName: "codeInput", first: true, predicate: i1$1.FsCodeInputComponent, descendants: true }], ngImport: i0__namespace, template: "<fs-code-input\n  [codeLength]=\"6\"\n  [ngModel]=\"code\"\n  name=\"code\"\n  [isPrevFocusableAfterClearing]=\"false\"\n  (completed)=\"codeCompleted.emit($event)\"\n  (ngModelChange)=\"codeChanged.emit($event)\">\n</fs-code-input>\n", styles: ["code-input{--item-spacing: 10px;--item-height: 20px;--item-border: none;--item-border-bottom: 2px solid #949494;--item-border-has-value: none;--item-border-bottom-has-value: 2px solid #949494;--item-border-focused: none;--item-border-bottom-focused: 2px solid #0061AF;--item-shadow-focused: none;--item-border-radius: 0px}code-input ::ng-deep span:first-child{padding-left:0!important}code-input ::ng-deep span:last-child{padding-right:0!important}code-input ::ng-deep input{font-size:20px!important;height:40px!important;padding:0!important}\n"], components: [{ type: i1__namespace$1.FsCodeInputComponent, selector: "fs-code-input", inputs: ["disabled", "codeLength", "inputType", "inputMode", "isCharsCode", "isCodeHidden", "autocapitalize", "initialFocusField", "isPrevFocusableAfterClearing", "isFocusingOnLastByClickIfFilled"], outputs: ["changed", "completed"] }], directives: [{ type: i8__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CodeInputComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'app-code-input',
-                        templateUrl: './code-input.component.html',
-                        styleUrls: ['./code-input.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], propDecorators: { codeInput: [{
-                    type: i0.ViewChild,
-                    args: [i1$1.FsCodeInputComponent]
-                }], codeLength: [{
-                    type: i0.Input
-                }], code: [{
-                    type: i0.Input
-                }], codeCompleted: [{
-                    type: i0.Output
-                }], codeChanged: [{
-                    type: i0.Output
+    var CodeInputComponent = /** @class */ (function () {
+        function CodeInputComponent() {
+            this.codeCompleted = new i0.EventEmitter();
+            this.codeChanged = new i0.EventEmitter();
+        }
+        CodeInputComponent.prototype.ngOnInit = function () {
+            if (!this.codeLength) {
+                this.codeLength = 6;
+            }
+        };
+        CodeInputComponent.prototype.focus = function () {
+            this.codeInput.focusOnField(0);
+        };
+        return CodeInputComponent;
+    }());
+    CodeInputComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CodeInputComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    CodeInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CodeInputComponent, selector: "app-code-input", inputs: { codeLength: "codeLength", code: "code" }, outputs: { codeCompleted: "codeCompleted", codeChanged: "codeChanged" }, viewQueries: [{ propertyName: "codeInput", first: true, predicate: i1$1.FsCodeInputComponent, descendants: true }], ngImport: i0__namespace, template: "<fs-code-input\n  [codeLength]=\"codeLength\"\n  [ngModel]=\"code\"\n  name=\"code\"\n  [isPrevFocusableAfterClearing]=\"false\"\n  (completed)=\"codeCompleted.emit($event)\"\n  (ngModelChange)=\"codeChanged.emit($event)\">\n</fs-code-input>\n", styles: ["code-input{--item-spacing: 10px;--item-height: 20px;--item-border: none;--item-border-bottom: 2px solid #949494;--item-border-has-value: none;--item-border-bottom-has-value: 2px solid #949494;--item-border-focused: none;--item-border-bottom-focused: 2px solid #0061AF;--item-shadow-focused: none;--item-border-radius: 0px}code-input ::ng-deep span:first-child{padding-left:0!important}code-input ::ng-deep span:last-child{padding-right:0!important}code-input ::ng-deep input{font-size:20px!important;height:40px!important;padding:0!important}\n"], components: [{ type: i1__namespace$1.FsCodeInputComponent, selector: "fs-code-input", inputs: ["disabled", "codeLength", "inputType", "inputMode", "isCharsCode", "isCodeHidden", "autocapitalize", "initialFocusField", "isPrevFocusableAfterClearing", "isFocusingOnLastByClickIfFilled"], outputs: ["changed", "completed"] }], directives: [{ type: i8__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CodeInputComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'app-code-input',
+                        templateUrl: './code-input.component.html',
+                        styleUrls: ['./code-input.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], propDecorators: { codeInput: [{
+                    type: i0.ViewChild,
+                    args: [i1$1.FsCodeInputComponent]
+                }], codeLength: [{
+                    type: i0.Input
+                }], code: [{
+                    type: i0.Input
+                }], codeCompleted: [{
+                    type: i0.Output
+                }], codeChanged: [{
+                    type: i0.Output
                 }] } });
 
-    var Fs2faVerificationCodeComponent = /** @class */ (function () {
-        function Fs2faVerificationCodeComponent(_form) {
-            this._form = _form;
-            this.codeChanged = new i0.EventEmitter();
-            this.codeCompleted = new i0.EventEmitter();
-            this.VerificationMethodType = exports.VerificationMethodType;
-        }
-        Fs2faVerificationCodeComponent.prototype.codeChange = function (code) {
-            this.code = code;
-            this.codeChanged.emit(this.code);
-            this._form.dirty();
-        };
-        Fs2faVerificationCodeComponent.prototype.focus = function () {
-            this.codeInputComponent.focus();
-        };
-        return Fs2faVerificationCodeComponent;
-    }());
-    Fs2faVerificationCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationCodeComponent, deps: [{ token: i9__namespace.FsFormDirective }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    Fs2faVerificationCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Fs2faVerificationCodeComponent, selector: "fs-2fa-verification-code", inputs: { type: "type", recipient: "recipient", code: "code" }, outputs: { codeChanged: "codeChanged", codeCompleted: "codeCompleted" }, viewQueries: [{ propertyName: "codeInputComponent", first: true, predicate: CodeInputComponent, descendants: true }], ngImport: i0__namespace, template: "<ng-container *ngIf=\"type === VerificationMethodType.Sms\">\n  <p class=\"description\">\n    A text message with a verification code was just sent to <span style=\"white-space: nowrap;\">{{ recipient }}</span> to verify it's you.\n  </p>\n\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"type === VerificationMethodType.Email\">\n  <p class=\"description\">\n    An email with a verification code was just sent to {{ recipient }} to verify it's you.\n  </p>\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"type === VerificationMethodType.App\">\n  <p class=\"description\">\n    Enter the verification code generated by your 2 factor authenticator app to verify it's you.\n  </p>\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-template #input> \n <app-code-input  \n    [code]=\"code\"\n    (codeChanged)=\"codeChange($event)\"\n    (codeCompleted)=\"codeCompleted.emit()\">\n  </app-code-input> \n</ng-template> ", styles: ["mat-form-field{width:100%}mat-form-field ::ng-deep .mat-form-field-subscript-wrapper{min-height:unset!important}mat-form-field ::ng-deep .mat-form-field-subscript-wrapper .fs-form-error{padding-bottom:5px}app-code-input{margin-bottom:5px}\n"], components: [{ type: CodeInputComponent, selector: "app-code-input", inputs: ["codeLength", "code"], outputs: ["codeCompleted", "codeChanged"] }], directives: [{ type: i9__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], viewProviders: [
-            {
-                provide: i8.ControlContainer,
-                useExisting: i8.NgForm,
-            },
-        ], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationCodeComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'fs-2fa-verification-code',
-                        templateUrl: './2fa-verification-code.component.html',
-                        styleUrls: ['./2fa-verification-code.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        viewProviders: [
-                            {
-                                provide: i8.ControlContainer,
-                                useExisting: i8.NgForm,
-                            },
-                        ],
-                    }]
-            }], ctorParameters: function () { return [{ type: i9__namespace.FsFormDirective }]; }, propDecorators: { codeInputComponent: [{
-                    type: i0.ViewChild,
-                    args: [CodeInputComponent]
-                }], type: [{
-                    type: i0.Input
-                }], recipient: [{
-                    type: i0.Input
-                }], code: [{
-                    type: i0.Input
-                }], codeChanged: [{
-                    type: i0.Output
-                }], codeCompleted: [{
-                    type: i0.Output
+    var Fs2faVerificationCodeComponent = /** @class */ (function () {
+        function Fs2faVerificationCodeComponent(_form) {
+            this._form = _form;
+            this.codeChanged = new i0.EventEmitter();
+            this.codeCompleted = new i0.EventEmitter();
+            this.VerificationMethodType = exports.VerificationMethodType;
+        }
+        Fs2faVerificationCodeComponent.prototype.codeChange = function (code) {
+            this.code = code;
+            this.codeChanged.emit(this.code);
+            this._form.dirty();
+        };
+        Fs2faVerificationCodeComponent.prototype.focus = function () {
+            this.codeInputComponent.focus();
+        };
+        return Fs2faVerificationCodeComponent;
+    }());
+    Fs2faVerificationCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationCodeComponent, deps: [{ token: i9__namespace.FsFormDirective }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    Fs2faVerificationCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Fs2faVerificationCodeComponent, selector: "fs-2fa-verification-code", inputs: { type: "type", recipient: "recipient", codeLength: "codeLength", code: "code" }, outputs: { codeChanged: "codeChanged", codeCompleted: "codeCompleted" }, viewQueries: [{ propertyName: "codeInputComponent", first: true, predicate: CodeInputComponent, descendants: true }], ngImport: i0__namespace, template: "<ng-container *ngIf=\"type === VerificationMethodType.Sms\">\n  <p class=\"description\">\n    A text message with a verification code was just sent to <span style=\"white-space: nowrap;\">{{ recipient }}</span> to verify it's you.\n  </p>\n\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"type === VerificationMethodType.Email\">\n  <p class=\"description\">\n    An email with a verification code was just sent to {{ recipient }} to verify it's you.\n  </p>\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"type === VerificationMethodType.App\">\n  <p class=\"description\">\n    Enter the verification code generated by your 2 factor authenticator app to verify it's you.\n  </p>\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-template #input> \n <app-code-input  \n    [code]=\"code\"\n    [codeLength]=\"codeLength\"\n    (codeChanged)=\"codeChange($event)\"\n    (codeCompleted)=\"codeCompleted.emit()\">\n  </app-code-input> \n</ng-template> ", styles: ["mat-form-field{width:100%}mat-form-field ::ng-deep .mat-form-field-subscript-wrapper{min-height:unset!important}mat-form-field ::ng-deep .mat-form-field-subscript-wrapper .fs-form-error{padding-bottom:5px}app-code-input{margin-bottom:5px}\n"], components: [{ type: CodeInputComponent, selector: "app-code-input", inputs: ["codeLength", "code"], outputs: ["codeCompleted", "codeChanged"] }], directives: [{ type: i9__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], viewProviders: [
+            {
+                provide: i8.ControlContainer,
+                useExisting: i8.NgForm,
+            },
+        ], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationCodeComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'fs-2fa-verification-code',
+                        templateUrl: './2fa-verification-code.component.html',
+                        styleUrls: ['./2fa-verification-code.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        viewProviders: [
+                            {
+                                provide: i8.ControlContainer,
+                                useExisting: i8.NgForm,
+                            },
+                        ],
+                    }]
+            }], ctorParameters: function () { return [{ type: i9__namespace.FsFormDirective }]; }, propDecorators: { codeInputComponent: [{
+                    type: i0.ViewChild,
+                    args: [CodeInputComponent]
+                }], type: [{
+                    type: i0.Input
+                }], recipient: [{
+                    type: i0.Input
+                }], codeLength: [{
+                    type: i0.Input
+                }], code: [{
+                    type: i0.Input
+                }], codeChanged: [{
+                    type: i0.Output
+                }], codeCompleted: [{
+                    type: i0.Output
                 }] } });
 
-    var Fs2faVerificationComponent = /** @class */ (function () {
-        function Fs2faVerificationComponent(_cdRef, _dialog, _message) {
-            this._cdRef = _cdRef;
-            this._dialog = _dialog;
-            this._message = _message;
-            this.showTrustedDevice = true;
-            this.trustDevice = true;
-            this.formatRecipient = false;
-            this.verified = new i0.EventEmitter();
-            this.codeChanged = new i0.EventEmitter();
-            this.codeCompleted = new i0.EventEmitter();
-            this.trustDeviceChange = new i0.EventEmitter();
-            this.code = '';
-            this.VerificationMethodType = exports.VerificationMethodType;
-            this._destroy$ = new rxjs.Subject();
-        }
-        Object.defineProperty(Fs2faVerificationComponent.prototype, "recipient", {
-            get: function () {
-                if (this.verificationMethod.type === exports.VerificationMethodType.Email) {
-                    return this.verificationMethod.email;
-                }
-                if (this.verificationMethod.type === exports.VerificationMethodType.Sms) {
-                    return this.verificationMethod.phoneNumber;
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Fs2faVerificationComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.codeChanged
-                .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function (code) {
-                _this.code = code;
-            });
-        };
-        Fs2faVerificationComponent.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        Fs2faVerificationComponent.prototype.ngAfterViewInit = function () {
-            this.verificationCodeComponent.focus();
-        };
-        Fs2faVerificationComponent.prototype.resendCode = function () {
-            var _this = this;
-            return this.resend()
-                .pipe(operators.tap(function () {
-                _this.code = '';
-                _this._message.success('Resent Code');
-            }), operators.finalize(function () {
-                _this.verificationCodeComponent.focus();
-            }));
-        };
-        Fs2faVerificationComponent.prototype.showVerificationMethods = function () {
-            var _this = this;
-            this.getVerificationMethods()
-                .subscribe(function (verificationMethods) {
-                _this._dialog.open(Fs2faVerificationMethodsComponent, {
-                    data: {
-                        verificationMethod: _this.verificationMethod,
-                        verificationMethods: verificationMethods,
-                        selectVerificationMethod: _this.selectVerificationMethod,
-                    }
-                })
-                    .afterClosed()
-                    .pipe(operators.filter(function (verificationMethod) { return !!verificationMethod; }))
-                    .subscribe(function (verificationMethod) {
-                    _this.verificationMethod = verificationMethod;
-                    _this.code = '';
-                    _this._cdRef.markForCheck();
-                    setTimeout(function () {
-                        _this.verificationCodeComponent.focus();
-                    });
-                });
-            });
-        };
-        return Fs2faVerificationComponent;
-    }());
-    Fs2faVerificationComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i3__namespace.FsDialog }, { token: i2__namespace.FsMessage }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    Fs2faVerificationComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Fs2faVerificationComponent, selector: "fs-2fa-verification", inputs: { verificationMethod: "verificationMethod", resend: "resend", showTrustedDevice: "showTrustedDevice", trustDevice: "trustDevice", trustDays: "trustDays", formatRecipient: "formatRecipient", getVerificationMethods: "getVerificationMethods", selectVerificationMethod: "selectVerificationMethod" }, outputs: { verified: "verified", codeChanged: "codeChanged", codeCompleted: "codeCompleted", trustDeviceChange: "trustDeviceChange" }, viewQueries: [{ propertyName: "verificationCodeComponent", first: true, predicate: Fs2faVerificationCodeComponent, descendants: true }], ngImport: i0__namespace, template: "<div class=\"code-container\">\n  <fs-2fa-verification-code\n    [recipient]=\"(formatRecipient && verificationMethod.type === VerificationMethodType.Sms) ? (recipient | fsPhone) : 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      <div class=\"small\">\n        Bypass verification \n        <ng-container *ngIf=\"trustDays\">for {{trustDays}} days</ng-container>  \n        <ng-container *ngIf=\"!trustDays\">for future signins</ng-container> \n        unless cookies are cleared\n      </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__namespace$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i9__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9__namespace.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])" }], pipes: { "fsPhone": i8__namespace$1.FsPhonePipe }, viewProviders: [{ provide: i8.ControlContainer, useExisting: i8.NgForm }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'fs-2fa-verification',
-                        templateUrl: './2fa-verification.component.html',
-                        styleUrls: ['./2fa-verification.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        viewProviders: [{ provide: i8.ControlContainer, useExisting: i8.NgForm }],
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i3__namespace.FsDialog }, { type: i2__namespace.FsMessage }]; }, propDecorators: { verificationCodeComponent: [{
-                    type: i0.ViewChild,
-                    args: [Fs2faVerificationCodeComponent]
-                }], verificationMethod: [{
-                    type: i0.Input
-                }], resend: [{
-                    type: i0.Input
-                }], showTrustedDevice: [{
-                    type: i0.Input
-                }], trustDevice: [{
-                    type: i0.Input
-                }], trustDays: [{
-                    type: i0.Input
-                }], formatRecipient: [{
-                    type: i0.Input
-                }], getVerificationMethods: [{
-                    type: i0.Input
-                }], selectVerificationMethod: [{
-                    type: i0.Input
-                }], verified: [{
-                    type: i0.Output
-                }], codeChanged: [{
-                    type: i0.Output
-                }], codeCompleted: [{
-                    type: i0.Output
-                }], trustDeviceChange: [{
-                    type: i0.Output
+    var Fs2faVerificationComponent = /** @class */ (function () {
+        function Fs2faVerificationComponent(_cdRef, _dialog, _message) {
+            this._cdRef = _cdRef;
+            this._dialog = _dialog;
+            this._message = _message;
+            this.showTrustedDevice = true;
+            this.trustDevice = true;
+            this.formatRecipient = false;
+            this.verified = new i0.EventEmitter();
+            this.codeChanged = new i0.EventEmitter();
+            this.codeCompleted = new i0.EventEmitter();
+            this.trustDeviceChange = new i0.EventEmitter();
+            this.code = '';
+            this.VerificationMethodType = exports.VerificationMethodType;
+            this._destroy$ = new rxjs.Subject();
+        }
+        Object.defineProperty(Fs2faVerificationComponent.prototype, "recipient", {
+            get: function () {
+                if (this.verificationMethod.type === exports.VerificationMethodType.Email) {
+                    return this.verificationMethod.email;
+                }
+                if (this.verificationMethod.type === exports.VerificationMethodType.Sms) {
+                    return this.verificationMethod.phoneNumber;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Fs2faVerificationComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.codeChanged
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function (code) {
+                _this.code = code;
+            });
+        };
+        Fs2faVerificationComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        Fs2faVerificationComponent.prototype.ngAfterViewInit = function () {
+            this.verificationCodeComponent.focus();
+        };
+        Fs2faVerificationComponent.prototype.resendCode = function () {
+            var _this = this;
+            return this.resend()
+                .pipe(operators.tap(function () {
+                _this.code = '';
+                _this._message.success('Resent Code');
+            }), operators.finalize(function () {
+                _this.verificationCodeComponent.focus();
+            }));
+        };
+        Fs2faVerificationComponent.prototype.showVerificationMethods = function () {
+            var _this = this;
+            this.getVerificationMethods()
+                .subscribe(function (verificationMethods) {
+                _this._dialog.open(Fs2faVerificationMethodsComponent, {
+                    data: {
+                        verificationMethod: _this.verificationMethod,
+                        verificationMethods: verificationMethods,
+                        selectVerificationMethod: _this.selectVerificationMethod,
+                    }
+                })
+                    .afterClosed()
+                    .pipe(operators.filter(function (verificationMethod) { return !!verificationMethod; }))
+                    .subscribe(function (verificationMethod) {
+                    _this.verificationMethod = verificationMethod;
+                    _this.code = '';
+                    _this._cdRef.markForCheck();
+                    setTimeout(function () {
+                        _this.verificationCodeComponent.focus();
+                    });
+                });
+            });
+        };
+        return Fs2faVerificationComponent;
+    }());
+    Fs2faVerificationComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i3__namespace.FsDialog }, { token: i2__namespace.FsMessage }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    Fs2faVerificationComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Fs2faVerificationComponent, selector: "fs-2fa-verification", inputs: { verificationMethod: "verificationMethod", resend: "resend", showTrustedDevice: "showTrustedDevice", trustDevice: "trustDevice", codeLength: "codeLength", trustDays: "trustDays", formatRecipient: "formatRecipient", getVerificationMethods: "getVerificationMethods", selectVerificationMethod: "selectVerificationMethod" }, outputs: { verified: "verified", codeChanged: "codeChanged", codeCompleted: "codeCompleted", trustDeviceChange: "trustDeviceChange" }, viewQueries: [{ propertyName: "verificationCodeComponent", first: true, predicate: Fs2faVerificationCodeComponent, descendants: true }], ngImport: i0__namespace, template: "<div class=\"code-container\">\n  <fs-2fa-verification-code\n    [recipient]=\"(formatRecipient && verificationMethod.type === VerificationMethodType.Sms) ? (recipient | fsPhone) : recipient\"\n    [type]=\"verificationMethod.type\"\n    [code]=\"code\"\n    [codeLength]=\"codeLength\"\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      <div class=\"small\">\n        Bypass verification \n        <ng-container *ngIf=\"trustDays\">for {{trustDays}} days</ng-container>  \n        <ng-container *ngIf=\"!trustDays\">for future signins</ng-container> \n        unless cookies are cleared\n      </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", "codeLength", "code"], outputs: ["codeChanged", "codeCompleted"] }, { type: i6__namespace$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i9__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9__namespace.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])" }], pipes: { "fsPhone": i8__namespace$1.FsPhonePipe }, viewProviders: [{ provide: i8.ControlContainer, useExisting: i8.NgForm }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'fs-2fa-verification',
+                        templateUrl: './2fa-verification.component.html',
+                        styleUrls: ['./2fa-verification.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        viewProviders: [{ provide: i8.ControlContainer, useExisting: i8.NgForm }],
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i3__namespace.FsDialog }, { type: i2__namespace.FsMessage }]; }, propDecorators: { verificationCodeComponent: [{
+                    type: i0.ViewChild,
+                    args: [Fs2faVerificationCodeComponent]
+                }], verificationMethod: [{
+                    type: i0.Input
+                }], resend: [{
+                    type: i0.Input
+                }], showTrustedDevice: [{
+                    type: i0.Input
+                }], trustDevice: [{
+                    type: i0.Input
+                }], codeLength: [{
+                    type: i0.Input
+                }], trustDays: [{
+                    type: i0.Input
+                }], formatRecipient: [{
+                    type: i0.Input
+                }], getVerificationMethods: [{
+                    type: i0.Input
+                }], selectVerificationMethod: [{
+                    type: i0.Input
+                }], verified: [{
+                    type: i0.Output
+                }], codeChanged: [{
+                    type: i0.Output
+                }], codeCompleted: [{
+                    type: i0.Output
+                }], trustDeviceChange: [{
+                    type: i0.Output
                 }] } });
 
-    var CodeInputModule = /** @class */ (function () {
-        function CodeInputModule() {
-        }
-        return CodeInputModule;
-    }());
-    CodeInputModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CodeInputModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    CodeInputModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CodeInputModule, declarations: [CodeInputComponent], imports: [i8.FormsModule,
-            i1$1.FsCodeInputModule], exports: [CodeInputComponent] });
-    CodeInputModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CodeInputModule, imports: [[
-                i8.FormsModule,
-                i1$1.FsCodeInputModule,
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CodeInputModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        imports: [
-                            i8.FormsModule,
-                            i1$1.FsCodeInputModule,
-                        ],
-                        declarations: [
-                            CodeInputComponent,
-                        ],
-                        exports: [
-                            CodeInputComponent,
-                        ],
-                    }]
+    var CodeInputModule = /** @class */ (function () {
+        function CodeInputModule() {
+        }
+        return CodeInputModule;
+    }());
+    CodeInputModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CodeInputModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    CodeInputModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CodeInputModule, declarations: [CodeInputComponent], imports: [i8.FormsModule,
+            i1$1.FsCodeInputModule], exports: [CodeInputComponent] });
+    CodeInputModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CodeInputModule, imports: [[
+                i8.FormsModule,
+                i1$1.FsCodeInputModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CodeInputModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i8.FormsModule,
+                            i1$1.FsCodeInputModule,
+                        ],
+                        declarations: [
+                            CodeInputComponent,
+                        ],
+                        exports: [
+                            CodeInputComponent,
+                        ],
+                    }]
             }] });
 
-    var ResendComponent = /** @class */ (function () {
-        function ResendComponent(_cdRef) {
-            this._cdRef = _cdRef;
-            this.resendInProgress = false;
-            this._destroy$ = new rxjs.Subject();
-        }
-        ResendComponent.prototype.resendClick = function () {
-            var _this = this;
-            this.resendInProgress = true;
-            this.resend()
-                .pipe(operators.finalize(function () {
-                _this.resendInProgress = false;
-                _this._cdRef.markForCheck();
-            }), operators.takeUntil(this._destroy$))
-                .subscribe();
-        };
-        ResendComponent.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        return ResendComponent;
-    }());
-    ResendComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ResendComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ResendComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ResendComponent, selector: "app-resend", inputs: { resend: "resend" }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"!resendInProgress else sending\">\n  Didn't receive a code? <a (click)=\"resendClick()\">Resend</a>\n</ng-container>\n<ng-template #sending>\n  <div class=\"sending\">\n    <mat-spinner [diameter]=\"12\"></mat-spinner> Sending\n  </div>\n</ng-template>\n\n", styles: ["small{color:inherit}.sending{display:inline-flex;align-items:center}.sending mat-spinner{margin-right:2px}\n"], components: [{ type: i1__namespace$2.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], 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: ResendComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'app-resend',
-                        templateUrl: './resend.component.html',
-                        styleUrls: ['./resend.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { resend: [{
-                    type: i0.Input
+    var ResendComponent = /** @class */ (function () {
+        function ResendComponent(_cdRef) {
+            this._cdRef = _cdRef;
+            this.resendInProgress = false;
+            this._destroy$ = new rxjs.Subject();
+        }
+        ResendComponent.prototype.resendClick = function () {
+            var _this = this;
+            this.resendInProgress = true;
+            this.resend()
+                .pipe(operators.finalize(function () {
+                _this.resendInProgress = false;
+                _this._cdRef.markForCheck();
+            }), operators.takeUntil(this._destroy$))
+                .subscribe();
+        };
+        ResendComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        return ResendComponent;
+    }());
+    ResendComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ResendComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ResendComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ResendComponent, selector: "app-resend", inputs: { resend: "resend" }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"!resendInProgress else sending\">\n  Didn't receive a code? <a (click)=\"resendClick()\">Resend</a>\n</ng-container>\n<ng-template #sending>\n  <div class=\"sending\">\n    <mat-spinner [diameter]=\"12\"></mat-spinner> Sending\n  </div>\n</ng-template>\n\n", styles: ["small{color:inherit}.sending{display:inline-flex;align-items:center}.sending mat-spinner{margin-right:2px}\n"], components: [{ type: i1__namespace$2.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], 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: ResendComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'app-resend',
+                        templateUrl: './resend.component.html',
+                        styleUrls: ['./resend.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { resend: [{
+                    type: i0.Input
                 }] } });
 
-    var ResendModule = /** @class */ (function () {
-        function ResendModule() {
-        }
-        return ResendModule;
-    }());
-    ResendModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ResendModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    ResendModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ResendModule, declarations: [ResendComponent], imports: [i9$1.CommonModule,
-            i1$2.MatProgressSpinnerModule], exports: [ResendComponent] });
-    ResendModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ResendModule, imports: [[
-                i9$1.CommonModule,
-                i1$2.MatProgressSpinnerModule,
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ResendModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        imports: [
-                            i9$1.CommonModule,
-                            i1$2.MatProgressSpinnerModule,
-                        ],
-                        declarations: [
-                            ResendComponent,
-                        ],
-                        exports: [
-                            ResendComponent,
-                        ],
-                    }]
+    var ResendModule = /** @class */ (function () {
+        function ResendModule() {
+        }
+        return ResendModule;
+    }());
+    ResendModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ResendModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    ResendModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ResendModule, declarations: [ResendComponent], imports: [i9$1.CommonModule,
+            i1$2.MatProgressSpinnerModule], exports: [ResendComponent] });
+    ResendModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ResendModule, imports: [[
+                i9$1.CommonModule,
+                i1$2.MatProgressSpinnerModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ResendModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i9$1.CommonModule,
+                            i1$2.MatProgressSpinnerModule,
+                        ],
+                        declarations: [
+                            ResendComponent,
+                        ],
+                        exports: [
+                            ResendComponent,
+                        ],
+                    }]
             }] });
 
-    var Fs2faVerificationResendDirective = /** @class */ (function () {
-        function Fs2faVerificationResendDirective(_button) {
-            this._button = _button;
-        }
-        Fs2faVerificationResendDirective.prototype.click = function () {
-            var _this = this;
-            this._button.disabled = true;
-            this.verification.resendCode()
-                .pipe(operators.finalize(function () { return _this._button.disabled = false; }))
-                .subscribe();
-        };
-        return Fs2faVerificationResendDirective;
-    }());
-    Fs2faVerificationResendDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationResendDirective, deps: [{ token: i6__namespace.MatButton }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    Fs2faVerificationResendDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: Fs2faVerificationResendDirective, selector: "[fs2faVerificationResend]", inputs: { verification: ["fs2faVerificationResend", "verification"] }, host: { listeners: { "click": "click()" } }, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationResendDirective, decorators: [{
-                type: i0.Directive,
-                args: [{
-                        selector: '[fs2faVerificationResend]',
-                    }]
-            }], ctorParameters: function () { return [{ type: i6__namespace.MatButton }]; }, propDecorators: { verification: [{
-                    type: i0.Input,
-                    args: ['fs2faVerificationResend']
-                }], click: [{
-                    type: i0.HostListener,
-                    args: ['click']
+    var Fs2faVerificationResendDirective = /** @class */ (function () {
+        function Fs2faVerificationResendDirective(_button) {
+            this._button = _button;
+        }
+        Fs2faVerificationResendDirective.prototype.click = function () {
+            var _this = this;
+            this._button.disabled = true;
+            this.verification.resendCode()
+                .pipe(operators.finalize(function () { return _this._button.disabled = false; }))
+                .subscribe();
+        };
+        return Fs2faVerificationResendDirective;
+    }());
+    Fs2faVerificationResendDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationResendDirective, deps: [{ token: i6__namespace.MatButton }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    Fs2faVerificationResendDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: Fs2faVerificationResendDirective, selector: "[fs2faVerificationResend]", inputs: { verification: ["fs2faVerificationResend", "verification"] }, host: { listeners: { "click": "click()" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationResendDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[fs2faVerificationResend]',
+                    }]
+            }], ctorParameters: function () { return [{ type: i6__namespace.MatButton }]; }, propDecorators: { verification: [{
+                    type: i0.Input,
+                    args: ['fs2faVerificationResend']
+                }], click: [{
+                    type: i0.HostListener,
+                    args: ['click']
                 }] } });
 
-    var Fs2faVerificationModule = /** @class */ (function () {
-        function Fs2faVerificationModule() {
-        }
-        return Fs2faVerificationModule;
-    }());
-    Fs2faVerificationModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    Fs2faVerificationModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationModule, declarations: [Fs2faVerificationComponent,
-            Fs2faVerificationCodeComponent,
-            Fs2faVerificationMethodsComponent,
-            Fs2faVerificationResendDirective], imports: [i9$1.CommonModule,
-            i8.FormsModule,
-            i5$1.MatFormFieldModule,
-            i11.MatInputModule,
-            i6.MatButtonModule,
-            i4.MatIconModule,
-            i5.MatRadioModule,
-            i6$1.MatCheckboxModule,
-            i9.FsFormModule,
-            i3$1.FsRadioGroupModule,
-            i3.FsDialogModule,
-            i11$1.FsSkeletonModule,
-            i8$1.FsPhoneModule,
-            i11$1.FsSkeletonModule,
-            ResendModule,
-            CodeInputModule], exports: [Fs2faVerificationComponent,
-            Fs2faVerificationResendDirective] });
-    Fs2faVerificationModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationModule, providers: [], imports: [[
-                i9$1.CommonModule,
-                i8.FormsModule,
-                i5$1.MatFormFieldModule,
-                i11.MatInputModule,
-                i6.MatButtonModule,
-                i4.MatIconModule,
-                i5.MatRadioModule,
-                i6$1.MatCheckboxModule,
-                i9.FsFormModule,
-                i3$1.FsRadioGroupModule,
-                i3.FsDialogModule,
-                i11$1.FsSkeletonModule,
-                i8$1.FsPhoneModule,
-                i11$1.FsSkeletonModule,
-                ResendModule,
-                CodeInputModule,
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        imports: [
-                            i9$1.CommonModule,
-                            i8.FormsModule,
-                            i5$1.MatFormFieldModule,
-                            i11.MatInputModule,
-                            i6.MatButtonModule,
-                            i4.MatIconModule,
-                            i5.MatRadioModule,
-                            i6$1.MatCheckboxModule,
-                            i9.FsFormModule,
-                            i3$1.FsRadioGroupModule,
-                            i3.FsDialogModule,
-                            i11$1.FsSkeletonModule,
-                            i8$1.FsPhoneModule,
-                            i11$1.FsSkeletonModule,
-                            ResendModule,
-                            CodeInputModule,
-                        ],
-                        declarations: [
-                            Fs2faVerificationComponent,
-                            Fs2faVerificationCodeComponent,
-                            Fs2faVerificationMethodsComponent,
-                            Fs2faVerificationResendDirective,
-                        ],
-                        exports: [
-                            Fs2faVerificationComponent,
-                            Fs2faVerificationResendDirective,
-                        ],
-                        providers: [],
-                    }]
+    var Fs2faVerificationModule = /** @class */ (function () {
+        function Fs2faVerificationModule() {
+        }
+        return Fs2faVerificationModule;
+    }());
+    Fs2faVerificationModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    Fs2faVerificationModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationModule, declarations: [Fs2faVerificationComponent,
+            Fs2faVerificationCodeComponent,
+            Fs2faVerificationMethodsComponent,
+            Fs2faVerificationResendDirective], imports: [i9$1.CommonModule,
+            i8.FormsModule,
+            i5$1.MatFormFieldModule,
+            i11.MatInputModule,
+            i6.MatButtonModule,
+            i4.MatIconModule,
+            i5.MatRadioModule,
+            i6$1.MatCheckboxModule,
+            i9.FsFormModule,
+            i3$1.FsRadioGroupModule,
+            i3.FsDialogModule,
+            i11$1.FsSkeletonModule,
+            i8$1.FsPhoneModule,
+            i11$1.FsSkeletonModule,
+            ResendModule,
+            CodeInputModule], exports: [Fs2faVerificationComponent,
+            Fs2faVerificationResendDirective] });
+    Fs2faVerificationModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationModule, providers: [], imports: [[
+                i9$1.CommonModule,
+                i8.FormsModule,
+                i5$1.MatFormFieldModule,
+                i11.MatInputModule,
+                i6.MatButtonModule,
+                i4.MatIconModule,
+                i5.MatRadioModule,
+                i6$1.MatCheckboxModule,
+                i9.FsFormModule,
+                i3$1.FsRadioGroupModule,
+                i3.FsDialogModule,
+                i11$1.FsSkeletonModule,
+                i8$1.FsPhoneModule,
+                i11$1.FsSkeletonModule,
+                ResendModule,
+                CodeInputModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i9$1.CommonModule,
+                            i8.FormsModule,
+                            i5$1.MatFormFieldModule,
+                            i11.MatInputModule,
+                            i6.MatButtonModule,
+                            i4.MatIconModule,
+                            i5.MatRadioModule,
+                            i6$1.MatCheckboxModule,
+                            i9.FsFormModule,
+                            i3$1.FsRadioGroupModule,
+                            i3.FsDialogModule,
+                            i11$1.FsSkeletonModule,
+                            i8$1.FsPhoneModule,
+                            i11$1.FsSkeletonModule,
+                            ResendModule,
+                            CodeInputModule,
+                        ],
+                        declarations: [
+                            Fs2faVerificationComponent,
+                            Fs2faVerificationCodeComponent,
+                            Fs2faVerificationMethodsComponent,
+                            Fs2faVerificationResendDirective,
+                        ],
+                        exports: [
+                            Fs2faVerificationComponent,
+                            Fs2faVerificationResendDirective,
+                        ],
+                        providers: [],
+                    }]
             }] });
 
-    var QrCodeComponent = /** @class */ (function () {
-        function QrCodeComponent(_cdRef) {
-            this._cdRef = _cdRef;
-        }
-        QrCodeComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            QRCode__default["default"].toDataURL(this.value, {
-                errorCorrectionLevel: 'H',
-                width: 300,
-                height: 300,
-            })
-                .then(function (url) {
-                _this.image = url;
-                _this._cdRef.markForCheck();
-            })
-                .catch(function (err) {
-                console.error(err);
-            });
-        };
-        return QrCodeComponent;
-    }());
-    QrCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: QrCodeComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    QrCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: QrCodeComponent, selector: "app-qr-code", inputs: { value: "value" }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"image\">\n  <img [src]=\"image\">\n</ng-container>", styles: ["img{display:flex;margin:auto}\n"], 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: QrCodeComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'app-qr-code',
-                        templateUrl: './qr-code.component.html',
-                        styleUrls: ['./qr-code.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { value: [{
-                    type: i0.Input
-                }] } });
+    var DefaultedComponent = /** @class */ (function () {
+        function DefaultedComponent() {
+        }
+        return DefaultedComponent;
+    }());
+    DefaultedComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DefaultedComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    DefaultedComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DefaultedComponent, selector: "app-defaulted", ngImport: i0__namespace, template: "<span>Default</span>", styles: ["span{font-size:75%;background-color:#02a7f0;padding:2px 4px;border-radius:4px;color:#fff}:host{display:flex}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DefaultedComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'app-defaulted',
+                        templateUrl: './defaulted.component.html',
+                        styleUrls: ['./defaulted.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }] });
 
-    var AppComponent = /** @class */ (function () {
-        function AppComponent(_data, _dialogRef, _cdRef, _message) {
-            var _this = this;
-            this._data = _data;
-            this._dialogRef = _dialogRef;
-            this._cdRef = _cdRef;
-            this._message = _message;
-            this.mode = 'qr-code';
-            this.verify = function () {
-                return _this.twoFactorManageService.verificationMethodVerify$(_this.code, true)
-                    .pipe(operators.switchMap(function () {
-                    return _this.default && _this.twoFactorManageService.verificationMethodDefault$ ?
-                        _this.twoFactorManageService.verificationMethodDefault$(_this.verificationMethod) :
-                        rxjs.of(true);
-                }), operators.tap(function () {
-                    _this._message.success('Created app authenticator verification method');
-                    _this._dialogRef.close(true);
-                }));
-            };
-        }
-        AppComponent.prototype.ngOnInit = function () {
-            this.twoFactorManageService = this._data.twoFactorManageService;
-            this.accountId = this._data.accountId;
-            this.default = !this.twoFactorManageService.hasVerificationMethods;
-        };
-        AppComponent.prototype.appTypeGoogle = function () {
-            this.appTypeSelect('google');
-        };
-        AppComponent.prototype.appTypeAuthy = function () {
-            this.appTypeSelect('authy');
-        };
-        AppComponent.prototype.appTypeSelect = function (appType) {
-            var _this = this;
-            this.appType = appType;
-            this.twoFactorManageService.verificationMethodCreate$({
-                type: exports.VerificationMethodType.App,
-            })
-                .subscribe(function (verificationMethod) {
-                _this.verificationMethod = verificationMethod;
-                _this.qrCodeUrl = verificationMethod.qrCodeUrl;
-                _this._cdRef.markForCheck();
-            });
-        };
-        AppComponent.prototype.codeCompleted = function () {
-            this.form.triggerSubmit();
-        };
-        AppComponent.prototype.codeChanged = function (code) {
-            this.code = code;
-            this.form.dirty();
-        };
-        AppComponent.prototype.next = function () {
-            this.mode = 'code-input';
-        };
-        return AppComponent;
-    }());
-    AppComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace.FsMessage }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AppComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppComponent, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: i9.FsFormDirective, descendants: true }], ngImport: i0__namespace, template: "<form fsForm [submit]=\"verify\">\n  <fs-dialog>\n    <h1 mat-dialog-title>Authenticator App Setup</h1>\n    <mat-dialog-content>\n\n      <div *ngIf=\"mode === 'qr-code'\" class=\"qr-code\">\n        <ng-container *ngIf=\"appType\">\n          <ol>\n            <li>\n              <ng-container *ngIf=\"appType === 'authy'\">\n                Install the Authy Authenticator App from the <a href=\"https://apps.apple.com/us/app/authy/id494168017\" target=\"_blank\">App Store</a> or\n                the <a href=\"https://play.google.com/store/apps/details?id=com.authy.authy\" target=\"_blank\">Google Play Store</a>.\n              </ng-container>\n\n              <ng-container *ngIf=\"appType === 'google'\">\n                Install the Google Authenticator App from the <a href=\"https://apps.apple.com/us/app/google-authenticator/id388497605\" target=\"_blank\">App Store</a> or\n                the <a href=\"https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en_US&gl=US\" target=\"_blank\">Google Play Store</a>.\n              </ng-container>\n            </li>\n            <ng-container *ngIf=\"appType === 'authy'\">\n              <li>\n                Open the Authy app and select <b>Add Account</b>.\n              </li>\n              <li>\n                Select <b>Scan QR Code</b> and scan the QR code below.\n              </li>\n            </ng-container>         \n            <ng-container *ngIf=\"appType === 'google'\">\n              <li>\n                Open the Google Authentictor app and click the <b>Plus icon</b> in the lower right corner.\n              </li>\n              <li>\n                Select <b>Scan a QR code</b> and scan the QR code below.\n              </li>\n            </ng-container>\n          </ol>\n\n          <ng-container *fsSkeleton=\"qrCodeUrl\">\n            <app-qr-code\n              [value]=\"qrCodeUrl\">\n            </app-qr-code>\n          </ng-container>\n        </ng-container>\n\n        <div class=\"app-types\" *ngIf=\"!appType\">\n          <p>Select the Authenticator App you prefer</p>\n\n          <div class=\"row\">\n            <span>\n              <a (click)=\"appTypeAuthy()\">\n                <svg width=\"50\" height=\"50\" viewBox=\"0 0 256 256\" xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMidYMid\"><path d=\"M256 127.998C256 198.696 198.694 256 127.997 256 57.304 256 0 198.696 0 127.998 0 57.305 57.304 0 127.997 0 198.694 0 256 57.305 256 127.998z\" fill=\"#EC1C24\"/><path d=\"M117.024 100.89l30.691 30.68c4.43 4.436 11.623 4.436 16.064 0 4.431-4.435 4.441-11.622 0-16.058L133.086 84.82C111.125 62.854 75.631 62.5 53.204 83.704a9.536 9.536 0 0 0-.605.548c-.098.098-.178.202-.275.29-.1.096-.202.182-.297.278-.194.193-.371.396-.54.597-21.215 22.437-20.85 57.932 1.113 79.897L83.292 196c4.44 4.433 11.623 4.433 16.062 0 4.442-4.437 4.442-11.633.011-16.06l-30.693-30.691c-13.398-13.393-13.488-35.129-.278-48.637 13.506-13.21 35.23-13.114 48.63.279zm39.612-40.873c-4.435 4.437-4.435 11.623.012 16.059l30.681 30.693c13.39 13.392 13.477 35.125.268 48.636-13.51 13.2-35.227 13.112-48.623-.282l-30.692-30.689c-4.438-4.437-11.633-4.437-16.066 0-4.443 4.433-4.443 11.642 0 16.065l30.682 30.694c21.968 21.965 57.458 22.322 79.889 1.116.208-.184.404-.355.61-.549.094-.095.182-.192.273-.29.1-.095.197-.183.29-.289.197-.183.365-.384.54-.594 21.215-22.428 20.86-57.911-1.102-79.889l-30.692-30.682c-4.436-4.443-11.638-4.443-16.07.001z\" fill=\"#FFF\"/></svg>\n              </a>\n              Authy\n            </span>\n            \n            <span>\n              <a (click)=\"appTypeGoogle()\">          \n                <svg width=\"50\"  height=\"50\" viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"m457.07 45.92c73.67-8.62 149.41.22 218.93 26.24 62.75 23.47 120.59 60.41 167.72 108.09-40.31 39.97-80.25 80.31-120.51 120.33-25.95-25.45-56.19-46.65-89.47-61.37-44.22-19.82-93.39-28.54-141.72-25.2-54.6 3.52-108.11 22.49-152.63 54.3-55.24 38.95-96.61 97.22-114.8 162.35-13.64 47.78-14.77 98.97-3.76 147.4 8.85 39.61 26.09 77.29 50.05 110.03 22.24 30.45 50.3 56.64 82.22 76.71 36.79 23.24 78.76 38.22 121.96 43.48 37.02 4.65 74.9 2.23 111.05-7 3.97-1.91 6.24 2.61 8.73 4.86 40.74 40.95 81.68 81.7 122.43 122.63-73.31 35.6-155.99 51.86-237.3 46.12-68.05-4.51-135.07-24.08-194.71-57.18-24.87-13.6-48.23-29.82-70.33-47.54-17.46-14.81-34.71-30.01-49.72-47.35-25.41-27.39-47.21-58.11-65.17-90.87-4-7.72-8.64-15.12-11.9-23.2-4.47-9.05-8.37-18.36-12.25-27.67-4.96-13.27-10.26-26.44-13.88-40.15-.43-1.81-1.53-3.33-2.52-4.85-8.3-28.66-12.95-58.33-15.44-88.04-2.62-37.36-1.33-75.05 4.78-112.03 12.18-75.48 43.41-147.74 89.86-208.44 30.12-39.5 66.53-74.21 107.46-102.35 62.44-43.11 135.53-70.69 210.92-79.3m49.18 50.48c-5.7.99-10.96 3.76-15.38 7.43-10.4 8.93-14.14 24.81-8.17 37.28 6.33 15.02 25.16 23.1 40.36 17 15.43-5.24 24.78-23.51 19.74-39.06-4.1-15.43-20.92-25.79-36.55-22.65m-267.96 111.99c-5.33.28-10.59 1.92-15.16 4.68-11.47 7.03-17.88 21.74-14.36 34.86 3.09 14.08 16.78 25.06 31.26 24.61 15.03.41 29.08-11.39 31.54-26.17 2.24-10.33-1.61-21.55-9.14-28.85-6.24-6.33-15.3-9.62-24.14-9.13m-115.96 272c-6.62 1.23-12.84 4.58-17.54 9.4-9.45 9.72-11.72 25.57-5.02 37.42 7.16 13.96 25.48 20.86 39.98 14.62 15.02-5.51 23.99-23.42 19.06-38.71-4.04-15.41-20.86-25.96-36.48-22.73m111.98 272.05c-11.49 1.95-21.48 10.72-24.84 21.88-3.87 11.63-.13 25.16 8.9 33.36 6.15 5.48 14.4 8.7 22.67 8.32 11.16-.25 21.98-6.87 27.12-16.8 4.93-8.83 5.15-20.02.71-29.1-5.82-12.78-20.81-20.33-34.56-17.66m272.06 112.03c-11.76 2.02-21.92 11.07-25.09 22.6-3.87 12.57 1.13 27.25 11.91 34.79 7.86 5.79 18.42 7.67 27.77 4.86 9.61-2.77 17.7-10.24 21.07-19.68 4.97-12.74.36-28.32-10.58-36.46-7.02-5.45-16.35-7.67-25.08-6.11z\" fill=\"#a0a0a0\"/>\n                  <g fill=\"#c1c1c1\">\n                    <path d=\"m506.25 96.4c15.63-3.14 32.45 7.22 36.55 22.65 5.04 15.55-4.31 33.82-19.74 39.06-15.2 6.1-34.03-1.98-40.36-17-5.97-12.47-2.23-28.35 8.17-37.28 4.42-3.67 9.68-6.44 15.38-7.43z\"/>\n                    <path d=\"m122.33 480.39c15.62-3.23 32.44 7.32 36.48 22.73 4.93 15.29-4.04 33.2-19.06 38.71-14.5 6.24-32.82-.66-39.98-14.62-6.7-11.85-4.43-27.7 5.02-37.42 4.7-4.82 10.92-8.17 17.54-9.4z\"/>\n                  </g>\n                  <path d=\"m843.72 180.25.11-.11c24.64 25.12 46.96 52.6 65.61 82.47 36.01 57.16 59.38 122.22 67.87 189.25 5.67 44.88 5.27 90.6-2.05 135.27-12.7 80.01-46.94 156.41-97.9 219.36-42.3 52.48-95.87 96.04-156.41 125.76l-.63-.26c-1.01-1.1-2.03-2.16-3.05-3.22-40.75-40.93-81.69-81.68-122.43-122.63-2.49-2.25-4.76-6.77-8.73-4.86-36.15 9.23-74.03 11.65-111.05 7-43.2-5.26-85.17-20.24-121.96-43.48-31.92-20.07-59.98-46.26-82.22-76.71-23.96-32.74-41.2-70.42-50.05-110.03-11.01-48.43-9.88-99.62 3.76-147.4 18.19-65.13 59.56-123.4 114.8-162.35 44.52-31.81 98.03-50.78 152.63-54.3 48.33-3.34 97.5 5.38 141.72 25.2 33.28 14.72 63.52 35.92 89.47 61.37 40.26-40.02 80.2-80.36 120.51-120.33m-351.75 183.97c-21.23 2.85-41.89 10.28-59.88 21.94-23.08 14.45-41.76 35.58-53.9 59.91-14.58 29.2-18.64 63.21-12.5 95.17 3.93 19.85 12.03 38.88 23.56 55.51 7.93 11.52 17.65 21.66 27.65 31.38 57.33 57.41 114.61 114.86 171.99 172.21 49.09-13.07 94.67-38.94 131.05-74.4 45.11-43.34 75.66-101.44 86.31-163.06.24-1.04.22-2.91 1.85-2.6 29.63.04 59.26-.01 88.9.05 19.04-.3 36.87-14.77 40.76-33.46.22-1.21 0-2.32-.67-3.35 1.22-5.71 2.08-11.58 1.38-17.43l-.24.4c-2.05-20.34-20.84-37.12-41.25-37.17-80.64-.07-161.28-.01-241.93-.07-6.44-22.08-18.5-42.33-34.03-59.23-25.8-27.5-62.26-45.01-100.02-46.82-9.68.02-19.44-.54-29.03 1.02m286.37 388.31c-12.64 2.06-23.37 12.59-25.7 25.18-1.48 8.14-.14 17.02 4.73 23.85 5.76 9.2 16.8 14.76 27.61 14.25 8.32.03 16.28-3.95 22.16-9.66 4.87-5.6 8.45-12.67 8.67-20.2.86-11.37-5.06-23.1-14.87-28.96-6.52-4.46-14.89-5.75-22.6-4.46z\" fill=\"#686868\"/>\n                  <path d=\"m238.29 208.39c8.84-.49 17.9 2.8 24.14 9.13 7.53 7.3 11.38 18.52 9.14 28.85-2.46 14.78-16.51 26.58-31.54 26.17-14.48.45-28.17-10.53-31.26-24.61-3.52-13.12 2.89-27.83 14.36-34.86 4.57-2.76 9.83-4.4 15.16-4.68z\" fill=\"#c3c3c3\"/>\n                  <path d=\"m491.97 364.22c9.59-1.56 19.35-1 29.03-1.02 37.76 1.81 74.22 19.32 100.02 46.82 15.53 16.9 27.59 37.15 34.03 59.23-47.67-.01-95.35-.01-143.03-.01-12.19-.11-24.23 5.42-32.21 14.61-6.01 6.85-9.74 15.65-10.44 24.74-1.19 14.17 5.36 28.7 16.69 37.28 7.62 5.91 17.28 9 26.92 8.8 126.69-.04 253.39-.06 380.08.03 4.76.04 9.59-.15 14.2-1.48 14.21-3.82 26.02-15.47 29.83-29.7.67 1.03.89 2.14.67 3.35-3.89 18.69-21.72 33.16-40.76 33.46-29.64-.06-59.27-.01-88.9-.05-1.63-.31-1.61 1.56-1.85 2.6-10.65 61.62-41.2 119.72-86.31 163.06-36.38 35.46-81.96 61.33-131.05 74.4-57.38-57.35-114.66-114.8-171.99-172.21-10-9.72-19.72-19.86-27.65-31.38-11.53-16.63-19.63-35.66-23.56-55.51-6.14-31.96-2.08-65.97 12.5-95.17 12.14-24.33 30.82-45.46 53.9-59.91 17.99-11.66 38.65-19.09 59.88-21.94z\" fill=\"#474747\"/>\n                  <g fill=\"#bfbfbf\">\n                    <path d=\"m479.81 483.85c7.98-9.19 20.02-14.72 32.21-14.61 47.68 0 95.36 0 143.03.01 80.65.06 161.29 0 241.93.07 20.41.05 39.2 16.83 41.25 37.17-.19.33-.58.97-.78 1.29-3.68-18.51-21.57-33.16-40.47-33.05-124.97.1-249.94.12-374.91.17-7.73.13-15.74-.8-23.15 1.96-9.06 2.84-16.73 9.1-22.27 16.7-3.34 4.55-4.39 10.24-7.28 15.03.7-9.09 4.43-17.89 10.44-24.74z\"/>\n                    <path d=\"m234.31 752.44c13.75-2.67 28.74 4.88 34.56 17.66 4.44 9.08 4.22 20.27-.71 29.1-5.14 9.93-15.96 16.55-27.12 16.8-8.27.38-16.52-2.84-22.67-8.32-9.03-8.2-12.77-21.73-8.9-33.36 3.36-11.16 13.35-19.93 24.84-21.88z\"/>\n                  </g>\n                  <path d=\"m498.92 476.86c7.41-2.76 15.42-1.83 23.15-1.96 124.97-.05 249.94-.07 374.91-.17 18.9-.11 36.79 14.54 40.47 33.05.2-.32.59-.96.78-1.29l.24-.4c.7 5.85-.16 11.72-1.38 17.43-3.81 14.23-15.62 25.88-29.83 29.7-4.61 1.33-9.44 1.52-14.2 1.48-126.69-.09-253.39-.07-380.08-.03-9.64.2-19.3-2.89-26.92-8.8-11.33-8.58-17.88-23.11-16.69-37.28 2.89-4.79 3.94-10.48 7.28-15.03 5.54-7.6 13.21-13.86 22.27-16.7z\" fill=\"#b0b0b0\"/>\n                  <path d=\"m59.49 636.08c.99 1.52 2.09 3.04 2.52 4.85 3.62 13.71 8.92 26.88 13.88 40.15 3.88 9.31 7.78 18.62 12.25 27.67 3.26 8.08 7.9 15.48 11.9 23.2 17.96 32.76 39.76 63.48 65.17 90.87 15.01 17.34 32.26 32.54 49.72 47.35 22.1 17.72 45.46 33.94 70.33 47.54 59.64 33.1 126.66 52.67 194.71 57.18 81.31 5.74 163.99-10.52 237.3-46.12 1.02 1.06 2.04 2.12 3.05 3.22l.03.61c-42.32 21.03-87.88 35.53-134.56 42.91-56.91 8.9-115.46 7.49-171.82-4.5-67.89-14.35-132.42-44.21-187.42-86.51-63.52-48.63-114.32-113.73-145.86-187.27-8.42-19.87-15.93-40.22-21.2-61.15z\" fill=\"#939393\"/>\n                  <path d=\"m778.34 752.53c7.71-1.29 16.08 0 22.6 4.46 9.81 5.86 15.73 17.59 14.87 28.96-.22 7.53-3.8 14.6-8.67 20.2-5.88 5.71-13.84 9.69-22.16 9.66-10.81.51-21.85-5.05-27.61-14.25-4.87-6.83-6.21-15.71-4.73-23.85 2.33-12.59 13.06-23.12 25.7-25.18z\" fill=\"#767676\"/>\n                  <path d=\"m506.37 864.47c8.73-1.56 18.06.66 25.08 6.11 10.94 8.14 15.55 23.72 10.58 36.46-3.37 9.44-11.46 16.91-21.07 19.68-9.35 2.81-19.91.93-27.77-4.86-10.78-7.54-15.78-22.22-11.91-34.79 3.17-11.53 13.33-20.58 25.09-22.6z\" fill=\"#bebebe\"/>\n                </svg>\n              </a>\n              Google Authenticator\n            </span>\n          </div>\n        </div>\n     \n      </div>\n\n      <div *ngIf=\"mode === 'code-input'\" class=\"code-input\">\n        <div>\n          Enter the 6-digit code you see in the App.\n        </div>\n\n        <app-code-input\n          [codeLength]=\"6\"\n          (codeChanged)=\"codeChanged($event)\">\n        </app-code-input>\n        \n        <div class=\"checkboxes\">\n          <mat-checkbox name=\"default\" [(ngModel)]=\"default\" [disableRipple]=\"true\">\n            Make this the default 2-step verification method\n          </mat-checkbox>\n        </div>\n      </div>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <ng-container *ngIf=\"appType\">\n        <button\n            *ngIf=\"mode === 'qr-code'\"\n            type=\"button\"\n            mat-button\n            color=\"primary\"\n            (click)=\"next()\">\n          Next\n        </button>\n        <button\n            *ngIf=\"mode === 'code-input'\"\n            type=\"submit\"\n            mat-button\n            color=\"primary\"\n            (click)=\"next()\">\n          Verify\n        </button>      \n      </ng-container>\n      <button\n          type=\"button\"\n          mat-button\n          [mat-dialog-close]=\"null\">\n        Cancel\n      </button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: ["ul{margin:0;padding-left:24px}qr-code{display:flex;justify-content:center;margin:30px}app-code-input{margin-top:10px}.code-input{width:400px}.app-types{text-align:center;padding:0 40px}.app-types .row{display:flex;justify-content:center}.app-types .row span{display:flex;flex-direction:column;text-align:center;max-width:100px}.app-types .row span+span{margin-left:40px}.checkboxes{margin:8px 0}.checkboxes mat-checkbox{display:block}\n"], components: [{ type: i3__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: QrCodeComponent, selector: "app-qr-code", inputs: ["value"] }, { type: CodeInputComponent, selector: "app-code-input", inputs: ["codeLength", "code"], outputs: ["codeCompleted", "codeChanged"] }, { type: i6__namespace$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: 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: i8__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i8__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i8__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { 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: i9__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11__namespace.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i8__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9__namespace.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])" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i9__namespace.FsSubmitButtonDirective, selector: "button[type=\"submit\"]", inputs: ["name", "dirtySubmit"] }, { 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: AppComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        templateUrl: './app.component.html',
-                        styleUrls: ['./app.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [i1.MAT_DIALOG_DATA]
-                        }] }, { type: i1__namespace.MatDialogRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace.FsMessage }];
-        }, propDecorators: { form: [{
-                    type: i0.ViewChild,
-                    args: [i9.FsFormDirective]
-                }] } });
+    var DefautledModule = /** @class */ (function () {
+        function DefautledModule() {
+        }
+        return DefautledModule;
+    }());
+    DefautledModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DefautledModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    DefautledModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DefautledModule, declarations: [DefaultedComponent], exports: [DefaultedComponent] });
+    DefautledModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DefautledModule });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DefautledModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [
+                            DefaultedComponent,
+                        ],
+                        exports: [DefaultedComponent],
+                    }]
+            }] });
 
-    var EmailComponent = /** @class */ (function () {
-        function EmailComponent(_data, _dialogRef, _cdRef, _message) {
-            var _this = this;
-            this._data = _data;
-            this._dialogRef = _dialogRef;
-            this._cdRef = _cdRef;
-            this._message = _message;
-            this.verificationMethod = null;
-            this.trustDevice = true;
-            this.resend = function () {
-                return _this.twoFactorManageService.verificationMethodResend()
-                    .pipe(operators.tap(function () {
-                    _this._message.success('Resent verification code');
-                }));
-            };
-            this.submit = function () {
-                return rxjs.of(true)
-                    .pipe(operators.switchMap(function () {
-                    return _this.verificationMethod ?
-                        _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$({
-                            type: exports.VerificationMethodType.Email,
-                            email: _this.email,
-                            default: _this.default,
-                        })
-                            .pipe(operators.tap(function (verificationMethod) {
-                            _this.verificationMethod = verificationMethod;
-                            _this.form.clear();
-                            _this._cdRef.markForCheck();
-                        }));
-                }));
-            };
-            this.twoFactorManageService = _data.twoFactorManageService;
-            this.default = !this.twoFactorManageService.hasVerificationMethods;
-        }
-        EmailComponent.prototype.codeCompleted = function () {
-            if (!this.form.submitting) {
-                this.form.triggerSubmit();
-            }
-        };
-        EmailComponent.prototype.codeChanged = function (code) {
-            this.code = code;
-        };
-        return EmailComponent;
-    }());
-    EmailComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EmailComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace.FsMessage }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    EmailComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EmailComponent, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: i9.FsFormDirective, descendants: true }], ngImport: i0__namespace, template: "<form fsForm [submit]=\"submit\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Email Setup\n    </h1>\n    <mat-dialog-content>\n      <ng-container *ngIf=\"verificationMethod; else notVerificationMethod\">\n        <fs-2fa-verification\n          [verificationMethod]=\"verificationMethod\"\n          (codeChanged)=\"codeChanged($event)\"\n          [resend]=\"resend\"\n          [(trustDevice)]=\"trustDevice\">\n        </fs-2fa-verification>\n      </ng-container>\n\n      <ng-template #notVerificationMethod>\n        <p>The app will only use this email for verifying your account security. </p>\n        <mat-form-field>\n          <mat-label>Email</mat-label>\n          <input\n            matInput\n            [required]=\"true\"\n            [(ngModel)]=\"email\"\n            [fsFormEmail]=\"true\"\n            name=\"email\">\n        </mat-form-field>\n        <mat-checkbox \n            name=\"default\"\n            [(ngModel)]=\"default\"\n            [disableRipple]=\"true\">\n          Make this the default 2-step verification method\n        </mat-checkbox>\n      </ng-template>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button\n          mat-button\n          color=\"primary\"\n          type=\"submit\">\n        Next\n      </button>\n      <button\n          mat-button\n          type=\"button\"\n          [mat-dialog-close]=\"undefined\">\n        Cancel\n      </button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: [":host ::ng-deep mat-checkbox .mat-ripple{display:none}mat-form-field{width:100%}mat-dialog-content{width:400px}p{margin-top:0}app-code-input{margin-bottom:5px;display:block}\n"], components: [{ type: i3__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: Fs2faVerificationComponent, selector: "fs-2fa-verification", inputs: ["verificationMethod", "resend", "showTrustedDevice", "trustDevice", "trustDays", "formatRecipient", "getVerificationMethods", "selectVerificationMethod"], outputs: ["verified", "codeChanged", "codeCompleted", "trustDeviceChange"] }, { type: i5__namespace$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i6__namespace$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: 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: i8__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i8__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i8__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { 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: i9__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.MatLabel, selector: "mat-label" }, { type: i11__namespace$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i8__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i8__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i8__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9__namespace.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i9__namespace.FsFormEmailDirective, selector: "[fsFormEmail]", inputs: ["fsFormEmail", "fsFormEmailMessage"] }, { type: i9__namespace.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])" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i9__namespace.FsSubmitButtonDirective, selector: "button[type=\"submit\"]", inputs: ["name", "dirtySubmit"] }, { 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: EmailComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        templateUrl: './email.component.html',
-                        styleUrls: ['./email.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [i1.MAT_DIALOG_DATA]
-                        }] }, { type: i1__namespace.MatDialogRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace.FsMessage }];
-        }, propDecorators: { form: [{
-                    type: i0.ViewChild,
-                    args: [i9.FsFormDirective, { static: false }]
+    var VerificationMethodsComponent = /** @class */ (function () {
+        function VerificationMethodsComponent(_prompt) {
+            this._prompt = _prompt;
+            this.deleted = new i0.EventEmitter();
+            this.VerificationMethodType = exports.VerificationMethodType;
+        }
+        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.hasVerificationMethodDefault)) {
+                this.verificationMethodDefault = function (verificationMethod) {
+                    return _this.twoFactorManageService.verificationMethodDefault$(verificationMethod);
+                };
+            }
+            if (!this.verificationMethodDelete && ((_b = this.twoFactorManageService) === null || _b === void 0 ? void 0 : _b.hasVerificationMethodDelete)) {
+                this.verificationMethodDelete = function (verificationMethod) {
+                    return _this.twoFactorManageService.verificationMethodDelete$(verificationMethod);
+                };
+            }
+            if (!this.verificationMethodsFetch && ((_c = this.twoFactorManageService) === null || _c === void 0 ? void 0 : _c.hasVerificationMethodsFetch)) {
+                this.verificationMethodsFetch = function (query) {
+                    return _this.twoFactorManageService.verificationMethodsFetch$(query);
+                };
+            }
+            if (!this.accountVerify && ((_d = this.twoFactorManageService) === null || _d === void 0 ? void 0 : _d.hasVerificationMethodVerify)) {
+                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 (data) {
+                            return !!_this.verificationMethodDefault && !data.default;
+                        },
+                        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.accountVerify(); }), operators.switchMap(function () { return _this.verificationMethodDelete(verificationMethod); }))
+                                .subscribe(function () {
+                                _this.deleted.emit();
+                                _this.list.reload();
+                            });
+                        },
+                        show: function () {
+                            return !!_this.verificationMethodDelete;
+                        },
+                        label: 'Delete',
+                    },
+                ],
+                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 !_this.type || verificationMethod.type === _this.type;
+                        }),
+                    }); }));
+                },
+            };
+        };
+        VerificationMethodsComponent.prototype.reload = function () {
+            this.list.reload();
+        };
+        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: { 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$1.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": i8__namespace$1.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]
+                }], 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
                 }] } });
 
-    var NumberComponent = /** @class */ (function () {
-        function NumberComponent(_data, _dialogRef, _cdRef, _message) {
-            var _this = this;
-            this._data = _data;
-            this._dialogRef = _dialogRef;
-            this._cdRef = _cdRef;
-            this._message = _message;
-            this.trustDevice = true;
-            this.verificationMethod = null;
-            this.resend = function () {
-                return _this.twoFactorManageService.verificationMethodResend()
-                    .pipe(operators.tap(function () {
-                    _this._message.success('Resent verification code');
-                }));
-            };
-            this.submit = function () {
-                return rxjs.of(true)
-                    .pipe(operators.switchMap(function () {
-                    return _this.verificationMethod ?
-                        _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$({
-                            type: exports.VerificationMethodType.Sms,
-                            phoneNumber: _this.phone.number,
-                            phoneCode: _this.phone.countryCode,
-                            phoneCountry: _this.phone.isoCode,
-                            default: _this.default,
-                        })
-                            .pipe(operators.tap(function (verificationMethod) {
-                            _this.verificationMethod = verificationMethod;
-                            _this.form.clear();
-                            _this._cdRef.markForCheck();
-                        }));
-                }));
-            };
-            this.twoFactorManageService = _data.twoFactorManageService;
-            this.defaultCountry = _data.defaultCountry;
-            this.default = !this.twoFactorManageService.hasVerificationMethods;
-        }
-        NumberComponent.prototype.codeCompleted = function () {
-            if (!this.form.submitting) {
-                this.form.triggerSubmit();
-            }
-        };
-        NumberComponent.prototype.codeChanged = function (code) {
-            this.code = code;
-        };
-        return NumberComponent;
-    }());
-    NumberComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumberComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace.FsMessage }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NumberComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NumberComponent, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: i9.FsFormDirective, descendants: true }], ngImport: i0__namespace, template: "<form fsForm [submit]=\"submit\" [autocomplete]=\"false\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Text Message Setup\n    </h1>\n    <mat-dialog-content>\n      <ng-container *ngIf=\"verificationMethod; else notVerificationMethod\">\n        <fs-2fa-verification\n          [verificationMethod]=\"verificationMethod\"\n          (codeChanged)=\"codeChanged($event)\"\n          [resend]=\"resend\"\n          [formatRecipient]=\"true\"\n          [(trustDevice)]=\"trustDevice\">\n        </fs-2fa-verification>\n      </ng-container>\n\n      <ng-template #notVerificationMethod>\n        <p>The app will only use this number for verifying your account security. Message and data rates may apply by your cell phone provider.</p>\n        <mat-form-field>\n          <mat-label>Phone number</mat-label>\n          <fs-phone-field\n            [(ngModel)]=\"phone\"\n            [country]=\"defaultCountry\"\n            name=\"phone\"\n            [mode]=\"'object'\"\n            autocomplete=\"off\"\n            [required]=\"true\">\n          </fs-phone-field>\n        </mat-form-field>\n        <mat-checkbox \n            name=\"default\"\n            [(ngModel)]=\"default\"\n            [disableRipple]=\"true\">\n          Make this the default 2-step verification method\n        </mat-checkbox>\n      </ng-template>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button\n          mat-button\n          color=\"primary\"\n          type=\"submit\">\n        Next\n      </button>\n      <button\n          mat-button\n          type=\"button\"\n          [mat-dialog-close]=\"undefined\">\n        Cancel\n      </button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: [":host ::ng-deep mat-checkbox .mat-ripple{display:none}app-code-input{margin-bottom:5px;display:block}mat-form-field{width:100%}mat-dialog-content{width:400px}p{margin-top:0}h1{display:flex;align-items:center}h1 mat-icon{margin-right:5px}\n"], components: [{ type: i3__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: Fs2faVerificationComponent, selector: "fs-2fa-verification", inputs: ["verificationMethod", "resend", "showTrustedDevice", "trustDevice", "trustDays", "formatRecipient", "getVerificationMethods", "selectVerificationMethod"], outputs: ["verified", "codeChanged", "codeCompleted", "trustDeviceChange"] }, { type: i5__namespace$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i8__namespace$1.FsPhoneFieldComponent, selector: "fs-phone-field", inputs: ["allowNumberExt", "placeholder", "required", "disabled", "mode", "country", "name"] }, { type: i6__namespace$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: 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: i8__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i8__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i8__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { 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: i9__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.MatLabel, selector: "mat-label" }, { type: i8__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9__namespace.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i8__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i9__namespace.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])" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i9__namespace.FsSubmitButtonDirective, selector: "button[type=\"submit\"]", inputs: ["name", "dirtySubmit"] }, { 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: NumberComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        templateUrl: './number.component.html',
-                        styleUrls: ['./number.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [i1.MAT_DIALOG_DATA]
-                        }] }, { type: i1__namespace.MatDialogRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace.FsMessage }];
-        }, propDecorators: { form: [{
-                    type: i0.ViewChild,
-                    args: [i9.FsFormDirective, { static: false }]
+    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,
+            i8$1.FsPhoneModule,
+            i4$1.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,
+                i8$1.FsPhoneModule,
+                i4$1.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,
+                            i8$1.FsPhoneModule,
+                            i4$1.FsCountryModule,
+                            DefautledModule,
+                        ],
+                        declarations: [
+                            VerificationMethodsComponent,
+                        ],
+                        exports: [VerificationMethodsComponent],
+                    }]
+            }] });
+
+    var QrCodeComponent = /** @class */ (function () {
+        function QrCodeComponent(_cdRef) {
+            this._cdRef = _cdRef;
+        }
+        QrCodeComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            QRCode__default["default"].toDataURL(this.value, {
+                errorCorrectionLevel: 'H',
+                width: 300,
+                height: 300,
+            })
+                .then(function (url) {
+                _this.image = url;
+                _this._cdRef.markForCheck();
+            })
+                .catch(function (err) {
+                console.error(err);
+            });
+        };
+        return QrCodeComponent;
+    }());
+    QrCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: QrCodeComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    QrCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: QrCodeComponent, selector: "app-qr-code", inputs: { value: "value" }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"image\">\n  <img [src]=\"image\">\n</ng-container>", styles: ["img{display:flex;margin:auto}\n"], 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: QrCodeComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'app-qr-code',
+                        templateUrl: './qr-code.component.html',
+                        styleUrls: ['./qr-code.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { value: [{
+                    type: i0.Input
                 }] } });
 
-    var TwoFactorManageService = /** @class */ (function () {
-        function TwoFactorManageService(_dialog) {
-            this._dialog = _dialog;
-            this._destroy$ = new rxjs.Subject();
-            this._verificationMethods$ = new rxjs.BehaviorSubject([]);
-        }
-        Object.defineProperty(TwoFactorManageService.prototype, "verificationMethods$", {
-            get: function () {
-                return this._verificationMethods$
-                    .pipe(operators.takeUntil(this._destroy$));
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TwoFactorManageService.prototype, "verificationMethods", {
-            get: function () {
-                return this._verificationMethods$.getValue();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TwoFactorManageService.prototype, "hasVerificationMethods", {
-            get: function () {
-                return !!this._verificationMethods$.getValue().length;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TwoFactorManageService.prototype, "emailVerificationMethods", {
-            get: function () {
-                return this.getVerificationMethods(exports.VerificationMethodType.Email);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TwoFactorManageService.prototype, "smsVerificationMethods", {
-            get: function () {
-                return this.getVerificationMethods(exports.VerificationMethodType.Sms);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TwoFactorManageService.prototype, "appVerificationMethods", {
-            get: function () {
-                return this.getVerificationMethods(exports.VerificationMethodType.App);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        TwoFactorManageService.prototype.getVerificationMethods = function (type) {
-            return this.verificationMethods
-                .filter(function (verificationMethod) {
-                return verificationMethod.type === type;
-            });
-        };
-        TwoFactorManageService.prototype.hasVerificationMethod = function (type) {
-            return this.verificationMethods
-                .some(function (verificationMethod) {
-                return verificationMethod.type === type;
-            });
-        };
-        TwoFactorManageService.prototype.registerVerificationMethodDefault = function (value) {
-            this._verificationMethodDefault = value;
-        };
-        TwoFactorManageService.prototype.registerVerificationMethodResend = function (value) {
-            this._verificationMethodResend = value;
-        };
-        TwoFactorManageService.prototype.registerVerificationMethodsFetch = function (value) {
-            this._verificationMethodsFetch = value;
-        };
-        TwoFactorManageService.prototype.registerVerificationMethodDelete = function (value) {
-            this._verificationMethodDelete = value;
-        };
-        TwoFactorManageService.prototype.registerVerificationMethodCreate = function (value) {
-            this._verificationMethodCreate = value;
-        };
-        TwoFactorManageService.prototype.registerVerificationMethodVerify = function (value) {
-            this._verificationMethodVerify = value;
-        };
-        TwoFactorManageService.prototype.registerAccountVerify = function (value) {
-            this._accountVerify = value;
-        };
-        Object.defineProperty(TwoFactorManageService.prototype, "hasVerificationMethodResend", {
-            get: function () {
-                return !!this._verificationMethodResend;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TwoFactorManageService.prototype, "hasVerificationMethodDefault", {
-            get: function () {
-                return !!this._verificationMethodDefault;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TwoFactorManageService.prototype, "hasVerificationMethodsFetch", {
-            get: function () {
-                return !!this._verificationMethodsFetch;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TwoFactorManageService.prototype, "hasVerificationMethodDelete", {
-            get: function () {
-                return !!this._verificationMethodDelete;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TwoFactorManageService.prototype, "hasVerificationMethodCreate", {
-            get: function () {
-                return !!this._verificationMethodCreate;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TwoFactorManageService.prototype, "hasVerificationMethodVerify", {
-            get: function () {
-                return !!this._verificationMethodVerify;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        TwoFactorManageService.prototype.verificationMethodDelete$ = function (verificationMethod) {
-            var _this = this;
-            return this._verificationMethodDelete(verificationMethod)
-                .pipe(operators.tap(function () {
-                _this.verificationMethodsFetch();
-            }));
-        };
-        TwoFactorManageService.prototype.verificationMethodVerify$ = function (code, trustDevice) {
-            var _this = this;
-            return this._verificationMethodVerify(code, trustDevice)
-                .pipe(operators.tap(function () {
-                _this.verificationMethodsFetch();
-            }));
-        };
-        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.verificationMethodsFetch = function (query) {
-            this.verificationMethodsFetch$(query)
-                .subscribe();
-        };
-        TwoFactorManageService.prototype.verificationMethodsFetch$ = function (query) {
-            var _this = this;
-            return this._verificationMethodsFetch(query)
-                .pipe(operators.tap(function (verificationMethods) {
-                _this._verificationMethods$.next(verificationMethods);
-            }));
-        };
-        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) {
-            var _this = this;
-            return this.accountVerify$()
-                .pipe(operators.switchMap(function () { return _this._dialog.open(NumberComponent, {
-                data: {
-                    defaultCountry: defaultCountry,
-                    twoFactorManageService: _this,
-                },
-            })
-                .afterClosed(); }), operators.tap(function () {
-                _this.verificationMethodsFetch();
-            }), operators.takeUntil(this._destroy$));
-        };
-        TwoFactorManageService.prototype.addEmail$ = function () {
-            var _this = this;
-            return this.accountVerify$()
-                .pipe(operators.switchMap(function () { return _this._dialog.open(EmailComponent, {
-                data: { twoFactorManageService: _this },
-            })
-                .afterClosed(); }), operators.tap(function () {
-                _this.verificationMethodsFetch();
-            }), operators.takeUntil(this._destroy$));
-        };
-        TwoFactorManageService.prototype.addApp$ = function () {
-            var _this = this;
-            return this.accountVerify$()
-                .pipe(operators.switchMap(function () { return _this._dialog.open(AppComponent, {
-                data: { twoFactorManageService: _this },
-            })
-                .afterClosed(); }), operators.tap(function () {
-                _this.verificationMethodsFetch();
-            }), operators.takeUntil(this._destroy$));
-        };
-        return TwoFactorManageService;
-    }());
-    TwoFactorManageService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TwoFactorManageService, deps: [{ token: i1__namespace.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    TwoFactorManageService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TwoFactorManageService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TwoFactorManageService, decorators: [{
-                type: i0.Injectable
-            }], ctorParameters: function () { return [{ type: i1__namespace.MatDialog }]; } });
+    var AppComponent = /** @class */ (function () {
+        function AppComponent(_data, _dialogRef, _cdRef, _message) {
+            var _this = this;
+            this._data = _data;
+            this._dialogRef = _dialogRef;
+            this._cdRef = _cdRef;
+            this._message = _message;
+            this.mode = 'qr-code';
+            this.verify = function () {
+                return _this.twoFactorManageService.verificationMethodVerify$(_this.code, true)
+                    .pipe(operators.switchMap(function () {
+                    return _this.default && _this.twoFactorManageService.verificationMethodDefault$ ?
+                        _this.twoFactorManageService.verificationMethodDefault$(_this.verificationMethod) :
+                        rxjs.of(true);
+                }), operators.tap(function () {
+                    _this._message.success('Created app authenticator verification method');
+                    _this._dialogRef.close(true);
+                }));
+            };
+        }
+        AppComponent.prototype.ngOnInit = function () {
+            this.twoFactorManageService = this._data.twoFactorManageService;
+            this.accountId = this._data.accountId;
+            this.default = !this.twoFactorManageService.hasVerificationMethods;
+        };
+        AppComponent.prototype.appTypeGoogle = function () {
+            this.appTypeSelect('google');
+        };
+        AppComponent.prototype.appTypeAuthy = function () {
+            this.appTypeSelect('authy');
+        };
+        AppComponent.prototype.appTypeSelect = function (appType) {
+            var _this = this;
+            this.appType = appType;
+            this.twoFactorManageService.verificationMethodCreate$({
+                type: exports.VerificationMethodType.App,
+            })
+                .subscribe(function (verificationMethod) {
+                _this.verificationMethod = verificationMethod;
+                _this.qrCodeUrl = verificationMethod.qrCodeUrl;
+                _this._cdRef.markForCheck();
+            });
+        };
+        AppComponent.prototype.codeCompleted = function () {
+            this.form.triggerSubmit();
+        };
+        AppComponent.prototype.codeChanged = function (code) {
+            this.code = code;
+            this.form.dirty();
+        };
+        AppComponent.prototype.next = function () {
+            this.mode = 'code-input';
+        };
+        return AppComponent;
+    }());
+    AppComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AppComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace.FsMessage }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AppComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AppComponent, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: i9.FsFormDirective, descendants: true }], ngImport: i0__namespace, template: "<form fsForm [submit]=\"verify\">\n  <fs-dialog>\n    <h1 mat-dialog-title>Authenticator App Setup</h1>\n    <mat-dialog-content>\n\n      <div *ngIf=\"mode === 'qr-code'\" class=\"qr-code\">\n        <ng-container *ngIf=\"appType\">\n          <ol>\n            <li>\n              <ng-container *ngIf=\"appType === 'authy'\">\n                Install the Authy Authenticator App from the <a href=\"https://apps.apple.com/us/app/authy/id494168017\" target=\"_blank\">App Store</a> or\n                the <a href=\"https://play.google.com/store/apps/details?id=com.authy.authy\" target=\"_blank\">Google Play Store</a>.\n              </ng-container>\n\n              <ng-container *ngIf=\"appType === 'google'\">\n                Install the Google Authenticator App from the <a href=\"https://apps.apple.com/us/app/google-authenticator/id388497605\" target=\"_blank\">App Store</a> or\n                the <a href=\"https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en_US&gl=US\" target=\"_blank\">Google Play Store</a>.\n              </ng-container>\n            </li>\n            <ng-container *ngIf=\"appType === 'authy'\">\n              <li>\n                Open the Authy app and select <b>Add Account</b>.\n              </li>\n              <li>\n                Select <b>Scan QR Code</b> and scan the QR code below.\n              </li>\n            </ng-container>         \n            <ng-container *ngIf=\"appType === 'google'\">\n              <li>\n                Open the Google Authentictor app and click the <b>Plus icon</b> in the lower right corner.\n              </li>\n              <li>\n                Select <b>Scan a QR code</b> and scan the QR code below.\n              </li>\n            </ng-container>\n          </ol>\n\n          <ng-container *fsSkeleton=\"qrCodeUrl\">\n            <app-qr-code\n              [value]=\"qrCodeUrl\">\n            </app-qr-code>\n          </ng-container>\n        </ng-container>\n\n        <div class=\"app-types\" *ngIf=\"!appType\">\n          <p>Select the Authenticator App you prefer</p>\n\n          <div class=\"row\">\n            <span>\n              <a (click)=\"appTypeAuthy()\">\n                <svg width=\"50\" height=\"50\" viewBox=\"0 0 256 256\" xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMidYMid\"><path d=\"M256 127.998C256 198.696 198.694 256 127.997 256 57.304 256 0 198.696 0 127.998 0 57.305 57.304 0 127.997 0 198.694 0 256 57.305 256 127.998z\" fill=\"#EC1C24\"/><path d=\"M117.024 100.89l30.691 30.68c4.43 4.436 11.623 4.436 16.064 0 4.431-4.435 4.441-11.622 0-16.058L133.086 84.82C111.125 62.854 75.631 62.5 53.204 83.704a9.536 9.536 0 0 0-.605.548c-.098.098-.178.202-.275.29-.1.096-.202.182-.297.278-.194.193-.371.396-.54.597-21.215 22.437-20.85 57.932 1.113 79.897L83.292 196c4.44 4.433 11.623 4.433 16.062 0 4.442-4.437 4.442-11.633.011-16.06l-30.693-30.691c-13.398-13.393-13.488-35.129-.278-48.637 13.506-13.21 35.23-13.114 48.63.279zm39.612-40.873c-4.435 4.437-4.435 11.623.012 16.059l30.681 30.693c13.39 13.392 13.477 35.125.268 48.636-13.51 13.2-35.227 13.112-48.623-.282l-30.692-30.689c-4.438-4.437-11.633-4.437-16.066 0-4.443 4.433-4.443 11.642 0 16.065l30.682 30.694c21.968 21.965 57.458 22.322 79.889 1.116.208-.184.404-.355.61-.549.094-.095.182-.192.273-.29.1-.095.197-.183.29-.289.197-.183.365-.384.54-.594 21.215-22.428 20.86-57.911-1.102-79.889l-30.692-30.682c-4.436-4.443-11.638-4.443-16.07.001z\" fill=\"#FFF\"/></svg>\n              </a>\n              Authy\n            </span>\n            \n            <span>\n              <a (click)=\"appTypeGoogle()\">          \n                <svg width=\"50\"  height=\"50\" viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"m457.07 45.92c73.67-8.62 149.41.22 218.93 26.24 62.75 23.47 120.59 60.41 167.72 108.09-40.31 39.97-80.25 80.31-120.51 120.33-25.95-25.45-56.19-46.65-89.47-61.37-44.22-19.82-93.39-28.54-141.72-25.2-54.6 3.52-108.11 22.49-152.63 54.3-55.24 38.95-96.61 97.22-114.8 162.35-13.64 47.78-14.77 98.97-3.76 147.4 8.85 39.61 26.09 77.29 50.05 110.03 22.24 30.45 50.3 56.64 82.22 76.71 36.79 23.24 78.76 38.22 121.96 43.48 37.02 4.65 74.9 2.23 111.05-7 3.97-1.91 6.24 2.61 8.73 4.86 40.74 40.95 81.68 81.7 122.43 122.63-73.31 35.6-155.99 51.86-237.3 46.12-68.05-4.51-135.07-24.08-194.71-57.18-24.87-13.6-48.23-29.82-70.33-47.54-17.46-14.81-34.71-30.01-49.72-47.35-25.41-27.39-47.21-58.11-65.17-90.87-4-7.72-8.64-15.12-11.9-23.2-4.47-9.05-8.37-18.36-12.25-27.67-4.96-13.27-10.26-26.44-13.88-40.15-.43-1.81-1.53-3.33-2.52-4.85-8.3-28.66-12.95-58.33-15.44-88.04-2.62-37.36-1.33-75.05 4.78-112.03 12.18-75.48 43.41-147.74 89.86-208.44 30.12-39.5 66.53-74.21 107.46-102.35 62.44-43.11 135.53-70.69 210.92-79.3m49.18 50.48c-5.7.99-10.96 3.76-15.38 7.43-10.4 8.93-14.14 24.81-8.17 37.28 6.33 15.02 25.16 23.1 40.36 17 15.43-5.24 24.78-23.51 19.74-39.06-4.1-15.43-20.92-25.79-36.55-22.65m-267.96 111.99c-5.33.28-10.59 1.92-15.16 4.68-11.47 7.03-17.88 21.74-14.36 34.86 3.09 14.08 16.78 25.06 31.26 24.61 15.03.41 29.08-11.39 31.54-26.17 2.24-10.33-1.61-21.55-9.14-28.85-6.24-6.33-15.3-9.62-24.14-9.13m-115.96 272c-6.62 1.23-12.84 4.58-17.54 9.4-9.45 9.72-11.72 25.57-5.02 37.42 7.16 13.96 25.48 20.86 39.98 14.62 15.02-5.51 23.99-23.42 19.06-38.71-4.04-15.41-20.86-25.96-36.48-22.73m111.98 272.05c-11.49 1.95-21.48 10.72-24.84 21.88-3.87 11.63-.13 25.16 8.9 33.36 6.15 5.48 14.4 8.7 22.67 8.32 11.16-.25 21.98-6.87 27.12-16.8 4.93-8.83 5.15-20.02.71-29.1-5.82-12.78-20.81-20.33-34.56-17.66m272.06 112.03c-11.76 2.02-21.92 11.07-25.09 22.6-3.87 12.57 1.13 27.25 11.91 34.79 7.86 5.79 18.42 7.67 27.77 4.86 9.61-2.77 17.7-10.24 21.07-19.68 4.97-12.74.36-28.32-10.58-36.46-7.02-5.45-16.35-7.67-25.08-6.11z\" fill=\"#a0a0a0\"/>\n                  <g fill=\"#c1c1c1\">\n                    <path d=\"m506.25 96.4c15.63-3.14 32.45 7.22 36.55 22.65 5.04 15.55-4.31 33.82-19.74 39.06-15.2 6.1-34.03-1.98-40.36-17-5.97-12.47-2.23-28.35 8.17-37.28 4.42-3.67 9.68-6.44 15.38-7.43z\"/>\n                    <path d=\"m122.33 480.39c15.62-3.23 32.44 7.32 36.48 22.73 4.93 15.29-4.04 33.2-19.06 38.71-14.5 6.24-32.82-.66-39.98-14.62-6.7-11.85-4.43-27.7 5.02-37.42 4.7-4.82 10.92-8.17 17.54-9.4z\"/>\n                  </g>\n                  <path d=\"m843.72 180.25.11-.11c24.64 25.12 46.96 52.6 65.61 82.47 36.01 57.16 59.38 122.22 67.87 189.25 5.67 44.88 5.27 90.6-2.05 135.27-12.7 80.01-46.94 156.41-97.9 219.36-42.3 52.48-95.87 96.04-156.41 125.76l-.63-.26c-1.01-1.1-2.03-2.16-3.05-3.22-40.75-40.93-81.69-81.68-122.43-122.63-2.49-2.25-4.76-6.77-8.73-4.86-36.15 9.23-74.03 11.65-111.05 7-43.2-5.26-85.17-20.24-121.96-43.48-31.92-20.07-59.98-46.26-82.22-76.71-23.96-32.74-41.2-70.42-50.05-110.03-11.01-48.43-9.88-99.62 3.76-147.4 18.19-65.13 59.56-123.4 114.8-162.35 44.52-31.81 98.03-50.78 152.63-54.3 48.33-3.34 97.5 5.38 141.72 25.2 33.28 14.72 63.52 35.92 89.47 61.37 40.26-40.02 80.2-80.36 120.51-120.33m-351.75 183.97c-21.23 2.85-41.89 10.28-59.88 21.94-23.08 14.45-41.76 35.58-53.9 59.91-14.58 29.2-18.64 63.21-12.5 95.17 3.93 19.85 12.03 38.88 23.56 55.51 7.93 11.52 17.65 21.66 27.65 31.38 57.33 57.41 114.61 114.86 171.99 172.21 49.09-13.07 94.67-38.94 131.05-74.4 45.11-43.34 75.66-101.44 86.31-163.06.24-1.04.22-2.91 1.85-2.6 29.63.04 59.26-.01 88.9.05 19.04-.3 36.87-14.77 40.76-33.46.22-1.21 0-2.32-.67-3.35 1.22-5.71 2.08-11.58 1.38-17.43l-.24.4c-2.05-20.34-20.84-37.12-41.25-37.17-80.64-.07-161.28-.01-241.93-.07-6.44-22.08-18.5-42.33-34.03-59.23-25.8-27.5-62.26-45.01-100.02-46.82-9.68.02-19.44-.54-29.03 1.02m286.37 388.31c-12.64 2.06-23.37 12.59-25.7 25.18-1.48 8.14-.14 17.02 4.73 23.85 5.76 9.2 16.8 14.76 27.61 14.25 8.32.03 16.28-3.95 22.16-9.66 4.87-5.6 8.45-12.67 8.67-20.2.86-11.37-5.06-23.1-14.87-28.96-6.52-4.46-14.89-5.75-22.6-4.46z\" fill=\"#686868\"/>\n                  <path d=\"m238.29 208.39c8.84-.49 17.9 2.8 24.14 9.13 7.53 7.3 11.38 18.52 9.14 28.85-2.46 14.78-16.51 26.58-31.54 26.17-14.48.45-28.17-10.53-31.26-24.61-3.52-13.12 2.89-27.83 14.36-34.86 4.57-2.76 9.83-4.4 15.16-4.68z\" fill=\"#c3c3c3\"/>\n                  <path d=\"m491.97 364.22c9.59-1.56 19.35-1 29.03-1.02 37.76 1.81 74.22 19.32 100.02 46.82 15.53 16.9 27.59 37.15 34.03 59.23-47.67-.01-95.35-.01-143.03-.01-12.19-.11-24.23 5.42-32.21 14.61-6.01 6.85-9.74 15.65-10.44 24.74-1.19 14.17 5.36 28.7 16.69 37.28 7.62 5.91 17.28 9 26.92 8.8 126.69-.04 253.39-.06 380.08.03 4.76.04 9.59-.15 14.2-1.48 14.21-3.82 26.02-15.47 29.83-29.7.67 1.03.89 2.14.67 3.35-3.89 18.69-21.72 33.16-40.76 33.46-29.64-.06-59.27-.01-88.9-.05-1.63-.31-1.61 1.56-1.85 2.6-10.65 61.62-41.2 119.72-86.31 163.06-36.38 35.46-81.96 61.33-131.05 74.4-57.38-57.35-114.66-114.8-171.99-172.21-10-9.72-19.72-19.86-27.65-31.38-11.53-16.63-19.63-35.66-23.56-55.51-6.14-31.96-2.08-65.97 12.5-95.17 12.14-24.33 30.82-45.46 53.9-59.91 17.99-11.66 38.65-19.09 59.88-21.94z\" fill=\"#474747\"/>\n                  <g fill=\"#bfbfbf\">\n                    <path d=\"m479.81 483.85c7.98-9.19 20.02-14.72 32.21-14.61 47.68 0 95.36 0 143.03.01 80.65.06 161.29 0 241.93.07 20.41.05 39.2 16.83 41.25 37.17-.19.33-.58.97-.78 1.29-3.68-18.51-21.57-33.16-40.47-33.05-124.97.1-249.94.12-374.91.17-7.73.13-15.74-.8-23.15 1.96-9.06 2.84-16.73 9.1-22.27 16.7-3.34 4.55-4.39 10.24-7.28 15.03.7-9.09 4.43-17.89 10.44-24.74z\"/>\n                    <path d=\"m234.31 752.44c13.75-2.67 28.74 4.88 34.56 17.66 4.44 9.08 4.22 20.27-.71 29.1-5.14 9.93-15.96 16.55-27.12 16.8-8.27.38-16.52-2.84-22.67-8.32-9.03-8.2-12.77-21.73-8.9-33.36 3.36-11.16 13.35-19.93 24.84-21.88z\"/>\n                  </g>\n                  <path d=\"m498.92 476.86c7.41-2.76 15.42-1.83 23.15-1.96 124.97-.05 249.94-.07 374.91-.17 18.9-.11 36.79 14.54 40.47 33.05.2-.32.59-.96.78-1.29l.24-.4c.7 5.85-.16 11.72-1.38 17.43-3.81 14.23-15.62 25.88-29.83 29.7-4.61 1.33-9.44 1.52-14.2 1.48-126.69-.09-253.39-.07-380.08-.03-9.64.2-19.3-2.89-26.92-8.8-11.33-8.58-17.88-23.11-16.69-37.28 2.89-4.79 3.94-10.48 7.28-15.03 5.54-7.6 13.21-13.86 22.27-16.7z\" fill=\"#b0b0b0\"/>\n                  <path d=\"m59.49 636.08c.99 1.52 2.09 3.04 2.52 4.85 3.62 13.71 8.92 26.88 13.88 40.15 3.88 9.31 7.78 18.62 12.25 27.67 3.26 8.08 7.9 15.48 11.9 23.2 17.96 32.76 39.76 63.48 65.17 90.87 15.01 17.34 32.26 32.54 49.72 47.35 22.1 17.72 45.46 33.94 70.33 47.54 59.64 33.1 126.66 52.67 194.71 57.18 81.31 5.74 163.99-10.52 237.3-46.12 1.02 1.06 2.04 2.12 3.05 3.22l.03.61c-42.32 21.03-87.88 35.53-134.56 42.91-56.91 8.9-115.46 7.49-171.82-4.5-67.89-14.35-132.42-44.21-187.42-86.51-63.52-48.63-114.32-113.73-145.86-187.27-8.42-19.87-15.93-40.22-21.2-61.15z\" fill=\"#939393\"/>\n                  <path d=\"m778.34 752.53c7.71-1.29 16.08 0 22.6 4.46 9.81 5.86 15.73 17.59 14.87 28.96-.22 7.53-3.8 14.6-8.67 20.2-5.88 5.71-13.84 9.69-22.16 9.66-10.81.51-21.85-5.05-27.61-14.25-4.87-6.83-6.21-15.71-4.73-23.85 2.33-12.59 13.06-23.12 25.7-25.18z\" fill=\"#767676\"/>\n                  <path d=\"m506.37 864.47c8.73-1.56 18.06.66 25.08 6.11 10.94 8.14 15.55 23.72 10.58 36.46-3.37 9.44-11.46 16.91-21.07 19.68-9.35 2.81-19.91.93-27.77-4.86-10.78-7.54-15.78-22.22-11.91-34.79 3.17-11.53 13.33-20.58 25.09-22.6z\" fill=\"#bebebe\"/>\n                </svg>\n              </a>\n              Google Authenticator\n            </span>\n          </div>\n        </div>\n     \n      </div>\n\n      <div *ngIf=\"mode === 'code-input'\" class=\"code-input\">\n        <div>\n          Enter the 6-digit code you see in the App.\n        </div>\n\n        <app-code-input\n          (codeChanged)=\"codeChanged($event)\">\n        </app-code-input>\n        \n        <div class=\"checkboxes\">\n          <mat-checkbox name=\"default\" [(ngModel)]=\"default\" [disableRipple]=\"true\">\n            Make this the default 2-step verification method\n          </mat-checkbox>\n        </div>\n      </div>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <ng-container *ngIf=\"appType\">\n        <button\n            *ngIf=\"mode === 'qr-code'\"\n            type=\"button\"\n            mat-button\n            color=\"primary\"\n            (click)=\"next()\">\n          Next\n        </button>\n        <button\n            *ngIf=\"mode === 'code-input'\"\n            type=\"submit\"\n            mat-button\n            color=\"primary\"\n            (click)=\"next()\">\n          Verify\n        </button>      \n      </ng-container>\n      <button\n          type=\"button\"\n          mat-button\n          [mat-dialog-close]=\"null\">\n        Cancel\n      </button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: ["ul{margin:0;padding-left:24px}qr-code{display:flex;justify-content:center;margin:30px}app-code-input{margin-top:10px}.code-input{width:400px}.app-types{text-align:center;padding:0 40px}.app-types .row{display:flex;justify-content:center}.app-types .row span{display:flex;flex-direction:column;text-align:center;max-width:100px}.app-types .row span+span{margin-left:40px}.checkboxes{margin:8px 0}.checkboxes mat-checkbox{display:block}\n"], components: [{ type: i3__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: QrCodeComponent, selector: "app-qr-code", inputs: ["value"] }, { type: CodeInputComponent, selector: "app-code-input", inputs: ["codeLength", "code"], outputs: ["codeCompleted", "codeChanged"] }, { type: i6__namespace$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: 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: i8__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i8__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i8__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { 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: i9__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11__namespace.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i8__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9__namespace.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])" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i9__namespace.FsSubmitButtonDirective, selector: "button[type=\"submit\"]", inputs: ["name", "dirtySubmit"] }, { 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: AppComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        templateUrl: './app.component.html',
+                        styleUrls: ['./app.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.MAT_DIALOG_DATA]
+                        }] }, { type: i1__namespace.MatDialogRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace.FsMessage }];
+        }, propDecorators: { form: [{
+                    type: i0.ViewChild,
+                    args: [i9.FsFormDirective]
+                }] } });
 
-    var DefaultedComponent = /** @class */ (function () {
-        function DefaultedComponent() {
-        }
-        return DefaultedComponent;
-    }());
-    DefaultedComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DefaultedComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    DefaultedComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DefaultedComponent, selector: "app-defaulted", ngImport: i0__namespace, template: "<span>Default</span>", styles: ["span{font-size:75%;background-color:#02a7f0;padding:2px 4px;border-radius:4px;color:#fff}:host{display:flex}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DefaultedComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'app-defaulted',
-                        templateUrl: './defaulted.component.html',
-                        styleUrls: ['./defaulted.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }] });
+    var EmailComponent = /** @class */ (function () {
+        function EmailComponent(_data, _dialogRef, _cdRef, _message) {
+            var _this = this;
+            this._data = _data;
+            this._dialogRef = _dialogRef;
+            this._cdRef = _cdRef;
+            this._message = _message;
+            this.verificationMethod = null;
+            this.trustDevice = true;
+            this.resend = function () {
+                return _this.twoFactorManageService.verificationMethodResend()
+                    .pipe(operators.tap(function () {
+                    _this._message.success('Resent verification code');
+                }));
+            };
+            this.submit = function () {
+                return rxjs.of(true)
+                    .pipe(operators.switchMap(function () {
+                    return _this.verificationMethod ?
+                        _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$({
+                            type: exports.VerificationMethodType.Email,
+                            email: _this.email,
+                            default: _this.default,
+                        })
+                            .pipe(operators.tap(function (verificationMethod) {
+                            _this.verificationMethod = verificationMethod;
+                            _this.form.clear();
+                            _this._cdRef.markForCheck();
+                        }));
+                }));
+            };
+            this.twoFactorManageService = _data.twoFactorManageService;
+            this.default = !this.twoFactorManageService.hasVerificationMethods;
+        }
+        EmailComponent.prototype.codeCompleted = function () {
+            if (!this.form.submitting) {
+                this.form.triggerSubmit();
+            }
+        };
+        EmailComponent.prototype.codeChanged = function (code) {
+            this.code = code;
+        };
+        return EmailComponent;
+    }());
+    EmailComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EmailComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace.FsMessage }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    EmailComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EmailComponent, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: i9.FsFormDirective, descendants: true }], ngImport: i0__namespace, template: "<form fsForm [submit]=\"submit\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Email Setup\n    </h1>\n    <mat-dialog-content>\n      <ng-container *ngIf=\"verificationMethod; else notVerificationMethod\">\n        <fs-2fa-verification\n          [verificationMethod]=\"verificationMethod\"\n          (codeChanged)=\"codeChanged($event)\"\n          [resend]=\"resend\"\n          [(trustDevice)]=\"trustDevice\">\n        </fs-2fa-verification>\n      </ng-container>\n\n      <ng-template #notVerificationMethod>\n        <p>The app will only use this email for verifying your account security. </p>\n        <mat-form-field>\n          <mat-label>Email</mat-label>\n          <input\n            matInput\n            [required]=\"true\"\n            [(ngModel)]=\"email\"\n            [fsFormEmail]=\"true\"\n            name=\"email\">\n        </mat-form-field>\n        <mat-checkbox \n            name=\"default\"\n            [(ngModel)]=\"default\"\n            [disableRipple]=\"true\">\n          Make this the default 2-step verification method\n        </mat-checkbox>\n      </ng-template>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button\n          mat-button\n          color=\"primary\"\n          type=\"submit\">\n        Next\n      </button>\n      <button\n          mat-button\n          type=\"button\"\n          [mat-dialog-close]=\"undefined\">\n        Cancel\n      </button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: [":host ::ng-deep mat-checkbox .mat-ripple{display:none}mat-form-field{width:100%}mat-dialog-content{width:400px}p{margin-top:0}app-code-input{margin-bottom:5px;display:block}\n"], components: [{ type: i3__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: Fs2faVerificationComponent, selector: "fs-2fa-verification", inputs: ["verificationMethod", "resend", "showTrustedDevice", "trustDevice", "codeLength", "trustDays", "formatRecipient", "getVerificationMethods", "selectVerificationMethod"], outputs: ["verified", "codeChanged", "codeCompleted", "trustDeviceChange"] }, { type: i5__namespace$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i6__namespace$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: 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: i8__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i8__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i8__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { 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: i9__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.MatLabel, selector: "mat-label" }, { type: i11__namespace$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i8__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i8__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i8__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9__namespace.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i9__namespace.FsFormEmailDirective, selector: "[fsFormEmail]", inputs: ["fsFormEmail", "fsFormEmailMessage"] }, { type: i9__namespace.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])" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i9__namespace.FsSubmitButtonDirective, selector: "button[type=\"submit\"]", inputs: ["name", "dirtySubmit"] }, { 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: EmailComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        templateUrl: './email.component.html',
+                        styleUrls: ['./email.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.MAT_DIALOG_DATA]
+                        }] }, { type: i1__namespace.MatDialogRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace.FsMessage }];
+        }, propDecorators: { form: [{
+                    type: i0.ViewChild,
+                    args: [i9.FsFormDirective, { static: false }]
+                }] } });
 
-    var VerificationMethodsComponent = /** @class */ (function () {
-        function VerificationMethodsComponent(_prompt) {
-            this._prompt = _prompt;
-            this.deleted = new i0.EventEmitter();
-            this.VerificationMethodType = exports.VerificationMethodType;
-        }
-        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.hasVerificationMethodDefault)) {
-                this.verificationMethodDefault = function (verificationMethod) {
-                    return _this.twoFactorManageService.verificationMethodDefault$(verificationMethod);
-                };
-            }
-            if (!this.verificationMethodDelete && ((_b = this.twoFactorManageService) === null || _b === void 0 ? void 0 : _b.hasVerificationMethodDelete)) {
-                this.verificationMethodDelete = function (verificationMethod) {
-                    return _this.twoFactorManageService.verificationMethodDelete$(verificationMethod);
-                };
-            }
-            if (!this.verificationMethodsFetch && ((_c = this.twoFactorManageService) === null || _c === void 0 ? void 0 : _c.hasVerificationMethodsFetch)) {
-                this.verificationMethodsFetch = function (query) {
-                    return _this.twoFactorManageService.verificationMethodsFetch$(query);
-                };
-            }
-            if (!this.accountVerify && ((_d = this.twoFactorManageService) === null || _d === void 0 ? void 0 : _d.hasVerificationMethodVerify)) {
-                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 (data) {
-                            return !!_this.verificationMethodDefault && !data.default;
-                        },
-                        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.accountVerify(); }), operators.switchMap(function () { return _this.verificationMethodDelete(verificationMethod); }))
-                                .subscribe(function () {
-                                _this.deleted.emit();
-                                _this.list.reload();
-                            });
-                        },
-                        show: function () {
-                            return !!_this.verificationMethodDelete;
-                        },
-                        label: 'Delete',
-                    },
-                ],
-                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 !_this.type || verificationMethod.type === _this.type;
-                        }),
-                    }); }));
-                },
-            };
-        };
-        VerificationMethodsComponent.prototype.reload = function () {
-            this.list.reload();
-        };
-        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: { 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$1.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": i8__namespace$1.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]
-                }], 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
+    var NumberComponent = /** @class */ (function () {
+        function NumberComponent(_data, _dialogRef, _cdRef, _message) {
+            var _this = this;
+            this._data = _data;
+            this._dialogRef = _dialogRef;
+            this._cdRef = _cdRef;
+            this._message = _message;
+            this.trustDevice = true;
+            this.verificationMethod = null;
+            this.resend = function () {
+                return _this.twoFactorManageService.verificationMethodResend()
+                    .pipe(operators.tap(function () {
+                    _this._message.success('Resent verification code');
+                }));
+            };
+            this.submit = function () {
+                return rxjs.of(true)
+                    .pipe(operators.switchMap(function () {
+                    return _this.verificationMethod ?
+                        _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$({
+                            type: exports.VerificationMethodType.Sms,
+                            phoneNumber: _this.phone.number,
+                            phoneCode: _this.phone.countryCode,
+                            phoneCountry: _this.phone.isoCode,
+                            default: _this.default,
+                        })
+                            .pipe(operators.tap(function (verificationMethod) {
+                            _this.verificationMethod = verificationMethod;
+                            _this.form.clear();
+                            _this._cdRef.markForCheck();
+                        }));
+                }));
+            };
+            this.twoFactorManageService = _data.twoFactorManageService;
+            this.defaultCountry = _data.defaultCountry;
+            this.default = !this.twoFactorManageService.hasVerificationMethods;
+        }
+        NumberComponent.prototype.codeCompleted = function () {
+            if (!this.form.submitting) {
+                this.form.triggerSubmit();
+            }
+        };
+        NumberComponent.prototype.codeChanged = function (code) {
+            this.code = code;
+        };
+        return NumberComponent;
+    }());
+    NumberComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumberComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace.FsMessage }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    NumberComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NumberComponent, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: i9.FsFormDirective, descendants: true }], ngImport: i0__namespace, template: "<form fsForm [submit]=\"submit\" [autocomplete]=\"false\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Text Message Setup\n    </h1>\n    <mat-dialog-content>\n      <ng-container *ngIf=\"verificationMethod; else notVerificationMethod\">\n        <fs-2fa-verification\n          [verificationMethod]=\"verificationMethod\"\n          (codeChanged)=\"codeChanged($event)\"\n          [resend]=\"resend\"\n          [formatRecipient]=\"true\"\n          [(trustDevice)]=\"trustDevice\">\n        </fs-2fa-verification>\n      </ng-container>\n\n      <ng-template #notVerificationMethod>\n        <p>The app will only use this number for verifying your account security. Message and data rates may apply by your cell phone provider.</p>\n        <mat-form-field>\n          <mat-label>Phone number</mat-label>\n          <input \n            matInput\n            fsPhoneField\n            [(ngModel)]=\"phone\"\n            [required]=\"true\"\n            [country]=\"defaultCountry\"\n            [mode]=\"'object'\"\n            autocomplete=\"off\"\n            name=\"phone\">\n        </mat-form-field>\n        <mat-checkbox \n            name=\"default\"\n            [(ngModel)]=\"default\"\n            [disableRipple]=\"true\">\n          Make this the default 2-step verification method\n        </mat-checkbox>\n      </ng-template>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button\n          mat-button\n          color=\"primary\"\n          type=\"submit\">\n        Next\n      </button>\n      <button\n          mat-button\n          type=\"button\"\n          [mat-dialog-close]=\"undefined\">\n        Cancel\n      </button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: [":host ::ng-deep mat-checkbox .mat-ripple{display:none}app-code-input{margin-bottom:5px;display:block}mat-form-field{width:100%}mat-dialog-content{width:400px}p{margin-top:0}h1{display:flex;align-items:center}h1 mat-icon{margin-right:5px}\n"], components: [{ type: i3__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: Fs2faVerificationComponent, selector: "fs-2fa-verification", inputs: ["verificationMethod", "resend", "showTrustedDevice", "trustDevice", "codeLength", "trustDays", "formatRecipient", "getVerificationMethods", "selectVerificationMethod"], outputs: ["verified", "codeChanged", "codeCompleted", "trustDeviceChange"] }, { type: i5__namespace$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i8__namespace$1.FsPhoneFieldComponent, selector: "[fsPhoneField]", inputs: ["allowNumberExt", "placeholder", "required", "disabled", "mode", "country", "autocomplete"] }, { type: i6__namespace$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: 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: i8__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i8__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i8__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { 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: i9__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.MatLabel, selector: "mat-label" }, { type: i11__namespace$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i8__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i8__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9__namespace.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i8__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i9__namespace.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])" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i9__namespace.FsSubmitButtonDirective, selector: "button[type=\"submit\"]", inputs: ["name", "dirtySubmit"] }, { 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: NumberComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        templateUrl: './number.component.html',
+                        styleUrls: ['./number.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.MAT_DIALOG_DATA]
+                        }] }, { type: i1__namespace.MatDialogRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace.FsMessage }];
+        }, propDecorators: { form: [{
+                    type: i0.ViewChild,
+                    args: [i9.FsFormDirective, { static: false }]
                 }] } });
 
-    var NumbersComponent = /** @class */ (function () {
-        function NumbersComponent(_data, _dialogRef, _message) {
-            this._data = _data;
-            this._dialogRef = _dialogRef;
-            this._message = _message;
-            this.VerificationMethodType = exports.VerificationMethodType;
-            this.twoFactorManageService = _data.twoFactorManageService;
-            this.defaultCountry = _data.defaultCountry;
-        }
-        NumbersComponent.prototype.add = function () {
-            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');
-            if (!this.twoFactorManageService.hasVerificationMethod(exports.VerificationMethodType.Sms)) {
-                this._dialogRef.close();
-            }
-        };
-        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", 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: [{
-                        templateUrl: './numbers.component.html',
-                        styleUrls: ['./numbers.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [i1.MAT_DIALOG_DATA]
-                        }] }, { type: i1__namespace.MatDialogRef }, { type: i2__namespace.FsMessage }];
-        }, propDecorators: { verificationMethods: [{
-                    type: i0.ViewChild,
-                    args: [VerificationMethodsComponent]
+    var TwoFactorManageService = /** @class */ (function () {
+        function TwoFactorManageService(_dialog) {
+            this._dialog = _dialog;
+            this._destroy$ = new rxjs.Subject();
+            this._verificationMethods$ = new rxjs.BehaviorSubject([]);
+        }
+        Object.defineProperty(TwoFactorManageService.prototype, "verificationMethods$", {
+            get: function () {
+                return this._verificationMethods$
+                    .pipe(operators.takeUntil(this._destroy$));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TwoFactorManageService.prototype, "verificationMethods", {
+            get: function () {
+                return this._verificationMethods$.getValue();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TwoFactorManageService.prototype, "hasVerificationMethods", {
+            get: function () {
+                return !!this._verificationMethods$.getValue().length;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TwoFactorManageService.prototype, "emailVerificationMethods", {
+            get: function () {
+                return this.getVerificationMethods(exports.VerificationMethodType.Email);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TwoFactorManageService.prototype, "smsVerificationMethods", {
+            get: function () {
+                return this.getVerificationMethods(exports.VerificationMethodType.Sms);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TwoFactorManageService.prototype, "appVerificationMethods", {
+            get: function () {
+                return this.getVerificationMethods(exports.VerificationMethodType.App);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TwoFactorManageService.prototype.getVerificationMethods = function (type) {
+            return this.verificationMethods
+                .filter(function (verificationMethod) {
+                return verificationMethod.type === type;
+            });
+        };
+        TwoFactorManageService.prototype.hasVerificationMethod = function (type) {
+            return this.verificationMethods
+                .some(function (verificationMethod) {
+                return verificationMethod.type === type;
+            });
+        };
+        TwoFactorManageService.prototype.registerVerificationMethodDefault = function (value) {
+            this._verificationMethodDefault = value;
+        };
+        TwoFactorManageService.prototype.registerVerificationMethodResend = function (value) {
+            this._verificationMethodResend = value;
+        };
+        TwoFactorManageService.prototype.registerVerificationMethodsFetch = function (value) {
+            this._verificationMethodsFetch = value;
+        };
+        TwoFactorManageService.prototype.registerVerificationMethodDelete = function (value) {
+            this._verificationMethodDelete = value;
+        };
+        TwoFactorManageService.prototype.registerVerificationMethodCreate = function (value) {
+            this._verificationMethodCreate = value;
+        };
+        TwoFactorManageService.prototype.registerVerificationMethodVerify = function (value) {
+            this._verificationMethodVerify = value;
+        };
+        TwoFactorManageService.prototype.registerAccountVerify = function (value) {
+            this._accountVerify = value;
+        };
+        Object.defineProperty(TwoFactorManageService.prototype, "hasVerificationMethodResend", {
+            get: function () {
+                return !!this._verificationMethodResend;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TwoFactorManageService.prototype, "hasVerificationMethodDefault", {
+            get: function () {
+                return !!this._verificationMethodDefault;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TwoFactorManageService.prototype, "hasVerificationMethodsFetch", {
+            get: function () {
+                return !!this._verificationMethodsFetch;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TwoFactorManageService.prototype, "hasVerificationMethodDelete", {
+            get: function () {
+                return !!this._verificationMethodDelete;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TwoFactorManageService.prototype, "hasVerificationMethodCreate", {
+            get: function () {
+                return !!this._verificationMethodCreate;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TwoFactorManageService.prototype, "hasVerificationMethodVerify", {
+            get: function () {
+                return !!this._verificationMethodVerify;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TwoFactorManageService.prototype.verificationMethodDelete$ = function (verificationMethod) {
+            var _this = this;
+            return this._verificationMethodDelete(verificationMethod)
+                .pipe(operators.tap(function () {
+                _this.verificationMethodsFetch();
+            }));
+        };
+        TwoFactorManageService.prototype.verificationMethodVerify$ = function (code, trustDevice) {
+            var _this = this;
+            return this._verificationMethodVerify(code, trustDevice)
+                .pipe(operators.tap(function () {
+                _this.verificationMethodsFetch();
+            }));
+        };
+        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.verificationMethodsFetch = function (query) {
+            this.verificationMethodsFetch$(query)
+                .subscribe();
+        };
+        TwoFactorManageService.prototype.verificationMethodsFetch$ = function (query) {
+            var _this = this;
+            return this._verificationMethodsFetch(query)
+                .pipe(operators.tap(function (verificationMethods) {
+                _this._verificationMethods$.next(verificationMethods);
+            }));
+        };
+        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) {
+            var _this = this;
+            return this.accountVerify$()
+                .pipe(operators.switchMap(function () { return _this._dialog.open(NumberComponent, {
+                data: {
+                    defaultCountry: defaultCountry,
+                    twoFactorManageService: _this,
+                },
+            })
+                .afterClosed(); }), operators.tap(function () {
+                _this.verificationMethodsFetch();
+            }), operators.takeUntil(this._destroy$));
+        };
+        TwoFactorManageService.prototype.addEmail$ = function () {
+            var _this = this;
+            return this.accountVerify$()
+                .pipe(operators.switchMap(function () { return _this._dialog.open(EmailComponent, {
+                data: { twoFactorManageService: _this },
+            })
+                .afterClosed(); }), operators.tap(function () {
+                _this.verificationMethodsFetch();
+            }), operators.takeUntil(this._destroy$));
+        };
+        TwoFactorManageService.prototype.addApp$ = function () {
+            var _this = this;
+            return this.accountVerify$()
+                .pipe(operators.switchMap(function () { return _this._dialog.open(AppComponent, {
+                data: { twoFactorManageService: _this },
+            })
+                .afterClosed(); }), operators.tap(function () {
+                _this.verificationMethodsFetch();
+            }), operators.takeUntil(this._destroy$));
+        };
+        return TwoFactorManageService;
+    }());
+    TwoFactorManageService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TwoFactorManageService, deps: [{ token: i1__namespace.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    TwoFactorManageService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TwoFactorManageService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TwoFactorManageService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return [{ type: i1__namespace.MatDialog }]; } });
+
+    var NumbersComponent = /** @class */ (function () {
+        function NumbersComponent(_data, _dialogRef, _message) {
+            this._data = _data;
+            this._dialogRef = _dialogRef;
+            this._message = _message;
+            this.VerificationMethodType = exports.VerificationMethodType;
+            this.twoFactorManageService = _data.twoFactorManageService;
+            this.defaultCountry = _data.defaultCountry;
+        }
+        NumbersComponent.prototype.add = function () {
+            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');
+            if (!this.twoFactorManageService.hasVerificationMethod(exports.VerificationMethodType.Sms)) {
+                this._dialogRef.close();
+            }
+        };
+        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", 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: [{
+                        templateUrl: './numbers.component.html',
+                        styleUrls: ['./numbers.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            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) {
-            this._data = _data;
-            this._dialogRef = _dialogRef;
-            this._message = _message;
-            this.VerificationMethodType = exports.VerificationMethodType;
-            this.twoFactorManageService = _data.twoFactorManageService;
-        }
-        EmailsComponent.prototype.add = function () {
-            var _this = this;
-            this.twoFactorManageService.addEmail$()
-                .subscribe(function () {
-                _this.verificationMethods.reload();
-            });
-        };
-        EmailsComponent.prototype.deleted = function () {
-            this._message.success('Deleted email verification method');
-            if (!this.twoFactorManageService.hasVerificationMethod(exports.VerificationMethodType.Email)) {
-                this._dialogRef.close();
-            }
-        };
-        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", 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: [{
-                        templateUrl: './emails.component.html',
-                        styleUrls: ['./emails.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            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) {
+            this._data = _data;
+            this._dialogRef = _dialogRef;
+            this._message = _message;
+            this.VerificationMethodType = exports.VerificationMethodType;
+            this.twoFactorManageService = _data.twoFactorManageService;
+        }
+        EmailsComponent.prototype.add = function () {
+            var _this = this;
+            this.twoFactorManageService.addEmail$()
+                .subscribe(function () {
+                _this.verificationMethods.reload();
+            });
+        };
+        EmailsComponent.prototype.deleted = function () {
+            this._message.success('Deleted email verification method');
+            if (!this.twoFactorManageService.hasVerificationMethod(exports.VerificationMethodType.Email)) {
+                this._dialogRef.close();
+            }
+        };
+        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", 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: [{
+                        templateUrl: './emails.component.html',
+                        styleUrls: ['./emails.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            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) {
-            this._data = _data;
-            this._cdRef = _cdRef;
-            this._dialog = _dialog;
-            this._message = _message;
-            this.verificationMethodTypes = {};
-            this.VerificationMethodType = exports.VerificationMethodType;
-            this._destroy$ = new rxjs.Subject();
-        }
-        ManageMethodsComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this._defaultCountry = this._data.defaultCountry;
-            this.twoFactorManageService = this._data.twoFactorManageService;
-            this.verificationMethodTypes = this._data.verificationMethodTypes
-                .reduce(function (verificationMethodTypes, verificationMethodType) {
-                verificationMethodTypes[verificationMethodType] = true;
-                return verificationMethodTypes;
-            }, {});
-            this.twoFactorManageService.verificationMethods$
-                .subscribe(function (verificationMethods) {
-                _this.verificationMethods = verificationMethods;
-                _this._cdRef.markForCheck();
-            });
-        };
-        Object.defineProperty(ManageMethodsComponent.prototype, "defaultSms", {
-            get: function () {
-                return this.twoFactorManageService.smsVerificationMethods
-                    .some(function (verificationMethod) {
-                    return verificationMethod.default;
-                });
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ManageMethodsComponent.prototype, "defaultApp", {
-            get: function () {
-                return this.twoFactorManageService.appVerificationMethods
-                    .some(function (verificationMethod) {
-                    return verificationMethod.default;
-                });
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ManageMethodsComponent.prototype, "defaultEmail", {
-            get: function () {
-                return this.twoFactorManageService.emailVerificationMethods
-                    .some(function (verificationMethod) {
-                    return verificationMethod.default;
-                });
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ManageMethodsComponent.prototype, "textHasVerificationMethod", {
-            get: function () {
-                return this.twoFactorManageService.hasVerificationMethod(exports.VerificationMethodType.Sms);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ManageMethodsComponent.prototype, "appHasVerificationMethod", {
-            get: function () {
-                return this.twoFactorManageService.hasVerificationMethod(exports.VerificationMethodType.App);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ManageMethodsComponent.prototype, "emailHasVerificationMethod", {
-            get: function () {
-                return this.twoFactorManageService.hasVerificationMethod(exports.VerificationMethodType.Email);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ManageMethodsComponent.prototype.textMessageManage = function () {
-            this._dialog.open(NumbersComponent, {
-                data: {
-                    twoFactorManageService: this.twoFactorManageService,
-                    defaultCountry: this._defaultCountry,
-                },
-            });
-        };
-        ManageMethodsComponent.prototype.textMessageAdd = function () {
-            this.twoFactorManageService.addSms$(this._defaultCountry)
-                .subscribe();
-        };
-        ManageMethodsComponent.prototype.emailMessageManage = function () {
-            this._dialog.open(EmailsComponent, {
-                data: {
-                    twoFactorManageService: this.twoFactorManageService,
-                },
-            });
-        };
-        ManageMethodsComponent.prototype.emailMessageAdd = function () {
-            this.twoFactorManageService.addEmail$()
-                .subscribe();
-        };
-        ManageMethodsComponent.prototype.appRemove = function () {
-            var _this = this;
-            var verificationMethod = this.verificationMethods
-                .find(function (_verificationMethod) {
-                return _verificationMethod.type === exports.VerificationMethodType.App;
-            });
-            if (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();
-                });
-            }
-        };
-        ManageMethodsComponent.prototype.appAdd = function () {
-            this.twoFactorManageService.addApp$()
-                .subscribe();
-        };
-        ManageMethodsComponent.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        return ManageMethodsComponent;
-    }());
-    ManageMethodsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ManageMethodsComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.MatDialog }, { token: i2__namespace.FsMessage }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ManageMethodsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ManageMethodsComponent, selector: "ng-component", ngImport: i0__namespace, template: "<fs-dialog>\n  <h1 mat-dialog-title>2-Step Verification</h1>\n  <mat-dialog-content>\n    <table>\n      <tr *ngIf=\"verificationMethodTypes[VerificationMethodType.Sms]\">\n        <td>\n          <mat-icon>textsms</mat-icon>\n        </td>\n        <td>\n          <div class=\"type\">\n            <span>Text Message</span>\n            <span *ngIf=\"textHasVerificationMethod\" class=\"enabled\"></span>\n            <app-defaulted *ngIf=\"defaultSms\"></app-defaulted>\n          </div>\n          <div class=\"small\">\n            Verification codes are sent by text message\n            <ng-container *ngIf=\"textHasVerificationMethod\">\n              to <span class=\"items\">\n                <span *ngFor=\"let item of twoFactorManageService.smsVerificationMethods\">{{item.phoneNumber | fsPhone}}</span>\n              </span>\n            </ng-container>\n          </div>\n        </td>\n        <td>\n          <button \n              *ngIf=\"textHasVerificationMethod; else textMessageManageButton\"\n              mat-raised-button \n              type=\"button\"\n              (click)=\"textMessageManage()\">\n              Manage\n            </button>\n          <ng-template #textMessageManageButton>\n            <button               \n                mat-raised-button \n                color=\"primary\"\n                type=\"button\"\n                (click)=\"textMessageAdd()\">\n              Turn On\n            </button>\n          </ng-template>\n        </td>\n      </tr>\n      <tr *ngIf=\"verificationMethodTypes[VerificationMethodType.Email]\">\n        <td>\n          <mat-icon>email</mat-icon>\n        </td>\n        <td>\n          <div class=\"type\">\n            <span>Email</span> \n            <span *ngIf=\"emailHasVerificationMethod\" class=\"enabled\"></span>\n            <app-defaulted *ngIf=\"defaultEmail\"></app-defaulted>\n          </div>\n          <div class=\"small\">\n            Verification codes are sent by email\n            <ng-container *ngIf=\"emailHasVerificationMethod\">\n              to <span class=\"items\">\n                <span *ngFor=\"let item of twoFactorManageService.emailVerificationMethods\">{{item.email}}</span>\n              </span>\n            </ng-container>\n          </div>\n        </td>\n        <td>\n          <button \n              *ngIf=\"emailHasVerificationMethod; else emailMessageManageButton\"\n              mat-raised-button \n              type=\"button\"\n              (click)=\"emailMessageManage()\">\n            Manage\n          </button>\n        <ng-template #emailMessageManageButton>\n          <button               \n              mat-raised-button \n              color=\"primary\"\n              type=\"button\"\n              (click)=\"emailMessageAdd()\">\n            Turn On\n          </button>\n        </ng-template>\n        </td>\n      </tr>\n      <tr *ngIf=\"verificationMethodTypes[VerificationMethodType.App]\">\n        <td>\n          <mat-icon>phone_iphone</mat-icon>\n        </td>\n        <td>\n          <div class=\"type\">\n            <span>Authenticator App</span>\n            <span *ngIf=\"appHasVerificationMethod\" class=\"enabled\"></span>\n            <app-defaulted *ngIf=\"defaultApp\"></app-defaulted>\n          </div>\n          <div class=\"small\">Verification code is generated by an authenticator app such as Authy or Google Authenticator</div>\n        </td>\n        <td>\n          <button \n              *ngIf=\"appHasVerificationMethod; else appMessageManageButton\"\n              mat-raised-button \n              type=\"button\"\n              (click)=\"appRemove()\">\n            Remove\n          </button>\n        <ng-template #appMessageManageButton>\n          <button               \n              mat-raised-button \n              color=\"primary\"\n              type=\"button\"\n              (click)=\"appAdd()\">\n            Turn On\n          </button>\n        </ng-template>\n        </td>\n      </tr> \n    </table>      \n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        color=\"primary\"\n        type=\"button\"\n        [mat-dialog-close]=\"undefined\">\n      Close\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: ["mat-dialog-content{max-width:500px}.enabled{font-size:75%;background-color:#70b601;padding:2px 4px;border-radius:4px;color:#fff;margin-left:4px}.enabled:after{content:\"Enabled\"}table tr td:first-child,table tr td:last-child{width:1%}table tr td:first-child mat-icon,table tr td:last-child mat-icon{display:flex}table tr td{padding:6px;vertical-align:middle}table tr .type{display:flex;align-items:center}table tr .type app-defaulted{margin-left:4px}.items span+span:not(:last-child):before{content:\", \"}.items span+span:last-child:before{content:\" and \"}\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: DefaultedComponent, selector: "app-defaulted" }, { 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: i9__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }], pipes: { "fsPhone": i8__namespace$1.FsPhonePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ManageMethodsComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        templateUrl: './manage-methods.component.html',
-                        styleUrls: ['./manage-methods.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [i1.MAT_DIALOG_DATA]
-                        }] }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.MatDialog }, { type: i2__namespace.FsMessage }];
+    var ManageMethodsComponent = /** @class */ (function () {
+        function ManageMethodsComponent(_data, _cdRef, _dialog, _message) {
+            this._data = _data;
+            this._cdRef = _cdRef;
+            this._dialog = _dialog;
+            this._message = _message;
+            this.verificationMethodTypes = {};
+            this.VerificationMethodType = exports.VerificationMethodType;
+            this._destroy$ = new rxjs.Subject();
+        }
+        ManageMethodsComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this._defaultCountry = this._data.defaultCountry;
+            this.twoFactorManageService = this._data.twoFactorManageService;
+            this.verificationMethodTypes = this._data.verificationMethodTypes
+                .reduce(function (verificationMethodTypes, verificationMethodType) {
+                verificationMethodTypes[verificationMethodType] = true;
+                return verificationMethodTypes;
+            }, {});
+            this.twoFactorManageService.verificationMethods$
+                .subscribe(function (verificationMethods) {
+                _this.verificationMethods = verificationMethods;
+                _this._cdRef.markForCheck();
+            });
+        };
+        Object.defineProperty(ManageMethodsComponent.prototype, "defaultSms", {
+            get: function () {
+                return this.twoFactorManageService.smsVerificationMethods
+                    .some(function (verificationMethod) {
+                    return verificationMethod.default;
+                });
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ManageMethodsComponent.prototype, "defaultApp", {
+            get: function () {
+                return this.twoFactorManageService.appVerificationMethods
+                    .some(function (verificationMethod) {
+                    return verificationMethod.default;
+                });
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ManageMethodsComponent.prototype, "defaultEmail", {
+            get: function () {
+                return this.twoFactorManageService.emailVerificationMethods
+                    .some(function (verificationMethod) {
+                    return verificationMethod.default;
+                });
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ManageMethodsComponent.prototype, "textHasVerificationMethod", {
+            get: function () {
+                return this.twoFactorManageService.hasVerificationMethod(exports.VerificationMethodType.Sms);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ManageMethodsComponent.prototype, "appHasVerificationMethod", {
+            get: function () {
+                return this.twoFactorManageService.hasVerificationMethod(exports.VerificationMethodType.App);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ManageMethodsComponent.prototype, "emailHasVerificationMethod", {
+            get: function () {
+                return this.twoFactorManageService.hasVerificationMethod(exports.VerificationMethodType.Email);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ManageMethodsComponent.prototype.textMessageManage = function () {
+            this._dialog.open(NumbersComponent, {
+                data: {
+                    twoFactorManageService: this.twoFactorManageService,
+                    defaultCountry: this._defaultCountry,
+                },
+            });
+        };
+        ManageMethodsComponent.prototype.textMessageAdd = function () {
+            this.twoFactorManageService.addSms$(this._defaultCountry)
+                .subscribe();
+        };
+        ManageMethodsComponent.prototype.emailMessageManage = function () {
+            this._dialog.open(EmailsComponent, {
+                data: {
+                    twoFactorManageService: this.twoFactorManageService,
+                },
+            });
+        };
+        ManageMethodsComponent.prototype.emailMessageAdd = function () {
+            this.twoFactorManageService.addEmail$()
+                .subscribe();
+        };
+        ManageMethodsComponent.prototype.appRemove = function () {
+            var _this = this;
+            var verificationMethod = this.verificationMethods
+                .find(function (_verificationMethod) {
+                return _verificationMethod.type === exports.VerificationMethodType.App;
+            });
+            if (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();
+                });
+            }
+        };
+        ManageMethodsComponent.prototype.appAdd = function () {
+            this.twoFactorManageService.addApp$()
+                .subscribe();
+        };
+        ManageMethodsComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        return ManageMethodsComponent;
+    }());
+    ManageMethodsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ManageMethodsComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.MatDialog }, { token: i2__namespace.FsMessage }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ManageMethodsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ManageMethodsComponent, selector: "ng-component", ngImport: i0__namespace, template: "<fs-dialog>\n  <h1 mat-dialog-title>2-Step Verification</h1>\n  <mat-dialog-content>\n    <table>\n      <tr *ngIf=\"verificationMethodTypes[VerificationMethodType.Sms]\">\n        <td>\n          <mat-icon>textsms</mat-icon>\n        </td>\n        <td>\n          <div class=\"type\">\n            <span>Text Message</span>\n            <span *ngIf=\"textHasVerificationMethod\" class=\"enabled\"></span>\n            <app-defaulted *ngIf=\"defaultSms\"></app-defaulted>\n          </div>\n          <div class=\"small\">\n            Verification codes are sent by text message\n            <ng-container *ngIf=\"textHasVerificationMethod\">\n              to <span class=\"items\">\n                <span *ngFor=\"let item of twoFactorManageService.smsVerificationMethods\">{{item.phoneNumber | fsPhone}}</span>\n              </span>\n            </ng-container>\n          </div>\n        </td>\n        <td>\n          <button \n              *ngIf=\"textHasVerificationMethod; else textMessageManageButton\"\n              mat-raised-button \n              type=\"button\"\n              (click)=\"textMessageManage()\">\n              Manage\n            </button>\n          <ng-template #textMessageManageButton>\n            <button               \n                mat-raised-button \n                color=\"primary\"\n                type=\"button\"\n                (click)=\"textMessageAdd()\">\n              Turn On\n            </button>\n          </ng-template>\n        </td>\n      </tr>\n      <tr *ngIf=\"verificationMethodTypes[VerificationMethodType.Email]\">\n        <td>\n          <mat-icon>email</mat-icon>\n        </td>\n        <td>\n          <div class=\"type\">\n            <span>Email</span> \n            <span *ngIf=\"emailHasVerificationMethod\" class=\"enabled\"></span>\n            <app-defaulted *ngIf=\"defaultEmail\"></app-defaulted>\n          </div>\n          <div class=\"small\">\n            Verification codes are sent by email\n            <ng-container *ngIf=\"emailHasVerificationMethod\">\n              to <span class=\"items\">\n                <span *ngFor=\"let item of twoFactorManageService.emailVerificationMethods\">{{item.email}}</span>\n              </span>\n            </ng-container>\n          </div>\n        </td>\n        <td>\n          <button \n              *ngIf=\"emailHasVerificationMethod; else emailMessageManageButton\"\n              mat-raised-button \n              type=\"button\"\n              (click)=\"emailMessageManage()\">\n            Manage\n          </button>\n        <ng-template #emailMessageManageButton>\n          <button               \n              mat-raised-button \n              color=\"primary\"\n              type=\"button\"\n              (click)=\"emailMessageAdd()\">\n            Turn On\n          </button>\n        </ng-template>\n        </td>\n      </tr>\n      <tr *ngIf=\"verificationMethodTypes[VerificationMethodType.App]\">\n        <td>\n          <mat-icon>phone_iphone</mat-icon>\n        </td>\n        <td>\n          <div class=\"type\">\n            <span>Authenticator App</span>\n            <span *ngIf=\"appHasVerificationMethod\" class=\"enabled\"></span>\n            <app-defaulted *ngIf=\"defaultApp\"></app-defaulted>\n          </div>\n          <div class=\"small\">Verification code is generated by an authenticator app such as Authy or Google Authenticator</div>\n        </td>\n        <td>\n          <button \n              *ngIf=\"appHasVerificationMethod; else appMessageManageButton\"\n              mat-raised-button \n              type=\"button\"\n              (click)=\"appRemove()\">\n            Remove\n          </button>\n        <ng-template #appMessageManageButton>\n          <button               \n              mat-raised-button \n              color=\"primary\"\n              type=\"button\"\n              (click)=\"appAdd()\">\n            Turn On\n          </button>\n        </ng-template>\n        </td>\n      </tr> \n    </table>      \n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        color=\"primary\"\n        type=\"button\"\n        [mat-dialog-close]=\"undefined\">\n      Close\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: ["mat-dialog-content{max-width:500px}.enabled{font-size:75%;background-color:#70b601;padding:2px 4px;border-radius:4px;color:#fff;margin-left:4px}.enabled:after{content:\"Enabled\"}table tr td:first-child,table tr td:last-child{width:1%}table tr td:first-child mat-icon,table tr td:last-child mat-icon{display:flex}table tr td{padding:6px;vertical-align:middle}table tr .type{display:flex;align-items:center}table tr .type app-defaulted{margin-left:4px}.items span+span:not(:last-child):before{content:\", \"}.items span+span:last-child:before{content:\" and \"}\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: DefaultedComponent, selector: "app-defaulted" }, { 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: i9__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }], pipes: { "fsPhone": i8__namespace$1.FsPhonePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ManageMethodsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        templateUrl: './manage-methods.component.html',
+                        styleUrls: ['./manage-methods.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.MAT_DIALOG_DATA]
+                        }] }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.MatDialog }, { type: i2__namespace.FsMessage }];
         } });
 
-    var Fs2faManageComponent = /** @class */ (function () {
-        function Fs2faManageComponent(_cdRef, _dialog, _twoFactorManageService) {
-            this._cdRef = _cdRef;
-            this._dialog = _dialog;
-            this._twoFactorManageService = _twoFactorManageService;
-            this._destroy$ = new rxjs.Subject();
-        }
-        Fs2faManageComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.verificationMethodTypes = this.verificationMethodTypes || [
-                exports.VerificationMethodType.Sms,
-                exports.VerificationMethodType.Email,
-                exports.VerificationMethodType.App
-            ];
-            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) {
-                var types = {
-                    sms: 'Text Message',
-                    email: 'Email',
-                    app: 'Authenticator App',
-                };
-                _this.statuses = Object.keys(verificationMethods.reduce(function (accum, verificationMethod) {
-                    accum[verificationMethod.type] = true;
-                    return accum;
-                }, {}))
-                    .map(function (type) {
-                    return types[type];
-                });
-                _this._cdRef.markForCheck();
-            });
-            this._twoFactorManageService.verificationMethodsFetch();
-        };
-        Fs2faManageComponent.prototype.manage = function () {
-            var _this = this;
-            var dialogRef = this._dialog.open(ManageMethodsComponent, {
-                autoFocus: false,
-                data: {
-                    defaultCountry: this.defaultCountry,
-                    twoFactorManageService: this._twoFactorManageService,
-                    verificationMethodTypes: this.verificationMethodTypes,
-                },
-            });
-            dialogRef.afterClosed()
-                .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function () {
-                _this._cdRef.markForCheck();
-            });
-        };
-        Fs2faManageComponent.prototype.reload = function () {
-            this._twoFactorManageService.verificationMethodsFetch();
-        };
-        Fs2faManageComponent.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        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", 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: [{
-                        selector: 'fs-2fa-manage',
-                        templateUrl: './2fa-manage.component.html',
-                        styleUrls: ['./2fa-manage.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        providers: [TwoFactorManageService],
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.MatDialog }, { type: TwoFactorManageService }]; }, propDecorators: { accountVerify: [{
-                    type: i0.Input
-                }], defaultCountry: [{
-                    type: i0.Input
-                }], verificationMethodTypes: [{
-                    type: i0.Input
-                }], verificationMethodsFetch: [{
-                    type: i0.Input
-                }], verificationMethodDelete: [{
-                    type: i0.Input
-                }], verificationMethodCreate: [{
-                    type: i0.Input
-                }], verificationMethodDefault: [{
-                    type: i0.Input
-                }], verificationMethodVerify: [{
-                    type: i0.Input
-                }], verificationMethodResend: [{
-                    type: i0.Input
+    var Fs2faManageComponent = /** @class */ (function () {
+        function Fs2faManageComponent(_cdRef, _dialog, _twoFactorManageService) {
+            this._cdRef = _cdRef;
+            this._dialog = _dialog;
+            this._twoFactorManageService = _twoFactorManageService;
+            this._destroy$ = new rxjs.Subject();
+        }
+        Fs2faManageComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.verificationMethodTypes = this.verificationMethodTypes || [
+                exports.VerificationMethodType.Sms,
+                exports.VerificationMethodType.Email,
+                exports.VerificationMethodType.App
+            ];
+            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) {
+                var types = {
+                    sms: 'Text Message',
+                    email: 'Email',
+                    app: 'Authenticator App',
+                };
+                _this.statuses = Object.keys(verificationMethods.reduce(function (accum, verificationMethod) {
+                    accum[verificationMethod.type] = true;
+                    return accum;
+                }, {}))
+                    .map(function (type) {
+                    return types[type];
+                });
+                _this._cdRef.markForCheck();
+            });
+            this._twoFactorManageService.verificationMethodsFetch();
+        };
+        Fs2faManageComponent.prototype.manage = function () {
+            var _this = this;
+            var dialogRef = this._dialog.open(ManageMethodsComponent, {
+                autoFocus: false,
+                data: {
+                    defaultCountry: this.defaultCountry,
+                    twoFactorManageService: this._twoFactorManageService,
+                    verificationMethodTypes: this.verificationMethodTypes,
+                },
+            });
+            dialogRef.afterClosed()
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this._cdRef.markForCheck();
+            });
+        };
+        Fs2faManageComponent.prototype.reload = function () {
+            this._twoFactorManageService.verificationMethodsFetch();
+        };
+        Fs2faManageComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        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", 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: [{
+                        selector: 'fs-2fa-manage',
+                        templateUrl: './2fa-manage.component.html',
+                        styleUrls: ['./2fa-manage.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        providers: [TwoFactorManageService],
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.MatDialog }, { type: TwoFactorManageService }]; }, propDecorators: { accountVerify: [{
+                    type: i0.Input
+                }], defaultCountry: [{
+                    type: i0.Input
+                }], verificationMethodTypes: [{
+                    type: i0.Input
+                }], verificationMethodsFetch: [{
+                    type: i0.Input
+                }], verificationMethodDelete: [{
+                    type: i0.Input
+                }], verificationMethodCreate: [{
+                    type: i0.Input
+                }], verificationMethodDefault: [{
+                    type: i0.Input
+                }], verificationMethodVerify: [{
+                    type: i0.Input
+                }], verificationMethodResend: [{
+                    type: i0.Input
                 }] } });
 
-    var DefautledModule = /** @class */ (function () {
-        function DefautledModule() {
-        }
-        return DefautledModule;
-    }());
-    DefautledModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DefautledModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    DefautledModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DefautledModule, declarations: [DefaultedComponent], exports: [DefaultedComponent] });
-    DefautledModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DefautledModule });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: DefautledModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        declarations: [
-                            DefaultedComponent,
-                        ],
-                        exports: [DefaultedComponent],
-                    }]
-            }] });
-
-    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,
-            i8$1.FsPhoneModule,
-            i4$1.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,
-                i8$1.FsPhoneModule,
-                i4$1.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,
-                            i8$1.FsPhoneModule,
-                            i4$1.FsCountryModule,
-                            DefautledModule,
-                        ],
-                        declarations: [
-                            VerificationMethodsComponent,
-                        ],
-                        exports: [VerificationMethodsComponent],
-                    }]
-            }] });
-
-    var Fs2faManageModule = /** @class */ (function () {
-        function Fs2faManageModule() {
-        }
-        return Fs2faManageModule;
-    }());
-    Fs2faManageModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faManageModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    Fs2faManageModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faManageModule, declarations: [Fs2faManageComponent,
-            ManageMethodsComponent,
-            NumbersComponent,
-            AppComponent,
-            EmailComponent,
-            NumberComponent,
-            EmailsComponent,
-            QrCodeComponent], imports: [i9$1.CommonModule,
-            i8.FormsModule,
-            i6.MatButtonModule,
-            i1.MatDialogModule,
-            i11.MatInputModule,
-            i4.MatIconModule,
-            i6$1.MatCheckboxModule,
-            i3.FsDialogModule,
-            i2$1.FsListModule,
-            i9.FsFormModule,
-            i3$2.FsLabelModule,
-            i8$1.FsPhoneModule,
-            i11$1.FsSkeletonModule,
-            i4$1.FsCountryModule,
-            CodeInputModule,
-            ResendModule,
-            DefautledModule,
-            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,
-                i6.MatButtonModule,
-                i1.MatDialogModule,
-                i11.MatInputModule,
-                i4.MatIconModule,
-                i6$1.MatCheckboxModule,
-                i3.FsDialogModule,
-                i2$1.FsListModule,
-                i9.FsFormModule,
-                i3$2.FsLabelModule,
-                i8$1.FsPhoneModule,
-                i11$1.FsSkeletonModule,
-                i4$1.FsCountryModule,
-                CodeInputModule,
-                ResendModule,
-                DefautledModule,
-                Fs2faVerificationModule,
-                Fs2faVerificationMethodsModule,
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faManageModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        imports: [
-                            i9$1.CommonModule,
-                            i8.FormsModule,
-                            i6.MatButtonModule,
-                            i1.MatDialogModule,
-                            i11.MatInputModule,
-                            i4.MatIconModule,
-                            i6$1.MatCheckboxModule,
-                            i3.FsDialogModule,
-                            i2$1.FsListModule,
-                            i9.FsFormModule,
-                            i3$2.FsLabelModule,
-                            i8$1.FsPhoneModule,
-                            i11$1.FsSkeletonModule,
-                            i4$1.FsCountryModule,
-                            CodeInputModule,
-                            ResendModule,
-                            DefautledModule,
-                            Fs2faVerificationModule,
-                            Fs2faVerificationMethodsModule,
-                        ],
-                        declarations: [
-                            Fs2faManageComponent,
-                            ManageMethodsComponent,
-                            NumbersComponent,
-                            AppComponent,
-                            EmailComponent,
-                            NumberComponent,
-                            EmailsComponent,
-                            QrCodeComponent,
-                        ],
-                        exports: [Fs2faManageComponent],
-                    }]
+    var Fs2faManageModule = /** @class */ (function () {
+        function Fs2faManageModule() {
+        }
+        return Fs2faManageModule;
+    }());
+    Fs2faManageModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faManageModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    Fs2faManageModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faManageModule, declarations: [Fs2faManageComponent,
+            ManageMethodsComponent,
+            NumbersComponent,
+            AppComponent,
+            EmailComponent,
+            NumberComponent,
+            EmailsComponent,
+            QrCodeComponent], imports: [i9$1.CommonModule,
+            i8.FormsModule,
+            i6.MatButtonModule,
+            i1.MatDialogModule,
+            i11.MatInputModule,
+            i4.MatIconModule,
+            i6$1.MatCheckboxModule,
+            i3.FsDialogModule,
+            i2$1.FsListModule,
+            i9.FsFormModule,
+            i3$2.FsLabelModule,
+            i8$1.FsPhoneModule,
+            i11$1.FsSkeletonModule,
+            i4$1.FsCountryModule,
+            CodeInputModule,
+            ResendModule,
+            DefautledModule,
+            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,
+                i6.MatButtonModule,
+                i1.MatDialogModule,
+                i11.MatInputModule,
+                i4.MatIconModule,
+                i6$1.MatCheckboxModule,
+                i3.FsDialogModule,
+                i2$1.FsListModule,
+                i9.FsFormModule,
+                i3$2.FsLabelModule,
+                i8$1.FsPhoneModule,
+                i11$1.FsSkeletonModule,
+                i4$1.FsCountryModule,
+                CodeInputModule,
+                ResendModule,
+                DefautledModule,
+                Fs2faVerificationModule,
+                Fs2faVerificationMethodsModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faManageModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i9$1.CommonModule,
+                            i8.FormsModule,
+                            i6.MatButtonModule,
+                            i1.MatDialogModule,
+                            i11.MatInputModule,
+                            i4.MatIconModule,
+                            i6$1.MatCheckboxModule,
+                            i3.FsDialogModule,
+                            i2$1.FsListModule,
+                            i9.FsFormModule,
+                            i3$2.FsLabelModule,
+                            i8$1.FsPhoneModule,
+                            i11$1.FsSkeletonModule,
+                            i4$1.FsCountryModule,
+                            CodeInputModule,
+                            ResendModule,
+                            DefautledModule,
+                            Fs2faVerificationModule,
+                            Fs2faVerificationMethodsModule,
+                        ],
+                        declarations: [
+                            Fs2faManageComponent,
+                            ManageMethodsComponent,
+                            NumbersComponent,
+                            AppComponent,
+                            EmailComponent,
+                            NumberComponent,
+                            EmailsComponent,
+                            QrCodeComponent,
+                        ],
+                        exports: [Fs2faManageComponent],
+                    }]
             }] });
 
-    /**
-     * Generated bundle index. Do not edit.
+    /**
+     * Generated bundle index. Do not edit.
      */
 
     exports.Fs2faManageComponent = Fs2faManageComponent;