primenglab 22.0.0-beta.1

package/fesm2022/primenglab-inputcolor.mjs

@@ -0,0 +1,2262 @@
+export * from 'primenglab/types/inputcolor';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, input, booleanAttribute, effect, Directive, Injectable, forwardRef, signal, output, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { SharedModule } from 'primenglab/api';
+import { BaseComponent, PARENT_INSTANCE } from 'primenglab/basecomponent';
+import * as i1 from 'primenglab/bind';
+import { Bind } from 'primenglab/bind';
+import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
+import { ButtonDirective, ButtonIcon } from 'primenglab/button';
+import * as i1$1 from 'primenglab/inputtext';
+import { InputText } from 'primenglab/inputtext';
+import { style } from '@primeuix/styles/inputcolor';
+import { BaseStyle } from 'primenglab/base';
+
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function round(value, decimals = 0) {
+    const factor = Math.pow(10, decimals);
+    return Math.round(value * factor) / factor;
+}
+function multiplyMatrices(matrix, vector) {
+    return [matrix[0] * vector[0] + matrix[1] * vector[1] + matrix[2] * vector[2], matrix[3] * vector[0] + matrix[4] * vector[1] + matrix[5] * vector[2], matrix[6] * vector[0] + matrix[7] * vector[1] + matrix[8] * vector[2]];
+}
+function mod(n, m) {
+    return ((n % m) + m) % m;
+}
+/**
+ * Snaps a value to the nearest step increment within min/max bounds.
+ * @example snap(23.7, 0, 100, 5) => 25
+ * @example snap(0.234, 0, 1, 0.01) => 0.23
+ */
+function snapValue(value, min, max, step) {
+    const clamped = clamp(value, min, max);
+    const offset = clamped - min;
+    const steps = Math.round(offset / step);
+    const snapped = min + steps * step;
+    const precision = (step.toString().split('.')[1] || '').length;
+    return parseFloat(snapped.toFixed(precision));
+}
+class Color {
+    get alpha() {
+        return this.getChannelValue('alpha');
+    }
+    getSpaceAxes(xyChannels) {
+        const { xChannel, yChannel } = xyChannels;
+        if (xChannel === yChannel) {
+            throw new Error('xChannel and yChannel cannot be the same');
+        }
+        const zChannel = this.getChannels().find((channel) => channel !== xChannel && channel !== yChannel);
+        if (!zChannel) {
+            throw new Error('zChannel not found');
+        }
+        return { xChannel, yChannel, zChannel: zChannel };
+    }
+    incChannelValue(channel, step) {
+        const range = this.getChannelRange(channel);
+        const currentValue = this.getChannelValue(channel);
+        const newValue = snapValue(clamp(currentValue + step, range.minValue, range.maxValue), range.minValue, range.maxValue, range.step);
+        return this.setChannelValue(channel, newValue);
+    }
+    decChannelValue(channel, step) {
+        return this.incChannelValue(channel, -step);
+    }
+    toHex() {
+        const rgb = this.toRGB();
+        const r = Math.round(rgb.red).toString(16).padStart(2, '0');
+        const g = Math.round(rgb.green).toString(16).padStart(2, '0');
+        const b = Math.round(rgb.blue).toString(16).padStart(2, '0');
+        return `#${r}${g}${b}`;
+    }
+    toHexa() {
+        const hex = this.toHex();
+        if (this.alpha < 1) {
+            const a = Math.round(this.alpha * 255)
+                .toString(16)
+                .padStart(2, '0');
+            return `${hex}${a}`;
+        }
+        return hex;
+    }
+    toHexInt() {
+        const rgb = this.toRGB();
+        return (Math.round(rgb.red) << 16) | (Math.round(rgb.green) << 8) | Math.round(rgb.blue);
+    }
+    toRgbString() {
+        const rgb = this.toRGB();
+        const r = Math.round(rgb.red);
+        const g = Math.round(rgb.green);
+        const b = Math.round(rgb.blue);
+        if (this.alpha < 1) {
+            return `rgba(${r}, ${g}, ${b}, ${round(this.alpha, 2)})`;
+        }
+        return `rgb(${r}, ${g}, ${b})`;
+    }
+    toHslString() {
+        const hsl = this.toHSL();
+        const h = Math.round(hsl.hue) % 360;
+        const s = Math.round(hsl.saturation);
+        const l = Math.round(hsl.lightness);
+        if (this.alpha < 1) {
+            return `hsla(${h}, ${s}%, ${l}%, ${round(this.alpha, 2)})`;
+        }
+        return `hsl(${h}, ${s}%, ${l}%)`;
+    }
+    toHsbString() {
+        const hsb = this.toHSB();
+        const h = Math.round(hsb.hue) % 360;
+        const s = Math.round(hsb.saturation);
+        const b = Math.round(hsb.brightness);
+        if (this.alpha < 1) {
+            return `hsba(${h}, ${s}%, ${b}%, ${round(this.alpha, 2)})`;
+        }
+        return `hsb(${h}, ${s}%, ${b}%)`;
+    }
+    toString(format) {
+        const f = format || this.colorSpace;
+        switch (f) {
+            case 'hex':
+                return this.toHex();
+            case 'hexa':
+                return this.toHexa();
+            case 'rgb':
+            case 'rgba':
+                return this.toRgbString();
+            case 'hsl':
+            case 'hsla':
+                return this.toHslString();
+            case 'hsb':
+            case 'hsba':
+                return this.toHsbString();
+            case 'oklch':
+                return this.toOKLCH().toString('oklch');
+            case 'oklcha':
+                return this.toOKLCH().toString('oklcha');
+            case 'css':
+                return this.toHex();
+            default:
+                return this.toHex();
+        }
+    }
+    toFormat(format) {
+        switch (format) {
+            case 'hsba':
+                return this.toHSB();
+            case 'hsla':
+                return this.toHSL();
+            case 'rgba':
+                return this.toRGB();
+            case 'hexa':
+                return this.toRGB();
+            case 'oklch':
+                return this.toOKLCH();
+            default:
+                return this.toHSB();
+        }
+    }
+}
+class HSBColor extends Color {
+    hue;
+    saturation;
+    brightness;
+    _alpha;
+    colorSpace = 'hsba';
+    constructor(hue, saturation, brightness, _alpha = 1) {
+        super();
+        this.hue = hue;
+        this.saturation = saturation;
+        this.brightness = brightness;
+        this._alpha = _alpha;
+        this.hue = hue >= 0 && hue <= 360 ? hue : mod(hue, 360);
+        this.saturation = clamp(saturation, 0, 100);
+        this.brightness = clamp(brightness, 0, 100);
+        this._alpha = clamp(_alpha, 0, 1);
+    }
+    getChannelValue(channel) {
+        switch (channel) {
+            case 'hue':
+                return this.hue;
+            case 'saturation':
+                return this.saturation;
+            case 'brightness':
+                return this.brightness;
+            case 'alpha':
+                return this._alpha;
+            case 'lightness':
+                return this.toHSL().getChannelValue(channel);
+            case 'L':
+            case 'C':
+            case 'H':
+            case 'oklchLightness':
+            case 'oklchChroma':
+            case 'oklchHue':
+                return this.toOKLCH().getChannelValue(channel);
+            default:
+                return this.toRGB().getChannelValue(channel);
+        }
+    }
+    setChannelValue(channel, value) {
+        switch (channel) {
+            case 'hue':
+                return new HSBColor(value, this.saturation, this.brightness, this._alpha);
+            case 'saturation':
+                return new HSBColor(this.hue, value, this.brightness, this._alpha);
+            case 'brightness':
+                return new HSBColor(this.hue, this.saturation, value, this._alpha);
+            case 'alpha':
+                return new HSBColor(this.hue, this.saturation, this.brightness, value);
+            case 'lightness': {
+                const hsl = this.toHSL().setChannelValue(channel, value);
+                return hsl.toHSB();
+            }
+            case 'L':
+            case 'C':
+            case 'H':
+            case 'oklchLightness':
+            case 'oklchChroma':
+            case 'oklchHue': {
+                const oklch = this.toOKLCH().setChannelValue(channel, value);
+                return oklch.toHSB();
+            }
+            default: {
+                const rgb = this.toRGB().setChannelValue(channel, value);
+                return rgb.toHSB();
+            }
+        }
+    }
+    toHSB() {
+        return this.clone();
+    }
+    toHSL() {
+        const h = this.hue;
+        const s = this.saturation / 100;
+        const b = this.brightness / 100;
+        const l = b * (1 - s / 2);
+        const sl = l === 0 || l === 1 ? 0 : ((b - l) / Math.min(l, 1 - l)) * 100;
+        return new HSLColor(h, sl, l * 100, this._alpha);
+    }
+    toRGB() {
+        const h = this.hue / 360;
+        const s = this.saturation / 100;
+        const b = this.brightness / 100;
+        let r, g, bl;
+        const i = Math.floor(h * 6);
+        const f = h * 6 - i;
+        const p = b * (1 - s);
+        const q = b * (1 - f * s);
+        const t = b * (1 - (1 - f) * s);
+        switch (i % 6) {
+            case 0:
+                r = b;
+                g = t;
+                bl = p;
+                break;
+            case 1:
+                r = q;
+                g = b;
+                bl = p;
+                break;
+            case 2:
+                r = p;
+                g = b;
+                bl = t;
+                break;
+            case 3:
+                r = p;
+                g = q;
+                bl = b;
+                break;
+            case 4:
+                r = t;
+                g = p;
+                bl = b;
+                break;
+            case 5:
+                r = b;
+                g = p;
+                bl = q;
+                break;
+            default:
+                r = 0;
+                g = 0;
+                bl = 0;
+        }
+        return new RGBColor(r * 255, g * 255, bl * 255, this._alpha);
+    }
+    toOKLCH() {
+        return this.toRGB().toOKLCH();
+    }
+    clone() {
+        return new HSBColor(this.hue, this.saturation, this.brightness, this._alpha);
+    }
+    toJSON() {
+        return {
+            hue: this.hue,
+            saturation: this.saturation,
+            brightness: this.brightness,
+            alpha: this._alpha
+        };
+    }
+    getFormat() {
+        return 'hsba';
+    }
+    getChannels() {
+        return ['hue', 'saturation', 'brightness'];
+    }
+    getChannelRange(channel) {
+        switch (channel) {
+            case 'hue':
+                return { minValue: 0, maxValue: 360, step: 1, pageStep: 15 };
+            case 'saturation':
+            case 'brightness':
+                return { minValue: 0, maxValue: 100, step: 1, pageStep: 10 };
+            case 'alpha':
+                return { minValue: 0, maxValue: 1, step: 0.01, pageStep: 0.1 };
+            case 'lightness':
+                return this.toHSL().getChannelRange(channel);
+            case 'L':
+            case 'C':
+            case 'H':
+            case 'oklchLightness':
+            case 'oklchChroma':
+            case 'oklchHue':
+                return this.toOKLCH().getChannelRange(channel);
+            case 'red':
+            case 'green':
+            case 'blue':
+                return this.toRGB().getChannelRange(channel);
+            default:
+                throw new Error(`Unknown color channel: ${channel}`);
+        }
+    }
+}
+class HSLColor extends Color {
+    hue;
+    saturation;
+    lightness;
+    _alpha;
+    colorSpace = 'hsla';
+    constructor(hue, saturation, lightness, _alpha = 1) {
+        super();
+        this.hue = hue;
+        this.saturation = saturation;
+        this.lightness = lightness;
+        this._alpha = _alpha;
+        this.hue = hue >= 0 && hue <= 360 ? hue : mod(hue, 360);
+        this.saturation = clamp(saturation, 0, 100);
+        this.lightness = clamp(lightness, 0, 100);
+        this._alpha = clamp(_alpha, 0, 1);
+    }
+    getChannelValue(channel) {
+        switch (channel) {
+            case 'hue':
+                return this.hue;
+            case 'saturation':
+                return this.saturation;
+            case 'lightness':
+                return this.lightness;
+            case 'alpha':
+                return this._alpha;
+            case 'brightness':
+                return this.toHSB().getChannelValue(channel);
+            case 'L':
+            case 'C':
+            case 'H':
+            case 'oklchLightness':
+            case 'oklchChroma':
+            case 'oklchHue':
+                return this.toOKLCH().getChannelValue(channel);
+            default:
+                return this.toRGB().getChannelValue(channel);
+        }
+    }
+    setChannelValue(channel, value) {
+        switch (channel) {
+            case 'hue':
+                return new HSLColor(value, this.saturation, this.lightness, this._alpha);
+            case 'saturation':
+                return new HSLColor(this.hue, value, this.lightness, this._alpha);
+            case 'lightness':
+                return new HSLColor(this.hue, this.saturation, value, this._alpha);
+            case 'alpha':
+                return new HSLColor(this.hue, this.saturation, this.lightness, value);
+            case 'brightness': {
+                const hsb = this.toHSB().setChannelValue(channel, value);
+                return hsb.toHSL();
+            }
+            case 'L':
+            case 'C':
+            case 'H':
+            case 'oklchLightness':
+            case 'oklchChroma':
+            case 'oklchHue': {
+                const oklch = this.toOKLCH().setChannelValue(channel, value);
+                return oklch.toHSL();
+            }
+            default: {
+                const rgb = this.toRGB().setChannelValue(channel, value);
+                return rgb.toHSL();
+            }
+        }
+    }
+    toHSB() {
+        const h = this.hue;
+        const s = this.saturation / 100;
+        const l = this.lightness / 100;
+        const b = l + s * Math.min(l, 1 - l);
+        const sb = b === 0 ? 0 : 2 * (1 - l / b);
+        return new HSBColor(h, sb * 100, b * 100, this._alpha);
+    }
+    toHSL() {
+        return this.clone();
+    }
+    toRGB() {
+        const h = this.hue;
+        const s = this.saturation / 100;
+        const l = this.lightness / 100;
+        const a = s * Math.min(l, 1 - l);
+        const f = (n) => {
+            const k = (n + h / 30) % 12;
+            return l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+        };
+        return new RGBColor(f(0) * 255, f(8) * 255, f(4) * 255, this._alpha);
+    }
+    toOKLCH() {
+        return this.toRGB().toOKLCH();
+    }
+    clone() {
+        return new HSLColor(this.hue, this.saturation, this.lightness, this._alpha);
+    }
+    toJSON() {
+        return {
+            hue: this.hue,
+            saturation: this.saturation,
+            lightness: this.lightness,
+            alpha: this._alpha
+        };
+    }
+    getFormat() {
+        return 'hsla';
+    }
+    getChannels() {
+        return ['hue', 'saturation', 'lightness'];
+    }
+    getChannelRange(channel) {
+        switch (channel) {
+            case 'hue':
+                return { minValue: 0, maxValue: 360, step: 1, pageStep: 15 };
+            case 'saturation':
+            case 'lightness':
+                return { minValue: 0, maxValue: 100, step: 1, pageStep: 10 };
+            case 'alpha':
+                return { minValue: 0, maxValue: 1, step: 0.01, pageStep: 0.1 };
+            case 'brightness':
+                return this.toHSB().getChannelRange(channel);
+            case 'L':
+            case 'C':
+            case 'H':
+            case 'oklchLightness':
+            case 'oklchChroma':
+            case 'oklchHue':
+                return this.toOKLCH().getChannelRange(channel);
+            case 'red':
+            case 'green':
+            case 'blue':
+                return this.toRGB().getChannelRange(channel);
+            default:
+                throw new Error(`Unknown color channel: ${channel}`);
+        }
+    }
+}
+class RGBColor extends Color {
+    red;
+    green;
+    blue;
+    _alpha;
+    colorSpace = 'rgba';
+    constructor(red, green, blue, _alpha = 1) {
+        super();
+        this.red = red;
+        this.green = green;
+        this.blue = blue;
+        this._alpha = _alpha;
+        this.red = clamp(red, 0, 255);
+        this.green = clamp(green, 0, 255);
+        this.blue = clamp(blue, 0, 255);
+        this._alpha = clamp(_alpha, 0, 1);
+    }
+    getChannelValue(channel) {
+        switch (channel) {
+            case 'red':
+                return this.red;
+            case 'green':
+                return this.green;
+            case 'blue':
+                return this.blue;
+            case 'alpha':
+                return this._alpha;
+            case 'hue':
+            case 'saturation':
+            case 'brightness':
+                return this.toHSB().getChannelValue(channel);
+            case 'lightness':
+                return this.toHSL().getChannelValue(channel);
+            case 'L':
+            case 'C':
+            case 'H':
+            case 'oklchLightness':
+            case 'oklchChroma':
+            case 'oklchHue':
+                return this.toOKLCH().getChannelValue(channel);
+            default:
+                return this.toHSB().getChannelValue(channel);
+        }
+    }
+    setChannelValue(channel, value) {
+        switch (channel) {
+            case 'red':
+                return new RGBColor(value, this.green, this.blue, this._alpha);
+            case 'green':
+                return new RGBColor(this.red, value, this.blue, this._alpha);
+            case 'blue':
+                return new RGBColor(this.red, this.green, value, this._alpha);
+            case 'alpha':
+                return new RGBColor(this.red, this.green, this.blue, value);
+            case 'hue':
+            case 'saturation':
+            case 'brightness': {
+                const hsb = this.toHSB().setChannelValue(channel, value);
+                return hsb.toRGB();
+            }
+            case 'lightness': {
+                const hsl = this.toHSL().setChannelValue(channel, value);
+                return hsl.toRGB();
+            }
+            case 'L':
+            case 'C':
+            case 'H':
+            case 'oklchLightness':
+            case 'oklchChroma':
+            case 'oklchHue': {
+                const oklch = this.toOKLCH().setChannelValue(channel, value);
+                return oklch.toRGB();
+            }
+            default: {
+                const hsb = this.toHSB().setChannelValue(channel, value);
+                return hsb.toRGB();
+            }
+        }
+    }
+    toHSB() {
+        const r = this.red / 255;
+        const g = this.green / 255;
+        const b = this.blue / 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        const d = max - min;
+        let h = 0;
+        const s = max === 0 ? 0 : d / max;
+        const v = max;
+        if (d !== 0) {
+            switch (max) {
+                case r:
+                    h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                    break;
+                case g:
+                    h = ((b - r) / d + 2) / 6;
+                    break;
+                case b:
+                    h = ((r - g) / d + 4) / 6;
+                    break;
+            }
+        }
+        return new HSBColor(h * 360, s * 100, v * 100, this._alpha);
+    }
+    toHSL() {
+        const r = this.red / 255;
+        const g = this.green / 255;
+        const b = this.blue / 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);
+            switch (max) {
+                case r:
+                    h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                    break;
+                case g:
+                    h = ((b - r) / d + 2) / 6;
+                    break;
+                case b:
+                    h = ((r - g) / d + 4) / 6;
+                    break;
+            }
+        }
+        return new HSLColor(h * 360, s * 100, l * 100, this._alpha);
+    }
+    toRGB() {
+        return this.clone();
+    }
+    toOKLCH() {
+        const rgb = [this.red / 255, this.green / 255, this.blue / 255];
+        const rgbLinear = rgb.map((c) => (Math.abs(c) <= 0.04045 ? c / 12.92 : (c < 0 ? -1 : 1) * ((Math.abs(c) + 0.055) / 1.055) ** 2.4));
+        const xyz = multiplyMatrices([0.41239079926595934, 0.357584339383878, 0.1804807884018343, 0.21263900587151027, 0.715168678767756, 0.07219231536073371, 0.01933081871559182, 0.11919477979462598, 0.9505321522496607], rgbLinear);
+        const LMS = multiplyMatrices([0.819022437996703, 0.3619062600528904, -0.1288737815209879, 0.0329836539323885, 0.9292868615863434, 0.0361446663506424, 0.0481771893596242, 0.2642395317527308, 0.6335478284694309], xyz);
+        const LMSg = LMS.map((val) => Math.cbrt(val));
+        const [L, a, b] = multiplyMatrices([0.210454268309314, 0.7936177747023054, -0.0040720430116193, 1.9779985324311684, -2.4285922420485799, 0.450593709617411, 0.0259040424655478, 0.7827717124575296, -0.8086757549230774], LMSg);
+        const C = Math.sqrt(a ** 2 + b ** 2);
+        const H = Math.abs(a) < 0.0002 && Math.abs(b) < 0.0002 ? NaN : ((((Math.atan2(b, a) * 180) / Math.PI) % 360) + 360) % 360;
+        const outL = Number(Math.min(1, Math.max(0, L)).toFixed(4));
+        const outC = Number(C.toFixed(4));
+        const outH = Number.isNaN(H) ? NaN : Number(H.toFixed(2));
+        return new OKLCHColor(outL, outC, outH, Number(this._alpha.toFixed(2)));
+    }
+    clone() {
+        return new RGBColor(this.red, this.green, this.blue, this._alpha);
+    }
+    toJSON() {
+        return {
+            red: this.red,
+            green: this.green,
+            blue: this.blue,
+            alpha: this._alpha
+        };
+    }
+    getFormat() {
+        return 'rgba';
+    }
+    getChannels() {
+        return ['red', 'green', 'blue'];
+    }
+    getChannelRange(channel) {
+        switch (channel) {
+            case 'red':
+            case 'green':
+            case 'blue':
+                return { minValue: 0, maxValue: 255, step: 1, pageStep: 17 };
+            case 'alpha':
+                return { minValue: 0, maxValue: 1, step: 0.01, pageStep: 0.1 };
+            case 'hue':
+            case 'saturation':
+            case 'brightness':
+                return this.toHSB().getChannelRange(channel);
+            case 'lightness':
+                return this.toHSL().getChannelRange(channel);
+            case 'L':
+            case 'C':
+            case 'H':
+            case 'oklchLightness':
+            case 'oklchChroma':
+            case 'oklchHue':
+                return this.toOKLCH().getChannelRange(channel);
+            default:
+                throw new Error(`Unknown color channel: ${channel}`);
+        }
+    }
+}
+class OKLCHColor extends Color {
+    L;
+    C;
+    H;
+    _alpha;
+    colorSpace = 'oklch';
+    constructor(L, C, H, _alpha = 1) {
+        super();
+        this.L = L;
+        this.C = C;
+        this.H = H;
+        this._alpha = _alpha;
+        this.L = clamp(L, 0, 1);
+        this.C = clamp(C, 0, 0.4);
+        this.H = Number.isNaN(H) ? NaN : H >= 0 && H <= 360 ? H : mod(H, 360);
+        this._alpha = clamp(_alpha, 0, 1);
+    }
+    getChannelValue(channel) {
+        switch (channel) {
+            case 'L':
+            case 'oklchLightness':
+                return this.L;
+            case 'C':
+            case 'oklchChroma':
+                return this.C;
+            case 'H':
+            case 'oklchHue':
+                return this.H;
+            case 'alpha':
+                return this._alpha;
+            default:
+                return this.toRGB().getChannelValue(channel);
+        }
+    }
+    setChannelValue(channel, value) {
+        switch (channel) {
+            case 'L':
+            case 'oklchLightness':
+                return new OKLCHColor(value, this.C, this.H, this._alpha);
+            case 'C':
+            case 'oklchChroma':
+                return new OKLCHColor(this.L, value, this.H, this._alpha);
+            case 'H':
+            case 'oklchHue':
+                return new OKLCHColor(this.L, this.C, value, this._alpha);
+            case 'alpha':
+                return new OKLCHColor(this.L, this.C, this.H, value);
+            default: {
+                const rgb = this.toRGB().setChannelValue(channel, value);
+                return rgb.toOKLCH();
+            }
+        }
+    }
+    toHSB() {
+        return this.toRGB().toHSB();
+    }
+    toHSL() {
+        return this.toRGB().toHSL();
+    }
+    toRGB() {
+        const hRad = (this.H * Math.PI) / 180;
+        const a = Number.isNaN(this.H) ? 0 : this.C * Math.cos(hRad);
+        const b = Number.isNaN(this.H) ? 0 : this.C * Math.sin(hRad);
+        const l_ = this.L + 0.3963377774 * a + 0.2158037573 * b;
+        const m_ = this.L - 0.1055613458 * a - 0.0638541728 * b;
+        const s_ = this.L - 0.0894841775 * a - 1.291485548 * b;
+        const l = l_ * l_ * l_;
+        const m = m_ * m_ * m_;
+        const s = s_ * s_ * s_;
+        const lr = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
+        const lg = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
+        const lb = -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s;
+        const toSrgb = (c) => {
+            if (c <= 0.0031308)
+                return c * 12.92;
+            return 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+        };
+        return new RGBColor(clamp(toSrgb(lr) * 255, 0, 255), clamp(toSrgb(lg) * 255, 0, 255), clamp(toSrgb(lb) * 255, 0, 255), this._alpha);
+    }
+    toOKLCH() {
+        return this.clone();
+    }
+    toString(format) {
+        const f = format || this.colorSpace;
+        switch (f) {
+            case 'oklch': {
+                const l = Number.isNaN(this.L) ? 0 : Number((this.L * 100).toFixed(2));
+                const c = Number.isNaN(this.C) ? 0 : Number(this.C.toFixed(4));
+                const h = Number.isNaN(this.H) ? 0 : Number(this.H.toFixed(2));
+                return `oklch(${l}% ${c} ${h})`;
+            }
+            case 'oklcha':
+            case 'css': {
+                const l = Number.isNaN(this.L) ? 0 : Number((this.L * 100).toFixed(2));
+                const c = Number.isNaN(this.C) ? 0 : Number(this.C.toFixed(4));
+                const h = Number.isNaN(this.H) ? 0 : Number(this.H.toFixed(2));
+                const a = Number.isNaN(this._alpha) ? 1 : Number(this._alpha.toFixed(2));
+                return `oklch(${l}% ${c} ${h} / ${a})`;
+            }
+            default:
+                return super.toString(f);
+        }
+    }
+    clone() {
+        return new OKLCHColor(this.L, this.C, this.H, this._alpha);
+    }
+    toJSON() {
+        return {
+            L: this.L,
+            C: this.C,
+            H: this.H,
+            alpha: this._alpha
+        };
+    }
+    getFormat() {
+        return 'oklch';
+    }
+    getChannels() {
+        return ['L', 'C', 'H'];
+    }
+    getChannelRange(channel) {
+        switch (channel) {
+            case 'L':
+            case 'oklchLightness':
+                return { minValue: 0, maxValue: 1, step: 0.01, pageStep: 0.1 };
+            case 'C':
+            case 'oklchChroma':
+                return { minValue: 0, maxValue: 0.4, step: 0.01, pageStep: 0.05 };
+            case 'H':
+            case 'oklchHue':
+                return { minValue: 0, maxValue: 360, step: 1, pageStep: 15 };
+            case 'alpha':
+                return { minValue: 0, maxValue: 1, step: 0.01, pageStep: 0.1 };
+            case 'hue':
+            case 'saturation':
+            case 'brightness':
+                return this.toHSB().getChannelRange(channel);
+            case 'lightness':
+                return this.toHSL().getChannelRange(channel);
+            case 'red':
+            case 'green':
+            case 'blue':
+                return this.toRGB().getChannelRange(channel);
+            default:
+                throw new Error(`Unknown color channel: ${channel}`);
+        }
+    }
+}
+function parseColor(value) {
+    if (!value)
+        return null;
+    if (value instanceof Color) {
+        return value;
+    }
+    if (typeof value !== 'string')
+        return null;
+    const str = value.trim();
+    const hexMatch = str.match(/^#?([0-9a-f]{3,8})$/i);
+    if (hexMatch) {
+        let hex = hexMatch[1];
+        if (hex.length === 3) {
+            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+        }
+        else if (hex.length === 4) {
+            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3];
+        }
+        if (hex.length === 6) {
+            const r = parseInt(hex.substring(0, 2), 16);
+            const g = parseInt(hex.substring(2, 4), 16);
+            const b = parseInt(hex.substring(4, 6), 16);
+            return new RGBColor(r, g, b, 1);
+        }
+        if (hex.length === 8) {
+            const r = parseInt(hex.substring(0, 2), 16);
+            const g = parseInt(hex.substring(2, 4), 16);
+            const b = parseInt(hex.substring(4, 6), 16);
+            const a = parseInt(hex.substring(6, 8), 16) / 255;
+            return new RGBColor(r, g, b, a);
+        }
+    }
+    const rgbMatch = str.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)$/i);
+    if (rgbMatch) {
+        return new RGBColor(parseInt(rgbMatch[1]), parseInt(rgbMatch[2]), parseInt(rgbMatch[3]), rgbMatch[4] !== undefined ? parseFloat(rgbMatch[4]) : 1);
+    }
+    const hslMatch = str.match(/^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%?\s*,\s*([\d.]+)%?\s*(?:,\s*([\d.]+))?\s*\)$/i);
+    if (hslMatch) {
+        return new HSLColor(parseFloat(hslMatch[1]), parseFloat(hslMatch[2]), parseFloat(hslMatch[3]), hslMatch[4] !== undefined ? parseFloat(hslMatch[4]) : 1);
+    }
+    const hsbMatch = str.match(/^hsba?\(\s*([\d.]+)\s*,\s*([\d.]+)%?\s*,\s*([\d.]+)%?\s*(?:,\s*([\d.]+))?\s*\)$/i);
+    if (hsbMatch) {
+        return new HSBColor(parseFloat(hsbMatch[1]), parseFloat(hsbMatch[2]), parseFloat(hsbMatch[3]), hsbMatch[4] !== undefined ? parseFloat(hsbMatch[4]) : 1);
+    }
+    const oklchMatch = str.match(/^oklch\(\s*([\d.]+)(%?)\s+([\d.]+)\s+([\d.]+)\s*(?:\/\s*([\d.]+))?\s*\)$/i);
+    if (oklchMatch) {
+        const lVal = parseFloat(oklchMatch[1]);
+        const l = oklchMatch[2] === '%' ? lVal / 100 : lVal;
+        return new OKLCHColor(l, parseFloat(oklchMatch[3]), parseFloat(oklchMatch[4]), oklchMatch[5] !== undefined ? parseFloat(oklchMatch[5]) : 1);
+    }
+    return null;
+}
+function getChannelRange(channel) {
+    switch (channel) {
+        case 'hue':
+            return { minValue: 0, maxValue: 360, step: 1, pageStep: 15 };
+        case 'H':
+        case 'oklchHue':
+            return { minValue: 0, maxValue: 360, step: 1, pageStep: 15 };
+        case 'saturation':
+        case 'brightness':
+        case 'lightness':
+            return { minValue: 0, maxValue: 100, step: 1, pageStep: 10 };
+        case 'red':
+        case 'green':
+        case 'blue':
+            return { minValue: 0, maxValue: 255, step: 1, pageStep: 17 };
+        case 'alpha':
+            return { minValue: 0, maxValue: 1, step: 0.01, pageStep: 0.1 };
+        case 'L':
+        case 'oklchLightness':
+            return { minValue: 0, maxValue: 1, step: 0.01, pageStep: 0.1 };
+        case 'C':
+        case 'oklchChroma':
+            return { minValue: 0, maxValue: 0.4, step: 0.01, pageStep: 0.05 };
+        default:
+            return { minValue: 0, maxValue: 100, step: 1, pageStep: 10 };
+    }
+}
+function getInputChannelRange(channel) {
+    if (channel === 'hex') {
+        return { minValue: 0, maxValue: 0xffffff, step: 1, pageStep: 1 };
+    }
+    return getChannelRange(channel);
+}
+function getChannelGradient(color, channel, orientation = 'horizontal') {
+    const range = getChannelRange(channel);
+    const direction = orientation === 'horizontal' ? 'right' : 'top';
+    switch (channel) {
+        case 'hue':
+        case 'H':
+        case 'oklchHue':
+            return `linear-gradient(to ${direction}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`;
+        case 'lightness':
+        case 'L':
+        case 'oklchLightness': {
+            const start = color.setChannelValue(channel, range.minValue).toRgbString();
+            const middle = color.setChannelValue(channel, (range.maxValue - range.minValue) / 2).toRgbString();
+            const end = color.setChannelValue(channel, range.maxValue).toRgbString();
+            return `linear-gradient(to ${direction}, ${start}, ${middle}, ${end})`;
+        }
+        case 'alpha': {
+            const start = color.setChannelValue('alpha', range.minValue).toRgbString();
+            const end = color.setChannelValue('alpha', range.maxValue).toRgbString();
+            return `linear-gradient(to ${direction}, ${start}, ${end})`;
+        }
+        default: {
+            const start = color.setChannelValue(channel, range.minValue).toRgbString();
+            const end = color.setChannelValue(channel, range.maxValue).toRgbString();
+            return `linear-gradient(to ${direction}, ${start}, ${end})`;
+        }
+    }
+}
+const channelGenerators = {
+    hue: (color) => [0, 60, 120, 180, 240, 300, 360].map((h) => color.setChannelValue('hue', h).toRgbString()).join(', '),
+    saturation: (color) => `${color.setChannelValue('saturation', 0).toRgbString()}, transparent`,
+    lightness: () => 'black, transparent, white',
+    brightness: () => 'black, transparent'
+};
+function getAreaGradient(color, xChannel, yChannel, format) {
+    const axes3d = getDefault3DAxes(format);
+    const zChannel = axes3d.zChannel;
+    const zValue = color.getChannelValue(zChannel);
+    const isHSL = format === 'hsla';
+    let base;
+    if (isHSL) {
+        base = parseColor('hsl(0, 100%, 50%)').setChannelValue(zChannel, zValue);
+    }
+    else {
+        base = parseColor('hsb(0, 100%, 100%)').setChannelValue(zChannel, zValue);
+    }
+    const channels = [xChannel, yChannel];
+    const direction = (c) => (c === xChannel ? 'right' : 'top');
+    const layers = channels
+        .map((c) => {
+        const gen = channelGenerators[c];
+        if (!gen)
+            return null;
+        return `linear-gradient(to ${direction(c)}, ${gen(base)})`;
+    })
+        .filter(Boolean)
+        .reverse();
+    const isHueZ = zChannel === 'hue' || zChannel === 'H' || zChannel === 'oklchHue';
+    if (isHueZ) {
+        layers.push(base.toRgbString());
+    }
+    return layers.join(', ');
+}
+function getChannelColor(color, channel) {
+    switch (channel) {
+        case 'hue':
+            return parseColor(`hsl(${color.getChannelValue('hue')}, 100%, 50%)`);
+        case 'red':
+        case 'green':
+        case 'blue':
+        case 'lightness':
+        case 'brightness':
+        case 'saturation':
+            return color.setChannelValue('alpha', 1);
+        case 'alpha':
+            return color;
+        default:
+            return color.setChannelValue('alpha', 1);
+    }
+}
+function toCssString(color, format) {
+    const a = round(color.alpha, 2);
+    switch (format) {
+        case 'rgba':
+        case 'hexa': {
+            const rgb = color.toRGB();
+            return `rgba(${Math.round(rgb.red)}, ${Math.round(rgb.green)}, ${Math.round(rgb.blue)}, ${a})`;
+        }
+        case 'hsla': {
+            const hsl = color.toHSL();
+            return `hsla(${Math.round(hsl.hue) % 360}, ${hsl.saturation.toFixed(2)}%, ${hsl.lightness.toFixed(2)}%, ${a})`;
+        }
+        case 'hsba': {
+            // CSS doesn't support hsb, convert to hsl
+            const hsl = color.toHSL();
+            return `hsla(${Math.round(hsl.hue) % 360}, ${hsl.saturation.toFixed(2)}%, ${hsl.lightness.toFixed(2)}%, ${a})`;
+        }
+        case 'oklch': {
+            return color.toOKLCH().toString('css');
+        }
+        default:
+            return color.toOKLCH().toString('css');
+    }
+}
+function getInputChannelValue(color, channel, format = 'hsba') {
+    if (channel === 'hex') {
+        const alphaRange = getChannelRange('alpha');
+        if (color.alpha < alphaRange.maxValue) {
+            return color.toHexa();
+        }
+        return color.toHex();
+    }
+    if (channel === 'css') {
+        return toCssString(color, format);
+    }
+    const value = color.getChannelValue(channel);
+    if (Number.isNaN(value))
+        return 'NaN';
+    const range = getChannelRange(channel);
+    if (channel === 'H' || channel === 'oklchHue') {
+        const rounded = round(value, 2);
+        return rounded.toString();
+    }
+    if (channel === 'hue') {
+        const rounded = Math.round(value);
+        return rounded.toString();
+    }
+    if (range.step >= 1) {
+        return Math.round(value).toString();
+    }
+    return round(value, 4).toString();
+}
+function getDefault2DAxes(format) {
+    switch (format) {
+        case 'hsla':
+            return { xChannel: 'saturation', yChannel: 'lightness' };
+        case 'hsba':
+        case 'rgba':
+        case 'oklch':
+        default:
+            return { xChannel: 'saturation', yChannel: 'brightness' };
+    }
+}
+function getDefault3DAxes(format) {
+    switch (format) {
+        case 'hsla':
+            return { xChannel: 'saturation', yChannel: 'lightness', zChannel: 'hue' };
+        case 'hsba':
+        case 'rgba':
+        case 'oklch':
+        default:
+            return { xChannel: 'saturation', yChannel: 'brightness', zChannel: 'hue' };
+    }
+}
+
+const INPUT_COLOR_INSTANCE = new InjectionToken('INPUT_COLOR_INSTANCE');
+const INPUT_COLOR_SLIDER_INSTANCE = new InjectionToken('INPUT_COLOR_SLIDER_INSTANCE');
+
+/**
+ * InputColorArea is a helper component for InputColor component.
+ * @group Components
+ */
+class InputColorArea extends BaseComponent {
+    componentName = 'InputColorArea';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    $pc = inject(INPUT_COLOR_INSTANCE);
+    $xChannel = computed(() => this.$pc.$axes().xChannel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$xChannel" }] : /* istanbul ignore next */ []));
+    $yChannel = computed(() => this.$pc.$axes().yChannel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$yChannel" }] : /* istanbul ignore next */ []));
+    $areaGradient = computed(() => {
+        const color = this.$pc.$color();
+        const xCh = this.$xChannel();
+        const yCh = this.$yChannel();
+        const format = this.$pc.format();
+        return getAreaGradient(color, xCh, yCh, format);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$areaGradient" }] : /* istanbul ignore next */ []));
+    $handleBackground = computed(() => this.$pc.$color().setChannelValue('alpha', 1).toRgbString(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$handleBackground" }] : /* istanbul ignore next */ []));
+    $handleLeft = computed(() => {
+        const xCh = this.$xChannel();
+        const range = getChannelRange(xCh);
+        const value = this.$pc.$color().getChannelValue(xCh);
+        const pct = ((value - range.minValue) / (range.maxValue - range.minValue)) * 100;
+        return `${pct}%`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$handleLeft" }] : /* istanbul ignore next */ []));
+    $handleTop = computed(() => {
+        const yCh = this.$yChannel();
+        const range = getChannelRange(yCh);
+        const value = this.$pc.$color().getChannelValue(yCh);
+        const pct = (1 - (value - range.minValue) / (range.maxValue - range.minValue)) * 100;
+        return `${pct}%`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$handleTop" }] : /* istanbul ignore next */ []));
+    dragging = false;
+    dragOffset = { x: 0, y: 0 };
+    cleanupDrag = null;
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    onPointerDown(event) {
+        if (this.$pc.$disabled())
+            return;
+        event.preventDefault();
+        this.dragging = true;
+        const el = this.el.nativeElement;
+        el.setPointerCapture(event.pointerId);
+        const handle = event.target?.closest('[data-pc-section="areahandle"], .p-inputcolor-area-handle');
+        if (handle) {
+            const handleRect = handle.getBoundingClientRect();
+            this.dragOffset = {
+                x: event.clientX - (handleRect.left + handleRect.width / 2),
+                y: event.clientY - (handleRect.top + handleRect.height / 2)
+            };
+        }
+        else {
+            this.dragOffset = { x: 0, y: 0 };
+        }
+        this.updateFromPointer(event);
+        const onMove = (e) => {
+            if (!this.dragging)
+                return;
+            e.preventDefault();
+            this.updateFromPointer(e);
+        };
+        const cleanup = () => {
+            this.dragging = false;
+            this.cleanupDrag = null;
+            el.removeEventListener('pointermove', onMove);
+            el.removeEventListener('pointerup', onUp);
+            el.removeEventListener('pointercancel', onCancel);
+            el.removeEventListener('lostpointercapture', onLostCapture);
+        };
+        this.cleanupDrag = cleanup;
+        const onUp = (e) => {
+            if (!this.dragging)
+                return;
+            this.updateFromPointer(e, true);
+            this.dragOffset = { x: 0, y: 0 };
+            cleanup();
+        };
+        const onCancel = () => {
+            cleanup();
+        };
+        const onLostCapture = () => {
+            cleanup();
+        };
+        el.addEventListener('pointermove', onMove);
+        el.addEventListener('pointerup', onUp);
+        el.addEventListener('pointercancel', onCancel);
+        el.addEventListener('lostpointercapture', onLostCapture);
+    }
+    ngOnDestroy() {
+        this.cleanupDrag?.();
+    }
+    updateFromPointer(event, isEnd = false) {
+        const el = this.el.nativeElement;
+        const rect = el.getBoundingClientRect();
+        const xPercent = Math.max(0, Math.min(1, (event.clientX - this.dragOffset.x - rect.left) / rect.width));
+        const yPercent = Math.max(0, Math.min(1, (event.clientY - this.dragOffset.y - rect.top) / rect.height));
+        const xCh = this.$xChannel();
+        const yCh = this.$yChannel();
+        const xRange = getChannelRange(xCh);
+        const yRange = getChannelRange(yCh);
+        const xValue = snapValue(xRange.minValue + xPercent * (xRange.maxValue - xRange.minValue), xRange.minValue, xRange.maxValue, xRange.step);
+        const yValue = snapValue(yRange.maxValue - yPercent * (yRange.maxValue - yRange.minValue), yRange.minValue, yRange.maxValue, yRange.step);
+        const nativeColor = this.$pc.toChannelNativeFormat(this.$pc.$color(), xCh);
+        let color = nativeColor.setChannelValue(xCh, xValue);
+        color = color.setChannelValue(yCh, yValue);
+        this.$pc.updateColor(color, event, isEnd);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorArea, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.3", type: InputColorArea, isStandalone: true, selector: "p-inputcolor-area", host: { listeners: { "pointerdown": "onPointerDown($event)" }, properties: { "class": "$pc.cx(\"area\")", "style.--px-area-gradient": "$areaGradient()", "style.--px-handle-background": "$handleBackground()", "style.--px-handle-position-left": "$handleLeft()", "style.--px-handle-position-top": "$handleTop()" } }, providers: [{ provide: PARENT_INSTANCE, useExisting: InputColorArea }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorArea, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-inputcolor-area',
+                    standalone: true,
+                    template: `<ng-content></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': '$pc.cx("area")',
+                        '[style.--px-area-gradient]': '$areaGradient()',
+                        '[style.--px-handle-background]': '$handleBackground()',
+                        '[style.--px-handle-position-left]': '$handleLeft()',
+                        '[style.--px-handle-position-top]': '$handleTop()',
+                        '(pointerdown)': 'onPointerDown($event)'
+                    },
+                    providers: [{ provide: PARENT_INSTANCE, useExisting: InputColorArea }],
+                    hostDirectives: [Bind]
+                }]
+        }] });
+
+/**
+ * InputColorAreaBackground is a helper component for InputColor component.
+ * @group Components
+ */
+class InputColorAreaBackground extends BaseComponent {
+    componentName = 'InputColorAreaBackground';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    $pc = inject(INPUT_COLOR_INSTANCE);
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorAreaBackground, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.3", type: InputColorAreaBackground, isStandalone: true, selector: "p-inputcolor-area-background", host: { properties: { "class": "$pc.cx(\"areaBackground\")" } }, providers: [{ provide: PARENT_INSTANCE, useExisting: InputColorAreaBackground }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorAreaBackground, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-inputcolor-area-background',
+                    standalone: true,
+                    template: `<ng-content></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': '$pc.cx("areaBackground")'
+                    },
+                    providers: [{ provide: PARENT_INSTANCE, useExisting: InputColorAreaBackground }],
+                    hostDirectives: [Bind]
+                }]
+        }] });
+
+/**
+ * InputColorAreaHandle is a helper component for InputColor component.
+ * @group Components
+ */
+class InputColorAreaHandle extends BaseComponent {
+    componentName = 'InputColorAreaHandle';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    $pc = inject(INPUT_COLOR_INSTANCE);
+    $xChannel = computed(() => this.$pc.$axes().xChannel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$xChannel" }] : /* istanbul ignore next */ []));
+    $yChannel = computed(() => this.$pc.$axes().yChannel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$yChannel" }] : /* istanbul ignore next */ []));
+    $xRange = computed(() => getChannelRange(this.$xChannel()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$xRange" }] : /* istanbul ignore next */ []));
+    $yRange = computed(() => getChannelRange(this.$yChannel()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$yRange" }] : /* istanbul ignore next */ []));
+    $xValue = computed(() => this.$pc.$color().getChannelValue(this.$xChannel()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$xValue" }] : /* istanbul ignore next */ []));
+    $yValue = computed(() => this.$pc.$color().getChannelValue(this.$yChannel()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$yValue" }] : /* istanbul ignore next */ []));
+    $xMin = computed(() => this.$xRange().minValue, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$xMin" }] : /* istanbul ignore next */ []));
+    $xMax = computed(() => this.$xRange().maxValue, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$xMax" }] : /* istanbul ignore next */ []));
+    $tabindex = computed(() => (this.$pc.$disabled() ? -1 : 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$tabindex" }] : /* istanbul ignore next */ []));
+    $ariaDisabled = computed(() => this.$pc.$disabled() || undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$ariaDisabled" }] : /* istanbul ignore next */ []));
+    $ariaValueText = computed(() => {
+        const xCh = this.$xChannel();
+        const yCh = this.$yChannel();
+        return `${xCh} ${this.$xValue()}, ${yCh} ${this.$yValue()}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$ariaValueText" }] : /* istanbul ignore next */ []));
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    onKeyDown(event) {
+        if (this.$pc.$disabled())
+            return;
+        const xCh = this.$xChannel();
+        const yCh = this.$yChannel();
+        const xRange = this.$xRange();
+        const yRange = this.$yRange();
+        let xVal = this.$xValue();
+        let yVal = this.$yValue();
+        let handled = false;
+        switch (event.key) {
+            case 'ArrowRight':
+                xVal = Math.min(xVal + xRange.step, xRange.maxValue);
+                handled = true;
+                break;
+            case 'ArrowLeft':
+                xVal = Math.max(xVal - xRange.step, xRange.minValue);
+                handled = true;
+                break;
+            case 'ArrowUp':
+                yVal = Math.min(yVal + yRange.step, yRange.maxValue);
+                handled = true;
+                break;
+            case 'ArrowDown':
+                yVal = Math.max(yVal - yRange.step, yRange.minValue);
+                handled = true;
+                break;
+            case 'PageUp':
+                yVal = Math.min(yVal + yRange.pageStep, yRange.maxValue);
+                handled = true;
+                break;
+            case 'PageDown':
+                yVal = Math.max(yVal - yRange.pageStep, yRange.minValue);
+                handled = true;
+                break;
+            case 'Home':
+                xVal = xRange.minValue;
+                handled = true;
+                break;
+            case 'End':
+                xVal = xRange.maxValue;
+                handled = true;
+                break;
+        }
+        if (handled) {
+            event.preventDefault();
+            const nativeColor = this.$pc.toChannelNativeFormat(this.$pc.$color(), xCh);
+            let color = nativeColor.setChannelValue(xCh, xVal);
+            color = color.setChannelValue(yCh, yVal);
+            this.$pc.updateColor(color, event, true);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorAreaHandle, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.3", type: InputColorAreaHandle, isStandalone: true, selector: "p-inputcolor-area-handle", host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class": "$pc.cx(\"areaHandle\")", "attr.role": "'slider'", "attr.tabindex": "$tabindex()", "attr.aria-label": "'Color'", "attr.aria-roledescription": "'2d slider'", "attr.aria-disabled": "$ariaDisabled()", "attr.aria-valuemin": "$xMin()", "attr.aria-valuemax": "$xMax()", "attr.aria-valuenow": "$xValue()", "attr.aria-valuetext": "$ariaValueText()" } }, providers: [{ provide: PARENT_INSTANCE, useExisting: InputColorAreaHandle }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorAreaHandle, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-inputcolor-area-handle',
+                    standalone: true,
+                    template: `<ng-content></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': '$pc.cx("areaHandle")',
+                        '[attr.role]': "'slider'",
+                        '[attr.tabindex]': '$tabindex()',
+                        '[attr.aria-label]': "'Color'",
+                        '[attr.aria-roledescription]': "'2d slider'",
+                        '[attr.aria-disabled]': '$ariaDisabled()',
+                        '[attr.aria-valuemin]': '$xMin()',
+                        '[attr.aria-valuemax]': '$xMax()',
+                        '[attr.aria-valuenow]': '$xValue()',
+                        '[attr.aria-valuetext]': '$ariaValueText()',
+                        '(keydown)': 'onKeyDown($event)'
+                    },
+                    providers: [{ provide: PARENT_INSTANCE, useExisting: InputColorAreaHandle }],
+                    hostDirectives: [Bind]
+                }]
+        }] });
+
+/**
+ * InputColorEyeDropper is a helper component for InputColor component.
+ * @group Components
+ */
+class InputColorEyeDropper extends BaseComponent {
+    componentName = 'InputColorEyeDropper';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    $pc = inject(INPUT_COLOR_INSTANCE);
+    /**
+     * Whether to display button as text.
+     * @group Props
+     */
+    text = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to display a rounded button.
+     * @group Props
+     */
+    rounded = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to display button as outlined.
+     * @group Props
+     */
+    outlined = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "outlined" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to display an icon-only button.
+     * @group Props
+     */
+    iconOnly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines the color severity of the button.
+     * @group Props
+     */
+    severity = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines the size of the button.
+     * @group Props
+     */
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    async onPickColor(event) {
+        if (this.$pc.$disabled())
+            return;
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        try {
+            const eyeDropper = new window.EyeDropper();
+            const result = await eyeDropper.open();
+            if (result?.sRGBHex) {
+                const parsed = parseColor(result.sRGBHex);
+                if (parsed) {
+                    this.$pc.updateColor(parsed, event, true);
+                }
+            }
+        }
+        catch {
+            // User cancelled or API not available
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorEyeDropper, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: InputColorEyeDropper, isStandalone: true, selector: "p-inputcolor-eyedropper", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "$pc.cx(\"eyeDropper\")" } }, providers: [{ provide: PARENT_INSTANCE, useExisting: InputColorEyeDropper }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        <ng-template #contentTpl><ng-content /></ng-template>
+        <button
+            pButton
+            type="button"
+            [pButtonPT]="ptm('pcButton')"
+            [text]="text()"
+            [rounded]="rounded()"
+            [outlined]="outlined()"
+            [severity]="severity()"
+            [size]="size()"
+            [disabled]="$pc.$disabled()"
+            (click)="onPickColor($event)"
+            [attr.aria-label]="'Pick a color'"
+        >
+            @if (iconOnly()) {
+                <span pButtonIcon>
+                    <ng-container *ngTemplateOutlet="contentTpl" />
+                </span>
+            } @else {
+                <ng-container *ngTemplateOutlet="contentTpl" />
+            }
+        </button>
+    `, isInline: true, dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["pButton", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "link", "rounded", "fluid", "variant", "iconOnly", "loading", "severity"] }, { kind: "directive", type: ButtonIcon, selector: "[pButtonIcon]", inputs: ["pButtonIconPT", "pButtonUnstyled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorEyeDropper, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-inputcolor-eyedropper',
+                    standalone: true,
+                    imports: [ButtonDirective, ButtonIcon, NgTemplateOutlet],
+                    template: `
+        <ng-template #contentTpl><ng-content /></ng-template>
+        <button
+            pButton
+            type="button"
+            [pButtonPT]="ptm('pcButton')"
+            [text]="text()"
+            [rounded]="rounded()"
+            [outlined]="outlined()"
+            [severity]="severity()"
+            [size]="size()"
+            [disabled]="$pc.$disabled()"
+            (click)="onPickColor($event)"
+            [attr.aria-label]="'Pick a color'"
+        >
+            @if (iconOnly()) {
+                <span pButtonIcon>
+                    <ng-container *ngTemplateOutlet="contentTpl" />
+                </span>
+            } @else {
+                <ng-container *ngTemplateOutlet="contentTpl" />
+            }
+        </button>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': '$pc.cx("eyeDropper")'
+                    },
+                    providers: [{ provide: PARENT_INSTANCE, useExisting: InputColorEyeDropper }],
+                    hostDirectives: [Bind]
+                }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+class InputColorInput extends BaseComponent {
+    componentName = 'InputColorInput';
+    $pc = inject(INPUT_COLOR_INSTANCE);
+    /**
+     * The color channel this input controls.
+     * @group Props
+     */
+    channel = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "channel" }] : /* istanbul ignore next */ []));
+    /**
+     * The input type attribute.
+     * @group Props
+     */
+    type = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "type" }] : /* istanbul ignore next */ []));
+    /**
+     * When present, it specifies that the input should be disabled.
+     * @group Props
+     */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    $disabled = computed(() => this.disabled() || this.$pc.$disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$disabled" }] : /* istanbul ignore next */ []));
+    $inputType = computed(() => {
+        const t = this.type();
+        if (t)
+            return t;
+        const ch = this.channel();
+        return ch === 'hex' || ch === 'css' ? 'text' : 'number';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$inputType" }] : /* istanbul ignore next */ []));
+    $displayValue = computed(() => {
+        const ch = this.channel();
+        const color = this.$pc.$color();
+        const format = this.$pc.format();
+        return getInputChannelValue(color, ch, format);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$displayValue" }] : /* istanbul ignore next */ []));
+    pendingValue = null;
+    constructor() {
+        super();
+        effect(() => {
+            this.el.nativeElement.type = this.$inputType();
+        });
+        effect(() => {
+            const el = this.el.nativeElement;
+            const ch = this.channel();
+            if (ch !== 'hex' && ch !== 'css') {
+                const range = getChannelRange(ch);
+                el.min = String(range.minValue);
+                el.max = String(range.maxValue);
+                el.step = String(range.step);
+            }
+        });
+        effect(() => {
+            this.el.nativeElement.value = String(this.$displayValue() ?? '');
+        });
+    }
+    onInput(event) {
+        const target = event.target;
+        this.pendingValue = target.value;
+    }
+    onBlur(event) {
+        this.commitValue(event);
+    }
+    onEnter(event) {
+        this.commitValue(event);
+    }
+    commitValue(event) {
+        if (this.pendingValue === null)
+            return;
+        const ch = this.channel();
+        const value = this.pendingValue;
+        this.pendingValue = null;
+        if (ch === 'hex') {
+            const hex = value.startsWith('#') ? value : `#${value}`;
+            const parsed = parseColor(hex);
+            if (parsed) {
+                this.$pc.updateColor(parsed, event, true);
+            }
+        }
+        else if (ch === 'css') {
+            const parsed = parseColor(value);
+            if (parsed) {
+                this.$pc.updateColor(parsed, event, true);
+            }
+        }
+        else {
+            const numValue = parseFloat(value);
+            if (!isNaN(numValue)) {
+                const range = getChannelRange(ch);
+                const clamped = Math.max(range.minValue, Math.min(range.maxValue, numValue));
+                this.$pc.setChannelValue(ch, clamped, event, true);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.3", type: InputColorInput, isStandalone: true, selector: "[pInputColorInput]", inputs: { channel: { classPropertyName: "channel", publicName: "channel", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "blur": "onBlur($event)", "keydown.enter": "onEnter($event)" }, properties: { "attr.disabled": "$disabled() || null", "attr.data-channel": "channel()" } }, providers: [{ provide: PARENT_INSTANCE, useExisting: InputColorInput }], usesInheritance: true, hostDirectives: [{ directive: i1$1.InputText, inputs: ["pSize", "pSize", "fluid", "fluid", "variant", "variant", "invalid", "invalid"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pInputColorInput]',
+                    standalone: true,
+                    host: {
+                        '[attr.disabled]': '$disabled() || null',
+                        '[attr.data-channel]': 'channel()',
+                        '(input)': 'onInput($event)',
+                        '(blur)': 'onBlur($event)',
+                        '(keydown.enter)': 'onEnter($event)'
+                    },
+                    providers: [{ provide: PARENT_INSTANCE, useExisting: InputColorInput }],
+                    hostDirectives: [
+                        {
+                            directive: InputText,
+                            inputs: ['pSize', 'fluid', 'variant', 'invalid']
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [], propDecorators: { channel: [{ type: i0.Input, args: [{ isSignal: true, alias: "channel", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * InputColorSlider is a helper component for InputColor component.
+ * @group Components
+ */
+class InputColorSlider extends BaseComponent {
+    componentName = 'InputColorSlider';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    $pc = inject(INPUT_COLOR_INSTANCE);
+    /**
+     * The color channel this slider controls.
+     * @group Props
+     */
+    channel = input('hue', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "channel" }] : /* istanbul ignore next */ []));
+    /**
+     * Orientation of the slider.
+     * @group Props
+     */
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    dragging = false;
+    cleanupDrag = null;
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    onPointerDown(event) {
+        if (this.$pc.$disabled())
+            return;
+        event.preventDefault();
+        this.dragging = true;
+        const el = this.el.nativeElement;
+        el.setPointerCapture(event.pointerId);
+        this.updateFromPointer(event);
+        const onMove = (e) => {
+            if (!this.dragging)
+                return;
+            e.preventDefault();
+            this.updateFromPointer(e);
+        };
+        const cleanup = () => {
+            this.dragging = false;
+            this.cleanupDrag = null;
+            el.removeEventListener('pointermove', onMove);
+            el.removeEventListener('pointerup', onUp);
+            el.removeEventListener('pointercancel', onCancel);
+            el.removeEventListener('lostpointercapture', onLostCapture);
+        };
+        this.cleanupDrag = cleanup;
+        const onUp = (e) => {
+            if (!this.dragging)
+                return;
+            this.updateFromPointer(e, true);
+            cleanup();
+        };
+        const onCancel = () => {
+            cleanup();
+        };
+        const onLostCapture = () => {
+            cleanup();
+        };
+        el.addEventListener('pointermove', onMove);
+        el.addEventListener('pointerup', onUp);
+        el.addEventListener('pointercancel', onCancel);
+        el.addEventListener('lostpointercapture', onLostCapture);
+    }
+    ngOnDestroy() {
+        this.cleanupDrag?.();
+    }
+    updateFromPointer(event, isEnd = false) {
+        const el = this.el.nativeElement;
+        const rect = el.getBoundingClientRect();
+        const ch = this.channel();
+        const range = getChannelRange(ch);
+        let percent;
+        if (this.orientation() === 'vertical') {
+            percent = 1 - Math.max(0, Math.min(1, (event.clientY - rect.top) / rect.height));
+        }
+        else {
+            percent = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));
+        }
+        const rawValue = range.minValue + percent * (range.maxValue - range.minValue);
+        const value = snapValue(rawValue, range.minValue, range.maxValue, range.step);
+        this.$pc.setChannelValue(ch, value, event, isEnd);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorSlider, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: InputColorSlider, isStandalone: true, selector: "p-inputcolor-slider", inputs: { channel: { classPropertyName: "channel", publicName: "channel", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "onPointerDown($event)" }, properties: { "class": "$pc.cx(\"slider\")", "class.p-inputcolor-slider-horizontal": "orientation() === \"horizontal\"", "class.p-inputcolor-slider-vertical": "orientation() === \"vertical\"", "attr.data-orientation": "orientation()" } }, providers: [
+            { provide: INPUT_COLOR_SLIDER_INSTANCE, useExisting: InputColorSlider },
+            { provide: PARENT_INSTANCE, useExisting: InputColorSlider }
+        ], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorSlider, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-inputcolor-slider',
+                    standalone: true,
+                    template: `<ng-content></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': '$pc.cx("slider")',
+                        '[class.p-inputcolor-slider-horizontal]': 'orientation() === "horizontal"',
+                        '[class.p-inputcolor-slider-vertical]': 'orientation() === "vertical"',
+                        '[attr.data-orientation]': 'orientation()',
+                        '(pointerdown)': 'onPointerDown($event)'
+                    },
+                    providers: [
+                        { provide: INPUT_COLOR_SLIDER_INSTANCE, useExisting: InputColorSlider },
+                        { provide: PARENT_INSTANCE, useExisting: InputColorSlider }
+                    ],
+                    hostDirectives: [Bind]
+                }]
+        }], propDecorators: { channel: [{ type: i0.Input, args: [{ isSignal: true, alias: "channel", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
+
+/**
+ * InputColorSliderHandle is a helper component for InputColor component.
+ * @group Components
+ */
+class InputColorSliderHandle extends BaseComponent {
+    componentName = 'InputColorSliderHandle';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    $pc = inject(INPUT_COLOR_INSTANCE);
+    pcSlider = inject(INPUT_COLOR_SLIDER_INSTANCE);
+    $channel = computed(() => this.pcSlider.channel(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$channel" }] : /* istanbul ignore next */ []));
+    $isVertical = computed(() => this.pcSlider.orientation() === 'vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$isVertical" }] : /* istanbul ignore next */ []));
+    $range = computed(() => getChannelRange(this.$channel()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$range" }] : /* istanbul ignore next */ []));
+    $value = computed(() => this.$pc.$color().getChannelValue(this.$channel()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$value" }] : /* istanbul ignore next */ []));
+    $tabindex = computed(() => (this.$pc.$disabled() ? -1 : 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$tabindex" }] : /* istanbul ignore next */ []));
+    $ariaDisabled = computed(() => this.$pc.$disabled() || undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$ariaDisabled" }] : /* istanbul ignore next */ []));
+    $handlePosition = computed(() => {
+        const range = this.$range();
+        const value = this.$value();
+        const pct = ((value - range.minValue) / (range.maxValue - range.minValue)) * 100;
+        return `${pct}%`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$handlePosition" }] : /* istanbul ignore next */ []));
+    $handlePositionVertical = computed(() => {
+        const range = this.$range();
+        const value = this.$value();
+        const pct = 100 - ((value - range.minValue) / (range.maxValue - range.minValue)) * 100;
+        return `${pct}%`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$handlePositionVertical" }] : /* istanbul ignore next */ []));
+    $left = computed(() => (this.$isVertical() ? null : this.$handlePosition()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$left" }] : /* istanbul ignore next */ []));
+    $top = computed(() => (this.$isVertical() ? this.$handlePositionVertical() : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$top" }] : /* istanbul ignore next */ []));
+    $translate = computed(() => (this.$isVertical() ? '0 -50%' : '-50% 0'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$translate" }] : /* istanbul ignore next */ []));
+    $handleColor = computed(() => getChannelColor(this.$pc.$color(), this.$channel()).toRgbString(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$handleColor" }] : /* istanbul ignore next */ []));
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    onKeyDown(event) {
+        if (this.$pc.$disabled())
+            return;
+        const ch = this.$channel();
+        const range = this.$range();
+        let value = this.$value();
+        let handled = false;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                value = Math.min(value + range.step, range.maxValue);
+                handled = true;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                value = Math.max(value - range.step, range.minValue);
+                handled = true;
+                break;
+            case 'PageUp':
+                value = Math.min(value + range.pageStep, range.maxValue);
+                handled = true;
+                break;
+            case 'PageDown':
+                value = Math.max(value - range.pageStep, range.minValue);
+                handled = true;
+                break;
+            case 'Home':
+                value = range.minValue;
+                handled = true;
+                break;
+            case 'End':
+                value = range.maxValue;
+                handled = true;
+                break;
+        }
+        if (handled) {
+            event.preventDefault();
+            this.$pc.setChannelValue(ch, value, event, true);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorSliderHandle, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.3", type: InputColorSliderHandle, isStandalone: true, selector: "p-inputcolor-slider-handle", host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class": "$pc.cx(\"sliderHandle\")", "style.--px-slider-handle-background": "$handleColor()", "style.left": "$left()", "style.top": "$top()", "style.translate": "$translate()", "attr.role": "'slider'", "attr.tabindex": "$tabindex()", "attr.aria-label": "$channel()", "attr.aria-disabled": "$ariaDisabled()", "attr.aria-valuemin": "$range().minValue", "attr.aria-valuemax": "$range().maxValue", "attr.aria-valuenow": "$value()" } }, providers: [{ provide: PARENT_INSTANCE, useExisting: InputColorSliderHandle }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorSliderHandle, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-inputcolor-slider-handle',
+                    standalone: true,
+                    template: `<ng-content></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': '$pc.cx("sliderHandle")',
+                        '[style.--px-slider-handle-background]': '$handleColor()',
+                        '[style.left]': '$left()',
+                        '[style.top]': '$top()',
+                        '[style.translate]': '$translate()',
+                        '[attr.role]': "'slider'",
+                        '[attr.tabindex]': '$tabindex()',
+                        '[attr.aria-label]': '$channel()',
+                        '[attr.aria-disabled]': '$ariaDisabled()',
+                        '[attr.aria-valuemin]': '$range().minValue',
+                        '[attr.aria-valuemax]': '$range().maxValue',
+                        '[attr.aria-valuenow]': '$value()',
+                        '(keydown)': 'onKeyDown($event)'
+                    },
+                    providers: [{ provide: PARENT_INSTANCE, useExisting: InputColorSliderHandle }],
+                    hostDirectives: [Bind]
+                }]
+        }] });
+
+/**
+ * InputColorSliderTrack is a helper component for InputColor component.
+ * @group Components
+ */
+class InputColorSliderTrack extends BaseComponent {
+    componentName = 'InputColorSliderTrack';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    $pc = inject(INPUT_COLOR_INSTANCE);
+    pcSlider = inject(INPUT_COLOR_SLIDER_INSTANCE);
+    $gradient = computed(() => {
+        const ch = this.pcSlider.channel();
+        const color = this.$pc.$color();
+        const orientation = this.pcSlider.orientation();
+        return getChannelGradient(color, ch, orientation);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$gradient" }] : /* istanbul ignore next */ []));
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorSliderTrack, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.3", type: InputColorSliderTrack, isStandalone: true, selector: "p-inputcolor-slider-track", host: { properties: { "class": "$pc.cx(\"sliderTrack\")", "style.--px-slider-background": "$gradient()" } }, providers: [{ provide: PARENT_INSTANCE, useExisting: InputColorSliderTrack }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorSliderTrack, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-inputcolor-slider-track',
+                    standalone: true,
+                    template: `<ng-content></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': '$pc.cx("sliderTrack")',
+                        '[style.--px-slider-background]': '$gradient()'
+                    },
+                    providers: [{ provide: PARENT_INSTANCE, useExisting: InputColorSliderTrack }],
+                    hostDirectives: [Bind]
+                }]
+        }] });
+
+/**
+ * InputColorSwatch is a helper component for InputColor component.
+ * @group Components
+ */
+class InputColorSwatch extends BaseComponent {
+    componentName = 'InputColorSwatch';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    $pc = inject(INPUT_COLOR_INSTANCE);
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorSwatch, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.3", type: InputColorSwatch, isStandalone: true, selector: "p-inputcolor-swatch", host: { properties: { "class": "$pc.cx(\"swatch\")" } }, providers: [{ provide: PARENT_INSTANCE, useExisting: InputColorSwatch }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorSwatch, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-inputcolor-swatch',
+                    standalone: true,
+                    template: `<ng-content></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': '$pc.cx("swatch")'
+                    },
+                    providers: [{ provide: PARENT_INSTANCE, useExisting: InputColorSwatch }],
+                    hostDirectives: [Bind]
+                }]
+        }] });
+
+/**
+ * InputColorSwatchBackground is a helper component for InputColor component.
+ * @group Components
+ */
+class InputColorSwatchBackground extends BaseComponent {
+    componentName = 'InputColorSwatchBackground';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    $pc = inject(INPUT_COLOR_INSTANCE);
+    $swatchColor = computed(() => this.$pc.$color().toRgbString(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$swatchColor" }] : /* istanbul ignore next */ []));
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorSwatchBackground, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.3", type: InputColorSwatchBackground, isStandalone: true, selector: "p-inputcolor-swatch-background", host: { properties: { "class": "$pc.cx(\"swatchBackground\")", "style.--px-swatch-background": "$swatchColor()" } }, providers: [{ provide: PARENT_INSTANCE, useExisting: InputColorSwatchBackground }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorSwatchBackground, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-inputcolor-swatch-background',
+                    standalone: true,
+                    template: `<ng-content></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': '$pc.cx("swatchBackground")',
+                        '[style.--px-swatch-background]': '$swatchColor()'
+                    },
+                    providers: [{ provide: PARENT_INSTANCE, useExisting: InputColorSwatchBackground }],
+                    hostDirectives: [Bind]
+                }]
+        }] });
+
+/**
+ * InputColorTransparencyGrid is a helper component for InputColor component.
+ * @group Components
+ */
+class InputColorTransparencyGrid extends BaseComponent {
+    componentName = 'InputColorTransparencyGrid';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    $pc = inject(INPUT_COLOR_INSTANCE);
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorTransparencyGrid, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.3", type: InputColorTransparencyGrid, isStandalone: true, selector: "p-inputcolor-transparency-grid", host: { properties: { "class": "$pc.cx(\"transparencyGrid\")" } }, providers: [{ provide: PARENT_INSTANCE, useExisting: InputColorTransparencyGrid }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorTransparencyGrid, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-inputcolor-transparency-grid',
+                    standalone: true,
+                    template: `<ng-content></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': '$pc.cx("transparencyGrid")'
+                    },
+                    providers: [{ provide: PARENT_INSTANCE, useExisting: InputColorTransparencyGrid }],
+                    hostDirectives: [Bind]
+                }]
+        }] });
+
+const classes = {
+    root: 'p-inputcolor p-component',
+    area: 'p-inputcolor-area',
+    areaHandle: ({ instance }) => ['p-inputcolor-area-handle', { 'p-disabled': instance.$disabled() }],
+    areaBackground: 'p-inputcolor-area-background',
+    slider: 'p-inputcolor-slider',
+    sliderHandle: ({ instance }) => ['p-inputcolor-slider-handle', { 'p-disabled': instance.$disabled() }],
+    sliderTrack: 'p-inputcolor-slider-track',
+    transparencyGrid: 'p-inputcolor-transparency-grid',
+    swatch: 'p-inputcolor-swatch',
+    swatchBackground: 'p-inputcolor-swatch-background',
+    eyeDropper: 'p-inputcolor-eyedropper'
+};
+class InputColorStyle extends BaseStyle {
+    name = 'inputcolor';
+    style = style;
+    classes = classes;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * InputColor is a composable color picker component.
+ *
+ * [Live Demo](https://www.primeng.org/inputcolor/)
+ *
+ * @module inputcolorstyle
+ *
+ */
+var InputColorClasses;
+(function (InputColorClasses) {
+    /**
+     * Class name of the root element
+     */
+    InputColorClasses["root"] = "p-inputcolor";
+    /**
+     * Class name of the area element
+     */
+    InputColorClasses["area"] = "p-inputcolor-area";
+    /**
+     * Class name of the area background element
+     */
+    InputColorClasses["areaBackground"] = "p-inputcolor-area-background";
+    /**
+     * Class name of the area handle element
+     */
+    InputColorClasses["areaHandle"] = "p-inputcolor-area-handle";
+    /**
+     * Class name of the slider element
+     */
+    InputColorClasses["slider"] = "p-inputcolor-slider";
+    /**
+     * Class name of the slider track element
+     */
+    InputColorClasses["sliderTrack"] = "p-inputcolor-slider-track";
+    /**
+     * Class name of the slider handle element
+     */
+    InputColorClasses["sliderHandle"] = "p-inputcolor-slider-handle";
+    /**
+     * Class name of the swatch element
+     */
+    InputColorClasses["swatch"] = "p-inputcolor-swatch";
+    /**
+     * Class name of the swatch background element
+     */
+    InputColorClasses["swatchBackground"] = "p-inputcolor-swatch-background";
+    /**
+     * Class name of the transparency grid element
+     */
+    InputColorClasses["transparencyGrid"] = "p-inputcolor-transparency-grid";
+    /**
+     * Class name of the input element
+     */
+    InputColorClasses["input"] = "p-inputcolor-input";
+    /**
+     * Class name of the eye dropper element
+     */
+    InputColorClasses["eyeDropper"] = "p-inputcolor-eyedropper";
+})(InputColorClasses || (InputColorClasses = {}));
+
+const INPUT_COLOR_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => InputColor),
+    multi: true
+};
+/**
+ * InputColor is a composable color picker component.
+ * @group Components
+ */
+class InputColor extends BaseComponent {
+    componentName = 'InputColor';
+    bindDirectiveInstance = inject(Bind, { self: true });
+    _componentStyle = inject(InputColorStyle);
+    /**
+     * Color format/space used internally.
+     * @group Props
+     */
+    format = input('hsba', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @group Props
+     */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _disabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    $disabled = computed(() => this.disabled() || this._disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$disabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Callback on value change (during interaction).
+     * @group Emits
+     */
+    onValueChange = output();
+    /**
+     * Callback when interaction ends (mouseup/touchend/keyup).
+     * @group Emits
+     */
+    onValueChangeEnd = output();
+    // Internal color state
+    _color = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    // Computed color - resolved from internal state or fallback
+    $color = computed(() => {
+        return this._color() || parseColor('#ff0000').toFormat(this.format());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$color" }] : /* istanbul ignore next */ []));
+    // Computed 2D axes based on format
+    $axes = computed(() => getDefault2DAxes(this.format()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$axes" }] : /* istanbul ignore next */ []));
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    /**
+     * Update color and emit changes
+     */
+    updateColor(color, event, isEnd = false) {
+        this._color.set(color);
+        const outputValue = color.toString(this.format());
+        this.onModelChange(outputValue);
+        this.onValueChange.emit({ color, originalEvent: event });
+        if (isEnd) {
+            this.onValueChangeEnd.emit({ color, originalEvent: event });
+            this.onModelTouched();
+        }
+    }
+    /**
+     * Set a specific channel value
+     */
+    setChannelValue(channel, value, event, isEnd = false) {
+        const color = this.toChannelNativeFormat(this.$color(), channel);
+        const newColor = color.setChannelValue(channel, value);
+        this.updateColor(newColor, event, isEnd);
+    }
+    onModelChange = () => { };
+    onModelTouched = () => { };
+    registerOnChange(fn) {
+        this.onModelChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onModelTouched = fn;
+    }
+    setDisabledState(val) {
+        this._disabled.set(val);
+    }
+    writeValue(value) {
+        if (value) {
+            const current = this._color();
+            if (current && current.toString(this.format()) === value) {
+                return;
+            }
+            const parsed = parseColor(value);
+            if (parsed) {
+                this._color.set(parsed.toFormat(this.format()));
+            }
+        }
+        else {
+            this._color.set(null);
+        }
+    }
+    toChannelNativeFormat(color, channel) {
+        // If the current color natively supports this channel, don't convert
+        if (color instanceof HSBColor && (channel === 'hue' || channel === 'saturation' || channel === 'brightness'))
+            return color;
+        if (color instanceof HSLColor && (channel === 'hue' || channel === 'saturation' || channel === 'lightness'))
+            return color;
+        if (color instanceof RGBColor && (channel === 'red' || channel === 'green' || channel === 'blue'))
+            return color;
+        if (color instanceof OKLCHColor && (channel === 'oklchLightness' || channel === 'oklchChroma' || channel === 'oklchHue' || channel === 'L' || channel === 'C' || channel === 'H'))
+            return color;
+        // Otherwise convert to the appropriate format
+        switch (channel) {
+            case 'hue':
+            case 'saturation':
+            case 'brightness':
+                return color.toHSB();
+            case 'lightness':
+                return color.toHSL();
+            case 'red':
+            case 'green':
+            case 'blue':
+                return color.toRGB();
+            case 'oklchLightness':
+            case 'oklchChroma':
+            case 'oklchHue':
+            case 'L':
+            case 'C':
+            case 'H':
+                return color.toOKLCH();
+            case 'alpha':
+            default:
+                return color;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColor, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: InputColor, isStandalone: true, selector: "p-inputcolor, p-input-color", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChange: "onValueChange", onValueChangeEnd: "onValueChangeEnd" }, host: { properties: { "attr.data-pc-name": "'inputcolor'", "attr.data-pc-section": "'root'", "class": "cx('root')" } }, providers: [INPUT_COLOR_VALUE_ACCESSOR, InputColorStyle, { provide: INPUT_COLOR_INSTANCE, useExisting: InputColor }, { provide: PARENT_INSTANCE, useExisting: InputColor }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColor, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-inputcolor, p-input-color',
+                    standalone: true,
+                    imports: [SharedModule],
+                    template: `<ng-content></ng-content>`,
+                    providers: [INPUT_COLOR_VALUE_ACCESSOR, InputColorStyle, { provide: INPUT_COLOR_INSTANCE, useExisting: InputColor }, { provide: PARENT_INSTANCE, useExisting: InputColor }],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[attr.data-pc-name]': "'inputcolor'",
+                        '[attr.data-pc-section]': "'root'",
+                        '[class]': "cx('root')"
+                    },
+                    hostDirectives: [Bind]
+                }]
+        }], propDecorators: { format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }], onValueChangeEnd: [{ type: i0.Output, args: ["onValueChangeEnd"] }] } });
+class InputColorModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.3", ngImport: i0, type: InputColorModule, imports: [InputColor, InputColorArea,
+            InputColorAreaHandle,
+            InputColorAreaBackground,
+            InputColorSlider,
+            InputColorSliderHandle,
+            InputColorSliderTrack,
+            InputColorSwatch,
+            InputColorSwatchBackground,
+            InputColorTransparencyGrid,
+            InputColorInput,
+            InputColorEyeDropper,
+            SharedModule], exports: [InputColor, InputColorArea,
+            InputColorAreaHandle,
+            InputColorAreaBackground,
+            InputColorSlider,
+            InputColorSliderHandle,
+            InputColorSliderTrack,
+            InputColorSwatch,
+            InputColorSwatchBackground,
+            InputColorTransparencyGrid,
+            InputColorInput,
+            InputColorEyeDropper,
+            SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorModule, imports: [InputColor,
+            SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: InputColorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        InputColor,
+                        InputColorArea,
+                        InputColorAreaHandle,
+                        InputColorAreaBackground,
+                        InputColorSlider,
+                        InputColorSliderHandle,
+                        InputColorSliderTrack,
+                        InputColorSwatch,
+                        InputColorSwatchBackground,
+                        InputColorTransparencyGrid,
+                        InputColorInput,
+                        InputColorEyeDropper,
+                        SharedModule
+                    ],
+                    exports: [
+                        InputColor,
+                        InputColorArea,
+                        InputColorAreaHandle,
+                        InputColorAreaBackground,
+                        InputColorSlider,
+                        InputColorSliderHandle,
+                        InputColorSliderTrack,
+                        InputColorSwatch,
+                        InputColorSwatchBackground,
+                        InputColorTransparencyGrid,
+                        InputColorInput,
+                        InputColorEyeDropper,
+                        SharedModule
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Color, HSBColor, HSLColor, INPUT_COLOR_INSTANCE, INPUT_COLOR_SLIDER_INSTANCE, INPUT_COLOR_VALUE_ACCESSOR, InputColor, InputColorArea, InputColorAreaBackground, InputColorAreaHandle, InputColorClasses, InputColorEyeDropper, InputColorInput, InputColorModule, InputColorSlider, InputColorSliderHandle, InputColorSliderTrack, InputColorStyle, InputColorSwatch, InputColorSwatchBackground, InputColorTransparencyGrid, OKLCHColor, RGBColor, getAreaGradient, getChannelColor, getChannelGradient, getChannelRange, getDefault2DAxes, getDefault3DAxes, getInputChannelRange, getInputChannelValue, parseColor, snapValue };
+//# sourceMappingURL=primenglab-inputcolor.mjs.map