@masmarino/gabarit 2.0.0 → 2.1.1

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

@@ -0,0 +1,606 @@
+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 { EMPTY, catchError, forkJoin, from, of, switchMap } from "rxjs";
+import { Button } from "@masmarino/gabarit/button";
+import { IconMarker } from "@masmarino/gabarit/icon-marker";
+import { GbtInput } from "@masmarino/gabarit/input";
+import { SaveStatus } from "@masmarino/gabarit/save-status";
+import { Alert } from "@masmarino/gabarit/alert";
+import { Card } from "@masmarino/gabarit/card";
+import { EmptyState } from "@masmarino/gabarit/empty-state";
+import { SkeletonList } from "@masmarino/gabarit/skeleton-list";
+import { ConfirmDangerModal } from "@masmarino/gabarit/confirm-danger-modal";
+import { GbtDateTimePipe, GbtRelativeTimePipe } from "@masmarino/gabarit/format";
+import { AUTH_PORT, DEFAULT_PASSKEY_SETTINGS_LABELS, MFA_PORT, MfaSettingsState, PASSKEY_NAME_MAX, authLabels, classifyMfaFailure, classifyPasskeyError, classifyPasswordFailure, createPasskeyCredential, focusAfterRender, isAuthPortError, isTooManyPasskeys, passkeyNameProblem, passkeysSupported } from "@masmarino/gabarit/auth";
+let nextId = 0;
+const ABSOLUTE_AFTER_DAYS = 30;
+const DAY = 864e5;
+var PasskeySettings = class PasskeySettings {
+	mfa = inject(MFA_PORT);
+	auth = inject(AUTH_PORT, { optional: true });
+	state = inject(MfaSettingsState);
+	host = inject(ElementRef);
+	injector = inject(Injector);
+	labels = input({}, ...ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []);
+	locale = input(null, ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	sessionRevoked = output();
+	text = authLabels("passkeySettings", DEFAULT_PASSKEY_SETTINGS_LABELS, this.labels);
+	id = `gbt-passkey-settings-${nextId++}`;
+	relativeOptions = computed(() => ({
+		style: "short",
+		maxUnit: "day",
+		absoluteAfterDays: ABSOLUTE_AFTER_DAYS,
+		locale: this.locale() ?? void 0
+	}), ...ngDevMode ? [{ debugName: "relativeOptions" }] : /* istanbul ignore next */ []);
+	dateOptions = computed(() => ({
+		day: "2-digit",
+		month: "2-digit",
+		year: "numeric",
+		hour: "2-digit",
+		minute: "2-digit",
+		locale: this.locale() ?? void 0
+	}), ...ngDevMode ? [{ debugName: "dateOptions" }] : /* istanbul ignore next */ []);
+	absolute = (iso) => Math.abs(Date.now() - Date.parse(iso)) >= ABSOLUTE_AFTER_DAYS * DAY;
+	view = signal("loading", ...ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []);
+	passkeys = signal([], ...ngDevMode ? [{ debugName: "passkeys" }] : /* istanbul ignore next */ []);
+	totpEnabled = signal(false, ...ngDevMode ? [{ debugName: "totpEnabled" }] : /* istanbul ignore next */ []);
+	serverAvailable = signal(null, ...ngDevMode ? [{ debugName: "serverAvailable" }] : /* istanbul ignore next */ []);
+	browserSupported = passkeysSupported();
+	blockedReason = computed(() => {
+		if (!this.browserSupported) return this.text().browserBlocked;
+		return this.serverAvailable() === false ? this.text().serverBlocked : null;
+	}, ...ngDevMode ? [{ debugName: "blockedReason" }] : /* istanbul ignore next */ []);
+	result = signal(null, ...ngDevMode ? [{ debugName: "result" }] : /* istanbul ignore next */ []);
+	adding = signal(false, ...ngDevMode ? [{ debugName: "adding" }] : /* istanbul ignore next */ []);
+	name = signal("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	nameError = signal(null, ...ngDevMode ? [{ debugName: "nameError" }] : /* 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 */ []);
+	noticeVariant = signal("error", ...ngDevMode ? [{ debugName: "noticeVariant" }] : /* istanbul ignore next */ []);
+	busy = signal(false, ...ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []);
+	promptOpen = signal(false, ...ngDevMode ? [{ debugName: "promptOpen" }] : /* istanbul ignore next */ []);
+	ceremony = 0;
+	deleting = signal(null, ...ngDevMode ? [{ debugName: "deleting" }] : /* istanbul ignore next */ []);
+	deletePassword = signal("", ...ngDevMode ? [{ debugName: "deletePassword" }] : /* istanbul ignore next */ []);
+	deletePasswordError = signal(null, ...ngDevMode ? [{ debugName: "deletePasswordError" }] : /* istanbul ignore next */ []);
+	deleteNotice = signal("", ...ngDevMode ? [{ debugName: "deleteNotice" }] : /* istanbul ignore next */ []);
+	confirmingDelete = signal(false, ...ngDevMode ? [{ debugName: "confirmingDelete" }] : /* istanbul ignore next */ []);
+	deleteBusy = signal(false, ...ngDevMode ? [{ debugName: "deleteBusy" }] : /* istanbul ignore next */ []);
+	count = computed(() => this.view() === "ready" && this.passkeys().length > 0 ? this.passkeys().length : null, ...ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []);
+	appBusy = this.state.appFlowActive;
+	lastFactor = computed(() => this.passkeys().length === 1 && !(this.state.totpEnabled() ?? this.totpEnabled()), ...ngDevMode ? [{ debugName: "lastFactor" }] : /* istanbul ignore next */ []);
+	deleteMessage = computed(() => this.text().deleteDialogMessage(this.deleting()?.name ?? "", this.lastFactor()), ...ngDevMode ? [{ debugName: "deleteMessage" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.load();
+		effect(() => {
+			if (this.state.formOwner() === "app") untracked(() => {
+				this.cancelAddQuietly();
+				this.closeDelete();
+			});
+		});
+		inject(DestroyRef).onDestroy(() => {
+			this.ceremony++;
+			this.password.set("");
+			this.deletePassword.set("");
+		});
+	}
+	load() {
+		this.view.set("loading");
+		const config = this.auth ? this.auth.authConfig().pipe(catchError(() => of(null))) : of(null);
+		forkJoin([this.mfa.status(), config]).subscribe({
+			next: ([status, config]) => {
+				this.state.statusLoaded(status);
+				this.passkeys.set(status.passkeys);
+				this.totpEnabled.set(status.totpEnabled);
+				this.serverAvailable.set(config ? config.passkeysAvailable === true : null);
+				this.view.set("ready");
+			},
+			error: () => this.view.set("failed")
+		});
+	}
+	openAdd() {
+		if (this.blockedReason() || this.appBusy()) return;
+		this.state.claimForm("passkeys");
+		this.closeDelete();
+		this.resetAdd();
+		this.result.set(null);
+		this.adding.set(true);
+		this.focus(`#${this.id}-name`);
+	}
+	cancelAdd() {
+		this.resetAdd();
+		this.adding.set(false);
+		this.focus("[data-opener=\"add\"] button");
+	}
+	setName(value) {
+		this.name.set(value);
+		this.nameError.set(null);
+		this.clearNotice();
+	}
+	setPassword(value) {
+		this.password.set(value);
+		this.passwordError.set(null);
+		this.clearNotice();
+	}
+	submitAdd() {
+		if (this.busy()) return;
+		const text = this.text();
+		const name = this.name().trim() || text.defaultPasskeyName;
+		const nameProblem = passkeyNameProblem(name);
+		if (nameProblem) {
+			this.nameError.set(nameProblem === "too-long" ? text.nameTooLong(PASSKEY_NAME_MAX) : text.nameControlCharacters);
+			this.focus(`#${this.id}-name`);
+			return;
+		}
+		if (this.password() === "") {
+			this.passwordError.set(text.enterPassword);
+			this.focus(`#${this.id}-password`);
+			return;
+		}
+		this.clearNotice();
+		this.busy.set(true);
+		const attempt = ++this.ceremony;
+		this.mfa.startPasskeyRegistration(this.password()).pipe(switchMap((challenge) => {
+			if (attempt !== this.ceremony) return EMPTY;
+			this.promptOpen.set(true);
+			return from(createPasskeyCredential(challenge.publicKey)).pipe(switchMap((credential) => attempt === this.ceremony ? this.mfa.finishPasskeyRegistration(challenge.challengeId, credential, name) : EMPTY));
+		})).subscribe({
+			next: (passkey) => {
+				this.state.passkeyAdded();
+				if (attempt !== this.ceremony) return;
+				this.busy.set(false);
+				this.promptOpen.set(false);
+				this.resetAdd();
+				this.adding.set(false);
+				this.passkeys.update((list) => [...list, passkey]);
+				this.result.set(this.text().passkeyAdded(passkey.name));
+				this.focus(`[data-passkey-id="${CSS.escape(passkey.id)}"]`);
+			},
+			error: (err) => {
+				if (attempt === this.ceremony) this.addFailed(err);
+			}
+		});
+	}
+	addFailed(err) {
+		const text = this.text();
+		this.busy.set(false);
+		this.promptOpen.set(false);
+		if (isAuthPortError(err)) {
+			if (isTooManyPasskeys(err)) return this.fail(text.tooManyPasskeys);
+			if (err.status === 409) return this.fail(text.alreadyRegistered);
+			if (classifyMfaFailure(err) === "unavailable") return this.fail(text.passkeysUnavailable);
+			switch (classifyPasswordFailure(err)) {
+				case "wrong-password":
+					this.passwordError.set(text.wrongPassword);
+					this.focus(`#${this.id}-password`);
+					return;
+				case "rate-limited": return this.fail(text.tooManyAttempts);
+				default: return this.fail(text.addFailed);
+			}
+		}
+		switch (classifyPasskeyError(err)) {
+			case "cancelled": return this.fail(text.cancelled, "info");
+			case "already-registered": return this.fail(text.alreadyRegistered);
+			case "unsupported": return this.fail(text.browserUnsupported);
+			default: return this.fail(text.addFailed);
+		}
+	}
+	fail(message, variant = "error") {
+		this.noticeVariant.set(variant);
+		this.notice.set(message);
+		this.focus(".gbt-passkey-settings__submit button");
+	}
+	clearNotice() {
+		this.notice.set("");
+		this.noticeVariant.set("error");
+	}
+	resetAdd() {
+		this.ceremony++;
+		this.name.set("");
+		this.nameError.set(null);
+		this.password.set("");
+		this.passwordError.set(null);
+		this.clearNotice();
+		this.busy.set(false);
+		this.promptOpen.set(false);
+	}
+	openDelete(passkey) {
+		this.state.claimForm("passkeys");
+		if (this.adding()) this.cancelAddQuietly();
+		this.resetDelete();
+		this.result.set(null);
+		this.deleting.set(passkey);
+		this.focus(`#${this.id}-delete-password`);
+	}
+	cancelDelete() {
+		const target = this.deleting();
+		this.closeDelete();
+		if (target) this.focus(`[data-passkey-id="${CSS.escape(target.id)}"] [data-opener="delete"] button`);
+	}
+	setDeletePassword(value) {
+		this.deletePassword.set(value);
+		this.deletePasswordError.set(null);
+		this.deleteNotice.set("");
+	}
+	submitDelete() {
+		if (this.deleteBusy() || !this.deleting()) return;
+		if (this.deletePassword() === "") {
+			this.deletePasswordError.set(this.text().enterPassword);
+			this.focus(`#${this.id}-delete-password`);
+			return;
+		}
+		this.deletePasswordError.set(null);
+		this.deleteNotice.set("");
+		this.confirmingDelete.set(true);
+	}
+	closeDeleteDialog() {
+		if (!this.deleteBusy()) {
+			this.confirmingDelete.set(false);
+			this.focus(`#${this.id}-delete-password`);
+		}
+	}
+	delete() {
+		const target = this.deleting();
+		if (this.deleteBusy() || !target) return;
+		this.deleteBusy.set(true);
+		this.mfa.deletePasskey(target.id, this.deletePassword()).subscribe({
+			next: () => {
+				this.state.passkeyGone();
+				this.deleteBusy.set(false);
+				this.confirmingDelete.set(false);
+				this.closeDelete();
+				this.passkeys.update((list) => list.filter((passkey) => passkey.id !== target.id));
+				this.result.set(null);
+				this.view.set("revoked");
+				this.focus("[data-passkeys-anchor]");
+				this.sessionRevoked.emit();
+			},
+			error: (err) => this.deleteFailed(err, target)
+		});
+	}
+	deleteFailed(err, target) {
+		this.deleteBusy.set(false);
+		this.confirmingDelete.set(false);
+		if (isAuthPortError(err) && err.status === 404) {
+			this.closeDelete();
+			this.passkeys.update((list) => list.filter((passkey) => passkey.id !== target.id));
+			this.state.passkeyGone();
+			this.result.set(this.text().passkeyGone(target.name));
+			this.focus("[data-passkeys-anchor]");
+			return;
+		}
+		switch (classifyPasswordFailure(err)) {
+			case "wrong-password":
+				this.deletePasswordError.set(this.text().wrongPassword);
+				break;
+			case "rate-limited":
+				this.deleteNotice.set(this.text().tooManyAttempts);
+				break;
+			default: this.deleteNotice.set(this.text().deleteFailed);
+		}
+		this.focus(`#${this.id}-delete-password`);
+	}
+	closeDelete() {
+		this.resetDelete();
+		this.deleting.set(null);
+	}
+	resetDelete() {
+		this.deletePassword.set("");
+		this.deletePasswordError.set(null);
+		this.deleteNotice.set("");
+		this.confirmingDelete.set(false);
+	}
+	cancelAddQuietly() {
+		this.resetAdd();
+		this.adding.set(false);
+	}
+	focus(selector) {
+		focusAfterRender(this.host, this.injector, selector);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: PasskeySettings,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: PasskeySettings,
+		isStandalone: true,
+		selector: "gbt-passkey-settings",
+		inputs: {
+			labels: {
+				classPropertyName: "labels",
+				publicName: "labels",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { sessionRevoked: "sessionRevoked" },
+		ngImport: i0,
+		template: "<gbt-card\n  variant=\"outlined\"\n  icon=\"key\"\n  [heading]=\"text().heading\"\n  [description]=\"text().description\"\n  [count]=\"count()\"\n>\n  @switch (view()) {\n    @case ('loading') {\n      <gbt-skeleton-list\n        [rows]=\"2\"\n        leading=\"square\"\n        leadingSize=\"2rem\"\n        [padded]=\"false\"\n        [loadingLabel]=\"text().loading\"\n      />\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-passkey-settings__anchor\" data-passkeys-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    @default {\n      <div class=\"gbt-passkey-settings__stack\">\n        @if (blockedReason(); as reason) {\n          <gbt-alert variant=\"info\" appearance=\"subtle\" iconAlign=\"start\" live=\"off\">{{\n            reason\n          }}</gbt-alert>\n        }\n\n        <div class=\"gbt-passkey-settings__anchor\" data-passkeys-anchor tabindex=\"-1\">\n          @if (passkeys().length === 0) {\n            <gbt-empty-state\n              size=\"compact\"\n              icon=\"key\"\n              [heading]=\"text().emptyHeading\"\n              [message]=\"text().emptyMessage\"\n            />\n          } @else {\n            <ul class=\"gbt-passkey-settings__rows\" [attr.aria-label]=\"text().listLabel\">\n              @for (passkey of passkeys(); track passkey.id) {\n                <li\n                  class=\"gbt-passkey-settings__row\"\n                  [attr.data-passkey-id]=\"passkey.id\"\n                  tabindex=\"-1\"\n                >\n                  <div class=\"gbt-passkey-settings__row-head\">\n                    <gbt-icon-marker shape=\"tile\" icon=\"key\" />\n                    <div class=\"gbt-passkey-settings__row-text\">\n                      <p class=\"gbt-passkey-settings__name\" [title]=\"passkey.name\">\n                        {{ passkey.name }}\n                      </p>\n                      <p class=\"gbt-passkey-settings__meta\">\n                        <span\n                          >{{ text().added(absolute(passkey.createdAt)) }}\n                          <time\n                            [attr.datetime]=\"passkey.createdAt\"\n                            [title]=\"passkey.createdAt | gbtDateTime: dateOptions()\"\n                            >{{ passkey.createdAt | gbtRelativeTime: relativeOptions() }}</time\n                          ></span\n                        >\n                        <span\n                          class=\"gbt-passkey-settings__last-used\"\n                          [class.gbt-passkey-settings__last-used--never]=\"!passkey.lastUsedAt\"\n                        >\n                          @if (passkey.lastUsedAt; as lastUsed) {\n                            {{ text().lastUsed(absolute(lastUsed)) }}\n                            <time\n                              [attr.datetime]=\"lastUsed\"\n                              [title]=\"lastUsed | gbtDateTime: dateOptions()\"\n                              >{{ lastUsed | gbtRelativeTime: relativeOptions() }}</time\n                            >\n                          } @else {\n                            {{ text().neverUsed }}\n                          }\n                        </span>\n                      </p>\n                    </div>\n                    @if (deleting()?.id !== passkey.id) {\n                      <gbt-button\n                        class=\"gbt-passkey-settings__row-action\"\n                        data-opener=\"delete\"\n                        variant=\"secondary\"\n                        size=\"small\"\n                        iconName=\"trash-2\"\n                        [text]=\"text().delete\"\n                        [ariaLabel]=\"text().deleteKey(passkey.name)\"\n                        (clicked)=\"openDelete(passkey)\"\n                      />\n                    }\n                  </div>\n                  @if (deleting()?.id === passkey.id) {\n                    <ng-container [ngTemplateOutlet]=\"deletePrompt\" />\n                  }\n                </li>\n              }\n            </ul>\n          }\n        </div>\n\n        <gbt-save-status\n          class=\"gbt-passkey-settings__result\"\n          [class.sr-only]=\"!result()\"\n          [state]=\"result() ? 'saved' : 'idle'\"\n          [message]=\"result()\"\n        />\n\n        @if (adding()) {\n          <ng-container [ngTemplateOutlet]=\"addForm\" />\n        } @else {\n          <div\n            class=\"gbt-passkey-settings__actions\"\n            [class.gbt-passkey-settings__actions--divided]=\"passkeys().length > 0\"\n            [class.gbt-passkey-settings__actions--centered]=\"passkeys().length === 0\"\n          >\n            <gbt-button\n              data-opener=\"add\"\n              variant=\"secondary\"\n              iconName=\"plus\"\n              [text]=\"text().addPasskey\"\n              [disabled]=\"!!blockedReason() || appBusy()\"\n              (clicked)=\"openAdd()\"\n            />\n            @if (appBusy()) {\n              <p class=\"gbt-passkey-settings__hint\">{{ text().finishAppFirst }}</p>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n</gbt-card>\n\n@if (confirmingDelete()) {\n  <gbt-confirm-danger-modal\n    [isOpen]=\"true\"\n    [heading]=\"text().deleteDialogHeading\"\n    [message]=\"deleteMessage()\"\n    [confirmLabel]=\"text().deleteConfirm\"\n    confirmIcon=\"trash-2\"\n    [cancelLabel]=\"text().cancel\"\n    [closeLabel]=\"text().close\"\n    [busyLabel]=\"text().deleting\"\n    [busy]=\"deleteBusy()\"\n    (confirmed)=\"delete()\"\n    (closed)=\"closeDeleteDialog()\"\n  />\n}\n\n<ng-template #addForm>\n  <form ngNoForm class=\"gbt-passkey-settings__form\" (submit)=\"$event.preventDefault(); submitAdd()\">\n    <p class=\"gbt-passkey-settings__form-lead\">{{ text().addLead }}</p>\n\n    @if (notice()) {\n      <gbt-alert [variant]=\"noticeVariant()\" appearance=\"subtle\" iconAlign=\"start\">{{\n        notice()\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    <div class=\"gbt-passkey-settings__fields\">\n      <div class=\"gbt-passkey-settings__field\">\n        <gbt-input\n          [id]=\"id + '-name'\"\n          name=\"passkeyName\"\n          autocomplete=\"off\"\n          [label]=\"text().nameLabel\"\n          [placeholder]=\"text().defaultPasskeyName\"\n          [errorMessage]=\"nameError()\"\n          [ngModel]=\"name()\"\n          (ngModelChange)=\"setName($event)\"\n        />\n      </div>\n      <div class=\"gbt-passkey-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    </div>\n\n    <div class=\"gbt-passkey-settings__buttons\">\n      <gbt-button\n        class=\"gbt-passkey-settings__submit\"\n        type=\"submit\"\n        iconName=\"key\"\n        [text]=\"text().create\"\n        [loading]=\"busy()\"\n        [loadingLabel]=\"text().creating\"\n      />\n      <gbt-button variant=\"secondary\" [text]=\"text().cancel\" (clicked)=\"cancelAdd()\" />\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #deletePrompt>\n  <form\n    ngNoForm\n    class=\"gbt-passkey-settings__form\"\n    (submit)=\"$event.preventDefault(); submitDelete()\"\n  >\n    <p class=\"gbt-passkey-settings__form-lead\">{{ text().deleteLead(deleting()?.name ?? '') }}</p>\n\n    @if (lastFactor()) {\n      <gbt-alert variant=\"warning\" appearance=\"subtle\" iconAlign=\"start\">{{\n        text().lastFactorWarning\n      }}</gbt-alert>\n    }\n\n    @if (deleteNotice()) {\n      <gbt-alert variant=\"error\" appearance=\"subtle\" iconAlign=\"start\">{{\n        deleteNotice()\n      }}</gbt-alert>\n    }\n\n    <div class=\"gbt-passkey-settings__fields\">\n      <div class=\"gbt-passkey-settings__field\">\n        <gbt-input\n          [id]=\"id + '-delete-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]=\"deletePasswordError()\"\n          [ngModel]=\"deletePassword()\"\n          (ngModelChange)=\"setDeletePassword($event)\"\n        />\n      </div>\n    </div>\n\n    <div class=\"gbt-passkey-settings__buttons\">\n      <gbt-button\n        type=\"submit\"\n        variant=\"secondary\"\n        [text]=\"text().continue\"\n        [loading]=\"deleteBusy()\"\n        [loadingLabel]=\"text().checking\"\n      />\n      <gbt-button\n        variant=\"secondary\"\n        [text]=\"text().cancel\"\n        [disabled]=\"deleteBusy()\"\n        (clicked)=\"cancelDelete()\"\n      />\n    </div>\n  </form>\n</ng-template>\n",
+		styles: ["@charset \"UTF-8\";: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-passkey-settings__stack{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.gbt-passkey-settings__anchor:focus{outline:none}.gbt-passkey-settings__rows{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}.gbt-passkey-settings__row{display:flex;flex-direction:column;gap:1rem;min-width:0;padding-block:1rem}.gbt-passkey-settings__row:first-child{padding-top:0}.gbt-passkey-settings__row:last-child{padding-bottom:0}.gbt-passkey-settings__row+.gbt-passkey-settings__row{border-top:1px solid var(--gbt-hairline)}.gbt-passkey-settings__row:focus{outline:none}.gbt-passkey-settings__row-head{display:flex;align-items:center;gap:.75rem;min-width:0}.gbt-passkey-settings__row-text{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}.gbt-passkey-settings__name{flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;color:var(--text-primary);font-size:.875rem;font-weight:600;line-height:1.5rem}.gbt-passkey-settings__meta{display:flex;flex-wrap:wrap;gap:0 .5rem;margin:0;color:var(--text-secondary);font-size:.8125rem;line-height:1.25rem}.gbt-passkey-settings__meta>*+*:before{content:\"\\b7\";margin-right:.5rem}.gbt-passkey-settings__meta time{white-space:nowrap}.gbt-passkey-settings__last-used--never{font-style:italic}.gbt-passkey-settings__row-action{flex:none}.gbt-passkey-settings__row-action ::ng-deep .gbt-button:not(:disabled):hover{border-color:var(--color-error-text);color:var(--color-error-text)}.gbt-passkey-settings__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}.gbt-passkey-settings__hint{margin:0;color:var(--text-secondary);font-size:.8125rem;line-height:1.25rem}.gbt-passkey-settings__actions--divided{padding-top:1.25rem;border-top:1px solid var(--gbt-hairline)}.gbt-passkey-settings__actions--centered{justify-content:center}.gbt-passkey-settings__form{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-passkey-settings__form-lead{margin:0;color:var(--text-secondary);font-size:.8125rem;line-height:1.25rem}.gbt-passkey-settings__fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:1rem;max-width:40rem}.gbt-passkey-settings__field{display:flex;flex-direction:column;gap:.375rem;min-width:0}.gbt-passkey-settings__buttons{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}@container gbt-settings-card (max-width: 519px){.gbt-passkey-settings__fields{grid-template-columns:minmax(0,1fr);max-width:none}.gbt-passkey-settings__form{padding:.875rem}.gbt-passkey-settings__actions--divided{padding-top:1rem}.gbt-passkey-settings__meta{flex-direction:column}.gbt-passkey-settings__meta>*+*:before{content:none}.gbt-passkey-settings__row-head{flex-wrap:wrap}.gbt-passkey-settings__row-text{flex-basis:calc(100% - 2.75rem)}.gbt-passkey-settings__row-action,.gbt-passkey-settings__actions gbt-button,.gbt-passkey-settings__buttons gbt-button{display:block;flex:1 1 100%;width:auto}.gbt-passkey-settings__row-action ::ng-deep .gbt-button,.gbt-passkey-settings__actions gbt-button ::ng-deep .gbt-button,.gbt-passkey-settings__buttons 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: Alert,
+				selector: "gbt-alert",
+				inputs: [
+					"variant",
+					"dismissible",
+					"closeLabel",
+					"live",
+					"heading",
+					"size",
+					"appearance",
+					"iconAlign"
+				],
+				outputs: ["dismissed"]
+			},
+			{
+				kind: "component",
+				type: EmptyState,
+				selector: "gbt-empty-state",
+				inputs: [
+					"illustration",
+					"heading",
+					"message",
+					"icon",
+					"size",
+					"tone",
+					"headingLevel",
+					"headingId",
+					"headingFocusable"
+				]
+			},
+			{
+				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: IconMarker,
+				selector: "gbt-icon-marker",
+				inputs: [
+					"icon",
+					"tone",
+					"size",
+					"shape",
+					"appearance",
+					"label"
+				]
+			},
+			{
+				kind: "component",
+				type: SaveStatus,
+				selector: "gbt-save-status",
+				inputs: [
+					"state",
+					"savingLabel",
+					"savedLabel",
+					"errorLabel",
+					"message"
+				]
+			},
+			{
+				kind: "component",
+				type: SkeletonList,
+				selector: "gbt-skeleton-list",
+				inputs: [
+					"rows",
+					"leading",
+					"leadingSize",
+					"lines",
+					"loadingLabel",
+					"divided",
+					"padded"
+				]
+			},
+			{
+				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"
+				]
+			},
+			{
+				kind: "pipe",
+				type: GbtRelativeTimePipe,
+				name: "gbtRelativeTime"
+			},
+			{
+				kind: "pipe",
+				type: GbtDateTimePipe,
+				name: "gbtDateTime"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: PasskeySettings,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-passkey-settings",
+			standalone: true,
+			imports: [
+				FormsModule,
+				NgTemplateOutlet,
+				Alert,
+				EmptyState,
+				Button,
+				GbtInput,
+				IconMarker,
+				SaveStatus,
+				SkeletonList,
+				ConfirmDangerModal,
+				Card,
+				GbtRelativeTimePipe,
+				GbtDateTimePipe
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<gbt-card\n  variant=\"outlined\"\n  icon=\"key\"\n  [heading]=\"text().heading\"\n  [description]=\"text().description\"\n  [count]=\"count()\"\n>\n  @switch (view()) {\n    @case ('loading') {\n      <gbt-skeleton-list\n        [rows]=\"2\"\n        leading=\"square\"\n        leadingSize=\"2rem\"\n        [padded]=\"false\"\n        [loadingLabel]=\"text().loading\"\n      />\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-passkey-settings__anchor\" data-passkeys-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    @default {\n      <div class=\"gbt-passkey-settings__stack\">\n        @if (blockedReason(); as reason) {\n          <gbt-alert variant=\"info\" appearance=\"subtle\" iconAlign=\"start\" live=\"off\">{{\n            reason\n          }}</gbt-alert>\n        }\n\n        <div class=\"gbt-passkey-settings__anchor\" data-passkeys-anchor tabindex=\"-1\">\n          @if (passkeys().length === 0) {\n            <gbt-empty-state\n              size=\"compact\"\n              icon=\"key\"\n              [heading]=\"text().emptyHeading\"\n              [message]=\"text().emptyMessage\"\n            />\n          } @else {\n            <ul class=\"gbt-passkey-settings__rows\" [attr.aria-label]=\"text().listLabel\">\n              @for (passkey of passkeys(); track passkey.id) {\n                <li\n                  class=\"gbt-passkey-settings__row\"\n                  [attr.data-passkey-id]=\"passkey.id\"\n                  tabindex=\"-1\"\n                >\n                  <div class=\"gbt-passkey-settings__row-head\">\n                    <gbt-icon-marker shape=\"tile\" icon=\"key\" />\n                    <div class=\"gbt-passkey-settings__row-text\">\n                      <p class=\"gbt-passkey-settings__name\" [title]=\"passkey.name\">\n                        {{ passkey.name }}\n                      </p>\n                      <p class=\"gbt-passkey-settings__meta\">\n                        <span\n                          >{{ text().added(absolute(passkey.createdAt)) }}\n                          <time\n                            [attr.datetime]=\"passkey.createdAt\"\n                            [title]=\"passkey.createdAt | gbtDateTime: dateOptions()\"\n                            >{{ passkey.createdAt | gbtRelativeTime: relativeOptions() }}</time\n                          ></span\n                        >\n                        <span\n                          class=\"gbt-passkey-settings__last-used\"\n                          [class.gbt-passkey-settings__last-used--never]=\"!passkey.lastUsedAt\"\n                        >\n                          @if (passkey.lastUsedAt; as lastUsed) {\n                            {{ text().lastUsed(absolute(lastUsed)) }}\n                            <time\n                              [attr.datetime]=\"lastUsed\"\n                              [title]=\"lastUsed | gbtDateTime: dateOptions()\"\n                              >{{ lastUsed | gbtRelativeTime: relativeOptions() }}</time\n                            >\n                          } @else {\n                            {{ text().neverUsed }}\n                          }\n                        </span>\n                      </p>\n                    </div>\n                    @if (deleting()?.id !== passkey.id) {\n                      <gbt-button\n                        class=\"gbt-passkey-settings__row-action\"\n                        data-opener=\"delete\"\n                        variant=\"secondary\"\n                        size=\"small\"\n                        iconName=\"trash-2\"\n                        [text]=\"text().delete\"\n                        [ariaLabel]=\"text().deleteKey(passkey.name)\"\n                        (clicked)=\"openDelete(passkey)\"\n                      />\n                    }\n                  </div>\n                  @if (deleting()?.id === passkey.id) {\n                    <ng-container [ngTemplateOutlet]=\"deletePrompt\" />\n                  }\n                </li>\n              }\n            </ul>\n          }\n        </div>\n\n        <gbt-save-status\n          class=\"gbt-passkey-settings__result\"\n          [class.sr-only]=\"!result()\"\n          [state]=\"result() ? 'saved' : 'idle'\"\n          [message]=\"result()\"\n        />\n\n        @if (adding()) {\n          <ng-container [ngTemplateOutlet]=\"addForm\" />\n        } @else {\n          <div\n            class=\"gbt-passkey-settings__actions\"\n            [class.gbt-passkey-settings__actions--divided]=\"passkeys().length > 0\"\n            [class.gbt-passkey-settings__actions--centered]=\"passkeys().length === 0\"\n          >\n            <gbt-button\n              data-opener=\"add\"\n              variant=\"secondary\"\n              iconName=\"plus\"\n              [text]=\"text().addPasskey\"\n              [disabled]=\"!!blockedReason() || appBusy()\"\n              (clicked)=\"openAdd()\"\n            />\n            @if (appBusy()) {\n              <p class=\"gbt-passkey-settings__hint\">{{ text().finishAppFirst }}</p>\n            }\n          </div>\n        }\n      </div>\n    }\n  }\n</gbt-card>\n\n@if (confirmingDelete()) {\n  <gbt-confirm-danger-modal\n    [isOpen]=\"true\"\n    [heading]=\"text().deleteDialogHeading\"\n    [message]=\"deleteMessage()\"\n    [confirmLabel]=\"text().deleteConfirm\"\n    confirmIcon=\"trash-2\"\n    [cancelLabel]=\"text().cancel\"\n    [closeLabel]=\"text().close\"\n    [busyLabel]=\"text().deleting\"\n    [busy]=\"deleteBusy()\"\n    (confirmed)=\"delete()\"\n    (closed)=\"closeDeleteDialog()\"\n  />\n}\n\n<ng-template #addForm>\n  <form ngNoForm class=\"gbt-passkey-settings__form\" (submit)=\"$event.preventDefault(); submitAdd()\">\n    <p class=\"gbt-passkey-settings__form-lead\">{{ text().addLead }}</p>\n\n    @if (notice()) {\n      <gbt-alert [variant]=\"noticeVariant()\" appearance=\"subtle\" iconAlign=\"start\">{{\n        notice()\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    <div class=\"gbt-passkey-settings__fields\">\n      <div class=\"gbt-passkey-settings__field\">\n        <gbt-input\n          [id]=\"id + '-name'\"\n          name=\"passkeyName\"\n          autocomplete=\"off\"\n          [label]=\"text().nameLabel\"\n          [placeholder]=\"text().defaultPasskeyName\"\n          [errorMessage]=\"nameError()\"\n          [ngModel]=\"name()\"\n          (ngModelChange)=\"setName($event)\"\n        />\n      </div>\n      <div class=\"gbt-passkey-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    </div>\n\n    <div class=\"gbt-passkey-settings__buttons\">\n      <gbt-button\n        class=\"gbt-passkey-settings__submit\"\n        type=\"submit\"\n        iconName=\"key\"\n        [text]=\"text().create\"\n        [loading]=\"busy()\"\n        [loadingLabel]=\"text().creating\"\n      />\n      <gbt-button variant=\"secondary\" [text]=\"text().cancel\" (clicked)=\"cancelAdd()\" />\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #deletePrompt>\n  <form\n    ngNoForm\n    class=\"gbt-passkey-settings__form\"\n    (submit)=\"$event.preventDefault(); submitDelete()\"\n  >\n    <p class=\"gbt-passkey-settings__form-lead\">{{ text().deleteLead(deleting()?.name ?? '') }}</p>\n\n    @if (lastFactor()) {\n      <gbt-alert variant=\"warning\" appearance=\"subtle\" iconAlign=\"start\">{{\n        text().lastFactorWarning\n      }}</gbt-alert>\n    }\n\n    @if (deleteNotice()) {\n      <gbt-alert variant=\"error\" appearance=\"subtle\" iconAlign=\"start\">{{\n        deleteNotice()\n      }}</gbt-alert>\n    }\n\n    <div class=\"gbt-passkey-settings__fields\">\n      <div class=\"gbt-passkey-settings__field\">\n        <gbt-input\n          [id]=\"id + '-delete-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]=\"deletePasswordError()\"\n          [ngModel]=\"deletePassword()\"\n          (ngModelChange)=\"setDeletePassword($event)\"\n        />\n      </div>\n    </div>\n\n    <div class=\"gbt-passkey-settings__buttons\">\n      <gbt-button\n        type=\"submit\"\n        variant=\"secondary\"\n        [text]=\"text().continue\"\n        [loading]=\"deleteBusy()\"\n        [loadingLabel]=\"text().checking\"\n      />\n      <gbt-button\n        variant=\"secondary\"\n        [text]=\"text().cancel\"\n        [disabled]=\"deleteBusy()\"\n        (clicked)=\"cancelDelete()\"\n      />\n    </div>\n  </form>\n</ng-template>\n",
+			styles: ["@charset \"UTF-8\";: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-passkey-settings__stack{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.gbt-passkey-settings__anchor:focus{outline:none}.gbt-passkey-settings__rows{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}.gbt-passkey-settings__row{display:flex;flex-direction:column;gap:1rem;min-width:0;padding-block:1rem}.gbt-passkey-settings__row:first-child{padding-top:0}.gbt-passkey-settings__row:last-child{padding-bottom:0}.gbt-passkey-settings__row+.gbt-passkey-settings__row{border-top:1px solid var(--gbt-hairline)}.gbt-passkey-settings__row:focus{outline:none}.gbt-passkey-settings__row-head{display:flex;align-items:center;gap:.75rem;min-width:0}.gbt-passkey-settings__row-text{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}.gbt-passkey-settings__name{flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;color:var(--text-primary);font-size:.875rem;font-weight:600;line-height:1.5rem}.gbt-passkey-settings__meta{display:flex;flex-wrap:wrap;gap:0 .5rem;margin:0;color:var(--text-secondary);font-size:.8125rem;line-height:1.25rem}.gbt-passkey-settings__meta>*+*:before{content:\"\\b7\";margin-right:.5rem}.gbt-passkey-settings__meta time{white-space:nowrap}.gbt-passkey-settings__last-used--never{font-style:italic}.gbt-passkey-settings__row-action{flex:none}.gbt-passkey-settings__row-action ::ng-deep .gbt-button:not(:disabled):hover{border-color:var(--color-error-text);color:var(--color-error-text)}.gbt-passkey-settings__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}.gbt-passkey-settings__hint{margin:0;color:var(--text-secondary);font-size:.8125rem;line-height:1.25rem}.gbt-passkey-settings__actions--divided{padding-top:1.25rem;border-top:1px solid var(--gbt-hairline)}.gbt-passkey-settings__actions--centered{justify-content:center}.gbt-passkey-settings__form{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-passkey-settings__form-lead{margin:0;color:var(--text-secondary);font-size:.8125rem;line-height:1.25rem}.gbt-passkey-settings__fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:1rem;max-width:40rem}.gbt-passkey-settings__field{display:flex;flex-direction:column;gap:.375rem;min-width:0}.gbt-passkey-settings__buttons{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}@container gbt-settings-card (max-width: 519px){.gbt-passkey-settings__fields{grid-template-columns:minmax(0,1fr);max-width:none}.gbt-passkey-settings__form{padding:.875rem}.gbt-passkey-settings__actions--divided{padding-top:1rem}.gbt-passkey-settings__meta{flex-direction:column}.gbt-passkey-settings__meta>*+*:before{content:none}.gbt-passkey-settings__row-head{flex-wrap:wrap}.gbt-passkey-settings__row-text{flex-basis:calc(100% - 2.75rem)}.gbt-passkey-settings__row-action,.gbt-passkey-settings__actions gbt-button,.gbt-passkey-settings__buttons gbt-button{display:block;flex:1 1 100%;width:auto}.gbt-passkey-settings__row-action ::ng-deep .gbt-button,.gbt-passkey-settings__actions gbt-button ::ng-deep .gbt-button,.gbt-passkey-settings__buttons 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
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		sessionRevoked: [{
+			type: i0.Output,
+			args: ["sessionRevoked"]
+		}]
+	}
+});
+export { PasskeySettings };
+
+//# sourceMappingURL=masmarino-gabarit-passkey-settings.mjs.map