ngwr 14.10.0 → 14.11.0

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

@@ -1,468 +1,230 @@
-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');
-    }
-}
+import { ComponentHarness, HarnessPredicate, TestKey } from "@angular/cdk/testing";
+import { WrSegmentedHarness } from "ngwr/segmented/testing";
 /**
- * The percentage a thumb carries, out of its inline `style`.
- *
- * Three properties and not two, because the surfaces do not agree on the inline
- * axis and that disagreement is the contract: the SV canvas is a picture and
- * keeps a physical `left`, while the hue and alpha tracks are one-value sliders
- * that mirror under `dir="rtl"` and so are placed with `inset-inline-start`.
- * Reading `left` off a slider thumb therefore finds nothing, which is exactly
- * what should happen if one of them ever regresses to the physical property.
- */
+* @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
+*/
+var FieldHarness = class 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");
+	}
+};
 const THUMB_POS = {
-    left: /(?:^|;)\s*left\s*:\s*([\d.]+)%/,
-    top: /(?:^|;)\s*top\s*:\s*([\d.]+)%/,
-    'inset-inline-start': /(?:^|;)\s*inset-inline-start\s*:\s*([\d.]+)%/,
+	left: /(?:^|;)\s*left\s*:\s*([\d.]+)%/,
+	top: /(?:^|;)\s*top\s*:\s*([\d.]+)%/,
+	"inset-inline-start": /(?:^|;)\s*inset-inline-start\s*:\s*([\d.]+)%/
 };
-/** One thumb's declared offset. See {@link WrColorPickerHarness.getThumbs} for why this is not `getCssValue()`. */
 async function percent(thumb, side, surface) {
-    const style = await thumb.getAttribute('style');
-    const match = THUMB_POS[side].exec(style ?? '');
-    if (!match) {
-        throw new Error(`WrColorPickerHarness.getThumbs(): the ${surface} thumb carries no inline ${side} percentage ` +
-            `(style: "${style ?? ''}"). The component writes one on every render, so its absence is the bug — ` +
-            `and the stylesheet declares \`${side}: 0\`, so reporting 0 would read as a thumb parked at the origin.`);
-    }
-    return Number.parseFloat(match[1]);
-}
-/**
- * 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 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.
-     *
-     * The number is always "along the surface from its own start", so it is direction
-     * free: the SV canvas reports a physical `left` because it does not mirror, and
-     * the two tracks report `inset-inline-start` because they do. An RTL spec reads
-     * the same value as an LTR one, which is the point — what mirrors is where that
-     * fraction lands on screen, not the fraction.
-     *
-     * Read off the `style` ATTRIBUTE rather than through `getCssValue()`, and the
-     * difference is not cosmetic: `getCssValue()` is `getComputedStyle()`, and `left` /
-     * `top` on a positioned element resolve to the USED value — so the declared `40%`
-     * comes straight back in jsdom and arrives as pixels in a real browser, and the same
-     * harness answered 40 here and 96 under a browser runner with nothing to say which
-     * one you got. The stylesheet's own `top: 0; left: 0` is a second way that read lies,
-     * turning a thumb whose binding is gone into one parked at the origin.
-     */
-    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', 'SV'), y: await percent(sv, 'top', 'SV') },
-            hue: await percent(hue, 'inset-inline-start', 'hue'),
-            alpha: alpha ? await percent(alpha, 'inset-inline-start', 'alpha') : 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');
-    }
+	const style = await thumb.getAttribute("style");
+	const match = THUMB_POS[side].exec(style ?? "");
+	if (!match) throw new Error(`WrColorPickerHarness.getThumbs(): the ${surface} thumb carries no inline ${side} percentage (style: "${style ?? ""}"). The component writes one on every render, so its absence is the bug — and the stylesheet declares \`${side}: 0\`, so reporting 0 would read as a thumb parked at the origin.`);
+	return Number.parseFloat(match[1]);
 }
-
+var WrColorPickerHarness = class WrColorPickerHarness extends ComponentHarness {
+	static hostSelector = "wr-color-picker";
+	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" }));
+	async getTabs() {
+		return this.tabs();
+	}
+	async getTab() {
+		return (await (await this.tabs()).getSelectedLabel() ?? "HEX").toLowerCase();
+	}
+	async setTab(tab) {
+		if (await this.getTab() === tab) return;
+		await (await this.tabs()).select({ label: tab.toUpperCase() });
+	}
+	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");
+	}
+	async setHex(value) {
+		const field = await this.requireHexField("setHex");
+		await field.clear();
+		await field.sendKeys(value);
+	}
+	async blurHex() {
+		await (await this.requireHexField("blurHex")).blur();
+	}
+	async isHexFocused() {
+		return (await this.requireHexField("isHexFocused")).isFocused();
+	}
+	async getRgb() {
+		const [r, g, b] = await this.channelValues("rgb", [
+			"R",
+			"G",
+			"B"
+		]);
+		return {
+			r,
+			g,
+			b
+		};
+	}
+	async setRgbChannel(channel, value) {
+		await this.writeChannel("rgb", channel.toUpperCase(), value);
+	}
+	async getHsl() {
+		const [h, s, l] = await this.channelValues("hsl", [
+			"H",
+			"S%",
+			"L%"
+		]);
+		return {
+			h,
+			s,
+			l
+		};
+	}
+	async setHslChannel(channel, value) {
+		await this.writeChannel("hsl", channel === "h" ? "H" : `${channel.toUpperCase()}%`, value);
+	}
+	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;
+	}
+	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);
+	}
+	async hasAlpha() {
+		return (await this.host()).hasClass("wr-color-picker--alpha");
+	}
+	async isDisabled() {
+		return (await this.host()).hasClass("wr-color-picker--disabled");
+	}
+	async getSwatches() {
+		const swatches = await this.locatorForAll(".wr-color-picker__swatch")();
+		return Promise.all(swatches.map(async (swatch) => await swatch.getAttribute("aria-label") ?? ""));
+	}
+	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(", ")}.`);
+	}
+	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", "SV"),
+				y: await percent(sv, "top", "SV")
+			},
+			hue: await percent(hue, "inset-inline-start", "hue"),
+			alpha: alpha ? await percent(alpha, "inset-inline-start", "alpha") : null
+		};
+	}
+	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 found = (await this.inputsByLabel()).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\"`." : ""}`);
+		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.`);
+	}
+	async inputsByLabel() {
+		const found = /* @__PURE__ */ 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;
+	}
+};
 /**
- * Generated bundle index. Do not edit.
- */
-
+* @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
+*/
+var WrColorPickerTriggerHarness = class WrColorPickerTriggerHarness extends ComponentHarness {
+	static hostSelector = "[wrColorPickerTrigger]";
+	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);
+	}
+	async getText() {
+		return (await this.host()).text();
+	}
+	async isOpen() {
+		return await (await this.host()).getAttribute("aria-expanded") === "true";
+	}
+	async isDisabled() {
+		const host = await this.host();
+		return await host.getAttribute("aria-disabled") === "true" || await host.getProperty("disabled");
+	}
+	async getPicker() {
+		const id = await (await this.host()).getAttribute("aria-controls");
+		if (!id) return null;
+		return this.documentRootLocatorFactory().locatorForOptional(WrColorPickerHarness.with({ ancestor: `#${id}` }))();
+	}
+	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;
+	}
+	async close() {
+		if (!await this.isOpen()) return;
+		await (await this.host()).click();
+	}
+	async toggle() {
+		await (await this.host()).click();
+	}
+	async sendEscape() {
+		await (await this.host()).sendKeys(TestKey.ESCAPE);
+	}
+	async getHasPopup() {
+		return (await this.host()).getAttribute("aria-haspopup");
+	}
+};
 export { WrColorPickerHarness, WrColorPickerTriggerHarness };
-//# sourceMappingURL=ngwr-color-picker-testing.mjs.map
+
+//# sourceMappingURL=ngwr-color-picker-testing.mjs.map