ngwr 11.1.0 → 11.2.0

package/fesm2022/ngwr-shiny-text-testing.mjs

@@ -0,0 +1,237 @@
+import { ComponentHarness, 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
+ */
+const GRADIENT = /^linear-gradient\((.*)\)$/s;
+const DEGREES = /^(-?[\d.]+)deg$/;
+const STOP_POSITION = /\s+-?[\d.]+%$/;
+/** Split a declaration list or an argument list on top-level separators only. */
+function splitTopLevel(value, separator) {
+    const parts = [];
+    let depth = 0;
+    let current = '';
+    for (const character of value) {
+        if (character === '(')
+            depth++;
+        if (character === ')')
+            depth--;
+        if (character === separator && depth === 0) {
+            parts.push(current.trim());
+            current = '';
+        }
+        else {
+            current += character;
+        }
+    }
+    parts.push(current.trim());
+    return parts;
+}
+/** The colour half of a `<colour> <position>` gradient stop. */
+function stopColour(stop) {
+    return stop.replace(STOP_POSITION, '').trim();
+}
+/**
+ * Test harness for `<wr-shiny-text>`.
+ *
+ * **The duration is the assertion that matters.** The pause between sweeps is not
+ * `animation-delay` and not a second animation — it is folded INTO `animation-duration`,
+ * because the keyframe finishes at 50% and holds there. So `[speed]="2"` with
+ * `[delay]="3"` has to read 5 seconds, and anyone reimplementing the pause the obvious
+ * way passes every other check here and fails {@link getCycleDurationSeconds}.
+ *
+ * **The stripe is five stops and only one of them is the shine.** The base colour fills
+ * 0%, 35%, 65% and 100%; the highlight sits alone at 50%. {@link getBaseColor} and
+ * {@link getShineColor} are offered as a pair because swapping the two inputs is
+ * otherwise undetectable — the gradient stays well-formed, the angle is unchanged, and
+ * the text simply stops shimmering.
+ *
+ * **Both gradient reads come off the inline `style` attribute**, not through computed
+ * style. Unset colours fall through to the literal `var(--wr-shiny-text-base)` /
+ * `var(--wr-shiny-text-shine)` tokens, which is exactly what makes the dark-theme
+ * override work — and a computed read resolves those tokens in a real browser while
+ * handing them back verbatim in a unit test. Reading what the component wrote gives the
+ * same answer in both places.
+ *
+ * The colours still pass through the CSSOM on their way back out, and it has its own
+ * spelling: a hex literal is re-serialised, so `[color]="'#444'"` reads
+ * `rgb(68, 68, 68)`. Functional notations and `var()` tokens survive untouched. Assert
+ * the form the CSSOM returns, not the one the template passed in.
+ *
+ * There is no inner element to query: the template is the bare interpolation, so the text
+ * is a node on the host. A locator copied from the gradient-text harness finds nothing.
+ *
+ * **What the harness deliberately does not offer**, and why. There is no `isAnimating()`
+ * / `getBackgroundPosition()`: the sweep is a stylesheet keyframe over
+ * `background-position`, and a unit test neither loads the sheet nor runs the animation.
+ * There is no `getAnimationName()` / `getIterationCount()` / `getPlayState()`: every
+ * animation property except the duration lives in the stylesheet, so those reads answer
+ * the same empty string for a working component and a deleted one. {@link isPaused} and
+ * {@link pausesOnHover} claim the CLASSES and not the pauses — `:hover` is a selector and
+ * `animation-play-state` is a stylesheet rule, so what they honestly pin is that the
+ * input arrived. There is no `respectsReducedMotion()`: the handling is a `@media` block
+ * with no TypeScript counterpart. And there is nothing reporting the painted text colour,
+ * because `-webkit-text-fill-color: transparent` is a stylesheet declaration and a read
+ * would report the inherited colour as if the text were solid.
+ *
+ * The `[wrShimmer]` directive shipped from the same entry point has no harness: it adds
+ * one static class and nothing else, so a harness could only restate its own selector.
+ *
+ * @example
+ * ```ts
+ * const shiny = await loader.getHarness(WrShinyTextHarness);
+ *
+ * expect(await shiny.getCycleDurationSeconds()).toBe(5);
+ * expect(await shiny.getShineColor()).toBe('var(--wr-shiny-text-shine)');
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrShinyTextHarness extends ComponentHarness {
+    static hostSelector = 'wr-shiny-text';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrShinyTextHarness, options)
+            .addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text))
+            .addOption('paused', options.paused, async (harness, paused) => (await harness.isPaused()) === paused)
+            .addOption('direction', options.direction, async (harness, direction) => (await harness.getDirection()) === direction);
+    }
+    /** The rendered text, trimmed. It is a text node on the host — there is no inner span. */
+    async getText() {
+        return (await this.host()).text();
+    }
+    /**
+     * The whole stripe gradient the component computed, as written.
+     *
+     * Unresolved on purpose. With no `[color]` / `[shineColor]` given this string contains
+     * the theme's own custom-property tokens rather than colours, and that is the working
+     * state, not a gap — resolving them would need the stylesheet, and the resolved answer
+     * would differ between a unit test and a browser.
+     */
+    async getGradient() {
+        return this.require('getGradient', 'background-image');
+    }
+    /**
+     * The gradient's angle in degrees, from `[spread]`.
+     *
+     * The only observable effect that input has, `numAttr` coercion included. Note the name
+     * is inherited vocabulary and describes the ANGLE, not the width of the bright stripe:
+     * the stop positions are hard-coded, so no input narrows the shine.
+     */
+    async getSpreadDegrees() {
+        const [angle] = await this.gradientArguments('getSpreadDegrees');
+        const match = DEGREES.exec(angle);
+        if (!match) {
+            throw new Error(`WrShinyTextHarness.getSpreadDegrees(): the gradient starts with "${angle}", which is not an angle in ` +
+                'degrees. The component writes `<spread>deg` as the first argument of the gradient; anything else ' +
+                'means the angle is no longer coming from that input.');
+        }
+        return Number.parseFloat(match[1]);
+    }
+    /**
+     * The colour outside the bright stripe — the 0% stop.
+     *
+     * The same colour fills 35%, 65% and 100%; only the 50% stop differs. Assert it next to
+     * {@link getShineColor}: a `[color]` that lands in the shine slot instead leaves a
+     * perfectly valid gradient that no longer shimmers.
+     */
+    async getBaseColor() {
+        return stopColour((await this.gradientStops('getBaseColor'))[0]);
+    }
+    /** The highlight colour — the lone 50% stop the stripe is made of. */
+    async getShineColor() {
+        return stopColour((await this.gradientStops('getShineColor'))[2]);
+    }
+    /**
+     * One full cycle in seconds — the sweep AND the pause after it.
+     *
+     * `[delay]` is not `animation-delay` and not a second animation: the keyframe reaches
+     * its end at 50% and holds, so the wait is bought by making the animation twice as long.
+     * That is why this reads `speed + delay` and why the method is named for the cycle
+     * rather than for the sweep.
+     *
+     * Read from the inline declaration rather than from computed style, so a missing binding
+     * is reported as missing instead of being answered from the stylesheet.
+     */
+    async getCycleDurationSeconds() {
+        const raw = await this.require('getCycleDurationSeconds', 'animation-duration');
+        const seconds = Number.parseFloat(raw);
+        if (Number.isNaN(seconds)) {
+            throw new Error(`WrShinyTextHarness.getCycleDurationSeconds(): \`animation-duration\` is "${raw}", which is not a number ` +
+                'of seconds. The component writes `[speed] + [delay]` there — the pause is folded into the duration ' +
+                'rather than expressed as a delay.');
+        }
+        return seconds;
+    }
+    /**
+     * Whether the animation is stopped (`disabled`).
+     *
+     * Three names for one thing, which is why this method exists rather than a spec reading
+     * the class: the input is `disabled`, its JSDoc says "pause", and the DOM contract is
+     * `wr-shiny-text--paused`. Only the last of those is public API.
+     */
+    async isPaused() {
+        return (await this.host()).hasClass('wr-shiny-text--paused');
+    }
+    /** Whether the opt-in reached the class the `:hover` rule needs. */
+    async pausesOnHover() {
+        return (await this.host()).hasClass('wr-shiny-text--pause-on-hover');
+    }
+    /**
+     * Whether the stripe bounces instead of restarting (`yoyo`).
+     *
+     * Defaults to `false` here — the opposite of the same-named input on `wr-gradient-text`,
+     * which is worth pinning in a spec that uses both. Together with {@link getDirection}
+     * this is the whole four-way matrix the stylesheet derives `animation-direction` from.
+     */
+    async isYoyo() {
+        return (await this.host()).hasClass('wr-shiny-text--yoyo');
+    }
+    /** Which way the stripe travels — `'left'` is the absence of the reverse modifier. */
+    async getDirection() {
+        return (await (await this.host()).hasClass('wr-shiny-text--reverse')) ? 'right' : 'left';
+    }
+    /** The five stops of the stripe, positions attached, in gradient order. */
+    async gradientStops(caller) {
+        const [, ...stops] = await this.gradientArguments(caller);
+        if (stops.length !== 5) {
+            throw new Error(`WrShinyTextHarness.${caller}(): the gradient has ${stops.length} stops, not the five the stripe is made ` +
+                'of (base at 0% / 35%, shine at 50%, base at 65% / 100%). Reading a colour out of a differently ' +
+                'shaped gradient would report a stop that means something else.');
+        }
+        return stops;
+    }
+    /** The gradient's arguments — the angle first, then the stops. */
+    async gradientArguments(caller) {
+        const gradient = await this.require(caller, 'background-image');
+        const match = GRADIENT.exec(gradient);
+        if (!match) {
+            throw new Error(`WrShinyTextHarness.${caller}(): \`background-image\` is "${gradient}", which is not a linear-gradient(). ` +
+                'The stripe IS that gradient, so anything else means the component is no longer painting one.');
+        }
+        return splitTopLevel(match[1], ',');
+    }
+    /** One of the host's two inline declarations, or a failure that says which one is missing. */
+    async require(caller, property) {
+        const style = (await (await this.host()).getAttribute('style')) ?? '';
+        for (const declaration of splitTopLevel(style, ';')) {
+            const colon = declaration.indexOf(':');
+            if (colon !== -1 && declaration.slice(0, colon).trim() === property) {
+                return declaration.slice(colon + 1).trim();
+            }
+        }
+        throw new Error(`WrShinyTextHarness.${caller}(): the host carries no inline \`${property}\` (style: "${style}"). The ` +
+            'component writes it on every render, so its absence is a broken host binding rather than a default — ' +
+            'and it is read inline, not through computed style, precisely so the stylesheet cannot answer for it.');
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrShinyTextHarness };
+//# sourceMappingURL=ngwr-shiny-text-testing.mjs.map

package/fesm2022/ngwr-shiny-text-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-shiny-text-testing.mjs","sources":["../../../projects/lib/shiny-text/testing/wr-shiny-text-harness.ts","../../../projects/lib/shiny-text/testing/ngwr-shiny-text-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 { WrShinyTextHarnessFilters, WrShinyTextSweepDirection } from './interfaces';\n\nconst GRADIENT = /^linear-gradient\\((.*)\\)$/s;\nconst DEGREES = /^(-?[\\d.]+)deg$/;\nconst STOP_POSITION = /\\s+-?[\\d.]+%$/;\n\n/** Split a declaration list or an argument list on top-level separators only. */\nfunction splitTopLevel(value: string, separator: string): string[] {\n  const parts: string[] = [];\n  let depth = 0;\n  let current = '';\n\n  for (const character of value) {\n    if (character === '(') depth++;\n    if (character === ')') depth--;\n\n    if (character === separator && depth === 0) {\n      parts.push(current.trim());\n      current = '';\n    } else {\n      current += character;\n    }\n  }\n\n  parts.push(current.trim());\n  return parts;\n}\n\n/** The colour half of a `<colour> <position>` gradient stop. */\nfunction stopColour(stop: string): string {\n  return stop.replace(STOP_POSITION, '').trim();\n}\n\n/**\n * Test harness for `<wr-shiny-text>`.\n *\n * **The duration is the assertion that matters.** The pause between sweeps is not\n * `animation-delay` and not a second animation — it is folded INTO `animation-duration`,\n * because the keyframe finishes at 50% and holds there. So `[speed]=\"2\"` with\n * `[delay]=\"3\"` has to read 5 seconds, and anyone reimplementing the pause the obvious\n * way passes every other check here and fails {@link getCycleDurationSeconds}.\n *\n * **The stripe is five stops and only one of them is the shine.** The base colour fills\n * 0%, 35%, 65% and 100%; the highlight sits alone at 50%. {@link getBaseColor} and\n * {@link getShineColor} are offered as a pair because swapping the two inputs is\n * otherwise undetectable — the gradient stays well-formed, the angle is unchanged, and\n * the text simply stops shimmering.\n *\n * **Both gradient reads come off the inline `style` attribute**, not through computed\n * style. Unset colours fall through to the literal `var(--wr-shiny-text-base)` /\n * `var(--wr-shiny-text-shine)` tokens, which is exactly what makes the dark-theme\n * override work — and a computed read resolves those tokens in a real browser while\n * handing them back verbatim in a unit test. Reading what the component wrote gives the\n * same answer in both places.\n *\n * The colours still pass through the CSSOM on their way back out, and it has its own\n * spelling: a hex literal is re-serialised, so `[color]=\"'#444'\"` reads\n * `rgb(68, 68, 68)`. Functional notations and `var()` tokens survive untouched. Assert\n * the form the CSSOM returns, not the one the template passed in.\n *\n * There is no inner element to query: the template is the bare interpolation, so the text\n * is a node on the host. A locator copied from the gradient-text harness finds nothing.\n *\n * **What the harness deliberately does not offer**, and why. There is no `isAnimating()`\n * / `getBackgroundPosition()`: the sweep is a stylesheet keyframe over\n * `background-position`, and a unit test neither loads the sheet nor runs the animation.\n * There is no `getAnimationName()` / `getIterationCount()` / `getPlayState()`: every\n * animation property except the duration lives in the stylesheet, so those reads answer\n * the same empty string for a working component and a deleted one. {@link isPaused} and\n * {@link pausesOnHover} claim the CLASSES and not the pauses — `:hover` is a selector and\n * `animation-play-state` is a stylesheet rule, so what they honestly pin is that the\n * input arrived. There is no `respectsReducedMotion()`: the handling is a `@media` block\n * with no TypeScript counterpart. And there is nothing reporting the painted text colour,\n * because `-webkit-text-fill-color: transparent` is a stylesheet declaration and a read\n * would report the inherited colour as if the text were solid.\n *\n * The `[wrShimmer]` directive shipped from the same entry point has no harness: it adds\n * one static class and nothing else, so a harness could only restate its own selector.\n *\n * @example\n * ```ts\n * const shiny = await loader.getHarness(WrShinyTextHarness);\n *\n * expect(await shiny.getCycleDurationSeconds()).toBe(5);\n * expect(await shiny.getShineColor()).toBe('var(--wr-shiny-text-shine)');\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrShinyTextHarness extends ComponentHarness {\n  static hostSelector = 'wr-shiny-text';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrShinyTextHarnessFilters = {}): HarnessPredicate<WrShinyTextHarness> {\n    return new HarnessPredicate(WrShinyTextHarness, options)\n      .addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text))\n      .addOption('paused', options.paused, async (harness, paused) => (await harness.isPaused()) === paused)\n      .addOption(\n        'direction',\n        options.direction,\n        async (harness, direction) => (await harness.getDirection()) === direction\n      );\n  }\n\n  /** The rendered text, trimmed. It is a text node on the host — there is no inner span. */\n  async getText(): Promise<string> {\n    return (await this.host()).text();\n  }\n\n  /**\n   * The whole stripe gradient the component computed, as written.\n   *\n   * Unresolved on purpose. With no `[color]` / `[shineColor]` given this string contains\n   * the theme's own custom-property tokens rather than colours, and that is the working\n   * state, not a gap — resolving them would need the stylesheet, and the resolved answer\n   * would differ between a unit test and a browser.\n   */\n  async getGradient(): Promise<string> {\n    return this.require('getGradient', 'background-image');\n  }\n\n  /**\n   * The gradient's angle in degrees, from `[spread]`.\n   *\n   * The only observable effect that input has, `numAttr` coercion included. Note the name\n   * is inherited vocabulary and describes the ANGLE, not the width of the bright stripe:\n   * the stop positions are hard-coded, so no input narrows the shine.\n   */\n  async getSpreadDegrees(): Promise<number> {\n    const [angle] = await this.gradientArguments('getSpreadDegrees');\n    const match = DEGREES.exec(angle);\n\n    if (!match) {\n      throw new Error(\n        `WrShinyTextHarness.getSpreadDegrees(): the gradient starts with \"${angle}\", which is not an angle in ` +\n          'degrees. The component writes `<spread>deg` as the first argument of the gradient; anything else ' +\n          'means the angle is no longer coming from that input.'\n      );\n    }\n    return Number.parseFloat(match[1]);\n  }\n\n  /**\n   * The colour outside the bright stripe — the 0% stop.\n   *\n   * The same colour fills 35%, 65% and 100%; only the 50% stop differs. Assert it next to\n   * {@link getShineColor}: a `[color]` that lands in the shine slot instead leaves a\n   * perfectly valid gradient that no longer shimmers.\n   */\n  async getBaseColor(): Promise<string> {\n    return stopColour((await this.gradientStops('getBaseColor'))[0]);\n  }\n\n  /** The highlight colour — the lone 50% stop the stripe is made of. */\n  async getShineColor(): Promise<string> {\n    return stopColour((await this.gradientStops('getShineColor'))[2]);\n  }\n\n  /**\n   * One full cycle in seconds — the sweep AND the pause after it.\n   *\n   * `[delay]` is not `animation-delay` and not a second animation: the keyframe reaches\n   * its end at 50% and holds, so the wait is bought by making the animation twice as long.\n   * That is why this reads `speed + delay` and why the method is named for the cycle\n   * rather than for the sweep.\n   *\n   * Read from the inline declaration rather than from computed style, so a missing binding\n   * is reported as missing instead of being answered from the stylesheet.\n   */\n  async getCycleDurationSeconds(): Promise<number> {\n    const raw = await this.require('getCycleDurationSeconds', 'animation-duration');\n    const seconds = Number.parseFloat(raw);\n\n    if (Number.isNaN(seconds)) {\n      throw new Error(\n        `WrShinyTextHarness.getCycleDurationSeconds(): \\`animation-duration\\` is \"${raw}\", which is not a number ` +\n          'of seconds. The component writes `[speed] + [delay]` there — the pause is folded into the duration ' +\n          'rather than expressed as a delay.'\n      );\n    }\n    return seconds;\n  }\n\n  /**\n   * Whether the animation is stopped (`disabled`).\n   *\n   * Three names for one thing, which is why this method exists rather than a spec reading\n   * the class: the input is `disabled`, its JSDoc says \"pause\", and the DOM contract is\n   * `wr-shiny-text--paused`. Only the last of those is public API.\n   */\n  async isPaused(): Promise<boolean> {\n    return (await this.host()).hasClass('wr-shiny-text--paused');\n  }\n\n  /** Whether the opt-in reached the class the `:hover` rule needs. */\n  async pausesOnHover(): Promise<boolean> {\n    return (await this.host()).hasClass('wr-shiny-text--pause-on-hover');\n  }\n\n  /**\n   * Whether the stripe bounces instead of restarting (`yoyo`).\n   *\n   * Defaults to `false` here — the opposite of the same-named input on `wr-gradient-text`,\n   * which is worth pinning in a spec that uses both. Together with {@link getDirection}\n   * this is the whole four-way matrix the stylesheet derives `animation-direction` from.\n   */\n  async isYoyo(): Promise<boolean> {\n    return (await this.host()).hasClass('wr-shiny-text--yoyo');\n  }\n\n  /** Which way the stripe travels — `'left'` is the absence of the reverse modifier. */\n  async getDirection(): Promise<WrShinyTextSweepDirection> {\n    return (await (await this.host()).hasClass('wr-shiny-text--reverse')) ? 'right' : 'left';\n  }\n\n  /** The five stops of the stripe, positions attached, in gradient order. */\n  private async gradientStops(caller: string): Promise<string[]> {\n    const [, ...stops] = await this.gradientArguments(caller);\n\n    if (stops.length !== 5) {\n      throw new Error(\n        `WrShinyTextHarness.${caller}(): the gradient has ${stops.length} stops, not the five the stripe is made ` +\n          'of (base at 0% / 35%, shine at 50%, base at 65% / 100%). Reading a colour out of a differently ' +\n          'shaped gradient would report a stop that means something else.'\n      );\n    }\n    return stops;\n  }\n\n  /** The gradient's arguments — the angle first, then the stops. */\n  private async gradientArguments(caller: string): Promise<string[]> {\n    const gradient = await this.require(caller, 'background-image');\n    const match = GRADIENT.exec(gradient);\n\n    if (!match) {\n      throw new Error(\n        `WrShinyTextHarness.${caller}(): \\`background-image\\` is \"${gradient}\", which is not a linear-gradient(). ` +\n          'The stripe IS that gradient, so anything else means the component is no longer painting one.'\n      );\n    }\n    return splitTopLevel(match[1], ',');\n  }\n\n  /** One of the host's two inline declarations, or a failure that says which one is missing. */\n  private async require(caller: string, property: string): Promise<string> {\n    const style = (await (await this.host()).getAttribute('style')) ?? '';\n\n    for (const declaration of splitTopLevel(style, ';')) {\n      const colon = declaration.indexOf(':');\n      if (colon !== -1 && declaration.slice(0, colon).trim() === property) {\n        return declaration.slice(colon + 1).trim();\n      }\n    }\n\n    throw new Error(\n      `WrShinyTextHarness.${caller}(): the host carries no inline \\`${property}\\` (style: \"${style}\"). The ` +\n        'component writes it on every render, so its absence is a broken host binding rather than a default — ' +\n        'and it is read inline, not through computed style, precisely so the stylesheet cannot answer for it.'\n    );\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-slider.mjs

@@ -1,7 +1,7 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { input, computed, model, output, signal, viewChild, inject, effect, ViewEncapsulation, Component } from '@angular/core';
+import { input, computed, model, output, signal, viewChild, inject, effect, untracked, ViewEncapsulation, Component } from '@angular/core';
 import { clamp, round } from 'ngwr/utils';
 
 /**
@@ -83,8 +83,23 @@ class WrSlider {
     touch = output();
     low = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "low" }] : /* istanbul ignore next */ []));
+    /**
+     * The high thumb's cell. Its literal default stands in for `maxValue()`,
+     * which cannot be read at field-initialisation time — see `highSeeded` and
+     * the constructor effect.
+     */
     high = signal(100, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "high" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether `high` has ever been told a real value by the model.
+     *
+     * `<wr-slider range [min]="200" [max]="300" />` binds no value, so the model
+     * holds its own scalar default and the tuple branch below never runs: `high`
+     * kept the literal 100, which is not inside every `[min, max]`. The thumb
+     * rendered off the track and the first interaction committed `[low, 100]` —
+     * a value the slider itself calls out of range.
+     */
+    highSeeded = false;
     track = viewChild.required('track', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "track" }] : /* istanbul ignore next */ []));
     /**
@@ -121,16 +136,39 @@ class WrSlider {
     constructor() {
         // Keep the internal thumbs in sync with external writes to `value`
         // (the old `writeValue`): split the tuple / clamp into the low & high cells.
+        // The cells are clamped and the MODEL IS NOT TOUCHED, and the asymmetry is
+        // deliberate. A thumb cannot render outside its own track, so the display
+        // has no choice — but writing that clamp back into `value` would erase the
+        // error it represents: under `[formField]` the bounds reach this component
+        // only through the schema's `min()` / `max()` rules (binding `[min]` beside
+        // `[formField]` is an NG8022 compile error), so the write-back deleted the
+        // out-of-range value those rules exist to report, and marked a pristine
+        // form dirty on first paint besides. The first real interaction emits an
+        // in-range number through `emitChange` and the two agree from then on.
         effect(() => {
             const v = this.value();
             if (Array.isArray(v)) {
                 const tuple = v;
-                this.low.set(this.clampToBounds(tuple[0]));
-                this.high.set(this.clampToBounds(tuple[1]));
-            }
-            else if (typeof v === 'number') {
-                this.low.set(this.clampToBounds(v));
+                const lo = this.clampToBounds(tuple[0]);
+                const hi = this.clampToBounds(tuple[1]);
+                this.low.set(lo);
+                this.high.set(hi);
+                this.highSeeded = true;
+                return;
             }
+            if (typeof v !== 'number')
+                return;
+            const lo = this.clampToBounds(v);
+            this.low.set(lo);
+            if (!this.range())
+                return;
+            // Range mode holding a scalar: the high thumb has never been told
+            // anything, and its literal default is not inside every `[min, max]`.
+            // Seed it at the top of the range — which is what the 100 meant back when
+            // the bounds were 0–100. The MODEL is left alone here too; the shape it
+            // holds is the consumer's business until they move a thumb.
+            this.high.set(this.highSeeded ? this.clampToBounds(untracked(this.high)) : this.maxValue());
+            this.highSeeded = true;
         });
     }
     // Interaction

package/fesm2022/ngwr-slider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-slider.mjs","sources":["../../../projects/lib/slider/slider.ts","../../../projects/lib/slider/slider.html","../../../projects/lib/slider/ngwr-slider.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 type { ElementRef } from '@angular/core';\nimport {\n  Component,\n  ViewEncapsulation,\n  computed,\n  effect,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport type { FormValueControl } from '@angular/forms/signals';\n\nimport { clamp, round } from 'ngwr/utils';\n\nimport type { WrSliderValue } from './interfaces';\n\n/** Trim float drift from step calculations. */\n\n/**\n * Numeric slider with optional dual-thumb range mode.\n *\n * A signal-forms native control: it implements `FormValueControl<WrSliderValue>`,\n * so `[formField]` binds straight to its `value` model — no\n * `ControlValueAccessor` in between. `[(value)]` works standalone. The value\n * shape depends on `range`: `number` (default) or `[number, number]` when\n * `range=\"true\"`.\n *\n * Keyboard: ← / → adjust by `step`; ↑ / ↓ same; Shift+arrow by `step × 10`;\n * Home / End jump to min / max; PageUp / PageDown by `step × 10`.\n *\n * Reading direction: the arrows follow the VISUAL track, so under `dir=\"rtl\"`\n * → moves toward the lower end and ← toward the higher one, and a drag reads\n * its ratio from the right edge. ↑ / ↓, PageUp / PageDown and Home / End are\n * unchanged — they name a value, not a side of the screen.\n *\n * @example\n * ```html\n * <!-- signal forms -->\n * <wr-slider [formField]=\"form.volume\" min=\"0\" max=\"100\" step=\"5\" />\n *\n * <!-- standalone two-way binding -->\n * <wr-slider [(value)]=\"range\" range min=\"0\" max=\"1000\" step=\"10\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/slider\n */\n@Component({\n  selector: 'wr-slider',\n  templateUrl: './slider.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrSlider implements FormValueControl<WrSliderValue> {\n  // Typed `WrSliderValue | undefined` (not `number`) to satisfy the reserved\n  // `FormUiControl` min/max slots, which are keyed to the control's value type.\n  // The transform still coerces to a plain number, so the bounds stay numeric\n  // at runtime; `minValue`/`maxValue` narrow them back for arithmetic.\n  /** Lower bound. @default 0 */\n  readonly min = input<WrSliderValue | undefined>(0, { transform: (v: unknown): number => coerceNumberProperty(v, 0) });\n  /** Upper bound. @default 100 */\n  readonly max = input<WrSliderValue | undefined>(100, {\n    transform: (v: unknown): number => coerceNumberProperty(v, 100),\n  });\n\n  /** Resolved numeric lower bound for internal arithmetic. */\n  private readonly minValue = computed(() => {\n    const m = this.min();\n    return typeof m === 'number' ? m : 0;\n  });\n  /** Resolved numeric upper bound for internal arithmetic. */\n  private readonly maxValue = computed(() => {\n    const m = this.max();\n    return typeof m === 'number' ? m : 100;\n  });\n\n  /** Step size for keyboard and drag. @default 1 */\n  readonly step = input(1, { transform: (v: unknown): number => Math.max(0.0001, coerceNumberProperty(v, 1)) });\n  /** Render two thumbs and emit `[low, high]`. @default false */\n  readonly range = input(false, { transform: coerceBooleanProperty });\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  /** Render the current value below the track. @default true */\n  readonly showLabel = input(true, { transform: coerceBooleanProperty });\n\n  /**\n   * Current value. Bound by `[formField]`, or two-way via `[(value)]`. Shape\n   * follows `range`: a plain `number`, or `[low, high]` in range mode.\n   */\n  readonly value = model<WrSliderValue>(0);\n\n  /** Emitted on blur so a bound field can mark itself touched. */\n  readonly touch = output<void>();\n\n  protected readonly low = signal(0);\n  protected readonly high = signal(100);\n\n  protected readonly track = viewChild.required<ElementRef<HTMLElement>>('track');\n\n  /**\n   * Ambient reading direction. Optional so a bare `TestBed` — or any consumer\n   * that never set a direction — needs no provider; `Directionality` is\n   * root-provided, so `null` only ever means \"nobody asked\", which is LTR.\n   *\n   * Nothing caches a direction-derived value: the thumbs are painted with\n   * `inset-inline-start`, so the track mirrors from CSS alone, and `isRtl()` is\n   * read inside the event handlers. A runtime flip therefore needs no\n   * subscription to `Directionality.change`.\n   */\n  private readonly dir = inject(Directionality, { optional: true });\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-slider'];\n    if (this.range()) parts.push('wr-slider--range');\n    if (this.disabled()) parts.push('wr-slider--disabled');\n    return parts.join(' ');\n  });\n\n  protected readonly lowPercent = computed(() => this.percentOf(this.low()));\n  protected readonly highPercent = computed(() => this.percentOf(this.high()));\n\n  /** Offset of the fill from the track's START edge — the left one in LTR, the right one in RTL. */\n  protected readonly fillStart = computed(() => (this.range() ? this.lowPercent() : 0));\n  protected readonly fillWidth = computed(() =>\n    this.range() ? this.highPercent() - this.lowPercent() : this.lowPercent()\n  );\n\n  protected readonly label = computed(() => (this.range() ? `${this.low()} – ${this.high()}` : `${this.low()}`));\n\n  constructor() {\n    // Keep the internal thumbs in sync with external writes to `value`\n    // (the old `writeValue`): split the tuple / clamp into the low & high cells.\n    effect(() => {\n      const v = this.value();\n      if (Array.isArray(v)) {\n        const tuple = v as readonly [number, number];\n        this.low.set(this.clampToBounds(tuple[0]));\n        this.high.set(this.clampToBounds(tuple[1]));\n      } else if (typeof v === 'number') {\n        this.low.set(this.clampToBounds(v));\n      }\n    });\n  }\n\n  // Interaction\n\n  protected onPointerDown(event: PointerEvent, thumb: 'low' | 'high'): void {\n    if (this.disabled()) return;\n    event.preventDefault();\n    const target = event.currentTarget as HTMLElement;\n    target.setPointerCapture(event.pointerId);\n\n    const move = (e: PointerEvent): void => this.updateFromEvent(e, thumb);\n    const up = (e: PointerEvent): void => {\n      target.releasePointerCapture(e.pointerId);\n      target.removeEventListener('pointermove', move);\n      target.removeEventListener('pointerup', up);\n      this.touch.emit();\n    };\n\n    target.addEventListener('pointermove', move);\n    target.addEventListener('pointerup', up);\n    this.updateFromEvent(event, thumb);\n  }\n\n  protected onTrackPointerDown(event: PointerEvent): void {\n    if (this.disabled()) return;\n    if ((event.target as HTMLElement).closest('.wr-slider__thumb')) return;\n    const thumb = this.nearestThumb(event);\n    this.updateFromEvent(event, thumb);\n    this.focusThumb(thumb);\n  }\n\n  protected onKey(event: KeyboardEvent, thumb: 'low' | 'high'): void {\n    if (this.disabled()) return;\n    const big = event.shiftKey || event.key === 'PageUp' || event.key === 'PageDown' ? 10 : 1;\n    const delta = this.step() * big;\n    const current = thumb === 'low' ? this.low() : this.high();\n    // The horizontal arrows name a SIDE of the track, so they follow the\n    // reading direction; every other key names a value and does not.\n    const inline = this.isRtl() ? -delta : delta;\n    let next: number | null = null;\n\n    switch (event.key) {\n      case 'ArrowRight':\n        next = current + inline;\n        break;\n      case 'ArrowLeft':\n        next = current - inline;\n        break;\n      case 'ArrowUp':\n      case 'PageUp':\n        next = current + delta;\n        break;\n      case 'ArrowDown':\n      case 'PageDown':\n        next = current - delta;\n        break;\n      case 'Home':\n        next = this.minValue();\n        break;\n      case 'End':\n        next = this.maxValue();\n        break;\n    }\n\n    if (next === null) return;\n    event.preventDefault();\n    this.setThumb(thumb, next);\n    this.emitChange();\n    this.touch.emit();\n  }\n\n  // Internals\n\n  private isRtl(): boolean {\n    return this.dir?.value === 'rtl';\n  }\n\n  /**\n   * The value under a pointer, measured along the track's INLINE axis.\n   *\n   * The offset is taken from whichever edge the track starts at — the left one\n   * in LTR, the right one in RTL — so the whole component needs the direction\n   * in exactly one place. Measuring from `rect.left` regardless would read 0 at\n   * the visual maximum of a mirrored track.\n   */\n  private valueAt(event: PointerEvent): number {\n    const rect = this.track().nativeElement.getBoundingClientRect();\n    const offset = this.isRtl() ? rect.right - event.clientX : event.clientX - rect.left;\n    const ratio = clamp(offset / rect.width, 0, 1);\n    return this.minValue() + ratio * (this.maxValue() - this.minValue());\n  }\n\n  private updateFromEvent(event: PointerEvent, thumb: 'low' | 'high'): void {\n    this.setThumb(thumb, this.valueAt(event));\n    this.emitChange();\n  }\n\n  /**\n   * Which thumb a track click grabs: the one nearest the pointer ON SCREEN.\n   *\n   * Value distance is the same thing as visual distance once {@link valueAt}\n   * has mirrored the ratio — in RTL the low thumb is the RIGHT one, and a click\n   * near the right edge lands close to `low` in value space too.\n   */\n  private nearestThumb(event: PointerEvent): 'low' | 'high' {\n    if (!this.range()) return 'low';\n    const raw = this.valueAt(event);\n    return Math.abs(raw - this.low()) <= Math.abs(raw - this.high()) ? 'low' : 'high';\n  }\n\n  private focusThumb(thumb: 'low' | 'high'): void {\n    queueMicrotask(() => {\n      const root = this.track().nativeElement;\n      const el = root.querySelector<HTMLElement>(`.wr-slider__thumb--${thumb}`);\n      el?.focus();\n    });\n  }\n\n  private setThumb(thumb: 'low' | 'high', raw: number): void {\n    const stepped = this.snap(raw);\n    if (thumb === 'low') {\n      const next = this.range() ? Math.min(stepped, this.high()) : stepped;\n      this.low.set(next);\n    } else {\n      this.high.set(Math.max(stepped, this.low()));\n    }\n  }\n\n  private snap(value: number): number {\n    const stepped = Math.round((value - this.minValue()) / this.step()) * this.step() + this.minValue();\n    return this.clampToBounds(round(stepped, 6));\n  }\n\n  private clampToBounds(v: number): number {\n    return clamp(v, this.minValue(), this.maxValue());\n  }\n\n  private percentOf(v: number): number {\n    const span = this.maxValue() - this.minValue();\n    if (span <= 0) return 0;\n    return ((v - this.minValue()) / span) * 100;\n  }\n\n  private emitChange(): void {\n    const value: WrSliderValue = this.range() ? [this.low(), this.high()] : this.low();\n    this.value.set(value);\n  }\n}\n","<div #track class=\"wr-slider__track\" (pointerdown)=\"onTrackPointerDown($event)\">\n  <!--\n    Positioned on the INLINE axis, not with `left`: `inset-inline-start` is the\n    same edge in LTR and mirrors under `dir=\"rtl\"`, so the track paints itself\n    the right way round without the component reading a direction to draw.\n  -->\n  <span class=\"wr-slider__fill\" [style.inset-inline-start.%]=\"fillStart()\" [style.width.%]=\"fillWidth()\"></span>\n\n  <button\n    type=\"button\"\n    class=\"wr-slider__thumb wr-slider__thumb--low\"\n    role=\"slider\"\n    [style.inset-inline-start.%]=\"lowPercent()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"range() ? high() : max()\"\n    [attr.aria-valuenow]=\"low()\"\n    [attr.aria-label]=\"range() ? 'Lower value' : 'Value'\"\n    (pointerdown)=\"onPointerDown($event, 'low')\"\n    (keydown)=\"onKey($event, 'low')\"\n  ></button>\n\n  @if (range()) {\n    <button\n      type=\"button\"\n      class=\"wr-slider__thumb wr-slider__thumb--high\"\n      role=\"slider\"\n      [style.inset-inline-start.%]=\"highPercent()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-valuemin]=\"low()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"high()\"\n      aria-label=\"Upper value\"\n      (pointerdown)=\"onPointerDown($event, 'high')\"\n      (keydown)=\"onKey($event, 'high')\"\n    ></button>\n  }\n</div>\n\n@if (showLabel()) {\n  <div class=\"wr-slider__label\">{{ label() }}</div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-slider.mjs","sources":["../../../projects/lib/slider/slider.ts","../../../projects/lib/slider/slider.html","../../../projects/lib/slider/ngwr-slider.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 type { ElementRef } from '@angular/core';\nimport {\n  Component,\n  ViewEncapsulation,\n  computed,\n  effect,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n  untracked,\n  viewChild,\n} from '@angular/core';\nimport type { FormValueControl } from '@angular/forms/signals';\n\nimport { clamp, round } from 'ngwr/utils';\n\nimport type { WrSliderValue } from './interfaces';\n\n/** Trim float drift from step calculations. */\n\n/**\n * Numeric slider with optional dual-thumb range mode.\n *\n * A signal-forms native control: it implements `FormValueControl<WrSliderValue>`,\n * so `[formField]` binds straight to its `value` model — no\n * `ControlValueAccessor` in between. `[(value)]` works standalone. The value\n * shape depends on `range`: `number` (default) or `[number, number]` when\n * `range=\"true\"`.\n *\n * Keyboard: ← / → adjust by `step`; ↑ / ↓ same; Shift+arrow by `step × 10`;\n * Home / End jump to min / max; PageUp / PageDown by `step × 10`.\n *\n * Reading direction: the arrows follow the VISUAL track, so under `dir=\"rtl\"`\n * → moves toward the lower end and ← toward the higher one, and a drag reads\n * its ratio from the right edge. ↑ / ↓, PageUp / PageDown and Home / End are\n * unchanged — they name a value, not a side of the screen.\n *\n * @example\n * ```html\n * <!-- signal forms -->\n * <wr-slider [formField]=\"form.volume\" min=\"0\" max=\"100\" step=\"5\" />\n *\n * <!-- standalone two-way binding -->\n * <wr-slider [(value)]=\"range\" range min=\"0\" max=\"1000\" step=\"10\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/slider\n */\n@Component({\n  selector: 'wr-slider',\n  templateUrl: './slider.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n})\nexport class WrSlider implements FormValueControl<WrSliderValue> {\n  // Typed `WrSliderValue | undefined` (not `number`) to satisfy the reserved\n  // `FormUiControl` min/max slots, which are keyed to the control's value type.\n  // The transform still coerces to a plain number, so the bounds stay numeric\n  // at runtime; `minValue`/`maxValue` narrow them back for arithmetic.\n  /** Lower bound. @default 0 */\n  readonly min = input<WrSliderValue | undefined>(0, { transform: (v: unknown): number => coerceNumberProperty(v, 0) });\n  /** Upper bound. @default 100 */\n  readonly max = input<WrSliderValue | undefined>(100, {\n    transform: (v: unknown): number => coerceNumberProperty(v, 100),\n  });\n\n  /** Resolved numeric lower bound for internal arithmetic. */\n  private readonly minValue = computed(() => {\n    const m = this.min();\n    return typeof m === 'number' ? m : 0;\n  });\n  /** Resolved numeric upper bound for internal arithmetic. */\n  private readonly maxValue = computed(() => {\n    const m = this.max();\n    return typeof m === 'number' ? m : 100;\n  });\n\n  /** Step size for keyboard and drag. @default 1 */\n  readonly step = input(1, { transform: (v: unknown): number => Math.max(0.0001, coerceNumberProperty(v, 1)) });\n  /** Render two thumbs and emit `[low, high]`. @default false */\n  readonly range = input(false, { transform: coerceBooleanProperty });\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  /** Render the current value below the track. @default true */\n  readonly showLabel = input(true, { transform: coerceBooleanProperty });\n\n  /**\n   * Current value. Bound by `[formField]`, or two-way via `[(value)]`. Shape\n   * follows `range`: a plain `number`, or `[low, high]` in range mode.\n   */\n  readonly value = model<WrSliderValue>(0);\n\n  /** Emitted on blur so a bound field can mark itself touched. */\n  readonly touch = output<void>();\n\n  protected readonly low = signal(0);\n  /**\n   * The high thumb's cell. Its literal default stands in for `maxValue()`,\n   * which cannot be read at field-initialisation time — see `highSeeded` and\n   * the constructor effect.\n   */\n  protected readonly high = signal(100);\n\n  /**\n   * Whether `high` has ever been told a real value by the model.\n   *\n   * `<wr-slider range [min]=\"200\" [max]=\"300\" />` binds no value, so the model\n   * holds its own scalar default and the tuple branch below never runs: `high`\n   * kept the literal 100, which is not inside every `[min, max]`. The thumb\n   * rendered off the track and the first interaction committed `[low, 100]` —\n   * a value the slider itself calls out of range.\n   */\n  private highSeeded = false;\n\n  protected readonly track = viewChild.required<ElementRef<HTMLElement>>('track');\n\n  /**\n   * Ambient reading direction. Optional so a bare `TestBed` — or any consumer\n   * that never set a direction — needs no provider; `Directionality` is\n   * root-provided, so `null` only ever means \"nobody asked\", which is LTR.\n   *\n   * Nothing caches a direction-derived value: the thumbs are painted with\n   * `inset-inline-start`, so the track mirrors from CSS alone, and `isRtl()` is\n   * read inside the event handlers. A runtime flip therefore needs no\n   * subscription to `Directionality.change`.\n   */\n  private readonly dir = inject(Directionality, { optional: true });\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-slider'];\n    if (this.range()) parts.push('wr-slider--range');\n    if (this.disabled()) parts.push('wr-slider--disabled');\n    return parts.join(' ');\n  });\n\n  protected readonly lowPercent = computed(() => this.percentOf(this.low()));\n  protected readonly highPercent = computed(() => this.percentOf(this.high()));\n\n  /** Offset of the fill from the track's START edge — the left one in LTR, the right one in RTL. */\n  protected readonly fillStart = computed(() => (this.range() ? this.lowPercent() : 0));\n  protected readonly fillWidth = computed(() =>\n    this.range() ? this.highPercent() - this.lowPercent() : this.lowPercent()\n  );\n\n  protected readonly label = computed(() => (this.range() ? `${this.low()} – ${this.high()}` : `${this.low()}`));\n\n  constructor() {\n    // Keep the internal thumbs in sync with external writes to `value`\n    // (the old `writeValue`): split the tuple / clamp into the low & high cells.\n    // The cells are clamped and the MODEL IS NOT TOUCHED, and the asymmetry is\n    // deliberate. A thumb cannot render outside its own track, so the display\n    // has no choice — but writing that clamp back into `value` would erase the\n    // error it represents: under `[formField]` the bounds reach this component\n    // only through the schema's `min()` / `max()` rules (binding `[min]` beside\n    // `[formField]` is an NG8022 compile error), so the write-back deleted the\n    // out-of-range value those rules exist to report, and marked a pristine\n    // form dirty on first paint besides. The first real interaction emits an\n    // in-range number through `emitChange` and the two agree from then on.\n    effect(() => {\n      const v = this.value();\n\n      if (Array.isArray(v)) {\n        const tuple = v as readonly [number, number];\n        const lo = this.clampToBounds(tuple[0]);\n        const hi = this.clampToBounds(tuple[1]);\n        this.low.set(lo);\n        this.high.set(hi);\n        this.highSeeded = true;\n        return;\n      }\n\n      if (typeof v !== 'number') return;\n      const lo = this.clampToBounds(v);\n      this.low.set(lo);\n\n      if (!this.range()) return;\n\n      // Range mode holding a scalar: the high thumb has never been told\n      // anything, and its literal default is not inside every `[min, max]`.\n      // Seed it at the top of the range — which is what the 100 meant back when\n      // the bounds were 0–100. The MODEL is left alone here too; the shape it\n      // holds is the consumer's business until they move a thumb.\n      this.high.set(this.highSeeded ? this.clampToBounds(untracked(this.high)) : this.maxValue());\n      this.highSeeded = true;\n    });\n  }\n\n  // Interaction\n\n  protected onPointerDown(event: PointerEvent, thumb: 'low' | 'high'): void {\n    if (this.disabled()) return;\n    event.preventDefault();\n    const target = event.currentTarget as HTMLElement;\n    target.setPointerCapture(event.pointerId);\n\n    const move = (e: PointerEvent): void => this.updateFromEvent(e, thumb);\n    const up = (e: PointerEvent): void => {\n      target.releasePointerCapture(e.pointerId);\n      target.removeEventListener('pointermove', move);\n      target.removeEventListener('pointerup', up);\n      this.touch.emit();\n    };\n\n    target.addEventListener('pointermove', move);\n    target.addEventListener('pointerup', up);\n    this.updateFromEvent(event, thumb);\n  }\n\n  protected onTrackPointerDown(event: PointerEvent): void {\n    if (this.disabled()) return;\n    if ((event.target as HTMLElement).closest('.wr-slider__thumb')) return;\n    const thumb = this.nearestThumb(event);\n    this.updateFromEvent(event, thumb);\n    this.focusThumb(thumb);\n  }\n\n  protected onKey(event: KeyboardEvent, thumb: 'low' | 'high'): void {\n    if (this.disabled()) return;\n    const big = event.shiftKey || event.key === 'PageUp' || event.key === 'PageDown' ? 10 : 1;\n    const delta = this.step() * big;\n    const current = thumb === 'low' ? this.low() : this.high();\n    // The horizontal arrows name a SIDE of the track, so they follow the\n    // reading direction; every other key names a value and does not.\n    const inline = this.isRtl() ? -delta : delta;\n    let next: number | null = null;\n\n    switch (event.key) {\n      case 'ArrowRight':\n        next = current + inline;\n        break;\n      case 'ArrowLeft':\n        next = current - inline;\n        break;\n      case 'ArrowUp':\n      case 'PageUp':\n        next = current + delta;\n        break;\n      case 'ArrowDown':\n      case 'PageDown':\n        next = current - delta;\n        break;\n      case 'Home':\n        next = this.minValue();\n        break;\n      case 'End':\n        next = this.maxValue();\n        break;\n    }\n\n    if (next === null) return;\n    event.preventDefault();\n    this.setThumb(thumb, next);\n    this.emitChange();\n    this.touch.emit();\n  }\n\n  // Internals\n\n  private isRtl(): boolean {\n    return this.dir?.value === 'rtl';\n  }\n\n  /**\n   * The value under a pointer, measured along the track's INLINE axis.\n   *\n   * The offset is taken from whichever edge the track starts at — the left one\n   * in LTR, the right one in RTL — so the whole component needs the direction\n   * in exactly one place. Measuring from `rect.left` regardless would read 0 at\n   * the visual maximum of a mirrored track.\n   */\n  private valueAt(event: PointerEvent): number {\n    const rect = this.track().nativeElement.getBoundingClientRect();\n    const offset = this.isRtl() ? rect.right - event.clientX : event.clientX - rect.left;\n    const ratio = clamp(offset / rect.width, 0, 1);\n    return this.minValue() + ratio * (this.maxValue() - this.minValue());\n  }\n\n  private updateFromEvent(event: PointerEvent, thumb: 'low' | 'high'): void {\n    this.setThumb(thumb, this.valueAt(event));\n    this.emitChange();\n  }\n\n  /**\n   * Which thumb a track click grabs: the one nearest the pointer ON SCREEN.\n   *\n   * Value distance is the same thing as visual distance once {@link valueAt}\n   * has mirrored the ratio — in RTL the low thumb is the RIGHT one, and a click\n   * near the right edge lands close to `low` in value space too.\n   */\n  private nearestThumb(event: PointerEvent): 'low' | 'high' {\n    if (!this.range()) return 'low';\n    const raw = this.valueAt(event);\n    return Math.abs(raw - this.low()) <= Math.abs(raw - this.high()) ? 'low' : 'high';\n  }\n\n  private focusThumb(thumb: 'low' | 'high'): void {\n    queueMicrotask(() => {\n      const root = this.track().nativeElement;\n      const el = root.querySelector<HTMLElement>(`.wr-slider__thumb--${thumb}`);\n      el?.focus();\n    });\n  }\n\n  private setThumb(thumb: 'low' | 'high', raw: number): void {\n    const stepped = this.snap(raw);\n    if (thumb === 'low') {\n      const next = this.range() ? Math.min(stepped, this.high()) : stepped;\n      this.low.set(next);\n    } else {\n      this.high.set(Math.max(stepped, this.low()));\n    }\n  }\n\n  private snap(value: number): number {\n    const stepped = Math.round((value - this.minValue()) / this.step()) * this.step() + this.minValue();\n    return this.clampToBounds(round(stepped, 6));\n  }\n\n  private clampToBounds(v: number): number {\n    return clamp(v, this.minValue(), this.maxValue());\n  }\n\n  private percentOf(v: number): number {\n    const span = this.maxValue() - this.minValue();\n    if (span <= 0) return 0;\n    return ((v - this.minValue()) / span) * 100;\n  }\n\n  private emitChange(): void {\n    const value: WrSliderValue = this.range() ? [this.low(), this.high()] : this.low();\n    this.value.set(value);\n  }\n}\n","<div #track class=\"wr-slider__track\" (pointerdown)=\"onTrackPointerDown($event)\">\n  <!--\n    Positioned on the INLINE axis, not with `left`: `inset-inline-start` is the\n    same edge in LTR and mirrors under `dir=\"rtl\"`, so the track paints itself\n    the right way round without the component reading a direction to draw.\n  -->\n  <span class=\"wr-slider__fill\" [style.inset-inline-start.%]=\"fillStart()\" [style.width.%]=\"fillWidth()\"></span>\n\n  <button\n    type=\"button\"\n    class=\"wr-slider__thumb wr-slider__thumb--low\"\n    role=\"slider\"\n    [style.inset-inline-start.%]=\"lowPercent()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"range() ? high() : max()\"\n    [attr.aria-valuenow]=\"low()\"\n    [attr.aria-label]=\"range() ? 'Lower value' : 'Value'\"\n    (pointerdown)=\"onPointerDown($event, 'low')\"\n    (keydown)=\"onKey($event, 'low')\"\n  ></button>\n\n  @if (range()) {\n    <button\n      type=\"button\"\n      class=\"wr-slider__thumb wr-slider__thumb--high\"\n      role=\"slider\"\n      [style.inset-inline-start.%]=\"highPercent()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-valuemin]=\"low()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"high()\"\n      aria-label=\"Upper value\"\n      (pointerdown)=\"onPointerDown($event, 'high')\"\n      (keydown)=\"onKey($event, 'high')\"\n    ></button>\n  }\n</div>\n\n@if (showLabel()) {\n  <div class=\"wr-slider__label\">{{ label() }}</div>\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-sparkline-testing.mjs

@@ -0,0 +1,76 @@
+import { ComponentHarness, 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
+ */
+/**
+ * Test harness for `<wr-sparkline>`.
+ *
+ * **The interesting assertion here is the ARIA one.** A sparkline is a trend line
+ * with no axes and no labels, so it is either given an `ariaLabel` — in which case it
+ * announces itself as an image — or it is decoration, and must be `aria-hidden` so a
+ * screen reader does not stop on a nameless graphic. The component switches between
+ * those two states on one input, and {@link isDecorative} is how a spec pins which
+ * one it is in.
+ *
+ * The line itself is an SVG path, and a path's `d` is not something a spec should
+ * assert: it is a rendering detail that changes with the viewBox, the stroke width
+ * and the smoothing. What IS worth asserting is whether the parts are there —
+ * {@link hasLine}, {@link hasArea}, {@link hasTip} — since each is an input the
+ * consumer set, and an empty dataset draws none of them.
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrSparklineHarness extends ComponentHarness {
+    static hostSelector = 'wr-sparkline';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrSparklineHarness, options).addOption('ariaLabel', options.ariaLabel, (harness, label) => HarnessPredicate.stringMatches(harness.getAccessibleName(), label));
+    }
+    svg = this.locatorFor('svg');
+    /** The name the chart announces, or `null` when it is decoration. */
+    async getAccessibleName() {
+        return (await this.svg()).getAttribute('aria-label');
+    }
+    /** The role the chart claims — `img` when it is named, `null` when it is not. */
+    async getRole() {
+        return (await this.svg()).getAttribute('role');
+    }
+    /**
+     * Whether the chart is hidden from assistive tech.
+     *
+     * The other half of {@link getAccessibleName}, and the pairing worth asserting
+     * together: a named sparkline must NOT be hidden, and an unnamed one must be, or a
+     * screen reader announces a graphic with nothing to say about it.
+     */
+    async isDecorative() {
+        return (await (await this.svg()).getAttribute('aria-hidden')) === 'true';
+    }
+    /** Whether a trend line was drawn — `false` for an empty or single-point dataset. */
+    async hasLine() {
+        return (await this.locatorForOptional('.wr-sparkline__line')()) !== null;
+    }
+    /** Whether the area under the line is filled (`showArea`). */
+    async hasArea() {
+        return (await this.locatorForOptional('.wr-sparkline__area')()) !== null;
+    }
+    /** Whether the last point is marked with a dot (`showTip`). */
+    async hasTip() {
+        return (await this.locatorForOptional('.wr-sparkline__tip')()) !== null;
+    }
+    /** The stroke colour as the component passed it through — a CSS value, not a resolved one. */
+    async getColor() {
+        const line = await this.locatorForOptional('.wr-sparkline__line')();
+        return line ? line.getAttribute('stroke') : null;
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrSparklineHarness };
+//# sourceMappingURL=ngwr-sparkline-testing.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-sparkline-testing.mjs","sources":["../../../projects/lib/sparkline/testing/wr-sparkline-harness.ts","../../../projects/lib/sparkline/testing/ngwr-sparkline-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 { WrSparklineHarnessFilters } from './interfaces';\n\n/**\n * Test harness for `<wr-sparkline>`.\n *\n * **The interesting assertion here is the ARIA one.** A sparkline is a trend line\n * with no axes and no labels, so it is either given an `ariaLabel` — in which case it\n * announces itself as an image — or it is decoration, and must be `aria-hidden` so a\n * screen reader does not stop on a nameless graphic. The component switches between\n * those two states on one input, and {@link isDecorative} is how a spec pins which\n * one it is in.\n *\n * The line itself is an SVG path, and a path's `d` is not something a spec should\n * assert: it is a rendering detail that changes with the viewBox, the stroke width\n * and the smoothing. What IS worth asserting is whether the parts are there —\n * {@link hasLine}, {@link hasArea}, {@link hasTip} — since each is an input the\n * consumer set, and an empty dataset draws none of them.\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrSparklineHarness extends ComponentHarness {\n  static hostSelector = 'wr-sparkline';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrSparklineHarnessFilters = {}): HarnessPredicate<WrSparklineHarness> {\n    return new HarnessPredicate(WrSparklineHarness, options).addOption(\n      'ariaLabel',\n      options.ariaLabel,\n      (harness, label) => HarnessPredicate.stringMatches(harness.getAccessibleName(), label)\n    );\n  }\n\n  private readonly svg = this.locatorFor('svg');\n\n  /** The name the chart announces, or `null` when it is decoration. */\n  async getAccessibleName(): Promise<string | null> {\n    return (await this.svg()).getAttribute('aria-label');\n  }\n\n  /** The role the chart claims — `img` when it is named, `null` when it is not. */\n  async getRole(): Promise<string | null> {\n    return (await this.svg()).getAttribute('role');\n  }\n\n  /**\n   * Whether the chart is hidden from assistive tech.\n   *\n   * The other half of {@link getAccessibleName}, and the pairing worth asserting\n   * together: a named sparkline must NOT be hidden, and an unnamed one must be, or a\n   * screen reader announces a graphic with nothing to say about it.\n   */\n  async isDecorative(): Promise<boolean> {\n    return (await (await this.svg()).getAttribute('aria-hidden')) === 'true';\n  }\n\n  /** Whether a trend line was drawn — `false` for an empty or single-point dataset. */\n  async hasLine(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-sparkline__line')()) !== null;\n  }\n\n  /** Whether the area under the line is filled (`showArea`). */\n  async hasArea(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-sparkline__area')()) !== null;\n  }\n\n  /** Whether the last point is marked with a dot (`showTip`). */\n  async hasTip(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-sparkline__tip')()) !== null;\n  }\n\n  /** The stroke colour as the component passed it through — a CSS value, not a resolved one. */\n  async getColor(): Promise<string | null> {\n    const line = await this.locatorForOptional('.wr-sparkline__line')();\n    return line ? line.getAttribute('stroke') : null;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;;;;AAKG;AAMH;;;;;;;;;;;;;;;;;AAiBG;AACG,MAAO,kBAAmB,SAAQ,gBAAgB,CAAA;AACtD,IAAA,OAAO,YAAY,GAAG,cAAc;;AAGpC,IAAA,OAAO,IAAI,CAAC,OAAA,GAAqC,EAAE,EAAA;AACjD,QAAA,OAAO,IAAI,gBAAgB,CAAC,kBAAkB,EAAE,OAAO,CAAC,CAAC,SAAS,CAChE,WAAW,EACX,OAAO,CAAC,SAAS,EACjB,CAAC,OAAO,EAAE,KAAK,KAAK,gBAAgB,CAAC,aAAa,CAAC,OAAO,CAAC,iBAAiB,EAAE,EAAE,KAAK,CAAC,CACvF;IACH;AAEiB,IAAA,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;;AAG7C,IAAA,MAAM,iBAAiB,GAAA;AACrB,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,GAAG,EAAE,EAAE,YAAY,CAAC,YAAY,CAAC;IACtD;;AAGA,IAAA,MAAM,OAAO,GAAA;AACX,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,GAAG,EAAE,EAAE,YAAY,CAAC,MAAM,CAAC;IAChD;AAEA;;;;;;AAMG;AACH,IAAA,MAAM,YAAY,GAAA;AAChB,QAAA,OAAO,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,GAAG,EAAE,EAAE,YAAY,CAAC,aAAa,CAAC,MAAM,MAAM;IAC1E;;AAGA,IAAA,MAAM,OAAO,GAAA;AACX,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,kBAAkB,CAAC,qBAAqB,CAAC,EAAE,MAAM,IAAI;IAC1E;;AAGA,IAAA,MAAM,OAAO,GAAA;AACX,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,kBAAkB,CAAC,qBAAqB,CAAC,EAAE,MAAM,IAAI;IAC1E;;AAGA,IAAA,MAAM,MAAM,GAAA;AACV,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,kBAAkB,CAAC,oBAAoB,CAAC,EAAE,MAAM,IAAI;IACzE;;AAGA,IAAA,MAAM,QAAQ,GAAA;QACZ,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,kBAAkB,CAAC,qBAAqB,CAAC,EAAE;AACnE,QAAA,OAAO,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,GAAG,IAAI;IAClD;;;ACnFF;;AAEG;;;;"}