ngwr 11.0.0 → 11.2.0

package/fesm2022/ngwr-color-picker-testing.mjs

@@ -0,0 +1,432 @@
+import { ComponentHarness, HarnessPredicate, TestKey } from '@angular/cdk/testing';
+import { WrSegmentedHarness } from 'ngwr/segmented/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
+ */
+/**
+ * One labelled numeric field — internal. A `TestElement` cannot be queried into, so
+ * pairing an input with the label printed under it means a harness anchored on the
+ * `<label>` that holds both.
+ */
+class FieldHarness extends ComponentHarness {
+    static hostSelector = '.wr-color-picker__field';
+    async getLabel() {
+        return (await this.locatorFor('.wr-color-picker__field-label')()).text();
+    }
+    async getInput() {
+        return this.locatorFor('input')();
+    }
+    async getValue() {
+        return (await this.getInput()).getProperty('value');
+    }
+}
+/** An inline `left` / `top` percentage as a number. */
+async function percent(thumb, side) {
+    return Number.parseFloat(await thumb.getCssValue(side));
+}
+/**
+ * Test harness for `<wr-color-picker>` — the inline picker, and the one the
+ * `[wrColorPickerTrigger]` directive mounts in an overlay.
+ *
+ * **What this harness will not do: drag.** The SV canvas and the hue / alpha
+ * sliders are pointer surfaces that read `getBoundingClientRect()` and divide by
+ * its width. A unit test has no layout, so every box is 0×0 and the division is
+ * `NaN` — a `setHue()` built on a synthetic pointer event would report success and
+ * write nothing, or write garbage. The numeric fields reach the same state and are
+ * also the only keyboard path the component has, so they are the whole write API
+ * here. {@link getThumbs} reads where the thumbs ARE, from the percentages the
+ * component writes inline, which is how a spec checks a surface followed a value.
+ *
+ * **And it will not read the preview swatch.** The preview paints the current
+ * colour as a CSS background, and jsdom normalises that to `rgb(…)` — dropping the
+ * alpha channel entirely, so `#ff880080` and `#ff8800ff` come back identical. A
+ * `getColor()` reading it would answer one thing in a unit test and another in a
+ * browser. {@link getHex} is the colour: the field holds the canonical 8-digit
+ * string, alpha included, whatever `format` writes into `value`.
+ *
+ * @example
+ * ```ts
+ * const picker = await loader.getHarness(WrColorPickerHarness);
+ *
+ * await picker.setHex('#3969e2');
+ * expect(await picker.getHex()).toBe('#3969e2ff');
+ *
+ * await picker.setTab('rgb');
+ * expect(await picker.getRgb()).toEqual({ r: 57, g: 105, b: 226 });
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrColorPickerHarness extends ComponentHarness {
+    static hostSelector = 'wr-color-picker';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrColorPickerHarness, options)
+            .addOption('color', options.color, (harness, color) => HarnessPredicate.stringMatches(harness.readHex(), color))
+            .addOption('tab', options.tab, async (harness, tab) => (await harness.getTab()) === tab)
+            .addOption('disabled', options.disabled, async (harness, disabled) => (await harness.isDisabled()) === disabled);
+    }
+    hexField = this.locatorForOptional('.wr-color-picker__inputs--hex input');
+    tabs = this.locatorFor(WrSegmentedHarness.with({ selector: '.wr-color-picker__tabs' }));
+    /**
+     * The tab switcher, as a {@link WrSegmentedHarness}.
+     *
+     * Handed back rather than re-queried: the switcher IS a `<wr-segmented>`, which
+     * already knows that the roving tab stop is not the selection and how the sliding
+     * thumb reports itself. Re-reading its buttons here would be a second, worse copy.
+     */
+    async getTabs() {
+        return this.tabs();
+    }
+    /** Which set of numeric fields is showing. */
+    async getTab() {
+        const label = await (await this.tabs()).getSelectedLabel();
+        return (label ?? 'HEX').toLowerCase();
+    }
+    /** Show a different set of numeric fields. An already-active tab is left alone. */
+    async setTab(tab) {
+        if ((await this.getTab()) === tab)
+            return;
+        await (await this.tabs()).select({ label: tab.toUpperCase() });
+    }
+    /**
+     * The canonical hex string, as the HEX field shows it — 8 digits while `alpha` is
+     * on, 6 while it is off.
+     *
+     * This is the picker's colour, and deliberately not the same thing as its `value`:
+     * `format` decides whether `value` is written as hex, `rgb()` or `hsl()`, while the
+     * field always shows hex. A spec that cares about the emitted string should read
+     * the bound signal; one that cares about the COLOUR should read this.
+     *
+     * Throws off the HEX tab, where the field does not exist — see {@link setTab}.
+     */
+    async getHex() {
+        const field = await this.hexField();
+        if (!field) {
+            throw new Error(`WrColorPickerHarness.getHex(): the HEX field is not rendered — the picker is showing the ` +
+                `${(await this.getTab()).toUpperCase()} tab. Call setTab('hex') first.`);
+        }
+        return field.getProperty('value');
+    }
+    /**
+     * Type a colour into the HEX field.
+     *
+     * Typed rather than assigned, because that is the path the component is built
+     * around: it re-parses on every keystroke and applies the first spelling that
+     * parses, so a partial `#ff8` commits a colour on its way to `#ff8800`. An
+     * unparseable string leaves the committed colour ALONE and lives in the field
+     * until {@link blurHex} snaps it back — assert that rather than expecting a throw.
+     */
+    async setHex(value) {
+        const field = await this.requireHexField('setHex');
+        await field.clear();
+        await field.sendKeys(value);
+    }
+    /**
+     * Blur the HEX field — re-syncing it with the committed colour and emitting
+     * `touch`.
+     *
+     * The re-sync is the visible half: a field left holding text that never parsed
+     * goes back to the canonical hex here, and nowhere else.
+     */
+    async blurHex() {
+        await (await this.requireHexField('blurHex')).blur();
+    }
+    /** Whether the HEX field currently holds focus. */
+    async isHexFocused() {
+        return (await this.requireHexField('isHexFocused')).isFocused();
+    }
+    /** The three RGB channels as the RGB tab shows them. Throws off that tab. */
+    async getRgb() {
+        const [r, g, b] = await this.channelValues('rgb', ['R', 'G', 'B']);
+        return { r, g, b };
+    }
+    /** Write one RGB channel, 0–255. Out-of-range numbers are clamped by the component. */
+    async setRgbChannel(channel, value) {
+        await this.writeChannel('rgb', channel.toUpperCase(), value);
+    }
+    /**
+     * Hue, saturation and lightness as the HSL tab shows them — degrees and whole
+     * percents, already rounded for display. Throws off that tab.
+     */
+    async getHsl() {
+        const [h, s, l] = await this.channelValues('hsl', ['H', 'S%', 'L%']);
+        return { h, s, l };
+    }
+    /** Write one HSL channel — `h` in degrees, `s` / `l` in percent. */
+    async setHslChannel(channel, value) {
+        await this.writeChannel('hsl', channel === 'h' ? 'H' : `${channel.toUpperCase()}%`, value);
+    }
+    /**
+     * Alpha as the whole percent the numeric tabs show, or `null` when the picker was
+     * built without alpha.
+     *
+     * Only the RGB and HSL tabs carry the field — the HEX tab spells alpha into the
+     * hex string instead — so this throws on the HEX tab rather than answering `null`,
+     * which would read as "this picker has no alpha".
+     */
+    async getAlphaPercent() {
+        const tab = await this.getTab();
+        if (tab === 'hex') {
+            throw new Error('WrColorPickerHarness.getAlphaPercent(): the HEX tab has no alpha field — the alpha is the last two ' +
+                "digits of getHex(). Call setTab('rgb') or setTab('hsl') to read it as a percent.");
+        }
+        if (!(await this.hasAlpha()))
+            return null;
+        const [alpha] = await this.channelValues(tab, ['A%']);
+        return alpha;
+    }
+    /** Write alpha as a whole percent, 0–100. */
+    async setAlphaPercent(value) {
+        const tab = await this.getTab();
+        if (tab === 'hex') {
+            throw new Error("WrColorPickerHarness.setAlphaPercent(): the HEX tab has no alpha field. Call setTab('rgb') first, " +
+                'or write the two alpha digits through setHex().');
+        }
+        await this.writeChannel(tab, 'A%', value);
+    }
+    /**
+     * Whether the picker offers alpha at all.
+     *
+     * From the host modifier, which is the one answer that holds on every tab: the
+     * alpha SLIDER is always rendered when it is on, while the `A%` field only exists
+     * on the two numeric tabs.
+     */
+    async hasAlpha() {
+        return (await this.host()).hasClass('wr-color-picker--alpha');
+    }
+    /**
+     * Whether the picker refuses interaction.
+     *
+     * Read from the modifier the host paints rather than from a field's `disabled`
+     * property, because the fields come and go with the tab while the state does not —
+     * and the drag surfaces, which have no `disabled` of their own, are gated by the
+     * same signal.
+     */
+    async isDisabled() {
+        return (await this.host()).hasClass('wr-color-picker--disabled');
+    }
+    /** The preset colours offered under the fields, as the strings the consumer passed. */
+    async getSwatches() {
+        const swatches = await this.locatorForAll('.wr-color-picker__swatch')();
+        return Promise.all(swatches.map(async (swatch) => (await swatch.getAttribute('aria-label')) ?? ''));
+    }
+    /**
+     * Click a preset.
+     *
+     * Matched on the string the consumer passed, which is what the button publishes as
+     * its accessible name — the rendered background is a CSS colour and would come back
+     * normalised and alpha-stripped. Throws when nothing matches, naming what is offered.
+     */
+    async pickSwatch(color) {
+        const swatches = await this.locatorForAll('.wr-color-picker__swatch')();
+        for (const swatch of swatches) {
+            if ((await swatch.getAttribute('aria-label')) === color) {
+                await swatch.click();
+                return;
+            }
+        }
+        throw new Error(`WrColorPickerHarness.pickSwatch(): no swatch for "${color}". The picker offers: ` +
+            `${(await this.getSwatches()).join(', ')}.`);
+    }
+    /**
+     * Where the three thumbs sit, in percent along their surfaces.
+     *
+     * The component writes these as inline `left` / `top` percentages, so they are
+     * readable with no layout at all — which makes them the only evidence a spec has
+     * that the surfaces followed a colour set through the fields. A measured position
+     * would be zero for all three.
+     */
+    async getThumbs() {
+        const sv = await this.locatorFor('.wr-color-picker__sv .wr-color-picker__thumb')();
+        const hue = await this.locatorFor('.wr-color-picker__slider--hue .wr-color-picker__thumb')();
+        const alpha = await this.locatorForOptional('.wr-color-picker__slider--alpha .wr-color-picker__thumb')();
+        return {
+            sv: { x: await percent(sv, 'left'), y: await percent(sv, 'top') },
+            hue: await percent(hue, 'left'),
+            alpha: alpha ? await percent(alpha, 'left') : null,
+        };
+    }
+    /** The HEX field's value without the tab check — for filters, which must not throw. */
+    async readHex() {
+        const field = await this.hexField();
+        return field ? field.getProperty('value') : '';
+    }
+    async requireHexField(method) {
+        const field = await this.hexField();
+        if (!field) {
+            throw new Error(`WrColorPickerHarness.${method}(): the HEX field is not rendered — the picker is showing the ` +
+                `${(await this.getTab()).toUpperCase()} tab. Call setTab('hex') first.`);
+        }
+        return field;
+    }
+    async channelValues(tab, labels) {
+        await this.requireTab(tab, 'read');
+        const inputs = await this.inputsByLabel();
+        return labels.map(label => {
+            const input = inputs.get(label);
+            if (!input)
+                throw new Error(`WrColorPickerHarness: the ${tab.toUpperCase()} tab has no "${label}" field.`);
+            return Number(input.value);
+        });
+    }
+    async writeChannel(tab, label, value) {
+        await this.requireTab(tab, 'write');
+        const inputs = await this.inputsByLabel();
+        const found = inputs.get(label);
+        if (!found) {
+            throw new Error(`WrColorPickerHarness: the ${tab.toUpperCase()} tab has no "${label}" field. ${label === 'A%' ? 'This picker was built with `[alpha]="false"`.' : ''}`);
+        }
+        // Set and dispatch once, rather than clearing and typing. Each of these inputs
+        // is bound to `[value]`, and the component commits on every `input` event — so
+        // typing 128 would land 1, then 12, then 128, and CLEARING would land 0 first,
+        // because `Number('')` is 0 rather than NaN. A spec that asked for one colour
+        // would get four, the first of them black.
+        await found.element.setInputValue(String(value));
+        await found.element.dispatchEvent('input');
+    }
+    async requireTab(tab, verb) {
+        const current = await this.getTab();
+        if (current !== tab) {
+            throw new Error(`WrColorPickerHarness: cannot ${verb} the ${tab.toUpperCase()} channels while the picker is showing ` +
+                `the ${current.toUpperCase()} tab — those fields are not rendered. Call setTab('${tab}') first.`);
+        }
+    }
+    /** Every numeric input of the current tab, keyed by the label printed under it. */
+    async inputsByLabel() {
+        const found = new Map();
+        for (const field of await this.locatorForAll(FieldHarness)()) {
+            const label = await field.getLabel();
+            found.set(label, { element: await field.getInput(), value: await field.getValue() });
+        }
+        return found;
+    }
+}
+
+/**
+ * @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 `[wrColorPickerTrigger]` — the element that opens a
+ * `<wr-color-picker>` in an overlay.
+ *
+ * The trigger stays in your fixture; the picker it opens does not. So this harness
+ * is loaded from the fixture loader like any element, and {@link getPicker} reaches
+ * ACROSS into the overlay container for you — scoped by the panel id the trigger
+ * publishes through `aria-controls`, never by `.wr-color-picker-overlay`, which
+ * answers with whichever trigger opened first.
+ *
+ * @example
+ * ```ts
+ * const trigger = await loader.getHarness(WrColorPickerTriggerHarness);
+ * const picker = await trigger.open();
+ *
+ * await picker.setHex('#3969e2');
+ * await trigger.sendEscape();
+ * expect(await trigger.isOpen()).toBe(false);
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrColorPickerTriggerHarness extends ComponentHarness {
+    static hostSelector = '[wrColorPickerTrigger]';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrColorPickerTriggerHarness, options)
+            .addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text))
+            .addOption('open', options.open, async (harness, open) => (await harness.isOpen()) === open);
+    }
+    /** The trigger's own text, trimmed. */
+    async getText() {
+        return (await this.host()).text();
+    }
+    /** Whether the picker is showing, from the trigger's `aria-expanded`. */
+    async isOpen() {
+        return (await (await this.host()).getAttribute('aria-expanded')) === 'true';
+    }
+    /**
+     * Whether the trigger refuses to open.
+     *
+     * From `aria-disabled`, which the directive writes for its own `disabled` input.
+     * The host is usually a `<button>`, but the directive does not touch its `disabled`
+     * PROPERTY — a consumer who binds that as well turns the element off at the DOM
+     * level, which is a stronger thing and reads here too.
+     */
+    async isDisabled() {
+        const host = await this.host();
+        return (await host.getAttribute('aria-disabled')) === 'true' || (await host.getProperty('disabled'));
+    }
+    /**
+     * The picker this trigger opened, or `null` while it is closed.
+     *
+     * Scoped by the id in `aria-controls`, so two triggers open at once — which
+     * nothing in the component prevents, since only an outside click closes one —
+     * answer with their own panels rather than with whichever came first.
+     */
+    async getPicker() {
+        const id = await (await this.host()).getAttribute('aria-controls');
+        if (!id)
+            return null;
+        return this.documentRootLocatorFactory().locatorForOptional(WrColorPickerHarness.with({ ancestor: `#${id}` }))();
+    }
+    /**
+     * Open the picker and hand it back. An already-open trigger is left alone.
+     *
+     * Throws on a disabled trigger rather than answering `null` three lines later:
+     * `toggle()` returns early while `disabled` is set, so the click lands and nothing
+     * happens at all.
+     */
+    async open() {
+        if (!(await this.isOpen())) {
+            if (await this.isDisabled()) {
+                throw new Error(`WrColorPickerTriggerHarness.open(): "${await this.getText()}" is disabled — the directive turns its ` +
+                    'own toggle away, so the click would land and change nothing.');
+            }
+            await (await this.host()).click();
+        }
+        const picker = await this.getPicker();
+        if (!picker) {
+            throw new Error('WrColorPickerTriggerHarness.open(): the trigger reports itself open but published no panel to find. ' +
+                'That is a broken `aria-controls` pairing, not a timing problem.');
+        }
+        return picker;
+    }
+    /** Close the picker. An already-closed trigger is left alone. */
+    async close() {
+        if (!(await this.isOpen()))
+            return;
+        await (await this.host()).click();
+    }
+    /** Click the trigger once, whichever way that takes it. */
+    async toggle() {
+        await (await this.host()).click();
+    }
+    /**
+     * Press Escape.
+     *
+     * Sent to the TRIGGER, and it still reaches the picker: the overlay listens through
+     * the CDK's keyboard dispatcher, which keeps one document listener and routes to
+     * the top-most overlay — so this does not depend on where focus happens to be.
+     */
+    async sendEscape() {
+        await (await this.host()).sendKeys(TestKey.ESCAPE);
+    }
+    /** The role the trigger claims to open — `dialog`. */
+    async getHasPopup() {
+        return (await this.host()).getAttribute('aria-haspopup');
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrColorPickerHarness, WrColorPickerTriggerHarness };
+//# sourceMappingURL=ngwr-color-picker-testing.mjs.map

package/fesm2022/ngwr-color-picker-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-color-picker-testing.mjs","sources":["../../../projects/lib/color-picker/testing/wr-color-picker-harness.ts","../../../projects/lib/color-picker/testing/wr-color-picker-trigger-harness.ts","../../../projects/lib/color-picker/testing/ngwr-color-picker-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, type TestElement } from '@angular/cdk/testing';\n\nimport { WrSegmentedHarness } from 'ngwr/segmented/testing';\n\nimport type { WrColorPickerHarnessFilters, WrColorPickerTab, WrColorPickerThumbs } from './interfaces';\n\n/**\n * One labelled numeric field — internal. A `TestElement` cannot be queried into, so\n * pairing an input with the label printed under it means a harness anchored on the\n * `<label>` that holds both.\n */\nclass FieldHarness extends ComponentHarness {\n  static hostSelector = '.wr-color-picker__field';\n\n  async getLabel(): Promise<string> {\n    return (await this.locatorFor('.wr-color-picker__field-label')()).text();\n  }\n\n  async getInput(): Promise<TestElement> {\n    return this.locatorFor('input')();\n  }\n\n  async getValue(): Promise<string> {\n    return (await this.getInput()).getProperty<string>('value');\n  }\n}\n\n/** An inline `left` / `top` percentage as a number. */\nasync function percent(thumb: TestElement, side: 'left' | 'top'): Promise<number> {\n  return Number.parseFloat(await thumb.getCssValue(side));\n}\n\n/**\n * Test harness for `<wr-color-picker>` — the inline picker, and the one the\n * `[wrColorPickerTrigger]` directive mounts in an overlay.\n *\n * **What this harness will not do: drag.** The SV canvas and the hue / alpha\n * sliders are pointer surfaces that read `getBoundingClientRect()` and divide by\n * its width. A unit test has no layout, so every box is 0×0 and the division is\n * `NaN` — a `setHue()` built on a synthetic pointer event would report success and\n * write nothing, or write garbage. The numeric fields reach the same state and are\n * also the only keyboard path the component has, so they are the whole write API\n * here. {@link getThumbs} reads where the thumbs ARE, from the percentages the\n * component writes inline, which is how a spec checks a surface followed a value.\n *\n * **And it will not read the preview swatch.** The preview paints the current\n * colour as a CSS background, and jsdom normalises that to `rgb(…)` — dropping the\n * alpha channel entirely, so `#ff880080` and `#ff8800ff` come back identical. A\n * `getColor()` reading it would answer one thing in a unit test and another in a\n * browser. {@link getHex} is the colour: the field holds the canonical 8-digit\n * string, alpha included, whatever `format` writes into `value`.\n *\n * @example\n * ```ts\n * const picker = await loader.getHarness(WrColorPickerHarness);\n *\n * await picker.setHex('#3969e2');\n * expect(await picker.getHex()).toBe('#3969e2ff');\n *\n * await picker.setTab('rgb');\n * expect(await picker.getRgb()).toEqual({ r: 57, g: 105, b: 226 });\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrColorPickerHarness extends ComponentHarness {\n  static hostSelector = 'wr-color-picker';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrColorPickerHarnessFilters = {}): HarnessPredicate<WrColorPickerHarness> {\n    return new HarnessPredicate(WrColorPickerHarness, options)\n      .addOption('color', options.color, (harness, color) => HarnessPredicate.stringMatches(harness.readHex(), color))\n      .addOption('tab', options.tab, async (harness, tab) => (await harness.getTab()) === tab)\n      .addOption('disabled', options.disabled, async (harness, disabled) => (await harness.isDisabled()) === disabled);\n  }\n\n  private readonly hexField = this.locatorForOptional('.wr-color-picker__inputs--hex input');\n  private readonly tabs = this.locatorFor(WrSegmentedHarness.with({ selector: '.wr-color-picker__tabs' }));\n\n  /**\n   * The tab switcher, as a {@link WrSegmentedHarness}.\n   *\n   * Handed back rather than re-queried: the switcher IS a `<wr-segmented>`, which\n   * already knows that the roving tab stop is not the selection and how the sliding\n   * thumb reports itself. Re-reading its buttons here would be a second, worse copy.\n   */\n  async getTabs(): Promise<WrSegmentedHarness> {\n    return this.tabs();\n  }\n\n  /** Which set of numeric fields is showing. */\n  async getTab(): Promise<WrColorPickerTab> {\n    const label = await (await this.tabs()).getSelectedLabel();\n    return (label ?? 'HEX').toLowerCase() as WrColorPickerTab;\n  }\n\n  /** Show a different set of numeric fields. An already-active tab is left alone. */\n  async setTab(tab: WrColorPickerTab): Promise<void> {\n    if ((await this.getTab()) === tab) return;\n    await (await this.tabs()).select({ label: tab.toUpperCase() });\n  }\n\n  /**\n   * The canonical hex string, as the HEX field shows it — 8 digits while `alpha` is\n   * on, 6 while it is off.\n   *\n   * This is the picker's colour, and deliberately not the same thing as its `value`:\n   * `format` decides whether `value` is written as hex, `rgb()` or `hsl()`, while the\n   * field always shows hex. A spec that cares about the emitted string should read\n   * the bound signal; one that cares about the COLOUR should read this.\n   *\n   * Throws off the HEX tab, where the field does not exist — see {@link setTab}.\n   */\n  async getHex(): Promise<string> {\n    const field = await this.hexField();\n    if (!field) {\n      throw new Error(\n        `WrColorPickerHarness.getHex(): the HEX field is not rendered — the picker is showing the ` +\n          `${(await this.getTab()).toUpperCase()} tab. Call setTab('hex') first.`\n      );\n    }\n    return field.getProperty<string>('value');\n  }\n\n  /**\n   * Type a colour into the HEX field.\n   *\n   * Typed rather than assigned, because that is the path the component is built\n   * around: it re-parses on every keystroke and applies the first spelling that\n   * parses, so a partial `#ff8` commits a colour on its way to `#ff8800`. An\n   * unparseable string leaves the committed colour ALONE and lives in the field\n   * until {@link blurHex} snaps it back — assert that rather than expecting a throw.\n   */\n  async setHex(value: string): Promise<void> {\n    const field = await this.requireHexField('setHex');\n    await field.clear();\n    await field.sendKeys(value);\n  }\n\n  /**\n   * Blur the HEX field — re-syncing it with the committed colour and emitting\n   * `touch`.\n   *\n   * The re-sync is the visible half: a field left holding text that never parsed\n   * goes back to the canonical hex here, and nowhere else.\n   */\n  async blurHex(): Promise<void> {\n    await (await this.requireHexField('blurHex')).blur();\n  }\n\n  /** Whether the HEX field currently holds focus. */\n  async isHexFocused(): Promise<boolean> {\n    return (await this.requireHexField('isHexFocused')).isFocused();\n  }\n\n  /** The three RGB channels as the RGB tab shows them. Throws off that tab. */\n  async getRgb(): Promise<{ r: number; g: number; b: number }> {\n    const [r, g, b] = await this.channelValues('rgb', ['R', 'G', 'B']);\n    return { r, g, b };\n  }\n\n  /** Write one RGB channel, 0–255. Out-of-range numbers are clamped by the component. */\n  async setRgbChannel(channel: 'r' | 'g' | 'b', value: number): Promise<void> {\n    await this.writeChannel('rgb', channel.toUpperCase(), value);\n  }\n\n  /**\n   * Hue, saturation and lightness as the HSL tab shows them — degrees and whole\n   * percents, already rounded for display. Throws off that tab.\n   */\n  async getHsl(): Promise<{ h: number; s: number; l: number }> {\n    const [h, s, l] = await this.channelValues('hsl', ['H', 'S%', 'L%']);\n    return { h, s, l };\n  }\n\n  /** Write one HSL channel — `h` in degrees, `s` / `l` in percent. */\n  async setHslChannel(channel: 'h' | 's' | 'l', value: number): Promise<void> {\n    await this.writeChannel('hsl', channel === 'h' ? 'H' : `${channel.toUpperCase()}%`, value);\n  }\n\n  /**\n   * Alpha as the whole percent the numeric tabs show, or `null` when the picker was\n   * built without alpha.\n   *\n   * Only the RGB and HSL tabs carry the field — the HEX tab spells alpha into the\n   * hex string instead — so this throws on the HEX tab rather than answering `null`,\n   * which would read as \"this picker has no alpha\".\n   */\n  async getAlphaPercent(): Promise<number | null> {\n    const tab = await this.getTab();\n    if (tab === 'hex') {\n      throw new Error(\n        'WrColorPickerHarness.getAlphaPercent(): the HEX tab has no alpha field — the alpha is the last two ' +\n          \"digits of getHex(). Call setTab('rgb') or setTab('hsl') to read it as a percent.\"\n      );\n    }\n    if (!(await this.hasAlpha())) return null;\n    const [alpha] = await this.channelValues(tab, ['A%']);\n    return alpha;\n  }\n\n  /** Write alpha as a whole percent, 0–100. */\n  async setAlphaPercent(value: number): Promise<void> {\n    const tab = await this.getTab();\n    if (tab === 'hex') {\n      throw new Error(\n        \"WrColorPickerHarness.setAlphaPercent(): the HEX tab has no alpha field. Call setTab('rgb') first, \" +\n          'or write the two alpha digits through setHex().'\n      );\n    }\n    await this.writeChannel(tab, 'A%', value);\n  }\n\n  /**\n   * Whether the picker offers alpha at all.\n   *\n   * From the host modifier, which is the one answer that holds on every tab: the\n   * alpha SLIDER is always rendered when it is on, while the `A%` field only exists\n   * on the two numeric tabs.\n   */\n  async hasAlpha(): Promise<boolean> {\n    return (await this.host()).hasClass('wr-color-picker--alpha');\n  }\n\n  /**\n   * Whether the picker refuses interaction.\n   *\n   * Read from the modifier the host paints rather than from a field's `disabled`\n   * property, because the fields come and go with the tab while the state does not —\n   * and the drag surfaces, which have no `disabled` of their own, are gated by the\n   * same signal.\n   */\n  async isDisabled(): Promise<boolean> {\n    return (await this.host()).hasClass('wr-color-picker--disabled');\n  }\n\n  /** The preset colours offered under the fields, as the strings the consumer passed. */\n  async getSwatches(): Promise<string[]> {\n    const swatches = await this.locatorForAll('.wr-color-picker__swatch')();\n    return Promise.all(swatches.map(async swatch => (await swatch.getAttribute('aria-label')) ?? ''));\n  }\n\n  /**\n   * Click a preset.\n   *\n   * Matched on the string the consumer passed, which is what the button publishes as\n   * its accessible name — the rendered background is a CSS colour and would come back\n   * normalised and alpha-stripped. Throws when nothing matches, naming what is offered.\n   */\n  async pickSwatch(color: string): Promise<void> {\n    const swatches = await this.locatorForAll('.wr-color-picker__swatch')();\n    for (const swatch of swatches) {\n      if ((await swatch.getAttribute('aria-label')) === color) {\n        await swatch.click();\n        return;\n      }\n    }\n    throw new Error(\n      `WrColorPickerHarness.pickSwatch(): no swatch for \"${color}\". The picker offers: ` +\n        `${(await this.getSwatches()).join(', ')}.`\n    );\n  }\n\n  /**\n   * Where the three thumbs sit, in percent along their surfaces.\n   *\n   * The component writes these as inline `left` / `top` percentages, so they are\n   * readable with no layout at all — which makes them the only evidence a spec has\n   * that the surfaces followed a colour set through the fields. A measured position\n   * would be zero for all three.\n   */\n  async getThumbs(): Promise<WrColorPickerThumbs> {\n    const sv = await this.locatorFor('.wr-color-picker__sv .wr-color-picker__thumb')();\n    const hue = await this.locatorFor('.wr-color-picker__slider--hue .wr-color-picker__thumb')();\n    const alpha = await this.locatorForOptional('.wr-color-picker__slider--alpha .wr-color-picker__thumb')();\n\n    return {\n      sv: { x: await percent(sv, 'left'), y: await percent(sv, 'top') },\n      hue: await percent(hue, 'left'),\n      alpha: alpha ? await percent(alpha, 'left') : null,\n    };\n  }\n\n  /** The HEX field's value without the tab check — for filters, which must not throw. */\n  private async readHex(): Promise<string> {\n    const field = await this.hexField();\n    return field ? field.getProperty<string>('value') : '';\n  }\n\n  private async requireHexField(method: string): Promise<TestElement> {\n    const field = await this.hexField();\n    if (!field) {\n      throw new Error(\n        `WrColorPickerHarness.${method}(): the HEX field is not rendered — the picker is showing the ` +\n          `${(await this.getTab()).toUpperCase()} tab. Call setTab('hex') first.`\n      );\n    }\n    return field;\n  }\n\n  private async channelValues(tab: WrColorPickerTab, labels: readonly string[]): Promise<number[]> {\n    await this.requireTab(tab, 'read');\n    const inputs = await this.inputsByLabel();\n\n    return labels.map(label => {\n      const input = inputs.get(label);\n      if (!input) throw new Error(`WrColorPickerHarness: the ${tab.toUpperCase()} tab has no \"${label}\" field.`);\n      return Number(input.value);\n    });\n  }\n\n  private async writeChannel(tab: WrColorPickerTab, label: string, value: number): Promise<void> {\n    await this.requireTab(tab, 'write');\n    const inputs = await this.inputsByLabel();\n    const found = inputs.get(label);\n    if (!found) {\n      throw new Error(\n        `WrColorPickerHarness: the ${tab.toUpperCase()} tab has no \"${label}\" field. ${\n          label === 'A%' ? 'This picker was built with `[alpha]=\"false\"`.' : ''\n        }`\n      );\n    }\n\n    // Set and dispatch once, rather than clearing and typing. Each of these inputs\n    // is bound to `[value]`, and the component commits on every `input` event — so\n    // typing 128 would land 1, then 12, then 128, and CLEARING would land 0 first,\n    // because `Number('')` is 0 rather than NaN. A spec that asked for one colour\n    // would get four, the first of them black.\n    await found.element.setInputValue(String(value));\n    await found.element.dispatchEvent('input');\n  }\n\n  private async requireTab(tab: WrColorPickerTab, verb: string): Promise<void> {\n    const current = await this.getTab();\n    if (current !== tab) {\n      throw new Error(\n        `WrColorPickerHarness: cannot ${verb} the ${tab.toUpperCase()} channels while the picker is showing ` +\n          `the ${current.toUpperCase()} tab — those fields are not rendered. Call setTab('${tab}') first.`\n      );\n    }\n  }\n\n  /** Every numeric input of the current tab, keyed by the label printed under it. */\n  private async inputsByLabel(): Promise<Map<string, { element: TestElement; value: string }>> {\n    const found = new Map<string, { element: TestElement; value: string }>();\n\n    for (const field of await this.locatorForAll(FieldHarness)()) {\n      const label = await field.getLabel();\n      found.set(label, { element: await field.getInput(), value: await field.getValue() });\n    }\n    return found;\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 { WrColorPickerTriggerHarnessFilters } from './interfaces';\nimport { WrColorPickerHarness } from './wr-color-picker-harness';\n\n/**\n * Test harness for `[wrColorPickerTrigger]` — the element that opens a\n * `<wr-color-picker>` in an overlay.\n *\n * The trigger stays in your fixture; the picker it opens does not. So this harness\n * is loaded from the fixture loader like any element, and {@link getPicker} reaches\n * ACROSS into the overlay container for you — scoped by the panel id the trigger\n * publishes through `aria-controls`, never by `.wr-color-picker-overlay`, which\n * answers with whichever trigger opened first.\n *\n * @example\n * ```ts\n * const trigger = await loader.getHarness(WrColorPickerTriggerHarness);\n * const picker = await trigger.open();\n *\n * await picker.setHex('#3969e2');\n * await trigger.sendEscape();\n * expect(await trigger.isOpen()).toBe(false);\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrColorPickerTriggerHarness extends ComponentHarness {\n  static hostSelector = '[wrColorPickerTrigger]';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrColorPickerTriggerHarnessFilters = {}): HarnessPredicate<WrColorPickerTriggerHarness> {\n    return new HarnessPredicate(WrColorPickerTriggerHarness, options)\n      .addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text))\n      .addOption('open', options.open, async (harness, open) => (await harness.isOpen()) === open);\n  }\n\n  /** The trigger's own text, trimmed. */\n  async getText(): Promise<string> {\n    return (await this.host()).text();\n  }\n\n  /** Whether the picker is showing, from the trigger's `aria-expanded`. */\n  async isOpen(): Promise<boolean> {\n    return (await (await this.host()).getAttribute('aria-expanded')) === 'true';\n  }\n\n  /**\n   * Whether the trigger refuses to open.\n   *\n   * From `aria-disabled`, which the directive writes for its own `disabled` input.\n   * The host is usually a `<button>`, but the directive does not touch its `disabled`\n   * PROPERTY — a consumer who binds that as well turns the element off at the DOM\n   * level, which is a stronger thing and reads here too.\n   */\n  async isDisabled(): Promise<boolean> {\n    const host = await this.host();\n    return (await host.getAttribute('aria-disabled')) === 'true' || (await host.getProperty<boolean>('disabled'));\n  }\n\n  /**\n   * The picker this trigger opened, or `null` while it is closed.\n   *\n   * Scoped by the id in `aria-controls`, so two triggers open at once — which\n   * nothing in the component prevents, since only an outside click closes one —\n   * answer with their own panels rather than with whichever came first.\n   */\n  async getPicker(): Promise<WrColorPickerHarness | null> {\n    const id = await (await this.host()).getAttribute('aria-controls');\n    if (!id) return null;\n\n    return this.documentRootLocatorFactory().locatorForOptional(WrColorPickerHarness.with({ ancestor: `#${id}` }))();\n  }\n\n  /**\n   * Open the picker and hand it back. An already-open trigger is left alone.\n   *\n   * Throws on a disabled trigger rather than answering `null` three lines later:\n   * `toggle()` returns early while `disabled` is set, so the click lands and nothing\n   * happens at all.\n   */\n  async open(): Promise<WrColorPickerHarness> {\n    if (!(await this.isOpen())) {\n      if (await this.isDisabled()) {\n        throw new Error(\n          `WrColorPickerTriggerHarness.open(): \"${await this.getText()}\" is disabled — the directive turns its ` +\n            'own toggle away, so the click would land and change nothing.'\n        );\n      }\n      await (await this.host()).click();\n    }\n\n    const picker = await this.getPicker();\n    if (!picker) {\n      throw new Error(\n        'WrColorPickerTriggerHarness.open(): the trigger reports itself open but published no panel to find. ' +\n          'That is a broken `aria-controls` pairing, not a timing problem.'\n      );\n    }\n    return picker;\n  }\n\n  /** Close the picker. An already-closed trigger is left alone. */\n  async close(): Promise<void> {\n    if (!(await this.isOpen())) return;\n    await (await this.host()).click();\n  }\n\n  /** Click the trigger once, whichever way that takes it. */\n  async toggle(): Promise<void> {\n    await (await this.host()).click();\n  }\n\n  /**\n   * Press Escape.\n   *\n   * Sent to the TRIGGER, and it still reaches the picker: the overlay listens through\n   * the CDK's keyboard dispatcher, which keeps one document listener and routes to\n   * the top-most overlay — so this does not depend on where focus happens to be.\n   */\n  async sendEscape(): Promise<void> {\n    await (await this.host()).sendKeys(TestKey.ESCAPE);\n  }\n\n  /** The role the trigger claims to open — `dialog`. */\n  async getHasPopup(): Promise<string | null> {\n    return (await this.host()).getAttribute('aria-haspopup');\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-color-picker.mjs

@@ -449,7 +449,17 @@ class WrColorPicker {
         return parts.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    /** Last string we pushed into `value`; lets the sync effect ignore our own writes. */
+    /**
+     * The one write we just made, held only until the sync effect has seen it.
+     *
+     * It exists so a drag keeps its continuous HSV values instead of being
+     * re-quantised through its own hex round-trip. It used to be set and never
+     * cleared, which turned "ignore this write" into "ignore this STRING,
+     * forever": after the picker emitted `#ff0000` once, an app writing
+     * `#ff0000` back — a reset button, a form patch, an undo — was silently
+     * dropped for the rest of the component's life, and the surface kept
+     * whatever colour the user had dragged to.
+     */
     lastEmitted = null;
     constructor() {
         // External writes (via `[formField]` / `[(value)]`) flow the incoming hex
@@ -457,8 +467,12 @@ class WrColorPicker {
         // `lastEmitted` so dragging keeps its continuous (unquantised) values.
         effect(() => {
             const value = this.value();
-            if (value === this.lastEmitted)
+            if (value === this.lastEmitted) {
+                // Ours, and now observed. Release the guard so the NEXT write of the
+                // same string — which can only come from outside — is honoured.
+                this.lastEmitted = null;
                 return;
+            }
             const rgb = parseColor(value) ?? { r: 0, g: 0, b: 0, a: 1 };
             const hsv = rgbToHsv(rgb);
             this.h.set(hsv.h);
@@ -606,6 +620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * 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
  */
+let triggerUid = 0;
 /**
  * Opens a `<wr-color-picker>` in an overlay anchored to the host element.
  *
@@ -655,6 +670,8 @@ class WrColorPickerTrigger {
     isOpen = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
     overlayRef = null;
+    /** @internal Public so the host binding can read it. */
+    panelId = `wr-color-picker-panel-${++triggerUid}`;
     constructor() {
         this.destroyRef.onDestroy(() => this.dispose());
     }
@@ -688,6 +705,7 @@ class WrColorPickerTrigger {
             scrollStrategy: this.scrollStrategies.reposition(),
             panelClass: 'wr-color-picker-overlay',
         });
+        this.overlayRef.overlayElement.id = this.panelId;
         const portal = new ComponentPortal(WrColorPicker, this.vcr);
         const ref = this.overlayRef.attach(portal);
         ref.setInput('alpha', this.alpha());
@@ -735,7 +753,7 @@ class WrColorPickerTrigger {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrColorPickerTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: WrColorPickerTrigger, isStandalone: true, selector: "[wrColorPickerTrigger]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, swatches: { classPropertyName: "swatches", publicName: "swatches", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "opened", closed: "closed" }, host: { listeners: { "click": "toggle()" }, properties: { "attr.aria-haspopup": "\"dialog\"", "attr.aria-expanded": "isOpen()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: WrColorPickerTrigger, isStandalone: true, selector: "[wrColorPickerTrigger]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, swatches: { classPropertyName: "swatches", publicName: "swatches", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "opened", closed: "closed" }, host: { listeners: { "click": "toggle()" }, properties: { "attr.aria-haspopup": "\"dialog\"", "attr.aria-expanded": "isOpen()", "attr.aria-controls": "isOpen() ? panelId : null", "attr.aria-disabled": "disabled() ? true : null" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrColorPickerTrigger, decorators: [{
             type: Directive,
@@ -747,6 +765,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         // button gave no hint that it opens anything, and never said it was open.
                         '[attr.aria-haspopup]': '"dialog"',
                         '[attr.aria-expanded]': 'isOpen()',
+                        // Which panel, and only while there is one — the same pairing `[wrPopconfirm]`
+                        // publishes. Without it nothing on the page connects the trigger to the picker
+                        // it opened, so a second trigger's panel is indistinguishable from this one's.
+                        '[attr.aria-controls]': 'isOpen() ? panelId : null',
+                        // The directive's own `disabled` never reached the DOM: it gates `toggle()` and
+                        // is forwarded to the inner picker, so the button looked live to a screen
+                        // reader and did nothing when pressed.
+                        '[attr.aria-disabled]': 'disabled() ? true : null',
                     },
                 }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], alpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "alpha", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], swatches: [{ type: i0.Input, args: [{ isSignal: true, alias: "swatches", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });