ngwr 10.0.0 → 10.1.0

package/fesm2022/ngwr-form.mjs

@@ -1,7 +1,9 @@
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { input, computed, ViewEncapsulation, Component, contentChild } from '@angular/core';
+import { input, computed, ViewEncapsulation, Component, InjectionToken, makeEnvironmentProviders, inject, contentChild, signal, effect, DestroyRef, contentChildren, forwardRef } from '@angular/core';
 import { NgControl } from '@angular/forms';
+import { EMPTY } from 'rxjs';
+import { WrI18n } from 'ngwr/i18n';
 
 /**
  * @license
@@ -19,7 +21,7 @@ import { NgControl } from '@angular/forms';
  * ```html
  * <wr-form-item [hasError]="form.controls.email.invalid">
  *   <label>Email</label>
- *   <wr-input formControlName="email" />
+ *   <input wrInput formControlName="email" />
  *   <wr-form-error>Invalid email</wr-form-error>
  * </wr-form-item>
  * ```
@@ -53,6 +55,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 }]
         }], propDecorators: { hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }] } });
 
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/** Pull a number out of a validator payload without trusting its shape. */
+function num(error, field) {
+    if (error && typeof error === 'object' && field in error) {
+        const value = error[field];
+        if (typeof value === 'number' || typeof value === 'string')
+            return String(value);
+    }
+    return '';
+}
+/**
+ * App-wide validation copy. Empty by default; `<wr-form-field>` falls through
+ * to the `ngwr/i18n` catalog and then to a built-in English sentence, so a
+ * form shows a usable message with no configuration at all.
+ */
+const WR_FORM_ERRORS = new InjectionToken('WR_FORM_ERRORS', {
+    providedIn: 'root',
+    factory: () => ({}),
+});
+/**
+ * Register validation messages for the whole app.
+ *
+ * Only the keys you name are overridden — everything else keeps resolving
+ * through the i18n catalog, so this composes with `provideWrI18n()` rather than
+ * replacing it. A projected `<wr-form-error key="…">` still wins over both:
+ * per-field copy beats app-wide copy.
+ *
+ * @example
+ * ```ts
+ * bootstrapApplication(App, {
+ *   providers: [
+ *     provideWrFormErrors({
+ *       required: 'Please fill this in.',
+ *       minlength: ({ error }) => `At least ${(error as { requiredLength: number }).requiredLength} characters.`,
+ *     }),
+ *   ],
+ * });
+ * ```
+ */
+function provideWrFormErrors(messages = {}) {
+    return makeEnvironmentProviders([{ provide: WR_FORM_ERRORS, useValue: messages }]);
+}
+/**
+ * Last-resort English, used when no app catalog and no i18n catalog answer.
+ *
+ * These exist so that a form with zero configuration still says something true
+ * rather than rendering an empty error block. Every key here also ships as a
+ * `validation.*` entry in `ngwr/i18n/{en,ru}`, which is what a localized app
+ * actually reads.
+ */
+const WR_FORM_ERROR_FALLBACKS = {
+    // Angular built-ins.
+    required: 'This field is required.',
+    requiredTrue: 'This field must be checked.',
+    email: 'Enter a valid email address.',
+    minlength: ({ error }) => `Enter at least ${num(error, 'requiredLength')} characters.`,
+    maxlength: ({ error }) => `Enter at most ${num(error, 'requiredLength')} characters.`,
+    min: ({ error }) => `Enter ${num(error, 'min')} or more.`,
+    max: ({ error }) => `Enter ${num(error, 'max')} or less.`,
+    pattern: 'This value is not in the expected format.',
+    // WrValidators.
+    noWhitespace: 'This field cannot be blank.',
+    hexColor: 'Enter a hex colour, e.g. #1a2b3c.',
+    url: 'Enter a valid URL.',
+    cardNumber: 'Enter a valid card number.',
+    cvc: ({ error }) => `Enter the ${num(error, 'length')}-digit security code.`,
+    iban: 'Enter a valid IBAN.',
+    match: 'The two values do not match.',
+    matchFields: 'These fields do not match.',
+    oneOf: 'Choose one of the allowed values.',
+    minDate: 'Choose a later date.',
+    maxDate: 'Choose an earlier date.',
+};
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/** Present only inside a `<wr-form-field>`; inject with `{ optional: true }`. */
+const WR_FORM_FIELD = new InjectionToken('WR_FORM_FIELD');
+
 /**
  * @license
  *
@@ -60,6 +150,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
  */
 let uid = 0;
+/** A message is either literal text or a function over the validator's payload. */
+function render(message, key, error, label) {
+    return typeof message === 'function' ? message({ key, error, label }) : message;
+}
+/** Validator payloads are plain objects; anything else interpolates nothing. */
+function toParams(error) {
+    return error && typeof error === 'object' ? error : undefined;
+}
+/**
+ * One error message tied to a validator key. Renders only when the parent
+ * form-field has a matching error in `control.errors`, and only once the
+ * control is touched or dirty.
+ *
+ * @example
+ * ```html
+ * <wr-form-error key="required">This field is required.</wr-form-error>
+ * <wr-form-error key="email">That doesn't look right.</wr-form-error>
+ * ```
+ */
+class WrFormError {
+    /**
+     * Validator key this message corresponds to (e.g. `'required'`).
+     * Optional — without a key the message always renders, which is the
+     * plain inline-error usage inside `<wr-form-item>`.
+     */
+    key = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "key" }] : /* istanbul ignore next */ []));
+    field = inject(WR_FORM_FIELD, { optional: true });
+    /**
+     * Whether this message is the one the current error calls for.
+     *
+     * The parent projects every `<wr-form-error>` through a single
+     * `<ng-content select>`, which cannot filter — so each message decides for
+     * itself. Without this, one invalid control rendered "Email is required."
+     * and "That isn't a valid email." side by side, which is what the docs have
+     * always described as gated behaviour.
+     *
+     * A keyless message always shows: that is the plain inline-error usage inside
+     * `<wr-form-item>`, which has no error discovery at all.
+     */
+    visible = computed(() => {
+        const key = this.key();
+        if (!key || !this.field)
+            return true;
+        return this.field.errorKeys().includes(key);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrFormError, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: WrFormError, isStandalone: true, selector: "wr-form-error", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "alert" }, properties: { "attr.data-key": "key() ?? null", "class.wr-form-field__error--hidden": "!visible()" }, classAttribute: "wr-form-error wr-form-field__error" }, ngImport: i0, template: `<ng-content />`, isInline: true, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrFormError, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wr-form-error',
+                    template: `<ng-content />`,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        class: 'wr-form-error wr-form-field__error',
+                        role: 'alert',
+                        '[attr.data-key]': 'key() ?? null',
+                        '[class.wr-form-field__error--hidden]': '!visible()',
+                    },
+                }]
+        }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }] } });
 /**
  * Wraps a label + control + hint + error messages into a single block —
  * the layout primitive every form ends up reinventing.
@@ -92,13 +246,46 @@ class WrFormField {
     required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
     /** Show `(optional)` next to the label. Mutually exclusive with `required`. @default false */
     optional = input(false, { ...(ngDevMode ? { debugName: "optional" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
-    /** Force a specific id on the label's `for` attribute. Auto-generated otherwise. */
+    /**
+     * Force a specific id on the label's `for` attribute. Auto-generated
+     * otherwise, and adopted by the projected `wrInput` unless that element
+     * already carries an `id` of its own.
+     */
     controlId = input(`wr-form-field-${++uid}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
-    /** Projected `NgControl` — used to read touched / dirty / errors. */
+    /**
+     * Projected `NgControl` — used to read touched / dirty / errors.
+     *
+     * This catches `[formField]` too: Angular's Signal Forms directive provides
+     * `NgControl` via its interop shim, so both forms flavours land here.
+     */
     ngControl = contentChild(NgControl, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ngControl" }] : /* istanbul ignore next */ []));
+    /**
+     * Bumped on every event the projected control emits.
+     *
+     * `AbstractControl`'s `touched` / `dirty` / `errors` accessors are NOT
+     * reactive under classic forms — Angular reads them inside `untracked()`, and
+     * `errors` is a plain assigned field. A `computed` over them therefore caches
+     * its first value and never recomputes, which in a zoneless app means the
+     * error block never appears at all. `control.events` is the reactive source
+     * Angular does expose, so the computed depends on this counter instead.
+     * Signal Forms needs none of this — its interop getters read live signals —
+     * and harmlessly contributes no events.
+     */
+    revision = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "revision" }] : /* istanbul ignore next */ []));
+    constructor() {
+        let sub = null;
+        effect(() => {
+            const control = this.ngControl()?.control;
+            sub?.unsubscribe();
+            sub = (control?.events ?? EMPTY).subscribe(() => this.revision.update(n => n + 1));
+        });
+        inject(DestroyRef).onDestroy(() => sub?.unsubscribe());
+    }
     errors = computed(() => {
+        this.revision();
         const c = this.ngControl();
         if (!c)
             return null;
@@ -112,6 +299,57 @@ class WrFormField {
         return !!errs && Object.keys(errs).length > 0;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    /** @internal Read by the projected `<wr-form-error>` children to decide which of them renders. */
+    errorKeys = computed(() => Object.keys(this.errors() ?? {}), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorKeys" }] : /* istanbul ignore next */ []));
+    /** @internal Read by the projected control so a screen reader is pointed at the message. */
+    describedBy = computed(() => (this.hasError() ? `${this.controlId()}-errors` : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    /**
+     * Render a catalog message for any error the markup does not already answer.
+     *
+     * On by default: a field with no `<wr-form-error>` at all is the common case,
+     * and an empty error block helps nobody. Turn it off for a field whose copy is
+     * entirely hand-written. @default true
+     */
+    autoErrors = input(true, { ...(ngDevMode ? { debugName: "autoErrors" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    projectedErrors = contentChildren(WrFormError, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "projectedErrors" }] : /* istanbul ignore next */ []));
+    appMessages = inject(WR_FORM_ERRORS);
+    i18n = inject(WrI18n, { optional: true });
+    /**
+     * Errors with no projected `<wr-form-error key>` to answer them, resolved to
+     * text: the app catalog first, then the `validation.*` i18n keys, then a
+     * built-in English sentence. Per-field markup always wins — it is the most
+     * specific thing the author wrote.
+     */
+    autoMessages = computed(() => {
+        if (!this.autoErrors())
+            return [];
+        const errors = this.errors();
+        if (!errors)
+            return [];
+        const claimed = new Set(this.projectedErrors()
+            .map(e => e.key())
+            .filter(Boolean));
+        return Object.entries(errors)
+            .filter(([key]) => !claimed.has(key))
+            .map(([key, error]) => ({ key, text: this.resolve(key, error) }))
+            .filter(m => m.text.length > 0);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoMessages" }] : /* istanbul ignore next */ []));
+    resolve(key, error) {
+        const app = this.appMessages[key];
+        if (app !== undefined)
+            return render(app, key, error, this.label());
+        // `t()` reads the service's revision signal, so this recomputes on a locale
+        // switch; a miss returns the key itself, which is the documented signal.
+        const translated = this.i18n?.t(`validation.${key}`, toParams(error));
+        if (translated && translated !== `validation.${key}`)
+            return translated;
+        const fallback = WR_FORM_ERROR_FALLBACKS[key];
+        return fallback === undefined ? '' : render(fallback, key, error, this.label());
+    }
     classes = computed(() => {
         const parts = ['wr-form-field'];
         if (this.hasError())
@@ -122,50 +360,28 @@ class WrFormField {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrFormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrFormField, isStandalone: true, selector: "wr-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, queries: [{ propertyName: "ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <label class=\"wr-form-field__label\" [attr.for]=\"controlId()\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"wr-form-field__required\" aria-hidden=\"true\">*</span>\n    } @else if (optional()) {\n      <span class=\"wr-form-field__optional\">(optional)</span>\n    }\n  </label>\n}\n\n<div class=\"wr-form-field__control\"><ng-content /></div>\n\n@if (hasError()) {\n  <div class=\"wr-form-field__errors\">\n    <ng-content select=\"wr-form-error\" />\n  </div>\n} @else if (hint()) {\n  <small class=\"wr-form-field__hint\">{{ hint() }}</small>\n}\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrFormField, isStandalone: true, selector: "wr-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, autoErrors: { classPropertyName: "autoErrors", publicName: "autoErrors", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, providers: [
+            {
+                provide: WR_FORM_FIELD,
+                // eslint-disable-next-line @angular-eslint/no-forward-ref
+                useExisting: forwardRef(() => WrFormField),
+            },
+        ], queries: [{ propertyName: "ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }, { propertyName: "projectedErrors", predicate: WrFormError, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <label class=\"wr-form-field__label\" [attr.for]=\"controlId()\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"wr-form-field__required\" aria-hidden=\"true\">*</span>\n    } @else if (optional()) {\n      <span class=\"wr-form-field__optional\">(optional)</span>\n    }\n  </label>\n}\n\n<div class=\"wr-form-field__control\"><ng-content /></div>\n\n@if (hasError()) {\n  <div class=\"wr-form-field__errors\" [attr.id]=\"describedBy()\">\n    <ng-content select=\"wr-form-error\" />\n    @for (message of autoMessages(); track message.key) {\n      <div class=\"wr-form-error wr-form-field__error\" role=\"alert\" [attr.data-key]=\"message.key\">\n        {{ message.text }}\n      </div>\n    }\n  </div>\n} @else if (hint()) {\n  <small class=\"wr-form-field__hint\">{{ hint() }}</small>\n}\n", encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrFormField, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-form-field', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, template: "@if (label()) {\n  <label class=\"wr-form-field__label\" [attr.for]=\"controlId()\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"wr-form-field__required\" aria-hidden=\"true\">*</span>\n    } @else if (optional()) {\n      <span class=\"wr-form-field__optional\">(optional)</span>\n    }\n  </label>\n}\n\n<div class=\"wr-form-field__control\"><ng-content /></div>\n\n@if (hasError()) {\n  <div class=\"wr-form-field__errors\">\n    <ng-content select=\"wr-form-error\" />\n  </div>\n} @else if (hint()) {\n  <small class=\"wr-form-field__hint\">{{ hint() }}</small>\n}\n" }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], ngControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgControl), { isSignal: true }] }] } });
-/**
- * One error message tied to a validator key. Renders only when the
- * parent form-field has a matching error in `control.errors`.
- *
- * @example
- * ```html
- * <wr-form-error key="required">This field is required.</wr-form-error>
- * <wr-form-error key="email">That doesn't look right.</wr-form-error>
- * ```
- */
-class WrFormError {
-    /**
-     * Validator key this message corresponds to (e.g. `'required'`).
-     * Optional — without a key the message always renders, which is the
-     * plain inline-error usage inside `<wr-form-item>`.
-     */
-    key = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "key" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrFormError, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: WrFormError, isStandalone: true, selector: "wr-form-error", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "alert" }, properties: { "attr.data-key": "key() ?? null" }, classAttribute: "wr-form-error wr-form-field__error" }, ngImport: i0, template: `<ng-content />`, isInline: true, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrFormError, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'wr-form-error',
-                    template: `<ng-content />`,
-                    encapsulation: ViewEncapsulation.None,
-                    host: {
-                        class: 'wr-form-error wr-form-field__error',
-                        role: 'alert',
-                        '[attr.data-key]': 'key() ?? null',
-                    },
-                }]
-        }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }] } });
+            args: [{ selector: 'wr-form-field', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, providers: [
+                        {
+                            provide: WR_FORM_FIELD,
+                            // eslint-disable-next-line @angular-eslint/no-forward-ref
+                            useExisting: forwardRef(() => WrFormField),
+                        },
+                    ], template: "@if (label()) {\n  <label class=\"wr-form-field__label\" [attr.for]=\"controlId()\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"wr-form-field__required\" aria-hidden=\"true\">*</span>\n    } @else if (optional()) {\n      <span class=\"wr-form-field__optional\">(optional)</span>\n    }\n  </label>\n}\n\n<div class=\"wr-form-field__control\"><ng-content /></div>\n\n@if (hasError()) {\n  <div class=\"wr-form-field__errors\" [attr.id]=\"describedBy()\">\n    <ng-content select=\"wr-form-error\" />\n    @for (message of autoMessages(); track message.key) {\n      <div class=\"wr-form-error wr-form-field__error\" role=\"alert\" [attr.data-key]=\"message.key\">\n        {{ message.text }}\n      </div>\n    }\n  </div>\n} @else if (hint()) {\n  <small class=\"wr-form-field__hint\">{{ hint() }}</small>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], ngControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgControl), { isSignal: true }] }], autoErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoErrors", required: false }] }], projectedErrors: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => WrFormError), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { WrFormError, WrFormField, WrFormItem };
+export { WR_FORM_ERRORS, WR_FORM_ERROR_FALLBACKS, WR_FORM_FIELD, WrFormError, WrFormField, WrFormItem, provideWrFormErrors };
 //# sourceMappingURL=ngwr-form.mjs.map

package/fesm2022/ngwr-form.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-form.mjs","sources":["../../../projects/lib/form/form-item.ts","../../../projects/lib/form/form-field.ts","../../../projects/lib/form/form-field.html","../../../projects/lib/form/ngwr-form.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\n/**\n * Wraps a label + control + error message into a single field row.\n *\n * Toggle `hasError` to apply error styling to the projected label and\n * any descendant input / textarea / checkbox.\n *\n * @example\n * ```html\n * <wr-form-item [hasError]=\"form.controls.email.invalid\">\n *   <label>Email</label>\n *   <wr-input formControlName=\"email\" />\n *   <wr-form-error>Invalid email</wr-form-error>\n * </wr-form-item>\n * ```\n *\n * @see https://ngwr.dev/reference/components/form\n */\n@Component({\n  selector: 'wr-form-item',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrFormItem {\n  /**\n   * When `true`, applies error coloring to the projected label and inputs.\n   *\n   * @default false\n   */\n  readonly hasError = input(false, { transform: coerceBooleanProperty });\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-form-item'];\n    if (this.hasError()) parts.push('wr-form-item--error');\n    return parts.join(' ');\n  });\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, contentChild, input } from '@angular/core';\nimport { NgControl } from '@angular/forms';\n\nlet uid = 0;\n\n/**\n * Wraps a label + control + hint + error messages into a single block —\n * the layout primitive every form ends up reinventing.\n *\n * - Auto-binds `label[for]` to the projected control via a generated id\n *   (or use the form-control's `[id]` if you set one).\n * - Reads the projected control's `NgControl` to surface validation\n *   errors only when the control has been touched / submitted.\n * - Optional `[required]` / `[optional]` markers next to the label.\n *\n * @example\n * ```html\n * <wr-form-field label=\"Email\" hint=\"We'll never share it.\">\n *   <input wrInput [formControl]=\"email\" type=\"email\" />\n *   <wr-form-error key=\"required\">Email is required.</wr-form-error>\n *   <wr-form-error key=\"email\">Not a valid email.</wr-form-error>\n * </wr-form-field>\n * ```\n *\n * @see https://ngwr.dev/reference/components/form-field\n */\n@Component({\n  selector: 'wr-form-field',\n  templateUrl: './form-field.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrFormField {\n  /** Label text shown above the control. */\n  readonly label = input<string>('');\n\n  /** Hint text shown below the control. Hidden when an error is visible. */\n  readonly hint = input<string>('');\n\n  /** Show a `*` next to the label. @default false */\n  readonly required = input(false, { transform: coerceBooleanProperty });\n\n  /** Show `(optional)` next to the label. Mutually exclusive with `required`. @default false */\n  readonly optional = input(false, { transform: coerceBooleanProperty });\n\n  /** Force a specific id on the label's `for` attribute. Auto-generated otherwise. */\n  readonly controlId = input<string>(`wr-form-field-${++uid}`);\n\n  /** Projected `NgControl` — used to read touched / dirty / errors. */\n  protected readonly ngControl = contentChild(NgControl);\n\n  protected readonly errors = computed(() => {\n    const c = this.ngControl();\n    if (!c) return null;\n    if (!c.touched && !c.dirty) return null;\n    return c.errors;\n  });\n\n  protected readonly hasError = computed(() => {\n    const errs = this.errors();\n    return !!errs && Object.keys(errs).length > 0;\n  });\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-form-field'];\n    if (this.hasError()) parts.push('wr-form-field--invalid');\n    if (this.required()) parts.push('wr-form-field--required');\n    return parts.join(' ');\n  });\n}\n\n/**\n * One error message tied to a validator key. Renders only when the\n * parent form-field has a matching error in `control.errors`.\n *\n * @example\n * ```html\n * <wr-form-error key=\"required\">This field is required.</wr-form-error>\n * <wr-form-error key=\"email\">That doesn't look right.</wr-form-error>\n * ```\n */\n@Component({\n  selector: 'wr-form-error',\n  template: `<ng-content />`,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'wr-form-error wr-form-field__error',\n    role: 'alert',\n    '[attr.data-key]': 'key() ?? null',\n  },\n})\nexport class WrFormError {\n  /**\n   * Validator key this message corresponds to (e.g. `'required'`).\n   * Optional — without a key the message always renders, which is the\n   * plain inline-error usage inside `<wr-form-item>`.\n   */\n  readonly key = input<string>();\n}\n","@if (label()) {\n  <label class=\"wr-form-field__label\" [attr.for]=\"controlId()\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"wr-form-field__required\" aria-hidden=\"true\">*</span>\n    } @else if (optional()) {\n      <span class=\"wr-form-field__optional\">(optional)</span>\n    }\n  </label>\n}\n\n<div class=\"wr-form-field__control\"><ng-content /></div>\n\n@if (hasError()) {\n  <div class=\"wr-form-field__errors\">\n    <ng-content select=\"wr-form-error\" />\n  </div>\n} @else if (hint()) {\n  <small class=\"wr-form-field__hint\">{{ hint() }}</small>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-form.mjs","sources":["../../../projects/lib/form/form-item.ts","../../../projects/lib/form/form-errors.ts","../../../projects/lib/form/tokens.ts","../../../projects/lib/form/form-field.ts","../../../projects/lib/form/form-field.html","../../../projects/lib/form/ngwr-form.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\n/**\n * Wraps a label + control + error message into a single field row.\n *\n * Toggle `hasError` to apply error styling to the projected label and\n * any descendant input / textarea / checkbox.\n *\n * @example\n * ```html\n * <wr-form-item [hasError]=\"form.controls.email.invalid\">\n *   <label>Email</label>\n *   <input wrInput formControlName=\"email\" />\n *   <wr-form-error>Invalid email</wr-form-error>\n * </wr-form-item>\n * ```\n *\n * @see https://ngwr.dev/reference/components/form\n */\n@Component({\n  selector: 'wr-form-item',\n  template: '<ng-content />',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrFormItem {\n  /**\n   * When `true`, applies error coloring to the projected label and inputs.\n   *\n   * @default false\n   */\n  readonly hasError = input(false, { transform: coerceBooleanProperty });\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-form-item'];\n    if (this.hasError()) parts.push('wr-form-item--error');\n    return parts.join(' ');\n  });\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { InjectionToken, type EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';\n\n/** Pull a number out of a validator payload without trusting its shape. */\nfunction num(error: unknown, field: string): string {\n  if (error && typeof error === 'object' && field in error) {\n    const value = (error as Record<string, unknown>)[field];\n    if (typeof value === 'number' || typeof value === 'string') return String(value);\n  }\n  return '';\n}\n\n/** What a message function is handed to build its sentence. */\nexport interface WrFormErrorContext {\n  /** Validator key (classic forms) or Signal Forms `kind` that produced the error. */\n  readonly key: string;\n  /**\n   * The validator's own payload — `{ requiredLength, actualLength }` for\n   * `minlength`, `{ min }` for `wrMinDate`, and so on. `true` for the\n   * flag-shaped validators, which carry nothing.\n   */\n  readonly error: unknown;\n  /** The surrounding field's `label`, so a message can name the field. */\n  readonly label: string;\n}\n\n/** A message, or a function that builds one from the validator's payload. */\nexport type WrFormErrorMessage = string | ((ctx: WrFormErrorContext) => string);\n\n/** Validator key → message. Keys are matched exactly against `control.errors`. */\nexport type WrFormErrorMessages = Readonly<Record<string, WrFormErrorMessage>>;\n\n/**\n * App-wide validation copy. Empty by default; `<wr-form-field>` falls through\n * to the `ngwr/i18n` catalog and then to a built-in English sentence, so a\n * form shows a usable message with no configuration at all.\n */\nexport const WR_FORM_ERRORS = new InjectionToken<WrFormErrorMessages>('WR_FORM_ERRORS', {\n  providedIn: 'root',\n  factory: () => ({}),\n});\n\n/**\n * Register validation messages for the whole app.\n *\n * Only the keys you name are overridden — everything else keeps resolving\n * through the i18n catalog, so this composes with `provideWrI18n()` rather than\n * replacing it. A projected `<wr-form-error key=\"…\">` still wins over both:\n * per-field copy beats app-wide copy.\n *\n * @example\n * ```ts\n * bootstrapApplication(App, {\n *   providers: [\n *     provideWrFormErrors({\n *       required: 'Please fill this in.',\n *       minlength: ({ error }) => `At least ${(error as { requiredLength: number }).requiredLength} characters.`,\n *     }),\n *   ],\n * });\n * ```\n */\nexport function provideWrFormErrors(messages: WrFormErrorMessages = {}): EnvironmentProviders {\n  return makeEnvironmentProviders([{ provide: WR_FORM_ERRORS, useValue: messages }]);\n}\n\n/**\n * Last-resort English, used when no app catalog and no i18n catalog answer.\n *\n * These exist so that a form with zero configuration still says something true\n * rather than rendering an empty error block. Every key here also ships as a\n * `validation.*` entry in `ngwr/i18n/{en,ru}`, which is what a localized app\n * actually reads.\n */\nexport const WR_FORM_ERROR_FALLBACKS: WrFormErrorMessages = {\n  // Angular built-ins.\n  required: 'This field is required.',\n  requiredTrue: 'This field must be checked.',\n  email: 'Enter a valid email address.',\n  minlength: ({ error }) => `Enter at least ${num(error, 'requiredLength')} characters.`,\n  maxlength: ({ error }) => `Enter at most ${num(error, 'requiredLength')} characters.`,\n  min: ({ error }) => `Enter ${num(error, 'min')} or more.`,\n  max: ({ error }) => `Enter ${num(error, 'max')} or less.`,\n  pattern: 'This value is not in the expected format.',\n\n  // WrValidators.\n  noWhitespace: 'This field cannot be blank.',\n  hexColor: 'Enter a hex colour, e.g. #1a2b3c.',\n  url: 'Enter a valid URL.',\n  cardNumber: 'Enter a valid card number.',\n  cvc: ({ error }) => `Enter the ${num(error, 'length')}-digit security code.`,\n  iban: 'Enter a valid IBAN.',\n  match: 'The two values do not match.',\n  matchFields: 'These fields do not match.',\n  oneOf: 'Choose one of the allowed values.',\n  minDate: 'Choose a later date.',\n  maxDate: 'Choose an earlier date.',\n};\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { InjectionToken, type Signal } from '@angular/core';\n\n/**\n * What a projected control can read from its surrounding `<wr-form-field>`.\n *\n * The field renders `<label [for]>` before it can see what was projected into\n * it, so the id has to travel the other way: the control adopts the id the\n * label already points at. Doing it through DI keeps it a render-time binding,\n * which is what SSR needs — stamping the id from `afterNextRender` would leave\n * every prerendered page with a label pointing at nothing.\n */\nexport interface WrFormFieldContext {\n  /** Id the field's `<label for>` points at. */\n  readonly controlId: Signal<string>;\n\n  /**\n   * Validator keys currently in error, once the control is touched or dirty.\n   * Empty when the field is valid or has not been interacted with.\n   */\n  readonly errorKeys: Signal<readonly string[]>;\n\n  /** Id of the element listing the visible messages, or `null` when there are none. */\n  readonly describedBy: Signal<string | null>;\n}\n\n/** Present only inside a `<wr-form-field>`; inject with `{ optional: true }`. */\nexport const WR_FORM_FIELD = new InjectionToken<WrFormFieldContext>('WR_FORM_FIELD');\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n  Component,\n  DestroyRef,\n  ViewEncapsulation,\n  computed,\n  contentChild,\n  contentChildren,\n  effect,\n  forwardRef,\n  inject,\n  input,\n  signal,\n} from '@angular/core';\nimport { NgControl } from '@angular/forms';\n\nimport { EMPTY, type Subscription } from 'rxjs';\n\nimport { WrI18n } from 'ngwr/i18n';\n\nimport { WR_FORM_ERRORS, WR_FORM_ERROR_FALLBACKS, type WrFormErrorMessage } from './form-errors';\nimport { WR_FORM_FIELD, type WrFormFieldContext } from './tokens';\n\nlet uid = 0;\n\n/** A message is either literal text or a function over the validator's payload. */\nfunction render(message: WrFormErrorMessage, key: string, error: unknown, label: string): string {\n  return typeof message === 'function' ? message({ key, error, label }) : message;\n}\n\n/** Validator payloads are plain objects; anything else interpolates nothing. */\nfunction toParams(error: unknown): Record<string, unknown> | undefined {\n  return error && typeof error === 'object' ? (error as Record<string, unknown>) : undefined;\n}\n\n/**\n * One error message tied to a validator key. Renders only when the parent\n * form-field has a matching error in `control.errors`, and only once the\n * control is touched or dirty.\n *\n * @example\n * ```html\n * <wr-form-error key=\"required\">This field is required.</wr-form-error>\n * <wr-form-error key=\"email\">That doesn't look right.</wr-form-error>\n * ```\n */\n@Component({\n  selector: 'wr-form-error',\n  template: `<ng-content />`,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'wr-form-error wr-form-field__error',\n    role: 'alert',\n    '[attr.data-key]': 'key() ?? null',\n    '[class.wr-form-field__error--hidden]': '!visible()',\n  },\n})\nexport class WrFormError {\n  /**\n   * Validator key this message corresponds to (e.g. `'required'`).\n   * Optional — without a key the message always renders, which is the\n   * plain inline-error usage inside `<wr-form-item>`.\n   */\n  readonly key = input<string>();\n\n  private readonly field = inject(WR_FORM_FIELD, { optional: true });\n\n  /**\n   * Whether this message is the one the current error calls for.\n   *\n   * The parent projects every `<wr-form-error>` through a single\n   * `<ng-content select>`, which cannot filter — so each message decides for\n   * itself. Without this, one invalid control rendered \"Email is required.\"\n   * and \"That isn't a valid email.\" side by side, which is what the docs have\n   * always described as gated behaviour.\n   *\n   * A keyless message always shows: that is the plain inline-error usage inside\n   * `<wr-form-item>`, which has no error discovery at all.\n   */\n  protected readonly visible = computed(() => {\n    const key = this.key();\n    if (!key || !this.field) return true;\n    return this.field.errorKeys().includes(key);\n  });\n}\n\n/**\n * Wraps a label + control + hint + error messages into a single block —\n * the layout primitive every form ends up reinventing.\n *\n * - Auto-binds `label[for]` to the projected control via a generated id\n *   (or use the form-control's `[id]` if you set one).\n * - Reads the projected control's `NgControl` to surface validation\n *   errors only when the control has been touched / submitted.\n * - Optional `[required]` / `[optional]` markers next to the label.\n *\n * @example\n * ```html\n * <wr-form-field label=\"Email\" hint=\"We'll never share it.\">\n *   <input wrInput [formControl]=\"email\" type=\"email\" />\n *   <wr-form-error key=\"required\">Email is required.</wr-form-error>\n *   <wr-form-error key=\"email\">Not a valid email.</wr-form-error>\n * </wr-form-field>\n * ```\n *\n * @see https://ngwr.dev/reference/components/form-field\n */\n@Component({\n  selector: 'wr-form-field',\n  templateUrl: './form-field.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n  providers: [\n    {\n      provide: WR_FORM_FIELD,\n      // eslint-disable-next-line @angular-eslint/no-forward-ref\n      useExisting: forwardRef(() => WrFormField),\n    },\n  ],\n})\nexport class WrFormField implements WrFormFieldContext {\n  /** Label text shown above the control. */\n  readonly label = input<string>('');\n\n  /** Hint text shown below the control. Hidden when an error is visible. */\n  readonly hint = input<string>('');\n\n  /** Show a `*` next to the label. @default false */\n  readonly required = input(false, { transform: coerceBooleanProperty });\n\n  /** Show `(optional)` next to the label. Mutually exclusive with `required`. @default false */\n  readonly optional = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Force a specific id on the label's `for` attribute. Auto-generated\n   * otherwise, and adopted by the projected `wrInput` unless that element\n   * already carries an `id` of its own.\n   */\n  readonly controlId = input<string>(`wr-form-field-${++uid}`);\n\n  /**\n   * Projected `NgControl` — used to read touched / dirty / errors.\n   *\n   * This catches `[formField]` too: Angular's Signal Forms directive provides\n   * `NgControl` via its interop shim, so both forms flavours land here.\n   */\n  protected readonly ngControl = contentChild(NgControl);\n\n  /**\n   * Bumped on every event the projected control emits.\n   *\n   * `AbstractControl`'s `touched` / `dirty` / `errors` accessors are NOT\n   * reactive under classic forms — Angular reads them inside `untracked()`, and\n   * `errors` is a plain assigned field. A `computed` over them therefore caches\n   * its first value and never recomputes, which in a zoneless app means the\n   * error block never appears at all. `control.events` is the reactive source\n   * Angular does expose, so the computed depends on this counter instead.\n   * Signal Forms needs none of this — its interop getters read live signals —\n   * and harmlessly contributes no events.\n   */\n  private readonly revision = signal(0);\n\n  constructor() {\n    let sub: Subscription | null = null;\n    effect(() => {\n      const control = this.ngControl()?.control;\n      sub?.unsubscribe();\n      sub = (control?.events ?? EMPTY).subscribe(() => this.revision.update(n => n + 1));\n    });\n    inject(DestroyRef).onDestroy(() => sub?.unsubscribe());\n  }\n\n  protected readonly errors = computed(() => {\n    this.revision();\n    const c = this.ngControl();\n    if (!c) return null;\n    if (!c.touched && !c.dirty) return null;\n    return c.errors;\n  });\n\n  protected readonly hasError = computed(() => {\n    const errs = this.errors();\n    return !!errs && Object.keys(errs).length > 0;\n  });\n\n  /** @internal Read by the projected `<wr-form-error>` children to decide which of them renders. */\n  readonly errorKeys = computed<readonly string[]>(() => Object.keys(this.errors() ?? {}));\n\n  /** @internal Read by the projected control so a screen reader is pointed at the message. */\n  readonly describedBy = computed(() => (this.hasError() ? `${this.controlId()}-errors` : null));\n\n  /**\n   * Render a catalog message for any error the markup does not already answer.\n   *\n   * On by default: a field with no `<wr-form-error>` at all is the common case,\n   * and an empty error block helps nobody. Turn it off for a field whose copy is\n   * entirely hand-written. @default true\n   */\n  readonly autoErrors = input(true, { transform: coerceBooleanProperty });\n\n  private readonly projectedErrors = contentChildren(WrFormError);\n  private readonly appMessages = inject(WR_FORM_ERRORS);\n  private readonly i18n = inject(WrI18n, { optional: true });\n\n  /**\n   * Errors with no projected `<wr-form-error key>` to answer them, resolved to\n   * text: the app catalog first, then the `validation.*` i18n keys, then a\n   * built-in English sentence. Per-field markup always wins — it is the most\n   * specific thing the author wrote.\n   */\n  protected readonly autoMessages = computed<readonly { key: string; text: string }[]>(() => {\n    if (!this.autoErrors()) return [];\n    const errors = this.errors();\n    if (!errors) return [];\n\n    const claimed = new Set(\n      this.projectedErrors()\n        .map(e => e.key())\n        .filter(Boolean)\n    );\n\n    return Object.entries(errors)\n      .filter(([key]) => !claimed.has(key))\n      .map(([key, error]) => ({ key, text: this.resolve(key, error) }))\n      .filter(m => m.text.length > 0);\n  });\n\n  private resolve(key: string, error: unknown): string {\n    const app = this.appMessages[key];\n    if (app !== undefined) return render(app, key, error, this.label());\n\n    // `t()` reads the service's revision signal, so this recomputes on a locale\n    // switch; a miss returns the key itself, which is the documented signal.\n    const translated = this.i18n?.t(`validation.${key}`, toParams(error));\n    if (translated && translated !== `validation.${key}`) return translated;\n\n    const fallback = WR_FORM_ERROR_FALLBACKS[key];\n    return fallback === undefined ? '' : render(fallback, key, error, this.label());\n  }\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-form-field'];\n    if (this.hasError()) parts.push('wr-form-field--invalid');\n    if (this.required()) parts.push('wr-form-field--required');\n    return parts.join(' ');\n  });\n}\n","@if (label()) {\n  <label class=\"wr-form-field__label\" [attr.for]=\"controlId()\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"wr-form-field__required\" aria-hidden=\"true\">*</span>\n    } @else if (optional()) {\n      <span class=\"wr-form-field__optional\">(optional)</span>\n    }\n  </label>\n}\n\n<div class=\"wr-form-field__control\"><ng-content /></div>\n\n@if (hasError()) {\n  <div class=\"wr-form-field__errors\" [attr.id]=\"describedBy()\">\n    <ng-content select=\"wr-form-error\" />\n    @for (message of autoMessages(); track message.key) {\n      <div class=\"wr-form-error wr-form-field__error\" role=\"alert\" [attr.data-key]=\"message.key\">\n        {{ message.text }}\n      </div>\n    }\n  </div>\n} @else if (hint()) {\n  <small class=\"wr-form-field__hint\">{{ hint() }}</small>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-fuzzy-text.mjs

@@ -88,6 +88,14 @@ class WrFuzzyText {
     isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
     platform = inject(WrPlatform);
     teardown;
+    /**
+     * `init()` suspends on font loading, so the component can be destroyed while
+     * it is awaiting. At that moment `teardown` is still undefined, so the
+     * destroy hook has nothing to call — and everything the rest of `init()`
+     * starts (the rAF loop, the glitch timers, canvas listeners) would run for
+     * the life of the page. This flag lets the continuation bail out.
+     */
+    destroyed = false;
     constructor() {
         if (!this.isBrowser)
             return;
@@ -118,7 +126,10 @@ class WrFuzzyText {
                 void this.init();
             });
         });
-        this.destroyRef.onDestroy(() => this.teardown?.());
+        this.destroyRef.onDestroy(() => {
+            this.destroyed = true;
+            this.teardown?.();
+        });
     }
     // Init / loop
     async init() {
@@ -138,6 +149,9 @@ class WrFuzzyText {
         catch {
             await document.fonts.ready;
         }
+        // Destroyed while the fonts were loading — nothing below may start.
+        if (this.destroyed)
+            return;
         // Numeric font size for buffer maths.
         let numericFontSize;
         if (typeof fontSize === 'number') {