@ship-ui/core 0.19.5 → 0.22.0

package/fesm2022/ship-ui-core-ship-color-picker.mjs

@@ -0,0 +1,947 @@
+import { isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, DOCUMENT, PLATFORM_ID, viewChild, signal, input, model, output, computed, effect, untracked, HostListener, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { rgbToHex, rgbToHsl, rgbaToHex8, rgbToHsv, hsvToRgbExact, hslToRgbExact, classMutationSignal, contentProjectionSignal } from '@ship-ui/core';
+import { ShipButton } from '@ship-ui/core/ship-button';
+import { ShipFormFieldPopover } from '@ship-ui/core/ship-form-field';
+import { ShipIcon } from '@ship-ui/core/ship-icon';
+
+class ShipColorPicker {
+    constructor() {
+        this.#document = inject(DOCUMENT);
+        this.#platformId = inject(PLATFORM_ID);
+        this.canvasRef = viewChild.required('colorCanvas');
+        this.#canvasData = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#canvasData" }] : /* istanbul ignore next */ []));
+        this.showDarkColors = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showDarkColors" }] : /* istanbul ignore next */ []));
+        this.renderingType = input('hsl', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "renderingType" }] : /* istanbul ignore next */ []));
+        this.gridSize = input(20, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "gridSize" }] : /* istanbul ignore next */ []));
+        this.hue = model(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hue" }] : /* istanbul ignore next */ []));
+        this.direction = input('horizontal', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+        this.selectedColor = model([255, 255, 255, 1], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []));
+        this.alpha = model(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alpha" }] : /* istanbul ignore next */ []));
+        this.currentColor = output();
+        this.centerLightness = computed(() => (this.showDarkColors() ? 200 : 100), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "centerLightness" }] : /* istanbul ignore next */ []));
+        this.isDragging = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
+        this.markerPosition = signal({ x: '50%', y: '50%' }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "markerPosition" }] : /* istanbul ignore next */ []));
+        this._pos = { x: '0', y: '0' };
+        this._markerPosition = effect(() => (this._pos = this.markerPosition()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_markerPosition" }] : /* istanbul ignore next */ []));
+        this.#skipMarkerUpdate = false;
+        this.selectedColorRgb = computed(() => {
+            const c = this.selectedColor();
+            return c[3] !== undefined ? `rgba(${c[0]},${c[1]},${c[2]},${c[3]})` : `rgb(${c[0]},${c[1]},${c[2]})`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedColorRgb" }] : /* istanbul ignore next */ []));
+        this.selectedColorHex = computed(() => rgbToHex(...this.selectedColor()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedColorHex" }] : /* istanbul ignore next */ []));
+        this.selectedColorHsl = computed(() => rgbToHsl(...this.selectedColor()).string, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedColorHsl" }] : /* istanbul ignore next */ []));
+        this.alphaEffect = effect(() => {
+            const a = this.alpha();
+            const current = untracked(() => this.selectedColor());
+            if (current[3] !== a) {
+                this.#skipMarkerUpdate = false;
+                this.selectedColor.set([current[0], current[1], current[2], a]);
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alphaEffect" }] : /* istanbul ignore next */ []));
+        this._prevColorStr = '';
+        this.selectedColorEffect = effect(() => {
+            const selectedColor = this.selectedColor();
+            const r = selectedColor[0];
+            const g = selectedColor[1];
+            const b = selectedColor[2];
+            const a = selectedColor[3] ?? 1;
+            untracked(() => {
+                if (this.alpha() !== a) {
+                    this.alpha.set(a);
+                }
+            });
+            const str = `${r},${g},${b},${a}`;
+            if (this._prevColorStr === str && !this.#skipMarkerUpdate) {
+                // We still want to clear skipMarkerUpdate if it was set
+                // wait, actually if skipMarkerUpdate is true, it means we JUST dragged.
+                // In that case we do want to emit currentColor.
+            }
+            const hsl = rgbToHsl(r, g, b);
+            const hex = rgbToHex(r, g, b);
+            if (this.#skipMarkerUpdate) {
+                this.#skipMarkerUpdate = false;
+                this._prevColorStr = str;
+            }
+            else {
+                if (this._prevColorStr !== str) {
+                    this.updateMarkerFromColor(selectedColor);
+                    this._prevColorStr = str;
+                }
+                else {
+                    // Color is structurally identical and not from a drag event, skip marker jump
+                }
+            }
+            this.currentColor.emit({
+                rgb: `rgb(${r}, ${g}, ${b})`,
+                rgba: `rgba(${r}, ${g}, ${b}, ${a})`,
+                hex: hex,
+                hex8: rgbaToHex8(r, g, b, a),
+                hsl: hsl.string,
+                hsla: `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${a})`,
+                hue: hsl.h,
+                saturation: hsl.s,
+                alpha: a,
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedColorEffect" }] : /* istanbul ignore next */ []));
+        this.alphaColorRedrawEffect = effect(() => {
+            const color = this.selectedColor();
+            if (this.renderingType() === 'alpha' && this.#canvasData()) {
+                untracked(() => this.drawAlpha());
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alphaColorRedrawEffect" }] : /* istanbul ignore next */ []));
+        this.previousLayoutHash = '';
+        this.previousHue = null;
+        this.renderingTypeEffect = effect(() => {
+            const currentHue = this.hue();
+            const layoutHash = this.getLayoutHash();
+            const canvasData = untracked(() => this.#canvasData());
+            if (canvasData) {
+                untracked(() => this.drawColorPicker());
+                if (this.previousLayoutHash !== layoutHash) {
+                    if (this.renderingType() === 'hsl') {
+                        this.adjustMarkerPosition();
+                        queueMicrotask(() => this.updateMarkerFromColor(untracked(() => this.selectedColor())));
+                    }
+                    else {
+                        this.updateMarkerFromColor(untracked(() => this.selectedColor()));
+                    }
+                    this.previousLayoutHash = layoutHash;
+                    this.previousHue = currentHue;
+                }
+                else if (this.previousHue !== currentHue) {
+                    const pos = untracked(() => this.markerPosition());
+                    const { canvas, ctx } = canvasData;
+                    let x = (parseFloat(pos.x.replace('%', '')) / 100) * Math.max(1, canvas.width - 1);
+                    let y = (parseFloat(pos.y.replace('%', '')) / 100) * Math.max(1, canvas.height - 1);
+                    x = Math.max(0, Math.min(canvas.width - 1, Math.round(x)));
+                    y = Math.max(0, Math.min(canvas.height - 1, Math.round(y)));
+                    const color = untracked(() => this.getColorAtPosition(x, y));
+                    if (this.renderingType() !== 'alpha') {
+                        color[3] = untracked(() => this.selectedColor()[3] ?? 1);
+                    }
+                    this.#skipMarkerUpdate = true;
+                    this.selectedColor.set(color);
+                    this.previousHue = currentHue;
+                }
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "renderingTypeEffect" }] : /* istanbul ignore next */ []));
+        this.#resizeObserver = typeof ResizeObserver !== 'undefined'
+            ? new ResizeObserver((entries) => {
+                for (const entry of entries) {
+                    if (entry.contentRect.width > 0 && entry.contentRect.height > 0) {
+                        this.setCanvasSize();
+                    }
+                }
+            })
+            : null;
+        this.initColor = null;
+    }
+    #document;
+    #platformId;
+    #canvasData;
+    #skipMarkerUpdate;
+    onResize() {
+        this.setCanvasSize();
+    }
+    getLayoutHash() {
+        return `${this.renderingType()}-${this.direction()}-${this.gridSize()}-${this.showDarkColors()}`;
+    }
+    #resizeObserver;
+    ngAfterViewInit() {
+        this.initColor = this.selectedColor();
+        const canvas = this.canvasRef()?.nativeElement;
+        if (canvas?.parentElement) {
+            this.#resizeObserver?.observe(canvas.parentElement);
+        }
+        this.setCanvasSize();
+        this.initCanvasEvents();
+    }
+    ngOnDestroy() {
+        this.#resizeObserver?.disconnect();
+    }
+    updateMarkerFromColor(rgba) {
+        const [r, g, b, a] = rgba;
+        const coords = this.findPositionByColor(r, g, b, a);
+        if (coords === null)
+            return;
+        const { x, y } = coords;
+        const mockEvent = {
+            offsetX: x,
+            offsetY: y,
+            clientX: x,
+            clientY: y,
+            touches: [{ clientX: x, clientY: y }],
+        };
+        this.updateColorAndMarker(mockEvent, false, true);
+    }
+    findPositionByColor(r, g, b, a) {
+        const canvasData = this.#canvasData();
+        if (!canvasData || !canvasData.canvas)
+            return null;
+        const { canvas, ctx } = canvasData;
+        if (canvas.width === 0 || canvas.height === 0)
+            return null;
+        if (this.renderingType() === 'alpha') {
+            const aVal = a ?? 1;
+            if (this.direction() === 'horizontal') {
+                return { x: Math.round(aVal * (canvas.width - 1)), y: Math.round((canvas.height - 1) / 2) };
+            }
+            else {
+                return { x: Math.round((canvas.width - 1) / 2), y: Math.round(aVal * (canvas.height - 1)) };
+            }
+        }
+        if (this.renderingType() === 'hue') {
+            const hsl = rgbToHsl(r, g, b);
+            const ratio = hsl.h / 360;
+            if (this.direction() === 'horizontal') {
+                return { x: Math.round(ratio * (canvas.width - 1)), y: Math.round((canvas.height - 1) / 2) };
+            }
+            else {
+                return { x: Math.round((canvas.width - 1) / 2), y: Math.round(ratio * (canvas.height - 1)) };
+            }
+        }
+        if (this.renderingType() === 'rgb') {
+            const hsv = rgbToHsv(r, g, b);
+            return {
+                x: Math.round((hsv.s / 100) * (canvas.width - 1)),
+                y: Math.round((1 - hsv.v / 100) * (canvas.height - 1)),
+            };
+        }
+        if (this.renderingType() === 'saturation') {
+            const hsl = rgbToHsl(r, g, b);
+            const ratio = hsl.s / 100;
+            if (this.direction() === 'horizontal') {
+                return { x: Math.round(ratio * (canvas.width - 1)), y: Math.round((canvas.height - 1) / 2) };
+            }
+            else {
+                return { x: Math.round((canvas.width - 1) / 2), y: Math.round(ratio * (canvas.height - 1)) };
+            }
+        }
+        if (this.renderingType() === 'hsl') {
+            const { centerX, centerY, radius } = canvasData;
+            const hsl = rgbToHsl(r, g, b);
+            const centerL = this.centerLightness();
+            let distance = 0;
+            if (centerL > 0) {
+                distance = ((100 - hsl.l) * radius) / ((50 * centerL) / 100);
+            }
+            const angle = (hsl.h / 360) * 2 * Math.PI - Math.PI;
+            return {
+                x: Math.round(centerX + distance * Math.cos(angle)),
+                y: Math.round(centerY + distance * Math.sin(angle)),
+            };
+        }
+        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+        let bestMatch = { x: 0, y: 0, distance: Infinity };
+        for (let y = 0; y < canvas.height; y++) {
+            for (let x = 0; x < canvas.width; x++) {
+                const index = (y * canvas.width + x) * 4;
+                const pixelR = imageData[index];
+                const pixelG = imageData[index + 1];
+                const pixelB = imageData[index + 2];
+                const distance = Math.sqrt(Math.pow(r - pixelR, 2) + Math.pow(g - pixelG, 2) + Math.pow(b - pixelB, 2));
+                if (distance < bestMatch.distance) {
+                    bestMatch = { x, y, distance };
+                }
+            }
+        }
+        return { x: bestMatch.x, y: bestMatch.y };
+    }
+    adjustMarkerPosition() {
+        const { canvas, centerX, centerY, radius } = this.#canvasData();
+        let { x, y } = this._pos;
+        let markerX = (parseFloat(x.replace('%', '')) / 100) * canvas.width;
+        let markerY = (parseFloat(y.replace('%', '')) / 100) * canvas.height;
+        const distance = Math.sqrt(Math.pow(markerX - centerX, 2) + Math.pow(markerY - centerY, 2));
+        if (distance > radius) {
+            const angle = Math.atan2(markerY - centerY, markerX - centerX);
+            markerX = centerX + radius * Math.cos(angle);
+            markerY = centerY + radius * Math.sin(angle);
+            x = ((markerX / canvas.width) * 100).toFixed(2) + '%';
+            y = ((markerY / canvas.height) * 100).toFixed(2) + '%';
+            this.markerPosition.set({ x, y });
+        }
+    }
+    initCanvasEvents() {
+        const data = this.#canvasData();
+        if (!data)
+            return;
+        const { canvas } = data;
+        canvas.addEventListener('mousedown', (event) => {
+            this.isDragging.set(true);
+            this.updateColorAndMarker(event);
+        });
+        this.#document.addEventListener('mousemove', (event) => {
+            if (this.isDragging()) {
+                event.preventDefault();
+                this.updateColorAndMarker(event, true);
+            }
+        });
+        this.#document.addEventListener('mouseup', () => this.isDragging.set(false));
+        canvas.addEventListener('touchstart', (_) => this.isDragging.set(true));
+        this.#document.addEventListener('touchmove', (event) => {
+            if (this.isDragging()) {
+                event.preventDefault();
+                this.updateColorAndMarker(event.touches[0], true);
+            }
+        });
+        this.#document.addEventListener('touchend', () => this.isDragging.set(false));
+        this.#document.addEventListener('touchcancel', () => this.isDragging.set(false));
+    }
+    setCanvasSize() {
+        if (!isPlatformBrowser(this.#platformId))
+            return;
+        const canvas = this.canvasRef()?.nativeElement;
+        if (canvas) {
+            const ctx = canvas.getContext('2d', {
+                willReadFrequently: true,
+                imageSmoothingEnabled: true,
+                imageSmoothingQuality: 'high',
+            });
+            const parentWidth = canvas.parentElement?.offsetWidth || canvas.offsetWidth;
+            canvas.width = parentWidth;
+            canvas.height = parentWidth;
+            this.#canvasData.set({
+                canvas,
+                ctx,
+                centerX: canvas.width / 2,
+                centerY: canvas.height / 2,
+                radius: Math.min(canvas.width, canvas.height) / 2,
+            });
+            this.drawColorPicker();
+            setTimeout(() => {
+                if (!this.isDragging()) {
+                    this.updateMarkerFromColor(untracked(() => this.selectedColor()));
+                }
+            });
+        }
+    }
+    getColorAtPosition(mouseX, mouseY) {
+        const { canvas, ctx } = this.#canvasData();
+        const w = Math.max(1, canvas.width - 1);
+        const h = Math.max(1, canvas.height - 1);
+        const xRatio = mouseX / w;
+        const yRatio = mouseY / h;
+        if (this.renderingType() === 'rgb') {
+            return hsvToRgbExact(this.hue(), xRatio * 100, (1 - yRatio) * 100);
+        }
+        else if (this.renderingType() === 'saturation') {
+            const ratio = this.direction() === 'horizontal' ? xRatio : yRatio;
+            return hslToRgbExact(this.hue(), ratio * 100, 50);
+        }
+        else if (this.renderingType() === 'hue') {
+            const ratio = this.direction() === 'horizontal' ? xRatio : yRatio;
+            return hslToRgbExact(ratio * 360, 100, 50);
+        }
+        else if (this.renderingType() === 'alpha') {
+            const ratio = this.direction() === 'horizontal' ? xRatio : yRatio;
+            const current = this.selectedColor();
+            return [current[0], current[1], current[2], parseFloat(ratio.toFixed(2))];
+        }
+        else {
+            const pixelData = ctx.getImageData(mouseX, mouseY, 1, 1).data;
+            return [pixelData[0], pixelData[1], pixelData[2]];
+        }
+    }
+    updateColorAndMarker(event, outsideCanvas = false, onlyMarker = false) {
+        const { canvas, ctx } = this.#canvasData();
+        let mouseX = event instanceof MouseEvent ? event.offsetX : event.clientX;
+        let mouseY = event instanceof MouseEvent ? event.offsetY : event.clientY;
+        if (outsideCanvas) {
+            const rect = canvas.getBoundingClientRect();
+            mouseX = Math.round(event.clientX - rect.left);
+            mouseY = Math.round(event.clientY - rect.top);
+        }
+        if (this.renderingType() === 'hsl') {
+            const centerX = canvas.width / 2;
+            const centerY = canvas.height / 2;
+            const radius = Math.min(canvas.width, canvas.height) / 2;
+            const distance = Math.sqrt(Math.pow(mouseX - centerX, 2) + Math.pow(mouseY - centerY, 2));
+            if (distance > radius) {
+                const angle = Math.atan2(mouseY - centerY, mouseX - centerX);
+                mouseX = centerX + radius * Math.cos(angle);
+                mouseY = centerY + radius * Math.sin(angle);
+            }
+        }
+        mouseX = Math.max(0, Math.min(canvas.width - 1, Math.round(mouseX)));
+        mouseY = Math.max(0, Math.min(canvas.height - 1, Math.round(mouseY)));
+        if (!onlyMarker) {
+            const newColor = this.getColorAtPosition(mouseX, mouseY);
+            if (this.renderingType() !== 'alpha') {
+                newColor[3] = this.selectedColor()[3] ?? 1;
+            }
+            this.#skipMarkerUpdate = true;
+            this.selectedColor.set(newColor);
+        }
+        const xPercent = ((mouseX / Math.max(1, canvas.width - 1)) * 100).toFixed(2) + '%';
+        const yPercent = ((mouseY / Math.max(1, canvas.height - 1)) * 100).toFixed(2) + '%';
+        this.markerPosition.set({ x: xPercent, y: yPercent });
+    }
+    drawColorPicker() {
+        switch (this.renderingType()) {
+            case 'hsl':
+                this.drawColorWheel();
+                break;
+            case 'grid':
+                this.drawGrid();
+                break;
+            case 'hue':
+                this.drawHue();
+                break;
+            case 'alpha':
+                this.drawAlpha();
+                break;
+            case 'rgb':
+                this.drawRgb();
+                break;
+            case 'saturation':
+                this.drawSaturation();
+                break;
+        }
+    }
+    drawAlpha() {
+        const { canvas, ctx } = this.#canvasData();
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        const w = Math.max(1, canvas.width - 1);
+        const h = Math.max(1, canvas.height - 1);
+        const gradient = ctx.createLinearGradient(0, 0, this.direction() === 'horizontal' ? w : 0, this.direction() === 'horizontal' ? 0 : h);
+        const [r, g, b] = this.selectedColor();
+        gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, 0)`);
+        gradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 1)`);
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+    drawRgb() {
+        const { canvas, ctx } = this.#canvasData();
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        const w = Math.max(1, canvas.width - 1);
+        const h = Math.max(1, canvas.height - 1);
+        const gradient = ctx.createLinearGradient(0, 0, w, 0);
+        gradient.addColorStop(0, '#ffffff');
+        gradient.addColorStop(1, `hsl(${this.hue()}, 100%, 50%)`);
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        const gradient2 = ctx.createLinearGradient(0, 0, 0, h);
+        gradient2.addColorStop(0, 'rgba(0, 0, 0, 0)');
+        gradient2.addColorStop(1, '#000000');
+        ctx.fillStyle = gradient2;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+    drawSaturation() {
+        const { canvas, ctx } = this.#canvasData();
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        const w = Math.max(1, canvas.width - 1);
+        const h = Math.max(1, canvas.height - 1);
+        if (this.direction() === 'horizontal') {
+            const gradient = ctx.createLinearGradient(0, 0, w, 0);
+            gradient.addColorStop(0, `hsl(${this.hue()}, 0%, 50%)`);
+            gradient.addColorStop(1, `hsl(${this.hue()}, 100%, 50%)`);
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+        }
+        else {
+            const gradient = ctx.createLinearGradient(0, 0, 0, h);
+            gradient.addColorStop(0, `hsl(${this.hue()}, 0%, 50%)`);
+            gradient.addColorStop(1, `hsl(${this.hue()}, 100%, 50%)`);
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+        }
+    }
+    drawHue() {
+        const { canvas, ctx } = this.#canvasData();
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        const w = Math.max(1, canvas.width - 1);
+        const h = Math.max(1, canvas.height - 1);
+        const gradient = ctx.createLinearGradient(0, 0, this.direction() === 'horizontal' ? w : 0, this.direction() === 'horizontal' ? 0 : h);
+        for (let i = 0; i <= 360; i += 10) {
+            gradient.addColorStop(i / 360, `hsl(${i}, 100%, 50%)`);
+        }
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+    drawColorWheel() {
+        const { canvas, ctx, centerX, centerY, radius } = this.#canvasData();
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        for (let y = 0; y < canvas.height; y++) {
+            for (let x = 0; x < canvas.width; x++) {
+                const distance = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));
+                if (distance <= radius + 2) {
+                    const angle = Math.atan2(y - centerY, x - centerX);
+                    const hue = ((angle + Math.PI) / (2 * Math.PI)) * 360;
+                    ctx.fillStyle = `hsl(${hue}, 100%, ${100 - (this.centerLightness() / 100) * (distance / radius) * 50}%)`;
+                    ctx.fillRect(x, y, 1, 1);
+                }
+            }
+        }
+    }
+    drawGrid() {
+        const { canvas, ctx } = this.#canvasData();
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        const gridSize = this.gridSize();
+        const cellSize = canvas.width / gridSize;
+        const inputHue = this.hue();
+        const reversedHue = (inputHue + 180) % 360;
+        const maxDistance = Math.sqrt(2) * (gridSize - 1);
+        for (let y = 0; y < canvas.height; y += cellSize) {
+            for (let x = 0; x < canvas.width; x += cellSize) {
+                const cellX = Math.floor(x / cellSize);
+                const cellY = Math.floor(y / cellSize);
+                const distanceTopLeft = Math.sqrt(cellX * cellX + cellY * cellY);
+                const l = Math.floor((distanceTopLeft / maxDistance) * 100);
+                const h = cellX >= cellY ? inputHue : reversedHue;
+                const distanceFromCenter = Math.abs(cellX - cellY) / (gridSize - 1);
+                const s = Math.floor(distanceFromCenter * 100);
+                ctx.fillStyle = `hsl(${h}, ${s}%, ${l}%)`;
+                ctx.fillRect(x, y, cellSize, cellSize);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: ShipColorPicker, isStandalone: true, selector: "sh-color-picker", inputs: { showDarkColors: { classPropertyName: "showDarkColors", publicName: "showDarkColors", isSignal: true, isRequired: false, transformFunction: null }, renderingType: { classPropertyName: "renderingType", publicName: "renderingType", isSignal: true, isRequired: false, transformFunction: null }, gridSize: { classPropertyName: "gridSize", publicName: "gridSize", isSignal: true, isRequired: false, transformFunction: null }, hue: { classPropertyName: "hue", publicName: "hue", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, selectedColor: { classPropertyName: "selectedColor", publicName: "selectedColor", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hue: "hueChange", selectedColor: "selectedColorChange", alpha: "alphaChange", currentColor: "currentColor" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class": "renderingType()", "class.vertical": "(renderingType() === \"hue\" || renderingType() === \"saturation\") && direction() === \"vertical\"" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["colorCanvas"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <canvas #colorCanvas></canvas>
+    <div
+      class="marker"
+      [style.left]="markerPosition().x"
+      [style.top]="markerPosition().y"
+      [style.background]="selectedColorRgb()"></div>
+  `, isInline: true, styles: ["sh-color-picker{position:relative;display:block;width:18.75rem;aspect-ratio:1/1}sh-color-picker canvas{background-image:linear-gradient(45deg,#808080 25%,transparent 25%),linear-gradient(-45deg,#808080 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#808080 75%),linear-gradient(-45deg,transparent 75%,#808080 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}sh-color-picker.hsl canvas{border-radius:100%;overflow:hidden}sh-color-picker.rgb{border-radius:.125rem}sh-color-picker.saturation:not(.vertical),sh-color-picker.hue:not(.vertical),sh-color-picker.alpha:not(.vertical){height:1.25rem;aspect-ratio:auto;border-radius:.125rem}sh-color-picker.saturation:not(.vertical) canvas,sh-color-picker.hue:not(.vertical) canvas,sh-color-picker.alpha:not(.vertical) canvas{border-radius:.125rem}sh-color-picker.saturation:not(.vertical) .marker,sh-color-picker.hue:not(.vertical) .marker,sh-color-picker.alpha:not(.vertical) .marker{top:50%!important}sh-color-picker.saturation.vertical,sh-color-picker.hue.vertical,sh-color-picker.alpha.vertical{width:1.25rem;height:18.75rem;aspect-ratio:auto;border-radius:.125rem}sh-color-picker.saturation.vertical canvas,sh-color-picker.hue.vertical canvas,sh-color-picker.alpha.vertical canvas{border-radius:.125rem}sh-color-picker.saturation.vertical .marker,sh-color-picker.hue.vertical .marker,sh-color-picker.alpha.vertical .marker{left:50%!important}sh-color-picker canvas{width:100%;height:100%;border:2px solid var(--base-1);outline:var(--border-10)}sh-color-picker .marker{position:absolute;inset:0;width:1.25rem;height:1.25rem;border-radius:50%;border:1px solid #fff;pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 1px 4px #0000004d}sh-color-picker-input{display:flex}sh-color-picker-input sh-popover{width:100%}sh-color-picker-input [popoverContent]{padding:.75rem;width:17.5rem;display:flex;flex-direction:column;gap:.5rem}sh-color-picker-input .input-container{flex:1 0;display:flex;align-items:center;gap:.25rem;padding-right:.5rem}sh-color-picker-input .input-container input{margin-right:0;min-width:10.9375rem}sh-color-picker-input .color-indicator{position:relative;width:1.5rem;height:1.5rem;border-radius:var(--shape-2);border:var(--border-10);overflow:hidden;background-color:#fff;background-image: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%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px}sh-color-picker-input .color-indicator:after{content:\"\";position:absolute;inset:0;background:var(--indicator-color)}sh-color-picker-input sh-color-picker{width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipColorPicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'sh-color-picker', encapsulation: ViewEncapsulation.None, imports: [], template: `
+    <canvas #colorCanvas></canvas>
+    <div
+      class="marker"
+      [style.left]="markerPosition().x"
+      [style.top]="markerPosition().y"
+      [style.background]="selectedColorRgb()"></div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'renderingType()',
+                        '[class.vertical]': '(renderingType() === "hue" || renderingType() === "saturation") && direction() === "vertical"',
+                    }, styles: ["sh-color-picker{position:relative;display:block;width:18.75rem;aspect-ratio:1/1}sh-color-picker canvas{background-image:linear-gradient(45deg,#808080 25%,transparent 25%),linear-gradient(-45deg,#808080 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#808080 75%),linear-gradient(-45deg,transparent 75%,#808080 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}sh-color-picker.hsl canvas{border-radius:100%;overflow:hidden}sh-color-picker.rgb{border-radius:.125rem}sh-color-picker.saturation:not(.vertical),sh-color-picker.hue:not(.vertical),sh-color-picker.alpha:not(.vertical){height:1.25rem;aspect-ratio:auto;border-radius:.125rem}sh-color-picker.saturation:not(.vertical) canvas,sh-color-picker.hue:not(.vertical) canvas,sh-color-picker.alpha:not(.vertical) canvas{border-radius:.125rem}sh-color-picker.saturation:not(.vertical) .marker,sh-color-picker.hue:not(.vertical) .marker,sh-color-picker.alpha:not(.vertical) .marker{top:50%!important}sh-color-picker.saturation.vertical,sh-color-picker.hue.vertical,sh-color-picker.alpha.vertical{width:1.25rem;height:18.75rem;aspect-ratio:auto;border-radius:.125rem}sh-color-picker.saturation.vertical canvas,sh-color-picker.hue.vertical canvas,sh-color-picker.alpha.vertical canvas{border-radius:.125rem}sh-color-picker.saturation.vertical .marker,sh-color-picker.hue.vertical .marker,sh-color-picker.alpha.vertical .marker{left:50%!important}sh-color-picker canvas{width:100%;height:100%;border:2px solid var(--base-1);outline:var(--border-10)}sh-color-picker .marker{position:absolute;inset:0;width:1.25rem;height:1.25rem;border-radius:50%;border:1px solid #fff;pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 1px 4px #0000004d}sh-color-picker-input{display:flex}sh-color-picker-input sh-popover{width:100%}sh-color-picker-input [popoverContent]{padding:.75rem;width:17.5rem;display:flex;flex-direction:column;gap:.5rem}sh-color-picker-input .input-container{flex:1 0;display:flex;align-items:center;gap:.25rem;padding-right:.5rem}sh-color-picker-input .input-container input{margin-right:0;min-width:10.9375rem}sh-color-picker-input .color-indicator{position:relative;width:1.5rem;height:1.5rem;border-radius:var(--shape-2);border:var(--border-10);overflow:hidden;background-color:#fff;background-image: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%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px}sh-color-picker-input .color-indicator:after{content:\"\";position:absolute;inset:0;background:var(--indicator-color)}sh-color-picker-input sh-color-picker{width:100%}\n"] }]
+        }], propDecorators: { canvasRef: [{ type: i0.ViewChild, args: ['colorCanvas', { isSignal: true }] }], showDarkColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDarkColors", required: false }] }], renderingType: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderingType", required: false }] }], gridSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridSize", required: false }] }], hue: [{ type: i0.Input, args: [{ isSignal: true, alias: "hue", required: false }] }, { type: i0.Output, args: ["hueChange"] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], selectedColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedColor", required: false }] }, { type: i0.Output, args: ["selectedColorChange"] }], alpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "alpha", required: false }] }, { type: i0.Output, args: ["alphaChange"] }], currentColor: [{ type: i0.Output, args: ["currentColor"] }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', []]
+            }] } });
+
+class ShipColorPickerInput {
+    constructor() {
+        this.#document = inject(DOCUMENT);
+        this.renderingType = input('hsl', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "renderingType" }] : /* istanbul ignore next */ []));
+        this.format = input('rgb', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+        this.color = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.variant = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.size = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.readonly = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        this.closed = output();
+        this.isOpen = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.currentClass = classMutationSignal();
+        this.isEyeDropperSupported = typeof window !== 'undefined' && 'EyeDropper' in window;
+        this.showEyeDropper = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showEyeDropper" }] : /* istanbul ignore next */ []));
+        this.internalHue = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "internalHue" }] : /* istanbul ignore next */ []));
+        this.internalAlpha = signal(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "internalAlpha" }] : /* istanbul ignore next */ []));
+        this.internalColorTuple = signal([255, 255, 255, 1], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "internalColorTuple" }] : /* istanbul ignore next */ []));
+        this.hasAlpha = computed(() => ['rgba', 'hex8', 'hsla'].includes(this.format()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasAlpha" }] : /* istanbul ignore next */ []));
+        this.formattedColorString = computed(() => {
+            const format = this.format();
+            const tuple = this.internalColorTuple();
+            const [r, g, b, aRaw] = tuple;
+            const a = aRaw ?? 1;
+            switch (format) {
+                case 'rgb':
+                    return `rgb(${r}, ${g}, ${b})`;
+                case 'rgba':
+                    return `rgba(${r}, ${g}, ${b}, ${a})`;
+                case 'hex':
+                    return rgbToHex(r, g, b);
+                case 'hex8':
+                    return rgbaToHex8(r, g, b, a);
+                case 'hsl':
+                    return rgbToHsl(r, g, b).string;
+                case 'hsla': {
+                    const hsl = rgbToHsl(r, g, b);
+                    return `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${a})`;
+                }
+                default:
+                    return `rgb(${r}, ${g}, ${b})`;
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formattedColorString" }] : /* istanbul ignore next */ []));
+        this.#formatSyncEffect = effect(() => {
+            const str = this.formattedColorString();
+            const input = untracked(() => this.#inputRef());
+            if (input && input.value !== str) {
+                if (this.#document.activeElement !== input) {
+                    input.value = str;
+                    input.dispatchEvent(new Event('input'));
+                }
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#formatSyncEffect" }] : /* istanbul ignore next */ []));
+        this.pureHueColor = computed(() => {
+            return hslToRgbExact(this.internalHue(), 100, 50);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pureHueColor" }] : /* istanbul ignore next */ []));
+        this.#inputRef = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#inputRef" }] : /* istanbul ignore next */ []));
+        this.#inputObserver = contentProjectionSignal('#input-wrap input');
+        this.#inputRefEffect = effect(() => {
+            const inputs = this.#inputObserver();
+            if (!inputs.length)
+                return;
+            const input = inputs[0];
+            if (!input)
+                return;
+            this.#createCustomInputEventListener(input);
+            input.addEventListener('inputValueChanged', (event) => {
+                this.parseAndSetColor(event.detail.value);
+            });
+            input.addEventListener('input', (event) => {
+                const target = event.target;
+                this.parseAndSetColor(target.value);
+            });
+            input.addEventListener('blur', () => {
+                const str = untracked(() => this.formattedColorString());
+                if (input.value !== str) {
+                    input.value = str;
+                    input.dispatchEvent(new Event('input'));
+                }
+            });
+            input.addEventListener('focus', () => {
+                this.isOpen.set(true);
+            });
+            this.#inputRef.set(input);
+            input.autocomplete = 'off';
+            if (typeof input.value === 'string' && input.value) {
+                this.parseAndSetColor(input.value);
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#inputRefEffect" }] : /* istanbul ignore next */ []));
+    }
+    #document;
+    #formatSyncEffect;
+    #inputRef;
+    #inputObserver;
+    onMainColorChange(colorObj) {
+        if (colorObj.hue !== undefined) {
+            if (this.renderingType() === 'hsl' && colorObj.saturation > 0) {
+                this.internalHue.set(colorObj.hue);
+            }
+        }
+    }
+    onHuePickerChange(colorObj) {
+        if (colorObj.hue !== undefined && colorObj.hue !== this.internalHue()) {
+            this.internalHue.set(colorObj.hue);
+        }
+    }
+    async openEyeDropper(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        try {
+            // @ts-ignore
+            const eyeDropper = new window.EyeDropper();
+            const result = await eyeDropper.open();
+            if (result && result.sRGBHex) {
+                this.parseAndSetColor(result.sRGBHex);
+                // Force the text field to immediately display the new output string according to the active format
+                const input = untracked(() => this.#inputRef());
+                if (input) {
+                    const str = this.formattedColorString();
+                    if (input.value !== str) {
+                        input.value = str;
+                        input.dispatchEvent(new Event('input'));
+                    }
+                }
+            }
+        }
+        catch (e) {
+            // User cancelled
+        }
+    }
+    close() {
+        this.closed.emit(this.formattedColorString());
+    }
+    #inputRefEffect;
+    parseAndSetColor(colorStr) {
+        if (!colorStr)
+            return;
+        if (colorStr === untracked(() => this.formattedColorString()))
+            return;
+        const div = this.#document.createElement('div');
+        div.style.color = colorStr;
+        if (div.style.color === '')
+            return; // Not a valid color format
+        this.#document.body.appendChild(div);
+        const computedColor = getComputedStyle(div).color;
+        this.#document.body.removeChild(div);
+        const rgbaMatch = computedColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+        if (rgbaMatch) {
+            const r = parseInt(rgbaMatch[1], 10);
+            const g = parseInt(rgbaMatch[2], 10);
+            const b = parseInt(rgbaMatch[3], 10);
+            const a = rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1;
+            const current = untracked(() => this.internalColorTuple());
+            if (current[0] !== r || current[1] !== g || current[2] !== b || (current[3] ?? 1) !== a) {
+                this.internalColorTuple.set([r, g, b, a]);
+                this.internalAlpha.set(a);
+                // Also update hue so the hue slider matches the typed color!
+                const max = Math.max(r, g, b) / 255;
+                const min = Math.min(r, g, b) / 255;
+                if (max !== min) {
+                    const d = max - min;
+                    let h = 0;
+                    switch (max) {
+                        case r / 255:
+                            h = (g / 255 - b / 255) / d + (g / 255 < b / 255 ? 6 : 0);
+                            break;
+                        case g / 255:
+                            h = (b / 255 - r / 255) / d + 2;
+                            break;
+                        case b / 255:
+                            h = (r / 255 - g / 255) / d + 4;
+                            break;
+                    }
+                    h /= 6;
+                    this.internalHue.set(Math.floor(h * 360));
+                }
+            }
+        }
+    }
+    hslToRgbExact(h, s, l) {
+        s /= 100;
+        l /= 100;
+        const k = (n) => (n + h / 30) % 12;
+        const a = s * Math.min(l, 1 - l);
+        const f = (n) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+        return [Math.round(255 * f(0)), Math.round(255 * f(8)), Math.round(255 * f(4))];
+    }
+    rgbToHex(r, g, b) {
+        return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+    }
+    rgbaToHex8(r, g, b, a) {
+        const alphaHex = Math.round(a * 255)
+            .toString(16)
+            .padStart(2, '0');
+        return this.rgbToHex(r, g, b) + alphaHex;
+    }
+    rgbToHsl(r, g, b) {
+        r /= 255;
+        g /= 255;
+        b /= 255;
+        const max = Math.max(r, g, b), min = Math.min(r, g, b);
+        let h = 0, s = 0, l = (max + min) / 2;
+        if (max === min) {
+            h = s = 0;
+        }
+        else {
+            const d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            switch (max) {
+                case r:
+                    h = (g - b) / d + (g < b ? 6 : 0);
+                    break;
+                case g:
+                    h = (b - r) / d + 2;
+                    break;
+                case b:
+                    h = (r - g) / d + 4;
+                    break;
+            }
+            h /= 6;
+        }
+        const hDeg = Math.floor(h * 360);
+        const sPct = Math.round(s * 100);
+        const lPct = Math.round(l * 100);
+        return {
+            h: hDeg,
+            s: sPct,
+            l: lPct,
+            string: `hsl(${hDeg}, ${sPct}%, ${lPct}%)`,
+        };
+    }
+    #createCustomInputEventListener(input) {
+        Object.defineProperty(input, 'value', {
+            configurable: true,
+            get() {
+                const descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+                return descriptor.get.call(this);
+            },
+            set(newVal) {
+                const descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+                descriptor.set.call(this, newVal);
+                const inputEvent = new CustomEvent('inputValueChanged', {
+                    bubbles: true,
+                    cancelable: true,
+                    detail: {
+                        value: newVal,
+                    },
+                });
+                this.dispatchEvent(inputEvent);
+                return newVal;
+            },
+        });
+        return input;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipColorPickerInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ShipColorPickerInput, isStandalone: true, selector: "sh-color-picker-input", inputs: { renderingType: { classPropertyName: "renderingType", publicName: "renderingType", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, showEyeDropper: { classPropertyName: "showEyeDropper", publicName: "showEyeDropper", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", isOpen: "isOpenChange" }, ngImport: i0, template: `
+    <sh-form-field-popover
+      (closed)="close()"
+      [(isOpen)]="isOpen"
+      [class]="currentClass()"
+      [variant]="variant()"
+      [size]="size()"
+      [color]="color()"
+      [readonly]="readonly()">
+      <ng-content select="label" ngProjectAs="label" />
+
+      <ng-content select="[prefix]" ngProjectAs="[prefix]" />
+      <ng-content select="[textPrefix]" ngProjectAs="[textPrefix]" />
+
+      <div id="input-wrap" class="input-container" ngProjectAs="input">
+        <ng-content select="input" />
+
+        <div class="color-indicator" [style.--indicator-color]="formattedColorString()"></div>
+
+        @if (isEyeDropperSupported && showEyeDropper()) {
+          <button size="xsmall" tabindex="-1" variant="outlined" shButton (click)="openEyeDropper($event)">
+            <sh-icon>eyedropper</sh-icon>
+          </button>
+        }
+      </div>
+
+      <ng-content select="[textSuffix]" ngProjectAs="[textSuffix]" />
+      <ng-content select="[suffix]" ngProjectAs="[suffix]" />
+
+      <div popoverContent>
+        @if (this.isOpen()) {
+          <sh-color-picker
+            [renderingType]="renderingType()"
+            [direction]="'horizontal'"
+            [(selectedColor)]="internalColorTuple"
+            [hue]="internalHue()"
+            [(alpha)]="internalAlpha"
+            (currentColor)="onMainColorChange($event)" />
+
+          @if (renderingType() !== 'hsl') {
+            <sh-color-picker
+              renderingType="hue"
+              [direction]="'horizontal'"
+              [hue]="internalHue()"
+              [selectedColor]="pureHueColor()"
+              (currentColor)="onHuePickerChange($event)" />
+          }
+
+          @if (hasAlpha()) {
+            <sh-color-picker
+              renderingType="alpha"
+              [direction]="'horizontal'"
+              [(alpha)]="internalAlpha"
+              [(selectedColor)]="internalColorTuple" />
+          }
+        }
+      </div>
+    </sh-form-field-popover>
+  `, isInline: true, styles: ["sh-color-picker{position:relative;display:block;width:18.75rem;aspect-ratio:1/1}sh-color-picker canvas{background-image:linear-gradient(45deg,#808080 25%,transparent 25%),linear-gradient(-45deg,#808080 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#808080 75%),linear-gradient(-45deg,transparent 75%,#808080 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}sh-color-picker.hsl canvas{border-radius:100%;overflow:hidden}sh-color-picker.rgb{border-radius:.125rem}sh-color-picker.saturation:not(.vertical),sh-color-picker.hue:not(.vertical),sh-color-picker.alpha:not(.vertical){height:1.25rem;aspect-ratio:auto;border-radius:.125rem}sh-color-picker.saturation:not(.vertical) canvas,sh-color-picker.hue:not(.vertical) canvas,sh-color-picker.alpha:not(.vertical) canvas{border-radius:.125rem}sh-color-picker.saturation:not(.vertical) .marker,sh-color-picker.hue:not(.vertical) .marker,sh-color-picker.alpha:not(.vertical) .marker{top:50%!important}sh-color-picker.saturation.vertical,sh-color-picker.hue.vertical,sh-color-picker.alpha.vertical{width:1.25rem;height:18.75rem;aspect-ratio:auto;border-radius:.125rem}sh-color-picker.saturation.vertical canvas,sh-color-picker.hue.vertical canvas,sh-color-picker.alpha.vertical canvas{border-radius:.125rem}sh-color-picker.saturation.vertical .marker,sh-color-picker.hue.vertical .marker,sh-color-picker.alpha.vertical .marker{left:50%!important}sh-color-picker canvas{width:100%;height:100%;border:2px solid var(--base-1);outline:var(--border-10)}sh-color-picker .marker{position:absolute;inset:0;width:1.25rem;height:1.25rem;border-radius:50%;border:1px solid #fff;pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 1px 4px #0000004d}sh-color-picker-input{display:flex}sh-color-picker-input sh-popover{width:100%}sh-color-picker-input [popoverContent]{padding:.75rem;width:17.5rem;display:flex;flex-direction:column;gap:.5rem}sh-color-picker-input .input-container{flex:1 0;display:flex;align-items:center;gap:.25rem;padding-right:.5rem}sh-color-picker-input .input-container input{margin-right:0;min-width:10.9375rem}sh-color-picker-input .color-indicator{position:relative;width:1.5rem;height:1.5rem;border-radius:var(--shape-2);border:var(--border-10);overflow:hidden;background-color:#fff;background-image: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%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px}sh-color-picker-input .color-indicator:after{content:\"\";position:absolute;inset:0;background:var(--indicator-color)}sh-color-picker-input sh-color-picker{width:100%}\n"], dependencies: [{ kind: "component", type: ShipFormFieldPopover, selector: "sh-form-field-popover", inputs: ["isOpen", "color", "variant", "size", "readonly"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipColorPicker, selector: "sh-color-picker", inputs: ["showDarkColors", "renderingType", "gridSize", "hue", "direction", "selectedColor", "alpha"], outputs: ["hueChange", "selectedColorChange", "alphaChange", "currentColor"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }, { kind: "component", type: ShipButton, selector: "[shButton]", inputs: ["color", "variant", "size", "readonly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipColorPickerInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'sh-color-picker-input', encapsulation: ViewEncapsulation.None, imports: [ShipFormFieldPopover, ShipColorPicker, ShipIcon, ShipButton], template: `
+    <sh-form-field-popover
+      (closed)="close()"
+      [(isOpen)]="isOpen"
+      [class]="currentClass()"
+      [variant]="variant()"
+      [size]="size()"
+      [color]="color()"
+      [readonly]="readonly()">
+      <ng-content select="label" ngProjectAs="label" />
+
+      <ng-content select="[prefix]" ngProjectAs="[prefix]" />
+      <ng-content select="[textPrefix]" ngProjectAs="[textPrefix]" />
+
+      <div id="input-wrap" class="input-container" ngProjectAs="input">
+        <ng-content select="input" />
+
+        <div class="color-indicator" [style.--indicator-color]="formattedColorString()"></div>
+
+        @if (isEyeDropperSupported && showEyeDropper()) {
+          <button size="xsmall" tabindex="-1" variant="outlined" shButton (click)="openEyeDropper($event)">
+            <sh-icon>eyedropper</sh-icon>
+          </button>
+        }
+      </div>
+
+      <ng-content select="[textSuffix]" ngProjectAs="[textSuffix]" />
+      <ng-content select="[suffix]" ngProjectAs="[suffix]" />
+
+      <div popoverContent>
+        @if (this.isOpen()) {
+          <sh-color-picker
+            [renderingType]="renderingType()"
+            [direction]="'horizontal'"
+            [(selectedColor)]="internalColorTuple"
+            [hue]="internalHue()"
+            [(alpha)]="internalAlpha"
+            (currentColor)="onMainColorChange($event)" />
+
+          @if (renderingType() !== 'hsl') {
+            <sh-color-picker
+              renderingType="hue"
+              [direction]="'horizontal'"
+              [hue]="internalHue()"
+              [selectedColor]="pureHueColor()"
+              (currentColor)="onHuePickerChange($event)" />
+          }
+
+          @if (hasAlpha()) {
+            <sh-color-picker
+              renderingType="alpha"
+              [direction]="'horizontal'"
+              [(alpha)]="internalAlpha"
+              [(selectedColor)]="internalColorTuple" />
+          }
+        }
+      </div>
+    </sh-form-field-popover>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["sh-color-picker{position:relative;display:block;width:18.75rem;aspect-ratio:1/1}sh-color-picker canvas{background-image:linear-gradient(45deg,#808080 25%,transparent 25%),linear-gradient(-45deg,#808080 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#808080 75%),linear-gradient(-45deg,transparent 75%,#808080 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}sh-color-picker.hsl canvas{border-radius:100%;overflow:hidden}sh-color-picker.rgb{border-radius:.125rem}sh-color-picker.saturation:not(.vertical),sh-color-picker.hue:not(.vertical),sh-color-picker.alpha:not(.vertical){height:1.25rem;aspect-ratio:auto;border-radius:.125rem}sh-color-picker.saturation:not(.vertical) canvas,sh-color-picker.hue:not(.vertical) canvas,sh-color-picker.alpha:not(.vertical) canvas{border-radius:.125rem}sh-color-picker.saturation:not(.vertical) .marker,sh-color-picker.hue:not(.vertical) .marker,sh-color-picker.alpha:not(.vertical) .marker{top:50%!important}sh-color-picker.saturation.vertical,sh-color-picker.hue.vertical,sh-color-picker.alpha.vertical{width:1.25rem;height:18.75rem;aspect-ratio:auto;border-radius:.125rem}sh-color-picker.saturation.vertical canvas,sh-color-picker.hue.vertical canvas,sh-color-picker.alpha.vertical canvas{border-radius:.125rem}sh-color-picker.saturation.vertical .marker,sh-color-picker.hue.vertical .marker,sh-color-picker.alpha.vertical .marker{left:50%!important}sh-color-picker canvas{width:100%;height:100%;border:2px solid var(--base-1);outline:var(--border-10)}sh-color-picker .marker{position:absolute;inset:0;width:1.25rem;height:1.25rem;border-radius:50%;border:1px solid #fff;pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 1px 4px #0000004d}sh-color-picker-input{display:flex}sh-color-picker-input sh-popover{width:100%}sh-color-picker-input [popoverContent]{padding:.75rem;width:17.5rem;display:flex;flex-direction:column;gap:.5rem}sh-color-picker-input .input-container{flex:1 0;display:flex;align-items:center;gap:.25rem;padding-right:.5rem}sh-color-picker-input .input-container input{margin-right:0;min-width:10.9375rem}sh-color-picker-input .color-indicator{position:relative;width:1.5rem;height:1.5rem;border-radius:var(--shape-2);border:var(--border-10);overflow:hidden;background-color:#fff;background-image: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%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px}sh-color-picker-input .color-indicator:after{content:\"\";position:absolute;inset:0;background:var(--indicator-color)}sh-color-picker-input sh-color-picker{width:100%}\n"] }]
+        }], propDecorators: { renderingType: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderingType", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], showEyeDropper: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEyeDropper", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ShipColorPicker, ShipColorPickerInput };
+//# sourceMappingURL=ship-ui-core-ship-color-picker.mjs.map