ngwr 10.2.0 → 11.0.0

package/fesm2022/ngwr-form-testing.mjs

@@ -0,0 +1,451 @@
+import { ContentContainerComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+
+/**
+ * @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
+ */
+/**
+ * The messages this field is showing, or the ones it is holding back.
+ *
+ * Anchored with `:scope >` because the field's own parts are all direct children
+ * of its host: a `<wr-form-field>` nested in another one's control slot otherwise
+ * has its error block matched by the OUTER field's query too, and the outer
+ * answers with a sentence that is not its own.
+ */
+const MESSAGE = ':scope > .wr-form-field__errors > .wr-form-field__error';
+const VISIBLE = `${MESSAGE}:not(.wr-form-field__error--hidden)`;
+const SUPPRESSED = `${MESSAGE}.wr-form-field__error--hidden`;
+/** The control slot — every native control lookup is scoped through this. */
+const SLOT = ':scope > .wr-form-field__control';
+/** The label and the hint, anchored for the same reason as {@link MESSAGE}. */
+const LABEL = ':scope > .wr-form-field__label';
+const HINT = ':scope > .wr-form-field__hint';
+/**
+ * Test harness for `<wr-form-field>` — the label + control + hint + validation
+ * copy block.
+ *
+ * The field's real job is the COPY CONTRACT, and this harness is built around it.
+ * A message reaches the DOM one of two ways, and they are distinguishable there:
+ *
+ * - a `<wr-form-error key="…">` the consumer wrote, which renders only while that
+ *   key is failing — the others stay in the DOM carrying
+ *   `wr-form-field__error--hidden`, which is why {@link getErrors} filters and
+ *   {@link getSuppressedErrorKeys} exists. A raw `.wr-form-error` query answers
+ *   with the held-back copy too, and reads green on the wrong sentence.
+ * - a message the field RESOLVED for an error no markup claimed:
+ *   `provideWrFormErrors()`, then the `ngwr/i18n` `validation.*` catalog, then a
+ *   built-in English sentence. All three render the identical `<div>`, so
+ *   `source` is `'resolved'` for every one of them — the DOM genuinely cannot say
+ *   which link answered, and this harness does not pretend otherwise.
+ *
+ * Nothing renders at all until the projected control is touched or dirty, so a
+ * spec has to reach that gate first: {@link blurControl} is the shortest way
+ * (blur is what marks a bound control touched), and typing through the control's
+ * own harness is the other.
+ *
+ * The field publishes no `aria-label` anywhere. Its `<label for>` pointing at the
+ * projected control IS the naming story, and a control that does not adopt the
+ * id leaves the field silently unlabelled — {@link isLabelLinkedToControl} is
+ * what catches that. The other half is the reverse wiring: the control reads back
+ * `aria-describedby` and `aria-invalid`, which is the only reason a screen reader
+ * hears the message ({@link getAnnouncedDescription}).
+ *
+ * Harnesses loaded through this one resolve INSIDE the control slot, so the
+ * control's own harness composes without a selector:
+ *
+ * @example
+ * ```ts
+ * const email = await loader.getHarness(WrFormFieldHarness.with({ label: 'Email' }));
+ *
+ * await (await email.getHarness(WrInputHarness)).setValue('nope');
+ * await email.blurControl();
+ *
+ * expect(await email.getErrorTexts()).toEqual(["That isn't a valid email."]);
+ * expect(await email.getAnnouncedDescription()).toBe("That isn't a valid email.");
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrFormFieldHarness extends ContentContainerComponentHarness {
+    static hostSelector = 'wr-form-field';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrFormFieldHarness, options)
+            .addOption('label', options.label, (harness, label) => HarnessPredicate.stringMatches(harness.getLabel(), label))
+            .addOption('hint', options.hint, (harness, hint) => HarnessPredicate.stringMatches(harness.getHint(), hint))
+            .addOption('required', options.required, async (harness, required) => (await harness.isRequired()) === required)
+            .addOption('invalid', options.invalid, async (harness, invalid) => (await harness.isInvalid()) === invalid)
+            .addOption('errorText', options.errorText, async (harness, text) => {
+            for (const shown of await harness.getErrorTexts()) {
+                if (await HarnessPredicate.stringMatches(shown, text))
+                    return true;
+            }
+            return false;
+        });
+    }
+    /**
+     * The label text, or `null` when the field renders no label.
+     *
+     * The `*` and `(optional)` markers ride INSIDE the `<label>`, so they are
+     * excluded here — otherwise this answers `'Email *'` and every equality
+     * assertion has to know which marker the field happens to carry.
+     *
+     * `null` is not "the consumer forgot": `label=""` renders no `<label>` element
+     * at all, which also means there is nothing naming the control.
+     */
+    async getLabel() {
+        const label = await this.labelElement();
+        return label ? label.text({ exclude: '.wr-form-field__required, .wr-form-field__optional' }) : null;
+    }
+    /**
+     * Whether the field is marked required.
+     *
+     * Read from the host's `wr-form-field--required` modifier, not from the `*`:
+     * that marker is `aria-hidden="true"` decoration, and it is only rendered when
+     * there is a label to hang it on — the modifier is set either way. Note what
+     * this does NOT mean: the field forwards nothing to the projected control, so
+     * `required` here is the field's own visual state. What announces the constraint
+     * is the forms layer — a `required` rule writes the native `required` attribute
+     * onto the control — and the two are set independently, so a field can carry the
+     * `*` with no validator behind it.
+     */
+    async isRequired() {
+        return (await this.host()).hasClass('wr-form-field--required');
+    }
+    /**
+     * Whether the label carries the `(optional)` marker.
+     *
+     * Read from the marker itself, because — unlike `required` — `optional` sets no
+     * host modifier. It is also the marker a screen reader actually reads: this one
+     * is not `aria-hidden`. `required` wins when both inputs are set, so a required
+     * field is never optional here however it was bound.
+     */
+    async isOptional() {
+        return (await this.locatorForOptional(`${LABEL} .wr-form-field__optional`)()) !== null;
+    }
+    /**
+     * The hint text, or `null` when none is showing.
+     *
+     * `null` does not mean the consumer set no hint: the error block takes the
+     * hint's slot outright, so a field with a visible message has no hint in the DOM
+     * at all. Note also that the hint carries no id and is NOT referenced by the
+     * control's `aria-describedby` — see {@link getAnnouncedDescription}.
+     */
+    async getHint() {
+        const hint = await this.locatorForOptional(HINT)();
+        return hint ? hint.text() : null;
+    }
+    /**
+     * Whether the field is painting the error state.
+     *
+     * The host's `wr-form-field--invalid` modifier — what the user sees. The
+     * screen-reader half lives on the control as `aria-invalid`, and the two are
+     * separate elements rather than two readings of one: {@link isControlInvalid}.
+     */
+    async isInvalid() {
+        return (await this.host()).hasClass('wr-form-field--invalid');
+    }
+    /**
+     * Every message the field is SHOWING, in DOM order — the consumer's markup
+     * first, then whatever the field resolved for the keys that markup left over.
+     *
+     * Only THIS field's own error block is read — its direct child, holding its
+     * direct children — so a `<wr-form-field>` nested in another one's control slot
+     * contributes nothing to the outer field's answer. Without that anchoring the
+     * outer field reports the inner one's copy as its own, which is the same class
+     * of break as reading a sibling field's messages.
+     */
+    async getErrors() {
+        const elements = await this.locatorForAll(VISIBLE)();
+        return Promise.all(elements.map(async (element) => ({
+            key: await element.getAttribute('data-key'),
+            text: await element.text(),
+            // The consumer's copy is its own element; a resolved message is a plain
+            // `<div>` the field stamped out. That tag name is the whole of what the
+            // DOM knows about provenance.
+            source: (await element.getProperty('tagName')).toLowerCase() === 'wr-form-error'
+                ? 'projected'
+                : 'resolved',
+        })));
+    }
+    /** The visible messages as text, in DOM order. */
+    async getErrorTexts() {
+        return (await this.getErrors()).map(error => error.text);
+    }
+    /**
+     * The visible message for one validator key.
+     *
+     * Throws rather than answering `null` when that key has no visible message: the
+     * two reasons are worth failing on and the message names both — the key is not
+     * in error at all, or its copy resolved to nothing.
+     */
+    async getErrorText(key) {
+        const errors = await this.getErrors();
+        const match = errors.find(error => error.key === key);
+        if (match)
+            return match.text;
+        const shown = errors.map(error => error.key ?? '(keyless)');
+        const detail = shown.length > 0
+            ? `Showing: ${shown.join(', ')}.`
+            : 'The field is showing nothing — it is either valid, or the control is still untouched and pristine.';
+        throw new Error(`WrFormFieldHarness.getErrorText(${JSON.stringify(key)}): no visible message for that key. ${detail}`);
+    }
+    /**
+     * The keys of the projected messages the field is holding BACK — copy that is in
+     * the DOM but hidden because its key is not among the failing ones.
+     *
+     * This is the gating contract seen from outside, and the reason a spec must not
+     * query `.wr-form-error` itself: the suppressed sentences sit right next to the
+     * live one.
+     */
+    async getSuppressedErrorKeys() {
+        const hidden = await this.locatorForAll(SUPPRESSED)();
+        const keys = await Promise.all(hidden.map(element => element.getAttribute('data-key')));
+        return keys.filter((key) => key !== null);
+    }
+    /**
+     * Whether the field is announcing an error it has no words for: invalid, with an
+     * error block that renders nothing.
+     *
+     * Worth a named check because it is invisible in review — the field still goes
+     * red, and `aria-describedby` still points at the block, so a screen reader is
+     * sent to an empty element. It happens when no link in the copy chain answers
+     * the key (`[autoErrors]="false"` with no markup, or a key nothing has copy for
+     * — Signal Forms reports `minLength`, while the chain only knows Angular's
+     * lowercase `minlength`).
+     */
+    async hasEmptyErrorBlock() {
+        if (!(await this.isInvalid()))
+            return false;
+        return (await this.getErrors()).every(error => error.text.length === 0);
+    }
+    /** The id the `<label for>` points at, or `null` when there is no label. */
+    async getLabelFor() {
+        const label = await this.labelElement();
+        return label ? label.getAttribute('for') : null;
+    }
+    /** The `id` the projected control actually answers to, or `null` when it has none. */
+    async getControlId() {
+        return (await this.control()).getAttribute('id');
+    }
+    /**
+     * Whether the `<label for>` resolves to an element inside THIS field's control
+     * slot — the only thing that makes the field nameable.
+     *
+     * Scoped to the slot on purpose: ids are document-global, so a check that went
+     * through `getElementById` would also pass for a label pointing at a DIFFERENT
+     * field's control, and for a control that has been moved out of the field
+     * entirely. The failure this catches is quiet — a projected control that does
+     * not adopt the field's `controlId` (a bare `<input>` with no `[wrInput]`, say)
+     * leaves a `for` naming nothing, the field renders exactly as it always did, and
+     * nothing is labelled.
+     */
+    async isLabelLinkedToControl() {
+        const id = await this.getLabelFor();
+        if (!id)
+            return false;
+        return (await this.locatorForOptional(`${SLOT} [id="${id}"]`)()) !== null;
+    }
+    /**
+     * The ids the projected control names in `aria-describedby`, in order.
+     *
+     * The field points this at the error block and nothing else — the hint has no
+     * id — so an empty list while a hint is showing is correct rather than a bug.
+     * That is not an oversight to fix from a harness either: `[wrInput]` derives
+     * `aria-invalid` from the same signal, so describing the hint would announce
+     * every hinted field as invalid.
+     */
+    async getDescribedByIds() {
+        const value = await (await this.control()).getAttribute('aria-describedby');
+        return value ? value.split(/\s+/).filter(Boolean) : [];
+    }
+    /**
+     * What a screen reader reads as the control's description: the text of the
+     * elements `aria-describedby` names, joined by a space. `null` when the control
+     * describes nothing.
+     *
+     * `''` is a real answer and the interesting one — the reference resolves to an
+     * element with no text in it, which is {@link hasEmptyErrorBlock}. Ids naming
+     * something outside this field are skipped (a consumer's own description is out
+     * of a field harness's reach); an id naming nothing anywhere throws, because a
+     * dangling reference is the bug this method exists to surface.
+     *
+     * Suppressed copy is excluded explicitly rather than left to CSS: a browser drops
+     * `display: none` subtrees from the accessibility tree, but a unit test loads no
+     * stylesheet at all, so the referenced block's raw `textContent` runs every
+     * held-back sentence together with the live one and this would answer with copy
+     * nobody can read.
+     */
+    async getAnnouncedDescription() {
+        const ids = await this.getDescribedByIds();
+        if (ids.length === 0)
+            return null;
+        const parts = [];
+        for (const id of ids) {
+            const inField = await this.locatorForOptional(`[id="${id}"]`)();
+            if (inField) {
+                parts.push(await inField.text({ exclude: '.wr-form-field__error--hidden' }));
+                continue;
+            }
+            if ((await this.documentRootLocatorFactory().locatorForOptional(`[id="${id}"]`)()) === null) {
+                throw new Error(`WrFormFieldHarness.getAnnouncedDescription(): the control's aria-describedby names "${id}", which is not ` +
+                    'an element anywhere in the document — a screen reader is pointed at nothing.');
+            }
+        }
+        return parts.join(' ');
+    }
+    /**
+     * Whether the control announces itself invalid.
+     *
+     * `aria-invalid` on the projected control, which is what assistive technology
+     * is told — the field's own red styling is {@link isInvalid}. Both are here
+     * because they live on different elements and travel in opposite directions: the
+     * field renders the message, the control reads back that there is one. A field
+     * that paints red while the control says nothing is a real (and silent) break.
+     */
+    async isControlInvalid() {
+        return (await (await this.control()).getAttribute('aria-invalid')) === 'true';
+    }
+    /** Move focus to the projected control. */
+    async focusControl() {
+        return (await this.control()).focus();
+    }
+    /**
+     * Blur the projected control, which is usually how a spec gets any message to
+     * appear at all: a bound control marks itself touched on blur, and the field
+     * renders nothing while the control is untouched AND pristine.
+     */
+    async blurControl() {
+        return (await this.control()).blur();
+    }
+    /** The rendered `<label>`, or `null` when `label` is empty. */
+    async labelElement() {
+        return this.locatorForOptional(LABEL)();
+    }
+    /**
+     * The control this field wraps.
+     *
+     * The element the label points at, when that resolves inside the slot — which
+     * covers a control nested inside a component (`<wr-input-number>`'s own
+     * `<input>` adopts the field's id, so the label names it, not the component
+     * element). Otherwise the first native control in the slot, so a field with no
+     * label still answers.
+     */
+    async control() {
+        const id = await this.getLabelFor();
+        if (id) {
+            const labelled = await this.locatorForOptional(`${SLOT} [id="${id}"]`)();
+            if (labelled)
+                return labelled;
+        }
+        const native = await this.locatorForOptional(`${SLOT} input, ${SLOT} select, ${SLOT} textarea`)();
+        if (native)
+            return native;
+        throw new Error('WrFormFieldHarness: this field wraps no control. Nothing in `.wr-form-field__control` answers to the ' +
+            "label's `for`, and there is no <input> / <select> / <textarea> to fall back to.");
+    }
+    /**
+     * The content loader every `HarnessLoader` method on this class runs through,
+     * scoped to the control slot.
+     *
+     * So `field.getHarness(WrInputHarness)` finds the control this field wraps and
+     * not a sibling field's — the loader is per-instance by construction, which is
+     * what a document-wide query for the same selector would lose.
+     */
+    async getRootHarnessLoader() {
+        return this.locatorFactory.harnessLoaderFor(SLOT);
+    }
+}
+
+/**
+ * @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
+ */
+/**
+ * Test harness for `<wr-form-item>` — the layout-only field row.
+ *
+ * Deliberately a much smaller surface than {@link WrFormFieldHarness}, because
+ * the component is a much smaller thing: it discovers no control, generates no
+ * id, wires no `for` and no `aria-describedby`, and reads no validity. It paints
+ * the error state it is TOLD to paint, via `[hasError]`, and everything else in
+ * it belongs to the consumer — including the `<label>`, which is named here
+ * rather than linked (nothing wires it; the consumer's own `for` is the only
+ * thing that can).
+ *
+ * The one behavioural trap it is worth a harness for: a `<wr-form-error>` inside
+ * a form-item renders UNCONDITIONALLY. `key` has no effect at all — the gating
+ * lives in the surrounding `<wr-form-field>`, and with no field to ask, every
+ * message decides it is the one to show. Markup moved from a field into an item
+ * therefore starts printing every sentence at once, and {@link getErrorTexts}
+ * is what says so.
+ *
+ * @example
+ * ```ts
+ * const item = await loader.getHarness(WrFormItemHarness.with({ label: 'Email' }));
+ *
+ * expect(await item.isInvalid()).toBe(true);
+ * expect(await item.getErrorTexts()).toEqual(['Invalid email']);
+ * await (await item.getHarness(WrInputHarness)).setValue('ada@example.test');
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrFormItemHarness extends ContentContainerComponentHarness {
+    static hostSelector = 'wr-form-item';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrFormItemHarness, options)
+            .addOption('label', options.label, (harness, label) => HarnessPredicate.stringMatches(harness.getLabel(), label))
+            .addOption('invalid', options.invalid, async (harness, invalid) => (await harness.isInvalid()) === invalid)
+            .addOption('errorText', options.errorText, async (harness, text) => {
+            for (const shown of await harness.getErrorTexts()) {
+                if (await HarnessPredicate.stringMatches(shown, text))
+                    return true;
+            }
+            return false;
+        });
+    }
+    /**
+     * The text of the item's own `<label>` child, or `null` when it has none.
+     *
+     * Direct child only — that is what the item styles (`> label` is what turns red
+     * in the error state), so a label nested deeper is the consumer's own business
+     * and answering with it would describe something the item never touches.
+     */
+    async getLabel() {
+        const label = await this.locatorForOptional(':scope > label')();
+        return label ? label.text() : null;
+    }
+    /**
+     * Whether the item is painting the error state.
+     *
+     * The `wr-form-item--error` modifier, which is driven entirely by the
+     * consumer's `[hasError]` — the item runs no validity check of its own, so this
+     * answers what it was told, not what the control thinks.
+     */
+    async isInvalid() {
+        return (await this.host()).hasClass('wr-form-item--error');
+    }
+    /**
+     * Every `<wr-form-error>` in the item, as text, in DOM order.
+     *
+     * All of them: nothing is gated here, `key` or no `key`. Nothing is ever
+     * hidden either, so there is no suppressed-message counterpart to this — see
+     * the class docs.
+     */
+    async getErrorTexts() {
+        const errors = await this.locatorForAll('wr-form-error')();
+        return Promise.all(errors.map(error => error.text()));
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrFormFieldHarness, WrFormItemHarness };
+//# sourceMappingURL=ngwr-form-testing.mjs.map

package/fesm2022/ngwr-form-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-form-testing.mjs","sources":["../../../projects/lib/form/testing/wr-form-field-harness.ts","../../../projects/lib/form/testing/wr-form-item-harness.ts","../../../projects/lib/form/testing/ngwr-form-testing.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 {\n  ContentContainerComponentHarness,\n  type HarnessLoader,\n  HarnessPredicate,\n  type TestElement,\n} from '@angular/cdk/testing';\n\nimport type { WrFormFieldError, WrFormFieldHarnessFilters } from './interfaces';\n\n/**\n * The messages this field is showing, or the ones it is holding back.\n *\n * Anchored with `:scope >` because the field's own parts are all direct children\n * of its host: a `<wr-form-field>` nested in another one's control slot otherwise\n * has its error block matched by the OUTER field's query too, and the outer\n * answers with a sentence that is not its own.\n */\nconst MESSAGE = ':scope > .wr-form-field__errors > .wr-form-field__error';\nconst VISIBLE = `${MESSAGE}:not(.wr-form-field__error--hidden)`;\nconst SUPPRESSED = `${MESSAGE}.wr-form-field__error--hidden`;\n\n/** The control slot — every native control lookup is scoped through this. */\nconst SLOT = ':scope > .wr-form-field__control';\n\n/** The label and the hint, anchored for the same reason as {@link MESSAGE}. */\nconst LABEL = ':scope > .wr-form-field__label';\nconst HINT = ':scope > .wr-form-field__hint';\n\n/**\n * Test harness for `<wr-form-field>` — the label + control + hint + validation\n * copy block.\n *\n * The field's real job is the COPY CONTRACT, and this harness is built around it.\n * A message reaches the DOM one of two ways, and they are distinguishable there:\n *\n * - a `<wr-form-error key=\"…\">` the consumer wrote, which renders only while that\n *   key is failing — the others stay in the DOM carrying\n *   `wr-form-field__error--hidden`, which is why {@link getErrors} filters and\n *   {@link getSuppressedErrorKeys} exists. A raw `.wr-form-error` query answers\n *   with the held-back copy too, and reads green on the wrong sentence.\n * - a message the field RESOLVED for an error no markup claimed:\n *   `provideWrFormErrors()`, then the `ngwr/i18n` `validation.*` catalog, then a\n *   built-in English sentence. All three render the identical `<div>`, so\n *   `source` is `'resolved'` for every one of them — the DOM genuinely cannot say\n *   which link answered, and this harness does not pretend otherwise.\n *\n * Nothing renders at all until the projected control is touched or dirty, so a\n * spec has to reach that gate first: {@link blurControl} is the shortest way\n * (blur is what marks a bound control touched), and typing through the control's\n * own harness is the other.\n *\n * The field publishes no `aria-label` anywhere. Its `<label for>` pointing at the\n * projected control IS the naming story, and a control that does not adopt the\n * id leaves the field silently unlabelled — {@link isLabelLinkedToControl} is\n * what catches that. The other half is the reverse wiring: the control reads back\n * `aria-describedby` and `aria-invalid`, which is the only reason a screen reader\n * hears the message ({@link getAnnouncedDescription}).\n *\n * Harnesses loaded through this one resolve INSIDE the control slot, so the\n * control's own harness composes without a selector:\n *\n * @example\n * ```ts\n * const email = await loader.getHarness(WrFormFieldHarness.with({ label: 'Email' }));\n *\n * await (await email.getHarness(WrInputHarness)).setValue('nope');\n * await email.blurControl();\n *\n * expect(await email.getErrorTexts()).toEqual([\"That isn't a valid email.\"]);\n * expect(await email.getAnnouncedDescription()).toBe(\"That isn't a valid email.\");\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrFormFieldHarness extends ContentContainerComponentHarness {\n  static hostSelector = 'wr-form-field';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrFormFieldHarnessFilters = {}): HarnessPredicate<WrFormFieldHarness> {\n    return new HarnessPredicate(WrFormFieldHarness, options)\n      .addOption('label', options.label, (harness, label) => HarnessPredicate.stringMatches(harness.getLabel(), label))\n      .addOption('hint', options.hint, (harness, hint) => HarnessPredicate.stringMatches(harness.getHint(), hint))\n      .addOption('required', options.required, async (harness, required) => (await harness.isRequired()) === required)\n      .addOption('invalid', options.invalid, async (harness, invalid) => (await harness.isInvalid()) === invalid)\n      .addOption('errorText', options.errorText, async (harness, text) => {\n        for (const shown of await harness.getErrorTexts()) {\n          if (await HarnessPredicate.stringMatches(shown, text)) return true;\n        }\n        return false;\n      });\n  }\n\n  /**\n   * The label text, or `null` when the field renders no label.\n   *\n   * The `*` and `(optional)` markers ride INSIDE the `<label>`, so they are\n   * excluded here — otherwise this answers `'Email *'` and every equality\n   * assertion has to know which marker the field happens to carry.\n   *\n   * `null` is not \"the consumer forgot\": `label=\"\"` renders no `<label>` element\n   * at all, which also means there is nothing naming the control.\n   */\n  async getLabel(): Promise<string | null> {\n    const label = await this.labelElement();\n    return label ? label.text({ exclude: '.wr-form-field__required, .wr-form-field__optional' }) : null;\n  }\n\n  /**\n   * Whether the field is marked required.\n   *\n   * Read from the host's `wr-form-field--required` modifier, not from the `*`:\n   * that marker is `aria-hidden=\"true\"` decoration, and it is only rendered when\n   * there is a label to hang it on — the modifier is set either way. Note what\n   * this does NOT mean: the field forwards nothing to the projected control, so\n   * `required` here is the field's own visual state. What announces the constraint\n   * is the forms layer — a `required` rule writes the native `required` attribute\n   * onto the control — and the two are set independently, so a field can carry the\n   * `*` with no validator behind it.\n   */\n  async isRequired(): Promise<boolean> {\n    return (await this.host()).hasClass('wr-form-field--required');\n  }\n\n  /**\n   * Whether the label carries the `(optional)` marker.\n   *\n   * Read from the marker itself, because — unlike `required` — `optional` sets no\n   * host modifier. It is also the marker a screen reader actually reads: this one\n   * is not `aria-hidden`. `required` wins when both inputs are set, so a required\n   * field is never optional here however it was bound.\n   */\n  async isOptional(): Promise<boolean> {\n    return (await this.locatorForOptional(`${LABEL} .wr-form-field__optional`)()) !== null;\n  }\n\n  /**\n   * The hint text, or `null` when none is showing.\n   *\n   * `null` does not mean the consumer set no hint: the error block takes the\n   * hint's slot outright, so a field with a visible message has no hint in the DOM\n   * at all. Note also that the hint carries no id and is NOT referenced by the\n   * control's `aria-describedby` — see {@link getAnnouncedDescription}.\n   */\n  async getHint(): Promise<string | null> {\n    const hint = await this.locatorForOptional(HINT)();\n    return hint ? hint.text() : null;\n  }\n\n  /**\n   * Whether the field is painting the error state.\n   *\n   * The host's `wr-form-field--invalid` modifier — what the user sees. The\n   * screen-reader half lives on the control as `aria-invalid`, and the two are\n   * separate elements rather than two readings of one: {@link isControlInvalid}.\n   */\n  async isInvalid(): Promise<boolean> {\n    return (await this.host()).hasClass('wr-form-field--invalid');\n  }\n\n  /**\n   * Every message the field is SHOWING, in DOM order — the consumer's markup\n   * first, then whatever the field resolved for the keys that markup left over.\n   *\n   * Only THIS field's own error block is read — its direct child, holding its\n   * direct children — so a `<wr-form-field>` nested in another one's control slot\n   * contributes nothing to the outer field's answer. Without that anchoring the\n   * outer field reports the inner one's copy as its own, which is the same class\n   * of break as reading a sibling field's messages.\n   */\n  async getErrors(): Promise<WrFormFieldError[]> {\n    const elements = await this.locatorForAll(VISIBLE)();\n\n    return Promise.all(\n      elements.map(async element => ({\n        key: await element.getAttribute('data-key'),\n        text: await element.text(),\n        // The consumer's copy is its own element; a resolved message is a plain\n        // `<div>` the field stamped out. That tag name is the whole of what the\n        // DOM knows about provenance.\n        source:\n          (await element.getProperty<string>('tagName')).toLowerCase() === 'wr-form-error'\n            ? ('projected' as const)\n            : ('resolved' as const),\n      }))\n    );\n  }\n\n  /** The visible messages as text, in DOM order. */\n  async getErrorTexts(): Promise<string[]> {\n    return (await this.getErrors()).map(error => error.text);\n  }\n\n  /**\n   * The visible message for one validator key.\n   *\n   * Throws rather than answering `null` when that key has no visible message: the\n   * two reasons are worth failing on and the message names both — the key is not\n   * in error at all, or its copy resolved to nothing.\n   */\n  async getErrorText(key: string): Promise<string> {\n    const errors = await this.getErrors();\n    const match = errors.find(error => error.key === key);\n    if (match) return match.text;\n\n    const shown = errors.map(error => error.key ?? '(keyless)');\n    const detail =\n      shown.length > 0\n        ? `Showing: ${shown.join(', ')}.`\n        : 'The field is showing nothing — it is either valid, or the control is still untouched and pristine.';\n\n    throw new Error(\n      `WrFormFieldHarness.getErrorText(${JSON.stringify(key)}): no visible message for that key. ${detail}`\n    );\n  }\n\n  /**\n   * The keys of the projected messages the field is holding BACK — copy that is in\n   * the DOM but hidden because its key is not among the failing ones.\n   *\n   * This is the gating contract seen from outside, and the reason a spec must not\n   * query `.wr-form-error` itself: the suppressed sentences sit right next to the\n   * live one.\n   */\n  async getSuppressedErrorKeys(): Promise<string[]> {\n    const hidden = await this.locatorForAll(SUPPRESSED)();\n    const keys = await Promise.all(hidden.map(element => element.getAttribute('data-key')));\n    return keys.filter((key): key is string => key !== null);\n  }\n\n  /**\n   * Whether the field is announcing an error it has no words for: invalid, with an\n   * error block that renders nothing.\n   *\n   * Worth a named check because it is invisible in review — the field still goes\n   * red, and `aria-describedby` still points at the block, so a screen reader is\n   * sent to an empty element. It happens when no link in the copy chain answers\n   * the key (`[autoErrors]=\"false\"` with no markup, or a key nothing has copy for\n   * — Signal Forms reports `minLength`, while the chain only knows Angular's\n   * lowercase `minlength`).\n   */\n  async hasEmptyErrorBlock(): Promise<boolean> {\n    if (!(await this.isInvalid())) return false;\n    return (await this.getErrors()).every(error => error.text.length === 0);\n  }\n\n  /** The id the `<label for>` points at, or `null` when there is no label. */\n  async getLabelFor(): Promise<string | null> {\n    const label = await this.labelElement();\n    return label ? label.getAttribute('for') : null;\n  }\n\n  /** The `id` the projected control actually answers to, or `null` when it has none. */\n  async getControlId(): Promise<string | null> {\n    return (await this.control()).getAttribute('id');\n  }\n\n  /**\n   * Whether the `<label for>` resolves to an element inside THIS field's control\n   * slot — the only thing that makes the field nameable.\n   *\n   * Scoped to the slot on purpose: ids are document-global, so a check that went\n   * through `getElementById` would also pass for a label pointing at a DIFFERENT\n   * field's control, and for a control that has been moved out of the field\n   * entirely. The failure this catches is quiet — a projected control that does\n   * not adopt the field's `controlId` (a bare `<input>` with no `[wrInput]`, say)\n   * leaves a `for` naming nothing, the field renders exactly as it always did, and\n   * nothing is labelled.\n   */\n  async isLabelLinkedToControl(): Promise<boolean> {\n    const id = await this.getLabelFor();\n    if (!id) return false;\n    return (await this.locatorForOptional(`${SLOT} [id=\"${id}\"]`)()) !== null;\n  }\n\n  /**\n   * The ids the projected control names in `aria-describedby`, in order.\n   *\n   * The field points this at the error block and nothing else — the hint has no\n   * id — so an empty list while a hint is showing is correct rather than a bug.\n   * That is not an oversight to fix from a harness either: `[wrInput]` derives\n   * `aria-invalid` from the same signal, so describing the hint would announce\n   * every hinted field as invalid.\n   */\n  async getDescribedByIds(): Promise<string[]> {\n    const value = await (await this.control()).getAttribute('aria-describedby');\n    return value ? value.split(/\\s+/).filter(Boolean) : [];\n  }\n\n  /**\n   * What a screen reader reads as the control's description: the text of the\n   * elements `aria-describedby` names, joined by a space. `null` when the control\n   * describes nothing.\n   *\n   * `''` is a real answer and the interesting one — the reference resolves to an\n   * element with no text in it, which is {@link hasEmptyErrorBlock}. Ids naming\n   * something outside this field are skipped (a consumer's own description is out\n   * of a field harness's reach); an id naming nothing anywhere throws, because a\n   * dangling reference is the bug this method exists to surface.\n   *\n   * Suppressed copy is excluded explicitly rather than left to CSS: a browser drops\n   * `display: none` subtrees from the accessibility tree, but a unit test loads no\n   * stylesheet at all, so the referenced block's raw `textContent` runs every\n   * held-back sentence together with the live one and this would answer with copy\n   * nobody can read.\n   */\n  async getAnnouncedDescription(): Promise<string | null> {\n    const ids = await this.getDescribedByIds();\n    if (ids.length === 0) return null;\n\n    const parts: string[] = [];\n    for (const id of ids) {\n      const inField = await this.locatorForOptional(`[id=\"${id}\"]`)();\n      if (inField) {\n        parts.push(await inField.text({ exclude: '.wr-form-field__error--hidden' }));\n        continue;\n      }\n      if ((await this.documentRootLocatorFactory().locatorForOptional(`[id=\"${id}\"]`)()) === null) {\n        throw new Error(\n          `WrFormFieldHarness.getAnnouncedDescription(): the control's aria-describedby names \"${id}\", which is not ` +\n            'an element anywhere in the document — a screen reader is pointed at nothing.'\n        );\n      }\n    }\n\n    return parts.join(' ');\n  }\n\n  /**\n   * Whether the control announces itself invalid.\n   *\n   * `aria-invalid` on the projected control, which is what assistive technology\n   * is told — the field's own red styling is {@link isInvalid}. Both are here\n   * because they live on different elements and travel in opposite directions: the\n   * field renders the message, the control reads back that there is one. A field\n   * that paints red while the control says nothing is a real (and silent) break.\n   */\n  async isControlInvalid(): Promise<boolean> {\n    return (await (await this.control()).getAttribute('aria-invalid')) === 'true';\n  }\n\n  /** Move focus to the projected control. */\n  async focusControl(): Promise<void> {\n    return (await this.control()).focus();\n  }\n\n  /**\n   * Blur the projected control, which is usually how a spec gets any message to\n   * appear at all: a bound control marks itself touched on blur, and the field\n   * renders nothing while the control is untouched AND pristine.\n   */\n  async blurControl(): Promise<void> {\n    return (await this.control()).blur();\n  }\n\n  /** The rendered `<label>`, or `null` when `label` is empty. */\n  private async labelElement(): Promise<TestElement | null> {\n    return this.locatorForOptional(LABEL)();\n  }\n\n  /**\n   * The control this field wraps.\n   *\n   * The element the label points at, when that resolves inside the slot — which\n   * covers a control nested inside a component (`<wr-input-number>`'s own\n   * `<input>` adopts the field's id, so the label names it, not the component\n   * element). Otherwise the first native control in the slot, so a field with no\n   * label still answers.\n   */\n  private async control(): Promise<TestElement> {\n    const id = await this.getLabelFor();\n    if (id) {\n      const labelled = await this.locatorForOptional(`${SLOT} [id=\"${id}\"]`)();\n      if (labelled) return labelled;\n    }\n\n    const native = await this.locatorForOptional(`${SLOT} input, ${SLOT} select, ${SLOT} textarea`)();\n    if (native) return native;\n\n    throw new Error(\n      'WrFormFieldHarness: this field wraps no control. Nothing in `.wr-form-field__control` answers to the ' +\n        \"label's `for`, and there is no <input> / <select> / <textarea> to fall back to.\"\n    );\n  }\n\n  /**\n   * The content loader every `HarnessLoader` method on this class runs through,\n   * scoped to the control slot.\n   *\n   * So `field.getHarness(WrInputHarness)` finds the control this field wraps and\n   * not a sibling field's — the loader is per-instance by construction, which is\n   * what a document-wide query for the same selector would lose.\n   */\n  protected override async getRootHarnessLoader(): Promise<HarnessLoader> {\n    return this.locatorFactory.harnessLoaderFor(SLOT);\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 { ContentContainerComponentHarness, HarnessPredicate } from '@angular/cdk/testing';\n\nimport type { WrFormItemHarnessFilters } from './interfaces';\n\n/**\n * Test harness for `<wr-form-item>` — the layout-only field row.\n *\n * Deliberately a much smaller surface than {@link WrFormFieldHarness}, because\n * the component is a much smaller thing: it discovers no control, generates no\n * id, wires no `for` and no `aria-describedby`, and reads no validity. It paints\n * the error state it is TOLD to paint, via `[hasError]`, and everything else in\n * it belongs to the consumer — including the `<label>`, which is named here\n * rather than linked (nothing wires it; the consumer's own `for` is the only\n * thing that can).\n *\n * The one behavioural trap it is worth a harness for: a `<wr-form-error>` inside\n * a form-item renders UNCONDITIONALLY. `key` has no effect at all — the gating\n * lives in the surrounding `<wr-form-field>`, and with no field to ask, every\n * message decides it is the one to show. Markup moved from a field into an item\n * therefore starts printing every sentence at once, and {@link getErrorTexts}\n * is what says so.\n *\n * @example\n * ```ts\n * const item = await loader.getHarness(WrFormItemHarness.with({ label: 'Email' }));\n *\n * expect(await item.isInvalid()).toBe(true);\n * expect(await item.getErrorTexts()).toEqual(['Invalid email']);\n * await (await item.getHarness(WrInputHarness)).setValue('ada@example.test');\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrFormItemHarness extends ContentContainerComponentHarness {\n  static hostSelector = 'wr-form-item';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrFormItemHarnessFilters = {}): HarnessPredicate<WrFormItemHarness> {\n    return new HarnessPredicate(WrFormItemHarness, options)\n      .addOption('label', options.label, (harness, label) => HarnessPredicate.stringMatches(harness.getLabel(), label))\n      .addOption('invalid', options.invalid, async (harness, invalid) => (await harness.isInvalid()) === invalid)\n      .addOption('errorText', options.errorText, async (harness, text) => {\n        for (const shown of await harness.getErrorTexts()) {\n          if (await HarnessPredicate.stringMatches(shown, text)) return true;\n        }\n        return false;\n      });\n  }\n\n  /**\n   * The text of the item's own `<label>` child, or `null` when it has none.\n   *\n   * Direct child only — that is what the item styles (`> label` is what turns red\n   * in the error state), so a label nested deeper is the consumer's own business\n   * and answering with it would describe something the item never touches.\n   */\n  async getLabel(): Promise<string | null> {\n    const label = await this.locatorForOptional(':scope > label')();\n    return label ? label.text() : null;\n  }\n\n  /**\n   * Whether the item is painting the error state.\n   *\n   * The `wr-form-item--error` modifier, which is driven entirely by the\n   * consumer's `[hasError]` — the item runs no validity check of its own, so this\n   * answers what it was told, not what the control thinks.\n   */\n  async isInvalid(): Promise<boolean> {\n    return (await this.host()).hasClass('wr-form-item--error');\n  }\n\n  /**\n   * Every `<wr-form-error>` in the item, as text, in DOM order.\n   *\n   * All of them: nothing is gated here, `key` or no `key`. Nothing is ever\n   * hidden either, so there is no suppressed-message counterpart to this — see\n   * the class docs.\n   */\n  async getErrorTexts(): Promise<string[]> {\n    const errors = await this.locatorForAll('wr-form-error')();\n    return Promise.all(errors.map(error => error.text()));\n  }\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-form.mjs

@@ -1,6 +1,6 @@
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { input, computed, ViewEncapsulation, Component, InjectionToken, makeEnvironmentProviders, inject, contentChild, signal, effect, DestroyRef, contentChildren, forwardRef } from '@angular/core';
+import { input, computed, ViewEncapsulation, Component, InjectionToken, makeEnvironmentProviders, inject, signal, contentChild, effect, DestroyRef, contentChildren, forwardRef } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { EMPTY } from 'rxjs';
 import { WrI18n } from 'ngwr/i18n';
@@ -42,10 +42,10 @@ class WrFormItem {
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrFormItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: WrFormItem, isStandalone: true, selector: "wr-form-item", inputs: { hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrFormItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: WrFormItem, isStandalone: true, selector: "wr-form-item", inputs: { hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrFormItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrFormItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-form-item',
@@ -197,10 +197,10 @@ class WrFormError {
         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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrFormError, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrFormError, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-form-error',
@@ -253,6 +253,22 @@ class WrFormField {
      */
     controlId = input(`wr-form-field-${++uid}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    // What a projected control reported it actually kept. `null` until one does — most
+    // controls simply adopt `controlId`, and only a control with its own `id` overrides
+    // it from the other direction.
+    adoptedId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "adoptedId" }] : /* istanbul ignore next */ []));
+    /**
+     * Id the `<label for>` renders. A control that came with its own `id` keeps it, so
+     * the label follows that instead of the generated one — otherwise `for` points at
+     * an element that is not in the document and the field is unlabelled.
+     */
+    labelFor = computed(() => this.adoptedId() ?? this.controlId(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelFor" }] : /* istanbul ignore next */ []));
+    /** @internal `WrFormFieldContext` — see the token's docs. */
+    adoptControlId(id) {
+        this.adoptedId.set(id);
+    }
     /**
      * Projected `NgControl` — used to read touched / dirty / errors.
      *
@@ -359,16 +375,16 @@ class WrFormField {
         return parts.join(' ');
     }, /* @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 }, autoErrors: { classPropertyName: "autoErrors", publicName: "autoErrors", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrFormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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 });
+        ], 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]=\"labelFor()\">\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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrFormField, decorators: [{
             type: Component,
             args: [{ selector: 'wr-form-field', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, providers: [
                         {
@@ -376,7 +392,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                             // 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" }]
+                    ], template: "@if (label()) {\n  <label class=\"wr-form-field__label\" [attr.for]=\"labelFor()\">\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 }] }] } });
 
 /**