@masmarino/gabarit 2.0.0 → 2.1.1

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

@@ -0,0 +1,629 @@
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, Injector, computed, effect, inject, input, output, signal, untracked } from "@angular/core";
+import * as i1 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+import { Badge } from "@masmarino/gabarit/badge";
+import { Button } from "@masmarino/gabarit/button";
+import { Icon } from "@masmarino/gabarit/icon";
+import { GbtInput } from "@masmarino/gabarit/input";
+import { Skeleton } from "@masmarino/gabarit/skeleton";
+import { Alert } from "@masmarino/gabarit/alert";
+import { Card } from "@masmarino/gabarit/card";
+import { ConfirmDangerModal } from "@masmarino/gabarit/confirm-danger-modal";
+import { DEFAULT_MFA_SETTINGS_LABELS, MFA_PORT, MfaSettingsState, authLabels, classifyMfaFailure, classifyPasswordFailure, focusAfterRender } from "@masmarino/gabarit/auth";
+import { BackupCodes, TotpQr } from "@masmarino/gabarit/mfa-enrollment";
+let nextId = 0;
+var MfaSettings = class MfaSettings {
+	mfa = inject(MFA_PORT);
+	state = inject(MfaSettingsState);
+	host = inject(ElementRef);
+	injector = inject(Injector);
+	labels = input({}, ...ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []);
+	lowCodesThreshold = input(3, ...ngDevMode ? [{ debugName: "lowCodesThreshold" }] : /* istanbul ignore next */ []);
+	sessionRevoked = output();
+	text = authLabels("mfaSettings", DEFAULT_MFA_SETTINGS_LABELS, this.labels);
+	id = `gbt-mfa-settings-${nextId++}`;
+	view = signal("loading", ...ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []);
+	status = signal({
+		totpEnabled: false,
+		backupCodesRemaining: 0,
+		passkeys: []
+	}, ...ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []);
+	prompt = signal(null, ...ngDevMode ? [{ debugName: "prompt" }] : /* istanbul ignore next */ []);
+	password = signal("", ...ngDevMode ? [{ debugName: "password" }] : /* istanbul ignore next */ []);
+	passwordError = signal(null, ...ngDevMode ? [{ debugName: "passwordError" }] : /* istanbul ignore next */ []);
+	notice = signal("", ...ngDevMode ? [{ debugName: "notice" }] : /* 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 */ []);
+	codeError = signal(null, ...ngDevMode ? [{ debugName: "codeError" }] : /* istanbul ignore next */ []);
+	backupCodes = signal([], ...ngDevMode ? [{ debugName: "backupCodes" }] : /* istanbul ignore next */ []);
+	codesOrigin = signal("enrolled", ...ngDevMode ? [{ debugName: "codesOrigin" }] : /* istanbul ignore next */ []);
+	acknowledged = signal(false, ...ngDevMode ? [{ debugName: "acknowledged" }] : /* istanbul ignore next */ []);
+	busy = signal(false, ...ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []);
+	confirmingDisable = signal(false, ...ngDevMode ? [{ debugName: "confirmingDisable" }] : /* istanbul ignore next */ []);
+	hasPasskey = computed(() => (this.state.passkeyCount() ?? this.status().passkeys.length) > 0, ...ngDevMode ? [{ debugName: "hasPasskey" }] : /* istanbul ignore next */ []);
+	hasFactor = computed(() => this.status().totpEnabled || this.hasPasskey(), ...ngDevMode ? [{ debugName: "hasFactor" }] : /* istanbul ignore next */ []);
+	removal = computed(() => {
+		const text = this.text();
+		return this.hasPasskey() ? {
+			title: text.removeTitle,
+			help: text.removeHelp,
+			action: text.removeAction,
+			dialogHeading: text.removeDialogHeading,
+			dialogMessage: text.removeDialogMessage,
+			promptLead: text.removePromptLead,
+			busy: text.removeBusy
+		} : {
+			title: text.resetTitle,
+			help: text.resetHelp,
+			action: text.resetAction,
+			dialogHeading: text.resetDialogHeading,
+			dialogMessage: text.resetDialogMessage,
+			promptLead: text.resetPromptLead,
+			busy: text.resetBusy
+		};
+	}, ...ngDevMode ? [{ debugName: "removal" }] : /* istanbul ignore next */ []);
+	lowCodes = computed(() => this.status().backupCodesRemaining <= this.lowCodesThreshold(), ...ngDevMode ? [{ debugName: "lowCodes" }] : /* istanbul ignore next */ []);
+	codesLeft = computed(() => this.text().codesLeft(this.status().backupCodesRemaining), ...ngDevMode ? [{ debugName: "codesLeft" }] : /* istanbul ignore next */ []);
+	promptCopy = computed(() => this.copyOf(this.prompt() ?? "enroll"), ...ngDevMode ? [{ debugName: "promptCopy" }] : /* istanbul ignore next */ []);
+	heading = computed(() => {
+		switch (this.view()) {
+			case "enrolling": return this.text().enrollingHeading;
+			case "codes": return this.text().codesHeading;
+			default: return this.text().heading;
+		}
+	}, ...ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []);
+	help = computed(() => this.view() === "codes" ? this.text().codesHelp : this.text().help, ...ngDevMode ? [{ debugName: "help" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.load();
+		effect(() => {
+			if (this.state.formOwner() === "passkeys") untracked(() => {
+				if (this.prompt() !== null) {
+					this.resetPrompt();
+					this.prompt.set(null);
+					this.confirmingDisable.set(false);
+				}
+			});
+		});
+		effect(() => this.state.setAppFlowActive(this.view() === "enrolling" || this.view() === "codes"));
+		effect((onCleanup) => {
+			if (this.view() === "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));
+			}
+		});
+		inject(DestroyRef).onDestroy(() => {
+			this.state.setAppFlowActive(false);
+			this.password.set("");
+			this.code.set("");
+			this.secret.set("");
+			this.otpauthUrl.set("");
+			this.backupCodes.set([]);
+		});
+	}
+	load() {
+		this.view.set("loading");
+		this.mfa.status().subscribe({
+			next: (status) => {
+				this.state.statusLoaded(status);
+				this.status.set(status);
+				this.view.set("ready");
+			},
+			error: () => this.view.set("failed")
+		});
+	}
+	copyOf(prompt) {
+		const text = this.text();
+		switch (prompt) {
+			case "enroll": return {
+				lead: text.enrollLead,
+				submit: text.enrollSubmit,
+				busy: text.enrollBusy,
+				variant: "primary",
+				failed: text.enrollFailed
+			};
+			case "regenerate": return {
+				lead: text.regenerateLead,
+				submit: text.regenerateSubmit,
+				busy: text.regenerateBusy,
+				variant: "primary",
+				failed: text.regenerateFailed
+			};
+			case "disable": return {
+				lead: this.removal().promptLead,
+				submit: text.disableSubmit,
+				busy: text.disableCheckBusy,
+				variant: "secondary",
+				failed: text.disableFailed
+			};
+		}
+	}
+	openPrompt(prompt) {
+		this.state.claimForm("app");
+		this.resetPrompt();
+		this.prompt.set(prompt);
+		this.focus(`#${this.id}-password`);
+	}
+	cancelPrompt() {
+		const prompt = this.prompt();
+		this.resetPrompt();
+		this.prompt.set(null);
+		if (prompt) this.focus(`[data-opener="${prompt}"] button`);
+	}
+	setPassword(value) {
+		this.password.set(value);
+		this.passwordError.set(null);
+		this.notice.set("");
+	}
+	submitPrompt() {
+		const prompt = this.prompt();
+		if (this.busy() || !prompt) return;
+		if (this.password() === "") {
+			this.passwordError.set(this.text().enterPassword);
+			this.focus(`#${this.id}-password`);
+			return;
+		}
+		this.passwordError.set(null);
+		this.notice.set("");
+		switch (prompt) {
+			case "enroll": return this.enroll();
+			case "regenerate": return this.regenerate();
+			case "disable":
+				this.confirmingDisable.set(true);
+				return;
+		}
+	}
+	enroll() {
+		this.busy.set(true);
+		this.mfa.enroll(this.password()).subscribe({
+			next: ({ secret, otpauthUrl }) => {
+				this.busy.set(false);
+				this.resetPrompt();
+				this.prompt.set(null);
+				this.secret.set(secret);
+				this.otpauthUrl.set(otpauthUrl);
+				this.view.set("enrolling");
+				this.focus("[data-mfa-anchor]");
+			},
+			error: (err) => this.promptFailed(err)
+		});
+	}
+	regenerate() {
+		this.busy.set(true);
+		this.mfa.regenerate(this.password()).subscribe({
+			next: ({ backupCodes }) => {
+				this.busy.set(false);
+				this.resetPrompt();
+				this.prompt.set(null);
+				this.showCodes(backupCodes, "regenerated");
+			},
+			error: (err) => this.promptFailed(err)
+		});
+	}
+	disable() {
+		if (this.busy()) return;
+		this.busy.set(true);
+		this.mfa.disable(this.password()).subscribe({
+			next: () => {
+				this.busy.set(false);
+				this.confirmingDisable.set(false);
+				this.resetPrompt();
+				this.prompt.set(null);
+				this.status.update((status) => ({
+					...status,
+					totpEnabled: false
+				}));
+				this.view.set("revoked");
+				this.focus("[data-mfa-anchor]");
+				this.sessionRevoked.emit();
+			},
+			error: (err) => {
+				this.confirmingDisable.set(false);
+				this.promptFailed(err);
+			}
+		});
+	}
+	closeDisableDialog() {
+		if (!this.busy()) {
+			this.confirmingDisable.set(false);
+			this.focus(`#${this.id}-password`);
+		}
+	}
+	promptFailed(err) {
+		this.busy.set(false);
+		switch (classifyPasswordFailure(err)) {
+			case "wrong-password":
+				this.passwordError.set(this.text().wrongPassword);
+				break;
+			case "rate-limited":
+				this.notice.set(this.text().tooManyAttempts);
+				break;
+			default: this.notice.set(this.copyOf(this.prompt() ?? "enroll").failed);
+		}
+		this.focus(`#${this.id}-password`);
+	}
+	resetPrompt() {
+		this.password.set("");
+		this.passwordError.set(null);
+		this.notice.set("");
+	}
+	activate() {
+		if (this.busy()) return;
+		const code = this.code().replace(/\s+/g, "");
+		if (code === "") {
+			this.codeError.set(this.text().enterCode);
+			this.focus(`#${this.id}-code`);
+			return;
+		}
+		this.codeError.set(null);
+		this.notice.set("");
+		this.busy.set(true);
+		this.mfa.confirm(code).subscribe({
+			next: ({ backupCodes }) => {
+				this.busy.set(false);
+				this.state.totpConfirmed();
+				this.secret.set("");
+				this.otpauthUrl.set("");
+				this.code.set("");
+				this.showCodes(backupCodes, "enrolled");
+			},
+			error: (err) => {
+				this.busy.set(false);
+				switch (classifyMfaFailure(err)) {
+					case "wrong-code":
+						this.codeError.set(this.text().wrongCode);
+						this.code.set("");
+						break;
+					case "rate-limited":
+						this.notice.set(this.text().tooManyAttempts);
+						break;
+					default: this.notice.set(this.text().activationFailed);
+				}
+				this.focus(`#${this.id}-code`);
+			}
+		});
+	}
+	setCode(value) {
+		this.code.set(value);
+		this.codeError.set(null);
+		this.notice.set("");
+	}
+	cancelEnrollment() {
+		this.secret.set("");
+		this.otpauthUrl.set("");
+		this.code.set("");
+		this.codeError.set(null);
+		this.notice.set("");
+		this.view.set("ready");
+		this.focus("[data-opener=\"enroll\"] button");
+	}
+	showCodes(codes, origin) {
+		this.backupCodes.set(codes);
+		this.codesOrigin.set(origin);
+		this.acknowledged.set(false);
+		this.view.set("codes");
+		this.focus("[data-mfa-anchor]");
+	}
+	finishCodes() {
+		if (!this.acknowledged()) return;
+		this.status.update((status) => ({
+			...status,
+			totpEnabled: status.totpEnabled || this.codesOrigin() === "enrolled",
+			backupCodesRemaining: this.backupCodes().length
+		}));
+		this.backupCodes.set([]);
+		this.acknowledged.set(false);
+		this.view.set("ready");
+		this.focus("[data-mfa-anchor]");
+	}
+	focus(selector) {
+		focusAfterRender(this.host, this.injector, selector);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: MfaSettings,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: MfaSettings,
+		isStandalone: true,
+		selector: "gbt-mfa-settings",
+		inputs: {
+			labels: {
+				classPropertyName: "labels",
+				publicName: "labels",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			lowCodesThreshold: {
+				classPropertyName: "lowCodesThreshold",
+				publicName: "lowCodesThreshold",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { sessionRevoked: "sessionRevoked" },
+		ngImport: i0,
+		template: "<gbt-card\n  variant=\"outlined\"\n  [icon]=\"view() === 'ready' && !hasFactor() ? 'shield-alert' : 'shield-check'\"\n  [heading]=\"heading()\"\n  [description]=\"help()\"\n>\n  @switch (view()) {\n    @case ('loading') {\n      <span class=\"sr-only\" role=\"status\">{{ text().loading }}</span>\n      <div class=\"gbt-mfa-settings__loading\" aria-busy=\"true\">\n        <div class=\"gbt-mfa-settings__skeleton-row\" aria-hidden=\"true\">\n          <div class=\"gbt-mfa-settings__skeleton-lines\">\n            <gbt-skeleton width=\"9rem\" height=\"0.875rem\" />\n            <gbt-skeleton width=\"min(20rem, 100%)\" height=\"0.75rem\" />\n          </div>\n          <gbt-skeleton width=\"4.5rem\" height=\"1.375rem\" variant=\"rect\" />\n        </div>\n        <div class=\"gbt-mfa-settings__skeleton-row\" aria-hidden=\"true\">\n          <div class=\"gbt-mfa-settings__skeleton-lines\">\n            <gbt-skeleton width=\"7rem\" height=\"0.875rem\" />\n            <gbt-skeleton width=\"min(16rem, 100%)\" height=\"0.75rem\" />\n          </div>\n          <gbt-skeleton width=\"11rem\" height=\"2.25rem\" variant=\"rect\" />\n        </div>\n      </div>\n    }\n\n    @case ('failed') {\n      <gbt-alert variant=\"error\" appearance=\"subtle\">\n        {{ text().loadFailed }}\n        <gbt-button\n          alert-actions\n          variant=\"secondary\"\n          size=\"small\"\n          [text]=\"text().retry\"\n          (clicked)=\"load()\"\n        />\n      </gbt-alert>\n    }\n\n    @case ('revoked') {\n      <div class=\"gbt-mfa-settings__anchor\" data-mfa-anchor tabindex=\"-1\">\n        <gbt-alert variant=\"info\" appearance=\"subtle\" iconAlign=\"start\" live=\"off\">{{\n          text().signedOut\n        }}</gbt-alert>\n      </div>\n    }\n\n    @case ('enrolling') {\n      <form ngNoForm class=\"gbt-mfa-settings__scan\" (submit)=\"$event.preventDefault(); activate()\">\n        <p class=\"gbt-mfa-settings__lead\" data-mfa-anchor tabindex=\"-1\">{{ text().scanLead }}</p>\n\n        <div class=\"gbt-mfa-settings__scan-grid\">\n          <gbt-totp-qr\n            class=\"gbt-mfa-settings__qr\"\n            [otpauthUrl]=\"otpauthUrl()\"\n            [secret]=\"secret()\"\n          />\n\n          <div class=\"gbt-mfa-settings__scan-side\">\n            @if (notice()) {\n              <gbt-alert variant=\"error\" appearance=\"subtle\" iconAlign=\"start\">{{\n                notice()\n              }}</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              [errorMessage]=\"codeError()\"\n              [ngModel]=\"code()\"\n              (ngModelChange)=\"setCode($event)\"\n            />\n\n            <div class=\"gbt-mfa-settings__actions\">\n              <gbt-button\n                type=\"submit\"\n                [text]=\"text().activate\"\n                [loading]=\"busy()\"\n                [loadingLabel]=\"text().verifying\"\n              />\n              <gbt-button\n                variant=\"secondary\"\n                [text]=\"text().cancel\"\n                [disabled]=\"busy()\"\n                (clicked)=\"cancelEnrollment()\"\n              />\n            </div>\n          </div>\n        </div>\n      </form>\n    }\n\n    @case ('codes') {\n      <div class=\"gbt-mfa-settings__stack\">\n        <p class=\"gbt-mfa-settings__lead\" data-mfa-anchor tabindex=\"-1\">\n          {{\n            codesOrigin() === 'enrolled' ? text().codesLeadEnrolled : text().codesLeadRegenerated\n          }}\n        </p>\n        @if (!acknowledged()) {\n          <gbt-alert variant=\"warning\" appearance=\"subtle\" iconAlign=\"start\" live=\"off\">{{\n            text().dontLeave\n          }}</gbt-alert>\n        }\n        <div class=\"gbt-mfa-settings__codes\">\n          <gbt-backup-codes [codes]=\"backupCodes()\" [(acknowledged)]=\"acknowledged\" />\n        </div>\n        <div class=\"gbt-mfa-settings__actions\">\n          <gbt-button [text]=\"text().done\" [disabled]=\"!acknowledged()\" (clicked)=\"finishCodes()\" />\n        </div>\n      </div>\n    }\n\n    @default {\n      @if (hasFactor()) {\n        <div class=\"gbt-mfa-settings__rows\">\n          <div class=\"gbt-mfa-settings__row\">\n            <div class=\"gbt-mfa-settings__row-head\" data-mfa-anchor tabindex=\"-1\">\n              @if (status().totpEnabled) {\n                <div class=\"gbt-mfa-settings__row-text\">\n                  <div class=\"gbt-mfa-settings__title-line\">\n                    <p class=\"gbt-mfa-settings__row-title\">{{ text().appConfigured }}</p>\n                    <gbt-badge\n                      class=\"gbt-mfa-settings__badge\"\n                      variant=\"success\"\n                      icon=\"check-circle\"\n                      >{{ text().enabled }}</gbt-badge\n                    >\n                  </div>\n                  <p class=\"gbt-mfa-settings__row-help\">\n                    {{ hasPasskey() ? text().appHelpWithPasskey : text().appHelp }}\n                  </p>\n                </div>\n              } @else {\n                <div class=\"gbt-mfa-settings__row-text\">\n                  <div class=\"gbt-mfa-settings__title-line\">\n                    <p class=\"gbt-mfa-settings__row-title\">{{ text().noApp }}</p>\n                    <gbt-badge class=\"gbt-mfa-settings__badge\" variant=\"neutral\">{{\n                      text().optional\n                    }}</gbt-badge>\n                  </div>\n                  <p class=\"gbt-mfa-settings__row-help\">{{ text().noAppHelp }}</p>\n                </div>\n                @if (prompt() !== 'enroll') {\n                  <gbt-button\n                    class=\"gbt-mfa-settings__row-action\"\n                    data-opener=\"enroll\"\n                    variant=\"secondary\"\n                    iconName=\"plus\"\n                    [text]=\"text().addApp\"\n                    (clicked)=\"openPrompt('enroll')\"\n                  />\n                }\n              }\n            </div>\n            @if (!status().totpEnabled && prompt() === 'enroll') {\n              <ng-container [ngTemplateOutlet]=\"passwordPrompt\" />\n            }\n          </div>\n\n          <div class=\"gbt-mfa-settings__row\">\n            <div class=\"gbt-mfa-settings__row-head\">\n              <div class=\"gbt-mfa-settings__row-text\">\n                <p class=\"gbt-mfa-settings__row-title\">{{ text().backupCodesTitle }}</p>\n                <p\n                  class=\"gbt-mfa-settings__codes-left\"\n                  [attr.data-tone]=\"lowCodes() ? 'warning' : null\"\n                >\n                  @if (lowCodes()) {\n                    <gbt-icon name=\"alert-triangle\" aria-hidden=\"true\" />\n                  }\n                  <span>{{ codesLeft() }}.</span>\n                  @if (lowCodes()) {\n                    <span>{{ text().lowCodes }}</span>\n                  }\n                </p>\n                <p class=\"gbt-mfa-settings__row-help\">{{ text().backupCodesHelp }}</p>\n              </div>\n              @if (prompt() !== 'regenerate') {\n                <gbt-button\n                  class=\"gbt-mfa-settings__row-action\"\n                  data-opener=\"regenerate\"\n                  variant=\"secondary\"\n                  iconName=\"refresh-cw\"\n                  [text]=\"text().regenerateCodes\"\n                  (clicked)=\"openPrompt('regenerate')\"\n                />\n              }\n            </div>\n            @if (prompt() === 'regenerate') {\n              <ng-container [ngTemplateOutlet]=\"passwordPrompt\" />\n            }\n          </div>\n\n          @if (status().totpEnabled) {\n            <div class=\"gbt-mfa-settings__row\">\n              <div class=\"gbt-mfa-settings__row-head\">\n                <div class=\"gbt-mfa-settings__row-text\">\n                  <p class=\"gbt-mfa-settings__row-title\">{{ removal().title }}</p>\n                  <p class=\"gbt-mfa-settings__row-help\">{{ removal().help }}</p>\n                </div>\n                @if (prompt() !== 'disable') {\n                  <gbt-button\n                    class=\"gbt-mfa-settings__row-action gbt-mfa-settings__row-action--remove\"\n                    data-opener=\"disable\"\n                    variant=\"secondary\"\n                    [text]=\"removal().action\"\n                    (clicked)=\"openPrompt('disable')\"\n                  />\n                }\n              </div>\n              @if (prompt() === 'disable') {\n                <ng-container [ngTemplateOutlet]=\"passwordPrompt\" />\n              }\n            </div>\n          }\n        </div>\n      } @else {\n        <div class=\"gbt-mfa-settings__stack\">\n          <div class=\"gbt-mfa-settings__anchor\" data-mfa-anchor tabindex=\"-1\">\n            <gbt-alert variant=\"warning\" appearance=\"subtle\" iconAlign=\"start\" live=\"off\">{{\n              text().noFactorWarning\n            }}</gbt-alert>\n          </div>\n          @if (prompt() === 'enroll') {\n            <ng-container [ngTemplateOutlet]=\"passwordPrompt\" />\n          } @else {\n            <div class=\"gbt-mfa-settings__actions\">\n              <gbt-button\n                data-opener=\"enroll\"\n                iconName=\"shield-check\"\n                [text]=\"text().setUpNow\"\n                (clicked)=\"openPrompt('enroll')\"\n              />\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n</gbt-card>\n\n@if (confirmingDisable()) {\n  <gbt-confirm-danger-modal\n    [isOpen]=\"true\"\n    [heading]=\"removal().dialogHeading\"\n    [message]=\"removal().dialogMessage\"\n    [confirmLabel]=\"removal().action\"\n    confirmIcon=\"trash-2\"\n    [cancelLabel]=\"text().cancel\"\n    [closeLabel]=\"text().close\"\n    [busyLabel]=\"removal().busy\"\n    [busy]=\"busy()\"\n    (confirmed)=\"disable()\"\n    (closed)=\"closeDisableDialog()\"\n  />\n}\n\n<ng-template #passwordPrompt>\n  <form\n    ngNoForm\n    class=\"gbt-mfa-settings__prompt\"\n    (submit)=\"$event.preventDefault(); submitPrompt()\"\n  >\n    <p class=\"gbt-mfa-settings__prompt-lead\">{{ promptCopy().lead }}</p>\n\n    @if (notice()) {\n      <gbt-alert variant=\"error\" appearance=\"subtle\" iconAlign=\"start\">{{ notice() }}</gbt-alert>\n    }\n\n    <div class=\"gbt-mfa-settings__field\">\n      <gbt-input\n        [id]=\"id + '-password'\"\n        name=\"currentPassword\"\n        type=\"password\"\n        autocomplete=\"current-password\"\n        [label]=\"text().currentPassword\"\n        [showPasswordLabel]=\"text().showPassword\"\n        [hidePasswordLabel]=\"text().hidePassword\"\n        [errorMessage]=\"passwordError()\"\n        [ngModel]=\"password()\"\n        (ngModelChange)=\"setPassword($event)\"\n      />\n    </div>\n\n    <div class=\"gbt-mfa-settings__actions\">\n      <gbt-button\n        type=\"submit\"\n        [variant]=\"promptCopy().variant\"\n        [text]=\"promptCopy().submit\"\n        [loading]=\"busy()\"\n        [loadingLabel]=\"promptCopy().busy\"\n      />\n      <gbt-button\n        variant=\"secondary\"\n        [text]=\"text().cancel\"\n        [disabled]=\"busy()\"\n        (clicked)=\"cancelPrompt()\"\n      />\n    </div>\n  </form>\n</ng-template>\n",
+		styles: [":host{display:block;min-width:0}:host gbt-card{min-width:0;container:gbt-settings-card/inline-size}:host gbt-card ::ng-deep .gbt-card{color:inherit;font-size:inherit;line-height:inherit}:host gbt-card ::ng-deep .gbt-card__count{background:color-mix(in srgb,var(--border-color) 22%,transparent)}.gbt-mfa-settings__rows{display:flex;flex-direction:column}.gbt-mfa-settings__row{display:flex;flex-direction:column;gap:1rem;padding-block:1.25rem}.gbt-mfa-settings__row:first-child{padding-top:0}.gbt-mfa-settings__row:last-child{padding-bottom:0}.gbt-mfa-settings__row+.gbt-mfa-settings__row{border-top:1px solid var(--gbt-hairline)}.gbt-mfa-settings__row-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.75rem 1.5rem}.gbt-mfa-settings__row-head:focus{outline:none}.gbt-mfa-settings__row-text{display:flex;flex:1 1 18rem;flex-direction:column;gap:.125rem;min-width:0}.gbt-mfa-settings__row-title{margin:0;color:var(--text-primary);font-size:.875rem;font-weight:600;line-height:1.5rem}.gbt-mfa-settings__row-help{margin:0;color:var(--text-secondary);font-size:.8125rem;line-height:1.25rem}.gbt-mfa-settings__title-line{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .625rem}.gbt-mfa-settings__badge,.gbt-mfa-settings__row-action{flex:none}.gbt-mfa-settings__row-action--remove ::ng-deep .gbt-button:not(:disabled):hover{border-color:var(--color-error-text);color:var(--color-error-text)}.gbt-mfa-settings__codes-left{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .375rem;margin:0;color:var(--text-primary);font-size:.8125rem;font-weight:500;line-height:1.25rem}.gbt-mfa-settings__codes-left gbt-icon{align-self:center;flex:none;font-size:.75rem}.gbt-mfa-settings__codes-left[data-tone=warning]{color:var(--color-warning-text)}.gbt-mfa-settings__prompt{display:flex;flex-direction:column;gap:1.25rem;margin:0;gap:1rem;padding:1rem 1.125rem 1.125rem;border:1px solid var(--gbt-card-border);border-radius:var(--site-border-radius-sm);background:var(--bg-panel)}.gbt-mfa-settings__prompt-lead{margin:0;color:var(--text-secondary);font-size:.8125rem;line-height:1.25rem}.gbt-mfa-settings__field{display:flex;flex-direction:column;gap:.375rem;min-width:0;max-width:24rem}.gbt-mfa-settings__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}.gbt-mfa-settings__stack{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.gbt-mfa-settings__anchor:focus,.gbt-mfa-settings__lead:focus{outline:none}.gbt-mfa-settings__lead{max-width:40rem;margin:0;color:var(--text-secondary);font-size:.875rem;line-height:1.5}.gbt-mfa-settings__codes{max-width:34rem}.gbt-mfa-settings__scan{display:flex;flex-direction:column;gap:1.25rem;margin:0}.gbt-mfa-settings__scan-grid{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);align-items:start;gap:1.5rem 2rem}.gbt-mfa-settings__qr ::ng-deep .gbt-totp-qr__frame{margin-inline:0}.gbt-mfa-settings__scan-side{display:flex;flex-direction:column;gap:1.25rem;min-width:0;max-width:26rem}.gbt-mfa-settings__loading{display:flex;flex-direction:column;gap:1.5rem}.gbt-mfa-settings__skeleton-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}.gbt-mfa-settings__skeleton-lines{display:flex;flex-direction:column;gap:.5rem;min-width:0}@container gbt-settings-card (max-width: 519px){.gbt-mfa-settings__scan-grid{grid-template-columns:minmax(0,1fr)}.gbt-mfa-settings__qr ::ng-deep .gbt-totp-qr__frame{margin-inline:auto}.gbt-mfa-settings__scan-side,.gbt-mfa-settings__field{max-width:none}.gbt-mfa-settings__prompt{padding:.875rem}.gbt-mfa-settings__row-action,.gbt-mfa-settings__actions gbt-button{display:block;flex:1 1 100%;width:auto}.gbt-mfa-settings__row-action ::ng-deep .gbt-button,.gbt-mfa-settings__actions gbt-button ::ng-deep .gbt-button{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: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				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: 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: Icon,
+				selector: "gbt-icon",
+				inputs: ["name"]
+			},
+			{
+				kind: "component",
+				type: Skeleton,
+				selector: "gbt-skeleton",
+				inputs: [
+					"variant",
+					"width",
+					"height"
+				]
+			},
+			{
+				kind: "component",
+				type: Alert,
+				selector: "gbt-alert",
+				inputs: [
+					"variant",
+					"dismissible",
+					"closeLabel",
+					"live",
+					"heading",
+					"size",
+					"appearance",
+					"iconAlign"
+				],
+				outputs: ["dismissed"]
+			},
+			{
+				kind: "component",
+				type: BackupCodes,
+				selector: "gbt-backup-codes",
+				inputs: [
+					"codes",
+					"acknowledged",
+					"labels"
+				],
+				outputs: ["acknowledgedChange"]
+			},
+			{
+				kind: "component",
+				type: TotpQr,
+				selector: "gbt-totp-qr",
+				inputs: [
+					"otpauthUrl",
+					"secret",
+					"labels"
+				]
+			},
+			{
+				kind: "component",
+				type: ConfirmDangerModal,
+				selector: "gbt-confirm-danger-modal",
+				inputs: [
+					"isOpen",
+					"heading",
+					"message",
+					"confirmText",
+					"confirmInputLabel",
+					"confirmLabel",
+					"cancelLabel",
+					"closeLabel",
+					"busy",
+					"busyLabel",
+					"confirmIcon",
+					"tone"
+				],
+				outputs: ["confirmed", "closed"]
+			},
+			{
+				kind: "component",
+				type: Card,
+				selector: "gbt-card",
+				inputs: [
+					"hoverable",
+					"heading",
+					"icon",
+					"headingLevel",
+					"variant",
+					"description",
+					"count",
+					"flush",
+					"tone",
+					"selected",
+					"selectedLabel",
+					"href",
+					"linkLabel"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: MfaSettings,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-mfa-settings",
+			standalone: true,
+			imports: [
+				FormsModule,
+				NgTemplateOutlet,
+				Badge,
+				Button,
+				GbtInput,
+				Icon,
+				Skeleton,
+				Alert,
+				BackupCodes,
+				TotpQr,
+				ConfirmDangerModal,
+				Card
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<gbt-card\n  variant=\"outlined\"\n  [icon]=\"view() === 'ready' && !hasFactor() ? 'shield-alert' : 'shield-check'\"\n  [heading]=\"heading()\"\n  [description]=\"help()\"\n>\n  @switch (view()) {\n    @case ('loading') {\n      <span class=\"sr-only\" role=\"status\">{{ text().loading }}</span>\n      <div class=\"gbt-mfa-settings__loading\" aria-busy=\"true\">\n        <div class=\"gbt-mfa-settings__skeleton-row\" aria-hidden=\"true\">\n          <div class=\"gbt-mfa-settings__skeleton-lines\">\n            <gbt-skeleton width=\"9rem\" height=\"0.875rem\" />\n            <gbt-skeleton width=\"min(20rem, 100%)\" height=\"0.75rem\" />\n          </div>\n          <gbt-skeleton width=\"4.5rem\" height=\"1.375rem\" variant=\"rect\" />\n        </div>\n        <div class=\"gbt-mfa-settings__skeleton-row\" aria-hidden=\"true\">\n          <div class=\"gbt-mfa-settings__skeleton-lines\">\n            <gbt-skeleton width=\"7rem\" height=\"0.875rem\" />\n            <gbt-skeleton width=\"min(16rem, 100%)\" height=\"0.75rem\" />\n          </div>\n          <gbt-skeleton width=\"11rem\" height=\"2.25rem\" variant=\"rect\" />\n        </div>\n      </div>\n    }\n\n    @case ('failed') {\n      <gbt-alert variant=\"error\" appearance=\"subtle\">\n        {{ text().loadFailed }}\n        <gbt-button\n          alert-actions\n          variant=\"secondary\"\n          size=\"small\"\n          [text]=\"text().retry\"\n          (clicked)=\"load()\"\n        />\n      </gbt-alert>\n    }\n\n    @case ('revoked') {\n      <div class=\"gbt-mfa-settings__anchor\" data-mfa-anchor tabindex=\"-1\">\n        <gbt-alert variant=\"info\" appearance=\"subtle\" iconAlign=\"start\" live=\"off\">{{\n          text().signedOut\n        }}</gbt-alert>\n      </div>\n    }\n\n    @case ('enrolling') {\n      <form ngNoForm class=\"gbt-mfa-settings__scan\" (submit)=\"$event.preventDefault(); activate()\">\n        <p class=\"gbt-mfa-settings__lead\" data-mfa-anchor tabindex=\"-1\">{{ text().scanLead }}</p>\n\n        <div class=\"gbt-mfa-settings__scan-grid\">\n          <gbt-totp-qr\n            class=\"gbt-mfa-settings__qr\"\n            [otpauthUrl]=\"otpauthUrl()\"\n            [secret]=\"secret()\"\n          />\n\n          <div class=\"gbt-mfa-settings__scan-side\">\n            @if (notice()) {\n              <gbt-alert variant=\"error\" appearance=\"subtle\" iconAlign=\"start\">{{\n                notice()\n              }}</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              [errorMessage]=\"codeError()\"\n              [ngModel]=\"code()\"\n              (ngModelChange)=\"setCode($event)\"\n            />\n\n            <div class=\"gbt-mfa-settings__actions\">\n              <gbt-button\n                type=\"submit\"\n                [text]=\"text().activate\"\n                [loading]=\"busy()\"\n                [loadingLabel]=\"text().verifying\"\n              />\n              <gbt-button\n                variant=\"secondary\"\n                [text]=\"text().cancel\"\n                [disabled]=\"busy()\"\n                (clicked)=\"cancelEnrollment()\"\n              />\n            </div>\n          </div>\n        </div>\n      </form>\n    }\n\n    @case ('codes') {\n      <div class=\"gbt-mfa-settings__stack\">\n        <p class=\"gbt-mfa-settings__lead\" data-mfa-anchor tabindex=\"-1\">\n          {{\n            codesOrigin() === 'enrolled' ? text().codesLeadEnrolled : text().codesLeadRegenerated\n          }}\n        </p>\n        @if (!acknowledged()) {\n          <gbt-alert variant=\"warning\" appearance=\"subtle\" iconAlign=\"start\" live=\"off\">{{\n            text().dontLeave\n          }}</gbt-alert>\n        }\n        <div class=\"gbt-mfa-settings__codes\">\n          <gbt-backup-codes [codes]=\"backupCodes()\" [(acknowledged)]=\"acknowledged\" />\n        </div>\n        <div class=\"gbt-mfa-settings__actions\">\n          <gbt-button [text]=\"text().done\" [disabled]=\"!acknowledged()\" (clicked)=\"finishCodes()\" />\n        </div>\n      </div>\n    }\n\n    @default {\n      @if (hasFactor()) {\n        <div class=\"gbt-mfa-settings__rows\">\n          <div class=\"gbt-mfa-settings__row\">\n            <div class=\"gbt-mfa-settings__row-head\" data-mfa-anchor tabindex=\"-1\">\n              @if (status().totpEnabled) {\n                <div class=\"gbt-mfa-settings__row-text\">\n                  <div class=\"gbt-mfa-settings__title-line\">\n                    <p class=\"gbt-mfa-settings__row-title\">{{ text().appConfigured }}</p>\n                    <gbt-badge\n                      class=\"gbt-mfa-settings__badge\"\n                      variant=\"success\"\n                      icon=\"check-circle\"\n                      >{{ text().enabled }}</gbt-badge\n                    >\n                  </div>\n                  <p class=\"gbt-mfa-settings__row-help\">\n                    {{ hasPasskey() ? text().appHelpWithPasskey : text().appHelp }}\n                  </p>\n                </div>\n              } @else {\n                <div class=\"gbt-mfa-settings__row-text\">\n                  <div class=\"gbt-mfa-settings__title-line\">\n                    <p class=\"gbt-mfa-settings__row-title\">{{ text().noApp }}</p>\n                    <gbt-badge class=\"gbt-mfa-settings__badge\" variant=\"neutral\">{{\n                      text().optional\n                    }}</gbt-badge>\n                  </div>\n                  <p class=\"gbt-mfa-settings__row-help\">{{ text().noAppHelp }}</p>\n                </div>\n                @if (prompt() !== 'enroll') {\n                  <gbt-button\n                    class=\"gbt-mfa-settings__row-action\"\n                    data-opener=\"enroll\"\n                    variant=\"secondary\"\n                    iconName=\"plus\"\n                    [text]=\"text().addApp\"\n                    (clicked)=\"openPrompt('enroll')\"\n                  />\n                }\n              }\n            </div>\n            @if (!status().totpEnabled && prompt() === 'enroll') {\n              <ng-container [ngTemplateOutlet]=\"passwordPrompt\" />\n            }\n          </div>\n\n          <div class=\"gbt-mfa-settings__row\">\n            <div class=\"gbt-mfa-settings__row-head\">\n              <div class=\"gbt-mfa-settings__row-text\">\n                <p class=\"gbt-mfa-settings__row-title\">{{ text().backupCodesTitle }}</p>\n                <p\n                  class=\"gbt-mfa-settings__codes-left\"\n                  [attr.data-tone]=\"lowCodes() ? 'warning' : null\"\n                >\n                  @if (lowCodes()) {\n                    <gbt-icon name=\"alert-triangle\" aria-hidden=\"true\" />\n                  }\n                  <span>{{ codesLeft() }}.</span>\n                  @if (lowCodes()) {\n                    <span>{{ text().lowCodes }}</span>\n                  }\n                </p>\n                <p class=\"gbt-mfa-settings__row-help\">{{ text().backupCodesHelp }}</p>\n              </div>\n              @if (prompt() !== 'regenerate') {\n                <gbt-button\n                  class=\"gbt-mfa-settings__row-action\"\n                  data-opener=\"regenerate\"\n                  variant=\"secondary\"\n                  iconName=\"refresh-cw\"\n                  [text]=\"text().regenerateCodes\"\n                  (clicked)=\"openPrompt('regenerate')\"\n                />\n              }\n            </div>\n            @if (prompt() === 'regenerate') {\n              <ng-container [ngTemplateOutlet]=\"passwordPrompt\" />\n            }\n          </div>\n\n          @if (status().totpEnabled) {\n            <div class=\"gbt-mfa-settings__row\">\n              <div class=\"gbt-mfa-settings__row-head\">\n                <div class=\"gbt-mfa-settings__row-text\">\n                  <p class=\"gbt-mfa-settings__row-title\">{{ removal().title }}</p>\n                  <p class=\"gbt-mfa-settings__row-help\">{{ removal().help }}</p>\n                </div>\n                @if (prompt() !== 'disable') {\n                  <gbt-button\n                    class=\"gbt-mfa-settings__row-action gbt-mfa-settings__row-action--remove\"\n                    data-opener=\"disable\"\n                    variant=\"secondary\"\n                    [text]=\"removal().action\"\n                    (clicked)=\"openPrompt('disable')\"\n                  />\n                }\n              </div>\n              @if (prompt() === 'disable') {\n                <ng-container [ngTemplateOutlet]=\"passwordPrompt\" />\n              }\n            </div>\n          }\n        </div>\n      } @else {\n        <div class=\"gbt-mfa-settings__stack\">\n          <div class=\"gbt-mfa-settings__anchor\" data-mfa-anchor tabindex=\"-1\">\n            <gbt-alert variant=\"warning\" appearance=\"subtle\" iconAlign=\"start\" live=\"off\">{{\n              text().noFactorWarning\n            }}</gbt-alert>\n          </div>\n          @if (prompt() === 'enroll') {\n            <ng-container [ngTemplateOutlet]=\"passwordPrompt\" />\n          } @else {\n            <div class=\"gbt-mfa-settings__actions\">\n              <gbt-button\n                data-opener=\"enroll\"\n                iconName=\"shield-check\"\n                [text]=\"text().setUpNow\"\n                (clicked)=\"openPrompt('enroll')\"\n              />\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n</gbt-card>\n\n@if (confirmingDisable()) {\n  <gbt-confirm-danger-modal\n    [isOpen]=\"true\"\n    [heading]=\"removal().dialogHeading\"\n    [message]=\"removal().dialogMessage\"\n    [confirmLabel]=\"removal().action\"\n    confirmIcon=\"trash-2\"\n    [cancelLabel]=\"text().cancel\"\n    [closeLabel]=\"text().close\"\n    [busyLabel]=\"removal().busy\"\n    [busy]=\"busy()\"\n    (confirmed)=\"disable()\"\n    (closed)=\"closeDisableDialog()\"\n  />\n}\n\n<ng-template #passwordPrompt>\n  <form\n    ngNoForm\n    class=\"gbt-mfa-settings__prompt\"\n    (submit)=\"$event.preventDefault(); submitPrompt()\"\n  >\n    <p class=\"gbt-mfa-settings__prompt-lead\">{{ promptCopy().lead }}</p>\n\n    @if (notice()) {\n      <gbt-alert variant=\"error\" appearance=\"subtle\" iconAlign=\"start\">{{ notice() }}</gbt-alert>\n    }\n\n    <div class=\"gbt-mfa-settings__field\">\n      <gbt-input\n        [id]=\"id + '-password'\"\n        name=\"currentPassword\"\n        type=\"password\"\n        autocomplete=\"current-password\"\n        [label]=\"text().currentPassword\"\n        [showPasswordLabel]=\"text().showPassword\"\n        [hidePasswordLabel]=\"text().hidePassword\"\n        [errorMessage]=\"passwordError()\"\n        [ngModel]=\"password()\"\n        (ngModelChange)=\"setPassword($event)\"\n      />\n    </div>\n\n    <div class=\"gbt-mfa-settings__actions\">\n      <gbt-button\n        type=\"submit\"\n        [variant]=\"promptCopy().variant\"\n        [text]=\"promptCopy().submit\"\n        [loading]=\"busy()\"\n        [loadingLabel]=\"promptCopy().busy\"\n      />\n      <gbt-button\n        variant=\"secondary\"\n        [text]=\"text().cancel\"\n        [disabled]=\"busy()\"\n        (clicked)=\"cancelPrompt()\"\n      />\n    </div>\n  </form>\n</ng-template>\n",
+			styles: [":host{display:block;min-width:0}:host gbt-card{min-width:0;container:gbt-settings-card/inline-size}:host gbt-card ::ng-deep .gbt-card{color:inherit;font-size:inherit;line-height:inherit}:host gbt-card ::ng-deep .gbt-card__count{background:color-mix(in srgb,var(--border-color) 22%,transparent)}.gbt-mfa-settings__rows{display:flex;flex-direction:column}.gbt-mfa-settings__row{display:flex;flex-direction:column;gap:1rem;padding-block:1.25rem}.gbt-mfa-settings__row:first-child{padding-top:0}.gbt-mfa-settings__row:last-child{padding-bottom:0}.gbt-mfa-settings__row+.gbt-mfa-settings__row{border-top:1px solid var(--gbt-hairline)}.gbt-mfa-settings__row-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.75rem 1.5rem}.gbt-mfa-settings__row-head:focus{outline:none}.gbt-mfa-settings__row-text{display:flex;flex:1 1 18rem;flex-direction:column;gap:.125rem;min-width:0}.gbt-mfa-settings__row-title{margin:0;color:var(--text-primary);font-size:.875rem;font-weight:600;line-height:1.5rem}.gbt-mfa-settings__row-help{margin:0;color:var(--text-secondary);font-size:.8125rem;line-height:1.25rem}.gbt-mfa-settings__title-line{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .625rem}.gbt-mfa-settings__badge,.gbt-mfa-settings__row-action{flex:none}.gbt-mfa-settings__row-action--remove ::ng-deep .gbt-button:not(:disabled):hover{border-color:var(--color-error-text);color:var(--color-error-text)}.gbt-mfa-settings__codes-left{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .375rem;margin:0;color:var(--text-primary);font-size:.8125rem;font-weight:500;line-height:1.25rem}.gbt-mfa-settings__codes-left gbt-icon{align-self:center;flex:none;font-size:.75rem}.gbt-mfa-settings__codes-left[data-tone=warning]{color:var(--color-warning-text)}.gbt-mfa-settings__prompt{display:flex;flex-direction:column;gap:1.25rem;margin:0;gap:1rem;padding:1rem 1.125rem 1.125rem;border:1px solid var(--gbt-card-border);border-radius:var(--site-border-radius-sm);background:var(--bg-panel)}.gbt-mfa-settings__prompt-lead{margin:0;color:var(--text-secondary);font-size:.8125rem;line-height:1.25rem}.gbt-mfa-settings__field{display:flex;flex-direction:column;gap:.375rem;min-width:0;max-width:24rem}.gbt-mfa-settings__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}.gbt-mfa-settings__stack{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.gbt-mfa-settings__anchor:focus,.gbt-mfa-settings__lead:focus{outline:none}.gbt-mfa-settings__lead{max-width:40rem;margin:0;color:var(--text-secondary);font-size:.875rem;line-height:1.5}.gbt-mfa-settings__codes{max-width:34rem}.gbt-mfa-settings__scan{display:flex;flex-direction:column;gap:1.25rem;margin:0}.gbt-mfa-settings__scan-grid{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);align-items:start;gap:1.5rem 2rem}.gbt-mfa-settings__qr ::ng-deep .gbt-totp-qr__frame{margin-inline:0}.gbt-mfa-settings__scan-side{display:flex;flex-direction:column;gap:1.25rem;min-width:0;max-width:26rem}.gbt-mfa-settings__loading{display:flex;flex-direction:column;gap:1.5rem}.gbt-mfa-settings__skeleton-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}.gbt-mfa-settings__skeleton-lines{display:flex;flex-direction:column;gap:.5rem;min-width:0}@container gbt-settings-card (max-width: 519px){.gbt-mfa-settings__scan-grid{grid-template-columns:minmax(0,1fr)}.gbt-mfa-settings__qr ::ng-deep .gbt-totp-qr__frame{margin-inline:auto}.gbt-mfa-settings__scan-side,.gbt-mfa-settings__field{max-width:none}.gbt-mfa-settings__prompt{padding:.875rem}.gbt-mfa-settings__row-action,.gbt-mfa-settings__actions gbt-button{display:block;flex:1 1 100%;width:auto}.gbt-mfa-settings__row-action ::ng-deep .gbt-button,.gbt-mfa-settings__actions gbt-button ::ng-deep .gbt-button{width:100%;min-height:2.75rem}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		labels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labels",
+				required: false
+			}]
+		}],
+		lowCodesThreshold: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "lowCodesThreshold",
+				required: false
+			}]
+		}],
+		sessionRevoked: [{
+			type: i0.Output,
+			args: ["sessionRevoked"]
+		}]
+	}
+});
+export { MfaSettings };
+
+//# sourceMappingURL=masmarino-gabarit-mfa-settings.mjs.map