@masmarino/gabarit 1.4.0 → 2.1.0

package/fesm2022/masmarino-gabarit-mfa-enrollment.mjs

@@ -0,0 +1,897 @@
+import { DOCUMENT } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, InjectionToken, Injector, booleanAttribute, computed, effect, inject, input, model, output, signal, untracked } from "@angular/core";
+import * as i1 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+import { Button } from "@masmarino/gabarit/button";
+import { Checkbox } from "@masmarino/gabarit/checkbox";
+import { CopyButton } from "@masmarino/gabarit/copy-button";
+import { AUTH_PORT, DEFAULT_BACKUP_CODES_LABELS, DEFAULT_MFA_ENROLLMENT_LABELS, DEFAULT_TOTP_QR_LABELS, PASSKEY_NAME_MAX, authLabels, classifyMfaFailure, classifyPasskeyError, createPasskeyCredential, focusAfterRender, isAuthPortError, passkeyNameProblem, passkeysSupported } from "@masmarino/gabarit/auth";
+import { EMPTY, from, switchMap } from "rxjs";
+import { Badge } from "@masmarino/gabarit/badge";
+import { GbtInput } from "@masmarino/gabarit/input";
+import { Alert } from "@masmarino/gabarit/alert";
+import { Card } from "@masmarino/gabarit/card";
+import { CopyField } from "@masmarino/gabarit/copy-field";
+let nextId$1 = 0;
+var BackupCodes = class BackupCodes {
+	codes = input.required(...ngDevMode ? [{ debugName: "codes" }] : /* istanbul ignore next */ []);
+	acknowledged = model(false, ...ngDevMode ? [{ debugName: "acknowledged" }] : /* istanbul ignore next */ []);
+	labels = input({}, ...ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []);
+	text = authLabels("backupCodes", DEFAULT_BACKUP_CODES_LABELS, this.labels);
+	id = `gbt-backup-codes-${nextId$1++}`;
+	document = inject(DOCUMENT);
+	display = computed(() => this.codes().map((code) => (code.match(/.{1,16}/g) ?? []).map((line) => line.replace(/(.{8})(?=.)/g, "$1 "))), ...ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []);
+	constructor() {
+		let shown;
+		effect(() => {
+			const codes = this.codes();
+			if (shown !== void 0 && codes !== shown) untracked(() => this.acknowledged.set(false));
+			shown = codes;
+		});
+	}
+	codesText = computed(() => this.codes().join("\n"), ...ngDevMode ? [{ debugName: "codesText" }] : /* istanbul ignore next */ []);
+	download() {
+		const text = this.text();
+		const content = [
+			text.fileTitle,
+			text.fileNotice,
+			"",
+			...this.codes(),
+			""
+		].join("\n");
+		const url = URL.createObjectURL(new Blob([content], { type: "text/plain;charset=utf-8" }));
+		const link = this.document.createElement("a");
+		link.href = url;
+		link.download = text.fileName;
+		link.click();
+		URL.revokeObjectURL(url);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: BackupCodes,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: BackupCodes,
+		isStandalone: true,
+		selector: "gbt-backup-codes",
+		inputs: {
+			codes: {
+				classPropertyName: "codes",
+				publicName: "codes",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			acknowledged: {
+				classPropertyName: "acknowledged",
+				publicName: "acknowledged",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			labels: {
+				classPropertyName: "labels",
+				publicName: "labels",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { acknowledged: "acknowledgedChange" },
+		ngImport: i0,
+		template: "<div class=\"gbt-backup-codes\">\n  <ol #grid class=\"gbt-backup-codes__grid\" [attr.aria-label]=\"text().listLabel\">\n    @for (lines of display(); track $index) {\n      <li class=\"gbt-backup-codes__code\">\n        @for (line of lines; track $index) {\n          <span class=\"gbt-backup-codes__line\">{{ line }}</span>\n        }\n      </li>\n    }\n  </ol>\n\n  <div class=\"gbt-backup-codes__actions\">\n    <gbt-copy-button\n      variant=\"secondary\"\n      size=\"small\"\n      feedback=\"inline\"\n      [text]=\"text().copy\"\n      [copiedText]=\"text().copied\"\n      [failedText]=\"text().copyFailed\"\n      [value]=\"codesText()\"\n      [selectTarget]=\"grid\"\n    />\n    <gbt-button\n      variant=\"secondary\"\n      size=\"small\"\n      iconName=\"download\"\n      [text]=\"text().download\"\n      (clicked)=\"download()\"\n    />\n  </div>\n\n  <div class=\"gbt-backup-codes__ack\">\n    <gbt-checkbox\n      [id]=\"id + '-ack'\"\n      [label]=\"text().acknowledge\"\n      [ngModel]=\"acknowledged()\"\n      (ngModelChange)=\"acknowledged.set($event)\"\n    />\n  </div>\n</div>\n",
+		styles: [":host{display:block}.gbt-backup-codes{display:flex;flex-direction:column;gap:1rem}.gbt-backup-codes__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin:0;padding:0;list-style:none}.gbt-backup-codes__code{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;box-sizing:border-box;min-width:0;padding:.5rem .25rem;border:1px solid var(--gbt-card-border);border-radius:var(--site-border-radius-sm);background:var(--bg-panel);color:var(--text-primary);font-family:var(--gbt-font-mono);font-size:.75rem;line-height:1.125rem;-webkit-user-select:all;user-select:all}.gbt-backup-codes__line{overflow-wrap:anywhere;white-space:pre}.gbt-backup-codes__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.gbt-backup-codes__actions gbt-copy-button{display:contents}.gbt-backup-codes__actions ::ng-deep .gbt-copy-button__status{order:1}.gbt-backup-codes__actions ::ng-deep .gbt-button{position:relative}.gbt-backup-codes__actions ::ng-deep .gbt-button:after{content:\"\";position:absolute;inset:calc((var(--gbt-control-height-sm) - var(--gbt-control-height-lg)) / 2) -2px}.gbt-backup-codes__ack{padding-top:.25rem;border-top:1px solid var(--gbt-hairline)}.gbt-backup-codes__ack ::ng-deep .gbt-checkbox{display:flex;box-sizing:border-box;width:100%;min-height:2.75rem}\n"],
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: FormsModule
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "component",
+				type: Button,
+				selector: "gbt-button, a[gbtButton]",
+				inputs: [
+					"variant",
+					"size",
+					"type",
+					"text",
+					"iconName",
+					"ariaLabel",
+					"loading",
+					"loadingLabel",
+					"disabled",
+					"pressed",
+					"ariaExpanded",
+					"ariaControls",
+					"ariaHaspopup",
+					"block",
+					"iconOnly"
+				],
+				outputs: ["clicked"]
+			},
+			{
+				kind: "component",
+				type: Checkbox,
+				selector: "gbt-checkbox",
+				inputs: [
+					"id",
+					"label",
+					"disabled",
+					"hint",
+					"checked"
+				],
+				outputs: ["checkedChange"]
+			},
+			{
+				kind: "component",
+				type: CopyButton,
+				selector: "gbt-copy-button",
+				inputs: [
+					"value",
+					"text",
+					"ariaLabel",
+					"copiedText",
+					"failedText",
+					"feedbackMs",
+					"variant",
+					"size",
+					"icon",
+					"disabled",
+					"feedback",
+					"selectTarget"
+				],
+				outputs: ["copied", "copyFailed"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: BackupCodes,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-backup-codes",
+			standalone: true,
+			imports: [
+				FormsModule,
+				Button,
+				Checkbox,
+				CopyButton
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"gbt-backup-codes\">\n  <ol #grid class=\"gbt-backup-codes__grid\" [attr.aria-label]=\"text().listLabel\">\n    @for (lines of display(); track $index) {\n      <li class=\"gbt-backup-codes__code\">\n        @for (line of lines; track $index) {\n          <span class=\"gbt-backup-codes__line\">{{ line }}</span>\n        }\n      </li>\n    }\n  </ol>\n\n  <div class=\"gbt-backup-codes__actions\">\n    <gbt-copy-button\n      variant=\"secondary\"\n      size=\"small\"\n      feedback=\"inline\"\n      [text]=\"text().copy\"\n      [copiedText]=\"text().copied\"\n      [failedText]=\"text().copyFailed\"\n      [value]=\"codesText()\"\n      [selectTarget]=\"grid\"\n    />\n    <gbt-button\n      variant=\"secondary\"\n      size=\"small\"\n      iconName=\"download\"\n      [text]=\"text().download\"\n      (clicked)=\"download()\"\n    />\n  </div>\n\n  <div class=\"gbt-backup-codes__ack\">\n    <gbt-checkbox\n      [id]=\"id + '-ack'\"\n      [label]=\"text().acknowledge\"\n      [ngModel]=\"acknowledged()\"\n      (ngModelChange)=\"acknowledged.set($event)\"\n    />\n  </div>\n</div>\n",
+			styles: [":host{display:block}.gbt-backup-codes{display:flex;flex-direction:column;gap:1rem}.gbt-backup-codes__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin:0;padding:0;list-style:none}.gbt-backup-codes__code{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;box-sizing:border-box;min-width:0;padding:.5rem .25rem;border:1px solid var(--gbt-card-border);border-radius:var(--site-border-radius-sm);background:var(--bg-panel);color:var(--text-primary);font-family:var(--gbt-font-mono);font-size:.75rem;line-height:1.125rem;-webkit-user-select:all;user-select:all}.gbt-backup-codes__line{overflow-wrap:anywhere;white-space:pre}.gbt-backup-codes__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.gbt-backup-codes__actions gbt-copy-button{display:contents}.gbt-backup-codes__actions ::ng-deep .gbt-copy-button__status{order:1}.gbt-backup-codes__actions ::ng-deep .gbt-button{position:relative}.gbt-backup-codes__actions ::ng-deep .gbt-button:after{content:\"\";position:absolute;inset:calc((var(--gbt-control-height-sm) - var(--gbt-control-height-lg)) / 2) -2px}.gbt-backup-codes__ack{padding-top:.25rem;border-top:1px solid var(--gbt-hairline)}.gbt-backup-codes__ack ::ng-deep .gbt-checkbox{display:flex;box-sizing:border-box;width:100%;min-height:2.75rem}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		codes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "codes",
+				required: true
+			}]
+		}],
+		acknowledged: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "acknowledged",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["acknowledgedChange"]
+		}],
+		labels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labels",
+				required: false
+			}]
+		}]
+	}
+});
+const TOTP_QR_RENDERER = new InjectionToken("TOTP_QR_RENDERER");
+const RENDER_OPTIONS = {
+	errorCorrectionLevel: "M",
+	margin: 1,
+	width: 448
+};
+var TotpQr = class TotpQr {
+	otpauthUrl = input.required(...ngDevMode ? [{ debugName: "otpauthUrl" }] : /* istanbul ignore next */ []);
+	secret = input.required(...ngDevMode ? [{ debugName: "secret" }] : /* istanbul ignore next */ []);
+	labels = input({}, ...ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []);
+	text = authLabels("totpQr", DEFAULT_TOTP_QR_LABELS, this.labels);
+	dataUrl = signal(null, ...ngDevMode ? [{ debugName: "dataUrl" }] : /* istanbul ignore next */ []);
+	failed = signal(false, ...ngDevMode ? [{ debugName: "failed" }] : /* istanbul ignore next */ []);
+	render = inject(TOTP_QR_RENDERER, { optional: true });
+	generation = 0;
+	constructor() {
+		effect(() => {
+			const url = this.otpauthUrl();
+			const current = ++this.generation;
+			this.dataUrl.set(null);
+			this.failed.set(false);
+			const render = this.render;
+			if (!render) {
+				this.failed.set(true);
+				return;
+			}
+			Promise.resolve().then(() => render(url, RENDER_OPTIONS)).then((dataUrl) => {
+				if (current === this.generation) this.dataUrl.set(dataUrl);
+			}).catch(() => {
+				if (current === this.generation) this.failed.set(true);
+			});
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: TotpQr,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: TotpQr,
+		isStandalone: true,
+		selector: "gbt-totp-qr",
+		inputs: {
+			otpauthUrl: {
+				classPropertyName: "otpauthUrl",
+				publicName: "otpauthUrl",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			secret: {
+				classPropertyName: "secret",
+				publicName: "secret",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			labels: {
+				classPropertyName: "labels",
+				publicName: "labels",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<div class=\"gbt-totp-qr\">\n  @if (failed()) {\n    <p class=\"gbt-totp-qr__fallback\" role=\"status\">{{ text().fallback }}</p>\n  } @else {\n    <div class=\"gbt-totp-qr__frame\" [attr.aria-busy]=\"dataUrl() === null ? 'true' : null\">\n      @if (dataUrl(); as src) {\n        <img [src]=\"src\" [alt]=\"text().imageAlt\" width=\"224\" height=\"224\" />\n      }\n    </div>\n  }\n\n  <div class=\"gbt-totp-qr__secret\">\n    <p class=\"gbt-totp-qr__label\">\n      {{ failed() ? text().fallbackSecretLabel : text().secretLabel }}\n    </p>\n    <gbt-copy-field\n      [value]=\"secret()\"\n      [copyLabel]=\"text().copyLabel\"\n      [copiedText]=\"text().copied\"\n      [failedText]=\"text().copyFailed\"\n    />\n  </div>\n</div>\n",
+		styles: [":host{display:block}.gbt-totp-qr{display:flex;flex-direction:column;align-items:stretch;gap:1.25rem}.gbt-totp-qr__frame{display:flex;box-sizing:border-box;width:14rem;max-width:100%;aspect-ratio:1;align-items:center;justify-content:center;margin-inline:auto;padding:.5rem;border:1px solid var(--gbt-card-border);border-radius:var(--gbt-radius-tile, 4px);background:#fff}.gbt-totp-qr__frame img{display:block;width:100%;height:auto;image-rendering:pixelated}.gbt-totp-qr__frame[aria-busy=true]{background:var(--bg-panel)}.gbt-totp-qr__fallback{margin:0;padding:.625rem .75rem;border:1px solid color-mix(in srgb,var(--color-warning-text) 30%,transparent);border-radius:var(--gbt-radius-tile, 4px);background:var(--color-warning-bg);color:var(--color-warning-text);font-size:.875rem;line-height:1.25rem}.gbt-totp-qr__label{margin:0 0 .375rem;color:var(--text-secondary);font-size:.8125rem;font-weight:600}.gbt-totp-qr__secret ::ng-deep .gbt-copy-field__copy .gbt-button{position:relative}.gbt-totp-qr__secret ::ng-deep .gbt-copy-field__copy .gbt-button:after{content:\"\";position:absolute;inset:calc((var(--gbt-control-height-sm) - var(--gbt-control-height-lg)) / 2)}\n"],
+		dependencies: [{
+			kind: "component",
+			type: CopyField,
+			selector: "gbt-copy-field",
+			inputs: [
+				"value",
+				"label",
+				"copyLabel",
+				"copiedText",
+				"failedText",
+				"feedbackMs",
+				"feedback",
+				"wrapAt"
+			],
+			outputs: ["copied", "copyFailed"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: TotpQr,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-totp-qr",
+			standalone: true,
+			imports: [CopyField],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"gbt-totp-qr\">\n  @if (failed()) {\n    <p class=\"gbt-totp-qr__fallback\" role=\"status\">{{ text().fallback }}</p>\n  } @else {\n    <div class=\"gbt-totp-qr__frame\" [attr.aria-busy]=\"dataUrl() === null ? 'true' : null\">\n      @if (dataUrl(); as src) {\n        <img [src]=\"src\" [alt]=\"text().imageAlt\" width=\"224\" height=\"224\" />\n      }\n    </div>\n  }\n\n  <div class=\"gbt-totp-qr__secret\">\n    <p class=\"gbt-totp-qr__label\">\n      {{ failed() ? text().fallbackSecretLabel : text().secretLabel }}\n    </p>\n    <gbt-copy-field\n      [value]=\"secret()\"\n      [copyLabel]=\"text().copyLabel\"\n      [copiedText]=\"text().copied\"\n      [failedText]=\"text().copyFailed\"\n    />\n  </div>\n</div>\n",
+			styles: [":host{display:block}.gbt-totp-qr{display:flex;flex-direction:column;align-items:stretch;gap:1.25rem}.gbt-totp-qr__frame{display:flex;box-sizing:border-box;width:14rem;max-width:100%;aspect-ratio:1;align-items:center;justify-content:center;margin-inline:auto;padding:.5rem;border:1px solid var(--gbt-card-border);border-radius:var(--gbt-radius-tile, 4px);background:#fff}.gbt-totp-qr__frame img{display:block;width:100%;height:auto;image-rendering:pixelated}.gbt-totp-qr__frame[aria-busy=true]{background:var(--bg-panel)}.gbt-totp-qr__fallback{margin:0;padding:.625rem .75rem;border:1px solid color-mix(in srgb,var(--color-warning-text) 30%,transparent);border-radius:var(--gbt-radius-tile, 4px);background:var(--color-warning-bg);color:var(--color-warning-text);font-size:.875rem;line-height:1.25rem}.gbt-totp-qr__label{margin:0 0 .375rem;color:var(--text-secondary);font-size:.8125rem;font-weight:600}.gbt-totp-qr__secret ::ng-deep .gbt-copy-field__copy .gbt-button{position:relative}.gbt-totp-qr__secret ::ng-deep .gbt-copy-field__copy .gbt-button:after{content:\"\";position:absolute;inset:calc((var(--gbt-control-height-sm) - var(--gbt-control-height-lg)) / 2)}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		otpauthUrl: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "otpauthUrl",
+				required: true
+			}]
+		}],
+		secret: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "secret",
+				required: true
+			}]
+		}],
+		labels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labels",
+				required: false
+			}]
+		}]
+	}
+});
+const STEP_NUMBER = {
+	choice: 1,
+	scan: 2,
+	passkey: 2,
+	codes: 3
+};
+const STEP_COUNT = 3;
+let nextId = 0;
+var MfaEnrollment = class MfaEnrollment {
+	auth = inject(AUTH_PORT);
+	host = inject(ElementRef);
+	injector = inject(Injector);
+	mfaToken = input.required(...ngDevMode ? [{ debugName: "mfaToken" }] : /* istanbul ignore next */ []);
+	passkeysAvailable = input(false, {
+		...ngDevMode ? { debugName: "passkeysAvailable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	labels = input({}, ...ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []);
+	completed = output();
+	cancelled = output();
+	expired = output();
+	text = authLabels("mfaEnrollment", DEFAULT_MFA_ENROLLMENT_LABELS, this.labels);
+	stepCount = STEP_COUNT;
+	id = `gbt-mfa-enrollment-${nextId++}`;
+	step = signal("choice", ...ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []);
+	factor = signal("totp", ...ngDevMode ? [{ debugName: "factor" }] : /* istanbul ignore next */ []);
+	passkeyOffered = computed(() => this.passkeysAvailable() && this.browserHasPasskeys, ...ngDevMode ? [{ debugName: "passkeyOffered" }] : /* istanbul ignore next */ []);
+	passkeyName = signal("", ...ngDevMode ? [{ debugName: "passkeyName" }] : /* istanbul ignore next */ []);
+	errorVariant = signal("error", ...ngDevMode ? [{ debugName: "errorVariant" }] : /* istanbul ignore next */ []);
+	promptOpen = signal(false, ...ngDevMode ? [{ debugName: "promptOpen" }] : /* istanbul ignore next */ []);
+	stepNumber = computed(() => STEP_NUMBER[this.step()], ...ngDevMode ? [{ debugName: "stepNumber" }] : /* istanbul ignore next */ []);
+	secret = signal("", ...ngDevMode ? [{ debugName: "secret" }] : /* istanbul ignore next */ []);
+	otpauthUrl = signal("", ...ngDevMode ? [{ debugName: "otpauthUrl" }] : /* istanbul ignore next */ []);
+	code = signal("", ...ngDevMode ? [{ debugName: "code" }] : /* istanbul ignore next */ []);
+	backupCodes = signal([], ...ngDevMode ? [{ debugName: "backupCodes" }] : /* istanbul ignore next */ []);
+	acknowledged = signal(false, ...ngDevMode ? [{ debugName: "acknowledged" }] : /* istanbul ignore next */ []);
+	error = signal("", ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	submitting = signal(false, ...ngDevMode ? [{ debugName: "submitting" }] : /* istanbul ignore next */ []);
+	sessionToken = null;
+	browserHasPasskeys = passkeysSupported();
+	ceremony = 0;
+	constructor() {
+		this.focus("heading");
+		effect((onCleanup) => {
+			if (this.step() === "codes" && !this.acknowledged()) {
+				const view = this.host.nativeElement.ownerDocument.defaultView;
+				const warn = (event) => {
+					event.preventDefault();
+					event.returnValue = "";
+				};
+				view?.addEventListener("beforeunload", warn);
+				onCleanup(() => view?.removeEventListener("beforeunload", warn));
+			}
+		});
+	}
+	begin() {
+		if (this.submitting()) return;
+		this.clearError();
+		this.submitting.set(true);
+		this.auth.enrollTotp(this.mfaToken()).subscribe({
+			next: ({ secret, otpauthUrl }) => {
+				this.submitting.set(false);
+				this.factor.set("totp");
+				this.secret.set(secret);
+				this.otpauthUrl.set(otpauthUrl);
+				this.goTo("scan");
+			},
+			error: (err) => {
+				this.submitting.set(false);
+				this.error.set(this.messageFor(err, this.text().startFailed));
+				this.focus("begin");
+			}
+		});
+	}
+	confirm() {
+		if (this.submitting()) return;
+		const code = this.code().replace(/\s+/g, "");
+		if (code === "") {
+			this.error.set(this.text().enterCode);
+			this.focus("field");
+			return;
+		}
+		this.clearError();
+		this.submitting.set(true);
+		this.auth.confirmTotp(this.mfaToken(), code).subscribe({
+			next: ({ token, backupCodes }) => {
+				this.submitting.set(false);
+				this.secret.set("");
+				this.otpauthUrl.set("");
+				this.code.set("");
+				this.enrolled(token, backupCodes);
+			},
+			error: (err) => {
+				this.submitting.set(false);
+				this.error.set(this.messageFor(err, this.text().activationFailed, this.text().wrongCode));
+				if (classifyMfaFailure(err) === "wrong-code") this.code.set("");
+				this.focus("field");
+			}
+		});
+	}
+	choosePasskey() {
+		this.clearError();
+		this.factor.set("passkey");
+		this.goTo("passkey");
+	}
+	createPasskey() {
+		if (this.submitting()) return;
+		const name = this.passkeyName().trim() || this.text().defaultPasskeyName;
+		const problem = passkeyNameProblem(name);
+		if (problem) {
+			this.fail(problem === "too-long" ? this.text().nameTooLong(PASSKEY_NAME_MAX) : this.text().nameControlCharacters, "field");
+			return;
+		}
+		const mfaToken = this.mfaToken();
+		this.clearError();
+		this.submitting.set(true);
+		const run = ++this.ceremony;
+		this.auth.startPasskeySetup(mfaToken).pipe(switchMap(({ challengeId, publicKey }) => {
+			if (run !== this.ceremony) return EMPTY;
+			this.promptOpen.set(true);
+			return from(createPasskeyCredential(publicKey)).pipe(switchMap((credential) => run === this.ceremony ? this.auth.finishPasskeySetup(mfaToken, challengeId, credential, name) : EMPTY));
+		})).subscribe({
+			next: ({ token, backupCodes }) => {
+				this.submitting.set(false);
+				this.promptOpen.set(false);
+				this.passkeyName.set("");
+				this.enrolled(token, backupCodes);
+			},
+			error: (err) => {
+				if (run !== this.ceremony) return;
+				this.submitting.set(false);
+				this.promptOpen.set(false);
+				this.passkeyFailed(err);
+			}
+		});
+	}
+	back() {
+		this.ceremony++;
+		this.submitting.set(false);
+		this.promptOpen.set(false);
+		if (this.step() !== "choice" && this.passkeyOffered()) {
+			this.clearError();
+			this.secret.set("");
+			this.otpauthUrl.set("");
+			this.code.set("");
+			this.goTo("choice");
+			return;
+		}
+		this.cancelled.emit();
+	}
+	enrolled(token, backupCodes) {
+		if (backupCodes.length === 0) {
+			this.completed.emit(token);
+			return;
+		}
+		this.sessionToken = token;
+		this.backupCodes.set(backupCodes);
+		this.goTo("codes");
+	}
+	finish() {
+		if (!this.acknowledged() || this.sessionToken === null) return;
+		this.completed.emit(this.sessionToken);
+	}
+	goTo(step) {
+		this.step.set(step);
+		this.focus("heading");
+	}
+	passkeyFailed(err) {
+		const text = this.text();
+		if (isAuthPortError(err)) {
+			if (err.status === 409) {
+				this.fail(text.alreadyRegistered, "button");
+				return;
+			}
+			switch (classifyMfaFailure(err)) {
+				case "expired":
+					this.expired.emit();
+					this.fail(text.loginExpired, "button");
+					return;
+				case "already-set-up":
+					this.expired.emit();
+					this.fail(text.alreadySetUp, "button");
+					return;
+				case "rate-limited":
+					this.fail(text.tooManyAttempts, "button");
+					return;
+				case "unavailable":
+					this.fail(text.passkeysUnavailable, "button");
+					return;
+				default:
+					this.fail(text.passkeyFailed, "button");
+					return;
+			}
+		}
+		switch (classifyPasskeyError(err)) {
+			case "cancelled":
+				this.fail(text.cancelled, "button", "info");
+				return;
+			case "already-registered":
+				this.fail(text.alreadyRegistered, "button");
+				return;
+			case "unsupported":
+				this.fail(text.browserUnsupported, "button");
+				return;
+			default: this.fail(text.passkeyFailed, "button");
+		}
+	}
+	clearError() {
+		this.error.set("");
+		this.errorVariant.set("error");
+	}
+	fail(message, target, variant = "error") {
+		this.errorVariant.set(variant);
+		this.error.set(message);
+		this.focus(target);
+	}
+	messageFor(err, generic, wrongCode) {
+		const text = this.text();
+		switch (classifyMfaFailure(err)) {
+			case "rate-limited": return text.tooManyAttempts;
+			case "expired":
+				this.expired.emit();
+				return text.loginExpired;
+			case "already-set-up":
+				this.expired.emit();
+				return text.alreadySetUp;
+			case "wrong-code": return wrongCode ?? generic;
+			default: return generic;
+		}
+	}
+	focus(target) {
+		focusAfterRender(this.host, this.injector, () => {
+			return {
+				heading: "h2",
+				field: this.step() === "passkey" ? `#${this.id}-passkey-name` : `#${this.id}-code`,
+				button: ".gbt-mfa-enrollment__primary button",
+				begin: ".gbt-mfa-enrollment__begin button"
+			}[target];
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: MfaEnrollment,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: MfaEnrollment,
+		isStandalone: true,
+		selector: "gbt-mfa-enrollment",
+		inputs: {
+			mfaToken: {
+				classPropertyName: "mfaToken",
+				publicName: "mfaToken",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			passkeysAvailable: {
+				classPropertyName: "passkeysAvailable",
+				publicName: "passkeysAvailable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			labels: {
+				classPropertyName: "labels",
+				publicName: "labels",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			completed: "completed",
+			cancelled: "cancelled",
+			expired: "expired"
+		},
+		ngImport: i0,
+		template: "<section class=\"gbt-mfa-enrollment\">\n  <header class=\"gbt-mfa-enrollment__header\">\n    <p class=\"gbt-mfa-enrollment__step\">{{ text().step(stepNumber(), stepCount) }}</p>\n    @switch (step()) {\n      @case ('choice') {\n        <h2 class=\"gbt-mfa-enrollment__title\" tabindex=\"-1\">{{ text().choiceHeading }}</h2>\n      }\n      @case ('scan') {\n        <h2 class=\"gbt-mfa-enrollment__title\" tabindex=\"-1\">{{ text().scanHeading }}</h2>\n      }\n      @case ('passkey') {\n        <h2 class=\"gbt-mfa-enrollment__title\" tabindex=\"-1\">{{ text().passkeyHeading }}</h2>\n      }\n      @case ('codes') {\n        <h2 class=\"gbt-mfa-enrollment__title\" tabindex=\"-1\">{{ text().codesHeading }}</h2>\n      }\n    }\n  </header>\n\n  @switch (step()) {\n    @case ('choice') {\n      <gbt-alert variant=\"info\" appearance=\"subtle\" iconAlign=\"start\" live=\"off\">{{\n        text().mandatory\n      }}</gbt-alert>\n\n      @if (passkeyOffered()) {\n        <p class=\"gbt-mfa-enrollment__lead\">{{ text().choiceLead }}</p>\n\n        @if (error()) {\n          <gbt-alert [variant]=\"errorVariant()\" appearance=\"subtle\" iconAlign=\"start\">{{\n            error()\n          }}</gbt-alert>\n        }\n\n        <div class=\"gbt-mfa-enrollment__options\">\n          <gbt-card\n            class=\"gbt-mfa-enrollment__option gbt-mfa-enrollment__option--recommended\"\n            icon=\"key\"\n            [heading]=\"text().passkeyOption\"\n            [headingLevel]=\"3\"\n          >\n            <gbt-badge card-header-actions variant=\"info\">{{ text().recommended }}</gbt-badge>\n            <p class=\"gbt-mfa-enrollment__option-text\">{{ text().passkeyOptionText }}</p>\n            <gbt-button\n              class=\"gbt-mfa-enrollment__primary\"\n              block\n              size=\"large\"\n              [text]=\"text().usePasskey\"\n              [disabled]=\"submitting()\"\n              (clicked)=\"choosePasskey()\"\n            />\n          </gbt-card>\n\n          <gbt-card\n            class=\"gbt-mfa-enrollment__option\"\n            icon=\"smartphone\"\n            [heading]=\"text().appOption\"\n            [headingLevel]=\"3\"\n          >\n            <p class=\"gbt-mfa-enrollment__option-text\">{{ text().appOptionText }}</p>\n            <gbt-button\n              class=\"gbt-mfa-enrollment__begin\"\n              block\n              variant=\"secondary\"\n              size=\"large\"\n              [text]=\"text().useApp\"\n              [loading]=\"submitting()\"\n              [loadingLabel]=\"text().preparing\"\n              (clicked)=\"begin()\"\n            />\n          </gbt-card>\n        </div>\n\n        <div class=\"gbt-mfa-enrollment__actions\">\n          <gbt-button\n            block\n            size=\"large\"\n            variant=\"secondary\"\n            [text]=\"text().back\"\n            [disabled]=\"submitting()\"\n            (clicked)=\"back()\"\n          />\n        </div>\n      } @else {\n        <ol class=\"gbt-mfa-enrollment__todo\">\n          <li>{{ text().todoInstall }}</li>\n          <li>{{ text().todoScan }}</li>\n          <li>{{ text().todoKeep }}</li>\n        </ol>\n\n        @if (error()) {\n          <gbt-alert variant=\"error\" appearance=\"subtle\" iconAlign=\"start\">{{ error() }}</gbt-alert>\n        }\n\n        <div class=\"gbt-mfa-enrollment__actions\">\n          <gbt-button\n            class=\"gbt-mfa-enrollment__primary gbt-mfa-enrollment__begin\"\n            block\n            size=\"large\"\n            [text]=\"text().begin\"\n            [loading]=\"submitting()\"\n            [loadingLabel]=\"text().preparing\"\n            (clicked)=\"begin()\"\n          />\n          <gbt-button\n            block\n            size=\"large\"\n            variant=\"secondary\"\n            [text]=\"text().back\"\n            [disabled]=\"submitting()\"\n            (clicked)=\"back()\"\n          />\n        </div>\n      }\n    }\n\n    @case ('scan') {\n      <p class=\"gbt-mfa-enrollment__lead\">{{ text().scanLead }}</p>\n\n      <form class=\"gbt-mfa-enrollment__form\" (ngSubmit)=\"confirm()\">\n        <gbt-totp-qr [otpauthUrl]=\"otpauthUrl()\" [secret]=\"secret()\" />\n\n        @if (error()) {\n          <gbt-alert variant=\"error\" appearance=\"subtle\" iconAlign=\"start\">{{ error() }}</gbt-alert>\n        }\n\n        <gbt-input\n          [id]=\"id + '-code'\"\n          inputmode=\"numeric\"\n          [spellcheck]=\"false\"\n          autocapitalize=\"off\"\n          enterkeyhint=\"go\"\n          name=\"code\"\n          autocomplete=\"one-time-code\"\n          [label]=\"text().codeLabel\"\n          [ngModel]=\"code()\"\n          (ngModelChange)=\"code.set($event)\"\n        />\n\n        <div class=\"gbt-mfa-enrollment__actions\">\n          <gbt-button\n            class=\"gbt-mfa-enrollment__primary\"\n            block\n            type=\"submit\"\n            size=\"large\"\n            [text]=\"text().activate\"\n            [loading]=\"submitting()\"\n            [loadingLabel]=\"text().verifying\"\n          />\n          <gbt-button\n            block\n            size=\"large\"\n            variant=\"secondary\"\n            [text]=\"text().back\"\n            [disabled]=\"submitting()\"\n            (clicked)=\"back()\"\n          />\n        </div>\n      </form>\n    }\n\n    @case ('passkey') {\n      <p class=\"gbt-mfa-enrollment__lead\">{{ text().passkeyLead }}</p>\n\n      <form class=\"gbt-mfa-enrollment__form\" (ngSubmit)=\"createPasskey()\">\n        @if (error()) {\n          <gbt-alert [variant]=\"errorVariant()\" appearance=\"subtle\" iconAlign=\"start\">{{\n            error()\n          }}</gbt-alert>\n        }\n        @if (promptOpen()) {\n          <gbt-alert variant=\"info\" appearance=\"subtle\" iconAlign=\"start\" live=\"polite\">{{\n            text().promptOpen\n          }}</gbt-alert>\n        }\n\n        <gbt-input\n          [id]=\"id + '-passkey-name'\"\n          name=\"passkeyName\"\n          autocomplete=\"off\"\n          [label]=\"text().passkeyNameLabel\"\n          [placeholder]=\"text().defaultPasskeyName\"\n          [ngModel]=\"passkeyName()\"\n          (ngModelChange)=\"passkeyName.set($event)\"\n        />\n\n        <div class=\"gbt-mfa-enrollment__actions\">\n          <gbt-button\n            class=\"gbt-mfa-enrollment__primary\"\n            block\n            type=\"submit\"\n            size=\"large\"\n            [text]=\"text().createPasskey\"\n            [loading]=\"submitting()\"\n            [loadingLabel]=\"text().creating\"\n          />\n          <gbt-button\n            block\n            size=\"large\"\n            variant=\"secondary\"\n            [text]=\"text().back\"\n            (clicked)=\"back()\"\n          />\n        </div>\n      </form>\n    }\n\n    @case ('codes') {\n      <p class=\"gbt-mfa-enrollment__lead\">{{ text().codesLead(factor()) }}</p>\n\n      <gbt-backup-codes [codes]=\"backupCodes()\" [(acknowledged)]=\"acknowledged\" />\n\n      <div class=\"gbt-mfa-enrollment__actions\">\n        <gbt-button\n          class=\"gbt-mfa-enrollment__primary\"\n          block\n          size=\"large\"\n          [text]=\"text().continue\"\n          [disabled]=\"!acknowledged()\"\n          (clicked)=\"finish()\"\n        />\n      </div>\n    }\n  }\n</section>\n",
+		styles: [":host{display:block}.gbt-mfa-enrollment{display:flex;flex-direction:column;gap:1.25rem}.gbt-mfa-enrollment__header{text-align:center}.gbt-mfa-enrollment__step{margin:0 0 .25rem;color:var(--text-discret);font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.gbt-mfa-enrollment__title{font-family:var(--gbt-font-display, var(--font-display));margin:0;color:var(--text-primary);font-size:1.0625rem;font-weight:600;line-height:1.4}.gbt-mfa-enrollment__title:focus{outline:none}.gbt-mfa-enrollment__lead{margin:0;color:var(--text-secondary);font-size:.875rem;line-height:1.5;text-align:center}.gbt-mfa-enrollment__todo{display:flex;flex-direction:column;gap:.75rem;margin:0;padding:0;list-style:none;counter-reset:todo}.gbt-mfa-enrollment__todo li{position:relative;padding-left:2rem;color:var(--text-secondary);font-size:.875rem;line-height:1.5;counter-increment:todo}.gbt-mfa-enrollment__todo li:before{content:counter(todo);position:absolute;top:.0625rem;left:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:1.375rem;height:1.375rem;border-radius:50%;background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary);font-size:.75rem;font-weight:700}.gbt-mfa-enrollment__options{display:flex;flex-direction:column;gap:.75rem}.gbt-mfa-enrollment__option ::ng-deep .gbt-card{display:flex;flex-direction:column;gap:.5rem;padding:1rem;border:1px solid var(--border-color);box-shadow:none}.gbt-mfa-enrollment__option ::ng-deep .gbt-card__title{font-size:.9375rem}.gbt-mfa-enrollment__option--recommended ::ng-deep .gbt-card{border-color:color-mix(in srgb,var(--primary) 55%,var(--border-color));background:color-mix(in srgb,var(--primary) 5%,var(--bg-principal))}.gbt-mfa-enrollment__option-text{margin:0 0 .5rem;color:var(--text-secondary);font-size:.875rem;line-height:1.5}.gbt-mfa-enrollment__form{display:flex;flex-direction:column;gap:1.25rem}.gbt-mfa-enrollment__actions{display:flex;flex-direction:column;gap:.5rem;margin-top:.25rem}\n"],
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: FormsModule
+			},
+			{
+				kind: "directive",
+				type: i1.ɵNgNoValidate,
+				selector: "form:not([ngNoForm]):not([ngNativeValidate])"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatusGroup,
+				selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "directive",
+				type: i1.NgForm,
+				selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]",
+				inputs: ["ngFormOptions"],
+				outputs: ["ngSubmit"],
+				exportAs: ["ngForm"]
+			},
+			{
+				kind: "component",
+				type: Badge,
+				selector: "gbt-badge",
+				inputs: [
+					"variant",
+					"icon",
+					"appearance",
+					"size",
+					"truncate",
+					"tabularNums",
+					"mono",
+					"maxWidth",
+					"fullText",
+					"copyable",
+					"copyValue",
+					"copyLabel",
+					"copiedText",
+					"failedText",
+					"feedbackMs",
+					"value",
+					"max",
+					"hideZero",
+					"label"
+				],
+				outputs: ["copied", "copyFailed"]
+			},
+			{
+				kind: "component",
+				type: Button,
+				selector: "gbt-button, a[gbtButton]",
+				inputs: [
+					"variant",
+					"size",
+					"type",
+					"text",
+					"iconName",
+					"ariaLabel",
+					"loading",
+					"loadingLabel",
+					"disabled",
+					"pressed",
+					"ariaExpanded",
+					"ariaControls",
+					"ariaHaspopup",
+					"block",
+					"iconOnly"
+				],
+				outputs: ["clicked"]
+			},
+			{
+				kind: "component",
+				type: Card,
+				selector: "gbt-card",
+				inputs: [
+					"hoverable",
+					"heading",
+					"icon",
+					"headingLevel",
+					"variant",
+					"description",
+					"count",
+					"flush",
+					"tone",
+					"selected",
+					"selectedLabel",
+					"href",
+					"linkLabel"
+				]
+			},
+			{
+				kind: "component",
+				type: GbtInput,
+				selector: "gbt-input",
+				inputs: [
+					"id",
+					"label",
+					"type",
+					"required",
+					"disabled",
+					"placeholder",
+					"errorMessage",
+					"autocomplete",
+					"hint",
+					"hideLabel",
+					"size",
+					"mono",
+					"leadingIcon",
+					"inputmode",
+					"spellcheck",
+					"autocapitalize",
+					"enterkeyhint",
+					"maxlength",
+					"min",
+					"max",
+					"combobox",
+					"showPasswordLabel",
+					"hidePasswordLabel"
+				],
+				outputs: ["committed"]
+			},
+			{
+				kind: "component",
+				type: Alert,
+				selector: "gbt-alert",
+				inputs: [
+					"variant",
+					"dismissible",
+					"closeLabel",
+					"live",
+					"heading",
+					"size",
+					"appearance",
+					"iconAlign"
+				],
+				outputs: ["dismissed"]
+			},
+			{
+				kind: "component",
+				type: TotpQr,
+				selector: "gbt-totp-qr",
+				inputs: [
+					"otpauthUrl",
+					"secret",
+					"labels"
+				]
+			},
+			{
+				kind: "component",
+				type: BackupCodes,
+				selector: "gbt-backup-codes",
+				inputs: [
+					"codes",
+					"acknowledged",
+					"labels"
+				],
+				outputs: ["acknowledgedChange"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: MfaEnrollment,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-mfa-enrollment",
+			standalone: true,
+			imports: [
+				FormsModule,
+				Badge,
+				Button,
+				Card,
+				GbtInput,
+				Alert,
+				TotpQr,
+				BackupCodes
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<section class=\"gbt-mfa-enrollment\">\n  <header class=\"gbt-mfa-enrollment__header\">\n    <p class=\"gbt-mfa-enrollment__step\">{{ text().step(stepNumber(), stepCount) }}</p>\n    @switch (step()) {\n      @case ('choice') {\n        <h2 class=\"gbt-mfa-enrollment__title\" tabindex=\"-1\">{{ text().choiceHeading }}</h2>\n      }\n      @case ('scan') {\n        <h2 class=\"gbt-mfa-enrollment__title\" tabindex=\"-1\">{{ text().scanHeading }}</h2>\n      }\n      @case ('passkey') {\n        <h2 class=\"gbt-mfa-enrollment__title\" tabindex=\"-1\">{{ text().passkeyHeading }}</h2>\n      }\n      @case ('codes') {\n        <h2 class=\"gbt-mfa-enrollment__title\" tabindex=\"-1\">{{ text().codesHeading }}</h2>\n      }\n    }\n  </header>\n\n  @switch (step()) {\n    @case ('choice') {\n      <gbt-alert variant=\"info\" appearance=\"subtle\" iconAlign=\"start\" live=\"off\">{{\n        text().mandatory\n      }}</gbt-alert>\n\n      @if (passkeyOffered()) {\n        <p class=\"gbt-mfa-enrollment__lead\">{{ text().choiceLead }}</p>\n\n        @if (error()) {\n          <gbt-alert [variant]=\"errorVariant()\" appearance=\"subtle\" iconAlign=\"start\">{{\n            error()\n          }}</gbt-alert>\n        }\n\n        <div class=\"gbt-mfa-enrollment__options\">\n          <gbt-card\n            class=\"gbt-mfa-enrollment__option gbt-mfa-enrollment__option--recommended\"\n            icon=\"key\"\n            [heading]=\"text().passkeyOption\"\n            [headingLevel]=\"3\"\n          >\n            <gbt-badge card-header-actions variant=\"info\">{{ text().recommended }}</gbt-badge>\n            <p class=\"gbt-mfa-enrollment__option-text\">{{ text().passkeyOptionText }}</p>\n            <gbt-button\n              class=\"gbt-mfa-enrollment__primary\"\n              block\n              size=\"large\"\n              [text]=\"text().usePasskey\"\n              [disabled]=\"submitting()\"\n              (clicked)=\"choosePasskey()\"\n            />\n          </gbt-card>\n\n          <gbt-card\n            class=\"gbt-mfa-enrollment__option\"\n            icon=\"smartphone\"\n            [heading]=\"text().appOption\"\n            [headingLevel]=\"3\"\n          >\n            <p class=\"gbt-mfa-enrollment__option-text\">{{ text().appOptionText }}</p>\n            <gbt-button\n              class=\"gbt-mfa-enrollment__begin\"\n              block\n              variant=\"secondary\"\n              size=\"large\"\n              [text]=\"text().useApp\"\n              [loading]=\"submitting()\"\n              [loadingLabel]=\"text().preparing\"\n              (clicked)=\"begin()\"\n            />\n          </gbt-card>\n        </div>\n\n        <div class=\"gbt-mfa-enrollment__actions\">\n          <gbt-button\n            block\n            size=\"large\"\n            variant=\"secondary\"\n            [text]=\"text().back\"\n            [disabled]=\"submitting()\"\n            (clicked)=\"back()\"\n          />\n        </div>\n      } @else {\n        <ol class=\"gbt-mfa-enrollment__todo\">\n          <li>{{ text().todoInstall }}</li>\n          <li>{{ text().todoScan }}</li>\n          <li>{{ text().todoKeep }}</li>\n        </ol>\n\n        @if (error()) {\n          <gbt-alert variant=\"error\" appearance=\"subtle\" iconAlign=\"start\">{{ error() }}</gbt-alert>\n        }\n\n        <div class=\"gbt-mfa-enrollment__actions\">\n          <gbt-button\n            class=\"gbt-mfa-enrollment__primary gbt-mfa-enrollment__begin\"\n            block\n            size=\"large\"\n            [text]=\"text().begin\"\n            [loading]=\"submitting()\"\n            [loadingLabel]=\"text().preparing\"\n            (clicked)=\"begin()\"\n          />\n          <gbt-button\n            block\n            size=\"large\"\n            variant=\"secondary\"\n            [text]=\"text().back\"\n            [disabled]=\"submitting()\"\n            (clicked)=\"back()\"\n          />\n        </div>\n      }\n    }\n\n    @case ('scan') {\n      <p class=\"gbt-mfa-enrollment__lead\">{{ text().scanLead }}</p>\n\n      <form class=\"gbt-mfa-enrollment__form\" (ngSubmit)=\"confirm()\">\n        <gbt-totp-qr [otpauthUrl]=\"otpauthUrl()\" [secret]=\"secret()\" />\n\n        @if (error()) {\n          <gbt-alert variant=\"error\" appearance=\"subtle\" iconAlign=\"start\">{{ error() }}</gbt-alert>\n        }\n\n        <gbt-input\n          [id]=\"id + '-code'\"\n          inputmode=\"numeric\"\n          [spellcheck]=\"false\"\n          autocapitalize=\"off\"\n          enterkeyhint=\"go\"\n          name=\"code\"\n          autocomplete=\"one-time-code\"\n          [label]=\"text().codeLabel\"\n          [ngModel]=\"code()\"\n          (ngModelChange)=\"code.set($event)\"\n        />\n\n        <div class=\"gbt-mfa-enrollment__actions\">\n          <gbt-button\n            class=\"gbt-mfa-enrollment__primary\"\n            block\n            type=\"submit\"\n            size=\"large\"\n            [text]=\"text().activate\"\n            [loading]=\"submitting()\"\n            [loadingLabel]=\"text().verifying\"\n          />\n          <gbt-button\n            block\n            size=\"large\"\n            variant=\"secondary\"\n            [text]=\"text().back\"\n            [disabled]=\"submitting()\"\n            (clicked)=\"back()\"\n          />\n        </div>\n      </form>\n    }\n\n    @case ('passkey') {\n      <p class=\"gbt-mfa-enrollment__lead\">{{ text().passkeyLead }}</p>\n\n      <form class=\"gbt-mfa-enrollment__form\" (ngSubmit)=\"createPasskey()\">\n        @if (error()) {\n          <gbt-alert [variant]=\"errorVariant()\" appearance=\"subtle\" iconAlign=\"start\">{{\n            error()\n          }}</gbt-alert>\n        }\n        @if (promptOpen()) {\n          <gbt-alert variant=\"info\" appearance=\"subtle\" iconAlign=\"start\" live=\"polite\">{{\n            text().promptOpen\n          }}</gbt-alert>\n        }\n\n        <gbt-input\n          [id]=\"id + '-passkey-name'\"\n          name=\"passkeyName\"\n          autocomplete=\"off\"\n          [label]=\"text().passkeyNameLabel\"\n          [placeholder]=\"text().defaultPasskeyName\"\n          [ngModel]=\"passkeyName()\"\n          (ngModelChange)=\"passkeyName.set($event)\"\n        />\n\n        <div class=\"gbt-mfa-enrollment__actions\">\n          <gbt-button\n            class=\"gbt-mfa-enrollment__primary\"\n            block\n            type=\"submit\"\n            size=\"large\"\n            [text]=\"text().createPasskey\"\n            [loading]=\"submitting()\"\n            [loadingLabel]=\"text().creating\"\n          />\n          <gbt-button\n            block\n            size=\"large\"\n            variant=\"secondary\"\n            [text]=\"text().back\"\n            (clicked)=\"back()\"\n          />\n        </div>\n      </form>\n    }\n\n    @case ('codes') {\n      <p class=\"gbt-mfa-enrollment__lead\">{{ text().codesLead(factor()) }}</p>\n\n      <gbt-backup-codes [codes]=\"backupCodes()\" [(acknowledged)]=\"acknowledged\" />\n\n      <div class=\"gbt-mfa-enrollment__actions\">\n        <gbt-button\n          class=\"gbt-mfa-enrollment__primary\"\n          block\n          size=\"large\"\n          [text]=\"text().continue\"\n          [disabled]=\"!acknowledged()\"\n          (clicked)=\"finish()\"\n        />\n      </div>\n    }\n  }\n</section>\n",
+			styles: [":host{display:block}.gbt-mfa-enrollment{display:flex;flex-direction:column;gap:1.25rem}.gbt-mfa-enrollment__header{text-align:center}.gbt-mfa-enrollment__step{margin:0 0 .25rem;color:var(--text-discret);font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.gbt-mfa-enrollment__title{font-family:var(--gbt-font-display, var(--font-display));margin:0;color:var(--text-primary);font-size:1.0625rem;font-weight:600;line-height:1.4}.gbt-mfa-enrollment__title:focus{outline:none}.gbt-mfa-enrollment__lead{margin:0;color:var(--text-secondary);font-size:.875rem;line-height:1.5;text-align:center}.gbt-mfa-enrollment__todo{display:flex;flex-direction:column;gap:.75rem;margin:0;padding:0;list-style:none;counter-reset:todo}.gbt-mfa-enrollment__todo li{position:relative;padding-left:2rem;color:var(--text-secondary);font-size:.875rem;line-height:1.5;counter-increment:todo}.gbt-mfa-enrollment__todo li:before{content:counter(todo);position:absolute;top:.0625rem;left:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:1.375rem;height:1.375rem;border-radius:50%;background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary);font-size:.75rem;font-weight:700}.gbt-mfa-enrollment__options{display:flex;flex-direction:column;gap:.75rem}.gbt-mfa-enrollment__option ::ng-deep .gbt-card{display:flex;flex-direction:column;gap:.5rem;padding:1rem;border:1px solid var(--border-color);box-shadow:none}.gbt-mfa-enrollment__option ::ng-deep .gbt-card__title{font-size:.9375rem}.gbt-mfa-enrollment__option--recommended ::ng-deep .gbt-card{border-color:color-mix(in srgb,var(--primary) 55%,var(--border-color));background:color-mix(in srgb,var(--primary) 5%,var(--bg-principal))}.gbt-mfa-enrollment__option-text{margin:0 0 .5rem;color:var(--text-secondary);font-size:.875rem;line-height:1.5}.gbt-mfa-enrollment__form{display:flex;flex-direction:column;gap:1.25rem}.gbt-mfa-enrollment__actions{display:flex;flex-direction:column;gap:.5rem;margin-top:.25rem}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		mfaToken: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mfaToken",
+				required: true
+			}]
+		}],
+		passkeysAvailable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "passkeysAvailable",
+				required: false
+			}]
+		}],
+		labels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labels",
+				required: false
+			}]
+		}],
+		completed: [{
+			type: i0.Output,
+			args: ["completed"]
+		}],
+		cancelled: [{
+			type: i0.Output,
+			args: ["cancelled"]
+		}],
+		expired: [{
+			type: i0.Output,
+			args: ["expired"]
+		}]
+	}
+});
+export { BackupCodes, MfaEnrollment, TOTP_QR_RENDERER, TotpQr };
+
+//# sourceMappingURL=masmarino-gabarit-mfa-enrollment.mjs.map