ngwr 10.2.1 → 11.0.0

package/fesm2022/ngwr-rating-testing.mjs

@@ -0,0 +1,384 @@
+import { ComponentHarness, HarnessPredicate, TestKey } 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
+ */
+/**
+ * Test harness for one star of a `<wr-rating>`.
+ *
+ * A star is invisible to a screen reader — the row above it is the `slider` and
+ * owns the whole accessible story — but it carries the state the eye reads: how
+ * far it is filled, whether it is still a click target, and, while the pointer is
+ * over the row, the PREVIEW rather than the committed value. That is the reason
+ * this exists as a harness of its own.
+ *
+ * The fill is read from `--wr-rating-fill`, the per-star custom property the
+ * component sets and the stylesheet clips the filled glyph with — a public token,
+ * and the only place a half star exists in the DOM.
+ *
+ * @example
+ * ```ts
+ * const rating = await loader.getHarness(WrRatingHarness.with({ label: 'Overall' }));
+ * const [, , third] = await rating.getItems();
+ *
+ * expect(await third.isPartiallyFilled()).toBe(true);
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrRatingItemHarness extends ComponentHarness {
+    static hostSelector = '.wr-rating__slot';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrRatingItemHarness, options)
+            .addOption('fill', options.fill, async (harness, fill) => (await harness.getFill()) === fill)
+            .addOption('interactive', options.interactive, async (harness, interactive) => (await harness.isInteractive()) === interactive);
+    }
+    /**
+     * How much of this star is painted, `0` to `1`.
+     *
+     * While the pointer is over the rating this is the PREVIEW — the component
+     * paints `hoverValue ?? value`, so a hovered star reads full before anything is
+     * committed. `WrRatingHarness.getValue()` is the committed one.
+     */
+    async getFill() {
+        const raw = (await (await this.host()).getCssValue('--wr-rating-fill')).trim();
+        const fill = Number.parseFloat(raw);
+        if (Number.isNaN(fill)) {
+            throw new Error(`WrRatingItemHarness: could not read this star's fill — \`--wr-rating-fill\` computed to "${raw}". ` +
+                'The rating sets it per star; an environment that drops custom properties cannot answer this.');
+        }
+        return fill;
+    }
+    /** Whether the star is painted whole. */
+    async isFilled() {
+        return (await this.getFill()) >= 1;
+    }
+    /**
+     * Whether the star is painted part-way — a half star.
+     *
+     * Any fractional value paints one, not only `step="0.5"`: the step governs the
+     * keyboard and the pointer, but a fraction written straight into `value` is only
+     * clamped to `[0, count]`, never snapped — so `[value]="3.5"` half-fills star four
+     * on a whole-star rating.
+     */
+    async isPartiallyFilled() {
+        const fill = await this.getFill();
+        return fill > 0 && fill < 1;
+    }
+    /** Whether the star still takes the pointer — a readonly or disabled rating drops the modifier. */
+    async isInteractive() {
+        return (await this.host()).hasClass('wr-rating__slot--interactive');
+    }
+    /**
+     * Click this star, picking it whole — star three sets the value to `3`.
+     *
+     * Clicking the value the rating ALREADY holds clears it instead; that is the
+     * component's toggle-off, not an accident of this harness.
+     *
+     * Needs real layout: the component snaps the value from where the pointer sits
+     * inside the star, so this aims at the star's inline-END edge. In jsdom every
+     * element is 0×0 and a pointer position over one cannot mean anything — this
+     * throws rather than committing the `NaN` such a click computes. Reach for
+     * `WrRatingHarness.setValue()` there, which drives the keyboard.
+     */
+    async click() {
+        const { width, height } = await this.box();
+        await (await this.host()).click(await this.inlineEndX(width), height / 2);
+    }
+    /**
+     * Click the leading half of this star — `2.5` on star three.
+     *
+     * On a whole-star rating this is the same as {@link click}: the component snaps
+     * UP to its `step`, so half of star three is still three stars. Carries the same
+     * layout requirement.
+     */
+    async clickHalf() {
+        const { width, height } = await this.box();
+        await (await this.host()).click(width / 2, height / 2);
+    }
+    /**
+     * Move the pointer onto this star, previewing it whole.
+     *
+     * Sends `mousemove` rather than the `TestElement.hover()` pair: the rating
+     * tracks the pointer's x across a star to decide whether it is over the half or
+     * the whole, so `mouseenter` alone tells it nothing and leaves the preview
+     * unchanged. `WrRatingHarness.unhover()` ends it. Carries the same layout
+     * requirement as {@link click}.
+     */
+    async hover() {
+        const { left, top, width, height } = await this.box();
+        const clientX = left + (await this.inlineEndX(width));
+        await (await this.host()).dispatchEvent('mousemove', { clientX, clientY: top + height / 2 });
+    }
+    /**
+     * The x, relative to the star's own box, that lands on its inline-END edge —
+     * the far side of the star, where the rating reads a whole one.
+     *
+     * The component measures the pointer from the star's inline-START edge, which
+     * is the right one once `dir="rtl"` mirrors the row; aiming at the physical
+     * right edge there reads ratio 0 and picks one star FEWER. So the side is asked
+     * for rather than assumed: `direction` is a computed style, which the harness
+     * can read in every environment — jsdom included, where it inherits from an
+     * ancestor `dir` attribute like any other browser.
+     */
+    async inlineEndX(width) {
+        const direction = await (await this.host()).getCssValue('direction');
+        return direction === 'rtl' ? 0 : width;
+    }
+    /** The star's box, or a failure that names the reason it has none. */
+    async box() {
+        const { left, top, width, height } = await (await this.host()).getDimensions();
+        if (!width) {
+            throw new Error('WrRatingItemHarness: this star has no layout, so a pointer position over it means nothing — the ' +
+                'rating reads the value off where the pointer sits INSIDE the star. Every element is 0×0 in jsdom: ' +
+                'use `WrRatingHarness.setValue()`, which drives the keyboard, or stub `getBoundingClientRect`.');
+        }
+        return { left, top, width, height };
+    }
+}
+
+/**
+ * @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-rating>` — the root of a two-class family, since a star
+ * carries state of its own: {@link WrRatingItemHarness}.
+ *
+ * The stars are decoration. Everything a screen reader is told lives on the
+ * `.wr-rating__row` inside them, which is the `slider`: `aria-valuenow` is the
+ * committed value, `aria-valuemax` the top of the range, and the row — not the
+ * host — is the tab stop. So this harness reads the row and, for writes, drives
+ * its KEYBOARD: arrows step by the rating's own `step`, `Home` / `End` jump to
+ * the ends, `Delete` clears. That is the accessible path, and it is the only one a
+ * unit test can take unaided, because the pointer path snaps the value from where
+ * the cursor sits inside a star — which needs layout jsdom does not have, so a
+ * spec that wants it has to stub the star's box (see
+ * {@link WrRatingItemHarness.click}).
+ *
+ * @example
+ * ```ts
+ * const rating = await loader.getHarness(WrRatingHarness.with({ label: 'Overall' }));
+ *
+ * await rating.setValue(4);
+ * expect(await rating.getValue()).toBe(4);
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrRatingHarness extends ComponentHarness {
+    static hostSelector = 'wr-rating';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrRatingHarness, options)
+            .addOption('label', options.label, (harness, label) => HarnessPredicate.stringMatches(harness.getLabel(), label))
+            .addOption('value', options.value, async (harness, value) => (await harness.getValue()) === value)
+            .addOption('readonly', options.readonly, async (harness, readonly) => (await harness.isReadonly()) === readonly)
+            .addOption('disabled', options.disabled, async (harness, disabled) => (await harness.isDisabled()) === disabled);
+    }
+    row = this.locatorFor('.wr-rating__row');
+    /**
+     * What the control announces itself as — `slider`.
+     *
+     * Not a `radiogroup`: the value is a number on a continuum with a `step`, the
+     * arrows move it and `Home` / `End` bound it, and that is a slider's contract
+     * rather than a group of one-of-N choices.
+     */
+    async getRole() {
+        return (await this.row()).getAttribute('role');
+    }
+    /**
+     * The rating's accessible name, from `ariaLabel` or the i18n catalogue.
+     *
+     * A rating projects no text, so this is the only name it has — and it sits on
+     * the row, not on the host, because the row is what carries the role.
+     */
+    async getLabel() {
+        return (await this.row()).getAttribute('aria-label');
+    }
+    /**
+     * The committed value, from `aria-valuenow` — what a screen reader is told, not
+     * what is painted, which during a hover is the preview instead.
+     *
+     * A CLEARED rating is announced as `0`, exactly like a rating of zero stars:
+     * `value` is `number | null` and ARIA has no null. So `0` here means "zero or
+     * nothing" — assert the bound model when the difference matters, and see
+     * {@link clear}.
+     */
+    async getValue() {
+        const raw = await (await this.row()).getAttribute('aria-valuenow');
+        const value = Number.parseFloat(raw ?? '');
+        if (Number.isNaN(value)) {
+            throw new Error(`WrRatingHarness: the slider announces aria-valuenow="${raw}", which is not a number.`);
+        }
+        return value;
+    }
+    /** The top of the range, from `aria-valuemax` — the `count` of stars. */
+    async getMax() {
+        const raw = await (await this.row()).getAttribute('aria-valuemax');
+        return Number.parseFloat(raw ?? '');
+    }
+    /** How many stars are painted. Should always agree with {@link getMax}. */
+    async getCount() {
+        return (await this.getItems()).length;
+    }
+    /** The stars, left to right. */
+    async getItems(filters = {}) {
+        return this.locatorForAll(WrRatingItemHarness.with(filters))();
+    }
+    /**
+     * Each star's fill ratio, left to right — `[1, 1, 0.5, 0, 0]` for two and a
+     * half stars out of five.
+     *
+     * This is what the eye sees, so it follows the hover preview while there is one;
+     * {@link getValue} stays on the committed value throughout.
+     */
+    async getFills() {
+        const items = await this.getItems();
+        return Promise.all(items.map(item => item.getFill()));
+    }
+    /** The control size. `'md'` is the default and paints no modifier of its own. */
+    async getSize() {
+        const host = await this.host();
+        if (await host.hasClass('wr-rating--sm'))
+            return 'sm';
+        if (await host.hasClass('wr-rating--lg'))
+            return 'lg';
+        return 'md';
+    }
+    /**
+     * Whether the rating displays a value it will not let you change.
+     *
+     * Read from `aria-readonly` rather than from the `wr-rating--readonly` class:
+     * both are public, but the attribute is the one a screen reader acts on, and a
+     * rating that looks read-only without saying so is the bug worth catching.
+     */
+    async isReadonly() {
+        return (await (await this.row()).getAttribute('aria-readonly')) === 'true';
+    }
+    /** Whether the rating refuses interaction — `aria-disabled`, for the same reason. */
+    async isDisabled() {
+        return (await (await this.row()).getAttribute('aria-disabled')) === 'true';
+    }
+    /**
+     * Whether the rating is in the tab order.
+     *
+     * A rating that takes no input takes itself out of it (`tabindex="-1"`), so this
+     * is `false` while readonly or disabled.
+     */
+    async isFocusable() {
+        const tabIndex = await (await this.row()).getAttribute('tabindex');
+        return Number.parseInt(tabIndex ?? '-1', 10) >= 0;
+    }
+    /**
+     * Set the rating, from the keyboard.
+     *
+     * `Home` first, then one `ArrowUp` per step — the step is not in the DOM, so
+     * the only honest way to reach a value is to walk to it and watch where the
+     * rating lands. (The top of the range takes `End` instead of walking there.) A
+     * host counting value changes therefore sees the intermediate ones, which is what
+     * a keyboard user produces too.
+     *
+     * The BLOCK-axis arrow, deliberately: the stars lie on the inline axis, so
+     * `ArrowRight` raises the value in LTR and lowers it under `dir="rtl"`, where
+     * the arrows follow visual order. `ArrowUp` means "more" in both, so a spec
+     * written against this harness reads the same either way.
+     *
+     * Throws rather than settling for a near miss: on a value outside `[0, max]`, on
+     * one the step cannot land on (`2.5` on a whole-star rating), and on a rating
+     * that took no input at all because it is readonly or disabled.
+     *
+     * `setValue(0)` commits ZERO. It is {@link clear} that returns the model to
+     * `null`, and the two are indistinguishable from the DOM.
+     */
+    async setValue(value) {
+        const max = await this.getMax();
+        if (!Number.isFinite(value) || value < 0 || value > max) {
+            throw new Error(`WrRatingHarness: ${value} is outside this rating's range of [0, ${max}].`);
+        }
+        const row = await this.row();
+        await row.sendKeys(TestKey.HOME);
+        if (value === max) {
+            await row.sendKeys(TestKey.END);
+        }
+        else {
+            let current = await this.getValue();
+            while (current < value) {
+                await row.sendKeys(TestKey.UP_ARROW);
+                const next = await this.getValue();
+                // Standing still means the rating is not listening; the check below says why.
+                if (next === current)
+                    break;
+                if (next > value) {
+                    throw new Error(`WrRatingHarness: this rating cannot land on ${value} — one step took it from ${current} to ` +
+                        `${next}, so ${value} is not a multiple of its \`step\`.`);
+                }
+                current = next;
+            }
+        }
+        const landed = await this.getValue();
+        if (landed !== value) {
+            throw new Error(`WrRatingHarness: asked for ${value}, but the rating reads ${landed} — a readonly or disabled ` +
+                'rating takes no input.');
+        }
+    }
+    /**
+     * Clear the rating, the way `Delete` does — the bound value becomes `null`, not
+     * `0`.
+     *
+     * The slider then announces `aria-valuenow="0"` and every star empties, so
+     * {@link getValue} cannot tell you this happened. Assert the model.
+     */
+    async clear() {
+        await (await this.row()).sendKeys(TestKey.DELETE);
+    }
+    /**
+     * Bump the rating up by one step — one `ArrowUp`, the arrow that means "more"
+     * in both reading directions (see {@link setValue}).
+     *
+     * The step is the rating's, not this harness's, so this is also how a spec finds
+     * out what it is: clear the rating, step up once, read the value.
+     * Already at the top, this does nothing; the value clamps rather than wrapping.
+     */
+    async stepUp() {
+        await (await this.row()).sendKeys(TestKey.UP_ARROW);
+    }
+    /** Bump the rating down by one step — one `ArrowDown`. Clamps at `0`. */
+    async stepDown() {
+        await (await this.row()).sendKeys(TestKey.DOWN_ARROW);
+    }
+    /**
+     * End a hover preview, dropping the stars back to the committed value.
+     *
+     * It lives here rather than on the star because the component listens for
+     * `mouseleave` on the ROW: leaving one star for the next is not leaving the
+     * rating.
+     */
+    async unhover() {
+        await (await this.row()).mouseAway();
+    }
+    /** Move keyboard focus to the rating — onto the row, which is the tab stop. */
+    async focus() {
+        return (await this.row()).focus();
+    }
+    /** Blur the rating. This is what emits `touch`, so a bound field marks itself touched. */
+    async blur() {
+        return (await this.row()).blur();
+    }
+    async isFocused() {
+        return (await this.row()).isFocused();
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrRatingHarness, WrRatingItemHarness };
+//# sourceMappingURL=ngwr-rating-testing.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-rating-testing.mjs","sources":["../../../projects/lib/rating/testing/wr-rating-item-harness.ts","../../../projects/lib/rating/testing/wr-rating-harness.ts","../../../projects/lib/rating/testing/ngwr-rating-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 { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';\n\nimport type { WrRatingItemHarnessFilters } from './interfaces';\n\n/** The star's own box, once it is known to have one. */\ninterface WrRatingItemBox {\n  readonly left: number;\n  readonly top: number;\n  readonly width: number;\n  readonly height: number;\n}\n\n/**\n * Test harness for one star of a `<wr-rating>`.\n *\n * A star is invisible to a screen reader — the row above it is the `slider` and\n * owns the whole accessible story — but it carries the state the eye reads: how\n * far it is filled, whether it is still a click target, and, while the pointer is\n * over the row, the PREVIEW rather than the committed value. That is the reason\n * this exists as a harness of its own.\n *\n * The fill is read from `--wr-rating-fill`, the per-star custom property the\n * component sets and the stylesheet clips the filled glyph with — a public token,\n * and the only place a half star exists in the DOM.\n *\n * @example\n * ```ts\n * const rating = await loader.getHarness(WrRatingHarness.with({ label: 'Overall' }));\n * const [, , third] = await rating.getItems();\n *\n * expect(await third.isPartiallyFilled()).toBe(true);\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrRatingItemHarness extends ComponentHarness {\n  static hostSelector = '.wr-rating__slot';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrRatingItemHarnessFilters = {}): HarnessPredicate<WrRatingItemHarness> {\n    return new HarnessPredicate(WrRatingItemHarness, options)\n      .addOption('fill', options.fill, async (harness, fill) => (await harness.getFill()) === fill)\n      .addOption(\n        'interactive',\n        options.interactive,\n        async (harness, interactive) => (await harness.isInteractive()) === interactive\n      );\n  }\n\n  /**\n   * How much of this star is painted, `0` to `1`.\n   *\n   * While the pointer is over the rating this is the PREVIEW — the component\n   * paints `hoverValue ?? value`, so a hovered star reads full before anything is\n   * committed. `WrRatingHarness.getValue()` is the committed one.\n   */\n  async getFill(): Promise<number> {\n    const raw = (await (await this.host()).getCssValue('--wr-rating-fill')).trim();\n    const fill = Number.parseFloat(raw);\n    if (Number.isNaN(fill)) {\n      throw new Error(\n        `WrRatingItemHarness: could not read this star's fill — \\`--wr-rating-fill\\` computed to \"${raw}\". ` +\n          'The rating sets it per star; an environment that drops custom properties cannot answer this.'\n      );\n    }\n    return fill;\n  }\n\n  /** Whether the star is painted whole. */\n  async isFilled(): Promise<boolean> {\n    return (await this.getFill()) >= 1;\n  }\n\n  /**\n   * Whether the star is painted part-way — a half star.\n   *\n   * Any fractional value paints one, not only `step=\"0.5\"`: the step governs the\n   * keyboard and the pointer, but a fraction written straight into `value` is only\n   * clamped to `[0, count]`, never snapped — so `[value]=\"3.5\"` half-fills star four\n   * on a whole-star rating.\n   */\n  async isPartiallyFilled(): Promise<boolean> {\n    const fill = await this.getFill();\n    return fill > 0 && fill < 1;\n  }\n\n  /** Whether the star still takes the pointer — a readonly or disabled rating drops the modifier. */\n  async isInteractive(): Promise<boolean> {\n    return (await this.host()).hasClass('wr-rating__slot--interactive');\n  }\n\n  /**\n   * Click this star, picking it whole — star three sets the value to `3`.\n   *\n   * Clicking the value the rating ALREADY holds clears it instead; that is the\n   * component's toggle-off, not an accident of this harness.\n   *\n   * Needs real layout: the component snaps the value from where the pointer sits\n   * inside the star, so this aims at the star's inline-END edge. In jsdom every\n   * element is 0×0 and a pointer position over one cannot mean anything — this\n   * throws rather than committing the `NaN` such a click computes. Reach for\n   * `WrRatingHarness.setValue()` there, which drives the keyboard.\n   */\n  async click(): Promise<void> {\n    const { width, height } = await this.box();\n    await (await this.host()).click(await this.inlineEndX(width), height / 2);\n  }\n\n  /**\n   * Click the leading half of this star — `2.5` on star three.\n   *\n   * On a whole-star rating this is the same as {@link click}: the component snaps\n   * UP to its `step`, so half of star three is still three stars. Carries the same\n   * layout requirement.\n   */\n  async clickHalf(): Promise<void> {\n    const { width, height } = await this.box();\n    await (await this.host()).click(width / 2, height / 2);\n  }\n\n  /**\n   * Move the pointer onto this star, previewing it whole.\n   *\n   * Sends `mousemove` rather than the `TestElement.hover()` pair: the rating\n   * tracks the pointer's x across a star to decide whether it is over the half or\n   * the whole, so `mouseenter` alone tells it nothing and leaves the preview\n   * unchanged. `WrRatingHarness.unhover()` ends it. Carries the same layout\n   * requirement as {@link click}.\n   */\n  async hover(): Promise<void> {\n    const { left, top, width, height } = await this.box();\n    const clientX = left + (await this.inlineEndX(width));\n    await (await this.host()).dispatchEvent('mousemove', { clientX, clientY: top + height / 2 });\n  }\n\n  /**\n   * The x, relative to the star's own box, that lands on its inline-END edge —\n   * the far side of the star, where the rating reads a whole one.\n   *\n   * The component measures the pointer from the star's inline-START edge, which\n   * is the right one once `dir=\"rtl\"` mirrors the row; aiming at the physical\n   * right edge there reads ratio 0 and picks one star FEWER. So the side is asked\n   * for rather than assumed: `direction` is a computed style, which the harness\n   * can read in every environment — jsdom included, where it inherits from an\n   * ancestor `dir` attribute like any other browser.\n   */\n  private async inlineEndX(width: number): Promise<number> {\n    const direction = await (await this.host()).getCssValue('direction');\n    return direction === 'rtl' ? 0 : width;\n  }\n\n  /** The star's box, or a failure that names the reason it has none. */\n  private async box(): Promise<WrRatingItemBox> {\n    const { left, top, width, height } = await (await this.host()).getDimensions();\n    if (!width) {\n      throw new Error(\n        'WrRatingItemHarness: this star has no layout, so a pointer position over it means nothing — the ' +\n          'rating reads the value off where the pointer sits INSIDE the star. Every element is 0×0 in jsdom: ' +\n          'use `WrRatingHarness.setValue()`, which drives the keyboard, or stub `getBoundingClientRect`.'\n      );\n    }\n    return { left, top, width, height };\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 { ComponentHarness, HarnessPredicate, TestKey } from '@angular/cdk/testing';\n\nimport type { WrRatingSize } from 'ngwr/rating';\n\nimport type { WrRatingHarnessFilters, WrRatingItemHarnessFilters } from './interfaces';\nimport { WrRatingItemHarness } from './wr-rating-item-harness';\n\n/**\n * Test harness for `<wr-rating>` — the root of a two-class family, since a star\n * carries state of its own: {@link WrRatingItemHarness}.\n *\n * The stars are decoration. Everything a screen reader is told lives on the\n * `.wr-rating__row` inside them, which is the `slider`: `aria-valuenow` is the\n * committed value, `aria-valuemax` the top of the range, and the row — not the\n * host — is the tab stop. So this harness reads the row and, for writes, drives\n * its KEYBOARD: arrows step by the rating's own `step`, `Home` / `End` jump to\n * the ends, `Delete` clears. That is the accessible path, and it is the only one a\n * unit test can take unaided, because the pointer path snaps the value from where\n * the cursor sits inside a star — which needs layout jsdom does not have, so a\n * spec that wants it has to stub the star's box (see\n * {@link WrRatingItemHarness.click}).\n *\n * @example\n * ```ts\n * const rating = await loader.getHarness(WrRatingHarness.with({ label: 'Overall' }));\n *\n * await rating.setValue(4);\n * expect(await rating.getValue()).toBe(4);\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrRatingHarness extends ComponentHarness {\n  static hostSelector = 'wr-rating';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrRatingHarnessFilters = {}): HarnessPredicate<WrRatingHarness> {\n    return new HarnessPredicate(WrRatingHarness, options)\n      .addOption('label', options.label, (harness, label) => HarnessPredicate.stringMatches(harness.getLabel(), label))\n      .addOption('value', options.value, async (harness, value) => (await harness.getValue()) === value)\n      .addOption('readonly', options.readonly, async (harness, readonly) => (await harness.isReadonly()) === readonly)\n      .addOption('disabled', options.disabled, async (harness, disabled) => (await harness.isDisabled()) === disabled);\n  }\n\n  private readonly row = this.locatorFor('.wr-rating__row');\n\n  /**\n   * What the control announces itself as — `slider`.\n   *\n   * Not a `radiogroup`: the value is a number on a continuum with a `step`, the\n   * arrows move it and `Home` / `End` bound it, and that is a slider's contract\n   * rather than a group of one-of-N choices.\n   */\n  async getRole(): Promise<string | null> {\n    return (await this.row()).getAttribute('role');\n  }\n\n  /**\n   * The rating's accessible name, from `ariaLabel` or the i18n catalogue.\n   *\n   * A rating projects no text, so this is the only name it has — and it sits on\n   * the row, not on the host, because the row is what carries the role.\n   */\n  async getLabel(): Promise<string | null> {\n    return (await this.row()).getAttribute('aria-label');\n  }\n\n  /**\n   * The committed value, from `aria-valuenow` — what a screen reader is told, not\n   * what is painted, which during a hover is the preview instead.\n   *\n   * A CLEARED rating is announced as `0`, exactly like a rating of zero stars:\n   * `value` is `number | null` and ARIA has no null. So `0` here means \"zero or\n   * nothing\" — assert the bound model when the difference matters, and see\n   * {@link clear}.\n   */\n  async getValue(): Promise<number> {\n    const raw = await (await this.row()).getAttribute('aria-valuenow');\n    const value = Number.parseFloat(raw ?? '');\n    if (Number.isNaN(value)) {\n      throw new Error(`WrRatingHarness: the slider announces aria-valuenow=\"${raw}\", which is not a number.`);\n    }\n    return value;\n  }\n\n  /** The top of the range, from `aria-valuemax` — the `count` of stars. */\n  async getMax(): Promise<number> {\n    const raw = await (await this.row()).getAttribute('aria-valuemax');\n    return Number.parseFloat(raw ?? '');\n  }\n\n  /** How many stars are painted. Should always agree with {@link getMax}. */\n  async getCount(): Promise<number> {\n    return (await this.getItems()).length;\n  }\n\n  /** The stars, left to right. */\n  async getItems(filters: WrRatingItemHarnessFilters = {}): Promise<WrRatingItemHarness[]> {\n    return this.locatorForAll(WrRatingItemHarness.with(filters))();\n  }\n\n  /**\n   * Each star's fill ratio, left to right — `[1, 1, 0.5, 0, 0]` for two and a\n   * half stars out of five.\n   *\n   * This is what the eye sees, so it follows the hover preview while there is one;\n   * {@link getValue} stays on the committed value throughout.\n   */\n  async getFills(): Promise<number[]> {\n    const items = await this.getItems();\n    return Promise.all(items.map(item => item.getFill()));\n  }\n\n  /** The control size. `'md'` is the default and paints no modifier of its own. */\n  async getSize(): Promise<WrRatingSize> {\n    const host = await this.host();\n    if (await host.hasClass('wr-rating--sm')) return 'sm';\n    if (await host.hasClass('wr-rating--lg')) return 'lg';\n    return 'md';\n  }\n\n  /**\n   * Whether the rating displays a value it will not let you change.\n   *\n   * Read from `aria-readonly` rather than from the `wr-rating--readonly` class:\n   * both are public, but the attribute is the one a screen reader acts on, and a\n   * rating that looks read-only without saying so is the bug worth catching.\n   */\n  async isReadonly(): Promise<boolean> {\n    return (await (await this.row()).getAttribute('aria-readonly')) === 'true';\n  }\n\n  /** Whether the rating refuses interaction — `aria-disabled`, for the same reason. */\n  async isDisabled(): Promise<boolean> {\n    return (await (await this.row()).getAttribute('aria-disabled')) === 'true';\n  }\n\n  /**\n   * Whether the rating is in the tab order.\n   *\n   * A rating that takes no input takes itself out of it (`tabindex=\"-1\"`), so this\n   * is `false` while readonly or disabled.\n   */\n  async isFocusable(): Promise<boolean> {\n    const tabIndex = await (await this.row()).getAttribute('tabindex');\n    return Number.parseInt(tabIndex ?? '-1', 10) >= 0;\n  }\n\n  /**\n   * Set the rating, from the keyboard.\n   *\n   * `Home` first, then one `ArrowUp` per step — the step is not in the DOM, so\n   * the only honest way to reach a value is to walk to it and watch where the\n   * rating lands. (The top of the range takes `End` instead of walking there.) A\n   * host counting value changes therefore sees the intermediate ones, which is what\n   * a keyboard user produces too.\n   *\n   * The BLOCK-axis arrow, deliberately: the stars lie on the inline axis, so\n   * `ArrowRight` raises the value in LTR and lowers it under `dir=\"rtl\"`, where\n   * the arrows follow visual order. `ArrowUp` means \"more\" in both, so a spec\n   * written against this harness reads the same either way.\n   *\n   * Throws rather than settling for a near miss: on a value outside `[0, max]`, on\n   * one the step cannot land on (`2.5` on a whole-star rating), and on a rating\n   * that took no input at all because it is readonly or disabled.\n   *\n   * `setValue(0)` commits ZERO. It is {@link clear} that returns the model to\n   * `null`, and the two are indistinguishable from the DOM.\n   */\n  async setValue(value: number): Promise<void> {\n    const max = await this.getMax();\n    if (!Number.isFinite(value) || value < 0 || value > max) {\n      throw new Error(`WrRatingHarness: ${value} is outside this rating's range of [0, ${max}].`);\n    }\n\n    const row = await this.row();\n    await row.sendKeys(TestKey.HOME);\n\n    if (value === max) {\n      await row.sendKeys(TestKey.END);\n    } else {\n      let current = await this.getValue();\n      while (current < value) {\n        await row.sendKeys(TestKey.UP_ARROW);\n        const next = await this.getValue();\n        // Standing still means the rating is not listening; the check below says why.\n        if (next === current) break;\n        if (next > value) {\n          throw new Error(\n            `WrRatingHarness: this rating cannot land on ${value} — one step took it from ${current} to ` +\n              `${next}, so ${value} is not a multiple of its \\`step\\`.`\n          );\n        }\n        current = next;\n      }\n    }\n\n    const landed = await this.getValue();\n    if (landed !== value) {\n      throw new Error(\n        `WrRatingHarness: asked for ${value}, but the rating reads ${landed} — a readonly or disabled ` +\n          'rating takes no input.'\n      );\n    }\n  }\n\n  /**\n   * Clear the rating, the way `Delete` does — the bound value becomes `null`, not\n   * `0`.\n   *\n   * The slider then announces `aria-valuenow=\"0\"` and every star empties, so\n   * {@link getValue} cannot tell you this happened. Assert the model.\n   */\n  async clear(): Promise<void> {\n    await (await this.row()).sendKeys(TestKey.DELETE);\n  }\n\n  /**\n   * Bump the rating up by one step — one `ArrowUp`, the arrow that means \"more\"\n   * in both reading directions (see {@link setValue}).\n   *\n   * The step is the rating's, not this harness's, so this is also how a spec finds\n   * out what it is: clear the rating, step up once, read the value.\n   * Already at the top, this does nothing; the value clamps rather than wrapping.\n   */\n  async stepUp(): Promise<void> {\n    await (await this.row()).sendKeys(TestKey.UP_ARROW);\n  }\n\n  /** Bump the rating down by one step — one `ArrowDown`. Clamps at `0`. */\n  async stepDown(): Promise<void> {\n    await (await this.row()).sendKeys(TestKey.DOWN_ARROW);\n  }\n\n  /**\n   * End a hover preview, dropping the stars back to the committed value.\n   *\n   * It lives here rather than on the star because the component listens for\n   * `mouseleave` on the ROW: leaving one star for the next is not leaving the\n   * rating.\n   */\n  async unhover(): Promise<void> {\n    await (await this.row()).mouseAway();\n  }\n\n  /** Move keyboard focus to the rating — onto the row, which is the tab stop. */\n  async focus(): Promise<void> {\n    return (await this.row()).focus();\n  }\n\n  /** Blur the rating. This is what emits `touch`, so a bound field marks itself touched. */\n  async blur(): Promise<void> {\n    return (await this.row()).blur();\n  }\n\n  async isFocused(): Promise<boolean> {\n    return (await this.row()).isFocused();\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-rating.mjs

@@ -1,6 +1,7 @@
+import { Directionality } from '@angular/cdk/bidi';
 import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { input, model, output, signal, computed, effect, ViewEncapsulation, Component } from '@angular/core';
+import { input, model, output, signal, computed, inject, effect, ViewEncapsulation, Component } from '@angular/core';
 import { useI18nText } from 'ngwr/i18n';
 import { clamp } from 'ngwr/utils';
 
@@ -46,6 +47,16 @@ class WrRating {
     ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     slots = computed(() => Array.from({ length: this.count() }, (_, i) => i), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "slots" }] : /* istanbul ignore next */ []));
+    /**
+     * Reading direction, for the two places it changes the answer: the arrows and
+     * the pointer ratio inside a star.
+     *
+     * `optional` because a consumer who never set a direction should not have to
+     * provide anything — `Directionality` is root-provided, so this only resolves
+     * to `null` in a bare `TestBed`, where LTR is the right assumption. Read per
+     * interaction rather than cached, so a runtime flip needs no subscription.
+     */
+    directionality = inject(Directionality, { optional: true });
     classes = computed(() => {
         const parts = ['wr-rating'];
         const size = this.size();
@@ -98,13 +109,23 @@ class WrRating {
         const max = this.count();
         const step = this.step();
         const current = this.value() ?? 0;
+        // Arrows follow VISUAL order (WAI-ARIA APG). The row lays its stars along the
+        // inline axis, so under `dir="rtl"` the first star is the RIGHTMOST one and
+        // `→` walks down the scale. Up / Down are the block axis and never flip;
+        // Home / End mean first / last, a semantic position rather than a physical
+        // one, so they don't either.
+        const inline = this.isRtl() ? -step : step;
         let next;
         switch (event.key) {
             case 'ArrowRight':
+                next = clamp(current + inline, 0, max);
+                break;
             case 'ArrowUp':
                 next = clamp(current + step, 0, max);
                 break;
             case 'ArrowLeft':
+                next = clamp(current - inline, 0, max);
+                break;
             case 'ArrowDown':
                 next = clamp(current - step, 0, max);
                 break;
@@ -128,11 +149,25 @@ class WrRating {
         this.touch.emit();
     }
     // Internals
+    /** Whether the row reads right-to-left. */
+    isRtl() {
+        return this.directionality?.value === 'rtl';
+    }
+    /**
+     * How far into the star the pointer sits, `0` to `1`, measured from its
+     * INLINE-start edge — the left one in LTR, the right one in RTL, where the row
+     * is mirrored. Taken from `rect.left` alone it reads 1 exactly where an RTL
+     * user sees the start of the star, which inverts every half step.
+     */
+    inlineRatio(clientX, rect) {
+        const offset = this.isRtl() ? rect.right - clientX : clientX - rect.left;
+        return clamp(offset / rect.width, 0, 1);
+    }
     /** Convert a mouse position over slot `index` to a snapped value. */
     computeValue(event, index) {
         const target = event.currentTarget;
         const rect = target.getBoundingClientRect();
-        const ratio = clamp((event.clientX - rect.left) / rect.width, 0, 1);
+        const ratio = this.inlineRatio(event.clientX, rect);
         const raw = index + ratio;
         const step = this.step();
         const snapped = Math.ceil(raw / step) * step;

package/fesm2022/ngwr-rating.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-rating.mjs","sources":["../../../projects/lib/rating/rating.ts","../../../projects/lib/rating/rating.html","../../../projects/lib/rating/ngwr-rating.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, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, effect, input, model, output, signal } from '@angular/core';\nimport type { FormValueControl } from '@angular/forms/signals';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { clamp } from 'ngwr/utils';\n\n/**\n * Star rating input. Click or hover to set a value; supports half-star\n * increments via `step=\"0.5\"`. Value is `number | null` (clamped to\n * `[0, count]`).\n *\n * A signal-forms native control: it implements `FormValueControl<number | null>`,\n * so `[formField]` binds straight to its `value` model — no\n * `ControlValueAccessor` in between. `[(value)]` works standalone.\n *\n * Keyboard: `←` / `→` bump by `step`, `Home` / `End` jump to 0 / max.\n * Clicking the current value clears it (toggle off).\n *\n * @example\n * ```html\n * <!-- signal forms -->\n * <wr-rating [formField]=\"form.score\" />\n *\n * <!-- standalone two-way binding -->\n * <wr-rating [(value)]=\"score\" [count]=\"10\" step=\"0.5\" />\n * <wr-rating [value]=\"4.5\" [readonly]=\"true\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/rating\n */\nexport type WrRatingSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  selector: 'wr-rating',\n  templateUrl: './rating.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrRating implements FormValueControl<number | null> {\n  /** Total number of slots. @default 5 */\n  readonly count = input(5, { transform: (v: unknown): number => Math.max(1, coerceNumberProperty(v, 5)) });\n\n  /** Step granularity — `1` for whole stars, `0.5` for halves. @default 1 */\n  readonly step = input(1 as 0.5 | 1, {\n    transform: (v: unknown): 0.5 | 1 => (Number(v) === 0.5 ? 0.5 : 1),\n  });\n\n  /** Read-only — value is displayed but not interactive. @default false */\n  readonly readonly = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Disable interaction. Bound automatically from the field's disabled state\n   * when used with `[formField]`.\n   *\n   * @default false\n   */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /** Control size — scales the icons + gaps. @default 'md' */\n  readonly size = input<WrRatingSize>('md');\n\n  /** Accessible label. Falls back to `rating.label`, then `'Rating'`. */\n  readonly ariaLabel = input<string | null>(null);\n\n  protected readonly resolvedAriaLabel = useI18nText(this.ariaLabel, 'rating.label', 'Rating');\n\n  /** The rating. Bound by `[formField]`, or two-way via `[(value)]`. */\n  readonly value = model<number | null>(null);\n\n  /** Emitted on blur so a bound field can mark itself touched. */\n  readonly touch = output<void>();\n\n  /** Transient hover preview — overrides `value` for display when set. */\n  protected readonly hoverValue = signal<number | null>(null);\n\n  protected readonly interactive = computed(() => !this.disabled() && !this.readonly());\n\n  /** What we actually render — hover wins while hovering. */\n  protected readonly displayValue = computed(() => this.hoverValue() ?? this.value() ?? 0);\n\n  protected readonly slots = computed(() => Array.from({ length: this.count() }, (_, i) => i));\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-rating'];\n    const size = this.size();\n    if (size !== 'md') parts.push(`wr-rating--${size}`);\n    if (this.readonly()) parts.push('wr-rating--readonly');\n    if (this.disabled()) parts.push('wr-rating--disabled');\n    return parts.join(' ');\n  });\n\n  constructor() {\n    // A model can be written to anything (`[formField]` / `[(value)]`); keep the\n    // rating in range by re-clamping out-of-bounds external writes to `[0, count]`.\n    // (This is the clamp the old CVA `writeValue` used to apply.)\n    effect(() => {\n      const v = this.value();\n      if (v === null || v === undefined) return;\n      const clamped = clamp(Number(v), 0, this.count());\n      if (clamped !== v) this.value.set(clamped);\n    });\n  }\n\n  /** Fill ratio for slot `i` in `[0, 1]` — drives the CSS clip width. */\n  protected fillFor(i: number): number {\n    return clamp(this.displayValue() - i, 0, 1);\n  }\n\n  // Template handlers\n\n  protected onSlotMove(event: MouseEvent, index: number): void {\n    if (!this.interactive()) return;\n    this.hoverValue.set(this.computeValue(event, index));\n  }\n\n  protected onLeave(): void {\n    this.hoverValue.set(null);\n  }\n\n  protected onSlotClick(event: MouseEvent, index: number): void {\n    if (!this.interactive()) return;\n    const next = this.computeValue(event, index);\n    // Click the current value → clear it.\n    const final = next === this.value() ? null : next;\n    this.commit(final);\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (!this.interactive()) return;\n    const max = this.count();\n    const step = this.step();\n    const current = this.value() ?? 0;\n    let next: number | null;\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        next = clamp(current + step, 0, max);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        next = clamp(current - step, 0, max);\n        break;\n      case 'Home':\n        next = 0;\n        break;\n      case 'End':\n        next = max;\n        break;\n      case 'Delete':\n      case 'Backspace':\n        next = null;\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    this.commit(next);\n  }\n\n  protected onBlur(): void {\n    this.touch.emit();\n  }\n\n  // Internals\n\n  /** Convert a mouse position over slot `index` to a snapped value. */\n  private computeValue(event: MouseEvent, index: number): number {\n    const target = event.currentTarget as HTMLElement;\n    const rect = target.getBoundingClientRect();\n    const ratio = clamp((event.clientX - rect.left) / rect.width, 0, 1);\n    const raw = index + ratio;\n    const step = this.step();\n    const snapped = Math.ceil(raw / step) * step;\n    return clamp(snapped, step, this.count());\n  }\n\n  private commit(value: number | null): void {\n    this.value.set(value);\n    this.hoverValue.set(null);\n  }\n}\n","<div\n  class=\"wr-rating__row\"\n  role=\"slider\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"count()\"\n  [attr.aria-valuenow]=\"value() ?? 0\"\n  [attr.aria-readonly]=\"readonly() || null\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.tabindex]=\"interactive() ? 0 : -1\"\n  (keydown)=\"onKeydown($event)\"\n  (mouseleave)=\"onLeave()\"\n  (blur)=\"onBlur()\"\n>\n  @for (slot of slots(); track $index) {\n    <!-- The parent row owns keyboard focus + handlers; slots are pointer-only\n         click targets, so the a11y rules below are intentionally suppressed. -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n    <span\n      class=\"wr-rating__slot\"\n      [class.wr-rating__slot--interactive]=\"interactive()\"\n      [style.--wr-rating-fill]=\"fillFor($index)\"\n      (mousemove)=\"onSlotMove($event, $index)\"\n      (click)=\"onSlotClick($event, $index)\"\n    >\n      <!-- Outline (always visible) -->\n      <svg class=\"wr-rating__icon wr-rating__icon--bg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <path\n          d=\"M12 2.5l2.95 5.98 6.6.96-4.78 4.66 1.13 6.58L12 17.6l-5.9 3.08 1.13-6.58L2.45 9.44l6.6-.96L12 2.5z\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.4\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n      <!-- Filled overlay, clipped by --wr-rating-fill (0..1) -->\n      <svg class=\"wr-rating__icon wr-rating__icon--fg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <path\n          d=\"M12 2.5l2.95 5.98 6.6.96-4.78 4.66 1.13 6.58L12 17.6l-5.9 3.08 1.13-6.58L2.45 9.44l6.6-.96L12 2.5z\"\n          fill=\"currentColor\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.4\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </span>\n  }\n</div>\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-rating.mjs","sources":["../../../projects/lib/rating/rating.ts","../../../projects/lib/rating/rating.html","../../../projects/lib/rating/ngwr-rating.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 { Directionality } from '@angular/cdk/bidi';\nimport { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, effect, inject, input, model, output, signal } from '@angular/core';\nimport type { FormValueControl } from '@angular/forms/signals';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { clamp } from 'ngwr/utils';\n\n/**\n * Star rating input. Click or hover to set a value; supports half-star\n * increments via `step=\"0.5\"`. Value is `number | null` (clamped to\n * `[0, count]`).\n *\n * A signal-forms native control: it implements `FormValueControl<number | null>`,\n * so `[formField]` binds straight to its `value` model — no\n * `ControlValueAccessor` in between. `[(value)]` works standalone.\n *\n * Keyboard: `←` / `→` bump by `step`, `Home` / `End` jump to 0 / max.\n * Clicking the current value clears it (toggle off).\n *\n * The stars sit on the inline axis, so under `dir=\"rtl\"` the row is mirrored and\n * both halves of the input mirror with it: `→` walks toward the low end, and a\n * click is measured from the star's inline-start (right) edge.\n *\n * @example\n * ```html\n * <!-- signal forms -->\n * <wr-rating [formField]=\"form.score\" />\n *\n * <!-- standalone two-way binding -->\n * <wr-rating [(value)]=\"score\" [count]=\"10\" step=\"0.5\" />\n * <wr-rating [value]=\"4.5\" [readonly]=\"true\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/rating\n */\nexport type WrRatingSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  selector: 'wr-rating',\n  templateUrl: './rating.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrRating implements FormValueControl<number | null> {\n  /** Total number of slots. @default 5 */\n  readonly count = input(5, { transform: (v: unknown): number => Math.max(1, coerceNumberProperty(v, 5)) });\n\n  /** Step granularity — `1` for whole stars, `0.5` for halves. @default 1 */\n  readonly step = input(1 as 0.5 | 1, {\n    transform: (v: unknown): 0.5 | 1 => (Number(v) === 0.5 ? 0.5 : 1),\n  });\n\n  /** Read-only — value is displayed but not interactive. @default false */\n  readonly readonly = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Disable interaction. Bound automatically from the field's disabled state\n   * when used with `[formField]`.\n   *\n   * @default false\n   */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /** Control size — scales the icons + gaps. @default 'md' */\n  readonly size = input<WrRatingSize>('md');\n\n  /** Accessible label. Falls back to `rating.label`, then `'Rating'`. */\n  readonly ariaLabel = input<string | null>(null);\n\n  protected readonly resolvedAriaLabel = useI18nText(this.ariaLabel, 'rating.label', 'Rating');\n\n  /** The rating. Bound by `[formField]`, or two-way via `[(value)]`. */\n  readonly value = model<number | null>(null);\n\n  /** Emitted on blur so a bound field can mark itself touched. */\n  readonly touch = output<void>();\n\n  /** Transient hover preview — overrides `value` for display when set. */\n  protected readonly hoverValue = signal<number | null>(null);\n\n  protected readonly interactive = computed(() => !this.disabled() && !this.readonly());\n\n  /** What we actually render — hover wins while hovering. */\n  protected readonly displayValue = computed(() => this.hoverValue() ?? this.value() ?? 0);\n\n  protected readonly slots = computed(() => Array.from({ length: this.count() }, (_, i) => i));\n\n  /**\n   * Reading direction, for the two places it changes the answer: the arrows and\n   * the pointer ratio inside a star.\n   *\n   * `optional` because a consumer who never set a direction should not have to\n   * provide anything — `Directionality` is root-provided, so this only resolves\n   * to `null` in a bare `TestBed`, where LTR is the right assumption. Read per\n   * interaction rather than cached, so a runtime flip needs no subscription.\n   */\n  private readonly directionality = inject(Directionality, { optional: true });\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-rating'];\n    const size = this.size();\n    if (size !== 'md') parts.push(`wr-rating--${size}`);\n    if (this.readonly()) parts.push('wr-rating--readonly');\n    if (this.disabled()) parts.push('wr-rating--disabled');\n    return parts.join(' ');\n  });\n\n  constructor() {\n    // A model can be written to anything (`[formField]` / `[(value)]`); keep the\n    // rating in range by re-clamping out-of-bounds external writes to `[0, count]`.\n    // (This is the clamp the old CVA `writeValue` used to apply.)\n    effect(() => {\n      const v = this.value();\n      if (v === null || v === undefined) return;\n      const clamped = clamp(Number(v), 0, this.count());\n      if (clamped !== v) this.value.set(clamped);\n    });\n  }\n\n  /** Fill ratio for slot `i` in `[0, 1]` — drives the CSS clip width. */\n  protected fillFor(i: number): number {\n    return clamp(this.displayValue() - i, 0, 1);\n  }\n\n  // Template handlers\n\n  protected onSlotMove(event: MouseEvent, index: number): void {\n    if (!this.interactive()) return;\n    this.hoverValue.set(this.computeValue(event, index));\n  }\n\n  protected onLeave(): void {\n    this.hoverValue.set(null);\n  }\n\n  protected onSlotClick(event: MouseEvent, index: number): void {\n    if (!this.interactive()) return;\n    const next = this.computeValue(event, index);\n    // Click the current value → clear it.\n    const final = next === this.value() ? null : next;\n    this.commit(final);\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (!this.interactive()) return;\n    const max = this.count();\n    const step = this.step();\n    const current = this.value() ?? 0;\n    // Arrows follow VISUAL order (WAI-ARIA APG). The row lays its stars along the\n    // inline axis, so under `dir=\"rtl\"` the first star is the RIGHTMOST one and\n    // `→` walks down the scale. Up / Down are the block axis and never flip;\n    // Home / End mean first / last, a semantic position rather than a physical\n    // one, so they don't either.\n    const inline = this.isRtl() ? -step : step;\n    let next: number | null;\n    switch (event.key) {\n      case 'ArrowRight':\n        next = clamp(current + inline, 0, max);\n        break;\n      case 'ArrowUp':\n        next = clamp(current + step, 0, max);\n        break;\n      case 'ArrowLeft':\n        next = clamp(current - inline, 0, max);\n        break;\n      case 'ArrowDown':\n        next = clamp(current - step, 0, max);\n        break;\n      case 'Home':\n        next = 0;\n        break;\n      case 'End':\n        next = max;\n        break;\n      case 'Delete':\n      case 'Backspace':\n        next = null;\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    this.commit(next);\n  }\n\n  protected onBlur(): void {\n    this.touch.emit();\n  }\n\n  // Internals\n\n  /** Whether the row reads right-to-left. */\n  private isRtl(): boolean {\n    return this.directionality?.value === 'rtl';\n  }\n\n  /**\n   * How far into the star the pointer sits, `0` to `1`, measured from its\n   * INLINE-start edge — the left one in LTR, the right one in RTL, where the row\n   * is mirrored. Taken from `rect.left` alone it reads 1 exactly where an RTL\n   * user sees the start of the star, which inverts every half step.\n   */\n  private inlineRatio(clientX: number, rect: DOMRect): number {\n    const offset = this.isRtl() ? rect.right - clientX : clientX - rect.left;\n    return clamp(offset / rect.width, 0, 1);\n  }\n\n  /** Convert a mouse position over slot `index` to a snapped value. */\n  private computeValue(event: MouseEvent, index: number): number {\n    const target = event.currentTarget as HTMLElement;\n    const rect = target.getBoundingClientRect();\n    const ratio = this.inlineRatio(event.clientX, rect);\n    const raw = index + ratio;\n    const step = this.step();\n    const snapped = Math.ceil(raw / step) * step;\n    return clamp(snapped, step, this.count());\n  }\n\n  private commit(value: number | null): void {\n    this.value.set(value);\n    this.hoverValue.set(null);\n  }\n}\n","<div\n  class=\"wr-rating__row\"\n  role=\"slider\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"count()\"\n  [attr.aria-valuenow]=\"value() ?? 0\"\n  [attr.aria-readonly]=\"readonly() || null\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.tabindex]=\"interactive() ? 0 : -1\"\n  (keydown)=\"onKeydown($event)\"\n  (mouseleave)=\"onLeave()\"\n  (blur)=\"onBlur()\"\n>\n  @for (slot of slots(); track $index) {\n    <!-- The parent row owns keyboard focus + handlers; slots are pointer-only\n         click targets, so the a11y rules below are intentionally suppressed. -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n    <span\n      class=\"wr-rating__slot\"\n      [class.wr-rating__slot--interactive]=\"interactive()\"\n      [style.--wr-rating-fill]=\"fillFor($index)\"\n      (mousemove)=\"onSlotMove($event, $index)\"\n      (click)=\"onSlotClick($event, $index)\"\n    >\n      <!-- Outline (always visible) -->\n      <svg class=\"wr-rating__icon wr-rating__icon--bg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <path\n          d=\"M12 2.5l2.95 5.98 6.6.96-4.78 4.66 1.13 6.58L12 17.6l-5.9 3.08 1.13-6.58L2.45 9.44l6.6-.96L12 2.5z\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.4\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n      <!-- Filled overlay, clipped by --wr-rating-fill (0..1) -->\n      <svg class=\"wr-rating__icon wr-rating__icon--fg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <path\n          d=\"M12 2.5l2.95 5.98 6.6.96-4.78 4.66 1.13 6.58L12 17.6l-5.9 3.08 1.13-6.58L2.45 9.44l6.6-.96L12 2.5z\"\n          fill=\"currentColor\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.4\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </span>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}