@xplortech/apollo-core 2.11.0 → 3.0.0

package/dist/esm/xpl-input-color.entry.js

@@ -0,0 +1,433 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-ukZKsqqq.js';
+import { i as isBrowser } from './lifecycle-Dqb1pIRo.js';
+
+const hslaToRgba = (hue, saturation, lightness, alpha) => {
+    saturation /= 100;
+    lightness /= 100;
+    const k = (n) => (n + hue / 30) % 12;
+    const aTemp = saturation * Math.min(lightness, 1 - lightness);
+    const f = (n) => lightness - aTemp * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+    const r = Math.round(f(0) * 255);
+    const g = Math.round(f(8) * 255);
+    const b = Math.round(f(4) * 255);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+const hsvToRgb = (h, s, v) => {
+    s /= 100;
+    v /= 100;
+    const c = v * s;
+    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+    const m = v - c;
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    if (h < 60) {
+        r = c;
+        g = x;
+        b = 0;
+    }
+    else if (h < 120) {
+        r = x;
+        g = c;
+        b = 0;
+    }
+    else if (h < 180) {
+        r = 0;
+        g = c;
+        b = x;
+    }
+    else if (h < 240) {
+        r = 0;
+        g = x;
+        b = c;
+    }
+    else if (h < 300) {
+        r = x;
+        g = 0;
+        b = c;
+    }
+    else {
+        r = c;
+        g = 0;
+        b = x;
+    }
+    return {
+        r: Math.round((r + m) * 255),
+        g: Math.round((g + m) * 255),
+        b: Math.round((b + m) * 255),
+    };
+};
+const rgbToHsl = (rInput, gInput, bInput) => {
+    const r = rInput / 255;
+    const g = gInput / 255;
+    const b = bInput / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const delta = max - min;
+    let hue = 0;
+    let saturation = 0;
+    const lightness = (max + min) / 2;
+    if (delta !== 0) {
+        saturation = delta / (1 - Math.abs(2 * lightness - 1));
+        switch (max) {
+            case r:
+                hue = ((g - b) / delta) % 6;
+                break;
+            case g:
+                hue = (b - r) / delta + 2;
+                break;
+            case b:
+                hue = (r - g) / delta + 4;
+                break;
+        }
+        hue *= 60;
+        if (hue < 0)
+            hue += 360;
+    }
+    return {
+        hue: Math.round(hue),
+        saturation: Math.round(saturation * 100),
+        lightness: Math.round(lightness * 100),
+    };
+};
+const rgbToHsv = (r, g, b, fixedHue) => {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const delta = max - min;
+    let h = 0;
+    if (delta === 0)
+        h = 0;
+    else if (max === r)
+        h = ((g - b) / delta) % 6;
+    else if (max === g)
+        h = (b - r) / delta + 2;
+    else
+        h = (r - g) / delta + 4;
+    h = Math.round(h * 60);
+    if (h < 0)
+        h += 360;
+    const s = max === 0 ? 0 : delta / max;
+    const v = max;
+    return {
+        h: fixedHue ?? h,
+        s,
+        v,
+    };
+};
+const hexToRgb = (hex) => {
+    const pairs = hex?.match(/\w\w/g);
+    return pairs ? pairs.map((x) => parseInt(x, 16)) : [0, 0, 0];
+};
+const rgbToHex = (r, g, b) => [r, g, b].map((x) => x.toString(16).padStart(2, '0')).join('');
+const stringToObjectColor = (input) => {
+    if (input.startsWith('#')) {
+        if (!/^#([a-fA-F\d]{6})$/.test(input)) {
+            throw new Error('xpl-input-color: Only 6-digit hex format supported (e.g. #aabbcc)');
+        }
+        const hex = input.toLowerCase().slice(1);
+        const r = parseInt(hex.slice(0, 2), 16);
+        const g = parseInt(hex.slice(2, 4), 16);
+        const b = parseInt(hex.slice(4, 6), 16);
+        return { hex, r, g, b, a: 1 };
+    }
+    if (input.startsWith('rgba') || input.startsWith('rgb')) {
+        const match = input.match(/[\d.]+/g)?.map(Number);
+        if (!match || match.length < 3) {
+            throw new Error('xpl-input-color: Invalid rgba/rgb format');
+        }
+        const [r, g, b, a = 1] = match;
+        const toHex = (n) => n.toString(16).padStart(2, '0');
+        const hex = `${toHex(r)}${toHex(g)}${toHex(b)}`;
+        return { hex: hex.toLowerCase(), r, g, b, a };
+    }
+    if (input.startsWith('hsla') || input.startsWith('hsl')) {
+        const match = input.match(/[\d.]+/g)?.map(Number);
+        if (!match || match.length < 3) {
+            throw new Error('xpl-input-color: Invalid hsla/hsl format');
+        }
+        const [hue, saturation, lightness, alpha = 1] = match;
+        const rgba = hslaToRgba(hue, saturation, lightness, alpha);
+        const rgbaParts = rgba.match(/[\d.]+/g)?.map(Number);
+        if (!rgbaParts || rgbaParts.length < 3) {
+            throw new Error('xpl-input-color: Invalid hsla/hsl format');
+        }
+        const [r, g, b] = rgbaParts;
+        const hex = rgbToHex(r, g, b);
+        return { hex: hex.toLowerCase(), r, g, b, a: alpha };
+    }
+    throw new Error('xpl-input-color: Unsupported color format');
+};
+const objectToStringColor = (color) => {
+    if (!color.a || color.a === 1) {
+        return `#${color.hex}`;
+    }
+    return `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`;
+};
+const reverseCursorPosition = (hue, color, width, height) => {
+    const { s, v } = rgbToHsv(color.r, color.g, color.b, hue);
+    return {
+        x: Math.round(s * width),
+        y: Math.round((1 - v) * height),
+    };
+};
+
+const fallbackColorValues = {
+    hex: '',
+    r: 0,
+    g: 0,
+    b: 0,
+    a: 1,
+};
+const InputColor = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.inputChange = createEvent(this, "inputChange", 7);
+        this.hasErrorStateChanged = createEvent(this, "hasErrorStateChanged", 7);
+        this.placeholder = 'Select color';
+        this.eyeDropperSupported = false;
+        this.colorInputElements = {};
+        this.handleMove = (e) => {
+            const { slGrid } = this.colorInputElements;
+            if (!slGrid) {
+                return;
+            }
+            const rect = slGrid.getBoundingClientRect();
+            const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+            const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+            const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
+            const y = Math.max(0, Math.min(clientY - rect.top, rect.height));
+            const xRatio = x / rect.width;
+            const yRatio = y / rect.height;
+            const base = hsvToRgb(this.hue, 100, 100);
+            const r1 = (1 - xRatio) * 255 + xRatio * base.r;
+            const g1 = (1 - xRatio) * 255 + xRatio * base.g;
+            const b1 = (1 - xRatio) * 255 + xRatio * base.b;
+            const r = r1 * (1 - yRatio);
+            const g = g1 * (1 - yRatio);
+            const b = b1 * (1 - yRatio);
+            const newColor = {
+                r: Math.round(r),
+                g: Math.round(g),
+                b: Math.round(b),
+                hex: rgbToHex(Math.round(r), Math.round(g), Math.round(b)),
+                a: this.colorValues.a,
+            };
+            this.colorValues = newColor;
+        };
+        this.startDrag = (e) => {
+            e.preventDefault();
+            this.handleMove(e);
+            window.addEventListener('mousemove', this.handleMove);
+            window.addEventListener('mouseup', this.stopDrag);
+            window.addEventListener('touchmove', this.handleMove);
+            window.addEventListener('touchend', this.stopDrag);
+        };
+        this.stopDrag = () => {
+            window.removeEventListener('mousemove', this.handleMove);
+            window.removeEventListener('mouseup', this.stopDrag);
+            window.removeEventListener('touchmove', this.handleMove);
+            window.removeEventListener('touchend', this.stopDrag);
+        };
+        this.onHexInputChange = (event) => {
+            const hex = event.detail ? event.detail.trim().replace(/#/g, '') : '';
+            if (hex) {
+                const [r, g, b] = hexToRgb(hex);
+                this.colorValues = {
+                    hex,
+                    r,
+                    g,
+                    b,
+                    a: this.colorValues.a ?? 1,
+                };
+            }
+            else {
+                this.colorValues = { ...fallbackColorValues };
+            }
+        };
+        this.onRgbaInputChange = (el, event) => {
+            const value = parseFloat(event.detail);
+            if (Number.isNaN(value)) {
+                this.hasErrorState = `invalid value from ${el.name}: ${value}`;
+                return;
+            }
+            const newColor = { ...this.colorValues };
+            switch (el.name) {
+                case 'color-r-input':
+                    newColor.r = value;
+                    break;
+                case 'color-g-input':
+                    newColor.g = value;
+                    break;
+                case 'color-b-input':
+                    newColor.b = value;
+                    break;
+                case 'color-a-input':
+                    newColor.a = value;
+                    break;
+                default:
+                    this.hasErrorState = `unhandled input: ${el.name}`;
+                    break;
+            }
+            newColor.hex = rgbToHex(newColor.r, newColor.g, newColor.b);
+            this.colorValues = newColor;
+        };
+        this.onSliderInputChange = (el) => {
+            const value = parseFloat(el.value);
+            if (Number.isNaN(value)) {
+                this.hasErrorState = `invalid value from ${el.name}: ${value}`;
+                return;
+            }
+            switch (el.name) {
+                case 'color-hue-slider':
+                    this.colorValues = stringToObjectColor(`hsla(${value}, 100%, 50%, 1)`);
+                    this.hue = value;
+                    break;
+                case 'color-alpha-slider':
+                    this.colorValues = {
+                        ...this.colorValues,
+                        a: value,
+                    };
+                    break;
+                default:
+                    this.hasErrorState = `unhandled input: ${el.name}`;
+                    break;
+            }
+        };
+    }
+    valueChanged(newValue) {
+        this.hasErrorState = this.required && !newValue.hex ? 'required' : null;
+        if (newValue.hex) {
+            this.inputChange.emit(objectToStringColor(newValue));
+        }
+        else {
+            this.inputChange.emit('');
+        }
+    }
+    onHasErrorStateChanged(newValue) {
+        this.hasErrorStateChanged.emit(newValue);
+    }
+    onValuePropChange(newValue) {
+        this.syncColorFromValue(newValue);
+    }
+    syncColorFromValue(value) {
+        if (value) {
+            try {
+                this.colorValues = stringToObjectColor(value);
+                this.hue = rgbToHsl(this.colorValues.r, this.colorValues.g, this.colorValues.b).hue;
+            }
+            catch {
+                this.hasErrorState = 'invalid color format';
+                this.hue = 0;
+            }
+        }
+        else {
+            this.colorValues = { ...fallbackColorValues };
+            this.hasErrorState = null;
+            this.hue = 0;
+        }
+    }
+    componentWillLoad() {
+        this.syncColorFromValue(this.value);
+    }
+    componentDidLoad() {
+        if (isBrowser()) {
+            this.eyeDropperSupported = 'EyeDropper' in window;
+        }
+        const { r, g, b, a, hue, alpha, hex } = this.colorInputElements;
+        hex?.addEventListener('valueChange', (e) => {
+            this.onHexInputChange(e);
+            e.stopPropagation();
+        });
+        [r, g, b, a].forEach((el) => {
+            el?.addEventListener('valueChange', (e) => {
+                this.onRgbaInputChange(el, e);
+                e.stopPropagation();
+            });
+        });
+        [hue, alpha].forEach((el) => {
+            el?.addEventListener('input', () => {
+                this.onSliderInputChange(el);
+            });
+        });
+    }
+    async openEyeDropper() {
+        try {
+            const EyeDropperConstructor = window.EyeDropper;
+            if (!EyeDropperConstructor) {
+                throw new Error('EyeDropper API is not available');
+            }
+            const eyeDropper = new EyeDropperConstructor();
+            const result = await eyeDropper.open();
+            this.colorValues = stringToObjectColor(result.sRGBHex);
+        }
+        catch (err) {
+            this.hasErrorState = `eyedropper cancelled or failed: ${err}`;
+        }
+    }
+    render() {
+        const { r, g, b, a } = this.colorValues;
+        const hueBaseColor = hsvToRgb(this.hue, 100, 100);
+        const { x, y } = reverseCursorPosition(this.hue, { r, g, b }, 288, 160);
+        const slThumbStyle = {
+            left: `${x}px`,
+            top: `${y}px`,
+            background: `rgb(${r}, ${g}, ${b})`,
+        };
+        return (h(Host, { key: '2c4bff1c1b56afdc1b4192a2d7c1e0a1f5ebc073', class: "xpl-input-color" }, h("xpl-popover", { key: 'ba545a5022a532ef2fde8c795bee19f2680514c1', disabled: this.disabled, display: "menu" }, h("div", { key: '180e066079da1a97ba31bcaf66d443df8a0c48ca', slot: "trigger" }, h("div", { key: 'c3cc0cb1484c4111b60b736b750571552437d0cf', class: {
+                'xpl-input-color__display': true,
+                'xpl-input-color__display--disabled': !!this.disabled,
+                'xpl-input-color__display--error': !!this.hasErrorState,
+            } }, h("span", { key: '72aaff4e9a54da1f766d1de85bd58216c866a4b7', class: "xpl-input-color__color", style: {
+                background: objectToStringColor(this.colorValues),
+            } }), this.colorValues.hex ? (h("span", { class: "xpl-input-color__value" }, objectToStringColor(this.colorValues))) : (h("span", { class: "xpl-input-color__placeholder" }, this.placeholder)), this.eyeDropperSupported && !this.hideEyeDropper && (h("xpl-icon", { key: 'f55cfde9a119e9f0de379bc1bfb5b5d4b53aa992', size: 20, icon: "eye-dropper", class: "xpl-input-color__icon", onClick: (e) => {
+                e.stopPropagation();
+                this.openEyeDropper();
+            } })))), h("div", { key: 'f80f215000d3a906d65f7f6673c6d8eaabe3fc6d', class: "xpl-input-color__menu" }, h("div", { key: '4701c99f8a528900c34005b7c26d9fa544b664d8', class: "xpl-input-color__sl-grid", ref: (el) => {
+                this.colorInputElements.slGrid = el ?? undefined;
+            }, style: {
+                background: [
+                    `linear-gradient(to top, #000, #0000)`,
+                    `linear-gradient(to right, #fff, #fff0)`,
+                    `rgb(${hueBaseColor.r} ${hueBaseColor.g} ${hueBaseColor.b})`,
+                ].join(', '),
+            }, onMouseDown: this.startDrag, onTouchStart: this.startDrag }, h("div", { key: '3e0ec5c0821dfed35190053f5e4f147cb7b55eb0', class: "xpl-input-color__sl-thumb", style: slThumbStyle })), h("div", { key: '1b278a13c88aa663a2b8217fbc3524ee213e0f3b', class: "xpl-input-color__grid" }, h("input", { key: '5e35bdd6e7776848a2d2eb32a00deb3ec349c21d', type: "range", min: "0", max: "360", value: this.hue, class: "xpl-input-color__slider xpl-input-color__hue", name: "color-hue-slider", ref: (el) => {
+                this.colorInputElements.hue = el ?? undefined;
+            } }), h("input", { key: '1119341201878e5c8511fa3e241afba15eab6d9b', type: "range", min: "0", max: "1", step: "0.01", value: a, class: "xpl-input-color__slider xpl-input-color__alpha", name: "color-alpha-slider", ref: (el) => {
+                this.colorInputElements.alpha = el ?? undefined;
+            }, style: {
+                backgroundImage: [
+                    `linear-gradient(to right, rgb(${r} ${g} ${b} / 0) 0%, rgb(${r} ${g} ${b} / 1) 100%)`,
+                    `linear-gradient(45deg, #ccc 25%, transparent 25%)`,
+                    `linear-gradient(-45deg, #ccc 25%, transparent 25%)`,
+                    `linear-gradient(45deg, transparent 75%, #ccc 75%)`,
+                    `linear-gradient(-45deg, transparent 75%, #ccc 75%)`,
+                ].join(', '),
+            } }), h("div", { key: '3804928b107e92bddbc3afa3fa883caafddbd06b', class: "xpl-input-color__preview", style: {
+                background: `rgba(${r}, ${g}, ${b}, ${a})`,
+            } })), h("div", { key: '86961ee31d82724a76f6598bd547c8e650e27f24', class: "xpl-input-color__inputs" }, [
+            'hex',
+            'r',
+            'g',
+            'b',
+            'a',
+        ].map((key) => (h("xpl-input", { key: key, label: key.toLocaleUpperCase(), name: `color-${key}-input`, placeholder: key === 'hex' ? '793EF7' : '0', value: String(this.colorValues[key]), ref: (elRef) => {
+                this.colorInputElements[key] = elRef ?? undefined;
+            } }))))))));
+    }
+    static get watchers() { return {
+        "colorValues": [{
+                "valueChanged": 0
+            }],
+        "hasErrorState": [{
+                "onHasErrorStateChanged": 0
+            }],
+        "value": [{
+                "onValuePropChange": 0
+            }]
+    }; }
+};
+
+export { InputColor as xpl_input_color };