ngwr 6.1.1 → 7.0.0

package/fesm2022/ngwr-color-picker.mjs

@@ -0,0 +1,646 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { DecimalPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, signal, computed, forwardRef, ViewEncapsulation, Component, model, output, inject, ElementRef, ViewContainerRef, DestroyRef, Directive } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { WrSegmented } from 'ngwr/segmented';
+import { noop, clamp } from 'ngwr/utils';
+import { ScrollStrategyOptions } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { WR_OVERLAY } from 'ngwr/overlay';
+
+/**
+ * @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
+ */
+/**
+ * Convert sRGB to HSV. Preserves alpha.
+ */
+function rgbToHsv(rgb) {
+    const r = rgb.r / 255;
+    const g = rgb.g / 255;
+    const b = rgb.b / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const d = max - min;
+    let h = 0;
+    if (d !== 0) {
+        if (max === r)
+            h = ((g - b) / d) % 6;
+        else if (max === g)
+            h = (b - r) / d + 2;
+        else
+            h = (r - g) / d + 4;
+        h *= 60;
+        if (h < 0)
+            h += 360;
+    }
+    const s = max === 0 ? 0 : d / max;
+    const v = max;
+    return { h, s, v, a: rgb.a };
+}
+
+/**
+ * @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
+ */
+/**
+ * Convert HSV to sRGB. Preserves alpha. Returns integer channels in `[0, 255]`.
+ */
+function hsvToRgb(hsv) {
+    const { h, s, v } = hsv;
+    const c = v * s;
+    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+    const m = v - c;
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    if (h < 60) {
+        r = c;
+        g = x;
+    }
+    else if (h < 120) {
+        r = x;
+        g = c;
+    }
+    else if (h < 180) {
+        g = c;
+        b = x;
+    }
+    else if (h < 240) {
+        g = x;
+        b = c;
+    }
+    else if (h < 300) {
+        r = x;
+        b = c;
+    }
+    else {
+        r = c;
+        b = x;
+    }
+    return {
+        r: Math.round((r + m) * 255),
+        g: Math.round((g + m) * 255),
+        b: Math.round((b + m) * 255),
+        a: hsv.a,
+    };
+}
+
+/**
+ * @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
+ */
+/**
+ * Convert sRGB to HSL. Preserves alpha.
+ */
+function rgbToHsl(rgb) {
+    const r = rgb.r / 255;
+    const g = rgb.g / 255;
+    const b = rgb.b / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const d = max - min;
+    const l = (max + min) / 2;
+    let h = 0;
+    let s = 0;
+    if (d !== 0) {
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        if (max === r)
+            h = (g - b) / d + (g < b ? 6 : 0);
+        else if (max === g)
+            h = (b - r) / d + 2;
+        else
+            h = (r - g) / d + 4;
+        h *= 60;
+    }
+    return { h, s, l, a: rgb.a };
+}
+
+/**
+ * @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
+ */
+function hueToChannel(p, q, t) {
+    let x = t;
+    if (x < 0)
+        x += 1;
+    if (x > 1)
+        x -= 1;
+    if (x < 1 / 6)
+        return p + (q - p) * 6 * x;
+    if (x < 1 / 2)
+        return q;
+    if (x < 2 / 3)
+        return p + (q - p) * (2 / 3 - x) * 6;
+    return p;
+}
+/**
+ * Convert HSL to sRGB. Preserves alpha. Returns integer channels in `[0, 255]`.
+ */
+function hslToRgb(hsl) {
+    const h = hsl.h / 360;
+    const { s, l } = hsl;
+    let r;
+    let g;
+    let b;
+    if (s === 0) {
+        r = l;
+        g = l;
+        b = l;
+    }
+    else {
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        r = hueToChannel(p, q, h + 1 / 3);
+        g = hueToChannel(p, q, h);
+        b = hueToChannel(p, q, h - 1 / 3);
+    }
+    return {
+        r: Math.round(r * 255),
+        g: Math.round(g * 255),
+        b: Math.round(b * 255),
+        a: hsl.a,
+    };
+}
+
+/**
+ * @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
+ */
+/**
+ * Parse a CSS hex colour into {@link WrRgb}. Accepts 3, 4, 6, or 8 digit
+ * forms with or without a leading `#`. Returns `null` for anything that
+ * isn't a valid hex string.
+ *
+ * @example
+ * ```ts
+ * parseHex('#f00');       // { r: 255, g: 0, b: 0, a: 1 }
+ * parseHex('3969e2');     // { r: 57,  g: 105, b: 226, a: 1 }
+ * parseHex('#3969e2ff');  // { r: 57,  g: 105, b: 226, a: 1 }
+ * parseHex('nope');       // null
+ * ```
+ */
+function parseHex(input) {
+    if (typeof input !== 'string')
+        return null;
+    let str = input.trim().replace(/^#/, '').toLowerCase();
+    // Expand shorthand: rgb → rrggbb, rgba → rrggbbaa
+    if (str.length === 3 || str.length === 4) {
+        str = str
+            .split('')
+            .map(c => c + c)
+            .join('');
+    }
+    if (str.length !== 6 && str.length !== 8)
+        return null;
+    if (!/^[0-9a-f]+$/.test(str))
+        return null;
+    const r = parseInt(str.slice(0, 2), 16);
+    const g = parseInt(str.slice(2, 4), 16);
+    const b = parseInt(str.slice(4, 6), 16);
+    const a = str.length === 8 ? parseInt(str.slice(6, 8), 16) / 255 : 1;
+    return { r, g, b, a };
+}
+
+/**
+ * @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
+ */
+function channelToHex(n) {
+    const clamped = Math.max(0, Math.min(255, Math.round(n)));
+    return clamped.toString(16).padStart(2, '0');
+}
+/**
+ * Format a {@link WrRgb} as a CSS hex string with a leading `#`. When
+ * `withAlpha` is `true` the result is 8 digits (`#rrggbbaa`); otherwise
+ * 6 digits.
+ *
+ * @example
+ * ```ts
+ * toHex({ r: 57, g: 105, b: 226, a: 1 });         // '#3969e2'
+ * toHex({ r: 57, g: 105, b: 226, a: 0.5 }, true); // '#3969e280'
+ * ```
+ */
+function toHex(rgb, withAlpha = false) {
+    const r = channelToHex(rgb.r);
+    const g = channelToHex(rgb.g);
+    const b = channelToHex(rgb.b);
+    if (withAlpha) {
+        const a = channelToHex(rgb.a * 255);
+        return `#${r}${g}${b}${a}`;
+    }
+    return `#${r}${g}${b}`;
+}
+
+/**
+ * @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
+ */
+/**
+ * Inline colour picker — HSV canvas, hue slider, optional alpha slider, HEX
+ * input. Implements `ControlValueAccessor`, so it binds with `[(ngModel)]`,
+ * `[formControl]`, or `formControlName`. Output is always a string in the
+ * format chosen via `[format]`.
+ *
+ * @example
+ * ```html
+ * <wr-color-picker [(ngModel)]="brandColor" />
+ * <wr-color-picker [(ngModel)]="brandColor" [alpha]="false" />
+ * ```
+ *
+ * @see https://ngwr.dev/components/color-picker
+ */
+class WrColorPicker {
+    /** Render the alpha slider and emit 8-digit hex / `rgba()`. @default true */
+    alpha = input(true, { ...(ngDevMode ? { debugName: "alpha" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Disable interaction. @default false */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Output format produced through the CVA. @default 'hex' */
+    format = input('hex', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    /** Preset hex colours rendered as a clickable row beneath the inputs. Empty = no row. @default [] */
+    swatches = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "swatches" }] : /* istanbul ignore next */ []));
+    // Source of truth: HSV + alpha
+    h = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "h" }] : /* istanbul ignore next */ []));
+    s = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "s" }] : /* istanbul ignore next */ []));
+    v = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "v" }] : /* istanbul ignore next */ []));
+    a = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "a" }] : /* istanbul ignore next */ []));
+    disabledFromCva = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledFromCva" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => this.disabled() || this.disabledFromCva(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    // Derived values
+    /** RGB view of the current colour, computed lazily. */
+    rgb = computed(() => hsvToRgb({ h: this.h(), s: this.s(), v: this.v(), a: this.a() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rgb" }] : /* istanbul ignore next */ []));
+    /** Canonical hex (used by the input field and by drag emits). */
+    hex = computed(() => toHex(this.rgb(), this.alpha()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hex" }] : /* istanbul ignore next */ []));
+    /** SV canvas background colour (full-saturation hue). */
+    hueCss = computed(() => `hsl(${this.h()}, 100%, 50%)`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hueCss" }] : /* istanbul ignore next */ []));
+    /** RGB string used for the alpha-slider gradient. */
+    rgbCss = computed(() => {
+        const { r, g, b } = this.rgb();
+        return `${r}, ${g}, ${b}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rgbCss" }] : /* istanbul ignore next */ []));
+    /** Thumb positions in % for each surface. */
+    svThumbX = computed(() => this.s() * 100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "svThumbX" }] : /* istanbul ignore next */ []));
+    svThumbY = computed(() => (1 - this.v()) * 100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "svThumbY" }] : /* istanbul ignore next */ []));
+    hueThumbX = computed(() => (this.h() / 360) * 100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hueThumbX" }] : /* istanbul ignore next */ []));
+    alphaThumbX = computed(() => this.a() * 100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "alphaThumbX" }] : /* istanbul ignore next */ []));
+    /** Mirror of the canonical hex, edited by the user via the input field. */
+    hexInput = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hexInput" }] : /* istanbul ignore next */ []));
+    /** Active tab in the input switcher. */
+    activeTab = signal('hex', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+    /** HSL view of the current colour, computed lazily. */
+    hslView = computed(() => rgbToHsl(this.rgb()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hslView" }] : /* istanbul ignore next */ []));
+    /** Alpha as integer percent for display in numeric tabs. */
+    alphaPercent = computed(() => Math.round(this.a() * 100), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "alphaPercent" }] : /* istanbul ignore next */ []));
+    tabOptions = [
+        { value: 'hex', label: 'HEX' },
+        { value: 'rgb', label: 'RGB' },
+        { value: 'hsl', label: 'HSL' },
+    ];
+    classes = computed(() => {
+        const parts = ['wr-color-picker'];
+        if (this.alpha())
+            parts.push('wr-color-picker--alpha');
+        if (this.effectiveDisabled())
+            parts.push('wr-color-picker--disabled');
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    // ControlValueAccessor
+    onChange = noop;
+    onTouched = noop;
+    writeValue(value) {
+        const rgb = parseHex(value ?? '') ?? { r: 0, g: 0, b: 0, a: 1 };
+        const hsv = rgbToHsv(rgb);
+        this.h.set(hsv.h);
+        this.s.set(hsv.s);
+        this.v.set(hsv.v);
+        this.a.set(hsv.a);
+        this.hexInput.set(this.hex());
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledFromCva.set(coerceBooleanProperty(isDisabled));
+    }
+    // Drag handlers
+    onPointerDown(event, surface) {
+        if (this.effectiveDisabled())
+            return;
+        event.preventDefault();
+        const target = event.currentTarget;
+        target.setPointerCapture(event.pointerId);
+        const update = (e) => this.updateFromEvent(e, target, surface);
+        const cleanup = (e) => {
+            target.releasePointerCapture(e.pointerId);
+            target.removeEventListener('pointermove', update);
+            target.removeEventListener('pointerup', cleanup);
+            this.onTouched();
+        };
+        target.addEventListener('pointermove', update);
+        target.addEventListener('pointerup', cleanup);
+        this.updateFromEvent(event, target, surface);
+    }
+    updateFromEvent(event, target, surface) {
+        const rect = target.getBoundingClientRect();
+        const x = clamp((event.clientX - rect.left) / rect.width, 0, 1);
+        if (surface === 'sv') {
+            const y = clamp((event.clientY - rect.top) / rect.height, 0, 1);
+            this.s.set(x);
+            this.v.set(1 - y);
+        }
+        else if (surface === 'hue') {
+            this.h.set(x * 360);
+        }
+        else {
+            this.a.set(x);
+        }
+        this.emit();
+    }
+    // Hex input handlers
+    onHexInput(event) {
+        const raw = event.target.value;
+        this.hexInput.set(raw);
+        const rgb = parseHex(raw);
+        if (!rgb)
+            return;
+        const hsv = rgbToHsv(rgb);
+        this.h.set(hsv.h);
+        this.s.set(hsv.s);
+        this.v.set(hsv.v);
+        this.a.set(hsv.a);
+        this.emitWithoutHexSync();
+    }
+    onHexBlur() {
+        // Re-sync the input with the canonical value (in case the user typed invalid).
+        this.hexInput.set(this.hex());
+        this.onTouched();
+    }
+    // Emission
+    emit() {
+        this.emitWithoutHexSync();
+        this.hexInput.set(this.hex());
+    }
+    emitWithoutHexSync() {
+        this.onChange(this.hex());
+    }
+    // Tab + channel handlers
+    onTabChange(tab) {
+        if (tab)
+            this.activeTab.set(tab);
+    }
+    onRgbChannel(channel, event) {
+        const n = clamp(Number(event.target.value), 0, 255);
+        if (Number.isNaN(n))
+            return;
+        const current = this.rgb();
+        const next = { ...current, [channel]: n };
+        this.applyRgb(next);
+    }
+    onHslChannel(channel, event) {
+        const n = Number(event.target.value);
+        if (Number.isNaN(n))
+            return;
+        const current = this.hslView();
+        const next = channel === 'h' ? { ...current, h: clamp(n, 0, 360) } : { ...current, [channel]: clamp(n, 0, 100) / 100 };
+        this.applyRgb(hslToRgb(next));
+    }
+    onAlphaPercent(event) {
+        const n = clamp(Number(event.target.value), 0, 100);
+        if (Number.isNaN(n))
+            return;
+        this.a.set(n / 100);
+        this.emit();
+    }
+    onSwatchClick(hex) {
+        if (this.effectiveDisabled())
+            return;
+        const rgb = parseHex(hex);
+        if (!rgb)
+            return;
+        this.applyRgb(rgb);
+    }
+    /** Push an RGB triple into the HSV source of truth (preserving the current alpha if the swap removes it). */
+    applyRgb(rgb) {
+        const hsv = rgbToHsv(rgb);
+        this.h.set(hsv.h);
+        this.s.set(hsv.s);
+        this.v.set(hsv.v);
+        this.a.set(hsv.a);
+        this.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: WrColorPicker, isStandalone: true, selector: "wr-color-picker", inputs: { alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 } }, host: { properties: { "class": "classes()", "style.--wr-color-picker-hue": "hueCss()", "style.--wr-color-picker-rgb": "rgbCss()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                // eslint-disable-next-line @angular-eslint/no-forward-ref
+                useExisting: forwardRef(() => WrColorPicker),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"wr-color-picker__sv\" (pointerdown)=\"onPointerDown($event, 'sv')\">\n  <span class=\"wr-color-picker__thumb\" [style.left.%]=\"svThumbX()\" [style.top.%]=\"svThumbY()\"></span>\n</div>\n\n<div class=\"wr-color-picker__slider wr-color-picker__slider--hue\" (pointerdown)=\"onPointerDown($event, 'hue')\">\n  <span class=\"wr-color-picker__thumb wr-color-picker__thumb--slider\" [style.left.%]=\"hueThumbX()\"></span>\n</div>\n\n@if (alpha()) {\n  <div class=\"wr-color-picker__slider wr-color-picker__slider--alpha\" (pointerdown)=\"onPointerDown($event, 'alpha')\">\n    <span class=\"wr-color-picker__thumb wr-color-picker__thumb--slider\" [style.left.%]=\"alphaThumbX()\"></span>\n  </div>\n}\n\n<div class=\"wr-color-picker__chrome\">\n  <span class=\"wr-color-picker__preview\" [style.background]=\"hex()\"></span>\n  <wr-segmented\n    class=\"wr-color-picker__tabs\"\n    [options]=\"tabOptions\"\n    [value]=\"activeTab()\"\n    (valueChange)=\"onTabChange($event)\"\n  />\n</div>\n\n@switch (activeTab()) {\n  @case ('hex') {\n    <div class=\"wr-color-picker__inputs wr-color-picker__inputs--hex\">\n      <label class=\"wr-color-picker__field wr-color-picker__field--wide\">\n        <input\n          type=\"text\"\n          spellcheck=\"false\"\n          autocomplete=\"off\"\n          [value]=\"hexInput()\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onHexInput($event)\"\n          (blur)=\"onHexBlur()\"\n        />\n        <span class=\"wr-color-picker__field-label\">HEX</span>\n      </label>\n    </div>\n  }\n  @case ('rgb') {\n    <div class=\"wr-color-picker__inputs\">\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().r\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onRgbChannel('r', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">R</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().g\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onRgbChannel('g', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">G</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().b\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onRgbChannel('b', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">B</span>\n      </label>\n      @if (alpha()) {\n        <label class=\"wr-color-picker__field\">\n          <input\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"alphaPercent()\"\n            [disabled]=\"effectiveDisabled()\"\n            (input)=\"onAlphaPercent($event)\"\n          />\n          <span class=\"wr-color-picker__field-label\">A%</span>\n        </label>\n      }\n    </div>\n  }\n  @case ('hsl') {\n    <div class=\"wr-color-picker__inputs\">\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"360\"\n          [value]=\"hslView().h | number: '1.0-0'\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onHslChannel('h', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">H</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"100\"\n          [value]=\"hslView().s * 100 | number: '1.0-0'\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onHslChannel('s', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">S%</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"100\"\n          [value]=\"hslView().l * 100 | number: '1.0-0'\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onHslChannel('l', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">L%</span>\n      </label>\n      @if (alpha()) {\n        <label class=\"wr-color-picker__field\">\n          <input\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"alphaPercent()\"\n            [disabled]=\"effectiveDisabled()\"\n            (input)=\"onAlphaPercent($event)\"\n          />\n          <span class=\"wr-color-picker__field-label\">A%</span>\n        </label>\n      }\n    </div>\n  }\n}\n\n@if (swatches().length > 0) {\n  <div class=\"wr-color-picker__swatches\">\n    @for (color of swatches(); track color) {\n      <button\n        type=\"button\"\n        class=\"wr-color-picker__swatch\"\n        [style.background]=\"color\"\n        [attr.aria-label]=\"color\"\n        [disabled]=\"effectiveDisabled()\"\n        (click)=\"onSwatchClick(color)\"\n      ></button>\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: WrSegmented, selector: "wr-segmented", inputs: ["options", "value", "disabled"], outputs: ["valueChange"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrColorPicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-color-picker', encapsulation: ViewEncapsulation.None, host: {
+                        '[class]': 'classes()',
+                        '[style.--wr-color-picker-hue]': 'hueCss()',
+                        '[style.--wr-color-picker-rgb]': 'rgbCss()',
+                    }, imports: [DecimalPipe, WrSegmented], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            // eslint-disable-next-line @angular-eslint/no-forward-ref
+                            useExisting: forwardRef(() => WrColorPicker),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"wr-color-picker__sv\" (pointerdown)=\"onPointerDown($event, 'sv')\">\n  <span class=\"wr-color-picker__thumb\" [style.left.%]=\"svThumbX()\" [style.top.%]=\"svThumbY()\"></span>\n</div>\n\n<div class=\"wr-color-picker__slider wr-color-picker__slider--hue\" (pointerdown)=\"onPointerDown($event, 'hue')\">\n  <span class=\"wr-color-picker__thumb wr-color-picker__thumb--slider\" [style.left.%]=\"hueThumbX()\"></span>\n</div>\n\n@if (alpha()) {\n  <div class=\"wr-color-picker__slider wr-color-picker__slider--alpha\" (pointerdown)=\"onPointerDown($event, 'alpha')\">\n    <span class=\"wr-color-picker__thumb wr-color-picker__thumb--slider\" [style.left.%]=\"alphaThumbX()\"></span>\n  </div>\n}\n\n<div class=\"wr-color-picker__chrome\">\n  <span class=\"wr-color-picker__preview\" [style.background]=\"hex()\"></span>\n  <wr-segmented\n    class=\"wr-color-picker__tabs\"\n    [options]=\"tabOptions\"\n    [value]=\"activeTab()\"\n    (valueChange)=\"onTabChange($event)\"\n  />\n</div>\n\n@switch (activeTab()) {\n  @case ('hex') {\n    <div class=\"wr-color-picker__inputs wr-color-picker__inputs--hex\">\n      <label class=\"wr-color-picker__field wr-color-picker__field--wide\">\n        <input\n          type=\"text\"\n          spellcheck=\"false\"\n          autocomplete=\"off\"\n          [value]=\"hexInput()\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onHexInput($event)\"\n          (blur)=\"onHexBlur()\"\n        />\n        <span class=\"wr-color-picker__field-label\">HEX</span>\n      </label>\n    </div>\n  }\n  @case ('rgb') {\n    <div class=\"wr-color-picker__inputs\">\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().r\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onRgbChannel('r', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">R</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().g\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onRgbChannel('g', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">G</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"255\"\n          [value]=\"rgb().b\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onRgbChannel('b', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">B</span>\n      </label>\n      @if (alpha()) {\n        <label class=\"wr-color-picker__field\">\n          <input\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"alphaPercent()\"\n            [disabled]=\"effectiveDisabled()\"\n            (input)=\"onAlphaPercent($event)\"\n          />\n          <span class=\"wr-color-picker__field-label\">A%</span>\n        </label>\n      }\n    </div>\n  }\n  @case ('hsl') {\n    <div class=\"wr-color-picker__inputs\">\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"360\"\n          [value]=\"hslView().h | number: '1.0-0'\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onHslChannel('h', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">H</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"100\"\n          [value]=\"hslView().s * 100 | number: '1.0-0'\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onHslChannel('s', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">S%</span>\n      </label>\n      <label class=\"wr-color-picker__field\">\n        <input\n          type=\"number\"\n          min=\"0\"\n          max=\"100\"\n          [value]=\"hslView().l * 100 | number: '1.0-0'\"\n          [disabled]=\"effectiveDisabled()\"\n          (input)=\"onHslChannel('l', $event)\"\n        />\n        <span class=\"wr-color-picker__field-label\">L%</span>\n      </label>\n      @if (alpha()) {\n        <label class=\"wr-color-picker__field\">\n          <input\n            type=\"number\"\n            min=\"0\"\n            max=\"100\"\n            [value]=\"alphaPercent()\"\n            [disabled]=\"effectiveDisabled()\"\n            (input)=\"onAlphaPercent($event)\"\n          />\n          <span class=\"wr-color-picker__field-label\">A%</span>\n        </label>\n      }\n    </div>\n  }\n}\n\n@if (swatches().length > 0) {\n  <div class=\"wr-color-picker__swatches\">\n    @for (color of swatches(); track color) {\n      <button\n        type=\"button\"\n        class=\"wr-color-picker__swatch\"\n        [style.background]=\"color\"\n        [attr.aria-label]=\"color\"\n        [disabled]=\"effectiveDisabled()\"\n        (click)=\"onSwatchClick(color)\"\n      ></button>\n    }\n  </div>\n}\n" }]
+        }], propDecorators: { alpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "alpha", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], swatches: [{ type: i0.Input, args: [{ isSignal: true, alias: "swatches", required: false }] }] } });
+
+/**
+ * @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
+ */
+/**
+ * Opens a `<wr-color-picker>` in an overlay anchored to the host element.
+ *
+ * Apply to any clickable element (typically a button). Two-way binds the
+ * current colour through `[(value)]`; forwards `alpha` / `format` /
+ * `swatches` / `disabled` to the inner picker.
+ *
+ * Same overlay isolation as the rest of the lib — uses {@link WR_OVERLAY},
+ * not CDK's root container.
+ *
+ * @example
+ * ```html
+ * <button wrColorPickerTrigger
+ *         [(value)]="brandColor"
+ *         [swatches]="palette">
+ *   <span class="swatch" [style.background]="brandColor"></span>
+ *   {{ brandColor }}
+ * </button>
+ * ```
+ *
+ * @see https://ngwr.dev/components/color-picker
+ */
+class WrColorPickerTrigger {
+    /** Two-way bindable colour value (hex string). */
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Forwarded to the inner picker. @default true */
+    alpha = input(true, { ...(ngDevMode ? { debugName: "alpha" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Forwarded to the inner picker. @default 'hex' */
+    format = input('hex', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    /** Forwarded to the inner picker. @default [] */
+    swatches = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "swatches" }] : /* istanbul ignore next */ []));
+    /** Disable the trigger entirely. @default false */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Fires after the picker opens. */
+    opened = output();
+    /** Fires after the picker closes. */
+    closed = output();
+    host = inject(ElementRef);
+    overlay = inject(WR_OVERLAY);
+    vcr = inject(ViewContainerRef);
+    scrollStrategies = inject(ScrollStrategyOptions);
+    destroyRef = inject(DestroyRef);
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    overlayRef = null;
+    constructor() {
+        this.destroyRef.onDestroy(() => this.dispose());
+    }
+    /** Toggle the picker. Open if closed, close if open. */
+    toggle() {
+        if (this.disabled())
+            return;
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    /** Open the picker. No-op if already open. */
+    open() {
+        if (this.isOpen() || this.disabled())
+            return;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.host)
+            .withPositions([
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+            { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+            { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
+        ])
+            .withPush(true);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.scrollStrategies.reposition(),
+            panelClass: 'wr-color-picker-overlay',
+        });
+        const portal = new ComponentPortal(WrColorPicker, this.vcr);
+        const ref = this.overlayRef.attach(portal);
+        ref.setInput('alpha', this.alpha());
+        ref.setInput('format', this.format());
+        ref.setInput('swatches', this.swatches());
+        ref.setInput('disabled', this.disabled());
+        ref.instance.writeValue(this.value());
+        // Bridge inner picker's CVA onChange to our two-way [(value)] model.
+        ref.instance.registerOnChange((next) => this.value.set(next));
+        // Outside-click → close (CDK's outsidePointerEvents only fires for clicks
+        // outside the overlay pane; we also need to ignore re-clicks on the host).
+        this.overlayRef
+            .outsidePointerEvents()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(event => {
+            if (this.host.nativeElement.contains(event.target))
+                return;
+            this.close();
+        });
+        // Escape → close.
+        this.overlayRef
+            .keydownEvents()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(event => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.close();
+            }
+        });
+        this.isOpen.set(true);
+        this.opened.emit();
+    }
+    /** Close the picker. No-op if already closed. */
+    close() {
+        if (!this.isOpen())
+            return;
+        this.dispose();
+        this.isOpen.set(false);
+        this.closed.emit();
+    }
+    dispose() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrColorPickerTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.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()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrColorPickerTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wrColorPickerTrigger]',
+                    host: { '(click)': 'toggle()' },
+                }]
+        }], 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"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrColorPicker, WrColorPickerTrigger, hslToRgb, hsvToRgb, parseHex, rgbToHsl, rgbToHsv, toHex };
+//# sourceMappingURL=ngwr-color-picker.mjs.map