npm - @firestitch/2fa - Versions diffs - 18.0.27 → 18.0.29 - Mend

@firestitch/2fa 18.0.27 → 18.0.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (79) hide show

package/fesm2022/firestitch-2fa.mjs CHANGED Viewed

@@ -1,57 +1,46 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, ViewChild, Input, Output, Inject, Injectable, NgModule, inject, Directive, HostListener, ChangeDetectorRef } from '@angular/core';
-import * as i1 from '@angular/material/dialog';
-import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import { of, Subject, BehaviorSubject, tap as tap$1 } from 'rxjs';
+import { EventEmitter, Component, ChangeDetectionStrategy, ViewChild, Input, Output, inject, ChangeDetectorRef, Injectable, NgModule, Directive, HostListener } from '@angular/core';
+import * as i1$2 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatDialog } from '@angular/material/dialog';
+import { of, Subject, BehaviorSubject } from 'rxjs';
 import { switchMap, tap, finalize, filter, takeUntil, map } from 'rxjs/operators';
-import * as i10 from '@firestitch/form';
+import * as i2 from '@firestitch/form';
 import { FsFormDirective, FsFormModule } from '@firestitch/form';
-import * as i2$1 from '@firestitch/message';
 import { FsMessage } from '@firestitch/message';
-import * as i3 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i4 from '@angular/forms';
-import { ControlContainer, NgForm, FormsModule } from '@angular/forms';
-import * as i5 from '@angular/material/button';
-import { MatButton, MatButtonModule } from '@angular/material/button';
-import * as i8 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i9 from '@firestitch/dialog';
-import { FsDialogModule } from '@firestitch/dialog';
-import * as i5$1 from '@firestitch/skeleton';
+import * as i1$1 from '@angular/forms';
+import { FormsModule, ControlContainer, NgForm } from '@angular/forms';
+import * as i2$1 from '@firestitch/dialog';
+import { FsDialogModule, FsDialog } from '@firestitch/dialog';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import * as i1$3 from '@firestitch/skeleton';
 import { FsSkeletonModule } from '@firestitch/skeleton';
-import * as i10$1 from '@firestitch/qrcode';
+import * as i6 from '@firestitch/qrcode';
 import { FsQrcodeModule } from '@firestitch/qrcode';
-import * as i2 from '@firestitch/code-input';
+import * as i1 from '@firestitch/code-input';
 import { FsCodeInputComponent, FsCodeInputModule } from '@firestitch/code-input';
-import * as i6$1 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i7 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i5$2 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i6 from '@angular/material/radio';
-import { MatRadioModule } from '@angular/material/radio';
-import * as i8$1 from '@firestitch/radiogroup';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatButton, MatButtonModule } from '@angular/material/button';
+import { NgTemplateOutlet, KeyValuePipe, CommonModule } from '@angular/common';
+import * as i5 from '@firestitch/radiogroup';
 import { FsRadioGroupModule } from '@firestitch/radiogroup';
-import * as i8$2 from '@firestitch/phone';
+import { MatIcon } from '@angular/material/icon';
+import { MatRadioButton } from '@angular/material/radio';
+import * as i3 from '@firestitch/phone';
 import { FsPhoneModule } from '@firestitch/phone';
-import * as i4$1 from '@firestitch/list';
+import { MatFormField, MatLabel, MatFormFieldModule } from '@angular/material/form-field';
+import { MatInput, MatInputModule } from '@angular/material/input';
+import * as i1$5 from '@firestitch/list';
 import { FsListComponent, FsListModule } from '@firestitch/list';
-import * as i1$2 from '@firestitch/prompt';
-import * as i5$3 from '@firestitch/country';
+import { FsPrompt } from '@firestitch/prompt';
+import * as i2$2 from '@firestitch/country';
 import { FsCountryModule } from '@firestitch/country';
-import * as i1$1 from '@firestitch/chip';
+import * as i1$4 from '@firestitch/chip';
 import { FsChipModule } from '@firestitch/chip';
-import * as i4$2 from '@firestitch/label';
+import * as i1$6 from '@firestitch/label';
 import { FsLabelModule } from '@firestitch/label';
-import * as i2$2 from '@angular/material/progress-spinner';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i3$1 from '@angular/material/card';
-import { MatCardModule } from '@angular/material/card';
-import * as i1$3 from '@firestitch/api';
+import { MatCard, MatCardHeader, MatCardTitle, MatCardContent, MatCardModule } from '@angular/material/card';
 import { FsApi } from '@firestitch/api';
-import * as i1$4 from '@angular/router';
+import * as i1$7 from '@angular/router';
 import { Router, ActivatedRoute, RouterModule } from '@angular/router';
 import { FsCookie } from '@firestitch/cookie';
@@ -80,11 +69,11 @@ class CodeInputComponent {
         this.codeInput.focusOnField(0);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CodeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: CodeInputComponent, selector: "app-code-input", inputs: { codeLength: "codeLength", code: "code" }, outputs: { codeCompleted: "codeCompleted", codeChanged: "codeChanged" }, viewQueries: [{ propertyName: "codeInput", first: true, predicate: FsCodeInputComponent, descendants: true }], ngImport: i0, template: "<fs-code-input\n  [codeLength]=\"codeLength\"\n  [ngModel]=\"code\"\n  name=\"code\"\n  [isPrevFocusableAfterClearing]=\"false\"\n  (completedLast)=\"codeComplete($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"], dependencies: [{ kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FsCodeInputComponent, selector: "fs-code-input", inputs: ["codeLength", "inputType", "inputMode", "initialFocusField", "isCharsCode", "isCodeHidden", "isPrevFocusableAfterClearing", "isFocusingOnLastByClickIfFilled", "disabled", "autocapitalize"], outputs: ["changed", "completed", "completedLast"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: CodeInputComponent, isStandalone: true, selector: "app-code-input", inputs: { codeLength: "codeLength", code: "code" }, outputs: { codeCompleted: "codeCompleted", codeChanged: "codeChanged" }, viewQueries: [{ propertyName: "codeInput", first: true, predicate: FsCodeInputComponent, descendants: true }], ngImport: i0, template: "<fs-code-input\n  [codeLength]=\"codeLength\"\n  [ngModel]=\"code\"\n  name=\"code\"\n  [isPrevFocusableAfterClearing]=\"false\"\n  (completedLast)=\"codeComplete($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"], dependencies: [{ kind: "ngmodule", type: FsCodeInputModule }, { kind: "component", type: i1.FsCodeInputComponent, selector: "fs-code-input", inputs: ["codeLength", "inputType", "inputMode", "initialFocusField", "isCharsCode", "isCodeHidden", "isPrevFocusableAfterClearing", "isFocusingOnLastByClickIfFilled", "disabled", "autocapitalize"], outputs: ["changed", "completed", "completedLast"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CodeInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-code-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-code-input\n  [codeLength]=\"codeLength\"\n  [ngModel]=\"code\"\n  name=\"code\"\n  [isPrevFocusableAfterClearing]=\"false\"\n  (completedLast)=\"codeComplete($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"] }]
+            args: [{ selector: 'app-code-input', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [FsCodeInputModule, FormsModule], template: "<fs-code-input\n  [codeLength]=\"codeLength\"\n  [ngModel]=\"code\"\n  name=\"code\"\n  [isPrevFocusableAfterClearing]=\"false\"\n  (completedLast)=\"codeComplete($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"] }]
         }], propDecorators: { codeInput: [{
                 type: ViewChild,
                 args: [FsCodeInputComponent]
@@ -99,10 +88,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }] } });
 class AppComponent {
-    _data;
-    _dialogRef;
-    _cdRef;
-    _message;
+    _data = inject(MAT_DIALOG_DATA);
+    _dialogRef = inject(MatDialogRef);
+    _cdRef = inject(ChangeDetectorRef);
+    _message = inject(FsMessage);
     form;
     twoFactorManageService;
     mode = 'qr-code';
@@ -112,12 +101,6 @@ class AppComponent {
     code;
     default;
     appType;
-    constructor(_data, _dialogRef, _cdRef, _message) {
-        this._data = _data;
-        this._dialogRef = _dialogRef;
-        this._cdRef = _cdRef;
-        this._message = _message;
-    }
     ngOnInit() {
         this.twoFactorManageService = this._data.twoFactorManageService;
         this.accountId = this._data.accountId;
@@ -161,22 +144,33 @@ class AppComponent {
             this._dialogRef.close(true);
         }));
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AppComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i0.ChangeDetectorRef }, { token: i2$1.FsMessage }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AppComponent, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: FsFormDirective, descendants: true }], ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"verify\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Authenticator app setup\n    </h1>\n    <mat-dialog-content>\n      <div\n          *ngIf=\"mode === 'qr-code'\"\n          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\n                <a\n                    href=\"https://apps.apple.com/us/app/authy/id494168017\"\n                    target=\"_blank\">\n                  App Store\n                </a>\n                or\n                the\n                <a\n                    href=\"https://play.google.com/store/apps/details?id=com.authy.authy\"\n                    target=\"_blank\">\n                  Google Play Store\n                </a>\n                .\n              </ng-container>\n              <ng-container *ngIf=\"appType === 'google'\">\n                Install the Google Authenticator App from the\n                <a\n                    href=\"https://apps.apple.com/us/app/google-authenticator/id388497605\"\n                    target=\"_blank\">\n                  App Store\n                </a>\n                or\n                the\n                <a\n                    href=\"https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en_US&gl=US\"\n                    target=\"_blank\">\n                  Google Play Store\n                </a>\n                .\n              </ng-container>\n            </li>\n            <ng-container *ngIf=\"appType === 'authy'\">\n              <li>\n                Open the Authy app and select\n                <b>\n                  Add Account\n                </b>\n                .\n              </li>\n              <li>\n                Select\n                <b>\n                  Scan QR Code\n                </b>\n                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\n                <b>\n                  Plus icon\n                </b>\n                in the lower right corner.\n              </li>\n              <li>\n                Select\n                <b>\n                  Scan a QR code\n                </b>\n                and scan the QR code below.\n              </li>\n            </ng-container>\n          </ol>\n          <ng-container *fsSkeleton=\"qrCodeUrl\">\n            <fs-qrcode\n              [value]=\"qrCodeUrl\"\n              [width]=\"300\"\n              [height]=\"300\">\n            </fs-qrcode>\n          </ng-container>\n        </ng-container>\n        <div\n            class=\"app-types\"\n            *ngIf=\"!appType\">\n          <p>\n            Select the Authenticator App you prefer\n          </p>\n          <div class=\"row\">\n            <span>\n              <a (click)=\"appTypeAuthy()\">\n                <svg\n                    width=\"50\"\n                    height=\"50\"\n                    viewBox=\"0 0 256 256\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    preserveAspectRatio=\"xMidYMid\">\n                  <path\n                    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\"\n                    fill=\"#EC1C24\">\n                  </path>\n                  <path\n                    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\"\n                    fill=\"#FFF\">\n                  </path>\n                </svg>\n              </a>\n              Authy\n            </span>\n            <span>\n              <a (click)=\"appTypeGoogle()\">\n                <svg\n                    width=\"50\"\n                    height=\"50\"\n                    viewBox=\"0 0 1024 1024\"\n                    xmlns=\"http://www.w3.org/2000/svg\">\n                  <path\n                    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\"\n                    fill=\"#a0a0a0\">\n                  </path>\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\"></path>\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\"></path>\n                  </g>\n                  <path\n                    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\"\n                    fill=\"#686868\">\n                  </path>\n                  <path\n                    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\"\n                    fill=\"#c3c3c3\">\n                  </path>\n                  <path\n                    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\"\n                    fill=\"#474747\">\n                  </path>\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\"></path>\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\"></path>\n                  </g>\n                  <path\n                    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\"\n                    fill=\"#b0b0b0\">\n                  </path>\n                  <path\n                    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\"\n                    fill=\"#939393\">\n                  </path>\n                  <path\n                    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\"\n                    fill=\"#767676\">\n                  </path>\n                  <path\n                    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\"\n                    fill=\"#bebebe\">\n                  </path>\n                </svg>\n              </a>\n              Google Authenticator\n            </span>\n          </div>\n        </div>\n      </div>\n      <div\n          *ngIf=\"mode === 'code-input'\"\n          class=\"code-input\">\n        <div>\n          Enter the 6-digit code you see in the App.\n        </div>\n        <app-code-input (codeChanged)=\"codeChanged($event)\"></app-code-input>\n        <mat-checkbox\n            name=\"default\"\n            [(ngModel)]=\"default\"\n            [disableRipple]=\"true\">\n          Make this the default verification method\n        </mat-checkbox>\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>", styles: ["ul{margin:0;padding-left:24px}fs-qrcode{display:flex;justify-content:center;margin:30px}app-code-input{margin-top:10px}.code-input{width:400px}mat-checkbox{overflow:hidden}.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}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i9.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "directive", type: i10.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i10.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i10.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "directive", type: i5$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: i10$1.FsClipboardComponent, selector: "fs-qrcode", inputs: ["value", "width", "height"] }, { kind: "component", type: CodeInputComponent, selector: "app-code-input", inputs: ["codeLength", "code"], outputs: ["codeCompleted", "codeChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AppComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: AppComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: FsFormDirective, descendants: true }], ngImport: i0, template: "<form\n  fsForm\n  [submit]=\"verify\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Authenticator app setup\n    </h1>\n    <mat-dialog-content>\n      @if (mode === 'qr-code') {\n        <div\n          class=\"qr-code\">\n          @if (appType) {\n            <ol>\n              <li>\n                @if (appType === 'authy') {\n                  Install the Authy Authenticator App from the\n                  <a\n                    href=\"https://apps.apple.com/us/app/authy/id494168017\"\n                    target=\"_blank\">\n                    App Store\n                  </a>\n                  or\n                  the\n                  <a\n                    href=\"https://play.google.com/store/apps/details?id=com.authy.authy\"\n                    target=\"_blank\">\n                    Google Play Store\n                  </a>\n                  .\n                }\n                @if (appType === 'google') {\n                  Install the Google Authenticator App from the\n                  <a\n                    href=\"https://apps.apple.com/us/app/google-authenticator/id388497605\"\n                    target=\"_blank\">\n                    App Store\n                  </a>\n                  or\n                  the\n                  <a\n                    href=\"https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en_US&gl=US\"\n                    target=\"_blank\">\n                    Google Play Store\n                  </a>\n                  .\n                }\n              </li>\n              @if (appType === 'authy') {\n                <li>\n                  Open the Authy app and select\n                  <b>\n                    Add Account\n                  </b>\n                  .\n                </li>\n                <li>\n                  Select\n                  <b>\n                    Scan QR Code\n                  </b>\n                  and scan the QR code below.\n                </li>\n              }\n              @if (appType === 'google') {\n                <li>\n                  Open the Google Authentictor app and click the\n                  <b>\n                    Plus icon\n                  </b>\n                  in the lower right corner.\n                </li>\n                <li>\n                  Select\n                  <b>\n                    Scan a QR code\n                  </b>\n                  and scan the QR code below.\n                </li>\n              }\n            </ol>\n            <ng-container *fsSkeleton=\"qrCodeUrl\">\n              <fs-qrcode\n                [value]=\"qrCodeUrl\"\n                [width]=\"300\"\n                [height]=\"300\">\n              </fs-qrcode>\n            </ng-container>\n          }\n          @if (!appType) {\n            <div\n              class=\"app-types\"\n              >\n              <p>\n                Select the Authenticator App you prefer\n              </p>\n              <div class=\"row\">\n                <span>\n                  <a (click)=\"appTypeAuthy()\">\n                    <svg\n                      width=\"50\"\n                      height=\"50\"\n                      viewBox=\"0 0 256 256\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      preserveAspectRatio=\"xMidYMid\">\n                      <path\n                        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\"\n                        fill=\"#EC1C24\">\n                      </path>\n                      <path\n                        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\"\n                        fill=\"#FFF\">\n                      </path>\n                    </svg>\n                  </a>\n                  Authy\n                </span>\n                <span>\n                  <a (click)=\"appTypeGoogle()\">\n                    <svg\n                      width=\"50\"\n                      height=\"50\"\n                      viewBox=\"0 0 1024 1024\"\n                      xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        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\"\n                        fill=\"#a0a0a0\">\n                      </path>\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\"></path>\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\"></path>\n                      </g>\n                      <path\n                        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\"\n                        fill=\"#686868\">\n                      </path>\n                      <path\n                        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\"\n                        fill=\"#c3c3c3\">\n                      </path>\n                      <path\n                        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\"\n                        fill=\"#474747\">\n                      </path>\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\"></path>\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\"></path>\n                      </g>\n                      <path\n                        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\"\n                        fill=\"#b0b0b0\">\n                      </path>\n                      <path\n                        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\"\n                        fill=\"#939393\">\n                      </path>\n                      <path\n                        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\"\n                        fill=\"#767676\">\n                      </path>\n                      <path\n                        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\"\n                        fill=\"#bebebe\">\n                      </path>\n                    </svg>\n                  </a>\n                  Google Authenticator\n                </span>\n              </div>\n            </div>\n          }\n        </div>\n      }\n      @if (mode === 'code-input') {\n        <div\n          class=\"code-input\">\n          <div>\n            Enter the 6-digit code you see in the App.\n          </div>\n          <app-code-input (codeChanged)=\"codeChanged($event)\"></app-code-input>\n          <mat-checkbox\n            name=\"default\"\n            [(ngModel)]=\"default\"\n            [disableRipple]=\"true\">\n            Make this the default verification method\n          </mat-checkbox>\n        </div>\n      }\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      @if (appType) {\n        @if (mode === 'qr-code') {\n          <button\n            type=\"button\"\n            mat-button\n            color=\"primary\"\n            (click)=\"next()\">\n            Next\n          </button>\n        }\n        @if (mode === 'code-input') {\n          <button\n            type=\"submit\"\n            mat-button\n            color=\"primary\"\n            (click)=\"next()\">\n            Verify\n          </button>\n        }\n      }\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>", styles: ["ul{margin:0;padding-left:24px}fs-qrcode{display:flex;justify-content:center;margin:30px}app-code-input{margin-top:10px}.code-input{width:400px}mat-checkbox{overflow:hidden}.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}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i2.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i2.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i2$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1$3.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "ngmodule", type: FsQrcodeModule }, { kind: "component", type: i6.FsClipboardComponent, selector: "fs-qrcode", inputs: ["value", "width", "height"] }, { kind: "component", type: CodeInputComponent, selector: "app-code-input", inputs: ["codeLength", "code"], outputs: ["codeCompleted", "codeChanged"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AppComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<form\n    fsForm\n    [submit]=\"verify\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Authenticator app setup\n    </h1>\n    <mat-dialog-content>\n      <div\n          *ngIf=\"mode === 'qr-code'\"\n          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\n                <a\n                    href=\"https://apps.apple.com/us/app/authy/id494168017\"\n                    target=\"_blank\">\n                  App Store\n                </a>\n                or\n                the\n                <a\n                    href=\"https://play.google.com/store/apps/details?id=com.authy.authy\"\n                    target=\"_blank\">\n                  Google Play Store\n                </a>\n                .\n              </ng-container>\n              <ng-container *ngIf=\"appType === 'google'\">\n                Install the Google Authenticator App from the\n                <a\n                    href=\"https://apps.apple.com/us/app/google-authenticator/id388497605\"\n                    target=\"_blank\">\n                  App Store\n                </a>\n                or\n                the\n                <a\n                    href=\"https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en_US&gl=US\"\n                    target=\"_blank\">\n                  Google Play Store\n                </a>\n                .\n              </ng-container>\n            </li>\n            <ng-container *ngIf=\"appType === 'authy'\">\n              <li>\n                Open the Authy app and select\n                <b>\n                  Add Account\n                </b>\n                .\n              </li>\n              <li>\n                Select\n                <b>\n                  Scan QR Code\n                </b>\n                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\n                <b>\n                  Plus icon\n                </b>\n                in the lower right corner.\n              </li>\n              <li>\n                Select\n                <b>\n                  Scan a QR code\n                </b>\n                and scan the QR code below.\n              </li>\n            </ng-container>\n          </ol>\n          <ng-container *fsSkeleton=\"qrCodeUrl\">\n            <fs-qrcode\n              [value]=\"qrCodeUrl\"\n              [width]=\"300\"\n              [height]=\"300\">\n            </fs-qrcode>\n          </ng-container>\n        </ng-container>\n        <div\n            class=\"app-types\"\n            *ngIf=\"!appType\">\n          <p>\n            Select the Authenticator App you prefer\n          </p>\n          <div class=\"row\">\n            <span>\n              <a (click)=\"appTypeAuthy()\">\n                <svg\n                    width=\"50\"\n                    height=\"50\"\n                    viewBox=\"0 0 256 256\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    preserveAspectRatio=\"xMidYMid\">\n                  <path\n                    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\"\n                    fill=\"#EC1C24\">\n                  </path>\n                  <path\n                    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\"\n                    fill=\"#FFF\">\n                  </path>\n                </svg>\n              </a>\n              Authy\n            </span>\n            <span>\n              <a (click)=\"appTypeGoogle()\">\n                <svg\n                    width=\"50\"\n                    height=\"50\"\n                    viewBox=\"0 0 1024 1024\"\n                    xmlns=\"http://www.w3.org/2000/svg\">\n                  <path\n                    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\"\n                    fill=\"#a0a0a0\">\n                  </path>\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\"></path>\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\"></path>\n                  </g>\n                  <path\n                    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\"\n                    fill=\"#686868\">\n                  </path>\n                  <path\n                    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\"\n                    fill=\"#c3c3c3\">\n                  </path>\n                  <path\n                    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\"\n                    fill=\"#474747\">\n                  </path>\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\"></path>\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\"></path>\n                  </g>\n                  <path\n                    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\"\n                    fill=\"#b0b0b0\">\n                  </path>\n                  <path\n                    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\"\n                    fill=\"#939393\">\n                  </path>\n                  <path\n                    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\"\n                    fill=\"#767676\">\n                  </path>\n                  <path\n                    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\"\n                    fill=\"#bebebe\">\n                  </path>\n                </svg>\n              </a>\n              Google Authenticator\n            </span>\n          </div>\n        </div>\n      </div>\n      <div\n          *ngIf=\"mode === 'code-input'\"\n          class=\"code-input\">\n        <div>\n          Enter the 6-digit code you see in the App.\n        </div>\n        <app-code-input (codeChanged)=\"codeChanged($event)\"></app-code-input>\n        <mat-checkbox\n            name=\"default\"\n            [(ngModel)]=\"default\"\n            [disableRipple]=\"true\">\n          Make this the default verification method\n        </mat-checkbox>\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>", styles: ["ul{margin:0;padding-left:24px}fs-qrcode{display:flex;justify-content:center;margin:30px}app-code-input{margin-top:10px}.code-input{width:400px}mat-checkbox{overflow:hidden}.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}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i1.MatDialogRef }, { type: i0.ChangeDetectorRef }, { type: i2$1.FsMessage }], propDecorators: { form: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FormsModule,
+                        FsFormModule,
+                        FsDialogModule,
+                        MatDialogTitle,
+                        CdkScrollable,
+                        MatDialogContent,
+                        FsSkeletonModule,
+                        FsQrcodeModule,
+                        CodeInputComponent,
+                        MatCheckbox,
+                        MatDialogActions,
+                        MatButton,
+                        MatDialogClose,
+                    ], template: "<form\n  fsForm\n  [submit]=\"verify\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Authenticator app setup\n    </h1>\n    <mat-dialog-content>\n      @if (mode === 'qr-code') {\n        <div\n          class=\"qr-code\">\n          @if (appType) {\n            <ol>\n              <li>\n                @if (appType === 'authy') {\n                  Install the Authy Authenticator App from the\n                  <a\n                    href=\"https://apps.apple.com/us/app/authy/id494168017\"\n                    target=\"_blank\">\n                    App Store\n                  </a>\n                  or\n                  the\n                  <a\n                    href=\"https://play.google.com/store/apps/details?id=com.authy.authy\"\n                    target=\"_blank\">\n                    Google Play Store\n                  </a>\n                  .\n                }\n                @if (appType === 'google') {\n                  Install the Google Authenticator App from the\n                  <a\n                    href=\"https://apps.apple.com/us/app/google-authenticator/id388497605\"\n                    target=\"_blank\">\n                    App Store\n                  </a>\n                  or\n                  the\n                  <a\n                    href=\"https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en_US&gl=US\"\n                    target=\"_blank\">\n                    Google Play Store\n                  </a>\n                  .\n                }\n              </li>\n              @if (appType === 'authy') {\n                <li>\n                  Open the Authy app and select\n                  <b>\n                    Add Account\n                  </b>\n                  .\n                </li>\n                <li>\n                  Select\n                  <b>\n                    Scan QR Code\n                  </b>\n                  and scan the QR code below.\n                </li>\n              }\n              @if (appType === 'google') {\n                <li>\n                  Open the Google Authentictor app and click the\n                  <b>\n                    Plus icon\n                  </b>\n                  in the lower right corner.\n                </li>\n                <li>\n                  Select\n                  <b>\n                    Scan a QR code\n                  </b>\n                  and scan the QR code below.\n                </li>\n              }\n            </ol>\n            <ng-container *fsSkeleton=\"qrCodeUrl\">\n              <fs-qrcode\n                [value]=\"qrCodeUrl\"\n                [width]=\"300\"\n                [height]=\"300\">\n              </fs-qrcode>\n            </ng-container>\n          }\n          @if (!appType) {\n            <div\n              class=\"app-types\"\n              >\n              <p>\n                Select the Authenticator App you prefer\n              </p>\n              <div class=\"row\">\n                <span>\n                  <a (click)=\"appTypeAuthy()\">\n                    <svg\n                      width=\"50\"\n                      height=\"50\"\n                      viewBox=\"0 0 256 256\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      preserveAspectRatio=\"xMidYMid\">\n                      <path\n                        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\"\n                        fill=\"#EC1C24\">\n                      </path>\n                      <path\n                        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\"\n                        fill=\"#FFF\">\n                      </path>\n                    </svg>\n                  </a>\n                  Authy\n                </span>\n                <span>\n                  <a (click)=\"appTypeGoogle()\">\n                    <svg\n                      width=\"50\"\n                      height=\"50\"\n                      viewBox=\"0 0 1024 1024\"\n                      xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        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\"\n                        fill=\"#a0a0a0\">\n                      </path>\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\"></path>\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\"></path>\n                      </g>\n                      <path\n                        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\"\n                        fill=\"#686868\">\n                      </path>\n                      <path\n                        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\"\n                        fill=\"#c3c3c3\">\n                      </path>\n                      <path\n                        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\"\n                        fill=\"#474747\">\n                      </path>\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\"></path>\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\"></path>\n                      </g>\n                      <path\n                        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\"\n                        fill=\"#b0b0b0\">\n                      </path>\n                      <path\n                        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\"\n                        fill=\"#939393\">\n                      </path>\n                      <path\n                        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\"\n                        fill=\"#767676\">\n                      </path>\n                      <path\n                        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\"\n                        fill=\"#bebebe\">\n                      </path>\n                    </svg>\n                  </a>\n                  Google Authenticator\n                </span>\n              </div>\n            </div>\n          }\n        </div>\n      }\n      @if (mode === 'code-input') {\n        <div\n          class=\"code-input\">\n          <div>\n            Enter the 6-digit code you see in the App.\n          </div>\n          <app-code-input (codeChanged)=\"codeChanged($event)\"></app-code-input>\n          <mat-checkbox\n            name=\"default\"\n            [(ngModel)]=\"default\"\n            [disableRipple]=\"true\">\n            Make this the default verification method\n          </mat-checkbox>\n        </div>\n      }\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      @if (appType) {\n        @if (mode === 'qr-code') {\n          <button\n            type=\"button\"\n            mat-button\n            color=\"primary\"\n            (click)=\"next()\">\n            Next\n          </button>\n        }\n        @if (mode === 'code-input') {\n          <button\n            type=\"submit\"\n            mat-button\n            color=\"primary\"\n            (click)=\"next()\">\n            Verify\n          </button>\n        }\n      }\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>", styles: ["ul{margin:0;padding-left:24px}fs-qrcode{display:flex;justify-content:center;margin:30px}app-code-input{margin-top:10px}.code-input{width:400px}mat-checkbox{overflow:hidden}.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}\n"] }]
+        }], propDecorators: { form: [{
                 type: ViewChild,
                 args: [FsFormDirective]
             }] } });
 class Fs2faVerificationCodeComponent {
-    _form;
+    _form = inject(FsFormDirective);
     codeInputComponent;
     type;
     recipient;
@@ -185,9 +179,6 @@ class Fs2faVerificationCodeComponent {
     codeChange = new EventEmitter();
     codeComplete = new EventEmitter();
     VerificationMethodType = VerificationMethodType;
-    constructor(_form) {
-        this._form = _form;
-    }
     codeCompleted(code) {
         this.code = code;
         this.codeChange.emit(this.code);
@@ -201,8 +192,8 @@ class Fs2faVerificationCodeComponent {
     focus() {
         this.codeInputComponent.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faVerificationCodeComponent, deps: [{ token: i10.FsFormDirective }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: Fs2faVerificationCodeComponent, selector: "fs-2fa-verification-code", inputs: { type: "type", recipient: "recipient", codeLength: "codeLength", code: "code" }, outputs: { codeChange: "codeChange", codeComplete: "codeComplete" }, viewQueries: [{ propertyName: "codeInputComponent", first: true, predicate: CodeInputComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"type === VerificationMethodType.Sms\">\n  <p class=\"description\">\n    A text message with a verification code was just sent to\n    <span style=\"white-space: nowrap;\">\n      {{ recipient }}\n    </span>\n    to verify it's you.\n  </p>\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\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<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<ng-template #input>\n  <app-code-input\n    [code]=\"code\"\n    [codeLength]=\"codeLength\"\n    (codeChanged)=\"codeChanged($event)\"\n    (codeCompleted)=\"codeCompleted($event)\">\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}.description{text-align:center}app-code-input{margin:20px auto 0;display:block}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CodeInputComponent, selector: "app-code-input", inputs: ["codeLength", "code"], outputs: ["codeCompleted", "codeChanged"] }], viewProviders: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faVerificationCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: Fs2faVerificationCodeComponent, isStandalone: true, selector: "fs-2fa-verification-code", inputs: { type: "type", recipient: "recipient", codeLength: "codeLength", code: "code" }, outputs: { codeChange: "codeChange", codeComplete: "codeComplete" }, viewQueries: [{ propertyName: "codeInputComponent", first: true, predicate: CodeInputComponent, descendants: true }], ngImport: i0, template: "@if (type === VerificationMethodType.Sms) {\n  <p class=\"description\">\n    A text message with a verification code was just sent to\n    <span style=\"white-space: nowrap;\">\n      {{ recipient }}\n    </span>\n    to verify it's you.\n  </p>\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n}\n@if (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}\n@if (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}\n<ng-template #input>\n  <app-code-input\n    [code]=\"code\"\n    [codeLength]=\"codeLength\"\n    (codeChanged)=\"codeChanged($event)\"\n    (codeCompleted)=\"codeCompleted($event)\">\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}.description{text-align:center}app-code-input{margin:20px auto 0;display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CodeInputComponent, selector: "app-code-input", inputs: ["codeLength", "code"], outputs: ["codeCompleted", "codeChanged"] }], viewProviders: [
             {
                 provide: ControlContainer,
                 useExisting: NgForm,
@@ -216,8 +207,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                             provide: ControlContainer,
                             useExisting: NgForm,
                         },
-                    ], template: "<ng-container *ngIf=\"type === VerificationMethodType.Sms\">\n  <p class=\"description\">\n    A text message with a verification code was just sent to\n    <span style=\"white-space: nowrap;\">\n      {{ recipient }}\n    </span>\n    to verify it's you.\n  </p>\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\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<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<ng-template #input>\n  <app-code-input\n    [code]=\"code\"\n    [codeLength]=\"codeLength\"\n    (codeChanged)=\"codeChanged($event)\"\n    (codeCompleted)=\"codeCompleted($event)\">\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}.description{text-align:center}app-code-input{margin:20px auto 0;display:block}\n"] }]
-        }], ctorParameters: () => [{ type: i10.FsFormDirective }], propDecorators: { codeInputComponent: [{
+                    ], standalone: true, imports: [NgTemplateOutlet, CodeInputComponent], template: "@if (type === VerificationMethodType.Sms) {\n  <p class=\"description\">\n    A text message with a verification code was just sent to\n    <span style=\"white-space: nowrap;\">\n      {{ recipient }}\n    </span>\n    to verify it's you.\n  </p>\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n}\n@if (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}\n@if (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}\n<ng-template #input>\n  <app-code-input\n    [code]=\"code\"\n    [codeLength]=\"codeLength\"\n    (codeChanged)=\"codeChanged($event)\"\n    (codeCompleted)=\"codeCompleted($event)\">\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}.description{text-align:center}app-code-input{margin:20px auto 0;display:block}\n"] }]
+        }], propDecorators: { codeInputComponent: [{
                 type: ViewChild,
                 args: [CodeInputComponent]
             }], type: [{
@@ -235,17 +226,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }] } });
 class Fs2faVerificationMethodsComponent {
-    _dialogData;
-    _dialogRef;
+    _dialogData = inject(MAT_DIALOG_DATA);
+    _dialogRef = inject(MatDialogRef);
     verificationMethod;
     phone;
     code;
     verificationMethods;
     verificationMethodType = VerificationMethodType;
     _selectVerificationMethod;
-    constructor(_dialogData, _dialogRef) {
-        this._dialogData = _dialogData;
-        this._dialogRef = _dialogRef;
+    constructor() {
+        const _dialogData = this._dialogData;
         this._selectVerificationMethod = _dialogData.selectVerificationMethod;
         this._setActiveMethod();
         this._initMethods(_dialogData.verificationMethods);
@@ -272,21 +262,32 @@ class Fs2faVerificationMethodsComponent {
             return acc;
         }, {});
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faVerificationMethodsComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: Fs2faVerificationMethodsComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    Verification methods\n  </h1>\n  <form\n      fsForm\n      [submit]=\"setVerificationMethod\"\n      [dirtySubmitButton]=\"false\">\n    <mat-dialog-content>\n      <ng-container>\n        <fs-radio-group\n            [(ngModel)]=\"verificationMethod\"\n            name=\"method\"\n            [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\">\n                        Text message\n                      </div>\n                      <div class=\"method-subtitle\">\n                        Send verification code to a mobile number\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\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\">\n                        Email\n                      </div>\n                      <div class=\"method-subtitle\">\n                        Send verification code to an email address\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\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\">\n                        Authenticator app\n                      </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              <mat-radio-button\n                  class=\"method-item\"\n                  *ngFor=\"let method of methodMap.value\"\n                  [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\n            mat-button\n            type=\"submit\"\n            color=\"primary\">\n          Next\n        </button>\n        <button\n            mat-button\n            type=\"button\"\n            [mat-dialog-close]=\"null\">\n          Cancel\n        </button>\n      </div>\n    </mat-dialog-actions>\n  </form>\n</fs-dialog>", 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"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i10.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i10.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i10.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "component", type: i8$1.FsRadioGroupComponent, selector: "fs-radio-group", inputs: ["orientation", "label", "name", "disabled", "radioPosition", "compareWith", "required"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i9.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faVerificationMethodsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: Fs2faVerificationMethodsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    Verification methods\n  </h1>\n  <form\n    fsForm\n    [submit]=\"setVerificationMethod\"\n    [dirtySubmitButton]=\"false\">\n    <mat-dialog-content>\n      <ng-container>\n        <fs-radio-group\n          [(ngModel)]=\"verificationMethod\"\n          name=\"method\"\n          [compareWith]=\"compareWith\">\n          @for (methodMap of verificationMethods | keyvalue; track methodMap) {\n            <div class=\"method\">\n              @switch (methodMap.key) {\n                @case (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\">\n                        Text message\n                      </div>\n                      <div class=\"method-subtitle\">\n                        Send verification code to a mobile number\n                      </div>\n                    </div>\n                  </div>\n                }\n                @case (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\">\n                        Email\n                      </div>\n                      <div class=\"method-subtitle\">\n                        Send verification code to an email address\n                      </div>\n                    </div>\n                  </div>\n                }\n                @case (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\">\n                        Authenticator app\n                      </div>\n                      <div class=\"method-subtitle\">\n                        Send verification code to your authenticator app\n                      </div>\n                    </div>\n                  </div>\n                }\n              }\n              @for (method of methodMap.value; track method) {\n                <mat-radio-button\n                  class=\"method-item\"\n                  [value]=\"method\">\n                  @switch (methodMap.key) {\n                    @case (verificationMethodType.Sms) {\n                      {{ method.phoneNumber }}\n                    }\n                    @case (verificationMethodType.Email) {\n                      {{ method.email }}\n                    }\n                    @case (verificationMethodType.App) {\n                      Authenticator App\n                    }\n                  }\n                </mat-radio-button>\n              }\n            </div>\n          }\n        </fs-radio-group>\n      </ng-container>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <div class=\"actions\">\n        <button\n          mat-button\n          type=\"submit\"\n          color=\"primary\">\n          Next\n        </button>\n        <button\n          mat-button\n          type=\"button\"\n          [mat-dialog-close]=\"null\">\n          Cancel\n        </button>\n      </div>\n    </mat-dialog-actions>\n  </form>\n</fs-dialog>", 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"], dependencies: [{ kind: "ngmodule", type: FsDialogModule }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i2$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i2.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i2.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "ngmodule", type: FsRadioGroupModule }, { kind: "component", type: i5.FsRadioGroupComponent, selector: "fs-radio-group", inputs: ["orientation", "label", "name", "disabled", "radioPosition", "compareWith", "required"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faVerificationMethodsComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    Verification methods\n  </h1>\n  <form\n      fsForm\n      [submit]=\"setVerificationMethod\"\n      [dirtySubmitButton]=\"false\">\n    <mat-dialog-content>\n      <ng-container>\n        <fs-radio-group\n            [(ngModel)]=\"verificationMethod\"\n            name=\"method\"\n            [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\">\n                        Text message\n                      </div>\n                      <div class=\"method-subtitle\">\n                        Send verification code to a mobile number\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\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\">\n                        Email\n                      </div>\n                      <div class=\"method-subtitle\">\n                        Send verification code to an email address\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\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\">\n                        Authenticator app\n                      </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              <mat-radio-button\n                  class=\"method-item\"\n                  *ngFor=\"let method of methodMap.value\"\n                  [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\n            mat-button\n            type=\"submit\"\n            color=\"primary\">\n          Next\n        </button>\n        <button\n            mat-button\n            type=\"button\"\n            [mat-dialog-close]=\"null\">\n          Cancel\n        </button>\n      </div>\n    </mat-dialog-actions>\n  </form>\n</fs-dialog>", 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"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i1.MatDialogRef }] });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsDialogModule,
+                        MatDialogTitle,
+                        FormsModule,
+                        FsFormModule,
+                        CdkScrollable,
+                        MatDialogContent,
+                        FsRadioGroupModule,
+                        MatIcon,
+                        MatRadioButton,
+                        MatDialogActions,
+                        MatButton,
+                        MatDialogClose,
+                        KeyValuePipe,
+                    ], template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    Verification methods\n  </h1>\n  <form\n    fsForm\n    [submit]=\"setVerificationMethod\"\n    [dirtySubmitButton]=\"false\">\n    <mat-dialog-content>\n      <ng-container>\n        <fs-radio-group\n          [(ngModel)]=\"verificationMethod\"\n          name=\"method\"\n          [compareWith]=\"compareWith\">\n          @for (methodMap of verificationMethods | keyvalue; track methodMap) {\n            <div class=\"method\">\n              @switch (methodMap.key) {\n                @case (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\">\n                        Text message\n                      </div>\n                      <div class=\"method-subtitle\">\n                        Send verification code to a mobile number\n                      </div>\n                    </div>\n                  </div>\n                }\n                @case (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\">\n                        Email\n                      </div>\n                      <div class=\"method-subtitle\">\n                        Send verification code to an email address\n                      </div>\n                    </div>\n                  </div>\n                }\n                @case (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\">\n                        Authenticator app\n                      </div>\n                      <div class=\"method-subtitle\">\n                        Send verification code to your authenticator app\n                      </div>\n                    </div>\n                  </div>\n                }\n              }\n              @for (method of methodMap.value; track method) {\n                <mat-radio-button\n                  class=\"method-item\"\n                  [value]=\"method\">\n                  @switch (methodMap.key) {\n                    @case (verificationMethodType.Sms) {\n                      {{ method.phoneNumber }}\n                    }\n                    @case (verificationMethodType.Email) {\n                      {{ method.email }}\n                    }\n                    @case (verificationMethodType.App) {\n                      Authenticator App\n                    }\n                  }\n                </mat-radio-button>\n              }\n            </div>\n          }\n        </fs-radio-group>\n      </ng-container>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <div class=\"actions\">\n        <button\n          mat-button\n          type=\"submit\"\n          color=\"primary\">\n          Next\n        </button>\n        <button\n          mat-button\n          type=\"button\"\n          [mat-dialog-close]=\"null\">\n          Cancel\n        </button>\n      </div>\n    </mat-dialog-actions>\n  </form>\n</fs-dialog>", 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"] }]
+        }], ctorParameters: () => [] });
 class Fs2faVerificationComponent {
-    _cdRef;
-    _dialog;
-    _message;
+    _cdRef = inject(ChangeDetectorRef);
+    _dialog = inject(FsDialog);
+    _message = inject(FsMessage);
     verificationCodeComponent;
     verificationMethod;
     resend;
@@ -304,11 +305,6 @@ class Fs2faVerificationComponent {
     trustDeviceChange = new EventEmitter();
     VerificationMethodType = VerificationMethodType;
     _destroy$ = new Subject();
-    constructor(_cdRef, _dialog, _message) {
-        this._cdRef = _cdRef;
-        this._dialog = _dialog;
-        this._message = _message;
-    }
     get recipient() {
         if (this.verificationMethod.type === VerificationMethodType.Email) {
             return this.verificationMethod.email;
@@ -364,13 +360,19 @@ class Fs2faVerificationComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faVerificationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i9.FsDialog }, { token: i2$1.FsMessage }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: Fs2faVerificationComponent, selector: "fs-2fa-verification", inputs: { verificationMethod: "verificationMethod", resend: "resend", showTrustedDevice: "showTrustedDevice", trustDevice: "trustDevice", codeLength: "codeLength", trustDays: "trustDays", code: "code", formatRecipient: "formatRecipient", getVerificationMethods: "getVerificationMethods", selectVerificationMethod: "selectVerificationMethod" }, outputs: { verified: "verified", codeChange: "codeChange", codeCompleted: "codeCompleted", trustDeviceChange: "trustDeviceChange" }, viewQueries: [{ propertyName: "verificationCodeComponent", first: true, predicate: Fs2faVerificationCodeComponent, descendants: true }], ngImport: i0, template: "<div class=\"code-container\">\n  <fs-2fa-verification-code\n    [recipient]=\"(formatRecipient && verificationMethod.type === VerificationMethodType.Sms) ? (recipient | fsPhone) : recipient\"\n    [type]=\"verificationMethod.type\"\n    [code]=\"code\"\n    [codeLength]=\"codeLength\"\n    (codeChange)=\"codeChanged($event)\"\n    (codeComplete)=\"codeComplete($event)\">\n  </fs-2fa-verification-code>\n</div>\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 2-step verification\n        <ng-container *ngIf=\"trustDays\">\n          for {{ trustDays }} days\n        </ng-container>\n        <ng-container *ngIf=\"!trustDays\">\n          for future signins\n        </ng-container>\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{display:block}.additional{display:flex;justify-content:space-between;align-items:center;margin:4px 0 10px}.additional small{color:inherit}.additional .resend{cursor:pointer;text-transform:none}.additional .resend mat-spinner{display:inline-block;vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i10.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "component", type: Fs2faVerificationCodeComponent, selector: "fs-2fa-verification-code", inputs: ["type", "recipient", "codeLength", "code"], outputs: ["codeChange", "codeComplete"] }, { kind: "pipe", type: i8$2.FsPhonePipe, name: "fsPhone" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faVerificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: Fs2faVerificationComponent, isStandalone: true, selector: "fs-2fa-verification", inputs: { verificationMethod: "verificationMethod", resend: "resend", showTrustedDevice: "showTrustedDevice", trustDevice: "trustDevice", codeLength: "codeLength", trustDays: "trustDays", code: "code", formatRecipient: "formatRecipient", getVerificationMethods: "getVerificationMethods", selectVerificationMethod: "selectVerificationMethod" }, outputs: { verified: "verified", codeChange: "codeChange", codeCompleted: "codeCompleted", trustDeviceChange: "trustDeviceChange" }, viewQueries: [{ propertyName: "verificationCodeComponent", first: true, predicate: Fs2faVerificationCodeComponent, descendants: true }], ngImport: i0, template: "<div class=\"code-container\">\n  <fs-2fa-verification-code\n    [recipient]=\"(formatRecipient && verificationMethod.type === VerificationMethodType.Sms) ? (recipient | fsPhone) : recipient\"\n    [type]=\"verificationMethod.type\"\n    [code]=\"code\"\n    [codeLength]=\"codeLength\"\n    (codeChange)=\"codeChanged($event)\"\n    (codeComplete)=\"codeComplete($event)\">\n  </fs-2fa-verification-code>\n</div>\n<div class=\"additional\">\n  @if (showTrustedDevice) {\n    <div\n      class=\"trust-device\"\n      >\n      <mat-checkbox\n        name=\"trust-device\"\n        [(ngModel)]=\"trustDevice\"\n        (ngModelChange)=\"trustDeviceChange.emit($event)\">\n        <div class=\"small\">\n          Bypass 2-step verification\n          @if (trustDays) {\n            for {{ trustDays }} days\n          }\n          @if (!trustDays) {\n            for future signins\n          }\n        </div>\n      </mat-checkbox>\n    </div>\n  }\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{display:block}.additional{display:flex;justify-content:space-between;align-items:center;margin:4px 0 10px}.additional small{color:inherit}.additional .resend{cursor:pointer;text-transform:none}.additional .resend mat-spinner{display:inline-block;vertical-align:middle}\n"], dependencies: [{ kind: "component", type: Fs2faVerificationCodeComponent, selector: "fs-2fa-verification-code", inputs: ["type", "recipient", "codeLength", "code"], outputs: ["codeChange", "codeComplete"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "ngmodule", type: FsPhoneModule }, { kind: "pipe", type: i3.FsPhonePipe, name: "fsPhone" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faVerificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-2fa-verification', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], 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    (codeChange)=\"codeChanged($event)\"\n    (codeComplete)=\"codeComplete($event)\">\n  </fs-2fa-verification-code>\n</div>\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 2-step verification\n        <ng-container *ngIf=\"trustDays\">\n          for {{ trustDays }} days\n        </ng-container>\n        <ng-container *ngIf=\"!trustDays\">\n          for future signins\n        </ng-container>\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{display:block}.additional{display:flex;justify-content:space-between;align-items:center;margin:4px 0 10px}.additional small{color:inherit}.additional .resend{cursor:pointer;text-transform:none}.additional .resend mat-spinner{display:inline-block;vertical-align:middle}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i9.FsDialog }, { type: i2$1.FsMessage }], propDecorators: { verificationCodeComponent: [{
+            args: [{ selector: 'fs-2fa-verification', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: true, imports: [
+                        Fs2faVerificationCodeComponent,
+                        MatCheckbox,
+                        FormsModule,
+                        FsFormModule,
+                        FsPhoneModule,
+                    ], 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    (codeChange)=\"codeChanged($event)\"\n    (codeComplete)=\"codeComplete($event)\">\n  </fs-2fa-verification-code>\n</div>\n<div class=\"additional\">\n  @if (showTrustedDevice) {\n    <div\n      class=\"trust-device\"\n      >\n      <mat-checkbox\n        name=\"trust-device\"\n        [(ngModel)]=\"trustDevice\"\n        (ngModelChange)=\"trustDeviceChange.emit($event)\">\n        <div class=\"small\">\n          Bypass 2-step verification\n          @if (trustDays) {\n            for {{ trustDays }} days\n          }\n          @if (!trustDays) {\n            for future signins\n          }\n        </div>\n      </mat-checkbox>\n    </div>\n  }\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{display:block}.additional{display:flex;justify-content:space-between;align-items:center;margin:4px 0 10px}.additional small{color:inherit}.additional .resend{cursor:pointer;text-transform:none}.additional .resend mat-spinner{display:inline-block;vertical-align:middle}\n"] }]
+        }], propDecorators: { verificationCodeComponent: [{
                 type: ViewChild,
                 args: [Fs2faVerificationCodeComponent]
             }], verificationMethod: [{
@@ -404,10 +406,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }] } });
 let EmailComponent$1 = class EmailComponent {
-    _data;
-    _dialogRef;
-    _cdRef;
-    _message;
+    _data = inject(MAT_DIALOG_DATA);
+    _dialogRef = inject(MatDialogRef);
+    _cdRef = inject(ChangeDetectorRef);
+    _message = inject(FsMessage);
     form;
     email;
     code;
@@ -415,11 +417,8 @@ let EmailComponent$1 = class EmailComponent {
     verificationMethod = null;
     trustDevice = true;
     twoFactorManageService;
-    constructor(_data, _dialogRef, _cdRef, _message) {
-        this._data = _data;
-        this._dialogRef = _dialogRef;
-        this._cdRef = _cdRef;
-        this._message = _message;
+    constructor() {
+        const _data = this._data;
         this.twoFactorManageService = _data.twoFactorManageService;
         this.default = !this.twoFactorManageService.hasVerificationMethods;
     }
@@ -459,25 +458,37 @@ let EmailComponent$1 = class EmailComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EmailComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i0.ChangeDetectorRef }, { token: i2$1.FsMessage }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: EmailComponent, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: FsFormDirective, descendants: true }], ngImport: i0, template: "<form\n    fsForm\n    [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          [(code)]=\"code\"\n          (codeCompleted)=\"codeCompleted($event)\"\n          [resend]=\"resend\"\n          [(trustDevice)]=\"trustDevice\">\n        </fs-2fa-verification>\n      </ng-container>\n      <ng-template #notVerificationMethod>\n        <p>\n          The app will only use this email for verifying your account security.\n        </p>\n        <mat-form-field>\n          <mat-label>\n            Email\n          </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 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>", styles: [":host ::ng-deep mat-checkbox .mat-ripple{display:none}:host ::ng-deep mat-checkbox .mat-checkbox-layout{white-space:wrap}mat-form-field{width:100%}mat-dialog-content{width:400px;max-width:100%}p{margin-top:0}app-code-input{margin-bottom:5px;display:block}mat-checkbox{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i9.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "directive", type: i10.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i10.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "directive", type: i10.FsFormEmailDirective, selector: "[fsFormEmail]", inputs: ["fsFormEmail", "fsFormEmailMessage"] }, { kind: "directive", type: i10.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i10.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "component", type: Fs2faVerificationComponent, selector: "fs-2fa-verification", inputs: ["verificationMethod", "resend", "showTrustedDevice", "trustDevice", "codeLength", "trustDays", "code", "formatRecipient", "getVerificationMethods", "selectVerificationMethod"], outputs: ["verified", "codeChange", "codeCompleted", "trustDeviceChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EmailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: EmailComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: FsFormDirective, descendants: true }], ngImport: i0, template: "<form\n  fsForm\n  [submit]=\"submit\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Email setup\n    </h1>\n    <mat-dialog-content>\n      @if (verificationMethod) {\n        <fs-2fa-verification\n          [verificationMethod]=\"verificationMethod\"\n          [(code)]=\"code\"\n          (codeCompleted)=\"codeCompleted($event)\"\n          [resend]=\"resend\"\n          [(trustDevice)]=\"trustDevice\">\n        </fs-2fa-verification>\n      } @else {\n        <p>\n          The app will only use this email for verifying your account security.\n        </p>\n        <mat-form-field>\n          <mat-label>\n            Email\n          </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 verification method\n        </mat-checkbox>\n      }\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>", styles: [":host ::ng-deep mat-checkbox .mat-ripple{display:none}:host ::ng-deep mat-checkbox .mat-checkbox-layout{white-space:wrap}mat-form-field{width:100%}mat-dialog-content{width:400px;max-width:100%}p{margin-top:0}app-code-input{margin-bottom:5px;display:block}mat-checkbox{overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i2.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "directive", type: i2.FsFormEmailDirective, selector: "[fsFormEmail]", inputs: ["fsFormEmail", "fsFormEmailMessage"] }, { kind: "directive", type: i2.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i2.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i2$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "component", type: Fs2faVerificationComponent, selector: "fs-2fa-verification", inputs: ["verificationMethod", "resend", "showTrustedDevice", "trustDevice", "codeLength", "trustDays", "code", "formatRecipient", "getVerificationMethods", "selectVerificationMethod"], outputs: ["verified", "codeChange", "codeCompleted", "trustDeviceChange"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EmailComponent$1, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<form\n    fsForm\n    [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          [(code)]=\"code\"\n          (codeCompleted)=\"codeCompleted($event)\"\n          [resend]=\"resend\"\n          [(trustDevice)]=\"trustDevice\">\n        </fs-2fa-verification>\n      </ng-container>\n      <ng-template #notVerificationMethod>\n        <p>\n          The app will only use this email for verifying your account security.\n        </p>\n        <mat-form-field>\n          <mat-label>\n            Email\n          </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 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>", styles: [":host ::ng-deep mat-checkbox .mat-ripple{display:none}:host ::ng-deep mat-checkbox .mat-checkbox-layout{white-space:wrap}mat-form-field{width:100%}mat-dialog-content{width:400px;max-width:100%}p{margin-top:0}app-code-input{margin-bottom:5px;display:block}mat-checkbox{overflow:hidden}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i1.MatDialogRef }, { type: i0.ChangeDetectorRef }, { type: i2$1.FsMessage }], propDecorators: { form: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FormsModule,
+                        FsFormModule,
+                        FsDialogModule,
+                        MatDialogTitle,
+                        CdkScrollable,
+                        MatDialogContent,
+                        Fs2faVerificationComponent,
+                        MatFormField,
+                        MatLabel,
+                        MatInput,
+                        MatCheckbox,
+                        MatDialogActions,
+                        MatButton,
+                        MatDialogClose,
+                    ], template: "<form\n  fsForm\n  [submit]=\"submit\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Email setup\n    </h1>\n    <mat-dialog-content>\n      @if (verificationMethod) {\n        <fs-2fa-verification\n          [verificationMethod]=\"verificationMethod\"\n          [(code)]=\"code\"\n          (codeCompleted)=\"codeCompleted($event)\"\n          [resend]=\"resend\"\n          [(trustDevice)]=\"trustDevice\">\n        </fs-2fa-verification>\n      } @else {\n        <p>\n          The app will only use this email for verifying your account security.\n        </p>\n        <mat-form-field>\n          <mat-label>\n            Email\n          </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 verification method\n        </mat-checkbox>\n      }\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>", styles: [":host ::ng-deep mat-checkbox .mat-ripple{display:none}:host ::ng-deep mat-checkbox .mat-checkbox-layout{white-space:wrap}mat-form-field{width:100%}mat-dialog-content{width:400px;max-width:100%}p{margin-top:0}app-code-input{margin-bottom:5px;display:block}mat-checkbox{overflow:hidden}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { form: [{
                 type: ViewChild,
                 args: [FsFormDirective, { static: false }]
             }] } });
 class NumberComponent {
-    _data;
-    _dialogRef;
-    _cdRef;
-    _message;
+    _data = inject(MAT_DIALOG_DATA);
+    _dialogRef = inject(MatDialogRef);
+    _cdRef = inject(ChangeDetectorRef);
+    _message = inject(FsMessage);
     form;
     phone;
     code;
@@ -486,11 +497,8 @@ class NumberComponent {
     verificationMethod = null;
     defaultCountry;
     twoFactorManageService;
-    constructor(_data, _dialogRef, _cdRef, _message) {
-        this._data = _data;
-        this._dialogRef = _dialogRef;
-        this._cdRef = _cdRef;
-        this._message = _message;
+    constructor() {
+        const _data = this._data;
         this.twoFactorManageService = _data.twoFactorManageService;
         this.defaultCountry = _data.defaultCountry;
         this.default = !this.twoFactorManageService.hasVerificationMethods;
@@ -533,22 +541,35 @@ class NumberComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: NumberComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i0.ChangeDetectorRef }, { token: i2$1.FsMessage }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: NumberComponent, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: FsFormDirective, descendants: true }], ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"submit\"\n    [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          [(code)]=\"code\"\n          (codeCompleted)=\"codeCompleted($event)\"\n          [resend]=\"resend\"\n          [formatRecipient]=\"true\"\n          [(trustDevice)]=\"trustDevice\">\n        </fs-2fa-verification>\n      </ng-container>\n      <ng-template #notVerificationMethod>\n        <p>\n          The app will only use this number for verifying your account security. Message and data rates may apply by your cell phone provider.\n        </p>\n        <mat-form-field>\n          <mat-label>\n            Phone number\n          </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 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>", styles: [":host ::ng-deep mat-checkbox .mat-ripple{display:none}:host ::ng-deep mat-checkbox .mat-checkbox-layout{white-space:wrap}app-code-input{margin-bottom:5px;display:block}mat-form-field{width:100%}mat-dialog-content{width:400px;max-width:100%}p{margin-top:0}mat-checkbox{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i6$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i9.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "directive", type: i10.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i10.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "directive", type: i10.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i10.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "component", type: i8$2.FsPhoneFieldComponent, selector: "[fsPhoneField]", inputs: ["allowNumberExt", "placeholder", "required", "disabled", "mode", "country", "autocomplete"] }, { kind: "component", type: Fs2faVerificationComponent, selector: "fs-2fa-verification", inputs: ["verificationMethod", "resend", "showTrustedDevice", "trustDevice", "codeLength", "trustDays", "code", "formatRecipient", "getVerificationMethods", "selectVerificationMethod"], outputs: ["verified", "codeChange", "codeCompleted", "trustDeviceChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: NumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: NumberComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: FsFormDirective, descendants: true }], ngImport: i0, template: "<form\n  fsForm\n  [submit]=\"submit\"\n  [autocomplete]=\"false\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Text message setup\n    </h1>\n    <mat-dialog-content>\n      @if (verificationMethod) {\n        <fs-2fa-verification\n          [verificationMethod]=\"verificationMethod\"\n          [(code)]=\"code\"\n          (codeCompleted)=\"codeCompleted($event)\"\n          [resend]=\"resend\"\n          [formatRecipient]=\"true\"\n          [(trustDevice)]=\"trustDevice\">\n        </fs-2fa-verification>\n      } @else {\n        <p>\n          The app will only use this number for verifying your account security. Message and data rates may apply by your cell phone provider.\n        </p>\n        <mat-form-field>\n          <mat-label>\n            Phone number\n          </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 verification method\n        </mat-checkbox>\n      }\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>", styles: [":host ::ng-deep mat-checkbox .mat-ripple{display:none}:host ::ng-deep mat-checkbox .mat-checkbox-layout{white-space:wrap}app-code-input{margin-bottom:5px;display:block}mat-form-field{width:100%}mat-dialog-content{width:400px;max-width:100%}p{margin-top:0}mat-checkbox{overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i2.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "directive", type: i2.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i2.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i2$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "component", type: Fs2faVerificationComponent, selector: "fs-2fa-verification", inputs: ["verificationMethod", "resend", "showTrustedDevice", "trustDevice", "codeLength", "trustDays", "code", "formatRecipient", "getVerificationMethods", "selectVerificationMethod"], outputs: ["verified", "codeChange", "codeCompleted", "trustDeviceChange"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FsPhoneModule }, { kind: "component", type: i3.FsPhoneFieldComponent, selector: "[fsPhoneField]", inputs: ["allowNumberExt", "placeholder", "required", "disabled", "mode", "country", "autocomplete"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: NumberComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<form\n    fsForm\n    [submit]=\"submit\"\n    [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          [(code)]=\"code\"\n          (codeCompleted)=\"codeCompleted($event)\"\n          [resend]=\"resend\"\n          [formatRecipient]=\"true\"\n          [(trustDevice)]=\"trustDevice\">\n        </fs-2fa-verification>\n      </ng-container>\n      <ng-template #notVerificationMethod>\n        <p>\n          The app will only use this number for verifying your account security. Message and data rates may apply by your cell phone provider.\n        </p>\n        <mat-form-field>\n          <mat-label>\n            Phone number\n          </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 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>", styles: [":host ::ng-deep mat-checkbox .mat-ripple{display:none}:host ::ng-deep mat-checkbox .mat-checkbox-layout{white-space:wrap}app-code-input{margin-bottom:5px;display:block}mat-form-field{width:100%}mat-dialog-content{width:400px;max-width:100%}p{margin-top:0}mat-checkbox{overflow:hidden}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i1.MatDialogRef }, { type: i0.ChangeDetectorRef }, { type: i2$1.FsMessage }], propDecorators: { form: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FormsModule,
+                        FsFormModule,
+                        FsDialogModule,
+                        MatDialogTitle,
+                        CdkScrollable,
+                        MatDialogContent,
+                        Fs2faVerificationComponent,
+                        MatFormField,
+                        MatLabel,
+                        MatInput,
+                        FsPhoneModule,
+                        MatCheckbox,
+                        MatDialogActions,
+                        MatButton,
+                        MatDialogClose,
+                    ], template: "<form\n  fsForm\n  [submit]=\"submit\"\n  [autocomplete]=\"false\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Text message setup\n    </h1>\n    <mat-dialog-content>\n      @if (verificationMethod) {\n        <fs-2fa-verification\n          [verificationMethod]=\"verificationMethod\"\n          [(code)]=\"code\"\n          (codeCompleted)=\"codeCompleted($event)\"\n          [resend]=\"resend\"\n          [formatRecipient]=\"true\"\n          [(trustDevice)]=\"trustDevice\">\n        </fs-2fa-verification>\n      } @else {\n        <p>\n          The app will only use this number for verifying your account security. Message and data rates may apply by your cell phone provider.\n        </p>\n        <mat-form-field>\n          <mat-label>\n            Phone number\n          </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 verification method\n        </mat-checkbox>\n      }\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>", styles: [":host ::ng-deep mat-checkbox .mat-ripple{display:none}:host ::ng-deep mat-checkbox .mat-checkbox-layout{white-space:wrap}app-code-input{margin-bottom:5px;display:block}mat-form-field{width:100%}mat-dialog-content{width:400px;max-width:100%}p{margin-top:0}mat-checkbox{overflow:hidden}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { form: [{
                 type: ViewChild,
                 args: [FsFormDirective, { static: false }]
             }] } });
 class TwoFactorManageService {
-    _dialog;
+    _dialog = inject(MatDialog);
     _destroy$ = new Subject();
     _verificationMethodsFetch;
     _verificationMethodCreate;
@@ -558,9 +579,6 @@ class TwoFactorManageService {
     _verificationMethodResend;
     _accountVerify;
     _verificationMethods$ = new BehaviorSubject([]);
-    constructor(_dialog) {
-        this._dialog = _dialog;
-    }
     get verificationMethods$() {
         return this._verificationMethods$
             .pipe(takeUntil(this._destroy$));
@@ -702,24 +720,24 @@ class TwoFactorManageService {
             this.verificationMethodsFetch();
         }), takeUntil(this._destroy$));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TwoFactorManageService, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TwoFactorManageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TwoFactorManageService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TwoFactorManageService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.MatDialog }] });
+        }] });
 class DefaultedComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DefaultedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: DefaultedComponent, selector: "app-defaulted", ngImport: i0, template: "<fs-chip [backgroundColor]=\"'#02A7F0'\" [size]=\"'tiny'\">Default</fs-chip>", styles: [":host{display:flex}\n"], dependencies: [{ kind: "component", type: i1$1.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "actionable", "value", "maxWidth", "actions", "icon", "image", "selected", "size", "backgroundColor", "borderColor", "color", "outlined"], outputs: ["selectedToggled", "removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: DefaultedComponent, isStandalone: true, selector: "app-defaulted", ngImport: i0, template: "<fs-chip [backgroundColor]=\"'#02A7F0'\" [size]=\"'tiny'\">Default</fs-chip>", styles: [":host{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: FsChipModule }, { kind: "component", type: i1$4.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "actionable", "value", "maxWidth", "actions", "icon", "image", "selected", "size", "backgroundColor", "borderColor", "color", "outlined"], outputs: ["selectedToggled", "removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DefaultedComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-defaulted', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-chip [backgroundColor]=\"'#02A7F0'\" [size]=\"'tiny'\">Default</fs-chip>", styles: [":host{display:flex}\n"] }]
+            args: [{ selector: 'app-defaulted', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [FsChipModule], template: "<fs-chip [backgroundColor]=\"'#02A7F0'\" [size]=\"'tiny'\">Default</fs-chip>", styles: [":host{display:flex}\n"] }]
         }] });
 class VerificationMethodsComponent {
-    _prompt;
+    _prompt = inject(FsPrompt);
     list;
     type;
     accountVerify;
@@ -730,9 +748,6 @@ class VerificationMethodsComponent {
     deleted = new EventEmitter();
     listConfig;
     VerificationMethodType = VerificationMethodType;
-    constructor(_prompt) {
-        this._prompt = _prompt;
-    }
     ngOnInit() {
         if (!this.verificationMethodDefault && this.twoFactorManageService?.hasVerificationMethodDefault) {
             this.verificationMethodDefault = (verificationMethod) => {
@@ -805,13 +820,19 @@ class VerificationMethodsComponent {
     reload() {
         this.list.reload();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: VerificationMethodsComponent, deps: [{ token: i1$2.FsPrompt }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: VerificationMethodsComponent, selector: "fs-2fa-verification-methods", inputs: { type: "type", accountVerify: "accountVerify", verificationMethodsFetch: "verificationMethodsFetch", verificationMethodDelete: "verificationMethodDelete", verificationMethodDefault: "verificationMethodDefault", twoFactorManageService: "twoFactorManageService" }, outputs: { deleted: "deleted" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\">\n  <fs-list-column class=\"col-icon\" width=\"1%\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <ng-container *ngIf=\"row.type === VerificationMethodType.Sms\">\n        <mat-icon>textsms</mat-icon>\n      </ng-container>\n\n      <ng-container *ngIf=\"row.type === VerificationMethodType.Email\">\n        <mat-icon>email</mat-icon>\n      </ng-container>\n\n      <ng-container *ngIf=\"row.type === VerificationMethodType.App\">\n        <mat-icon>phone_iphone</mat-icon>\n      </ng-container>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column class=\"col-name\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <div class=\"row\">\n        <ng-container *ngIf=\"row.type === VerificationMethodType.Sms\">\n          <div class=\"row\">\n            <fs-country [code]=\"row.phoneCountry\" [showName]=\"false\"></fs-country> \n            <span>{{row.phoneNumber | fsPhone}}</span>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"row.type === VerificationMethodType.Email\">\n          {{row.email}}\n        </ng-container>\n\n        <ng-container *ngIf=\"row.type === VerificationMethodType.App\">\n          App\n        </ng-container>\n\n        <app-defaulted *ngIf=\"row.default\"></app-defaulted>\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>", styles: [":host ::ng-deep .col-name .row{display:flex;align-items:center}:host ::ng-deep .col-name fs-country img{display:flex}fs-country{margin-right:5px}app-defaulted{margin-left:5px}mat-icon{display:flex}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i4$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i4$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "component", type: i5$3.FsCountryComponent, selector: "fs-country", inputs: ["code", "showIcon", "showName", "region", "width"] }, { kind: "component", type: DefaultedComponent, selector: "app-defaulted" }, { kind: "pipe", type: i8$2.FsPhonePipe, name: "fsPhone" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: VerificationMethodsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: VerificationMethodsComponent, isStandalone: true, selector: "fs-2fa-verification-methods", inputs: { type: "type", accountVerify: "accountVerify", verificationMethodsFetch: "verificationMethodsFetch", verificationMethodDelete: "verificationMethodDelete", verificationMethodDefault: "verificationMethodDefault", twoFactorManageService: "twoFactorManageService" }, outputs: { deleted: "deleted" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\">\n  <fs-list-column class=\"col-icon\" width=\"1%\">\n    <ng-template fs-list-cell let-row=\"row\">\n      @if (row.type === VerificationMethodType.Sms) {\n        <mat-icon>textsms</mat-icon>\n      }\n\n      @if (row.type === VerificationMethodType.Email) {\n        <mat-icon>email</mat-icon>\n      }\n\n      @if (row.type === VerificationMethodType.App) {\n        <mat-icon>phone_iphone</mat-icon>\n      }\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        @if (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        }\n\n        @if (row.type === VerificationMethodType.Email) {\n          {{row.email}}\n        }\n\n        @if (row.type === VerificationMethodType.App) {\n          App\n        }\n\n        @if (row.default) {\n          <app-defaulted></app-defaulted>\n        }\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}mat-icon{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1$5.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1$5.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1$5.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FsCountryModule }, { kind: "component", type: i2$2.FsCountryComponent, selector: "fs-country", inputs: ["code", "showIcon", "showName", "region", "width"] }, { kind: "component", type: DefaultedComponent, selector: "app-defaulted" }, { kind: "ngmodule", type: FsPhoneModule }, { kind: "pipe", type: i3.FsPhonePipe, name: "fsPhone" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: VerificationMethodsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-2fa-verification-methods', changeDetection: ChangeDetectionStrategy.OnPush, 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}mat-icon{display:flex}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.FsPrompt }], propDecorators: { list: [{
+            args: [{ selector: 'fs-2fa-verification-methods', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsListModule,
+                        MatIcon,
+                        FsCountryModule,
+                        DefaultedComponent,
+                        FsPhoneModule,
+                    ], template: "<fs-list [config]=\"listConfig\">\n  <fs-list-column class=\"col-icon\" width=\"1%\">\n    <ng-template fs-list-cell let-row=\"row\">\n      @if (row.type === VerificationMethodType.Sms) {\n        <mat-icon>textsms</mat-icon>\n      }\n\n      @if (row.type === VerificationMethodType.Email) {\n        <mat-icon>email</mat-icon>\n      }\n\n      @if (row.type === VerificationMethodType.App) {\n        <mat-icon>phone_iphone</mat-icon>\n      }\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        @if (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        }\n\n        @if (row.type === VerificationMethodType.Email) {\n          {{row.email}}\n        }\n\n        @if (row.type === VerificationMethodType.App) {\n          App\n        }\n\n        @if (row.default) {\n          <app-defaulted></app-defaulted>\n        }\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}mat-icon{display:flex}\n"] }]
+        }], propDecorators: { list: [{
                 type: ViewChild,
                 args: [FsListComponent]
             }], type: [{
@@ -831,16 +852,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }] } });
 class EmailsComponent {
-    _data;
-    _dialogRef;
-    _message;
+    _data = inject(MAT_DIALOG_DATA);
+    _dialogRef = inject(MatDialogRef);
+    _message = inject(FsMessage);
     verificationMethods;
     twoFactorManageService;
     VerificationMethodType = VerificationMethodType;
-    constructor(_data, _dialogRef, _message) {
-        this._data = _data;
-        this._dialogRef = _dialogRef;
-        this._message = _message;
+    constructor() {
+        const _data = this._data;
         this.twoFactorManageService = _data.twoFactorManageService;
     }
     add() {
@@ -855,32 +874,37 @@ class EmailsComponent {
             this._dialogRef.close();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EmailsComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i2$1.FsMessage }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: EmailsComponent, selector: "ng-component", viewQueries: [{ propertyName: "verificationMethods", first: true, predicate: VerificationMethodsComponent, descendants: true }], ngImport: i0, template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    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>", styles: [""], dependencies: [{ kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i9.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "directive", type: i10.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "component", type: VerificationMethodsComponent, selector: "fs-2fa-verification-methods", inputs: ["type", "accountVerify", "verificationMethodsFetch", "verificationMethodDelete", "verificationMethodDefault", "twoFactorManageService"], outputs: ["deleted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EmailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: EmailsComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "verificationMethods", first: true, predicate: VerificationMethodsComponent, descendants: true }], ngImport: i0, template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    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>", styles: [""], dependencies: [{ kind: "ngmodule", type: FsDialogModule }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i2$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "component", type: VerificationMethodsComponent, selector: "fs-2fa-verification-methods", inputs: ["type", "accountVerify", "verificationMethodsFetch", "verificationMethodDelete", "verificationMethodDefault", "twoFactorManageService"], outputs: ["deleted"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EmailsComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    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>" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i1.MatDialogRef }, { type: i2$1.FsMessage }], propDecorators: { verificationMethods: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsDialogModule,
+                        MatDialogTitle,
+                        CdkScrollable,
+                        MatDialogContent,
+                        VerificationMethodsComponent,
+                        MatDialogActions,
+                        MatButton,
+                        FsFormModule,
+                        MatDialogClose,
+                    ], template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    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>" }]
+        }], ctorParameters: () => [], propDecorators: { verificationMethods: [{
                 type: ViewChild,
                 args: [VerificationMethodsComponent]
             }] } });
 class NumbersComponent {
-    _data;
-    _dialogRef;
-    _message;
+    _data = inject(MAT_DIALOG_DATA);
+    _dialogRef = inject(MatDialogRef);
+    _message = inject(FsMessage);
     verificationMethods;
     defaultCountry;
     twoFactorManageService;
     VerificationMethodType = VerificationMethodType;
-    constructor(_data, _dialogRef, _message) {
-        this._data = _data;
-        this._dialogRef = _dialogRef;
-        this._message = _message;
+    constructor() {
+        const _data = this._data;
         this.twoFactorManageService = _data.twoFactorManageService;
         this.defaultCountry = _data.defaultCountry;
     }
@@ -896,37 +920,38 @@ class NumbersComponent {
             this._dialogRef.close();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: NumbersComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i2$1.FsMessage }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: NumbersComponent, selector: "ng-component", viewQueries: [{ propertyName: "verificationMethods", first: true, predicate: VerificationMethodsComponent, descendants: true }], ngImport: i0, template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    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>", styles: [""], dependencies: [{ kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i9.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "directive", type: i10.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "component", type: VerificationMethodsComponent, selector: "fs-2fa-verification-methods", inputs: ["type", "accountVerify", "verificationMethodsFetch", "verificationMethodDelete", "verificationMethodDefault", "twoFactorManageService"], outputs: ["deleted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: NumbersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: NumbersComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "verificationMethods", first: true, predicate: VerificationMethodsComponent, descendants: true }], ngImport: i0, template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    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>", styles: [""], dependencies: [{ kind: "ngmodule", type: FsDialogModule }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i2$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "component", type: VerificationMethodsComponent, selector: "fs-2fa-verification-methods", inputs: ["type", "accountVerify", "verificationMethodsFetch", "verificationMethodDelete", "verificationMethodDefault", "twoFactorManageService"], outputs: ["deleted"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: NumbersComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    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>" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i1.MatDialogRef }, { type: i2$1.FsMessage }], propDecorators: { verificationMethods: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsDialogModule,
+                        MatDialogTitle,
+                        CdkScrollable,
+                        MatDialogContent,
+                        VerificationMethodsComponent,
+                        MatDialogActions,
+                        MatButton,
+                        FsFormModule,
+                        MatDialogClose,
+                    ], template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    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>" }]
+        }], ctorParameters: () => [], propDecorators: { verificationMethods: [{
                 type: ViewChild,
                 args: [VerificationMethodsComponent]
             }] } });
 class ManageMethodsComponent {
-    _data;
-    _cdRef;
-    _dialog;
-    _message;
+    _data = inject(MAT_DIALOG_DATA);
+    _cdRef = inject(ChangeDetectorRef);
+    _dialog = inject(MatDialog);
+    _message = inject(FsMessage);
     twoFactorManageService;
     verificationMethods;
     verificationMethodTypes = {};
     VerificationMethodType = VerificationMethodType;
     _destroy$ = new Subject();
     _defaultCountry;
-    constructor(_data, _cdRef, _dialog, _message) {
-        this._data = _data;
-        this._cdRef = _cdRef;
-        this._dialog = _dialog;
-        this._message = _message;
-    }
     ngOnInit() {
         this._defaultCountry = this._data.defaultCountry;
         this.twoFactorManageService = this._data.twoFactorManageService;
@@ -1015,21 +1040,32 @@ class ManageMethodsComponent {
         this._destroy$.next(null);
         this._destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ManageMethodsComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i0.ChangeDetectorRef }, { token: i1.MatDialog }, { token: i2$1.FsMessage }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ManageMethodsComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    2-step verification\n  </h1>\n  <mat-dialog-content>\n    <table>\n      <tr *ngIf=\"verificationMethodTypes[VerificationMethodType.Sms]\">\n        <td>\n          <mat-icon>\n            textsms\n          </mat-icon>\n        </td>\n        <td>\n          <div class=\"type\">\n            <span>\n              Text message\n            </span>\n            @if (textHasVerificationMethod) {\n              <ng-container [ngTemplateOutlet]=\"enabledChip\"></ng-container>\n            }\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\n              <span class=\"items\">\n                <span *ngFor=\"let item of twoFactorManageService.smsVerificationMethods\">\n                  {{ item.phoneNumber | fsPhone }}\n                </span>\n              </span>\n            </ng-container>\n          </div>\n        </td>\n        <td>\n          @if (textHasVerificationMethod) {\n            <button\n                mat-stroked-button\n                type=\"button\"\n                (click)=\"textMessageManage()\">\n              Manage\n            </button>\n          } @else {\n            <button\n                mat-stroked-button\n                type=\"button\"\n                (click)=\"textMessageAdd()\">\n              Turn on\n            </button>\n          }\n        </td>\n      </tr>\n      <tr *ngIf=\"verificationMethodTypes[VerificationMethodType.Email]\">\n        <td>\n          <mat-icon>\n            email\n          </mat-icon>\n        </td>\n        <td>\n          <div class=\"type\">\n            <span>\n              Email\n            </span>\n            @if (emailHasVerificationMethod) {\n              <ng-container [ngTemplateOutlet]=\"enabledChip\"></ng-container>\n            }\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\n              <span class=\"items\">\n                <span *ngFor=\"let item of twoFactorManageService.emailVerificationMethods\">\n                  {{ item.email }}\n                </span>\n              </span>\n            </ng-container>\n          </div>\n        </td>\n        <td>\n          @if (emailHasVerificationMethod) {\n            <button\n                mat-stroked-button\n                type=\"button\"\n                (click)=\"emailMessageManage()\">\n              Manage\n            </button>\n          } @else {\n            <button\n                mat-stroked-button\n                type=\"button\"\n                (click)=\"emailMessageAdd()\">\n              Turn on\n            </button>\n          }\n        </td>\n      </tr>\n      <tr *ngIf=\"verificationMethodTypes[VerificationMethodType.App]\">\n        <td>\n          <mat-icon>\n            phone_iphone\n          </mat-icon>\n        </td>\n        <td>\n          <div class=\"type\">\n            <span>\n              Authenticator app\n            </span>\n            @if (appHasVerificationMethod) {\n              <ng-container [ngTemplateOutlet]=\"enabledChip\"></ng-container>\n            }\n            <app-defaulted *ngIf=\"defaultApp\"></app-defaulted>\n          </div>\n          <div class=\"small\">\n            Verification code is generated by an authenticator app such as Authy or Google Authenticator\n          </div>\n        </td>\n        <td>\n          @if (appHasVerificationMethod) {\n            <button\n                mat-stroked-button\n                type=\"button\"\n                (click)=\"appRemove()\">\n              Remove\n            </button>\n          } @else {\n            <button\n                mat-stroked-button\n                type=\"button\"\n                (click)=\"appAdd()\">\n              Turn on\n            </button>\n          }\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<ng-template #enabledChip>\n  <fs-chip\n      [backgroundColor]=\"'#70B601'\"\n      [size]=\"'tiny'\">\n    Enabled\n  </fs-chip>\n</ng-template>", styles: ["mat-dialog-content{max-width:500px}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:15px 6px;vertical-align:top}table tr button{white-space:nowrap}table tr .type{display:flex;align-items:center}table tr .type span{margin-right:5px}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"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "component", type: i1$1.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "actionable", "value", "maxWidth", "actions", "icon", "image", "selected", "size", "backgroundColor", "borderColor", "color", "outlined"], outputs: ["selectedToggled", "removed"] }, { kind: "directive", type: i10.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "component", type: DefaultedComponent, selector: "app-defaulted" }, { kind: "pipe", type: i8$2.FsPhonePipe, name: "fsPhone" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ManageMethodsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ManageMethodsComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    2-step verification\n  </h1>\n  <mat-dialog-content>\n    <table>\n      @if (verificationMethodTypes[VerificationMethodType.Sms]) {\n        <tr>\n          <td>\n            <mat-icon>\n              textsms\n            </mat-icon>\n          </td>\n          <td>\n            <div class=\"type\">\n              <span>\n                Text message\n              </span>\n              @if (textHasVerificationMethod) {\n                <ng-container [ngTemplateOutlet]=\"enabledChip\"></ng-container>\n              }\n              @if (defaultSms) {\n                <app-defaulted></app-defaulted>\n              }\n            </div>\n            <div class=\"small\">\n              Verification codes are sent by text message\n              @if (textHasVerificationMethod) {\n                to\n                <span class=\"items\">\n                  @for (item of twoFactorManageService.smsVerificationMethods; track item) {\n                    <span>\n                      {{ item.phoneNumber | fsPhone }}\n                    </span>\n                  }\n                </span>\n              }\n            </div>\n          </td>\n          <td>\n            @if (textHasVerificationMethod) {\n              <button\n                mat-stroked-button\n                type=\"button\"\n                (click)=\"textMessageManage()\">\n                Manage\n              </button>\n            } @else {\n              <button\n                mat-stroked-button\n                type=\"button\"\n                (click)=\"textMessageAdd()\">\n                Turn on\n              </button>\n            }\n          </td>\n        </tr>\n      }\n      @if (verificationMethodTypes[VerificationMethodType.Email]) {\n        <tr>\n          <td>\n            <mat-icon>\n              email\n            </mat-icon>\n          </td>\n          <td>\n            <div class=\"type\">\n              <span>\n                Email\n              </span>\n              @if (emailHasVerificationMethod) {\n                <ng-container [ngTemplateOutlet]=\"enabledChip\"></ng-container>\n              }\n              @if (defaultEmail) {\n                <app-defaulted></app-defaulted>\n              }\n            </div>\n            <div class=\"small\">\n              Verification codes are sent by email\n              @if (emailHasVerificationMethod) {\n                to\n                <span class=\"items\">\n                  @for (item of twoFactorManageService.emailVerificationMethods; track item) {\n                    <span>\n                      {{ item.email }}\n                    </span>\n                  }\n                </span>\n              }\n            </div>\n          </td>\n          <td>\n            @if (emailHasVerificationMethod) {\n              <button\n                mat-stroked-button\n                type=\"button\"\n                (click)=\"emailMessageManage()\">\n                Manage\n              </button>\n            } @else {\n              <button\n                mat-stroked-button\n                type=\"button\"\n                (click)=\"emailMessageAdd()\">\n                Turn on\n              </button>\n            }\n          </td>\n        </tr>\n      }\n      @if (verificationMethodTypes[VerificationMethodType.App]) {\n        <tr>\n          <td>\n            <mat-icon>\n              phone_iphone\n            </mat-icon>\n          </td>\n          <td>\n            <div class=\"type\">\n              <span>\n                Authenticator app\n              </span>\n              @if (appHasVerificationMethod) {\n                <ng-container [ngTemplateOutlet]=\"enabledChip\"></ng-container>\n              }\n              @if (defaultApp) {\n                <app-defaulted></app-defaulted>\n              }\n            </div>\n            <div class=\"small\">\n              Verification code is generated by an authenticator app such as Authy or Google Authenticator\n            </div>\n          </td>\n          <td>\n            @if (appHasVerificationMethod) {\n              <button\n                mat-stroked-button\n                type=\"button\"\n                (click)=\"appRemove()\">\n                Remove\n              </button>\n            } @else {\n              <button\n                mat-stroked-button\n                type=\"button\"\n                (click)=\"appAdd()\">\n                Turn on\n              </button>\n            }\n          </td>\n        </tr>\n      }\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<ng-template #enabledChip>\n  <fs-chip\n    [backgroundColor]=\"'#70B601'\"\n    [size]=\"'tiny'\">\n    Enabled\n  </fs-chip>\n</ng-template>", styles: ["mat-dialog-content{max-width:500px}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:15px 6px;vertical-align:top}table tr button{white-space:nowrap}table tr .type{display:flex;align-items:center}table tr .type span{margin-right:5px}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"], dependencies: [{ kind: "ngmodule", type: FsDialogModule }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i2$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DefaultedComponent, selector: "app-defaulted" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "ngmodule", type: FsChipModule }, { kind: "component", type: i1$4.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "actionable", "value", "maxWidth", "actions", "icon", "image", "selected", "size", "backgroundColor", "borderColor", "color", "outlined"], outputs: ["selectedToggled", "removed"] }, { kind: "ngmodule", type: FsPhoneModule }, { kind: "pipe", type: i3.FsPhonePipe, name: "fsPhone" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ManageMethodsComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    2-step verification\n  </h1>\n  <mat-dialog-content>\n    <table>\n      <tr *ngIf=\"verificationMethodTypes[VerificationMethodType.Sms]\">\n        <td>\n          <mat-icon>\n            textsms\n          </mat-icon>\n        </td>\n        <td>\n          <div class=\"type\">\n            <span>\n              Text message\n            </span>\n            @if (textHasVerificationMethod) {\n              <ng-container [ngTemplateOutlet]=\"enabledChip\"></ng-container>\n            }\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\n              <span class=\"items\">\n                <span *ngFor=\"let item of twoFactorManageService.smsVerificationMethods\">\n                  {{ item.phoneNumber | fsPhone }}\n                </span>\n              </span>\n            </ng-container>\n          </div>\n        </td>\n        <td>\n          @if (textHasVerificationMethod) {\n            <button\n                mat-stroked-button\n                type=\"button\"\n                (click)=\"textMessageManage()\">\n              Manage\n            </button>\n          } @else {\n            <button\n                mat-stroked-button\n                type=\"button\"\n                (click)=\"textMessageAdd()\">\n              Turn on\n            </button>\n          }\n        </td>\n      </tr>\n      <tr *ngIf=\"verificationMethodTypes[VerificationMethodType.Email]\">\n        <td>\n          <mat-icon>\n            email\n          </mat-icon>\n        </td>\n        <td>\n          <div class=\"type\">\n            <span>\n              Email\n            </span>\n            @if (emailHasVerificationMethod) {\n              <ng-container [ngTemplateOutlet]=\"enabledChip\"></ng-container>\n            }\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\n              <span class=\"items\">\n                <span *ngFor=\"let item of twoFactorManageService.emailVerificationMethods\">\n                  {{ item.email }}\n                </span>\n              </span>\n            </ng-container>\n          </div>\n        </td>\n        <td>\n          @if (emailHasVerificationMethod) {\n            <button\n                mat-stroked-button\n                type=\"button\"\n                (click)=\"emailMessageManage()\">\n              Manage\n            </button>\n          } @else {\n            <button\n                mat-stroked-button\n                type=\"button\"\n                (click)=\"emailMessageAdd()\">\n              Turn on\n            </button>\n          }\n        </td>\n      </tr>\n      <tr *ngIf=\"verificationMethodTypes[VerificationMethodType.App]\">\n        <td>\n          <mat-icon>\n            phone_iphone\n          </mat-icon>\n        </td>\n        <td>\n          <div class=\"type\">\n            <span>\n              Authenticator app\n            </span>\n            @if (appHasVerificationMethod) {\n              <ng-container [ngTemplateOutlet]=\"enabledChip\"></ng-container>\n            }\n            <app-defaulted *ngIf=\"defaultApp\"></app-defaulted>\n          </div>\n          <div class=\"small\">\n            Verification code is generated by an authenticator app such as Authy or Google Authenticator\n          </div>\n        </td>\n        <td>\n          @if (appHasVerificationMethod) {\n            <button\n                mat-stroked-button\n                type=\"button\"\n                (click)=\"appRemove()\">\n              Remove\n            </button>\n          } @else {\n            <button\n                mat-stroked-button\n                type=\"button\"\n                (click)=\"appAdd()\">\n              Turn on\n            </button>\n          }\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<ng-template #enabledChip>\n  <fs-chip\n      [backgroundColor]=\"'#70B601'\"\n      [size]=\"'tiny'\">\n    Enabled\n  </fs-chip>\n</ng-template>", styles: ["mat-dialog-content{max-width:500px}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:15px 6px;vertical-align:top}table tr button{white-space:nowrap}table tr .type{display:flex;align-items:center}table tr .type span{margin-right:5px}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"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i0.ChangeDetectorRef }, { type: i1.MatDialog }, { type: i2$1.FsMessage }] });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsDialogModule,
+                        MatDialogTitle,
+                        CdkScrollable,
+                        MatDialogContent,
+                        MatIcon,
+                        NgTemplateOutlet,
+                        DefaultedComponent,
+                        MatButton,
+                        FsFormModule,
+                        MatDialogActions,
+                        MatDialogClose,
+                        FsChipModule,
+                        FsPhoneModule,
+                    ], template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    2-step verification\n  </h1>\n  <mat-dialog-content>\n    <table>\n      @if (verificationMethodTypes[VerificationMethodType.Sms]) {\n        <tr>\n          <td>\n            <mat-icon>\n              textsms\n            </mat-icon>\n          </td>\n          <td>\n            <div class=\"type\">\n              <span>\n                Text message\n              </span>\n              @if (textHasVerificationMethod) {\n                <ng-container [ngTemplateOutlet]=\"enabledChip\"></ng-container>\n              }\n              @if (defaultSms) {\n                <app-defaulted></app-defaulted>\n              }\n            </div>\n            <div class=\"small\">\n              Verification codes are sent by text message\n              @if (textHasVerificationMethod) {\n                to\n                <span class=\"items\">\n                  @for (item of twoFactorManageService.smsVerificationMethods; track item) {\n                    <span>\n                      {{ item.phoneNumber | fsPhone }}\n                    </span>\n                  }\n                </span>\n              }\n            </div>\n          </td>\n          <td>\n            @if (textHasVerificationMethod) {\n              <button\n                mat-stroked-button\n                type=\"button\"\n                (click)=\"textMessageManage()\">\n                Manage\n              </button>\n            } @else {\n              <button\n                mat-stroked-button\n                type=\"button\"\n                (click)=\"textMessageAdd()\">\n                Turn on\n              </button>\n            }\n          </td>\n        </tr>\n      }\n      @if (verificationMethodTypes[VerificationMethodType.Email]) {\n        <tr>\n          <td>\n            <mat-icon>\n              email\n            </mat-icon>\n          </td>\n          <td>\n            <div class=\"type\">\n              <span>\n                Email\n              </span>\n              @if (emailHasVerificationMethod) {\n                <ng-container [ngTemplateOutlet]=\"enabledChip\"></ng-container>\n              }\n              @if (defaultEmail) {\n                <app-defaulted></app-defaulted>\n              }\n            </div>\n            <div class=\"small\">\n              Verification codes are sent by email\n              @if (emailHasVerificationMethod) {\n                to\n                <span class=\"items\">\n                  @for (item of twoFactorManageService.emailVerificationMethods; track item) {\n                    <span>\n                      {{ item.email }}\n                    </span>\n                  }\n                </span>\n              }\n            </div>\n          </td>\n          <td>\n            @if (emailHasVerificationMethod) {\n              <button\n                mat-stroked-button\n                type=\"button\"\n                (click)=\"emailMessageManage()\">\n                Manage\n              </button>\n            } @else {\n              <button\n                mat-stroked-button\n                type=\"button\"\n                (click)=\"emailMessageAdd()\">\n                Turn on\n              </button>\n            }\n          </td>\n        </tr>\n      }\n      @if (verificationMethodTypes[VerificationMethodType.App]) {\n        <tr>\n          <td>\n            <mat-icon>\n              phone_iphone\n            </mat-icon>\n          </td>\n          <td>\n            <div class=\"type\">\n              <span>\n                Authenticator app\n              </span>\n              @if (appHasVerificationMethod) {\n                <ng-container [ngTemplateOutlet]=\"enabledChip\"></ng-container>\n              }\n              @if (defaultApp) {\n                <app-defaulted></app-defaulted>\n              }\n            </div>\n            <div class=\"small\">\n              Verification code is generated by an authenticator app such as Authy or Google Authenticator\n            </div>\n          </td>\n          <td>\n            @if (appHasVerificationMethod) {\n              <button\n                mat-stroked-button\n                type=\"button\"\n                (click)=\"appRemove()\">\n                Remove\n              </button>\n            } @else {\n              <button\n                mat-stroked-button\n                type=\"button\"\n                (click)=\"appAdd()\">\n                Turn on\n              </button>\n            }\n          </td>\n        </tr>\n      }\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<ng-template #enabledChip>\n  <fs-chip\n    [backgroundColor]=\"'#70B601'\"\n    [size]=\"'tiny'\">\n    Enabled\n  </fs-chip>\n</ng-template>", styles: ["mat-dialog-content{max-width:500px}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:15px 6px;vertical-align:top}table tr button{white-space:nowrap}table tr .type{display:flex;align-items:center}table tr .type span{margin-right:5px}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"] }]
+        }] });
 class Fs2faManageComponent {
-    _cdRef;
-    _dialog;
-    _twoFactorManageService;
+    _cdRef = inject(ChangeDetectorRef);
+    _dialog = inject(MatDialog);
+    _twoFactorManageService = inject(TwoFactorManageService);
     accountVerify;
     defaultCountry;
     verificationMethodTypes;
@@ -1041,11 +1077,6 @@ class Fs2faManageComponent {
     verificationMethodResend;
     statuses;
     _destroy$ = new Subject();
-    constructor(_cdRef, _dialog, _twoFactorManageService) {
-        this._cdRef = _cdRef;
-        this._dialog = _dialog;
-        this._twoFactorManageService = _twoFactorManageService;
-    }
     ngOnInit() {
         this.verificationMethodTypes = this.verificationMethodTypes || [
             VerificationMethodType.Sms,
@@ -1100,13 +1131,13 @@ class Fs2faManageComponent {
         this._destroy$.next(null);
         this._destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faManageComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.MatDialog }, { token: TwoFactorManageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: Fs2faManageComponent, selector: "fs-2fa-manage", inputs: { accountVerify: "accountVerify", defaultCountry: "defaultCountry", verificationMethodTypes: "verificationMethodTypes", verificationMethodsFetch: "verificationMethodsFetch", verificationMethodDelete: "verificationMethodDelete", verificationMethodCreate: "verificationMethodCreate", verificationMethodDefault: "verificationMethodDefault", verificationMethodVerify: "verificationMethodVerify", verificationMethodResend: "verificationMethodResend" }, providers: [TwoFactorManageService], ngImport: i0, template: "<fs-label-field>\n  <fs-label>Status</fs-label>\n  <ng-container *ngIf=\"statuses\">\n    <ng-container *ngIf=\"statuses.length === 1\">\n      {{statuses[0]}} verification is enabled\n    </ng-container>\n\n    <ng-container *ngIf=\"statuses.length > 1\">\n      {{statuses.join(', ')}} verifications are enabled\n    </ng-container>\n\n    <ng-container *ngIf=\"statuses.length  === 0\">\n      No verification methods are enabled\n    </ng-container>\n  </ng-container>\n</fs-label-field>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$2.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i4$2.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faManageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: Fs2faManageComponent, isStandalone: true, selector: "fs-2fa-manage", inputs: { accountVerify: "accountVerify", defaultCountry: "defaultCountry", verificationMethodTypes: "verificationMethodTypes", verificationMethodsFetch: "verificationMethodsFetch", verificationMethodDelete: "verificationMethodDelete", verificationMethodCreate: "verificationMethodCreate", verificationMethodDefault: "verificationMethodDefault", verificationMethodVerify: "verificationMethodVerify", verificationMethodResend: "verificationMethodResend" }, providers: [TwoFactorManageService], ngImport: i0, template: "<fs-label-field>\n  <fs-label>Status</fs-label>\n  @if (statuses) {\n    @if (statuses.length === 1) {\n      {{statuses[0]}} verification is enabled\n    }\n    @if (statuses.length > 1) {\n      {{statuses.join(', ')}} verifications are enabled\n    }\n    @if (statuses.length  === 0) {\n      No verification methods are enabled\n    }\n  }\n</fs-label-field>", styles: [""], dependencies: [{ kind: "ngmodule", type: FsLabelModule }, { kind: "component", type: i1$6.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i1$6.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faManageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-2fa-manage', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TwoFactorManageService], 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>" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.MatDialog }, { type: TwoFactorManageService }], propDecorators: { accountVerify: [{
+            args: [{ selector: 'fs-2fa-manage', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TwoFactorManageService], standalone: true, imports: [FsLabelModule], template: "<fs-label-field>\n  <fs-label>Status</fs-label>\n  @if (statuses) {\n    @if (statuses.length === 1) {\n      {{statuses[0]}} verification is enabled\n    }\n    @if (statuses.length > 1) {\n      {{statuses.join(', ')}} verifications are enabled\n    }\n    @if (statuses.length  === 0) {\n      No verification methods are enabled\n    }\n  }\n</fs-label-field>" }]
+        }], propDecorators: { accountVerify: [{
                 type: Input
             }], defaultCountry: [{
                 type: Input
@@ -1126,337 +1157,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 type: Input
             }] } });
-class CodeInputModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CodeInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: CodeInputModule, declarations: [CodeInputComponent], imports: [FormsModule,
-            MatFormFieldModule,
-            MatInputModule,
-            FsCodeInputModule], exports: [CodeInputComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CodeInputModule, imports: [FormsModule,
-            MatFormFieldModule,
-            MatInputModule,
-            FsCodeInputModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CodeInputModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        FormsModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        FsCodeInputModule,
-                    ],
-                    declarations: [
-                        CodeInputComponent,
-                    ],
-                    exports: [
-                        CodeInputComponent,
-                    ],
-                }]
-        }] });
-class DefautledModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DefautledModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: DefautledModule, declarations: [DefaultedComponent], imports: [FsChipModule], exports: [DefaultedComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DefautledModule, imports: [FsChipModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DefautledModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        DefaultedComponent,
-                    ],
-                    imports: [
-                        FsChipModule,
-                    ],
-                    exports: [DefaultedComponent],
-                }]
-        }] });
-class ResendComponent {
-    _cdRef;
-    resend;
-    resendInProgress = false;
-    _destroy$ = new Subject();
-    constructor(_cdRef) {
-        this._cdRef = _cdRef;
-    }
-    resendClick() {
-        this.resendInProgress = true;
-        this.resend()
-            .pipe(finalize(() => {
-            this.resendInProgress = false;
-            this._cdRef.markForCheck();
-        }), takeUntil(this._destroy$))
-            .subscribe();
-    }
-    ngOnDestroy() {
-        this._destroy$.next(null);
-        this._destroy$.complete();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ResendComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ResendComponent, selector: "app-resend", inputs: { resend: "resend" }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ResendComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-resend', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { resend: [{
-                type: Input
-            }] } });
-class ResendModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ResendModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: ResendModule, declarations: [ResendComponent], imports: [CommonModule,
-            MatProgressSpinnerModule], exports: [ResendComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ResendModule, imports: [CommonModule,
-            MatProgressSpinnerModule] });
+class Fs2faManageModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faManageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: Fs2faManageModule, imports: [Fs2faManageComponent], exports: [Fs2faManageComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faManageModule, imports: [Fs2faManageComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ResendModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faManageModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule,
-                        MatProgressSpinnerModule,
-                    ],
-                    declarations: [
-                        ResendComponent,
+                        Fs2faManageComponent,
                     ],
                     exports: [
-                        ResendComponent,
+                        Fs2faManageComponent,
                     ],
                 }]
         }] });
 class Fs2faVerificationMethodsModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faVerificationMethodsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: Fs2faVerificationMethodsModule, declarations: [VerificationMethodsComponent], imports: [CommonModule,
-            FormsModule,
-            MatIconModule,
-            FsListModule,
-            FsPhoneModule,
-            FsCountryModule,
-            DefautledModule], exports: [VerificationMethodsComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faVerificationMethodsModule, imports: [CommonModule,
-            FormsModule,
-            MatIconModule,
-            FsListModule,
-            FsPhoneModule,
-            FsCountryModule,
-            DefautledModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: Fs2faVerificationMethodsModule, imports: [VerificationMethodsComponent], exports: [VerificationMethodsComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faVerificationMethodsModule, imports: [VerificationMethodsComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faVerificationMethodsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule,
-                        FormsModule,
-                        MatIconModule,
-                        FsListModule,
-                        FsPhoneModule,
-                        FsCountryModule,
-                        DefautledModule,
-                    ],
-                    declarations: [
                         VerificationMethodsComponent,
                     ],
-                    exports: [VerificationMethodsComponent],
-                }]
-        }] });
-class Fs2faVerificationResendDirective {
-    verification;
-    _button = inject(MatButton);
-    click() {
-        this._button.disabled = true;
-        this.verification.resendCode()
-            .pipe(finalize(() => this._button.disabled = false))
-            .subscribe();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faVerificationResendDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: Fs2faVerificationResendDirective, selector: "[fs2faVerificationResend]", inputs: { verification: ["fs2faVerificationResend", "verification"] }, host: { listeners: { "click": "click()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faVerificationResendDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fs2faVerificationResend]',
-                }]
-        }], propDecorators: { verification: [{
-                type: Input,
-                args: ['fs2faVerificationResend']
-            }], click: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-class Fs2faVerificationModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faVerificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: Fs2faVerificationModule, declarations: [Fs2faVerificationComponent,
-            Fs2faVerificationCodeComponent,
-            Fs2faVerificationMethodsComponent,
-            Fs2faVerificationResendDirective], imports: [CommonModule,
-            FormsModule,
-            MatFormFieldModule,
-            MatInputModule,
-            MatButtonModule,
-            MatIconModule,
-            MatRadioModule,
-            MatCheckboxModule,
-            FsFormModule,
-            FsRadioGroupModule,
-            FsDialogModule,
-            FsSkeletonModule,
-            FsPhoneModule,
-            FsSkeletonModule,
-            ResendModule,
-            CodeInputModule], exports: [Fs2faVerificationComponent,
-            Fs2faVerificationResendDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faVerificationModule, imports: [CommonModule,
-            FormsModule,
-            MatFormFieldModule,
-            MatInputModule,
-            MatButtonModule,
-            MatIconModule,
-            MatRadioModule,
-            MatCheckboxModule,
-            FsFormModule,
-            FsRadioGroupModule,
-            FsDialogModule,
-            FsSkeletonModule,
-            FsPhoneModule,
-            FsSkeletonModule,
-            ResendModule,
-            CodeInputModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faVerificationModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        MatRadioModule,
-                        MatCheckboxModule,
-                        FsFormModule,
-                        FsRadioGroupModule,
-                        FsDialogModule,
-                        FsSkeletonModule,
-                        FsPhoneModule,
-                        FsSkeletonModule,
-                        ResendModule,
-                        CodeInputModule,
-                    ],
-                    declarations: [
-                        Fs2faVerificationComponent,
-                        Fs2faVerificationCodeComponent,
-                        Fs2faVerificationMethodsComponent,
-                        Fs2faVerificationResendDirective,
-                    ],
                     exports: [
-                        Fs2faVerificationComponent,
-                        Fs2faVerificationResendDirective,
-                    ],
-                    providers: [],
-                }]
-        }] });
-class Fs2faManageModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faManageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: Fs2faManageModule, declarations: [Fs2faManageComponent,
-            ManageMethodsComponent,
-            NumbersComponent,
-            AppComponent,
-            EmailComponent$1,
-            NumberComponent,
-            EmailsComponent], imports: [CommonModule,
-            FormsModule,
-            MatButtonModule,
-            MatDialogModule,
-            MatInputModule,
-            MatIconModule,
-            MatCheckboxModule,
-            FsDialogModule,
-            FsListModule,
-            FsChipModule,
-            FsFormModule,
-            FsLabelModule,
-            FsPhoneModule,
-            FsSkeletonModule,
-            FsCountryModule,
-            FsQrcodeModule,
-            CodeInputModule,
-            ResendModule,
-            DefautledModule,
-            Fs2faVerificationModule,
-            Fs2faVerificationMethodsModule], exports: [Fs2faManageComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faManageModule, imports: [CommonModule,
-            FormsModule,
-            MatButtonModule,
-            MatDialogModule,
-            MatInputModule,
-            MatIconModule,
-            MatCheckboxModule,
-            FsDialogModule,
-            FsListModule,
-            FsChipModule,
-            FsFormModule,
-            FsLabelModule,
-            FsPhoneModule,
-            FsSkeletonModule,
-            FsCountryModule,
-            FsQrcodeModule,
-            CodeInputModule,
-            ResendModule,
-            DefautledModule,
-            Fs2faVerificationModule,
-            Fs2faVerificationMethodsModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faManageModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        MatButtonModule,
-                        MatDialogModule,
-                        MatInputModule,
-                        MatIconModule,
-                        MatCheckboxModule,
-                        FsDialogModule,
-                        FsListModule,
-                        FsChipModule,
-                        FsFormModule,
-                        FsLabelModule,
-                        FsPhoneModule,
-                        FsSkeletonModule,
-                        FsCountryModule,
-                        FsQrcodeModule,
-                        CodeInputModule,
-                        ResendModule,
-                        DefautledModule,
-                        Fs2faVerificationModule,
-                        Fs2faVerificationMethodsModule,
-                    ],
-                    declarations: [
-                        Fs2faManageComponent,
-                        ManageMethodsComponent,
-                        NumbersComponent,
-                        AppComponent,
-                        EmailComponent$1,
-                        NumberComponent,
-                        EmailsComponent,
+                        VerificationMethodsComponent,
                     ],
-                    exports: [Fs2faManageComponent],
                 }]
         }] });
 class VerificationMethodData {
-    _api;
-    constructor(_api) {
-        this._api = _api;
-    }
+    _api = inject(FsApi);
     verify(code, trustDevice, config = {}) {
         return this._api.post('verifications/methods/verify', { code, trustDevice }, {
             key: 'verificationMethod',
@@ -1475,12 +1211,12 @@ class VerificationMethodData {
             ...config,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: VerificationMethodData, deps: [{ token: i1$3.FsApi }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: VerificationMethodData, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: VerificationMethodData });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: VerificationMethodData, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$3.FsApi }] });
+        }] });
 class VerificationSetupService {
     _api = inject(FsApi);
@@ -1515,14 +1251,12 @@ class EmailComponent {
         });
     }
     next = () => {
-        return of(true)
-            .pipe(tap$1(() => {
-            const redirect = this._route.snapshot.queryParams.redirect || '/';
-            this._router.navigate(['verify'], {
-                relativeTo: this._route,
-                queryParams: { redirect },
-            });
-        }));
+        const redirect = this._route.snapshot.queryParams.redirect || '/';
+        this._router.navigate(['verify'], {
+            relativeTo: this._route,
+            queryParams: { redirect },
+        });
+        return of(true);
     };
     cancel() {
         this._verificationSetupService
@@ -1530,13 +1264,49 @@ class EmailComponent {
             .subscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EmailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: EmailComponent, selector: "ng-component", ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"next\"\n    [dirtySubmitButton]=\"false\"\n    *fsSkeleton=\"email\">\n  <mat-card>\n    <mat-card-header>\n      <mat-card-title>\n        Enable 2-step verification\n      </mat-card-title>\n    </mat-card-header>\n    <mat-card-content>\n      <p>\n        Please enable two factor authentication to protect your account.\n        The app will use this email for verifying your account\n      </p>\n      <fs-label-field>\n        <fs-label>\n          Email\n        </fs-label>\n        {{ email }}\n      </fs-label-field>\n      <div class=\"buttons\">\n        <button\n            mat-flat-button\n            type=\"submit\"\n            color=\"primary\">\n          Next\n        </button>\n        <button\n            mat-button\n            (click)=\"cancel()\"\n            type=\"button\">\n          Cancel\n        </button>\n      </div>\n    </mat-card-content>\n  </mat-card>\n</form>", styles: ["h2{text-align:center}.buttons button+button{margin-top:5px}.buttons button{width:100%;display:block}\n"], dependencies: [{ kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i10.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i10.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "directive", type: i5$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: i4$2.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i4$2.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: EmailComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"next\"\n    [dirtySubmitButton]=\"false\"\n    *fsSkeleton=\"email\">\n  <mat-card>\n    <mat-card-header>\n      <mat-card-title>\n        Enable 2-step verification\n      </mat-card-title>\n    </mat-card-header>\n    <mat-card-content>\n      <p>\n        Please enable two factor authentication to protect your account.\n        The app will use this email for verifying your account\n      </p>\n      <fs-label-field>\n        <fs-label>\n          Email\n        </fs-label>\n        {{ email }}\n      </fs-label-field>\n      <div class=\"buttons\">\n        <button\n            mat-flat-button\n            type=\"submit\"\n            color=\"primary\">\n          Next\n        </button>\n        <button\n            mat-button\n            (click)=\"cancel()\"\n            type=\"button\">\n          Cancel\n        </button>\n      </div>\n    </mat-card-content>\n  </mat-card>\n</form>", styles: ["h2{text-align:center}.buttons button+button{margin-top:5px}.buttons button{width:100%;display:block}\n"], dependencies: [{ kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1$3.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i2.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: FsLabelModule }, { kind: "component", type: i1$6.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i1$6.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EmailComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<form\n    fsForm\n    [submit]=\"next\"\n    [dirtySubmitButton]=\"false\"\n    *fsSkeleton=\"email\">\n  <mat-card>\n    <mat-card-header>\n      <mat-card-title>\n        Enable 2-step verification\n      </mat-card-title>\n    </mat-card-header>\n    <mat-card-content>\n      <p>\n        Please enable two factor authentication to protect your account.\n        The app will use this email for verifying your account\n      </p>\n      <fs-label-field>\n        <fs-label>\n          Email\n        </fs-label>\n        {{ email }}\n      </fs-label-field>\n      <div class=\"buttons\">\n        <button\n            mat-flat-button\n            type=\"submit\"\n            color=\"primary\">\n          Next\n        </button>\n        <button\n            mat-button\n            (click)=\"cancel()\"\n            type=\"button\">\n          Cancel\n        </button>\n      </div>\n    </mat-card-content>\n  </mat-card>\n</form>", styles: ["h2{text-align:center}.buttons button+button{margin-top:5px}.buttons button{width:100%;display:block}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsSkeletonModule,
+                        FormsModule,
+                        FsFormModule,
+                        MatCard,
+                        MatCardHeader,
+                        MatCardTitle,
+                        MatCardContent,
+                        FsLabelModule,
+                        MatButton,
+                    ], template: "<form\n    fsForm\n    [submit]=\"next\"\n    [dirtySubmitButton]=\"false\"\n    *fsSkeleton=\"email\">\n  <mat-card>\n    <mat-card-header>\n      <mat-card-title>\n        Enable 2-step verification\n      </mat-card-title>\n    </mat-card-header>\n    <mat-card-content>\n      <p>\n        Please enable two factor authentication to protect your account.\n        The app will use this email for verifying your account\n      </p>\n      <fs-label-field>\n        <fs-label>\n          Email\n        </fs-label>\n        {{ email }}\n      </fs-label-field>\n      <div class=\"buttons\">\n        <button\n            mat-flat-button\n            type=\"submit\"\n            color=\"primary\">\n          Next\n        </button>\n        <button\n            mat-button\n            (click)=\"cancel()\"\n            type=\"button\">\n          Cancel\n        </button>\n      </div>\n    </mat-card-content>\n  </mat-card>\n</form>", styles: ["h2{text-align:center}.buttons button+button{margin-top:5px}.buttons button{width:100%;display:block}\n"] }]
         }] });
+class Fs2faVerificationResendDirective {
+    verification;
+    _button = inject(MatButton);
+    click() {
+        this._button.disabled = true;
+        this.verification.resendCode()
+            .pipe(finalize(() => this._button.disabled = false))
+            .subscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faVerificationResendDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: Fs2faVerificationResendDirective, isStandalone: true, selector: "[fs2faVerificationResend]", inputs: { verification: ["fs2faVerificationResend", "verification"] }, host: { listeners: { "click": "click()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Fs2faVerificationResendDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fs2faVerificationResend]',
+                    standalone: true,
+                }]
+        }], propDecorators: { verification: [{
+                type: Input,
+                args: ['fs2faVerificationResend']
+            }], click: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
 class VerifyComponent {
     verification;
     code = null;
@@ -1575,11 +1345,22 @@ class VerifyComponent {
             .subscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: VerifyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: VerifyComponent, selector: "ng-component", viewQueries: [{ propertyName: "verification", first: true, predicate: Fs2faVerificationComponent, descendants: true }], ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"verify\"\n    [dirtySubmitButton]=\"false\"\n    *fsSkeleton=\"verificationMethod\">\n  <mat-card>\n    <mat-card-header>\n      <mat-card-title>\n        Enable 2-step verification\n      </mat-card-title>\n    </mat-card-header>\n    <mat-card-content>\n      <fs-2fa-verification\n        #verification\n        [verificationMethod]=\"verificationMethod\"\n        [showTrustedDevice]=\"true\"\n        [(code)]=\"code\"\n        [resend]=\"resend\">\n      </fs-2fa-verification>\n      <div class=\"buttons\">\n        <button\n            mat-flat-button\n            type=\"submit\"\n            color=\"primary\">\n          Verify\n        </button>\n        <button\n            mat-button\n            [fs2faVerificationResend]=\"verification\"\n            type=\"button\">\n          Resend\n        </button>\n        <button\n            mat-button\n            (click)=\"cancel()\"\n            type=\"button\">\n          Cancel\n        </button>\n      </div>\n    </mat-card-content>\n  </mat-card>\n</form>", styles: ["h2{text-align:center}.buttons button+button{margin-top:5px}.buttons button{width:100%;display:block}\n"], dependencies: [{ kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i10.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i10.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "directive", type: i5$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: Fs2faVerificationComponent, selector: "fs-2fa-verification", inputs: ["verificationMethod", "resend", "showTrustedDevice", "trustDevice", "codeLength", "trustDays", "code", "formatRecipient", "getVerificationMethods", "selectVerificationMethod"], outputs: ["verified", "codeChange", "codeCompleted", "trustDeviceChange"] }, { kind: "directive", type: Fs2faVerificationResendDirective, selector: "[fs2faVerificationResend]", inputs: ["fs2faVerificationResend"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: VerifyComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "verification", first: true, predicate: Fs2faVerificationComponent, descendants: true }], ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"verify\"\n    [dirtySubmitButton]=\"false\"\n    *fsSkeleton=\"verificationMethod\">\n  <mat-card>\n    <mat-card-header>\n      <mat-card-title>\n        Enable 2-step verification\n      </mat-card-title>\n    </mat-card-header>\n    <mat-card-content>\n      <fs-2fa-verification\n        #verification\n        [verificationMethod]=\"verificationMethod\"\n        [showTrustedDevice]=\"true\"\n        [(code)]=\"code\"\n        [resend]=\"resend\">\n      </fs-2fa-verification>\n      <div class=\"buttons\">\n        <button\n            mat-flat-button\n            type=\"submit\"\n            color=\"primary\">\n          Verify\n        </button>\n        <button\n            mat-button\n            [fs2faVerificationResend]=\"verification\"\n            type=\"button\">\n          Resend\n        </button>\n        <button\n            mat-button\n            (click)=\"cancel()\"\n            type=\"button\">\n          Cancel\n        </button>\n      </div>\n    </mat-card-content>\n  </mat-card>\n</form>", styles: ["h2{text-align:center}.buttons button+button{margin-top:5px}.buttons button{width:100%;display:block}\n"], dependencies: [{ kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1$3.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i2.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: Fs2faVerificationComponent, selector: "fs-2fa-verification", inputs: ["verificationMethod", "resend", "showTrustedDevice", "trustDevice", "codeLength", "trustDays", "code", "formatRecipient", "getVerificationMethods", "selectVerificationMethod"], outputs: ["verified", "codeChange", "codeCompleted", "trustDeviceChange"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: Fs2faVerificationResendDirective, selector: "[fs2faVerificationResend]", inputs: ["fs2faVerificationResend"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: VerifyComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<form\n    fsForm\n    [submit]=\"verify\"\n    [dirtySubmitButton]=\"false\"\n    *fsSkeleton=\"verificationMethod\">\n  <mat-card>\n    <mat-card-header>\n      <mat-card-title>\n        Enable 2-step verification\n      </mat-card-title>\n    </mat-card-header>\n    <mat-card-content>\n      <fs-2fa-verification\n        #verification\n        [verificationMethod]=\"verificationMethod\"\n        [showTrustedDevice]=\"true\"\n        [(code)]=\"code\"\n        [resend]=\"resend\">\n      </fs-2fa-verification>\n      <div class=\"buttons\">\n        <button\n            mat-flat-button\n            type=\"submit\"\n            color=\"primary\">\n          Verify\n        </button>\n        <button\n            mat-button\n            [fs2faVerificationResend]=\"verification\"\n            type=\"button\">\n          Resend\n        </button>\n        <button\n            mat-button\n            (click)=\"cancel()\"\n            type=\"button\">\n          Cancel\n        </button>\n      </div>\n    </mat-card-content>\n  </mat-card>\n</form>", styles: ["h2{text-align:center}.buttons button+button{margin-top:5px}.buttons button{width:100%;display:block}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsSkeletonModule,
+                        FormsModule,
+                        FsFormModule,
+                        MatCard,
+                        MatCardHeader,
+                        MatCardTitle,
+                        MatCardContent,
+                        Fs2faVerificationComponent,
+                        MatButton,
+                        Fs2faVerificationResendDirective,
+                    ], template: "<form\n    fsForm\n    [submit]=\"verify\"\n    [dirtySubmitButton]=\"false\"\n    *fsSkeleton=\"verificationMethod\">\n  <mat-card>\n    <mat-card-header>\n      <mat-card-title>\n        Enable 2-step verification\n      </mat-card-title>\n    </mat-card-header>\n    <mat-card-content>\n      <fs-2fa-verification\n        #verification\n        [verificationMethod]=\"verificationMethod\"\n        [showTrustedDevice]=\"true\"\n        [(code)]=\"code\"\n        [resend]=\"resend\">\n      </fs-2fa-verification>\n      <div class=\"buttons\">\n        <button\n            mat-flat-button\n            type=\"submit\"\n            color=\"primary\">\n          Verify\n        </button>\n        <button\n            mat-button\n            [fs2faVerificationResend]=\"verification\"\n            type=\"button\">\n          Resend\n        </button>\n        <button\n            mat-button\n            (click)=\"cancel()\"\n            type=\"button\">\n          Cancel\n        </button>\n      </div>\n    </mat-card-content>\n  </mat-card>\n</form>", styles: ["h2{text-align:center}.buttons button+button{margin-top:5px}.buttons button{width:100%;display:block}\n"] }]
         }], propDecorators: { verification: [{
                 type: ViewChild,
                 args: [Fs2faVerificationComponent]
@@ -1591,7 +1372,7 @@ const routes = [
 ];
 class VerificationSetupRoutingModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: VerificationSetupRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: VerificationSetupRoutingModule, imports: [i1$4.RouterModule], exports: [RouterModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: VerificationSetupRoutingModule, imports: [i1$7.RouterModule], exports: [RouterModule] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: VerificationSetupRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: VerificationSetupRoutingModule, decorators: [{
@@ -1608,8 +1389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
 class FsVerificationSetupModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsVerificationSetupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsVerificationSetupModule, declarations: [EmailComponent,
-            VerifyComponent], imports: [CommonModule,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsVerificationSetupModule, imports: [CommonModule,
             FormsModule,
             MatButtonModule,
             MatCardModule,
@@ -1618,9 +1398,9 @@ class FsVerificationSetupModule {
             FsFormModule,
             FsSkeletonModule,
             FsLabelModule,
-            Fs2faVerificationMethodsModule,
-            Fs2faVerificationModule,
-            VerificationSetupRoutingModule] });
+            VerificationSetupRoutingModule,
+            EmailComponent,
+            VerifyComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsVerificationSetupModule, providers: [
             VerificationMethodData,
             VerificationSetupService,
@@ -1633,9 +1413,9 @@ class FsVerificationSetupModule {
             FsFormModule,
             FsSkeletonModule,
             FsLabelModule,
-            Fs2faVerificationMethodsModule,
-            Fs2faVerificationModule,
-            VerificationSetupRoutingModule] });
+            VerificationSetupRoutingModule,
+            EmailComponent,
+            VerifyComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsVerificationSetupModule, decorators: [{
             type: NgModule,
@@ -1650,11 +1430,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         FsFormModule,
                         FsSkeletonModule,
                         FsLabelModule,
-                        Fs2faVerificationMethodsModule,
-                        Fs2faVerificationModule,
                         VerificationSetupRoutingModule,
-                    ],
-                    declarations: [
                         EmailComponent,
                         VerifyComponent,
                     ],
@@ -1690,5 +1466,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
-export { ForceVerificationSetupGuard, Fs2faManageComponent, Fs2faManageModule, Fs2faVerificationComponent, Fs2faVerificationMethodsModule, Fs2faVerificationModule, Fs2faVerificationResendDirective, FsVerificationSetupModule, VerificationMethodType, VerificationMethodsComponent };
+export { ForceVerificationSetupGuard, Fs2faManageComponent, Fs2faManageModule, Fs2faVerificationComponent, Fs2faVerificationMethodsModule, Fs2faVerificationResendDirective, FsVerificationSetupModule, VerificationMethodType, VerificationMethodsComponent };
 //# sourceMappingURL=firestitch-2fa.mjs.map