@newheap/platform-common 1.3.0 → 1.4.0

package/fesm2022/newheap-platform-common-two-factor.mjs

@@ -0,0 +1,896 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, Injectable, Injector, viewChild, input, output, signal, computed, afterNextRender, ChangeDetectionStrategy, Component, makeEnvironmentProviders, provideEnvironmentInitializer } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import { TranslateService, TranslatePipe } from '@ngx-translate/core';
+import { NhTwoFactorFailureCodes, NhAuthService, NhTwoFactorMethods, NhTwoFactorVerifyModel, NhTwoFactorReauthentication, NhPasskey } from '@newheap/platform-common';
+import { merge } from 'rxjs';
+
+var en = {
+	"nh-two-factor": {
+	required: "Enter a code to finish signing in.",
+	"enrollment-required": "Set up two-step verification to continue.",
+	"invalid-code": "The code is not valid. Try the next code.",
+	"challenge-expired": "The sign-in expired. Sign in again.",
+	"locked-out": "Too many attempts. The account is temporarily locked.",
+	"method-not-allowed": "This method cannot be used for this account.",
+	"not-enabled": "Two-step verification is not turned on.",
+	"already-enabled": "Two-step verification is already turned on.",
+	"setup-not-started": "Start the setup first.",
+	"reauthentication-required": "Confirm your password or a code to continue.",
+	"reauthentication-failed": "The password or code is not correct.",
+	"required-by-policy": "Your organization requires two-step verification.",
+	"not-allowed-while-impersonating": "Two-step verification cannot be changed while impersonating.",
+	"configuration-invalid": "Two-step verification is not configured correctly.",
+	"email-cooldown": "Wait a moment before you request another code.",
+	"email-unavailable": "No confirmed e-mail address is available.",
+	"user-not-found": "The user was not found.",
+	"passkey-invalid": "The passkey could not be verified.",
+	"passkey-not-found": "The passkey was not found.",
+	"passkey-unavailable": "The passkey prompt was cancelled, or this browser does not support passkeys.",
+	ui: {
+		error: "Something went wrong. Try again.",
+		"challenge-title": "Two-step verification",
+		"settings-title": "Two-step verification",
+		"enrollment-title": "Set up two-step verification",
+		"enrollment-instructions": "Your organization requires a second step when you sign in. Choose how you want to confirm it is you.",
+		"method-label": "Verification method",
+		method: {
+			authenticator: "Authenticator app",
+			"recovery-code": "Recovery code",
+			email: "E-mail code",
+			passkey: "Passkey"
+		},
+		"code-label": {
+			authenticator: "Code from your authenticator app",
+			"recovery-code": "Recovery code",
+			email: "Code from the e-mail"
+		},
+		verify: "Verify",
+		verifying: "Verifying…",
+		cancel: "Cancel",
+		"remember-device": "Remember this device",
+		"send-email-code": "E-mail me a code",
+		"resend-email-code": "Send a new code",
+		"email-code-sent": "We e-mailed a code. It expires at {{time}}.",
+		"use-passkey": "Use a passkey",
+		"passkey-verify-instructions": "Your browser asks you to confirm with a passkey on this device, your phone or a security key.",
+		"sign-in-with-passkey": "Sign in with a passkey",
+		"authenticator-instructions": "Scan the QR code with your authenticator app, or enter the key by hand. Then enter the code the app shows.",
+		"shared-key": "Key",
+		"qr-code-alt": "QR code for your authenticator app",
+		confirm: "Confirm",
+		"email-instructions": "We send a code to your confirmed e-mail address.",
+		"passkey-instructions": "Create a passkey with the screen lock of this device, a password manager or a security key.",
+		"passkey-name": "Passkey name",
+		"create-passkey": "Create passkey",
+		"recovery-codes-title": "Recovery codes",
+		"recovery-codes-instructions": "Store these codes somewhere safe. Each code signs you in once when you cannot use your other methods. They are only shown now.",
+		copy: "Copy",
+		copied: "Copied",
+		download: "Download",
+		"recovery-codes-saved": "I saved these codes",
+		"continue": "Continue",
+		loading: "Loading…",
+		"status-enabled": "On",
+		"status-disabled": "Off",
+		"status-required": "Required by your organization",
+		"recovery-codes-left": "{{count}} recovery codes left",
+		"set-up-authenticator": "Set up authenticator app",
+		"change-authenticator": "Change authenticator app",
+		"set-up-email": "Use e-mail codes",
+		"passkeys-title": "Passkeys",
+		"no-passkeys": "No passkeys yet.",
+		"add-passkey": "Add passkey",
+		rename: "Rename",
+		save: "Save",
+		remove: "Remove",
+		"passkey-created": "Added on {{date}}",
+		"passkey-synced": "Synced",
+		"regenerate-recovery-codes": "Create new recovery codes",
+		"forget-devices": "Forget remembered devices",
+		disable: "Turn off two-step verification",
+		"reauthentication-title": "Confirm it is you",
+		"reauthentication-method": "Confirm with",
+		password: "Password",
+		"devices-forgotten": "Every device asks for the second step again.",
+		"session-renewed": "Your other sessions were signed out.",
+		"change-saved": "Your change was saved."
+	}
+}
+};
+
+var nl = {
+	"nh-two-factor": {
+	required: "Voer een code in om het aanmelden af te ronden.",
+	"enrollment-required": "Stel tweestapsverificatie in om verder te gaan.",
+	"invalid-code": "De code is ongeldig. Probeer de volgende code.",
+	"challenge-expired": "De aanmelding is verlopen. Meld je opnieuw aan.",
+	"locked-out": "Te veel pogingen. Het account is tijdelijk geblokkeerd.",
+	"method-not-allowed": "Deze methode kan niet voor dit account worden gebruikt.",
+	"not-enabled": "Tweestapsverificatie staat niet aan.",
+	"already-enabled": "Tweestapsverificatie staat al aan.",
+	"setup-not-started": "Start eerst het instellen.",
+	"reauthentication-required": "Bevestig je wachtwoord of een code om door te gaan.",
+	"reauthentication-failed": "Het wachtwoord of de code klopt niet.",
+	"required-by-policy": "Je organisatie vereist tweestapsverificatie.",
+	"not-allowed-while-impersonating": "Je kunt tweestapsverificatie niet wijzigen tijdens impersonatie.",
+	"configuration-invalid": "Tweestapsverificatie is niet goed geconfigureerd.",
+	"email-cooldown": "Wacht even voordat je een nieuwe code aanvraagt.",
+	"email-unavailable": "Er is geen bevestigd e-mailadres beschikbaar.",
+	"user-not-found": "De gebruiker is niet gevonden.",
+	"passkey-invalid": "De passkey kon niet worden gecontroleerd.",
+	"passkey-not-found": "De passkey is niet gevonden.",
+	"passkey-unavailable": "De passkey-vraag is geannuleerd, of deze browser ondersteunt geen passkeys.",
+	ui: {
+		error: "Er ging iets mis. Probeer het opnieuw.",
+		"challenge-title": "Tweestapsverificatie",
+		"settings-title": "Tweestapsverificatie",
+		"enrollment-title": "Tweestapsverificatie instellen",
+		"enrollment-instructions": "Je organisatie vereist een tweede stap bij het aanmelden. Kies hoe je wilt bevestigen dat jij het bent.",
+		"method-label": "Verificatiemethode",
+		method: {
+			authenticator: "Authenticator-app",
+			"recovery-code": "Herstelcode",
+			email: "E-mailcode",
+			passkey: "Passkey"
+		},
+		"code-label": {
+			authenticator: "Code uit je authenticator-app",
+			"recovery-code": "Herstelcode",
+			email: "Code uit de e-mail"
+		},
+		verify: "Controleren",
+		verifying: "Bezig met controleren…",
+		cancel: "Annuleren",
+		"remember-device": "Dit apparaat onthouden",
+		"send-email-code": "Stuur mij een code",
+		"resend-email-code": "Stuur een nieuwe code",
+		"email-code-sent": "We hebben een code gemaild. De code verloopt om {{time}}.",
+		"use-passkey": "Passkey gebruiken",
+		"passkey-verify-instructions": "Je browser vraagt je te bevestigen met een passkey op dit apparaat, je telefoon of een beveiligingssleutel.",
+		"sign-in-with-passkey": "Aanmelden met een passkey",
+		"authenticator-instructions": "Scan de QR-code met je authenticator-app, of voer de sleutel handmatig in. Voer daarna de code in die de app toont.",
+		"shared-key": "Sleutel",
+		"qr-code-alt": "QR-code voor je authenticator-app",
+		confirm: "Bevestigen",
+		"email-instructions": "We sturen een code naar je bevestigde e-mailadres.",
+		"passkey-instructions": "Maak een passkey met de schermvergrendeling van dit apparaat, een wachtwoordmanager of een beveiligingssleutel.",
+		"passkey-name": "Naam van de passkey",
+		"create-passkey": "Passkey maken",
+		"recovery-codes-title": "Herstelcodes",
+		"recovery-codes-instructions": "Bewaar deze codes op een veilige plek. Met elke code kun je je één keer aanmelden als je je andere methodes niet kunt gebruiken. Ze worden alleen nu getoond.",
+		copy: "Kopiëren",
+		copied: "Gekopieerd",
+		download: "Downloaden",
+		"recovery-codes-saved": "Ik heb deze codes bewaard",
+		"continue": "Doorgaan",
+		loading: "Laden…",
+		"status-enabled": "Aan",
+		"status-disabled": "Uit",
+		"status-required": "Vereist door je organisatie",
+		"recovery-codes-left": "Nog {{count}} herstelcodes",
+		"set-up-authenticator": "Authenticator-app instellen",
+		"change-authenticator": "Authenticator-app wijzigen",
+		"set-up-email": "E-mailcodes gebruiken",
+		"passkeys-title": "Passkeys",
+		"no-passkeys": "Nog geen passkeys.",
+		"add-passkey": "Passkey toevoegen",
+		rename: "Naam wijzigen",
+		save: "Opslaan",
+		remove: "Verwijderen",
+		"passkey-created": "Toegevoegd op {{date}}",
+		"passkey-synced": "Gesynchroniseerd",
+		"regenerate-recovery-codes": "Nieuwe herstelcodes maken",
+		"forget-devices": "Onthouden apparaten vergeten",
+		disable: "Tweestapsverificatie uitzetten",
+		"reauthentication-title": "Bevestig dat jij het bent",
+		"reauthentication-method": "Bevestigen met",
+		password: "Wachtwoord",
+		"devices-forgotten": "Elk apparaat vraagt weer om de tweede stap.",
+		"session-renewed": "Je andere sessies zijn afgemeld.",
+		"change-saved": "Je wijziging is opgeslagen."
+	}
+}
+};
+
+/** The entry point's own translation bundles, keyed by language. All keys live under `nh-two-factor.`. */
+const NH_TWO_FACTOR_TRANSLATIONS = { en, nl };
+const rootKey = 'nh-two-factor';
+function isTree(value) {
+    return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+/** Deep merge where values of `override` win. */
+function mergeTrees(base, override) {
+    const result = { ...base };
+    for (const [key, value] of Object.entries(override)) {
+        const current = result[key];
+        result[key] = isTree(current) && isTree(value) ? mergeTrees(current, value) : value;
+    }
+    return result;
+}
+function hasAllKeys(bundle, candidate) {
+    if (!isTree(candidate)) {
+        return false;
+    }
+    return Object.entries(bundle).every(([key, value]) => isTree(value) ? hasAllKeys(value, candidate[key]) : key in candidate);
+}
+/**
+ * Merges the bundled texts into `TranslateService` whenever the host loads or replaces a
+ * language. Host loaders never lose these texts, and keys the host defines under
+ * `nh-two-factor.` win over the bundle. Languages without a bundle receive the English texts.
+ */
+class NhTwoFactorTranslationMerger {
+    constructor() {
+        this.translate = inject(TranslateService, { optional: true });
+        this.destroyRef = inject(DestroyRef);
+        this.started = false;
+    }
+    start() {
+        const translate = this.translate;
+        if (this.started || !translate) {
+            return;
+        }
+        this.started = true;
+        const subscription = merge(translate.onTranslationChange, translate.onLangChange).subscribe(event => {
+            if (event.lang && isTree(event.translations)) {
+                this.ensure(event.lang, event.translations[rootKey]);
+            }
+        });
+        this.destroyRef.onDestroy(() => subscription.unsubscribe());
+        // The current language is loaded or already requested by the host, so merging into it
+        // never pre-empts the host loader; a later load triggers a new merge.
+        const current = translate.getCurrentLang();
+        if (current) {
+            this.ensure(current, translate.instant(rootKey));
+        }
+    }
+    ensure(language, existing) {
+        const bundle = (NH_TWO_FACTOR_TRANSLATIONS[language] ?? NH_TWO_FACTOR_TRANSLATIONS.en);
+        const bundleRoot = bundle[rootKey];
+        if (hasAllKeys(bundleRoot, existing)) {
+            return;
+        }
+        const merged = mergeTrees(bundleRoot, isTree(existing) ? existing : {});
+        this.translate?.setTranslation(language, { [rootKey]: merged }, true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: NhTwoFactorTranslationMerger, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: NhTwoFactorTranslationMerger, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: NhTwoFactorTranslationMerger, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const failureCodePrefix = 'two-factor-';
+const translationPrefix = 'nh-two-factor.';
+/**
+ * Returns the translation keys for a failed two-factor result. Two-factor failure codes map
+ * to `nh-two-factor.<suffix>`; other failures use a generic message.
+ */
+function nhTwoFactorErrorKeys(result) {
+    const keys = result.items.map(item => {
+        if (item.name.startsWith(failureCodePrefix)) {
+            return translationPrefix + item.name.substring(failureCodePrefix.length);
+        }
+        const message = item.errorMessages[0];
+        return message?.startsWith(translationPrefix) ? message : translationPrefix + 'ui.error';
+    });
+    return keys.length > 0 ? [...new Set(keys)] : [translationPrefix + 'ui.error'];
+}
+/**
+ * Whether the server ended the pending sign-in step, so the user has to sign in again.
+ */
+function nhTwoFactorStepEnded(result) {
+    return result.items.some(item => item.name === NhTwoFactorFailureCodes.ChallengeExpired || item.name === NhTwoFactorFailureCodes.LockedOut);
+}
+/** Reads the value of the input that raised an event. */
+function nhTwoFactorInputValue(event) {
+    return event.target.value;
+}
+/** Reads the checked state of the checkbox that raised an event. */
+function nhTwoFactorInputChecked(event) {
+    return event.target.checked;
+}
+
+let nextId$4 = 0;
+/**
+ * Completes a second-factor challenge with a code, an e-mailed code, a recovery code or a
+ * passkey. The session is stored by the auth service before `authenticated` emits.
+ */
+class NhTwoFactorChallengeComponent {
+    constructor() {
+        this.auth = inject(NhAuthService);
+        this.injector = inject(Injector);
+        this.codeInput = viewChild('codeInput', ...(ngDevMode ? [{ debugName: "codeInput" }] : []));
+        /** The pending challenge from the login response. */
+        this.challenge = input.required(...(ngDevMode ? [{ debugName: "challenge" }] : []));
+        /** Whether to offer "remember this device" when the server allows it for this challenge. */
+        this.allowRememberDevice = input(true, ...(ngDevMode ? [{ debugName: "allowRememberDevice" }] : []));
+        this.authenticated = output();
+        /** The challenge expired or the account was locked; the user has to sign in again. */
+        this.expired = output();
+        this.cancelled = output();
+        this.id = `nh-two-factor-challenge-${nextId$4++}`;
+        this.passkeySupported = this.auth.isPasskeySupported();
+        this.selectedMethod = signal(null, ...(ngDevMode ? [{ debugName: "selectedMethod" }] : []));
+        this.code = signal('', ...(ngDevMode ? [{ debugName: "code" }] : []));
+        this.rememberDevice = signal(false, ...(ngDevMode ? [{ debugName: "rememberDevice" }] : []));
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : []));
+        this.errorKeys = signal([], ...(ngDevMode ? [{ debugName: "errorKeys" }] : []));
+        this.emailSent = signal(null, ...(ngDevMode ? [{ debugName: "emailSent" }] : []));
+        this.methods = computed(() => this.challenge().methods
+            .filter(method => method !== NhTwoFactorMethods.passkey || this.passkeySupported), ...(ngDevMode ? [{ debugName: "methods" }] : []));
+        this.method = computed(() => this.selectedMethod() ?? this.defaultMethod(), ...(ngDevMode ? [{ debugName: "method" }] : []));
+        this.usesCode = computed(() => this.method() !== NhTwoFactorMethods.passkey, ...(ngDevMode ? [{ debugName: "usesCode" }] : []));
+        this.numericCode = computed(() => this.method() !== NhTwoFactorMethods.recoveryCode, ...(ngDevMode ? [{ debugName: "numericCode" }] : []));
+        this.offerRememberDevice = computed(() => this.allowRememberDevice() && this.challenge().rememberDeviceAvailable, ...(ngDevMode ? [{ debugName: "offerRememberDevice" }] : []));
+        this.value = nhTwoFactorInputValue;
+        this.checked = nhTwoFactorInputChecked;
+        inject(NhTwoFactorTranslationMerger).start();
+    }
+    selectMethod(method) {
+        this.selectedMethod.set(method);
+        this.code.set('');
+        this.errorKeys.set([]);
+        afterNextRender(() => this.codeInput()?.nativeElement.focus(), { injector: this.injector });
+    }
+    async verify() {
+        if (this.busy()) {
+            return;
+        }
+        if (!this.usesCode()) {
+            await this.run(() => this.auth.verifyTwoFactorWithPasskey(this.challenge().challengeToken, this.rememberDevice()));
+            return;
+        }
+        const code = this.code().trim();
+        if (!code) {
+            this.errorKeys.set(['nh-two-factor.invalid-code']);
+            return;
+        }
+        await this.run(() => this.auth.verifyTwoFactor(new NhTwoFactorVerifyModel({
+            challengeToken: this.challenge().challengeToken,
+            method: this.method(),
+            code: code,
+            rememberDevice: this.rememberDevice()
+        })));
+    }
+    async sendEmailCode() {
+        if (this.busy()) {
+            return;
+        }
+        this.busy.set(true);
+        this.errorKeys.set([]);
+        const result = await this.auth.sendTwoFactorEmailCode(this.challenge().challengeToken);
+        this.busy.set(false);
+        if (!result.isSuccess) {
+            this.fail(result);
+            return;
+        }
+        this.emailSent.set(result.data ?? null);
+        afterNextRender(() => this.codeInput()?.nativeElement.focus(), { injector: this.injector });
+    }
+    async run(verification) {
+        this.busy.set(true);
+        this.errorKeys.set([]);
+        const result = await verification();
+        this.busy.set(false);
+        if (!result.isSuccess || !result.data) {
+            this.code.set('');
+            this.fail(result);
+            return;
+        }
+        this.authenticated.emit(result.data);
+    }
+    fail(result) {
+        this.errorKeys.set(nhTwoFactorErrorKeys(result));
+        if (nhTwoFactorStepEnded(result)) {
+            this.expired.emit();
+        }
+    }
+    defaultMethod() {
+        const methods = this.methods();
+        return methods.find(method => method !== NhTwoFactorMethods.recoveryCode)
+            ?? methods[0]
+            ?? NhTwoFactorMethods.authenticator;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: NhTwoFactorChallengeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.28", type: NhTwoFactorChallengeComponent, isStandalone: true, selector: "nh-two-factor-challenge", inputs: { challenge: { classPropertyName: "challenge", publicName: "challenge", isSignal: true, isRequired: true, transformFunction: null }, allowRememberDevice: { classPropertyName: "allowRememberDevice", publicName: "allowRememberDevice", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { authenticated: "authenticated", expired: "expired", cancelled: "cancelled" }, viewQueries: [{ propertyName: "codeInput", first: true, predicate: ["codeInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<form class=\"nh-two-factor\" [attr.aria-labelledby]=\"id + '-title'\" [attr.aria-busy]=\"busy()\" (submit)=\"$event.preventDefault(); verify()\">\n  <h2 class=\"nh-two-factor__title\" [id]=\"id + '-title'\">{{ 'nh-two-factor.ui.challenge-title' | translate }}</h2>\n\n  @if (methods().length > 1) {\n    <fieldset class=\"nh-two-factor__methods\">\n      <legend class=\"nh-two-factor__legend\">{{ 'nh-two-factor.ui.method-label' | translate }}</legend>\n      @for (option of methods(); track option) {\n        <label class=\"nh-two-factor__method\">\n          <input\n            type=\"radio\"\n            [name]=\"id + '-method'\"\n            [value]=\"option\"\n            [checked]=\"method() === option\"\n            [disabled]=\"busy()\"\n            (change)=\"selectMethod(option)\" />\n          <span>{{ 'nh-two-factor.ui.method.' + option | translate }}</span>\n        </label>\n      }\n    </fieldset>\n  }\n\n  @if (method() === 'email') {\n    <p class=\"nh-two-factor__hint\">{{ 'nh-two-factor.ui.email-instructions' | translate }}</p>\n    <div class=\"nh-two-factor__actions\">\n      <button type=\"button\" class=\"nh-two-factor__button\" [disabled]=\"busy()\" (click)=\"sendEmailCode()\">\n        {{ (emailSent() ? 'nh-two-factor.ui.resend-email-code' : 'nh-two-factor.ui.send-email-code') | translate }}\n      </button>\n    </div>\n    @if (emailSent(); as sent) {\n      <p class=\"nh-two-factor__hint\" role=\"status\">\n        {{ 'nh-two-factor.ui.email-code-sent' | translate: { time: (sent.expiresAt | date: 'shortTime') } }}\n      </p>\n    }\n  }\n\n  @if (usesCode()) {\n    <div class=\"nh-two-factor__field\">\n      <label [for]=\"id + '-code'\">{{ 'nh-two-factor.ui.code-label.' + method() | translate }}</label>\n      <input\n        #codeInput\n        type=\"text\"\n        class=\"nh-two-factor__input nh-two-factor__input--code\"\n        autocomplete=\"one-time-code\"\n        spellcheck=\"false\"\n        [id]=\"id + '-code'\"\n        [attr.inputmode]=\"numericCode() ? 'numeric' : 'text'\"\n        [value]=\"code()\"\n        [disabled]=\"busy()\"\n        [attr.aria-invalid]=\"errorKeys().length > 0 ? true : null\"\n        [attr.aria-describedby]=\"errorKeys().length > 0 ? id + '-errors' : null\"\n        (input)=\"code.set(value($event))\" />\n    </div>\n  } @else {\n    <p class=\"nh-two-factor__hint\">{{ 'nh-two-factor.ui.passkey-verify-instructions' | translate }}</p>\n  }\n\n  @if (offerRememberDevice()) {\n    <label class=\"nh-two-factor__check\">\n      <input type=\"checkbox\" [checked]=\"rememberDevice()\" [disabled]=\"busy()\" (change)=\"rememberDevice.set(checked($event))\" />\n      <span>{{ 'nh-two-factor.ui.remember-device' | translate }}</span>\n    </label>\n  }\n\n  <div [id]=\"id + '-errors'\" aria-live=\"assertive\">\n    @if (errorKeys().length > 0) {\n      <ul class=\"nh-two-factor__errors\" role=\"alert\">\n        @for (key of errorKeys(); track key) {\n          <li>{{ key | translate }}</li>\n        }\n      </ul>\n    }\n  </div>\n\n  <div class=\"nh-two-factor__actions\">\n    <button type=\"submit\" class=\"nh-two-factor__button nh-two-factor__button--primary\" [disabled]=\"busy()\">\n      @if (busy()) {\n        {{ 'nh-two-factor.ui.verifying' | translate }}\n      } @else {\n        {{ (usesCode() ? 'nh-two-factor.ui.verify' : 'nh-two-factor.ui.use-passkey') | translate }}\n      }\n    </button>\n    <button type=\"button\" class=\"nh-two-factor__button\" [disabled]=\"busy()\" (click)=\"cancelled.emit()\">\n      {{ 'nh-two-factor.ui.cancel' | translate }}\n    </button>\n  </div>\n</form>\n", styles: [":host{display:block;min-width:0;color:var(--nh-color-text, #1f2933)}.nh-two-factor{display:flex;flex-direction:column;gap:1rem;min-width:0}.nh-two-factor__title{margin:0;font-size:1.125rem;font-weight:650}.nh-two-factor__subtitle{margin:0;font-size:1rem;font-weight:650}.nh-two-factor__text,.nh-two-factor__hint{margin:0;overflow-wrap:anywhere}.nh-two-factor__hint{color:var(--nh-color-muted, #52606d);font-size:.875rem}.nh-two-factor__notice{margin:0;padding:.5rem .75rem;border-radius:.5rem;background:var(--nh-color-success-background, #e7f6ec);color:var(--nh-color-success, #1e6b3a)}.nh-two-factor__methods{display:flex;flex-wrap:wrap;gap:.5rem;min-width:0;margin:0;padding:0;border:0}.nh-two-factor__legend{width:100%;margin-bottom:.25rem;padding:0;font-weight:600}.nh-two-factor__method{position:relative}.nh-two-factor__method input{position:absolute;inset:0;opacity:0;cursor:pointer}.nh-two-factor__method span{display:inline-flex;padding:.5rem .75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-surface, #fff)}.nh-two-factor__method input:checked+span{border-color:var(--nh-color-primary, #2563eb);box-shadow:inset 0 0 0 1px var(--nh-color-primary, #2563eb);font-weight:600}.nh-two-factor__method input:focus-visible+span{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:2px}.nh-two-factor__method input:disabled+span{opacity:.6}.nh-two-factor__field{display:flex;flex-direction:column;gap:.375rem;min-width:0}.nh-two-factor__field label{font-weight:600}.nh-two-factor__input{width:100%;max-width:20rem;padding:.5rem .75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-input-background, #fff);color:inherit;font:inherit}.nh-two-factor__input:focus-visible{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:1px}.nh-two-factor__input[aria-invalid=true]{border-color:var(--nh-color-danger, #b91c1c)}.nh-two-factor__input--code{font-variant-numeric:tabular-nums;letter-spacing:.15em}.nh-two-factor__check{display:flex;align-items:center;gap:.5rem}.nh-two-factor__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.nh-two-factor__button{padding:.5rem 1rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-surface, #fff);color:inherit;font:inherit;cursor:pointer}.nh-two-factor__button:focus-visible{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:2px}.nh-two-factor__button:disabled{opacity:.6;cursor:not-allowed}.nh-two-factor__button--primary{border-color:var(--nh-color-primary, #2563eb);background:var(--nh-color-primary, #2563eb);color:var(--nh-color-on-primary, #fff)}.nh-two-factor__button--danger{border-color:var(--nh-color-danger, #b91c1c);color:var(--nh-color-danger, #b91c1c)}.nh-two-factor__errors{margin:0;padding:.5rem .75rem;border-radius:.5rem;background:var(--nh-color-danger-background, #fdecec);color:var(--nh-color-danger, #b91c1c);list-style:none}.nh-two-factor__setup{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem}.nh-two-factor__qr{width:11rem;height:11rem;padding:.5rem;border-radius:.5rem;background:#fff;image-rendering:pixelated}.nh-two-factor__key{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}.nh-two-factor__codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.5rem;margin:0;padding:0;list-style:none;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.nh-two-factor__codes li{padding:.375rem .5rem;border:1px dashed var(--nh-color-border, #cbd2d9);border-radius:.375rem;text-align:center}.nh-two-factor__section{display:flex;flex-direction:column;gap:.75rem;padding-top:1rem;border-top:1px solid var(--nh-color-border, #cbd2d9)}.nh-two-factor__status{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.nh-two-factor__badge{padding:.125rem .5rem;border-radius:999px;background:var(--nh-color-status-background, #eef2f7);font-size:.8125rem;font-weight:600}.nh-two-factor__badge--on{background:var(--nh-color-success-background, #e7f6ec);color:var(--nh-color-success, #1e6b3a)}.nh-two-factor__list{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none}.nh-two-factor__item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;min-width:0;padding:.75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem}.nh-two-factor__item>div{min-width:0}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: NhTwoFactorChallengeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nh-two-factor-challenge', standalone: true, imports: [TranslatePipe, DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"nh-two-factor\" [attr.aria-labelledby]=\"id + '-title'\" [attr.aria-busy]=\"busy()\" (submit)=\"$event.preventDefault(); verify()\">\n  <h2 class=\"nh-two-factor__title\" [id]=\"id + '-title'\">{{ 'nh-two-factor.ui.challenge-title' | translate }}</h2>\n\n  @if (methods().length > 1) {\n    <fieldset class=\"nh-two-factor__methods\">\n      <legend class=\"nh-two-factor__legend\">{{ 'nh-two-factor.ui.method-label' | translate }}</legend>\n      @for (option of methods(); track option) {\n        <label class=\"nh-two-factor__method\">\n          <input\n            type=\"radio\"\n            [name]=\"id + '-method'\"\n            [value]=\"option\"\n            [checked]=\"method() === option\"\n            [disabled]=\"busy()\"\n            (change)=\"selectMethod(option)\" />\n          <span>{{ 'nh-two-factor.ui.method.' + option | translate }}</span>\n        </label>\n      }\n    </fieldset>\n  }\n\n  @if (method() === 'email') {\n    <p class=\"nh-two-factor__hint\">{{ 'nh-two-factor.ui.email-instructions' | translate }}</p>\n    <div class=\"nh-two-factor__actions\">\n      <button type=\"button\" class=\"nh-two-factor__button\" [disabled]=\"busy()\" (click)=\"sendEmailCode()\">\n        {{ (emailSent() ? 'nh-two-factor.ui.resend-email-code' : 'nh-two-factor.ui.send-email-code') | translate }}\n      </button>\n    </div>\n    @if (emailSent(); as sent) {\n      <p class=\"nh-two-factor__hint\" role=\"status\">\n        {{ 'nh-two-factor.ui.email-code-sent' | translate: { time: (sent.expiresAt | date: 'shortTime') } }}\n      </p>\n    }\n  }\n\n  @if (usesCode()) {\n    <div class=\"nh-two-factor__field\">\n      <label [for]=\"id + '-code'\">{{ 'nh-two-factor.ui.code-label.' + method() | translate }}</label>\n      <input\n        #codeInput\n        type=\"text\"\n        class=\"nh-two-factor__input nh-two-factor__input--code\"\n        autocomplete=\"one-time-code\"\n        spellcheck=\"false\"\n        [id]=\"id + '-code'\"\n        [attr.inputmode]=\"numericCode() ? 'numeric' : 'text'\"\n        [value]=\"code()\"\n        [disabled]=\"busy()\"\n        [attr.aria-invalid]=\"errorKeys().length > 0 ? true : null\"\n        [attr.aria-describedby]=\"errorKeys().length > 0 ? id + '-errors' : null\"\n        (input)=\"code.set(value($event))\" />\n    </div>\n  } @else {\n    <p class=\"nh-two-factor__hint\">{{ 'nh-two-factor.ui.passkey-verify-instructions' | translate }}</p>\n  }\n\n  @if (offerRememberDevice()) {\n    <label class=\"nh-two-factor__check\">\n      <input type=\"checkbox\" [checked]=\"rememberDevice()\" [disabled]=\"busy()\" (change)=\"rememberDevice.set(checked($event))\" />\n      <span>{{ 'nh-two-factor.ui.remember-device' | translate }}</span>\n    </label>\n  }\n\n  <div [id]=\"id + '-errors'\" aria-live=\"assertive\">\n    @if (errorKeys().length > 0) {\n      <ul class=\"nh-two-factor__errors\" role=\"alert\">\n        @for (key of errorKeys(); track key) {\n          <li>{{ key | translate }}</li>\n        }\n      </ul>\n    }\n  </div>\n\n  <div class=\"nh-two-factor__actions\">\n    <button type=\"submit\" class=\"nh-two-factor__button nh-two-factor__button--primary\" [disabled]=\"busy()\">\n      @if (busy()) {\n        {{ 'nh-two-factor.ui.verifying' | translate }}\n      } @else {\n        {{ (usesCode() ? 'nh-two-factor.ui.verify' : 'nh-two-factor.ui.use-passkey') | translate }}\n      }\n    </button>\n    <button type=\"button\" class=\"nh-two-factor__button\" [disabled]=\"busy()\" (click)=\"cancelled.emit()\">\n      {{ 'nh-two-factor.ui.cancel' | translate }}\n    </button>\n  </div>\n</form>\n", styles: [":host{display:block;min-width:0;color:var(--nh-color-text, #1f2933)}.nh-two-factor{display:flex;flex-direction:column;gap:1rem;min-width:0}.nh-two-factor__title{margin:0;font-size:1.125rem;font-weight:650}.nh-two-factor__subtitle{margin:0;font-size:1rem;font-weight:650}.nh-two-factor__text,.nh-two-factor__hint{margin:0;overflow-wrap:anywhere}.nh-two-factor__hint{color:var(--nh-color-muted, #52606d);font-size:.875rem}.nh-two-factor__notice{margin:0;padding:.5rem .75rem;border-radius:.5rem;background:var(--nh-color-success-background, #e7f6ec);color:var(--nh-color-success, #1e6b3a)}.nh-two-factor__methods{display:flex;flex-wrap:wrap;gap:.5rem;min-width:0;margin:0;padding:0;border:0}.nh-two-factor__legend{width:100%;margin-bottom:.25rem;padding:0;font-weight:600}.nh-two-factor__method{position:relative}.nh-two-factor__method input{position:absolute;inset:0;opacity:0;cursor:pointer}.nh-two-factor__method span{display:inline-flex;padding:.5rem .75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-surface, #fff)}.nh-two-factor__method input:checked+span{border-color:var(--nh-color-primary, #2563eb);box-shadow:inset 0 0 0 1px var(--nh-color-primary, #2563eb);font-weight:600}.nh-two-factor__method input:focus-visible+span{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:2px}.nh-two-factor__method input:disabled+span{opacity:.6}.nh-two-factor__field{display:flex;flex-direction:column;gap:.375rem;min-width:0}.nh-two-factor__field label{font-weight:600}.nh-two-factor__input{width:100%;max-width:20rem;padding:.5rem .75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-input-background, #fff);color:inherit;font:inherit}.nh-two-factor__input:focus-visible{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:1px}.nh-two-factor__input[aria-invalid=true]{border-color:var(--nh-color-danger, #b91c1c)}.nh-two-factor__input--code{font-variant-numeric:tabular-nums;letter-spacing:.15em}.nh-two-factor__check{display:flex;align-items:center;gap:.5rem}.nh-two-factor__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.nh-two-factor__button{padding:.5rem 1rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-surface, #fff);color:inherit;font:inherit;cursor:pointer}.nh-two-factor__button:focus-visible{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:2px}.nh-two-factor__button:disabled{opacity:.6;cursor:not-allowed}.nh-two-factor__button--primary{border-color:var(--nh-color-primary, #2563eb);background:var(--nh-color-primary, #2563eb);color:var(--nh-color-on-primary, #fff)}.nh-two-factor__button--danger{border-color:var(--nh-color-danger, #b91c1c);color:var(--nh-color-danger, #b91c1c)}.nh-two-factor__errors{margin:0;padding:.5rem .75rem;border-radius:.5rem;background:var(--nh-color-danger-background, #fdecec);color:var(--nh-color-danger, #b91c1c);list-style:none}.nh-two-factor__setup{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem}.nh-two-factor__qr{width:11rem;height:11rem;padding:.5rem;border-radius:.5rem;background:#fff;image-rendering:pixelated}.nh-two-factor__key{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}.nh-two-factor__codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.5rem;margin:0;padding:0;list-style:none;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.nh-two-factor__codes li{padding:.375rem .5rem;border:1px dashed var(--nh-color-border, #cbd2d9);border-radius:.375rem;text-align:center}.nh-two-factor__section{display:flex;flex-direction:column;gap:.75rem;padding-top:1rem;border-top:1px solid var(--nh-color-border, #cbd2d9)}.nh-two-factor__status{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.nh-two-factor__badge{padding:.125rem .5rem;border-radius:999px;background:var(--nh-color-status-background, #eef2f7);font-size:.8125rem;font-weight:600}.nh-two-factor__badge--on{background:var(--nh-color-success-background, #e7f6ec);color:var(--nh-color-success, #1e6b3a)}.nh-two-factor__list{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none}.nh-two-factor__item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;min-width:0;padding:.75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem}.nh-two-factor__item>div{min-width:0}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { codeInput: [{ type: i0.ViewChild, args: ['codeInput', { isSignal: true }] }], challenge: [{ type: i0.Input, args: [{ isSignal: true, alias: "challenge", required: true }] }], allowRememberDevice: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowRememberDevice", required: false }] }], authenticated: [{ type: i0.Output, args: ["authenticated"] }], expired: [{ type: i0.Output, args: ["expired"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
+
+let nextId$3 = 0;
+/**
+ * Shows recovery codes once, with copy and download actions. The user confirms that the
+ * codes were saved before continuing.
+ */
+class NhTwoFactorRecoveryCodesComponent {
+    constructor() {
+        this.codes = input.required(...(ngDevMode ? [{ debugName: "codes" }] : []));
+        /** File name of the downloaded codes. */
+        this.fileName = input('recovery-codes.txt', ...(ngDevMode ? [{ debugName: "fileName" }] : []));
+        this.acknowledged = output();
+        this.id = `nh-two-factor-recovery-codes-${nextId$3++}`;
+        this.saved = signal(false, ...(ngDevMode ? [{ debugName: "saved" }] : []));
+        this.copied = signal(false, ...(ngDevMode ? [{ debugName: "copied" }] : []));
+        this.checked = nhTwoFactorInputChecked;
+        inject(NhTwoFactorTranslationMerger).start();
+    }
+    async copy() {
+        try {
+            await navigator.clipboard.writeText(this.codes().join('\n'));
+            this.copied.set(true);
+        }
+        catch {
+            // Clipboard access can be denied; the codes stay visible for manual copying.
+            this.copied.set(false);
+        }
+    }
+    download() {
+        const url = URL.createObjectURL(new Blob([this.codes().join('\r\n') + '\r\n'], { type: 'text/plain' }));
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = this.fileName();
+        link.click();
+        URL.revokeObjectURL(url);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: NhTwoFactorRecoveryCodesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.28", type: NhTwoFactorRecoveryCodesComponent, isStandalone: true, selector: "nh-two-factor-recovery-codes", inputs: { codes: { classPropertyName: "codes", publicName: "codes", isSignal: true, isRequired: true, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { acknowledged: "acknowledged" }, ngImport: i0, template: "<section class=\"nh-two-factor\" [attr.aria-labelledby]=\"id + '-title'\">\n  <h3 class=\"nh-two-factor__subtitle\" [id]=\"id + '-title'\">{{ 'nh-two-factor.ui.recovery-codes-title' | translate }}</h3>\n  <p class=\"nh-two-factor__text\">{{ 'nh-two-factor.ui.recovery-codes-instructions' | translate }}</p>\n\n  <ul class=\"nh-two-factor__codes\" [attr.aria-labelledby]=\"id + '-title'\">\n    @for (code of codes(); track code) {\n      <li>{{ code }}</li>\n    }\n  </ul>\n\n  <div class=\"nh-two-factor__actions\">\n    <button type=\"button\" class=\"nh-two-factor__button\" (click)=\"copy()\">\n      {{ (copied() ? 'nh-two-factor.ui.copied' : 'nh-two-factor.ui.copy') | translate }}\n    </button>\n    <button type=\"button\" class=\"nh-two-factor__button\" (click)=\"download()\">\n      {{ 'nh-two-factor.ui.download' | translate }}\n    </button>\n  </div>\n\n  <label class=\"nh-two-factor__check\">\n    <input type=\"checkbox\" [checked]=\"saved()\" (change)=\"saved.set(checked($event))\" />\n    <span>{{ 'nh-two-factor.ui.recovery-codes-saved' | translate }}</span>\n  </label>\n\n  <div class=\"nh-two-factor__actions\">\n    <button type=\"button\" class=\"nh-two-factor__button nh-two-factor__button--primary\" [disabled]=\"!saved()\" (click)=\"acknowledged.emit()\">\n      {{ 'nh-two-factor.ui.continue' | translate }}\n    </button>\n  </div>\n</section>\n", styles: [":host{display:block;min-width:0;color:var(--nh-color-text, #1f2933)}.nh-two-factor{display:flex;flex-direction:column;gap:1rem;min-width:0}.nh-two-factor__title{margin:0;font-size:1.125rem;font-weight:650}.nh-two-factor__subtitle{margin:0;font-size:1rem;font-weight:650}.nh-two-factor__text,.nh-two-factor__hint{margin:0;overflow-wrap:anywhere}.nh-two-factor__hint{color:var(--nh-color-muted, #52606d);font-size:.875rem}.nh-two-factor__notice{margin:0;padding:.5rem .75rem;border-radius:.5rem;background:var(--nh-color-success-background, #e7f6ec);color:var(--nh-color-success, #1e6b3a)}.nh-two-factor__methods{display:flex;flex-wrap:wrap;gap:.5rem;min-width:0;margin:0;padding:0;border:0}.nh-two-factor__legend{width:100%;margin-bottom:.25rem;padding:0;font-weight:600}.nh-two-factor__method{position:relative}.nh-two-factor__method input{position:absolute;inset:0;opacity:0;cursor:pointer}.nh-two-factor__method span{display:inline-flex;padding:.5rem .75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-surface, #fff)}.nh-two-factor__method input:checked+span{border-color:var(--nh-color-primary, #2563eb);box-shadow:inset 0 0 0 1px var(--nh-color-primary, #2563eb);font-weight:600}.nh-two-factor__method input:focus-visible+span{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:2px}.nh-two-factor__method input:disabled+span{opacity:.6}.nh-two-factor__field{display:flex;flex-direction:column;gap:.375rem;min-width:0}.nh-two-factor__field label{font-weight:600}.nh-two-factor__input{width:100%;max-width:20rem;padding:.5rem .75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-input-background, #fff);color:inherit;font:inherit}.nh-two-factor__input:focus-visible{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:1px}.nh-two-factor__input[aria-invalid=true]{border-color:var(--nh-color-danger, #b91c1c)}.nh-two-factor__input--code{font-variant-numeric:tabular-nums;letter-spacing:.15em}.nh-two-factor__check{display:flex;align-items:center;gap:.5rem}.nh-two-factor__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.nh-two-factor__button{padding:.5rem 1rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-surface, #fff);color:inherit;font:inherit;cursor:pointer}.nh-two-factor__button:focus-visible{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:2px}.nh-two-factor__button:disabled{opacity:.6;cursor:not-allowed}.nh-two-factor__button--primary{border-color:var(--nh-color-primary, #2563eb);background:var(--nh-color-primary, #2563eb);color:var(--nh-color-on-primary, #fff)}.nh-two-factor__button--danger{border-color:var(--nh-color-danger, #b91c1c);color:var(--nh-color-danger, #b91c1c)}.nh-two-factor__errors{margin:0;padding:.5rem .75rem;border-radius:.5rem;background:var(--nh-color-danger-background, #fdecec);color:var(--nh-color-danger, #b91c1c);list-style:none}.nh-two-factor__setup{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem}.nh-two-factor__qr{width:11rem;height:11rem;padding:.5rem;border-radius:.5rem;background:#fff;image-rendering:pixelated}.nh-two-factor__key{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}.nh-two-factor__codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.5rem;margin:0;padding:0;list-style:none;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.nh-two-factor__codes li{padding:.375rem .5rem;border:1px dashed var(--nh-color-border, #cbd2d9);border-radius:.375rem;text-align:center}.nh-two-factor__section{display:flex;flex-direction:column;gap:.75rem;padding-top:1rem;border-top:1px solid var(--nh-color-border, #cbd2d9)}.nh-two-factor__status{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.nh-two-factor__badge{padding:.125rem .5rem;border-radius:999px;background:var(--nh-color-status-background, #eef2f7);font-size:.8125rem;font-weight:600}.nh-two-factor__badge--on{background:var(--nh-color-success-background, #e7f6ec);color:var(--nh-color-success, #1e6b3a)}.nh-two-factor__list{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none}.nh-two-factor__item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;min-width:0;padding:.75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem}.nh-two-factor__item>div{min-width:0}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: NhTwoFactorRecoveryCodesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nh-two-factor-recovery-codes', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"nh-two-factor\" [attr.aria-labelledby]=\"id + '-title'\">\n  <h3 class=\"nh-two-factor__subtitle\" [id]=\"id + '-title'\">{{ 'nh-two-factor.ui.recovery-codes-title' | translate }}</h3>\n  <p class=\"nh-two-factor__text\">{{ 'nh-two-factor.ui.recovery-codes-instructions' | translate }}</p>\n\n  <ul class=\"nh-two-factor__codes\" [attr.aria-labelledby]=\"id + '-title'\">\n    @for (code of codes(); track code) {\n      <li>{{ code }}</li>\n    }\n  </ul>\n\n  <div class=\"nh-two-factor__actions\">\n    <button type=\"button\" class=\"nh-two-factor__button\" (click)=\"copy()\">\n      {{ (copied() ? 'nh-two-factor.ui.copied' : 'nh-two-factor.ui.copy') | translate }}\n    </button>\n    <button type=\"button\" class=\"nh-two-factor__button\" (click)=\"download()\">\n      {{ 'nh-two-factor.ui.download' | translate }}\n    </button>\n  </div>\n\n  <label class=\"nh-two-factor__check\">\n    <input type=\"checkbox\" [checked]=\"saved()\" (change)=\"saved.set(checked($event))\" />\n    <span>{{ 'nh-two-factor.ui.recovery-codes-saved' | translate }}</span>\n  </label>\n\n  <div class=\"nh-two-factor__actions\">\n    <button type=\"button\" class=\"nh-two-factor__button nh-two-factor__button--primary\" [disabled]=\"!saved()\" (click)=\"acknowledged.emit()\">\n      {{ 'nh-two-factor.ui.continue' | translate }}\n    </button>\n  </div>\n</section>\n", styles: [":host{display:block;min-width:0;color:var(--nh-color-text, #1f2933)}.nh-two-factor{display:flex;flex-direction:column;gap:1rem;min-width:0}.nh-two-factor__title{margin:0;font-size:1.125rem;font-weight:650}.nh-two-factor__subtitle{margin:0;font-size:1rem;font-weight:650}.nh-two-factor__text,.nh-two-factor__hint{margin:0;overflow-wrap:anywhere}.nh-two-factor__hint{color:var(--nh-color-muted, #52606d);font-size:.875rem}.nh-two-factor__notice{margin:0;padding:.5rem .75rem;border-radius:.5rem;background:var(--nh-color-success-background, #e7f6ec);color:var(--nh-color-success, #1e6b3a)}.nh-two-factor__methods{display:flex;flex-wrap:wrap;gap:.5rem;min-width:0;margin:0;padding:0;border:0}.nh-two-factor__legend{width:100%;margin-bottom:.25rem;padding:0;font-weight:600}.nh-two-factor__method{position:relative}.nh-two-factor__method input{position:absolute;inset:0;opacity:0;cursor:pointer}.nh-two-factor__method span{display:inline-flex;padding:.5rem .75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-surface, #fff)}.nh-two-factor__method input:checked+span{border-color:var(--nh-color-primary, #2563eb);box-shadow:inset 0 0 0 1px var(--nh-color-primary, #2563eb);font-weight:600}.nh-two-factor__method input:focus-visible+span{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:2px}.nh-two-factor__method input:disabled+span{opacity:.6}.nh-two-factor__field{display:flex;flex-direction:column;gap:.375rem;min-width:0}.nh-two-factor__field label{font-weight:600}.nh-two-factor__input{width:100%;max-width:20rem;padding:.5rem .75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-input-background, #fff);color:inherit;font:inherit}.nh-two-factor__input:focus-visible{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:1px}.nh-two-factor__input[aria-invalid=true]{border-color:var(--nh-color-danger, #b91c1c)}.nh-two-factor__input--code{font-variant-numeric:tabular-nums;letter-spacing:.15em}.nh-two-factor__check{display:flex;align-items:center;gap:.5rem}.nh-two-factor__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.nh-two-factor__button{padding:.5rem 1rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-surface, #fff);color:inherit;font:inherit;cursor:pointer}.nh-two-factor__button:focus-visible{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:2px}.nh-two-factor__button:disabled{opacity:.6;cursor:not-allowed}.nh-two-factor__button--primary{border-color:var(--nh-color-primary, #2563eb);background:var(--nh-color-primary, #2563eb);color:var(--nh-color-on-primary, #fff)}.nh-two-factor__button--danger{border-color:var(--nh-color-danger, #b91c1c);color:var(--nh-color-danger, #b91c1c)}.nh-two-factor__errors{margin:0;padding:.5rem .75rem;border-radius:.5rem;background:var(--nh-color-danger-background, #fdecec);color:var(--nh-color-danger, #b91c1c);list-style:none}.nh-two-factor__setup{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem}.nh-two-factor__qr{width:11rem;height:11rem;padding:.5rem;border-radius:.5rem;background:#fff;image-rendering:pixelated}.nh-two-factor__key{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}.nh-two-factor__codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.5rem;margin:0;padding:0;list-style:none;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.nh-two-factor__codes li{padding:.375rem .5rem;border:1px dashed var(--nh-color-border, #cbd2d9);border-radius:.375rem;text-align:center}.nh-two-factor__section{display:flex;flex-direction:column;gap:.75rem;padding-top:1rem;border-top:1px solid var(--nh-color-border, #cbd2d9)}.nh-two-factor__status{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.nh-two-factor__badge{padding:.125rem .5rem;border-radius:999px;background:var(--nh-color-status-background, #eef2f7);font-size:.8125rem;font-weight:600}.nh-two-factor__badge--on{background:var(--nh-color-success-background, #e7f6ec);color:var(--nh-color-success, #1e6b3a)}.nh-two-factor__list{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none}.nh-two-factor__item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;min-width:0;padding:.75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem}.nh-two-factor__item>div{min-width:0}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { codes: [{ type: i0.Input, args: [{ isSignal: true, alias: "codes", required: true }] }], fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: false }] }], acknowledged: [{ type: i0.Output, args: ["acknowledged"] }] } });
+
+let nextId$2 = 0;
+/**
+ * Enrolls a second factor for a user whom the policy requires to use one, during sign-in.
+ * The session is stored by the auth service; `completed` emits after the user saved the
+ * recovery codes.
+ */
+class NhTwoFactorEnrollmentComponent {
+    constructor() {
+        this.auth = inject(NhAuthService);
+        this.injector = inject(Injector);
+        this.codeInput = viewChild('codeInput', ...(ngDevMode ? [{ debugName: "codeInput" }] : []));
+        /** The enrollment step from the login response (status `enrollment-required`). */
+        this.enrollment = input.required(...(ngDevMode ? [{ debugName: "enrollment" }] : []));
+        this.completed = output();
+        /** The enrollment expired or the account was locked; the user has to sign in again. */
+        this.expired = output();
+        this.cancelled = output();
+        this.id = `nh-two-factor-enrollment-${nextId$2++}`;
+        this.passkeySupported = this.auth.isPasskeySupported();
+        this.selectedMethod = signal(null, ...(ngDevMode ? [{ debugName: "selectedMethod" }] : []));
+        this.setup = signal(null, ...(ngDevMode ? [{ debugName: "setup" }] : []));
+        this.emailSent = signal(null, ...(ngDevMode ? [{ debugName: "emailSent" }] : []));
+        this.code = signal('', ...(ngDevMode ? [{ debugName: "code" }] : []));
+        this.passkeyName = signal('', ...(ngDevMode ? [{ debugName: "passkeyName" }] : []));
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : []));
+        this.errorKeys = signal([], ...(ngDevMode ? [{ debugName: "errorKeys" }] : []));
+        this.result = signal(null, ...(ngDevMode ? [{ debugName: "result" }] : []));
+        this.methods = computed(() => this.enrollment().methods
+            .filter(method => method !== NhTwoFactorMethods.passkey || this.passkeySupported), ...(ngDevMode ? [{ debugName: "methods" }] : []));
+        this.method = computed(() => this.selectedMethod() ?? this.methods()[0] ?? NhTwoFactorMethods.authenticator, ...(ngDevMode ? [{ debugName: "method" }] : []));
+        this.value = nhTwoFactorInputValue;
+        inject(NhTwoFactorTranslationMerger).start();
+    }
+    ngOnInit() {
+        if (this.method() === NhTwoFactorMethods.authenticator) {
+            void this.startAuthenticator();
+        }
+    }
+    selectMethod(method) {
+        this.selectedMethod.set(method);
+        this.code.set('');
+        this.errorKeys.set([]);
+        if (method === NhTwoFactorMethods.authenticator && !this.setup()) {
+            void this.startAuthenticator();
+        }
+    }
+    async startAuthenticator() {
+        const setup = await this.run(() => this.auth.beginEnrollmentAuthenticatorSetup(this.token()));
+        if (setup) {
+            this.setup.set(setup);
+            this.focusCode();
+        }
+    }
+    async sendEmailCode() {
+        const sent = await this.run(() => this.auth.sendEnrollmentEmailCode(this.token()));
+        if (sent) {
+            this.emailSent.set(sent);
+            this.focusCode();
+        }
+    }
+    async confirm() {
+        if (this.busy()) {
+            return;
+        }
+        const method = this.method();
+        if (method === NhTwoFactorMethods.passkey) {
+            this.complete(await this.run(() => this.auth.enrollPasskey(this.token(), this.passkeyName().trim() || undefined)));
+            return;
+        }
+        const code = this.code().trim();
+        if (!code) {
+            this.errorKeys.set(['nh-two-factor.invalid-code']);
+            return;
+        }
+        const confirmation = method === NhTwoFactorMethods.email
+            ? () => this.auth.confirmEnrollmentEmail(this.token(), code)
+            : () => this.auth.confirmEnrollmentAuthenticator(this.token(), code);
+        this.complete(await this.run(confirmation));
+    }
+    /** Emits the result after the user saved the recovery codes. */
+    finish() {
+        const result = this.result();
+        if (result) {
+            this.completed.emit(result);
+        }
+    }
+    complete(result) {
+        if (!result) {
+            this.code.set('');
+            return;
+        }
+        if (result.recoveryCodes?.length) {
+            this.result.set(result);
+            return;
+        }
+        this.completed.emit(result);
+    }
+    async run(action) {
+        this.busy.set(true);
+        this.errorKeys.set([]);
+        const result = await action();
+        this.busy.set(false);
+        if (!result.isSuccess) {
+            this.errorKeys.set(nhTwoFactorErrorKeys(result));
+            if (nhTwoFactorStepEnded(result)) {
+                this.expired.emit();
+            }
+            return undefined;
+        }
+        return result.data;
+    }
+    token() {
+        return this.enrollment().challengeToken;
+    }
+    focusCode() {
+        afterNextRender(() => this.codeInput()?.nativeElement.focus(), { injector: this.injector });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: NhTwoFactorEnrollmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.28", type: NhTwoFactorEnrollmentComponent, isStandalone: true, selector: "nh-two-factor-enrollment", inputs: { enrollment: { classPropertyName: "enrollment", publicName: "enrollment", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { completed: "completed", expired: "expired", cancelled: "cancelled" }, viewQueries: [{ propertyName: "codeInput", first: true, predicate: ["codeInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (result(); as completedResult) {\n  <nh-two-factor-recovery-codes [codes]=\"completedResult.recoveryCodes ?? []\" (acknowledged)=\"finish()\" />\n} @else {\n  <form class=\"nh-two-factor\" [attr.aria-labelledby]=\"id + '-title'\" [attr.aria-busy]=\"busy()\" (submit)=\"$event.preventDefault(); confirm()\">\n    <h2 class=\"nh-two-factor__title\" [id]=\"id + '-title'\">{{ 'nh-two-factor.ui.enrollment-title' | translate }}</h2>\n    <p class=\"nh-two-factor__text\">{{ 'nh-two-factor.ui.enrollment-instructions' | translate }}</p>\n\n    @if (methods().length > 1) {\n      <fieldset class=\"nh-two-factor__methods\">\n        <legend class=\"nh-two-factor__legend\">{{ 'nh-two-factor.ui.method-label' | translate }}</legend>\n        @for (option of methods(); track option) {\n          <label class=\"nh-two-factor__method\">\n            <input\n              type=\"radio\"\n              [name]=\"id + '-method'\"\n              [value]=\"option\"\n              [checked]=\"method() === option\"\n              [disabled]=\"busy()\"\n              (change)=\"selectMethod(option)\" />\n            <span>{{ 'nh-two-factor.ui.method.' + option | translate }}</span>\n          </label>\n        }\n      </fieldset>\n    }\n\n    @switch (method()) {\n      @case ('authenticator') {\n        <p class=\"nh-two-factor__hint\">{{ 'nh-two-factor.ui.authenticator-instructions' | translate }}</p>\n        @if (setup(); as authenticator) {\n          <div class=\"nh-two-factor__setup\">\n            @if (authenticator.qrCodeDataUri) {\n              <img class=\"nh-two-factor__qr\" [src]=\"authenticator.qrCodeDataUri\" [alt]=\"'nh-two-factor.ui.qr-code-alt' | translate\" />\n            }\n            <p class=\"nh-two-factor__text\">\n              {{ 'nh-two-factor.ui.shared-key' | translate }}:\n              <span class=\"nh-two-factor__key\">{{ authenticator.sharedKey }}</span>\n            </p>\n          </div>\n        } @else if (busy()) {\n          <p class=\"nh-two-factor__hint\" role=\"status\">{{ 'nh-two-factor.ui.loading' | translate }}</p>\n        }\n      }\n      @case ('email') {\n        <p class=\"nh-two-factor__hint\">{{ 'nh-two-factor.ui.email-instructions' | translate }}</p>\n        <div class=\"nh-two-factor__actions\">\n          <button type=\"button\" class=\"nh-two-factor__button\" [disabled]=\"busy()\" (click)=\"sendEmailCode()\">\n            {{ (emailSent() ? 'nh-two-factor.ui.resend-email-code' : 'nh-two-factor.ui.send-email-code') | translate }}\n          </button>\n        </div>\n        @if (emailSent(); as sent) {\n          <p class=\"nh-two-factor__hint\" role=\"status\">\n            {{ 'nh-two-factor.ui.email-code-sent' | translate: { time: (sent.expiresAt | date: 'shortTime') } }}\n          </p>\n        }\n      }\n      @case ('passkey') {\n        <p class=\"nh-two-factor__hint\">{{ 'nh-two-factor.ui.passkey-instructions' | translate }}</p>\n        <div class=\"nh-two-factor__field\">\n          <label [for]=\"id + '-passkey-name'\">{{ 'nh-two-factor.ui.passkey-name' | translate }}</label>\n          <input\n            type=\"text\"\n            class=\"nh-two-factor__input\"\n            maxlength=\"100\"\n            autocomplete=\"off\"\n            [id]=\"id + '-passkey-name'\"\n            [value]=\"passkeyName()\"\n            [disabled]=\"busy()\"\n            (input)=\"passkeyName.set(value($event))\" />\n        </div>\n      }\n    }\n\n    @if (method() !== 'passkey' && (method() !== 'authenticator' || setup())) {\n      <div class=\"nh-two-factor__field\">\n        <label [for]=\"id + '-code'\">{{ 'nh-two-factor.ui.code-label.' + method() | translate }}</label>\n        <input\n          #codeInput\n          type=\"text\"\n          class=\"nh-two-factor__input nh-two-factor__input--code\"\n          inputmode=\"numeric\"\n          autocomplete=\"one-time-code\"\n          spellcheck=\"false\"\n          [id]=\"id + '-code'\"\n          [value]=\"code()\"\n          [disabled]=\"busy()\"\n          [attr.aria-invalid]=\"errorKeys().length > 0 ? true : null\"\n          [attr.aria-describedby]=\"errorKeys().length > 0 ? id + '-errors' : null\"\n          (input)=\"code.set(value($event))\" />\n      </div>\n    }\n\n    <div [id]=\"id + '-errors'\" aria-live=\"assertive\">\n      @if (errorKeys().length > 0) {\n        <ul class=\"nh-two-factor__errors\" role=\"alert\">\n          @for (key of errorKeys(); track key) {\n            <li>{{ key | translate }}</li>\n          }\n        </ul>\n      }\n    </div>\n\n    <div class=\"nh-two-factor__actions\">\n      <button type=\"submit\" class=\"nh-two-factor__button nh-two-factor__button--primary\" [disabled]=\"busy()\">\n        {{ (method() === 'passkey' ? 'nh-two-factor.ui.create-passkey' : 'nh-two-factor.ui.confirm') | translate }}\n      </button>\n      <button type=\"button\" class=\"nh-two-factor__button\" [disabled]=\"busy()\" (click)=\"cancelled.emit()\">\n        {{ 'nh-two-factor.ui.cancel' | translate }}\n      </button>\n    </div>\n  </form>\n}\n", styles: [":host{display:block;min-width:0;color:var(--nh-color-text, #1f2933)}.nh-two-factor{display:flex;flex-direction:column;gap:1rem;min-width:0}.nh-two-factor__title{margin:0;font-size:1.125rem;font-weight:650}.nh-two-factor__subtitle{margin:0;font-size:1rem;font-weight:650}.nh-two-factor__text,.nh-two-factor__hint{margin:0;overflow-wrap:anywhere}.nh-two-factor__hint{color:var(--nh-color-muted, #52606d);font-size:.875rem}.nh-two-factor__notice{margin:0;padding:.5rem .75rem;border-radius:.5rem;background:var(--nh-color-success-background, #e7f6ec);color:var(--nh-color-success, #1e6b3a)}.nh-two-factor__methods{display:flex;flex-wrap:wrap;gap:.5rem;min-width:0;margin:0;padding:0;border:0}.nh-two-factor__legend{width:100%;margin-bottom:.25rem;padding:0;font-weight:600}.nh-two-factor__method{position:relative}.nh-two-factor__method input{position:absolute;inset:0;opacity:0;cursor:pointer}.nh-two-factor__method span{display:inline-flex;padding:.5rem .75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-surface, #fff)}.nh-two-factor__method input:checked+span{border-color:var(--nh-color-primary, #2563eb);box-shadow:inset 0 0 0 1px var(--nh-color-primary, #2563eb);font-weight:600}.nh-two-factor__method input:focus-visible+span{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:2px}.nh-two-factor__method input:disabled+span{opacity:.6}.nh-two-factor__field{display:flex;flex-direction:column;gap:.375rem;min-width:0}.nh-two-factor__field label{font-weight:600}.nh-two-factor__input{width:100%;max-width:20rem;padding:.5rem .75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-input-background, #fff);color:inherit;font:inherit}.nh-two-factor__input:focus-visible{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:1px}.nh-two-factor__input[aria-invalid=true]{border-color:var(--nh-color-danger, #b91c1c)}.nh-two-factor__input--code{font-variant-numeric:tabular-nums;letter-spacing:.15em}.nh-two-factor__check{display:flex;align-items:center;gap:.5rem}.nh-two-factor__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.nh-two-factor__button{padding:.5rem 1rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-surface, #fff);color:inherit;font:inherit;cursor:pointer}.nh-two-factor__button:focus-visible{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:2px}.nh-two-factor__button:disabled{opacity:.6;cursor:not-allowed}.nh-two-factor__button--primary{border-color:var(--nh-color-primary, #2563eb);background:var(--nh-color-primary, #2563eb);color:var(--nh-color-on-primary, #fff)}.nh-two-factor__button--danger{border-color:var(--nh-color-danger, #b91c1c);color:var(--nh-color-danger, #b91c1c)}.nh-two-factor__errors{margin:0;padding:.5rem .75rem;border-radius:.5rem;background:var(--nh-color-danger-background, #fdecec);color:var(--nh-color-danger, #b91c1c);list-style:none}.nh-two-factor__setup{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem}.nh-two-factor__qr{width:11rem;height:11rem;padding:.5rem;border-radius:.5rem;background:#fff;image-rendering:pixelated}.nh-two-factor__key{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}.nh-two-factor__codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.5rem;margin:0;padding:0;list-style:none;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.nh-two-factor__codes li{padding:.375rem .5rem;border:1px dashed var(--nh-color-border, #cbd2d9);border-radius:.375rem;text-align:center}.nh-two-factor__section{display:flex;flex-direction:column;gap:.75rem;padding-top:1rem;border-top:1px solid var(--nh-color-border, #cbd2d9)}.nh-two-factor__status{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.nh-two-factor__badge{padding:.125rem .5rem;border-radius:999px;background:var(--nh-color-status-background, #eef2f7);font-size:.8125rem;font-weight:600}.nh-two-factor__badge--on{background:var(--nh-color-success-background, #e7f6ec);color:var(--nh-color-success, #1e6b3a)}.nh-two-factor__list{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none}.nh-two-factor__item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;min-width:0;padding:.75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem}.nh-two-factor__item>div{min-width:0}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: NhTwoFactorRecoveryCodesComponent, selector: "nh-two-factor-recovery-codes", inputs: ["codes", "fileName"], outputs: ["acknowledged"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: NhTwoFactorEnrollmentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nh-two-factor-enrollment', standalone: true, imports: [TranslatePipe, DatePipe, NhTwoFactorRecoveryCodesComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (result(); as completedResult) {\n  <nh-two-factor-recovery-codes [codes]=\"completedResult.recoveryCodes ?? []\" (acknowledged)=\"finish()\" />\n} @else {\n  <form class=\"nh-two-factor\" [attr.aria-labelledby]=\"id + '-title'\" [attr.aria-busy]=\"busy()\" (submit)=\"$event.preventDefault(); confirm()\">\n    <h2 class=\"nh-two-factor__title\" [id]=\"id + '-title'\">{{ 'nh-two-factor.ui.enrollment-title' | translate }}</h2>\n    <p class=\"nh-two-factor__text\">{{ 'nh-two-factor.ui.enrollment-instructions' | translate }}</p>\n\n    @if (methods().length > 1) {\n      <fieldset class=\"nh-two-factor__methods\">\n        <legend class=\"nh-two-factor__legend\">{{ 'nh-two-factor.ui.method-label' | translate }}</legend>\n        @for (option of methods(); track option) {\n          <label class=\"nh-two-factor__method\">\n            <input\n              type=\"radio\"\n              [name]=\"id + '-method'\"\n              [value]=\"option\"\n              [checked]=\"method() === option\"\n              [disabled]=\"busy()\"\n              (change)=\"selectMethod(option)\" />\n            <span>{{ 'nh-two-factor.ui.method.' + option | translate }}</span>\n          </label>\n        }\n      </fieldset>\n    }\n\n    @switch (method()) {\n      @case ('authenticator') {\n        <p class=\"nh-two-factor__hint\">{{ 'nh-two-factor.ui.authenticator-instructions' | translate }}</p>\n        @if (setup(); as authenticator) {\n          <div class=\"nh-two-factor__setup\">\n            @if (authenticator.qrCodeDataUri) {\n              <img class=\"nh-two-factor__qr\" [src]=\"authenticator.qrCodeDataUri\" [alt]=\"'nh-two-factor.ui.qr-code-alt' | translate\" />\n            }\n            <p class=\"nh-two-factor__text\">\n              {{ 'nh-two-factor.ui.shared-key' | translate }}:\n              <span class=\"nh-two-factor__key\">{{ authenticator.sharedKey }}</span>\n            </p>\n          </div>\n        } @else if (busy()) {\n          <p class=\"nh-two-factor__hint\" role=\"status\">{{ 'nh-two-factor.ui.loading' | translate }}</p>\n        }\n      }\n      @case ('email') {\n        <p class=\"nh-two-factor__hint\">{{ 'nh-two-factor.ui.email-instructions' | translate }}</p>\n        <div class=\"nh-two-factor__actions\">\n          <button type=\"button\" class=\"nh-two-factor__button\" [disabled]=\"busy()\" (click)=\"sendEmailCode()\">\n            {{ (emailSent() ? 'nh-two-factor.ui.resend-email-code' : 'nh-two-factor.ui.send-email-code') | translate }}\n          </button>\n        </div>\n        @if (emailSent(); as sent) {\n          <p class=\"nh-two-factor__hint\" role=\"status\">\n            {{ 'nh-two-factor.ui.email-code-sent' | translate: { time: (sent.expiresAt | date: 'shortTime') } }}\n          </p>\n        }\n      }\n      @case ('passkey') {\n        <p class=\"nh-two-factor__hint\">{{ 'nh-two-factor.ui.passkey-instructions' | translate }}</p>\n        <div class=\"nh-two-factor__field\">\n          <label [for]=\"id + '-passkey-name'\">{{ 'nh-two-factor.ui.passkey-name' | translate }}</label>\n          <input\n            type=\"text\"\n            class=\"nh-two-factor__input\"\n            maxlength=\"100\"\n            autocomplete=\"off\"\n            [id]=\"id + '-passkey-name'\"\n            [value]=\"passkeyName()\"\n            [disabled]=\"busy()\"\n            (input)=\"passkeyName.set(value($event))\" />\n        </div>\n      }\n    }\n\n    @if (method() !== 'passkey' && (method() !== 'authenticator' || setup())) {\n      <div class=\"nh-two-factor__field\">\n        <label [for]=\"id + '-code'\">{{ 'nh-two-factor.ui.code-label.' + method() | translate }}</label>\n        <input\n          #codeInput\n          type=\"text\"\n          class=\"nh-two-factor__input nh-two-factor__input--code\"\n          inputmode=\"numeric\"\n          autocomplete=\"one-time-code\"\n          spellcheck=\"false\"\n          [id]=\"id + '-code'\"\n          [value]=\"code()\"\n          [disabled]=\"busy()\"\n          [attr.aria-invalid]=\"errorKeys().length > 0 ? true : null\"\n          [attr.aria-describedby]=\"errorKeys().length > 0 ? id + '-errors' : null\"\n          (input)=\"code.set(value($event))\" />\n      </div>\n    }\n\n    <div [id]=\"id + '-errors'\" aria-live=\"assertive\">\n      @if (errorKeys().length > 0) {\n        <ul class=\"nh-two-factor__errors\" role=\"alert\">\n          @for (key of errorKeys(); track key) {\n            <li>{{ key | translate }}</li>\n          }\n        </ul>\n      }\n    </div>\n\n    <div class=\"nh-two-factor__actions\">\n      <button type=\"submit\" class=\"nh-two-factor__button nh-two-factor__button--primary\" [disabled]=\"busy()\">\n        {{ (method() === 'passkey' ? 'nh-two-factor.ui.create-passkey' : 'nh-two-factor.ui.confirm') | translate }}\n      </button>\n      <button type=\"button\" class=\"nh-two-factor__button\" [disabled]=\"busy()\" (click)=\"cancelled.emit()\">\n        {{ 'nh-two-factor.ui.cancel' | translate }}\n      </button>\n    </div>\n  </form>\n}\n", styles: [":host{display:block;min-width:0;color:var(--nh-color-text, #1f2933)}.nh-two-factor{display:flex;flex-direction:column;gap:1rem;min-width:0}.nh-two-factor__title{margin:0;font-size:1.125rem;font-weight:650}.nh-two-factor__subtitle{margin:0;font-size:1rem;font-weight:650}.nh-two-factor__text,.nh-two-factor__hint{margin:0;overflow-wrap:anywhere}.nh-two-factor__hint{color:var(--nh-color-muted, #52606d);font-size:.875rem}.nh-two-factor__notice{margin:0;padding:.5rem .75rem;border-radius:.5rem;background:var(--nh-color-success-background, #e7f6ec);color:var(--nh-color-success, #1e6b3a)}.nh-two-factor__methods{display:flex;flex-wrap:wrap;gap:.5rem;min-width:0;margin:0;padding:0;border:0}.nh-two-factor__legend{width:100%;margin-bottom:.25rem;padding:0;font-weight:600}.nh-two-factor__method{position:relative}.nh-two-factor__method input{position:absolute;inset:0;opacity:0;cursor:pointer}.nh-two-factor__method span{display:inline-flex;padding:.5rem .75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-surface, #fff)}.nh-two-factor__method input:checked+span{border-color:var(--nh-color-primary, #2563eb);box-shadow:inset 0 0 0 1px var(--nh-color-primary, #2563eb);font-weight:600}.nh-two-factor__method input:focus-visible+span{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:2px}.nh-two-factor__method input:disabled+span{opacity:.6}.nh-two-factor__field{display:flex;flex-direction:column;gap:.375rem;min-width:0}.nh-two-factor__field label{font-weight:600}.nh-two-factor__input{width:100%;max-width:20rem;padding:.5rem .75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-input-background, #fff);color:inherit;font:inherit}.nh-two-factor__input:focus-visible{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:1px}.nh-two-factor__input[aria-invalid=true]{border-color:var(--nh-color-danger, #b91c1c)}.nh-two-factor__input--code{font-variant-numeric:tabular-nums;letter-spacing:.15em}.nh-two-factor__check{display:flex;align-items:center;gap:.5rem}.nh-two-factor__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.nh-two-factor__button{padding:.5rem 1rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-surface, #fff);color:inherit;font:inherit;cursor:pointer}.nh-two-factor__button:focus-visible{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:2px}.nh-two-factor__button:disabled{opacity:.6;cursor:not-allowed}.nh-two-factor__button--primary{border-color:var(--nh-color-primary, #2563eb);background:var(--nh-color-primary, #2563eb);color:var(--nh-color-on-primary, #fff)}.nh-two-factor__button--danger{border-color:var(--nh-color-danger, #b91c1c);color:var(--nh-color-danger, #b91c1c)}.nh-two-factor__errors{margin:0;padding:.5rem .75rem;border-radius:.5rem;background:var(--nh-color-danger-background, #fdecec);color:var(--nh-color-danger, #b91c1c);list-style:none}.nh-two-factor__setup{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem}.nh-two-factor__qr{width:11rem;height:11rem;padding:.5rem;border-radius:.5rem;background:#fff;image-rendering:pixelated}.nh-two-factor__key{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}.nh-two-factor__codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.5rem;margin:0;padding:0;list-style:none;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.nh-two-factor__codes li{padding:.375rem .5rem;border:1px dashed var(--nh-color-border, #cbd2d9);border-radius:.375rem;text-align:center}.nh-two-factor__section{display:flex;flex-direction:column;gap:.75rem;padding-top:1rem;border-top:1px solid var(--nh-color-border, #cbd2d9)}.nh-two-factor__status{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.nh-two-factor__badge{padding:.125rem .5rem;border-radius:999px;background:var(--nh-color-status-background, #eef2f7);font-size:.8125rem;font-weight:600}.nh-two-factor__badge--on{background:var(--nh-color-success-background, #e7f6ec);color:var(--nh-color-success, #1e6b3a)}.nh-two-factor__list{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none}.nh-two-factor__item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;min-width:0;padding:.75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem}.nh-two-factor__item>div{min-width:0}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { codeInput: [{ type: i0.ViewChild, args: ['codeInput', { isSignal: true }] }], enrollment: [{ type: i0.Input, args: [{ isSignal: true, alias: "enrollment", required: true }] }], completed: [{ type: i0.Output, args: ["completed"] }], expired: [{ type: i0.Output, args: ["expired"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
+
+const passwordReauthentication = 'password';
+let nextId$1 = 0;
+/**
+ * Two-factor settings of the signed-in user: authenticator app, e-mail codes, passkeys,
+ * recovery codes, remembered devices and turning two-factor authentication off. Sensitive
+ * changes ask for the password or a code first.
+ */
+class NhTwoFactorSettingsComponent {
+    constructor() {
+        this.auth = inject(NhAuthService);
+        this.injector = inject(Injector);
+        this.reauthenticationInput = viewChild('reauthenticationInput', ...(ngDevMode ? [{ debugName: "reauthenticationInput" }] : []));
+        this.codeInput = viewChild('codeInput', ...(ngDevMode ? [{ debugName: "codeInput" }] : []));
+        /** Whether the title is visible. Hosts with their own heading hide it; screen readers keep it. */
+        this.showTitle = input(true, ...(ngDevMode ? [{ debugName: "showTitle" }] : []));
+        /** Emits the reloaded status after every saved change. */
+        this.changed = output();
+        this.id = `nh-two-factor-settings-${nextId$1++}`;
+        this.passkeySupported = this.auth.isPasskeySupported();
+        this.status = signal(null, ...(ngDevMode ? [{ debugName: "status" }] : []));
+        this.passkeys = signal([], ...(ngDevMode ? [{ debugName: "passkeys" }] : []));
+        this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : []));
+        this.errorKeys = signal([], ...(ngDevMode ? [{ debugName: "errorKeys" }] : []));
+        this.noticeKey = signal(null, ...(ngDevMode ? [{ debugName: "noticeKey" }] : []));
+        this.setupPanel = signal(null, ...(ngDevMode ? [{ debugName: "setupPanel" }] : []));
+        this.setup = signal(null, ...(ngDevMode ? [{ debugName: "setup" }] : []));
+        this.emailSent = signal(null, ...(ngDevMode ? [{ debugName: "emailSent" }] : []));
+        this.code = signal('', ...(ngDevMode ? [{ debugName: "code" }] : []));
+        this.recoveryCodes = signal(null, ...(ngDevMode ? [{ debugName: "recoveryCodes" }] : []));
+        this.pendingAction = signal(null, ...(ngDevMode ? [{ debugName: "pendingAction" }] : []));
+        this.reauthenticationMethod = signal(passwordReauthentication, ...(ngDevMode ? [{ debugName: "reauthenticationMethod" }] : []));
+        this.reauthenticationSecret = signal('', ...(ngDevMode ? [{ debugName: "reauthenticationSecret" }] : []));
+        this.newPasskeyName = signal('', ...(ngDevMode ? [{ debugName: "newPasskeyName" }] : []));
+        this.renamingId = signal(null, ...(ngDevMode ? [{ debugName: "renamingId" }] : []));
+        this.renameValue = signal('', ...(ngDevMode ? [{ debugName: "renameValue" }] : []));
+        this.enabled = computed(() => this.status()?.enabled === true, ...(ngDevMode ? [{ debugName: "enabled" }] : []));
+        this.required = computed(() => this.status()?.required === true, ...(ngDevMode ? [{ debugName: "required" }] : []));
+        this.hasAuthenticator = computed(() => this.hasMethod(NhTwoFactorMethods.authenticator), ...(ngDevMode ? [{ debugName: "hasAuthenticator" }] : []));
+        this.hasEmail = computed(() => this.hasMethod(NhTwoFactorMethods.email), ...(ngDevMode ? [{ debugName: "hasEmail" }] : []));
+        this.authenticatorAvailable = computed(() => this.isAvailable(NhTwoFactorMethods.authenticator), ...(ngDevMode ? [{ debugName: "authenticatorAvailable" }] : []));
+        this.emailAvailable = computed(() => this.isAvailable(NhTwoFactorMethods.email), ...(ngDevMode ? [{ debugName: "emailAvailable" }] : []));
+        this.passkeysAvailable = computed(() => this.isAvailable(NhTwoFactorMethods.passkey), ...(ngDevMode ? [{ debugName: "passkeysAvailable" }] : []));
+        this.recoveryCodesAvailable = computed(() => this.isAvailable(NhTwoFactorMethods.recoveryCode), ...(ngDevMode ? [{ debugName: "recoveryCodesAvailable" }] : []));
+        this.reauthenticationMethods = computed(() => [
+            passwordReauthentication,
+            ...(this.status()?.methods ?? []).filter(method => method === NhTwoFactorMethods.authenticator || method === NhTwoFactorMethods.recoveryCode)
+        ], ...(ngDevMode ? [{ debugName: "reauthenticationMethods" }] : []));
+        this.value = nhTwoFactorInputValue;
+        inject(NhTwoFactorTranslationMerger).start();
+    }
+    ngOnInit() {
+        void this.load();
+    }
+    async load() {
+        this.loading.set(true);
+        const status = await this.auth.getTwoFactorStatus();
+        if (!status.isSuccess || !status.data) {
+            this.errorKeys.set(nhTwoFactorErrorKeys(status));
+            this.loading.set(false);
+            return;
+        }
+        this.status.set(status.data);
+        if (status.data.availableMethods.includes(NhTwoFactorMethods.passkey)) {
+            const passkeys = await this.auth.getPasskeys();
+            this.passkeys.set(passkeys.data ?? []);
+        }
+        this.loading.set(false);
+    }
+    /** Starts a change, asking for reauthentication first when the change needs it. */
+    request(action) {
+        this.errorKeys.set([]);
+        this.noticeKey.set(null);
+        if (!this.needsReauthentication(action)) {
+            void this.perform(action);
+            return;
+        }
+        this.pendingAction.set(action);
+        this.reauthenticationMethod.set(passwordReauthentication);
+        this.reauthenticationSecret.set('');
+        afterNextRender(() => this.reauthenticationInput()?.nativeElement.focus(), { injector: this.injector });
+    }
+    async confirmReauthentication() {
+        const action = this.pendingAction();
+        const secret = this.reauthenticationSecret().trim();
+        if (!action || this.busy()) {
+            return;
+        }
+        if (!secret) {
+            this.errorKeys.set(['nh-two-factor.reauthentication-required']);
+            return;
+        }
+        const method = this.reauthenticationMethod();
+        const reauthentication = method === passwordReauthentication
+            ? new NhTwoFactorReauthentication({ password: secret })
+            : new NhTwoFactorReauthentication({ method: method, code: secret });
+        this.pendingAction.set(null);
+        this.reauthenticationSecret.set('');
+        await this.perform(action, reauthentication);
+    }
+    cancelReauthentication() {
+        this.pendingAction.set(null);
+        this.reauthenticationSecret.set('');
+        this.errorKeys.set([]);
+    }
+    async confirmSetup() {
+        const code = this.code().trim();
+        if (!code) {
+            this.errorKeys.set(['nh-two-factor.invalid-code']);
+            return;
+        }
+        const change = await this.run(() => this.setupPanel() === 'email'
+            ? this.auth.confirmEmailSetup(code)
+            : this.auth.confirmAuthenticator(code));
+        this.code.set('');
+        if (change) {
+            this.closeSetup();
+            await this.applyChange(change);
+        }
+    }
+    closeSetup() {
+        this.setupPanel.set(null);
+        this.setup.set(null);
+        this.emailSent.set(null);
+        this.code.set('');
+        this.emailReauthentication = undefined;
+    }
+    async resendEmailCode() {
+        const sent = await this.run(() => this.auth.beginEmailSetup(this.emailReauthentication));
+        if (sent) {
+            this.emailSent.set(sent);
+        }
+    }
+    startRename(passkey) {
+        this.renamingId.set(passkey.id);
+        this.renameValue.set(passkey.name);
+    }
+    cancelRename() {
+        this.renamingId.set(null);
+        this.renameValue.set('');
+    }
+    async saveRename(passkey) {
+        const name = this.renameValue().trim();
+        if (!name || this.busy()) {
+            return;
+        }
+        this.busy.set(true);
+        this.errorKeys.set([]);
+        const result = await this.auth.renamePasskey(passkey.id, name);
+        this.busy.set(false);
+        if (!result.isSuccess) {
+            this.errorKeys.set(nhTwoFactorErrorKeys(result));
+            return;
+        }
+        this.cancelRename();
+        this.passkeys.update(passkeys => passkeys.map(item => item.id === passkey.id ? new NhPasskey({ ...item, name: name }) : item));
+        this.noticeKey.set('nh-two-factor.ui.change-saved');
+    }
+    needsReauthentication(action) {
+        switch (action.kind) {
+            case 'authenticator':
+            case 'email':
+            case 'add-passkey':
+                return this.enabled();
+            default:
+                return true;
+        }
+    }
+    async perform(action, reauthentication) {
+        switch (action.kind) {
+            case 'authenticator': {
+                const setup = await this.run(() => this.auth.beginAuthenticatorSetup(reauthentication));
+                if (setup) {
+                    this.openSetup('authenticator');
+                    this.setup.set(setup);
+                }
+                return;
+            }
+            case 'email': {
+                const sent = await this.run(() => this.auth.beginEmailSetup(reauthentication));
+                if (sent) {
+                    this.openSetup('email');
+                    this.emailSent.set(sent);
+                    this.emailReauthentication = reauthentication;
+                }
+                return;
+            }
+            case 'recovery-codes':
+                await this.applyChange(await this.run(() => this.auth.regenerateRecoveryCodes(reauthentication)));
+                return;
+            case 'forget-devices':
+                await this.applyChange(await this.run(() => this.auth.forgetTwoFactorDevices(reauthentication)), 'nh-two-factor.ui.devices-forgotten');
+                return;
+            case 'disable':
+                await this.applyChange(await this.run(() => this.auth.disableTwoFactor(reauthentication)));
+                return;
+            case 'add-passkey': {
+                const name = this.newPasskeyName().trim() || undefined;
+                const change = await this.run(() => this.auth.registerPasskey(name, reauthentication));
+                if (change) {
+                    this.newPasskeyName.set('');
+                }
+                await this.applyChange(change);
+                return;
+            }
+            case 'remove-passkey':
+                await this.applyChange(await this.run(() => this.auth.removePasskey(action.passkeyId, reauthentication)));
+                return;
+        }
+    }
+    openSetup(panel) {
+        this.closeSetup();
+        this.setupPanel.set(panel);
+        afterNextRender(() => this.codeInput()?.nativeElement.focus(), { injector: this.injector });
+    }
+    async applyChange(change, noticeKey) {
+        if (!change) {
+            return;
+        }
+        this.recoveryCodes.set(change.recoveryCodes?.length ? change.recoveryCodes : null);
+        this.noticeKey.set(noticeKey ?? (change.sessionRenewed ? 'nh-two-factor.ui.session-renewed' : 'nh-two-factor.ui.change-saved'));
+        await this.load();
+        const status = this.status();
+        if (status) {
+            this.changed.emit(status);
+        }
+    }
+    async run(action) {
+        this.busy.set(true);
+        this.errorKeys.set([]);
+        const result = await action();
+        this.busy.set(false);
+        if (!result.isSuccess) {
+            this.errorKeys.set(nhTwoFactorErrorKeys(result));
+            return undefined;
+        }
+        return result.data;
+    }
+    hasMethod(method) {
+        return this.status()?.methods.includes(method) === true;
+    }
+    isAvailable(method) {
+        return this.status()?.availableMethods.includes(method) === true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: NhTwoFactorSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.28", type: NhTwoFactorSettingsComponent, isStandalone: true, selector: "nh-two-factor-settings", inputs: { showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, viewQueries: [{ propertyName: "reauthenticationInput", first: true, predicate: ["reauthenticationInput"], descendants: true, isSignal: true }, { propertyName: "codeInput", first: true, predicate: ["codeInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<section class=\"nh-two-factor\" [attr.aria-labelledby]=\"id + '-title'\" [attr.aria-busy]=\"loading() || busy()\">\n  <div class=\"nh-two-factor__status\">\n    <h2 class=\"nh-two-factor__title\" [class.visually-hidden]=\"!showTitle()\" [id]=\"id + '-title'\">{{ 'nh-two-factor.ui.settings-title' | translate }}</h2>\n    @if (status(); as current) {\n      <span class=\"nh-two-factor__badge\" [class.nh-two-factor__badge--on]=\"current.enabled\">\n        {{ (current.enabled ? 'nh-two-factor.ui.status-enabled' : 'nh-two-factor.ui.status-disabled') | translate }}\n      </span>\n      @if (current.required) {\n        <span class=\"nh-two-factor__badge\">{{ 'nh-two-factor.ui.status-required' | translate }}</span>\n      }\n    }\n  </div>\n\n  @if (loading() && !status()) {\n    <p class=\"nh-two-factor__hint\" role=\"status\">{{ 'nh-two-factor.ui.loading' | translate }}</p>\n  }\n\n  <div role=\"status\">\n    @if (noticeKey(); as notice) {\n      <p class=\"nh-two-factor__notice\">{{ notice | translate }}</p>\n    }\n  </div>\n\n  <div [id]=\"id + '-errors'\" aria-live=\"assertive\">\n    @if (errorKeys().length > 0) {\n      <ul class=\"nh-two-factor__errors\" role=\"alert\">\n        @for (key of errorKeys(); track key) {\n          <li>{{ key | translate }}</li>\n        }\n      </ul>\n    }\n  </div>\n\n  @if (pendingAction()) {\n    <form class=\"nh-two-factor nh-two-factor__section\" [attr.aria-labelledby]=\"id + '-reauthentication-title'\" (submit)=\"$event.preventDefault(); confirmReauthentication()\">\n      <h3 class=\"nh-two-factor__subtitle\" [id]=\"id + '-reauthentication-title'\">{{ 'nh-two-factor.ui.reauthentication-title' | translate }}</h3>\n\n      @if (reauthenticationMethods().length > 1) {\n        <fieldset class=\"nh-two-factor__methods\">\n          <legend class=\"nh-two-factor__legend\">{{ 'nh-two-factor.ui.reauthentication-method' | translate }}</legend>\n          @for (option of reauthenticationMethods(); track option) {\n            <label class=\"nh-two-factor__method\">\n              <input\n                type=\"radio\"\n                [name]=\"id + '-reauthentication-method'\"\n                [value]=\"option\"\n                [checked]=\"reauthenticationMethod() === option\"\n                (change)=\"reauthenticationMethod.set(option); reauthenticationSecret.set('')\" />\n              <span>{{ (option === 'password' ? 'nh-two-factor.ui.password' : 'nh-two-factor.ui.method.' + option) | translate }}</span>\n            </label>\n          }\n        </fieldset>\n      }\n\n      <div class=\"nh-two-factor__field\">\n        <label [for]=\"id + '-reauthentication'\">\n          {{ (reauthenticationMethod() === 'password' ? 'nh-two-factor.ui.password' : 'nh-two-factor.ui.code-label.' + reauthenticationMethod()) | translate }}\n        </label>\n        <input\n          #reauthenticationInput\n          class=\"nh-two-factor__input\"\n          [id]=\"id + '-reauthentication'\"\n          [type]=\"reauthenticationMethod() === 'password' ? 'password' : 'text'\"\n          [attr.autocomplete]=\"reauthenticationMethod() === 'password' ? 'current-password' : 'one-time-code'\"\n          [value]=\"reauthenticationSecret()\"\n          [disabled]=\"busy()\"\n          (input)=\"reauthenticationSecret.set(value($event))\" />\n      </div>\n\n      <div class=\"nh-two-factor__actions\">\n        <button type=\"submit\" class=\"nh-two-factor__button nh-two-factor__button--primary\" [disabled]=\"busy()\">\n          {{ 'nh-two-factor.ui.confirm' | translate }}\n        </button>\n        <button type=\"button\" class=\"nh-two-factor__button\" [disabled]=\"busy()\" (click)=\"cancelReauthentication()\">\n          {{ 'nh-two-factor.ui.cancel' | translate }}\n        </button>\n      </div>\n    </form>\n  }\n\n  @if (recoveryCodes(); as codes) {\n    <div class=\"nh-two-factor__section\">\n      <nh-two-factor-recovery-codes [codes]=\"codes\" (acknowledged)=\"recoveryCodes.set(null)\" />\n    </div>\n  }\n\n  @if (setupPanel(); as panel) {\n    <form class=\"nh-two-factor nh-two-factor__section\" [attr.aria-labelledby]=\"id + '-setup-title'\" (submit)=\"$event.preventDefault(); confirmSetup()\">\n      <h3 class=\"nh-two-factor__subtitle\" [id]=\"id + '-setup-title'\">{{ 'nh-two-factor.ui.method.' + panel | translate }}</h3>\n\n      @if (panel === 'authenticator') {\n        <p class=\"nh-two-factor__hint\">{{ 'nh-two-factor.ui.authenticator-instructions' | translate }}</p>\n        @if (setup(); as authenticator) {\n          <div class=\"nh-two-factor__setup\">\n            @if (authenticator.qrCodeDataUri) {\n              <img class=\"nh-two-factor__qr\" [src]=\"authenticator.qrCodeDataUri\" [alt]=\"'nh-two-factor.ui.qr-code-alt' | translate\" />\n            }\n            <p class=\"nh-two-factor__text\">\n              {{ 'nh-two-factor.ui.shared-key' | translate }}:\n              <span class=\"nh-two-factor__key\">{{ authenticator.sharedKey }}</span>\n            </p>\n          </div>\n        }\n      } @else {\n        <p class=\"nh-two-factor__hint\">{{ 'nh-two-factor.ui.email-instructions' | translate }}</p>\n        @if (emailSent(); as sent) {\n          <p class=\"nh-two-factor__hint\">\n            {{ 'nh-two-factor.ui.email-code-sent' | translate: { time: (sent.expiresAt | date: 'shortTime') } }}\n          </p>\n        }\n      }\n\n      <div class=\"nh-two-factor__field\">\n        <label [for]=\"id + '-code'\">{{ 'nh-two-factor.ui.code-label.' + panel | translate }}</label>\n        <input\n          #codeInput\n          type=\"text\"\n          class=\"nh-two-factor__input nh-two-factor__input--code\"\n          inputmode=\"numeric\"\n          autocomplete=\"one-time-code\"\n          spellcheck=\"false\"\n          [id]=\"id + '-code'\"\n          [value]=\"code()\"\n          [disabled]=\"busy()\"\n          (input)=\"code.set(value($event))\" />\n      </div>\n\n      <div class=\"nh-two-factor__actions\">\n        <button type=\"submit\" class=\"nh-two-factor__button nh-two-factor__button--primary\" [disabled]=\"busy()\">\n          {{ 'nh-two-factor.ui.confirm' | translate }}\n        </button>\n        @if (panel === 'email') {\n          <button type=\"button\" class=\"nh-two-factor__button\" [disabled]=\"busy()\" (click)=\"resendEmailCode()\">\n            {{ 'nh-two-factor.ui.resend-email-code' | translate }}\n          </button>\n        }\n        <button type=\"button\" class=\"nh-two-factor__button\" [disabled]=\"busy()\" (click)=\"closeSetup()\">\n          {{ 'nh-two-factor.ui.cancel' | translate }}\n        </button>\n      </div>\n    </form>\n  }\n\n  @if (status(); as current) {\n    @if (!setupPanel() && !pendingAction()) {\n      <div class=\"nh-two-factor__actions\">\n        @if (authenticatorAvailable()) {\n          <button type=\"button\" class=\"nh-two-factor__button\" [disabled]=\"busy()\" (click)=\"request({ kind: 'authenticator' })\">\n            {{ (hasAuthenticator() ? 'nh-two-factor.ui.change-authenticator' : 'nh-two-factor.ui.set-up-authenticator') | translate }}\n          </button>\n        }\n        @if (emailAvailable() && !hasEmail()) {\n          <button type=\"button\" class=\"nh-two-factor__button\" [disabled]=\"busy()\" (click)=\"request({ kind: 'email' })\">\n            {{ 'nh-two-factor.ui.set-up-email' | translate }}\n          </button>\n        }\n      </div>\n    }\n\n    @if (passkeysAvailable()) {\n      <div class=\"nh-two-factor__section\">\n        <h3 class=\"nh-two-factor__subtitle\">{{ 'nh-two-factor.ui.passkeys-title' | translate }}</h3>\n\n        @if (passkeys().length === 0) {\n          <p class=\"nh-two-factor__hint\">{{ 'nh-two-factor.ui.no-passkeys' | translate }}</p>\n        } @else {\n          <ul class=\"nh-two-factor__list\">\n            @for (passkey of passkeys(); track passkey.id) {\n              <li class=\"nh-two-factor__item\">\n                @if (renamingId() === passkey.id) {\n                  <form class=\"nh-two-factor__actions\" (submit)=\"$event.preventDefault(); saveRename(passkey)\">\n                    <label class=\"visually-hidden\" [for]=\"id + '-rename-' + $index\">{{ 'nh-two-factor.ui.passkey-name' | translate }}</label>\n                    <input\n                      type=\"text\"\n                      class=\"nh-two-factor__input\"\n                      maxlength=\"100\"\n                      [id]=\"id + '-rename-' + $index\"\n                      [value]=\"renameValue()\"\n                      [disabled]=\"busy()\"\n                      (input)=\"renameValue.set(value($event))\" />\n                    <button type=\"submit\" class=\"nh-two-factor__button nh-two-factor__button--primary\" [disabled]=\"busy()\">\n                      {{ 'nh-two-factor.ui.save' | translate }}\n                    </button>\n                    <button type=\"button\" class=\"nh-two-factor__button\" [disabled]=\"busy()\" (click)=\"cancelRename()\">\n                      {{ 'nh-two-factor.ui.cancel' | translate }}\n                    </button>\n                  </form>\n                } @else {\n                  <div>\n                    <p class=\"nh-two-factor__text\"><strong>{{ passkey.name }}</strong></p>\n                    <p class=\"nh-two-factor__hint\">\n                      {{ 'nh-two-factor.ui.passkey-created' | translate: { date: (passkey.createdAt | date: 'mediumDate') } }}\n                      @if (passkey.isBackedUp) {\n                        \u00B7 {{ 'nh-two-factor.ui.passkey-synced' | translate }}\n                      }\n                    </p>\n                  </div>\n                  <div class=\"nh-two-factor__actions\">\n                    <button type=\"button\" class=\"nh-two-factor__button\" [disabled]=\"busy()\" (click)=\"startRename(passkey)\">\n                      {{ 'nh-two-factor.ui.rename' | translate }}\n                    </button>\n                    <button type=\"button\" class=\"nh-two-factor__button nh-two-factor__button--danger\" [disabled]=\"busy()\" (click)=\"request({ kind: 'remove-passkey', passkeyId: passkey.id })\">\n                      {{ 'nh-two-factor.ui.remove' | translate }}\n                    </button>\n                  </div>\n                }\n              </li>\n            }\n          </ul>\n        }\n\n        @if (passkeySupported && !pendingAction()) {\n          <form class=\"nh-two-factor__actions\" (submit)=\"$event.preventDefault(); request({ kind: 'add-passkey' })\">\n            <label class=\"visually-hidden\" [for]=\"id + '-new-passkey'\">{{ 'nh-two-factor.ui.passkey-name' | translate }}</label>\n            <input\n              type=\"text\"\n              class=\"nh-two-factor__input\"\n              maxlength=\"100\"\n              autocomplete=\"off\"\n              [id]=\"id + '-new-passkey'\"\n              [attr.placeholder]=\"'nh-two-factor.ui.passkey-name' | translate\"\n              [value]=\"newPasskeyName()\"\n              [disabled]=\"busy()\"\n              (input)=\"newPasskeyName.set(value($event))\" />\n            <button type=\"submit\" class=\"nh-two-factor__button\" [disabled]=\"busy()\">\n              {{ 'nh-two-factor.ui.add-passkey' | translate }}\n            </button>\n          </form>\n        }\n      </div>\n    }\n\n    @if (current.enabled && !pendingAction()) {\n      <div class=\"nh-two-factor__section\">\n        @if (recoveryCodesAvailable()) {\n          <p class=\"nh-two-factor__hint\">{{ 'nh-two-factor.ui.recovery-codes-left' | translate: { count: current.recoveryCodesLeft } }}</p>\n        }\n        <div class=\"nh-two-factor__actions\">\n          @if (recoveryCodesAvailable()) {\n            <button type=\"button\" class=\"nh-two-factor__button\" [disabled]=\"busy()\" (click)=\"request({ kind: 'recovery-codes' })\">\n              {{ 'nh-two-factor.ui.regenerate-recovery-codes' | translate }}\n            </button>\n          }\n          @if (current.rememberDeviceAvailable) {\n            <button type=\"button\" class=\"nh-two-factor__button\" [disabled]=\"busy()\" (click)=\"request({ kind: 'forget-devices' })\">\n              {{ 'nh-two-factor.ui.forget-devices' | translate }}\n            </button>\n          }\n          @if (!required()) {\n            <button type=\"button\" class=\"nh-two-factor__button nh-two-factor__button--danger\" [disabled]=\"busy()\" (click)=\"request({ kind: 'disable' })\">\n              {{ 'nh-two-factor.ui.disable' | translate }}\n            </button>\n          }\n        </div>\n      </div>\n    }\n  }\n</section>\n", styles: [":host{display:block;min-width:0;color:var(--nh-color-text, #1f2933)}.nh-two-factor{display:flex;flex-direction:column;gap:1rem;min-width:0}.nh-two-factor__title{margin:0;font-size:1.125rem;font-weight:650}.nh-two-factor__subtitle{margin:0;font-size:1rem;font-weight:650}.nh-two-factor__text,.nh-two-factor__hint{margin:0;overflow-wrap:anywhere}.nh-two-factor__hint{color:var(--nh-color-muted, #52606d);font-size:.875rem}.nh-two-factor__notice{margin:0;padding:.5rem .75rem;border-radius:.5rem;background:var(--nh-color-success-background, #e7f6ec);color:var(--nh-color-success, #1e6b3a)}.nh-two-factor__methods{display:flex;flex-wrap:wrap;gap:.5rem;min-width:0;margin:0;padding:0;border:0}.nh-two-factor__legend{width:100%;margin-bottom:.25rem;padding:0;font-weight:600}.nh-two-factor__method{position:relative}.nh-two-factor__method input{position:absolute;inset:0;opacity:0;cursor:pointer}.nh-two-factor__method span{display:inline-flex;padding:.5rem .75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-surface, #fff)}.nh-two-factor__method input:checked+span{border-color:var(--nh-color-primary, #2563eb);box-shadow:inset 0 0 0 1px var(--nh-color-primary, #2563eb);font-weight:600}.nh-two-factor__method input:focus-visible+span{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:2px}.nh-two-factor__method input:disabled+span{opacity:.6}.nh-two-factor__field{display:flex;flex-direction:column;gap:.375rem;min-width:0}.nh-two-factor__field label{font-weight:600}.nh-two-factor__input{width:100%;max-width:20rem;padding:.5rem .75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-input-background, #fff);color:inherit;font:inherit}.nh-two-factor__input:focus-visible{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:1px}.nh-two-factor__input[aria-invalid=true]{border-color:var(--nh-color-danger, #b91c1c)}.nh-two-factor__input--code{font-variant-numeric:tabular-nums;letter-spacing:.15em}.nh-two-factor__check{display:flex;align-items:center;gap:.5rem}.nh-two-factor__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.nh-two-factor__button{padding:.5rem 1rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-surface, #fff);color:inherit;font:inherit;cursor:pointer}.nh-two-factor__button:focus-visible{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:2px}.nh-two-factor__button:disabled{opacity:.6;cursor:not-allowed}.nh-two-factor__button--primary{border-color:var(--nh-color-primary, #2563eb);background:var(--nh-color-primary, #2563eb);color:var(--nh-color-on-primary, #fff)}.nh-two-factor__button--danger{border-color:var(--nh-color-danger, #b91c1c);color:var(--nh-color-danger, #b91c1c)}.nh-two-factor__errors{margin:0;padding:.5rem .75rem;border-radius:.5rem;background:var(--nh-color-danger-background, #fdecec);color:var(--nh-color-danger, #b91c1c);list-style:none}.nh-two-factor__setup{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem}.nh-two-factor__qr{width:11rem;height:11rem;padding:.5rem;border-radius:.5rem;background:#fff;image-rendering:pixelated}.nh-two-factor__key{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}.nh-two-factor__codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.5rem;margin:0;padding:0;list-style:none;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.nh-two-factor__codes li{padding:.375rem .5rem;border:1px dashed var(--nh-color-border, #cbd2d9);border-radius:.375rem;text-align:center}.nh-two-factor__section{display:flex;flex-direction:column;gap:.75rem;padding-top:1rem;border-top:1px solid var(--nh-color-border, #cbd2d9)}.nh-two-factor__status{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.nh-two-factor__badge{padding:.125rem .5rem;border-radius:999px;background:var(--nh-color-status-background, #eef2f7);font-size:.8125rem;font-weight:600}.nh-two-factor__badge--on{background:var(--nh-color-success-background, #e7f6ec);color:var(--nh-color-success, #1e6b3a)}.nh-two-factor__list{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none}.nh-two-factor__item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;min-width:0;padding:.75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem}.nh-two-factor__item>div{min-width:0}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: NhTwoFactorRecoveryCodesComponent, selector: "nh-two-factor-recovery-codes", inputs: ["codes", "fileName"], outputs: ["acknowledged"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: NhTwoFactorSettingsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nh-two-factor-settings', standalone: true, imports: [TranslatePipe, DatePipe, NhTwoFactorRecoveryCodesComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"nh-two-factor\" [attr.aria-labelledby]=\"id + '-title'\" [attr.aria-busy]=\"loading() || busy()\">\n  <div class=\"nh-two-factor__status\">\n    <h2 class=\"nh-two-factor__title\" [class.visually-hidden]=\"!showTitle()\" [id]=\"id + '-title'\">{{ 'nh-two-factor.ui.settings-title' | translate }}</h2>\n    @if (status(); as current) {\n      <span class=\"nh-two-factor__badge\" [class.nh-two-factor__badge--on]=\"current.enabled\">\n        {{ (current.enabled ? 'nh-two-factor.ui.status-enabled' : 'nh-two-factor.ui.status-disabled') | translate }}\n      </span>\n      @if (current.required) {\n        <span class=\"nh-two-factor__badge\">{{ 'nh-two-factor.ui.status-required' | translate }}</span>\n      }\n    }\n  </div>\n\n  @if (loading() && !status()) {\n    <p class=\"nh-two-factor__hint\" role=\"status\">{{ 'nh-two-factor.ui.loading' | translate }}</p>\n  }\n\n  <div role=\"status\">\n    @if (noticeKey(); as notice) {\n      <p class=\"nh-two-factor__notice\">{{ notice | translate }}</p>\n    }\n  </div>\n\n  <div [id]=\"id + '-errors'\" aria-live=\"assertive\">\n    @if (errorKeys().length > 0) {\n      <ul class=\"nh-two-factor__errors\" role=\"alert\">\n        @for (key of errorKeys(); track key) {\n          <li>{{ key | translate }}</li>\n        }\n      </ul>\n    }\n  </div>\n\n  @if (pendingAction()) {\n    <form class=\"nh-two-factor nh-two-factor__section\" [attr.aria-labelledby]=\"id + '-reauthentication-title'\" (submit)=\"$event.preventDefault(); confirmReauthentication()\">\n      <h3 class=\"nh-two-factor__subtitle\" [id]=\"id + '-reauthentication-title'\">{{ 'nh-two-factor.ui.reauthentication-title' | translate }}</h3>\n\n      @if (reauthenticationMethods().length > 1) {\n        <fieldset class=\"nh-two-factor__methods\">\n          <legend class=\"nh-two-factor__legend\">{{ 'nh-two-factor.ui.reauthentication-method' | translate }}</legend>\n          @for (option of reauthenticationMethods(); track option) {\n            <label class=\"nh-two-factor__method\">\n              <input\n                type=\"radio\"\n                [name]=\"id + '-reauthentication-method'\"\n                [value]=\"option\"\n                [checked]=\"reauthenticationMethod() === option\"\n                (change)=\"reauthenticationMethod.set(option); reauthenticationSecret.set('')\" />\n              <span>{{ (option === 'password' ? 'nh-two-factor.ui.password' : 'nh-two-factor.ui.method.' + option) | translate }}</span>\n            </label>\n          }\n        </fieldset>\n      }\n\n      <div class=\"nh-two-factor__field\">\n        <label [for]=\"id + '-reauthentication'\">\n          {{ (reauthenticationMethod() === 'password' ? 'nh-two-factor.ui.password' : 'nh-two-factor.ui.code-label.' + reauthenticationMethod()) | translate }}\n        </label>\n        <input\n          #reauthenticationInput\n          class=\"nh-two-factor__input\"\n          [id]=\"id + '-reauthentication'\"\n          [type]=\"reauthenticationMethod() === 'password' ? 'password' : 'text'\"\n          [attr.autocomplete]=\"reauthenticationMethod() === 'password' ? 'current-password' : 'one-time-code'\"\n          [value]=\"reauthenticationSecret()\"\n          [disabled]=\"busy()\"\n          (input)=\"reauthenticationSecret.set(value($event))\" />\n      </div>\n\n      <div class=\"nh-two-factor__actions\">\n        <button type=\"submit\" class=\"nh-two-factor__button nh-two-factor__button--primary\" [disabled]=\"busy()\">\n          {{ 'nh-two-factor.ui.confirm' | translate }}\n        </button>\n        <button type=\"button\" class=\"nh-two-factor__button\" [disabled]=\"busy()\" (click)=\"cancelReauthentication()\">\n          {{ 'nh-two-factor.ui.cancel' | translate }}\n        </button>\n      </div>\n    </form>\n  }\n\n  @if (recoveryCodes(); as codes) {\n    <div class=\"nh-two-factor__section\">\n      <nh-two-factor-recovery-codes [codes]=\"codes\" (acknowledged)=\"recoveryCodes.set(null)\" />\n    </div>\n  }\n\n  @if (setupPanel(); as panel) {\n    <form class=\"nh-two-factor nh-two-factor__section\" [attr.aria-labelledby]=\"id + '-setup-title'\" (submit)=\"$event.preventDefault(); confirmSetup()\">\n      <h3 class=\"nh-two-factor__subtitle\" [id]=\"id + '-setup-title'\">{{ 'nh-two-factor.ui.method.' + panel | translate }}</h3>\n\n      @if (panel === 'authenticator') {\n        <p class=\"nh-two-factor__hint\">{{ 'nh-two-factor.ui.authenticator-instructions' | translate }}</p>\n        @if (setup(); as authenticator) {\n          <div class=\"nh-two-factor__setup\">\n            @if (authenticator.qrCodeDataUri) {\n              <img class=\"nh-two-factor__qr\" [src]=\"authenticator.qrCodeDataUri\" [alt]=\"'nh-two-factor.ui.qr-code-alt' | translate\" />\n            }\n            <p class=\"nh-two-factor__text\">\n              {{ 'nh-two-factor.ui.shared-key' | translate }}:\n              <span class=\"nh-two-factor__key\">{{ authenticator.sharedKey }}</span>\n            </p>\n          </div>\n        }\n      } @else {\n        <p class=\"nh-two-factor__hint\">{{ 'nh-two-factor.ui.email-instructions' | translate }}</p>\n        @if (emailSent(); as sent) {\n          <p class=\"nh-two-factor__hint\">\n            {{ 'nh-two-factor.ui.email-code-sent' | translate: { time: (sent.expiresAt | date: 'shortTime') } }}\n          </p>\n        }\n      }\n\n      <div class=\"nh-two-factor__field\">\n        <label [for]=\"id + '-code'\">{{ 'nh-two-factor.ui.code-label.' + panel | translate }}</label>\n        <input\n          #codeInput\n          type=\"text\"\n          class=\"nh-two-factor__input nh-two-factor__input--code\"\n          inputmode=\"numeric\"\n          autocomplete=\"one-time-code\"\n          spellcheck=\"false\"\n          [id]=\"id + '-code'\"\n          [value]=\"code()\"\n          [disabled]=\"busy()\"\n          (input)=\"code.set(value($event))\" />\n      </div>\n\n      <div class=\"nh-two-factor__actions\">\n        <button type=\"submit\" class=\"nh-two-factor__button nh-two-factor__button--primary\" [disabled]=\"busy()\">\n          {{ 'nh-two-factor.ui.confirm' | translate }}\n        </button>\n        @if (panel === 'email') {\n          <button type=\"button\" class=\"nh-two-factor__button\" [disabled]=\"busy()\" (click)=\"resendEmailCode()\">\n            {{ 'nh-two-factor.ui.resend-email-code' | translate }}\n          </button>\n        }\n        <button type=\"button\" class=\"nh-two-factor__button\" [disabled]=\"busy()\" (click)=\"closeSetup()\">\n          {{ 'nh-two-factor.ui.cancel' | translate }}\n        </button>\n      </div>\n    </form>\n  }\n\n  @if (status(); as current) {\n    @if (!setupPanel() && !pendingAction()) {\n      <div class=\"nh-two-factor__actions\">\n        @if (authenticatorAvailable()) {\n          <button type=\"button\" class=\"nh-two-factor__button\" [disabled]=\"busy()\" (click)=\"request({ kind: 'authenticator' })\">\n            {{ (hasAuthenticator() ? 'nh-two-factor.ui.change-authenticator' : 'nh-two-factor.ui.set-up-authenticator') | translate }}\n          </button>\n        }\n        @if (emailAvailable() && !hasEmail()) {\n          <button type=\"button\" class=\"nh-two-factor__button\" [disabled]=\"busy()\" (click)=\"request({ kind: 'email' })\">\n            {{ 'nh-two-factor.ui.set-up-email' | translate }}\n          </button>\n        }\n      </div>\n    }\n\n    @if (passkeysAvailable()) {\n      <div class=\"nh-two-factor__section\">\n        <h3 class=\"nh-two-factor__subtitle\">{{ 'nh-two-factor.ui.passkeys-title' | translate }}</h3>\n\n        @if (passkeys().length === 0) {\n          <p class=\"nh-two-factor__hint\">{{ 'nh-two-factor.ui.no-passkeys' | translate }}</p>\n        } @else {\n          <ul class=\"nh-two-factor__list\">\n            @for (passkey of passkeys(); track passkey.id) {\n              <li class=\"nh-two-factor__item\">\n                @if (renamingId() === passkey.id) {\n                  <form class=\"nh-two-factor__actions\" (submit)=\"$event.preventDefault(); saveRename(passkey)\">\n                    <label class=\"visually-hidden\" [for]=\"id + '-rename-' + $index\">{{ 'nh-two-factor.ui.passkey-name' | translate }}</label>\n                    <input\n                      type=\"text\"\n                      class=\"nh-two-factor__input\"\n                      maxlength=\"100\"\n                      [id]=\"id + '-rename-' + $index\"\n                      [value]=\"renameValue()\"\n                      [disabled]=\"busy()\"\n                      (input)=\"renameValue.set(value($event))\" />\n                    <button type=\"submit\" class=\"nh-two-factor__button nh-two-factor__button--primary\" [disabled]=\"busy()\">\n                      {{ 'nh-two-factor.ui.save' | translate }}\n                    </button>\n                    <button type=\"button\" class=\"nh-two-factor__button\" [disabled]=\"busy()\" (click)=\"cancelRename()\">\n                      {{ 'nh-two-factor.ui.cancel' | translate }}\n                    </button>\n                  </form>\n                } @else {\n                  <div>\n                    <p class=\"nh-two-factor__text\"><strong>{{ passkey.name }}</strong></p>\n                    <p class=\"nh-two-factor__hint\">\n                      {{ 'nh-two-factor.ui.passkey-created' | translate: { date: (passkey.createdAt | date: 'mediumDate') } }}\n                      @if (passkey.isBackedUp) {\n                        \u00B7 {{ 'nh-two-factor.ui.passkey-synced' | translate }}\n                      }\n                    </p>\n                  </div>\n                  <div class=\"nh-two-factor__actions\">\n                    <button type=\"button\" class=\"nh-two-factor__button\" [disabled]=\"busy()\" (click)=\"startRename(passkey)\">\n                      {{ 'nh-two-factor.ui.rename' | translate }}\n                    </button>\n                    <button type=\"button\" class=\"nh-two-factor__button nh-two-factor__button--danger\" [disabled]=\"busy()\" (click)=\"request({ kind: 'remove-passkey', passkeyId: passkey.id })\">\n                      {{ 'nh-two-factor.ui.remove' | translate }}\n                    </button>\n                  </div>\n                }\n              </li>\n            }\n          </ul>\n        }\n\n        @if (passkeySupported && !pendingAction()) {\n          <form class=\"nh-two-factor__actions\" (submit)=\"$event.preventDefault(); request({ kind: 'add-passkey' })\">\n            <label class=\"visually-hidden\" [for]=\"id + '-new-passkey'\">{{ 'nh-two-factor.ui.passkey-name' | translate }}</label>\n            <input\n              type=\"text\"\n              class=\"nh-two-factor__input\"\n              maxlength=\"100\"\n              autocomplete=\"off\"\n              [id]=\"id + '-new-passkey'\"\n              [attr.placeholder]=\"'nh-two-factor.ui.passkey-name' | translate\"\n              [value]=\"newPasskeyName()\"\n              [disabled]=\"busy()\"\n              (input)=\"newPasskeyName.set(value($event))\" />\n            <button type=\"submit\" class=\"nh-two-factor__button\" [disabled]=\"busy()\">\n              {{ 'nh-two-factor.ui.add-passkey' | translate }}\n            </button>\n          </form>\n        }\n      </div>\n    }\n\n    @if (current.enabled && !pendingAction()) {\n      <div class=\"nh-two-factor__section\">\n        @if (recoveryCodesAvailable()) {\n          <p class=\"nh-two-factor__hint\">{{ 'nh-two-factor.ui.recovery-codes-left' | translate: { count: current.recoveryCodesLeft } }}</p>\n        }\n        <div class=\"nh-two-factor__actions\">\n          @if (recoveryCodesAvailable()) {\n            <button type=\"button\" class=\"nh-two-factor__button\" [disabled]=\"busy()\" (click)=\"request({ kind: 'recovery-codes' })\">\n              {{ 'nh-two-factor.ui.regenerate-recovery-codes' | translate }}\n            </button>\n          }\n          @if (current.rememberDeviceAvailable) {\n            <button type=\"button\" class=\"nh-two-factor__button\" [disabled]=\"busy()\" (click)=\"request({ kind: 'forget-devices' })\">\n              {{ 'nh-two-factor.ui.forget-devices' | translate }}\n            </button>\n          }\n          @if (!required()) {\n            <button type=\"button\" class=\"nh-two-factor__button nh-two-factor__button--danger\" [disabled]=\"busy()\" (click)=\"request({ kind: 'disable' })\">\n              {{ 'nh-two-factor.ui.disable' | translate }}\n            </button>\n          }\n        </div>\n      </div>\n    }\n  }\n</section>\n", styles: [":host{display:block;min-width:0;color:var(--nh-color-text, #1f2933)}.nh-two-factor{display:flex;flex-direction:column;gap:1rem;min-width:0}.nh-two-factor__title{margin:0;font-size:1.125rem;font-weight:650}.nh-two-factor__subtitle{margin:0;font-size:1rem;font-weight:650}.nh-two-factor__text,.nh-two-factor__hint{margin:0;overflow-wrap:anywhere}.nh-two-factor__hint{color:var(--nh-color-muted, #52606d);font-size:.875rem}.nh-two-factor__notice{margin:0;padding:.5rem .75rem;border-radius:.5rem;background:var(--nh-color-success-background, #e7f6ec);color:var(--nh-color-success, #1e6b3a)}.nh-two-factor__methods{display:flex;flex-wrap:wrap;gap:.5rem;min-width:0;margin:0;padding:0;border:0}.nh-two-factor__legend{width:100%;margin-bottom:.25rem;padding:0;font-weight:600}.nh-two-factor__method{position:relative}.nh-two-factor__method input{position:absolute;inset:0;opacity:0;cursor:pointer}.nh-two-factor__method span{display:inline-flex;padding:.5rem .75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-surface, #fff)}.nh-two-factor__method input:checked+span{border-color:var(--nh-color-primary, #2563eb);box-shadow:inset 0 0 0 1px var(--nh-color-primary, #2563eb);font-weight:600}.nh-two-factor__method input:focus-visible+span{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:2px}.nh-two-factor__method input:disabled+span{opacity:.6}.nh-two-factor__field{display:flex;flex-direction:column;gap:.375rem;min-width:0}.nh-two-factor__field label{font-weight:600}.nh-two-factor__input{width:100%;max-width:20rem;padding:.5rem .75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-input-background, #fff);color:inherit;font:inherit}.nh-two-factor__input:focus-visible{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:1px}.nh-two-factor__input[aria-invalid=true]{border-color:var(--nh-color-danger, #b91c1c)}.nh-two-factor__input--code{font-variant-numeric:tabular-nums;letter-spacing:.15em}.nh-two-factor__check{display:flex;align-items:center;gap:.5rem}.nh-two-factor__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.nh-two-factor__button{padding:.5rem 1rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-surface, #fff);color:inherit;font:inherit;cursor:pointer}.nh-two-factor__button:focus-visible{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:2px}.nh-two-factor__button:disabled{opacity:.6;cursor:not-allowed}.nh-two-factor__button--primary{border-color:var(--nh-color-primary, #2563eb);background:var(--nh-color-primary, #2563eb);color:var(--nh-color-on-primary, #fff)}.nh-two-factor__button--danger{border-color:var(--nh-color-danger, #b91c1c);color:var(--nh-color-danger, #b91c1c)}.nh-two-factor__errors{margin:0;padding:.5rem .75rem;border-radius:.5rem;background:var(--nh-color-danger-background, #fdecec);color:var(--nh-color-danger, #b91c1c);list-style:none}.nh-two-factor__setup{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem}.nh-two-factor__qr{width:11rem;height:11rem;padding:.5rem;border-radius:.5rem;background:#fff;image-rendering:pixelated}.nh-two-factor__key{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}.nh-two-factor__codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.5rem;margin:0;padding:0;list-style:none;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.nh-two-factor__codes li{padding:.375rem .5rem;border:1px dashed var(--nh-color-border, #cbd2d9);border-radius:.375rem;text-align:center}.nh-two-factor__section{display:flex;flex-direction:column;gap:.75rem;padding-top:1rem;border-top:1px solid var(--nh-color-border, #cbd2d9)}.nh-two-factor__status{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.nh-two-factor__badge{padding:.125rem .5rem;border-radius:999px;background:var(--nh-color-status-background, #eef2f7);font-size:.8125rem;font-weight:600}.nh-two-factor__badge--on{background:var(--nh-color-success-background, #e7f6ec);color:var(--nh-color-success, #1e6b3a)}.nh-two-factor__list{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none}.nh-two-factor__item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;min-width:0;padding:.75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem}.nh-two-factor__item>div{min-width:0}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { reauthenticationInput: [{ type: i0.ViewChild, args: ['reauthenticationInput', { isSignal: true }] }], codeInput: [{ type: i0.ViewChild, args: ['codeInput', { isSignal: true }] }], showTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTitle", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
+let nextId = 0;
+/**
+ * Signs in with a discoverable passkey, without a username or password. Renders nothing in
+ * browsers without passkey support.
+ */
+class NhPasskeyLoginButtonComponent {
+    constructor() {
+        this.auth = inject(NhAuthService);
+        /** Whether the button shows failures itself. */
+        this.showErrors = input(true, ...(ngDevMode ? [{ debugName: "showErrors" }] : []));
+        this.authenticated = output();
+        /** The policy asked for more: a second-factor challenge or an enrollment. */
+        this.pending = output();
+        /** Translation keys of a failed sign-in. */
+        this.failed = output();
+        this.id = `nh-passkey-login-${nextId++}`;
+        this.supported = this.auth.isPasskeySupported();
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : []));
+        this.errorKeys = signal([], ...(ngDevMode ? [{ debugName: "errorKeys" }] : []));
+        inject(NhTwoFactorTranslationMerger).start();
+    }
+    async signIn() {
+        if (this.busy()) {
+            return;
+        }
+        this.busy.set(true);
+        this.errorKeys.set([]);
+        const result = await this.auth.signInWithPasskey();
+        this.busy.set(false);
+        if (!result.isSuccess || !result.data) {
+            const keys = nhTwoFactorErrorKeys(result);
+            this.errorKeys.set(keys);
+            this.failed.emit(keys);
+            return;
+        }
+        if (result.data.status === 'authenticated' && result.data.authorization) {
+            this.authenticated.emit(result.data.authorization);
+            return;
+        }
+        this.pending.emit(result.data);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: NhPasskeyLoginButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.28", type: NhPasskeyLoginButtonComponent, isStandalone: true, selector: "nh-passkey-login-button", inputs: { showErrors: { classPropertyName: "showErrors", publicName: "showErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { authenticated: "authenticated", pending: "pending", failed: "failed" }, ngImport: i0, template: "@if (supported) {\n  <div class=\"nh-two-factor\">\n    <div class=\"nh-two-factor__actions\">\n      <button\n        type=\"button\"\n        class=\"nh-two-factor__button\"\n        [disabled]=\"busy()\"\n        [attr.aria-busy]=\"busy()\"\n        [attr.aria-describedby]=\"errorKeys().length > 0 ? id + '-errors' : null\"\n        (click)=\"signIn()\">\n        {{ 'nh-two-factor.ui.sign-in-with-passkey' | translate }}\n      </button>\n    </div>\n\n    @if (showErrors()) {\n      <div [id]=\"id + '-errors'\" aria-live=\"assertive\">\n        @if (errorKeys().length > 0) {\n          <ul class=\"nh-two-factor__errors\" role=\"alert\">\n            @for (key of errorKeys(); track key) {\n              <li>{{ key | translate }}</li>\n            }\n          </ul>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;min-width:0;color:var(--nh-color-text, #1f2933)}.nh-two-factor{display:flex;flex-direction:column;gap:1rem;min-width:0}.nh-two-factor__title{margin:0;font-size:1.125rem;font-weight:650}.nh-two-factor__subtitle{margin:0;font-size:1rem;font-weight:650}.nh-two-factor__text,.nh-two-factor__hint{margin:0;overflow-wrap:anywhere}.nh-two-factor__hint{color:var(--nh-color-muted, #52606d);font-size:.875rem}.nh-two-factor__notice{margin:0;padding:.5rem .75rem;border-radius:.5rem;background:var(--nh-color-success-background, #e7f6ec);color:var(--nh-color-success, #1e6b3a)}.nh-two-factor__methods{display:flex;flex-wrap:wrap;gap:.5rem;min-width:0;margin:0;padding:0;border:0}.nh-two-factor__legend{width:100%;margin-bottom:.25rem;padding:0;font-weight:600}.nh-two-factor__method{position:relative}.nh-two-factor__method input{position:absolute;inset:0;opacity:0;cursor:pointer}.nh-two-factor__method span{display:inline-flex;padding:.5rem .75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-surface, #fff)}.nh-two-factor__method input:checked+span{border-color:var(--nh-color-primary, #2563eb);box-shadow:inset 0 0 0 1px var(--nh-color-primary, #2563eb);font-weight:600}.nh-two-factor__method input:focus-visible+span{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:2px}.nh-two-factor__method input:disabled+span{opacity:.6}.nh-two-factor__field{display:flex;flex-direction:column;gap:.375rem;min-width:0}.nh-two-factor__field label{font-weight:600}.nh-two-factor__input{width:100%;max-width:20rem;padding:.5rem .75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-input-background, #fff);color:inherit;font:inherit}.nh-two-factor__input:focus-visible{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:1px}.nh-two-factor__input[aria-invalid=true]{border-color:var(--nh-color-danger, #b91c1c)}.nh-two-factor__input--code{font-variant-numeric:tabular-nums;letter-spacing:.15em}.nh-two-factor__check{display:flex;align-items:center;gap:.5rem}.nh-two-factor__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.nh-two-factor__button{padding:.5rem 1rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-surface, #fff);color:inherit;font:inherit;cursor:pointer}.nh-two-factor__button:focus-visible{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:2px}.nh-two-factor__button:disabled{opacity:.6;cursor:not-allowed}.nh-two-factor__button--primary{border-color:var(--nh-color-primary, #2563eb);background:var(--nh-color-primary, #2563eb);color:var(--nh-color-on-primary, #fff)}.nh-two-factor__button--danger{border-color:var(--nh-color-danger, #b91c1c);color:var(--nh-color-danger, #b91c1c)}.nh-two-factor__errors{margin:0;padding:.5rem .75rem;border-radius:.5rem;background:var(--nh-color-danger-background, #fdecec);color:var(--nh-color-danger, #b91c1c);list-style:none}.nh-two-factor__setup{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem}.nh-two-factor__qr{width:11rem;height:11rem;padding:.5rem;border-radius:.5rem;background:#fff;image-rendering:pixelated}.nh-two-factor__key{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}.nh-two-factor__codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.5rem;margin:0;padding:0;list-style:none;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.nh-two-factor__codes li{padding:.375rem .5rem;border:1px dashed var(--nh-color-border, #cbd2d9);border-radius:.375rem;text-align:center}.nh-two-factor__section{display:flex;flex-direction:column;gap:.75rem;padding-top:1rem;border-top:1px solid var(--nh-color-border, #cbd2d9)}.nh-two-factor__status{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.nh-two-factor__badge{padding:.125rem .5rem;border-radius:999px;background:var(--nh-color-status-background, #eef2f7);font-size:.8125rem;font-weight:600}.nh-two-factor__badge--on{background:var(--nh-color-success-background, #e7f6ec);color:var(--nh-color-success, #1e6b3a)}.nh-two-factor__list{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none}.nh-two-factor__item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;min-width:0;padding:.75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem}.nh-two-factor__item>div{min-width:0}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.28", ngImport: i0, type: NhPasskeyLoginButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nh-passkey-login-button', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (supported) {\n  <div class=\"nh-two-factor\">\n    <div class=\"nh-two-factor__actions\">\n      <button\n        type=\"button\"\n        class=\"nh-two-factor__button\"\n        [disabled]=\"busy()\"\n        [attr.aria-busy]=\"busy()\"\n        [attr.aria-describedby]=\"errorKeys().length > 0 ? id + '-errors' : null\"\n        (click)=\"signIn()\">\n        {{ 'nh-two-factor.ui.sign-in-with-passkey' | translate }}\n      </button>\n    </div>\n\n    @if (showErrors()) {\n      <div [id]=\"id + '-errors'\" aria-live=\"assertive\">\n        @if (errorKeys().length > 0) {\n          <ul class=\"nh-two-factor__errors\" role=\"alert\">\n            @for (key of errorKeys(); track key) {\n              <li>{{ key | translate }}</li>\n            }\n          </ul>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;min-width:0;color:var(--nh-color-text, #1f2933)}.nh-two-factor{display:flex;flex-direction:column;gap:1rem;min-width:0}.nh-two-factor__title{margin:0;font-size:1.125rem;font-weight:650}.nh-two-factor__subtitle{margin:0;font-size:1rem;font-weight:650}.nh-two-factor__text,.nh-two-factor__hint{margin:0;overflow-wrap:anywhere}.nh-two-factor__hint{color:var(--nh-color-muted, #52606d);font-size:.875rem}.nh-two-factor__notice{margin:0;padding:.5rem .75rem;border-radius:.5rem;background:var(--nh-color-success-background, #e7f6ec);color:var(--nh-color-success, #1e6b3a)}.nh-two-factor__methods{display:flex;flex-wrap:wrap;gap:.5rem;min-width:0;margin:0;padding:0;border:0}.nh-two-factor__legend{width:100%;margin-bottom:.25rem;padding:0;font-weight:600}.nh-two-factor__method{position:relative}.nh-two-factor__method input{position:absolute;inset:0;opacity:0;cursor:pointer}.nh-two-factor__method span{display:inline-flex;padding:.5rem .75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-surface, #fff)}.nh-two-factor__method input:checked+span{border-color:var(--nh-color-primary, #2563eb);box-shadow:inset 0 0 0 1px var(--nh-color-primary, #2563eb);font-weight:600}.nh-two-factor__method input:focus-visible+span{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:2px}.nh-two-factor__method input:disabled+span{opacity:.6}.nh-two-factor__field{display:flex;flex-direction:column;gap:.375rem;min-width:0}.nh-two-factor__field label{font-weight:600}.nh-two-factor__input{width:100%;max-width:20rem;padding:.5rem .75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-input-background, #fff);color:inherit;font:inherit}.nh-two-factor__input:focus-visible{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:1px}.nh-two-factor__input[aria-invalid=true]{border-color:var(--nh-color-danger, #b91c1c)}.nh-two-factor__input--code{font-variant-numeric:tabular-nums;letter-spacing:.15em}.nh-two-factor__check{display:flex;align-items:center;gap:.5rem}.nh-two-factor__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.nh-two-factor__button{padding:.5rem 1rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem;background:var(--nh-color-surface, #fff);color:inherit;font:inherit;cursor:pointer}.nh-two-factor__button:focus-visible{outline:2px solid var(--nh-color-focus, #2563eb);outline-offset:2px}.nh-two-factor__button:disabled{opacity:.6;cursor:not-allowed}.nh-two-factor__button--primary{border-color:var(--nh-color-primary, #2563eb);background:var(--nh-color-primary, #2563eb);color:var(--nh-color-on-primary, #fff)}.nh-two-factor__button--danger{border-color:var(--nh-color-danger, #b91c1c);color:var(--nh-color-danger, #b91c1c)}.nh-two-factor__errors{margin:0;padding:.5rem .75rem;border-radius:.5rem;background:var(--nh-color-danger-background, #fdecec);color:var(--nh-color-danger, #b91c1c);list-style:none}.nh-two-factor__setup{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem}.nh-two-factor__qr{width:11rem;height:11rem;padding:.5rem;border-radius:.5rem;background:#fff;image-rendering:pixelated}.nh-two-factor__key{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}.nh-two-factor__codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.5rem;margin:0;padding:0;list-style:none;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.nh-two-factor__codes li{padding:.375rem .5rem;border:1px dashed var(--nh-color-border, #cbd2d9);border-radius:.375rem;text-align:center}.nh-two-factor__section{display:flex;flex-direction:column;gap:.75rem;padding-top:1rem;border-top:1px solid var(--nh-color-border, #cbd2d9)}.nh-two-factor__status{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.nh-two-factor__badge{padding:.125rem .5rem;border-radius:999px;background:var(--nh-color-status-background, #eef2f7);font-size:.8125rem;font-weight:600}.nh-two-factor__badge--on{background:var(--nh-color-success-background, #e7f6ec);color:var(--nh-color-success, #1e6b3a)}.nh-two-factor__list{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none}.nh-two-factor__item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;min-width:0;padding:.75rem;border:1px solid var(--nh-color-border, #cbd2d9);border-radius:.5rem}.nh-two-factor__item>div{min-width:0}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { showErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrors", required: false }] }], authenticated: [{ type: i0.Output, args: ["authenticated"] }], pending: [{ type: i0.Output, args: ["pending"] }], failed: [{ type: i0.Output, args: ["failed"] }] } });
+
+/**
+ * Registers the two-factor texts at startup. The components also register them when they are
+ * first created, so this provider is only needed to translate `nh-two-factor.` failure keys
+ * outside the components, for example on a custom login page.
+ */
+function provideNhTwoFactor() {
+    return makeEnvironmentProviders([
+        provideEnvironmentInitializer(() => inject(NhTwoFactorTranslationMerger).start())
+    ]);
+}
+
+/*
+ * Public API surface of @newheap/platform-common/two-factor.
+ *
+ * The two-factor components are a separate entry point, so applications that do not import
+ * it ship none of their code. The service and models live in @newheap/platform-common.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NH_TWO_FACTOR_TRANSLATIONS, NhPasskeyLoginButtonComponent, NhTwoFactorChallengeComponent, NhTwoFactorEnrollmentComponent, NhTwoFactorRecoveryCodesComponent, NhTwoFactorSettingsComponent, NhTwoFactorTranslationMerger, nhTwoFactorErrorKeys, nhTwoFactorStepEnded, provideNhTwoFactor };
+//# sourceMappingURL=newheap-platform-common-two-factor.mjs.map