@severfam/angular-color-picker 0.1.0

package/README.md

@@ -0,0 +1,121 @@
+# Angular Color Picker
+
+Angular-компонент палитры цветов с выбором оттенка и насыщенности. Рендерится на Canvas, автоматически масштабируется и пересчитывает размеры при изменении контейнера.
+
+## Установка
+
+```bash
+npm install color-picker
+```
+
+## Требования
+
+- Angular 21.2+
+- Используется `OnPush` change detection
+
+## Использование
+
+### 1. Импорт
+
+Компонент standalone, импортируйте напрямую в `imports` вашего компонента:
+
+```typescript
+import { Component } from '@angular/core';
+import { ColorPicker } from 'color-picker';
+
+@Component({
+  selector: 'app-root',
+  imports: [ColorPicker],
+  template: `
+    <lib-color-picker
+      [inColor]="color"
+      (changeModel)="onColorChange($event)"
+    />
+  `,
+})
+export class AppComponent {
+  color = '#2889e9';
+
+  onColorChange(color: string | null) {
+    this.color = color;
+  }
+}
+```
+
+## API
+
+### Inputs
+
+| Input | Тип | Дефолт | Описание |
+|-------|-----|--------|----------|
+| `inColor` | `string \| null` | — | Текущий цвет (hex). Поддерживает `#RGB` и `#RRGGBB`. |
+| `colorDefault` | `string` | `'#000000'` | Цвет по умолчанию, если `hasTransparent = false` и цвет не выбран. |
+| `hasTransparent` | `boolean` | `true` | Показывать ли кнопку «без цвета» (прозрачный). |
+| `hasEyeDropper` | `boolean` | `false` | Показывать ли иконку пипетки. |
+| `eyeColor` | `string \| null` | — | Цвет для превью пипетки (отдельно от выбранного). |
+
+### Outputs
+
+| Output | Тип | Описание |
+|--------|-----|----------|
+| `changeModel` | `string \| null` | Эмитится при каждом изменении цвета (ввод в поле, выбор на палитре). |
+| `changeEnd` | `void` | Эмитится при завершении выбора (отпускание кнопки мыши / пальца). |
+| `startEye` | `Event` | Эмитится при клике на иконку пипетки. |
+
+### Селектор
+
+```html
+<lib-color-picker></lib-color-picker>
+```
+
+## Примеры
+
+### Базовый
+
+```html
+<lib-color-picker
+  [inColor]="'#ff5733'"
+  (changeModel)="onColorChange($event)"
+/>
+```
+
+### Без прозрачности
+
+```html
+<lib-color-picker
+  [inColor]="color"
+  [hasTransparent]="false"
+  [colorDefault]="'#ffffff'"
+  (changeModel)="onColorChange($event)"
+/>
+```
+
+### С пипеткой
+
+```html
+<lib-color-picker
+  [inColor]="color"
+  [hasEyeDropper]="true"
+  [eyeColor]="originalColor"
+  (changeModel)="onColorChange($event)"
+  (changeEnd)="saveColor()"
+  (startEye)="activateEyedropper()"
+/>
+```
+
+## Стили
+
+Компонент использует SCSS. Базовые стили подключаются автоматически через `styleUrls`.
+
+Для кастомизации переопределите CSS-переменные или стили через `::ng-deep`:
+
+```scss
+lib-color-picker {
+  --color-box-border: #eaeaea;
+  --color-box-radius: 3px;
+}
+```
+
+## Лицензия
+
+MIT

package/fesm2022/severfam-angular-color-picker.mjs

@@ -0,0 +1,610 @@
+import * as i0 from '@angular/core';
+import { Injectable, InjectionToken, PLATFORM_ID, inject, ChangeDetectorRef, DOCUMENT, input, output, afterNextRender, effect, ElementRef, ViewChild, ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import * as i1 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import { fromEvent, debounceTime } from 'rxjs';
+
+class ColorBoxConvertService {
+    /**
+     * Converts an HSL color value to RGB. Conversion formula
+     * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
+     * Assumes h, s, and l are contained in the set [0, 1] and
+     * returns r, g, and b in the set [0, 255].
+     *
+     * @param   {number}  h       The hue
+     * @param   {number}  s       The saturation
+     * @param   {number}  l       The lightness
+     * @return  {Array}           The RGB representation
+     */
+    hslToRgb(h, s, l) {
+        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)),
+        ];
+    }
+    hslToHex(h, s, l) {
+        let r, g, b;
+        if (isNaN(s)) {
+            s = 0;
+        }
+        if (s === 0) {
+            r = g = b = l; // achromatic
+        }
+        else {
+            const hue2rgb = (p, q, t) => {
+                if (t < 0)
+                    t += 1;
+                if (t > 1)
+                    t -= 1;
+                if (t < 1 / 6)
+                    return p + (q - p) * 6 * t;
+                if (t < 1 / 2)
+                    return q;
+                if (t < 2 / 3)
+                    return p + (q - p) * (2 / 3 - t) * 6;
+                return p;
+            };
+            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+            const p = 2 * l - q;
+            r = hue2rgb(p, q, h + 1 / 3);
+            g = hue2rgb(p, q, h);
+            b = hue2rgb(p, q, h - 1 / 3);
+        }
+        const toHex = (x) => {
+            const hex = Math.round(x * 255).toString(16);
+            return hex.length === 1 ? '0' + hex : hex;
+        };
+        return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+    }
+    //H = #000fff
+    hexToHsl(H) {
+        if (H === undefined) {
+            H = '#000000';
+        }
+        let r;
+        let g;
+        let b;
+        if (H.length === 4) {
+            r = '0x' + H[1] + H[1];
+            g = '0x' + H[2] + H[2];
+            b = '0x' + H[3] + H[3];
+        }
+        else if (H.length === 7) {
+            r = '0x' + H[1] + H[2];
+            g = '0x' + H[3] + H[4];
+            b = '0x' + H[5] + H[6];
+        }
+        // Then to HSL
+        r /= 255;
+        g /= 255;
+        b /= 255;
+        const cmin = Math.min(r, g, b);
+        const cmax = Math.max(r, g, b);
+        const delta = cmax - cmin;
+        let h = 0;
+        let s = 0;
+        let l = 0;
+        if (delta === 0)
+            h = 0;
+        else if (cmax === r)
+            h = ((g - b) / delta) % 6;
+        else if (cmax === g)
+            h = (b - r) / delta + 2;
+        else
+            h = (r - g) / delta + 4;
+        h = Math.round(h * 60);
+        if (h < 0)
+            h += 360;
+        l = (cmax + cmin) / 2;
+        s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+        s = +(s * 100).toFixed(1);
+        l = +(l * 100).toFixed(1);
+        return { h, s, l };
+    }
+    hexToRGB(hex = '') {
+        const red = parseInt(hex.substring(1, 3), 16);
+        const green = parseInt(hex.substring(3, 5), 16);
+        const blue = parseInt(hex.substring(5, 7), 16);
+        return [red, green, blue];
+    }
+    hexToHsv(hex) {
+        const rgb = this.hexToRGB(hex);
+        const result = this.rgbToHsv(rgb);
+        return result;
+    }
+    rgbToHsv([r, g, b]) {
+        (r /= 255), (g /= 255), (b /= 255);
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        let h = 0;
+        let s = 0;
+        const v = max;
+        const d = max - min;
+        s = max == 0 ? 0 : d / max;
+        if (max == min) {
+            h = 0; // achromatic
+        }
+        else {
+            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;
+        }
+        return [h * 360, s, v];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ColorBoxConvertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ColorBoxConvertService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ColorBoxConvertService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+function isTouchEvent(event) {
+    try {
+        return event instanceof TouchEvent;
+    }
+    catch (e) {
+        return false;
+    }
+}
+function isSingleTouchEvent(event) {
+    return isTouchEvent(event) && event.touches.length === 1;
+}
+function isDoubleTouchEvent(event) {
+    return isTouchEvent(event) && event.touches.length === 2;
+}
+function getDistanceBetweenTouches(event) {
+    if (!isDoubleTouchEvent(event)) {
+        return 0;
+    }
+    const { touches } = event;
+    return Math.hypot(touches[0].clientX - touches[1].clientX, touches[0].clientY - touches[1].clientY);
+}
+
+function getEventRectCoords(e, { height, width, left, top }) {
+    let x = 0;
+    let y = 0;
+    if (e instanceof MouseEvent) {
+        x = e.pageX - left;
+        y = e.pageY - top;
+    }
+    if (isTouchEvent(e)) {
+        x = e.changedTouches[0].pageX - left;
+        y = e.changedTouches[0].pageY - top;
+    }
+    if (x > width) {
+        x = width;
+    }
+    if (x < 0) {
+        x = 0;
+    }
+    if (y > height) {
+        y = height;
+    }
+    if (y < 0) {
+        y = 0.1;
+    }
+    return { x, y };
+}
+function getValueStyle(element, parameter) {
+    const computedStyle = getComputedStyle(element);
+    let value;
+    if (parameter === 'width') {
+        value = (computedStyle.getPropertyValue(parameter) || '0px').match(/\d+/);
+    }
+    if (parameter === 'height') {
+        value = (computedStyle.getPropertyValue(parameter) || '0px').match(/\d+/);
+    }
+    if (parameter === 'left') {
+        value = (computedStyle.getPropertyValue(parameter) || '0px').match(/\d+/);
+    }
+    if (parameter === 'top') {
+        value = (computedStyle.getPropertyValue(parameter) || '0px').match(/\d+/);
+    }
+    const val = value || [];
+    let result = 0;
+    if (val[0]) {
+        result = +val[0];
+    }
+    return result || 0;
+}
+function isStartEvent(e) {
+    return e.type === 'mousedown' || e.type === 'touchstart';
+}
+function isMoveEvent(e) {
+    return e.type === 'mousemove' || e.type === 'touchmove';
+}
+function isEndEvent(e) {
+    return (e.type === 'mouseup' || e.type === 'touchend' || e.type === 'touchcancel');
+}
+
+class ColorBoxCanvasService {
+    _spectrumCanvas;
+    _hueCanvas;
+    get spectrumRect() {
+        return this._spectrumCanvas?.getBoundingClientRect() ?? new DOMRect();
+    }
+    get hueRect() {
+        return this._hueCanvas?.getBoundingClientRect() ?? new DOMRect();
+    }
+    _widthSpectrum = null;
+    get widthSpectrum() {
+        return this._widthSpectrum;
+    }
+    set widthSpectrum(value) {
+        this._widthSpectrum = value;
+    }
+    _heigthSpectrum = null;
+    get heigthSpectrum() {
+        return this._heigthSpectrum;
+    }
+    set heigthSpectrum(value) {
+        this._heigthSpectrum = value;
+    }
+    init(spectrumCanvas, hueCanvas) {
+        this._spectrumCanvas = spectrumCanvas;
+        this._hueCanvas = hueCanvas;
+        const spectrumWidth = getValueStyle(this._spectrumCanvas, 'width');
+        const spectrumHeight = getValueStyle(this._spectrumCanvas, 'height');
+        const hueWidth = getValueStyle(this._hueCanvas, 'width');
+        const hueHeight = getValueStyle(this._hueCanvas, 'height');
+        this._spectrumCanvas.width = spectrumWidth;
+        this._spectrumCanvas.height = spectrumHeight;
+        this._hueCanvas.width = hueWidth;
+        this._hueCanvas.height = hueHeight;
+        this._widthSpectrum = spectrumWidth;
+        this._heigthSpectrum = spectrumHeight;
+        this.createRectangleSpectrum('red', this._spectrumCanvas);
+        this.createHueSpectrum(this._hueCanvas);
+    }
+    createRectangleSpectrum(color, canvas) {
+        const context = canvas?.getContext('2d');
+        if (!canvas || !context) {
+            return;
+        }
+        context.clearRect(0, 0, canvas.width, canvas.height);
+        context.fillStyle = color;
+        context.fillRect(0, 0, canvas.width, canvas.height);
+        const whiteGradient = context.createLinearGradient(0, 0, canvas.width, 0);
+        whiteGradient.addColorStop(0, '#fff');
+        whiteGradient.addColorStop(1, 'transparent');
+        context.fillStyle = whiteGradient;
+        context.fillRect(0, 0, canvas.width, canvas.height);
+        const blackGradient = context.createLinearGradient(0, 0, 0, canvas.height);
+        blackGradient.addColorStop(0, 'transparent');
+        blackGradient.addColorStop(1, '#000');
+        context.fillStyle = blackGradient;
+        context.fillRect(0, 0, canvas.width, canvas.height);
+    }
+    createHueSpectrum(canvas) {
+        const context = canvas?.getContext('2d');
+        if (!canvas || !context) {
+            return;
+        }
+        const hueGradient = context.createLinearGradient(0, 0, canvas.width, 0);
+        hueGradient.addColorStop(0.0, 'hsl(360, 100%, 50%)');
+        hueGradient.addColorStop(0.17, 'hsl(61.2, 100%, 50%)');
+        hueGradient.addColorStop(0.33, 'hsl(118.8, 100%, 50%)');
+        hueGradient.addColorStop(0.5, 'hsl(180, 100%, 50%)');
+        hueGradient.addColorStop(0.67, 'hsl(241.2, 100%, 50%)');
+        hueGradient.addColorStop(0.83, 'hsl(298.8, 100%, 50%)');
+        hueGradient.addColorStop(1.0, 'hsl(0, 100%, 50%)');
+        context.fillStyle = hueGradient;
+        context.fillRect(0, 0, canvas.width, canvas.height);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ColorBoxCanvasService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ColorBoxCanvasService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ColorBoxCanvasService, decorators: [{
+            type: Injectable
+        }] });
+
+const WINDOW = new InjectionToken('window');
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const windowProvider = {
+    provide: WINDOW,
+    useFactory: (platformId) => {
+        if (isPlatformBrowser(platformId)) {
+            return window;
+        }
+        return {};
+    },
+    deps: [PLATFORM_ID],
+};
+const WINDOW_PROVIDERS = [windowProvider];
+
+class ColorBoxComponent {
+    convertService = inject(ColorBoxConvertService);
+    canvasService = inject(ColorBoxCanvasService);
+    cdr = inject(ChangeDetectorRef);
+    window = inject(WINDOW);
+    document = inject(DOCUMENT);
+    inputColorPicker = input('#fff', ...(ngDevMode ? [{ debugName: "inputColorPicker" }] : /* istanbul ignore next */ []));
+    changeColor = output();
+    selectColor = output();
+    spectrumCursor;
+    spectrumCanvas;
+    hueCursor;
+    hueCanvas;
+    currentColor = '';
+    changeHex = '';
+    hue = 0;
+    saturation = 1;
+    lightness = 0.5;
+    red;
+    green;
+    blue;
+    hex;
+    _subs = [];
+    set subs(sub) {
+        this._subs.push(sub);
+    }
+    constructor() {
+        afterNextRender(() => {
+            this.init();
+        });
+        effect(() => {
+            const color = this.inputColorPicker();
+            if (color && color !== this.changeHex) {
+                this.changeHex = color;
+                const hsl = this.convertService.hexToHsl(this.changeHex);
+                this.hue = hsl.h;
+                this.colorToPosition(color);
+            }
+        });
+    }
+    init() {
+        const spectrumCanvasElement = this.spectrumCanvas?.nativeElement;
+        const hueCanvasElement = this.hueCanvas?.nativeElement;
+        this.canvasService.init(spectrumCanvasElement, hueCanvasElement);
+        this.createRectangleSpectrumListeners(spectrumCanvasElement);
+        this.createHueSpectrumListeners(hueCanvasElement);
+        this.colorToPosition(this.inputColorPicker());
+        this.subs = fromEvent(this.window, 'resize')
+            .pipe(debounceTime(300))
+            .subscribe(() => {
+            this.refreshColorPickerBox();
+            this.cdr.detectChanges();
+        });
+    }
+    ngOnDestroy() {
+        this._subs.forEach((s) => s.unsubscribe());
+    }
+    refreshColorPickerBox() {
+        const hsl = this.convertService.hexToHsl(this.changeHex);
+        this.hue = hsl.h;
+        this.canvasService.createRectangleSpectrum(this.getHueColor(this.hue), this.spectrumCanvas?.nativeElement);
+        this.refreshPositionCursors();
+    }
+    refreshPositionCursors() {
+        const spectrumCanvasElement = this.spectrumCanvas?.nativeElement;
+        const curWidth = getValueStyle(spectrumCanvasElement, 'width');
+        const curHeight = getValueStyle(spectrumCanvasElement, 'height');
+        const initWidth = this.canvasService.widthSpectrum;
+        const initHeight = this.canvasService.heigthSpectrum;
+        if (curWidth !== initWidth || curHeight !== initHeight) {
+            this.colorToPosition(this.changeHex);
+            this.canvasService.widthSpectrum = curWidth;
+            this.canvasService.heigthSpectrum = curHeight;
+        }
+    }
+    createRectangleSpectrumListeners(canvas) {
+        const getSpectrumColor = (e) => {
+            e.preventDefault();
+            const spectrumRect = this.canvasService.spectrumRect;
+            const { x, y } = getEventRectCoords(e, spectrumRect);
+            const xRatio = (x / spectrumRect.width) * 100;
+            const yRatio = (y / spectrumRect.height) * 100;
+            const hsvValue = 1 - yRatio / 100;
+            const hsvSaturation = xRatio / 100;
+            this.lightness = (hsvValue / 2) * (2 - hsvSaturation);
+            const saturationDevider = 1 - Math.abs(2 * this.lightness - 1);
+            this.saturation =
+                saturationDevider === 0 ? 0 : (hsvValue * hsvSaturation) / saturationDevider;
+            const color = `hsl ${this.hue} ${this.saturation} ${this.lightness}`;
+            this.updateSpectrumCursor(x, y);
+            this.setColorValues(color);
+            if (isStartEvent(e)) {
+                this.changeColorEmit(this.hex);
+            }
+            if (isMoveEvent(e)) {
+                this.changeColorEmit(this.hex);
+            }
+            if (isEndEvent(e)) {
+                this.changeColorEmit(this.hex);
+                this.selectColor.emit(this.hex);
+            }
+        };
+        canvas.addEventListener('mousedown', (e) => {
+            this.eventHandler(e, getSpectrumColor);
+        });
+        canvas.addEventListener('touchstart', (e) => {
+            this.eventHandler(e, getSpectrumColor);
+        });
+    }
+    createHueSpectrumListeners(canvas) {
+        const getHueColor = (e) => {
+            e.preventDefault();
+            const hueRect = this.canvasService.hueRect;
+            const { x } = getEventRectCoords(e, hueRect);
+            const percent = x / hueRect.width;
+            this.hue = 360 * percent;
+            const hueColor = `hsl(${this.hue} 100% 50%)`;
+            const color = `hsl(
+        ${this.hue}
+        ${this.saturation * 100}%
+        ${this.lightness * 100}%
+      )`;
+            this.canvasService.createRectangleSpectrum(hueColor, this.spectrumCanvas?.nativeElement);
+            this.updateHueCursor(x);
+            this.setColorValues(color);
+            if (isStartEvent(e)) {
+                this.changeColorEmit(this.hex);
+            }
+            if (isMoveEvent(e)) {
+                this.changeColorEmit(this.hex);
+            }
+            if (isEndEvent(e)) {
+                this.changeColorEmit(this.hex);
+                this.selectColor.emit(this.hex);
+            }
+        };
+        canvas.addEventListener('mousedown', (e) => {
+            this.eventHandler(e, getHueColor);
+        });
+        canvas.addEventListener('touchstart', (e) => {
+            this.eventHandler(e, getHueColor);
+        });
+    }
+    changeColorEmit(hex) {
+        this.changeHex = hex;
+        this.changeColor.emit(this.hex);
+    }
+    setColorValues(color) {
+        this.currentColor = color;
+        const [red, green, blue] = this.convertService.hslToRgb(this.hue, this.saturation, this.lightness);
+        this.red = red;
+        this.green = green;
+        this.blue = blue;
+        this.hex = this.convertService.hslToHex(this.hue / 360, this.saturation, this.lightness);
+    }
+    updateSpectrumCursor(x, y) {
+        if (this.spectrumCursor) {
+            this.spectrumCursor.nativeElement.style.left = x + 'px';
+            this.spectrumCursor.nativeElement.style.top = y + 'px';
+        }
+    }
+    updateHueCursor(x) {
+        if (this.hueCursor) {
+            this.hueCursor.nativeElement.style.left = x + 'px';
+        }
+    }
+    colorToPosition(hexColor) {
+        const spectrumRect = this.canvasService.spectrumRect;
+        const hueRect = this.canvasService.hueRect;
+        const hsl = this.convertService.hexToHsl(hexColor);
+        this.hue = hsl.h;
+        const [, hsvs, hsvv] = this.convertService.hexToHsv(hexColor);
+        const x = spectrumRect.width * hsvs;
+        const y = spectrumRect.height * (1 - hsvv);
+        const hueX = (this.hue / 360) * hueRect.width;
+        this.updateSpectrumCursor(x, y);
+        this.updateHueCursor(hueX);
+        this.canvasService.createRectangleSpectrum(this.getHueColor(this.hue), this.spectrumCanvas?.nativeElement);
+    }
+    getHueColor(h) {
+        return `hsl(${h} 100% 50%)`;
+    }
+    eventHandler(e, handler) {
+        handler(e);
+        if (!this.window || !this.document) {
+            return;
+        }
+        if (e instanceof MouseEvent) {
+            this.document.addEventListener('mousemove', handler);
+            const mouseUpEvent = (e) => {
+                handler(e);
+                this.document.removeEventListener('mousemove', handler);
+                this.document.removeEventListener('mouseup', mouseUpEvent);
+            };
+            this.document.addEventListener('mouseup', mouseUpEvent);
+        }
+        if (isTouchEvent(e)) {
+            this.document.addEventListener('touchmove', handler);
+            const touchUpEvent = (e) => {
+                handler(e);
+                this.document.removeEventListener('touchmove', handler);
+                this.document.removeEventListener('touchend', touchUpEvent);
+                this.document.removeEventListener('touchcancel', touchUpEvent);
+            };
+            this.document.addEventListener('touchend', touchUpEvent);
+            this.document.addEventListener('touchcancel', touchUpEvent);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ColorBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: ColorBoxComponent, isStandalone: true, selector: "color-box", inputs: { inputColorPicker: { classPropertyName: "inputColorPicker", publicName: "inputColorPicker", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeColor: "changeColor", selectColor: "selectColor" }, providers: [...WINDOW_PROVIDERS, ColorBoxCanvasService], viewQueries: [{ propertyName: "spectrumCursor", first: true, predicate: ["spectrumCursor"], descendants: true, read: ElementRef }, { propertyName: "spectrumCanvas", first: true, predicate: ["spectrumCanvas"], descendants: true, read: ElementRef }, { propertyName: "hueCursor", first: true, predicate: ["hueCursor"], descendants: true, read: ElementRef }, { propertyName: "hueCanvas", first: true, predicate: ["hueCanvas"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"panel\">\n  <div class=\"spectrum-map\">\n    <button\n      id=\"spectrum-cursor\"\n      class=\"color-spectrum-cursor\"\n      #spectrumCursor\n    ></button>\n    <canvas id=\"spectrum-canvas\" #spectrumCanvas></canvas>\n  </div>\n  <div class=\"hue-map-wrapper\">\n    <div class=\"hue-map\">\n      <button id=\"hue-cursor\" class=\"color-hue-cursor\" #hueCursor></button>\n      <canvas id=\"hue-canvas\" #hueCanvas></canvas>\n    </div>\n    <div class=\"content-fill-opacity\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".panel{display:block;padding-bottom:20px}.panel .spectrum-map{border-radius:3px;cursor:pointer;height:120px;margin-bottom:15px;overflow:hidden;position:relative;width:100%}.panel .spectrum-map .color-spectrum-cursor{background:transparent;border:2px solid #fff;border-radius:100%;box-sizing:border-box;height:20px;margin-left:-10px;margin-top:-10px;box-shadow:0 0 4px #0006;padding:0;pointer-events:none;position:absolute;width:20px;z-index:2}.panel .spectrum-map #spectrum-canvas{background:#ccc;height:100%;inset:0;position:absolute;width:100%}.panel .hue-map{cursor:pointer;height:10px;position:relative;width:100%}.panel .hue-map .color-hue-cursor{background:transparent;border:2px solid #fff;border-radius:100%;box-sizing:border-box;box-shadow:0 0 4px #0006;height:20px;margin-left:-10px;padding:0;pointer-events:none;position:absolute;top:0;width:20px;z-index:2}.panel .hue-map #hue-canvas{background:#ccc;border-radius:8px;height:100%;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ColorBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-box', changeDetection: ChangeDetectionStrategy.OnPush, providers: [...WINDOW_PROVIDERS, ColorBoxCanvasService], standalone: true, template: "<div class=\"panel\">\n  <div class=\"spectrum-map\">\n    <button\n      id=\"spectrum-cursor\"\n      class=\"color-spectrum-cursor\"\n      #spectrumCursor\n    ></button>\n    <canvas id=\"spectrum-canvas\" #spectrumCanvas></canvas>\n  </div>\n  <div class=\"hue-map-wrapper\">\n    <div class=\"hue-map\">\n      <button id=\"hue-cursor\" class=\"color-hue-cursor\" #hueCursor></button>\n      <canvas id=\"hue-canvas\" #hueCanvas></canvas>\n    </div>\n    <div class=\"content-fill-opacity\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".panel{display:block;padding-bottom:20px}.panel .spectrum-map{border-radius:3px;cursor:pointer;height:120px;margin-bottom:15px;overflow:hidden;position:relative;width:100%}.panel .spectrum-map .color-spectrum-cursor{background:transparent;border:2px solid #fff;border-radius:100%;box-sizing:border-box;height:20px;margin-left:-10px;margin-top:-10px;box-shadow:0 0 4px #0006;padding:0;pointer-events:none;position:absolute;width:20px;z-index:2}.panel .spectrum-map #spectrum-canvas{background:#ccc;height:100%;inset:0;position:absolute;width:100%}.panel .hue-map{cursor:pointer;height:10px;position:relative;width:100%}.panel .hue-map .color-hue-cursor{background:transparent;border:2px solid #fff;border-radius:100%;box-sizing:border-box;box-shadow:0 0 4px #0006;height:20px;margin-left:-10px;padding:0;pointer-events:none;position:absolute;top:0;width:20px;z-index:2}.panel .hue-map #hue-canvas{background:#ccc;border-radius:8px;height:100%;width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputColorPicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputColorPicker", required: false }] }], changeColor: [{ type: i0.Output, args: ["changeColor"] }], selectColor: [{ type: i0.Output, args: ["selectColor"] }], spectrumCursor: [{
+                type: ViewChild,
+                args: ['spectrumCursor', { static: false, read: ElementRef }]
+            }], spectrumCanvas: [{
+                type: ViewChild,
+                args: ['spectrumCanvas', { static: false, read: ElementRef }]
+            }], hueCursor: [{
+                type: ViewChild,
+                args: ['hueCursor', { static: false, read: ElementRef }]
+            }], hueCanvas: [{
+                type: ViewChild,
+                args: ['hueCanvas', { static: false, read: ElementRef }]
+            }] } });
+
+class ColorPicker {
+    inColor = input.required(...(ngDevMode ? [{ debugName: "inColor" }] : /* istanbul ignore next */ []));
+    eyeColor = input(null, ...(ngDevMode ? [{ debugName: "eyeColor" }] : /* istanbul ignore next */ []));
+    hasTransparent = input(true, ...(ngDevMode ? [{ debugName: "hasTransparent" }] : /* istanbul ignore next */ []));
+    hasEyeDropper = input(false, ...(ngDevMode ? [{ debugName: "hasEyeDropper" }] : /* istanbul ignore next */ []));
+    colorDefault = input('#000000', ...(ngDevMode ? [{ debugName: "colorDefault" }] : /* istanbul ignore next */ []));
+    changeModel = output();
+    changeEnd = output();
+    startEye = output();
+    currentColor = signal(null, ...(ngDevMode ? [{ debugName: "currentColor" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            this.currentColor.set(this.inColor());
+        });
+    }
+    get defaultColor() {
+        return this.hasTransparent() ? null : this.colorDefault();
+    }
+    get isTransparent() {
+        return !this.currentColor() && this.hasTransparent();
+    }
+    changeInput(event) {
+        const color = event.target.value;
+        this.selectColor(color);
+    }
+    changeColor(color) {
+        this.currentColor.set(color);
+        this.changeModel.emit(color);
+    }
+    selectColor(color) {
+        this.currentColor.set(color || this.defaultColor);
+        this.changeModel.emit(color);
+        this.changeEnd.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ColorPicker, isStandalone: true, selector: "lib-color-picker", inputs: { inColor: { classPropertyName: "inColor", publicName: "inColor", isSignal: true, isRequired: true, transformFunction: null }, eyeColor: { classPropertyName: "eyeColor", publicName: "eyeColor", isSignal: true, isRequired: false, transformFunction: null }, hasTransparent: { classPropertyName: "hasTransparent", publicName: "hasTransparent", isSignal: true, isRequired: false, transformFunction: null }, hasEyeDropper: { classPropertyName: "hasEyeDropper", publicName: "hasEyeDropper", isSignal: true, isRequired: false, transformFunction: null }, colorDefault: { classPropertyName: "colorDefault", publicName: "colorDefault", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeModel: "changeModel", changeEnd: "changeEnd", startEye: "startEye" }, ngImport: i0, template: "<div class=\"color-box\">\r\n  <div class=\"design-color-box-wrapper\">\r\n    <ng-container *ngTemplateOutlet=\"colorMapTemplate\"></ng-container>\r\n  </div>\r\n\r\n  <div class=\"color-box__info\">\r\n    @if (hasEyeDropper()) {\r\n      <div class=\"color-box__picker\" (click)=\"startEye.emit($event)\">\r\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M20.4227 4.27425L19.7257 3.57734C18.9559 2.80755 17.7079 2.80755 16.9381 3.57734L12.7565 7.75881L12.0596 7.0619C11.6747 6.677 11.0507 6.677 10.6658 7.0619C10.2809 7.44679 10.2809 8.07083 10.6658 8.45572L11.3626 9.15255L4.39341 16.1217C4.5402 17.3687 4.0452 19.2573 3 20.3027L3.69654 21C4.74192 19.9546 6.63098 19.4596 7.87801 19.6062L14.8472 12.6371L15.5442 13.3341C15.9291 13.719 16.5532 13.719 16.9381 13.3341C17.323 12.9492 17.323 12.3252 16.9381 11.9403L16.2411 11.2434L20.4227 7.0619C21.1924 6.29211 21.1924 5.04404 20.4227 4.27425ZM12.0595 9.84946L14.1503 11.9402L7.49458 18.5958C6.82993 18.5871 6.10446 18.7017 5.41883 18.915C5.24707 18.9685 5.07418 19.0292 4.90213 19.0976C4.97048 18.9256 5.03126 18.7527 5.0847 18.5809C5.29805 17.8953 5.41264 17.1698 5.40386 16.5051L12.0595 9.84946Z\" fill=\"#3D3D3D\"/>\r\n        </svg>\r\n      </div>\r\n    }\r\n    <div class=\"color-box__wrapperline\">\r\n      @if (hasTransparent()) {\r\n        <div\r\n          class=\"color-box__transparent\"\r\n          (click)=\"selectColor(null)\"\r\n        >\r\n          <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 32 32\">\r\n            <path fill=\"currentColor\" d=\"M8 25.333c0 1.467 1.2 2.667 2.667 2.667h10.667c1.467 0 2.667-1.2 2.667-2.667v-16h-16v16zM11.28 15.84l1.88-1.88 2.84 2.827 2.827-2.827 1.88 1.88-2.827 2.827 2.827 2.827-1.88 1.88-2.827-2.827-2.827 2.827-1.88-1.88 2.827-2.827-2.84-2.827zM20.667 5.333l-1.333-1.333h-6.667l-1.333 1.333h-4.667v2.667h18.667v-2.667z\"></path>\r\n          </svg>\r\n        </div>\r\n      }\r\n      <div\r\n        class=\"color-box__wrapper\"\r\n        [class.color-box__wrapper-withtransparent]=\"hasTransparent()\"\r\n      >\r\n        @if (eyeColor() || currentColor(); as color) {\r\n          <div\r\n            class=\"color-box__preview\"\r\n            [style.background]=\"color\"\r\n          ></div>\r\n        }\r\n        @if (isTransparent) {\r\n          <div\r\n            class=\"color-box__preview color-box__preview--transparent\"\r\n          ></div>\r\n        }\r\n        <div class=\"color-box__form-element\">\r\n          <input\r\n            type=\"text\"\r\n            [value]=\"\r\n              currentColor() ||\r\n              (hasTransparent() ? '\u0411\u0435\u0437 \u0446\u0432\u0435\u0442\u0430' : colorDefault())\r\n            \"\r\n            class=\"color-box__input\"\r\n            [class.color-box__input-trasparent]=\"isTransparent\"\r\n            [attr.readonly]=\"isTransparent || null\"\r\n            (change)=\"changeInput($event)\"\r\n            pattern=\"^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$\"\r\n            maxlength=\"7\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #colorMapTemplate>\r\n  <color-box\r\n    [inputColorPicker]=\"currentColor() || colorDefault()\"\r\n    (changeColor)=\"changeColor($event)\"\r\n    (selectColor)=\"selectColor($event)\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </color-box>\r\n</ng-template>\r\n\r\n", styles: [".color-box{font-family:Open Sans}.color-box__wrapperline{display:flex;width:100%}.color-box__wrapper-usecolors--background-fill,.color-box__wrapper-usecolors--stroke{display:block}.color-box__transparent{display:flex;justify-content:center;align-items:center;cursor:pointer;height:37px;margin-right:4px;width:37px}.color-box__transparent:hover{background-color:#f6f6f6}.color-box__wrapper{border:1px solid #eaeaea;border-radius:3px;display:flex;overflow:hidden;width:100%}.color-box__wrapper-withtransparent{width:calc(100% - 42px)}.color-box__info{align-items:center;display:flex}.color-box__picker{cursor:pointer;display:flex;align-items:center;justify-content:center;width:37px;height:37px;margin-right:4px}.color-box__picker:hover{background-color:#f6f6f6}.color-box__preview{border-right:1px solid #e5e5e5;height:36px;width:40%}.color-box__preview--transparent{background-color:#fff;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%,#ccc),linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%,#ccc);background-size:8px 8px;background-position:0 0,4px 4px}.color-box__form-element{width:60%}.color-box__input{border:0;border-bottom:1px solid #e5e5e5;font-size:15px;font-style:normal;font-weight:400;height:36px;text-align:center;text-transform:uppercase;width:100%}.color-box__input:focus{outline:0}.color-box__input-trasparent{text-transform:none}.color-box__usecolors-title{font-size:13px;font-style:normal;font-weight:400;line-height:normal;margin:15px 0}.color-box__usecolors-title--modal{font-size:13px;font-style:normal;font-weight:400;line-height:normal;margin:0 0 15px}.color-box__usecolors-wrapper{display:inline-flex;flex-wrap:wrap;gap:4px}.color-box__usecolors-wrapper--stroke{max-height:106px;overflow:auto}.color-box__usecolors-color{border:1px solid rgba(0,0,0,.1);border-radius:3px;cursor:pointer;height:32px;width:32px;min-width:32px;min-height:32px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ColorBoxComponent, selector: "color-box", inputs: ["inputColorPicker"], outputs: ["changeColor", "selectColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ColorPicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-color-picker', imports: [CommonModule, ColorBoxComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"color-box\">\r\n  <div class=\"design-color-box-wrapper\">\r\n    <ng-container *ngTemplateOutlet=\"colorMapTemplate\"></ng-container>\r\n  </div>\r\n\r\n  <div class=\"color-box__info\">\r\n    @if (hasEyeDropper()) {\r\n      <div class=\"color-box__picker\" (click)=\"startEye.emit($event)\">\r\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M20.4227 4.27425L19.7257 3.57734C18.9559 2.80755 17.7079 2.80755 16.9381 3.57734L12.7565 7.75881L12.0596 7.0619C11.6747 6.677 11.0507 6.677 10.6658 7.0619C10.2809 7.44679 10.2809 8.07083 10.6658 8.45572L11.3626 9.15255L4.39341 16.1217C4.5402 17.3687 4.0452 19.2573 3 20.3027L3.69654 21C4.74192 19.9546 6.63098 19.4596 7.87801 19.6062L14.8472 12.6371L15.5442 13.3341C15.9291 13.719 16.5532 13.719 16.9381 13.3341C17.323 12.9492 17.323 12.3252 16.9381 11.9403L16.2411 11.2434L20.4227 7.0619C21.1924 6.29211 21.1924 5.04404 20.4227 4.27425ZM12.0595 9.84946L14.1503 11.9402L7.49458 18.5958C6.82993 18.5871 6.10446 18.7017 5.41883 18.915C5.24707 18.9685 5.07418 19.0292 4.90213 19.0976C4.97048 18.9256 5.03126 18.7527 5.0847 18.5809C5.29805 17.8953 5.41264 17.1698 5.40386 16.5051L12.0595 9.84946Z\" fill=\"#3D3D3D\"/>\r\n        </svg>\r\n      </div>\r\n    }\r\n    <div class=\"color-box__wrapperline\">\r\n      @if (hasTransparent()) {\r\n        <div\r\n          class=\"color-box__transparent\"\r\n          (click)=\"selectColor(null)\"\r\n        >\r\n          <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 32 32\">\r\n            <path fill=\"currentColor\" d=\"M8 25.333c0 1.467 1.2 2.667 2.667 2.667h10.667c1.467 0 2.667-1.2 2.667-2.667v-16h-16v16zM11.28 15.84l1.88-1.88 2.84 2.827 2.827-2.827 1.88 1.88-2.827 2.827 2.827 2.827-1.88 1.88-2.827-2.827-2.827 2.827-1.88-1.88 2.827-2.827-2.84-2.827zM20.667 5.333l-1.333-1.333h-6.667l-1.333 1.333h-4.667v2.667h18.667v-2.667z\"></path>\r\n          </svg>\r\n        </div>\r\n      }\r\n      <div\r\n        class=\"color-box__wrapper\"\r\n        [class.color-box__wrapper-withtransparent]=\"hasTransparent()\"\r\n      >\r\n        @if (eyeColor() || currentColor(); as color) {\r\n          <div\r\n            class=\"color-box__preview\"\r\n            [style.background]=\"color\"\r\n          ></div>\r\n        }\r\n        @if (isTransparent) {\r\n          <div\r\n            class=\"color-box__preview color-box__preview--transparent\"\r\n          ></div>\r\n        }\r\n        <div class=\"color-box__form-element\">\r\n          <input\r\n            type=\"text\"\r\n            [value]=\"\r\n              currentColor() ||\r\n              (hasTransparent() ? '\u0411\u0435\u0437 \u0446\u0432\u0435\u0442\u0430' : colorDefault())\r\n            \"\r\n            class=\"color-box__input\"\r\n            [class.color-box__input-trasparent]=\"isTransparent\"\r\n            [attr.readonly]=\"isTransparent || null\"\r\n            (change)=\"changeInput($event)\"\r\n            pattern=\"^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$\"\r\n            maxlength=\"7\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #colorMapTemplate>\r\n  <color-box\r\n    [inputColorPicker]=\"currentColor() || colorDefault()\"\r\n    (changeColor)=\"changeColor($event)\"\r\n    (selectColor)=\"selectColor($event)\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </color-box>\r\n</ng-template>\r\n\r\n", styles: [".color-box{font-family:Open Sans}.color-box__wrapperline{display:flex;width:100%}.color-box__wrapper-usecolors--background-fill,.color-box__wrapper-usecolors--stroke{display:block}.color-box__transparent{display:flex;justify-content:center;align-items:center;cursor:pointer;height:37px;margin-right:4px;width:37px}.color-box__transparent:hover{background-color:#f6f6f6}.color-box__wrapper{border:1px solid #eaeaea;border-radius:3px;display:flex;overflow:hidden;width:100%}.color-box__wrapper-withtransparent{width:calc(100% - 42px)}.color-box__info{align-items:center;display:flex}.color-box__picker{cursor:pointer;display:flex;align-items:center;justify-content:center;width:37px;height:37px;margin-right:4px}.color-box__picker:hover{background-color:#f6f6f6}.color-box__preview{border-right:1px solid #e5e5e5;height:36px;width:40%}.color-box__preview--transparent{background-color:#fff;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%,#ccc),linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%,#ccc);background-size:8px 8px;background-position:0 0,4px 4px}.color-box__form-element{width:60%}.color-box__input{border:0;border-bottom:1px solid #e5e5e5;font-size:15px;font-style:normal;font-weight:400;height:36px;text-align:center;text-transform:uppercase;width:100%}.color-box__input:focus{outline:0}.color-box__input-trasparent{text-transform:none}.color-box__usecolors-title{font-size:13px;font-style:normal;font-weight:400;line-height:normal;margin:15px 0}.color-box__usecolors-title--modal{font-size:13px;font-style:normal;font-weight:400;line-height:normal;margin:0 0 15px}.color-box__usecolors-wrapper{display:inline-flex;flex-wrap:wrap;gap:4px}.color-box__usecolors-wrapper--stroke{max-height:106px;overflow:auto}.color-box__usecolors-color{border:1px solid rgba(0,0,0,.1);border-radius:3px;cursor:pointer;height:32px;width:32px;min-width:32px;min-height:32px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "inColor", required: true }] }], eyeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "eyeColor", required: false }] }], hasTransparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTransparent", required: false }] }], hasEyeDropper: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasEyeDropper", required: false }] }], colorDefault: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorDefault", required: false }] }], changeModel: [{ type: i0.Output, args: ["changeModel"] }], changeEnd: [{ type: i0.Output, args: ["changeEnd"] }], startEye: [{ type: i0.Output, args: ["startEye"] }] } });
+
+/*
+ * Public API Surface of color-picker
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColorPicker };
+//# sourceMappingURL=severfam-angular-color-picker.mjs.map

package/fesm2022/severfam-angular-color-picker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"severfam-angular-color-picker.mjs","sources":["../../../projects/color-picker/src/lib/services/color-box-convert.service.ts","../../../projects/color-picker/src/lib/utils/touch-events.utils.ts","../../../projects/color-picker/src/lib/utils/color-box.util.ts","../../../projects/color-picker/src/lib/services/color-box-canvas.service.ts","../../../projects/color-picker/src/lib/providers/window.providers.ts","../../../projects/color-picker/src/lib/components/color-box/color-box.component.ts","../../../projects/color-picker/src/lib/components/color-box/color-box.component.html","../../../projects/color-picker/src/lib/color-picker.component.ts","../../../projects/color-picker/src/lib/color-picker.component.html","../../../projects/color-picker/src/public-api.ts","../../../projects/color-picker/src/severfam-angular-color-picker.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class ColorBoxConvertService {\n  /**\n   * Converts an HSL color value to RGB. Conversion formula\n   * adapted from http://en.wikipedia.org/wiki/HSL_color_space.\n   * Assumes h, s, and l are contained in the set [0, 1] and\n   * returns r, g, and b in the set [0, 255].\n   *\n   * @param   {number}  h       The hue\n   * @param   {number}  s       The saturation\n   * @param   {number}  l       The lightness\n   * @return  {Array}           The RGB representation\n   */\n\n  public hslToRgb(h: number, s: number, l: number) {\n    const k = (n: number) => (n + h / 30) % 12;\n    const a = s * Math.min(l, 1 - l);\n    const f = (n: number) =>\n      l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));\n    return [\n      Math.round(255 * f(0)),\n      Math.round(255 * f(8)),\n      Math.round(255 * f(4)),\n    ];\n  }\n\n  public hslToHex(h: number, s: number, l: number) {\n    let r, g, b;\n\n    if (isNaN(s)) {\n      s = 0;\n    }\n\n    if (s === 0) {\n      r = g = b = l; // achromatic\n    } else {\n      const hue2rgb = (p: number, q: number, t: number) => {\n        if (t < 0) t += 1;\n        if (t > 1) t -= 1;\n        if (t < 1 / 6) return p + (q - p) * 6 * t;\n        if (t < 1 / 2) return q;\n        if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;\n        return p;\n      };\n      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n      const p = 2 * l - q;\n      r = hue2rgb(p, q, h + 1 / 3);\n      g = hue2rgb(p, q, h);\n      b = hue2rgb(p, q, h - 1 / 3);\n    }\n    const toHex = (x: number) => {\n      const hex = Math.round(x * 255).toString(16);\n      return hex.length === 1 ? '0' + hex : hex;\n    };\n\n    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n  }\n  //H = #000fff\n  public hexToHsl(H: string) {\n    if (H === undefined) {\n      H = '#000000';\n    }\n    let r: any;\n    let g: any;\n    let b: any;\n    if (H.length === 4) {\n      r = '0x' + H[1] + H[1];\n      g = '0x' + H[2] + H[2];\n      b = '0x' + H[3] + H[3];\n    } else if (H.length === 7) {\n      r = '0x' + H[1] + H[2];\n      g = '0x' + H[3] + H[4];\n      b = '0x' + H[5] + H[6];\n    }\n    // Then to HSL\n    r /= 255;\n    g /= 255;\n    b /= 255;\n    const cmin = Math.min(r, g, b);\n    const cmax = Math.max(r, g, b);\n    const delta = cmax - cmin;\n    let h = 0;\n    let s = 0;\n    let l = 0;\n\n    if (delta === 0) h = 0;\n    else if (cmax === r) h = ((g - b) / delta) % 6;\n    else if (cmax === g) h = (b - r) / delta + 2;\n    else h = (r - g) / delta + 4;\n\n    h = Math.round(h * 60);\n\n    if (h < 0) h += 360;\n\n    l = (cmax + cmin) / 2;\n    s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));\n    s = +(s * 100).toFixed(1);\n    l = +(l * 100).toFixed(1);\n    return { h, s, l };\n  }\n\n  private hexToRGB(hex = '') {\n    const red = parseInt(hex.substring(1, 3), 16);\n    const green = parseInt(hex.substring(3, 5), 16);\n    const blue = parseInt(hex.substring(5, 7), 16);\n\n    return [red, green, blue];\n  }\n\n  public hexToHsv(hex: string) {\n    const rgb = this.hexToRGB(hex);\n    const result = this.rgbToHsv(rgb);\n    return result;\n  }\n\n  private rgbToHsv([r, g, b]: number[]) {\n    (r /= 255), (g /= 255), (b /= 255);\n\n    const max = Math.max(r, g, b);\n    const min = Math.min(r, g, b);\n    let h = 0;\n    let s = 0;\n    const v = max;\n\n    const d = max - min;\n\n    s = max == 0 ? 0 : d / max;\n\n    if (max == min) {\n      h = 0; // achromatic\n    } else {\n      switch (max) {\n        case r:\n          h = (g - b) / d + (g < b ? 6 : 0);\n          break;\n        case g:\n          h = (b - r) / d + 2;\n          break;\n        case b:\n          h = (r - g) / d + 4;\n          break;\n      }\n\n      h /= 6;\n    }\n\n    return [h * 360, s, v];\n  }\n}\n","export function isTouchEvent(event: Event): event is TouchEvent {\n  try {\n    return event instanceof TouchEvent;\n  } catch (e) {\n    return false;\n  }\n}\n\nexport function isSingleTouchEvent(event: Event): boolean {\n  return isTouchEvent(event) && event.touches.length === 1;\n}\n\nexport function isDoubleTouchEvent(event: Event): boolean {\n  return isTouchEvent(event) && event.touches.length === 2;\n}\n\nexport function getDistanceBetweenTouches(event: Event): number {\n  if (!isDoubleTouchEvent(event)) {\n    return 0;\n  }\n\n  const { touches } = event as TouchEvent;\n\n  return Math.hypot(\n    touches[0].clientX - touches[1].clientX,\n    touches[0].clientY - touches[1].clientY\n  );\n}\n","import { isTouchEvent } from './touch-events.utils';\n\nexport function getEventRectCoords(\n  e: Event,\n  { height, width, left, top }: DOMRect\n): { x: number; y: number } {\n  let x = 0;\n  let y = 0;\n\n  if (e instanceof MouseEvent) {\n    x = e.pageX - left;\n    y = e.pageY - top;\n  }\n\n  if (isTouchEvent(e)) {\n    x = e.changedTouches[0].pageX - left;\n    y = e.changedTouches[0].pageY - top;\n  }\n\n  if (x > width) {\n    x = width;\n  }\n\n  if (x < 0) {\n    x = 0;\n  }\n\n  if (y > height) {\n    y = height;\n  }\n\n  if (y < 0) {\n    y = 0.1;\n  }\n\n  return { x, y };\n}\n\nexport function getValueStyle(\n  element: Element,\n  parameter: 'width' | 'height' | 'left' | 'top'\n): number {\n  const computedStyle = getComputedStyle(element);\n  let value;\n  if (parameter === 'width') {\n    value = (computedStyle.getPropertyValue(parameter) || '0px').match(/\\d+/);\n  }\n\n  if (parameter === 'height') {\n    value = (computedStyle.getPropertyValue(parameter) || '0px').match(/\\d+/);\n  }\n\n  if (parameter === 'left') {\n    value = (computedStyle.getPropertyValue(parameter) || '0px').match(/\\d+/);\n  }\n\n  if (parameter === 'top') {\n    value = (computedStyle.getPropertyValue(parameter) || '0px').match(/\\d+/);\n  }\n\n  const val = value || [];\n  let result = 0;\n  if (val[0]) {\n    result = +val[0];\n  }\n\n  return result || 0;\n}\n\nexport function isStartEvent(e: Event) {\n  return e.type === 'mousedown' || e.type === 'touchstart';\n}\n\nexport function isMoveEvent(e: Event) {\n  return e.type === 'mousemove' || e.type === 'touchmove';\n}\n\nexport function isEndEvent(e: Event) {\n  return (\n    e.type === 'mouseup' || e.type === 'touchend' || e.type === 'touchcancel'\n  );\n}\n","import { Injectable } from '@angular/core';\nimport { getValueStyle } from '../utils/color-box.util';\n\n@Injectable()\nexport class ColorBoxCanvasService {\n  private _spectrumCanvas?: HTMLCanvasElement;\n  private _hueCanvas?: HTMLCanvasElement;\n\n  get spectrumRect(): DOMRect {\n    return this._spectrumCanvas?.getBoundingClientRect() ?? new DOMRect();\n  }\n\n  get hueRect(): DOMRect {\n    return this._hueCanvas?.getBoundingClientRect() ?? new DOMRect();\n  }\n\n  _widthSpectrum: number | null = null;\n  get widthSpectrum(): number | null {\n    return this._widthSpectrum;\n  }\n  set widthSpectrum(value: number | null) {\n    this._widthSpectrum = value;\n  }\n\n  _heigthSpectrum: number | null = null;\n  get heigthSpectrum(): number | null {\n    return this._heigthSpectrum;\n  }\n  set heigthSpectrum(value: number | null) {\n    this._heigthSpectrum = value;\n  }\n\n  public init(spectrumCanvas: HTMLCanvasElement, hueCanvas: HTMLCanvasElement) {\n    this._spectrumCanvas = spectrumCanvas;\n    this._hueCanvas = hueCanvas;\n\n    const spectrumWidth = getValueStyle(this._spectrumCanvas, 'width');\n    const spectrumHeight = getValueStyle(this._spectrumCanvas, 'height');\n    const hueWidth = getValueStyle(this._hueCanvas, 'width');\n    const hueHeight = getValueStyle(this._hueCanvas, 'height');\n\n    this._spectrumCanvas.width = spectrumWidth;\n    this._spectrumCanvas.height = spectrumHeight;\n    this._hueCanvas.width = hueWidth;\n    this._hueCanvas.height = hueHeight;\n\n    this._widthSpectrum = spectrumWidth;\n    this._heigthSpectrum = spectrumHeight;\n\n    this.createRectangleSpectrum('red', this._spectrumCanvas);\n    this.createHueSpectrum(this._hueCanvas);\n  }\n\n  public createRectangleSpectrum(\n    color: string,\n    canvas?: HTMLCanvasElement\n  ): void {\n    const context = canvas?.getContext('2d');\n\n    if (!canvas || !context) {\n      return;\n    }\n\n    context.clearRect(0, 0, canvas.width, canvas.height);\n\n    context.fillStyle = color;\n    context.fillRect(0, 0, canvas.width, canvas.height);\n\n    const whiteGradient = context.createLinearGradient(0, 0, canvas.width, 0);\n    whiteGradient.addColorStop(0, '#fff');\n    whiteGradient.addColorStop(1, 'transparent');\n    context.fillStyle = whiteGradient;\n    context.fillRect(0, 0, canvas.width, canvas.height);\n\n    const blackGradient = context.createLinearGradient(0, 0, 0, canvas.height);\n    blackGradient.addColorStop(0, 'transparent');\n    blackGradient.addColorStop(1, '#000');\n    context.fillStyle = blackGradient;\n    context.fillRect(0, 0, canvas.width, canvas.height);\n  }\n\n  public createHueSpectrum(canvas?: HTMLCanvasElement): void {\n    const context = canvas?.getContext('2d');\n\n    if (!canvas || !context) {\n      return;\n    }\n\n    const hueGradient = context.createLinearGradient(0, 0, canvas.width, 0);\n    hueGradient.addColorStop(0.0, 'hsl(360, 100%, 50%)');\n    hueGradient.addColorStop(0.17, 'hsl(61.2, 100%, 50%)');\n    hueGradient.addColorStop(0.33, 'hsl(118.8, 100%, 50%)');\n    hueGradient.addColorStop(0.5, 'hsl(180, 100%, 50%)');\n    hueGradient.addColorStop(0.67, 'hsl(241.2, 100%, 50%)');\n    hueGradient.addColorStop(0.83, 'hsl(298.8, 100%, 50%)');\n    hueGradient.addColorStop(1.0, 'hsl(0, 100%, 50%)');\n    context.fillStyle = hueGradient;\n    context.fillRect(0, 0, canvas.width, canvas.height);\n  }\n}\n","import { FactoryProvider, InjectionToken, PLATFORM_ID } from '@angular/core';\r\nimport { isPlatformBrowser } from '@angular/common';\r\n\r\n\r\nexport const WINDOW = new InjectionToken<Window>('window');\r\n\r\n\r\n/* eslint-disable @typescript-eslint/no-explicit-any */\r\nconst windowProvider: FactoryProvider = {\r\n  provide: WINDOW,\r\n  useFactory: (platformId: any) => {\r\n    if (isPlatformBrowser(platformId)) {\r\n      return window;\r\n    }\r\n    return {};\r\n  },\r\n  deps: [PLATFORM_ID],\r\n};\r\n\r\nexport const WINDOW_PROVIDERS = [windowProvider];\r\n","import { ColorBoxConvertService } from '../../services/color-box-convert.service';\nimport { ColorBoxCanvasService } from '../../services/color-box-canvas.service';\nimport {\n  afterNextRender,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  DOCUMENT,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  output,\n  ViewChild,\n} from '@angular/core';\nimport { debounceTime, fromEvent, Subscription } from 'rxjs';\nimport {\n  getEventRectCoords,\n  getValueStyle,\n  isEndEvent,\n  isMoveEvent,\n  isStartEvent,\n} from '../../utils/color-box.util';\nimport { WINDOW, WINDOW_PROVIDERS } from '../../providers/window.providers';\nimport { isTouchEvent } from '../../utils/touch-events.utils';\n\n\n@Component({\n  selector: 'color-box',\n  templateUrl: './color-box.component.html',\n  styleUrls: ['./color-box.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [...WINDOW_PROVIDERS, ColorBoxCanvasService],\n  standalone: true,\n})\nexport class ColorBoxComponent {\n  private readonly convertService = inject(ColorBoxConvertService);\n  private readonly canvasService = inject(ColorBoxCanvasService);\n  private readonly cdr = inject(ChangeDetectorRef);\n\n  private readonly window = inject(WINDOW);\n  private readonly document = inject(DOCUMENT);\n\n  inputColorPicker = input('#fff');\n\n  changeColor = output<string>();\n  selectColor = output<string>();\n\n  @ViewChild('spectrumCursor', { static: false, read: ElementRef })\n  spectrumCursor?: ElementRef;\n  @ViewChild('spectrumCanvas', { static: false, read: ElementRef })\n  spectrumCanvas?: ElementRef;\n  @ViewChild('hueCursor', { static: false, read: ElementRef })\n  hueCursor?: ElementRef;\n  @ViewChild('hueCanvas', { static: false, read: ElementRef })\n  hueCanvas?: ElementRef;\n\n  currentColor = '';\n  changeHex = '';\n\n  hue = 0;\n  saturation = 1;\n  lightness = 0.5;\n\n  red: unknown;\n  green: unknown;\n  blue: unknown;\n  hex!: string;\n\n  private _subs: Subscription[] = [];\n  set subs(sub: Subscription) {\n    this._subs.push(sub);\n  }\n\n  constructor() {\n    afterNextRender(() => {\n      this.init();\n    });\n\n    effect(() => {\n      const color = this.inputColorPicker();\n      if (color && color !== this.changeHex) {\n        this.changeHex = color;\n        const hsl = this.convertService.hexToHsl(this.changeHex);\n        this.hue = hsl.h;\n        this.colorToPosition(color);\n      }\n    });\n  }\n\n  private init(): void {\n    const spectrumCanvasElement = this.spectrumCanvas?.nativeElement;\n    const hueCanvasElement = this.hueCanvas?.nativeElement;\n\n    this.canvasService.init(spectrumCanvasElement, hueCanvasElement);\n\n    this.createRectangleSpectrumListeners(spectrumCanvasElement);\n    this.createHueSpectrumListeners(hueCanvasElement);\n    this.colorToPosition(this.inputColorPicker());\n\n    this.subs = fromEvent(this.window, 'resize')\n      .pipe(debounceTime(300))\n      .subscribe(() => {\n        this.refreshColorPickerBox();\n        this.cdr.detectChanges();\n      });\n  }\n\n  ngOnDestroy() {\n    this._subs.forEach((s) => s.unsubscribe());\n  }\n\n  private refreshColorPickerBox(): void {\n    const hsl = this.convertService.hexToHsl(this.changeHex);\n    this.hue = hsl.h;\n    this.canvasService.createRectangleSpectrum(\n      this.getHueColor(this.hue),\n      this.spectrumCanvas?.nativeElement,\n    );\n    this.refreshPositionCursors();\n  }\n\n  private refreshPositionCursors() {\n    const spectrumCanvasElement = this.spectrumCanvas?.nativeElement;\n    const curWidth = getValueStyle(spectrumCanvasElement, 'width');\n    const curHeight = getValueStyle(spectrumCanvasElement, 'height');\n    const initWidth = this.canvasService.widthSpectrum;\n    const initHeight = this.canvasService.heigthSpectrum;\n\n    if (curWidth !== initWidth || curHeight !== initHeight) {\n      this.colorToPosition(this.changeHex);\n      this.canvasService.widthSpectrum = curWidth;\n      this.canvasService.heigthSpectrum = curHeight;\n    }\n  }\n\n  private createRectangleSpectrumListeners(canvas: HTMLCanvasElement) {\n    const getSpectrumColor = (e: MouseEvent | TouchEvent) => {\n      e.preventDefault();\n\n      const spectrumRect = this.canvasService.spectrumRect;\n      const { x, y } = getEventRectCoords(e, spectrumRect);\n      const xRatio = (x / spectrumRect.width) * 100;\n      const yRatio = (y / spectrumRect.height) * 100;\n      const hsvValue = 1 - yRatio / 100;\n      const hsvSaturation = xRatio / 100;\n\n      this.lightness = (hsvValue / 2) * (2 - hsvSaturation);\n\n      const saturationDevider = 1 - Math.abs(2 * this.lightness - 1);\n      this.saturation =\n        saturationDevider === 0 ? 0 : (hsvValue * hsvSaturation) / saturationDevider;\n\n      const color = `hsl ${this.hue} ${this.saturation} ${this.lightness}`;\n\n      this.updateSpectrumCursor(x, y);\n      this.setColorValues(color);\n\n      if (isStartEvent(e)) {\n        this.changeColorEmit(this.hex);\n      }\n\n      if (isMoveEvent(e)) {\n        this.changeColorEmit(this.hex);\n      }\n\n      if (isEndEvent(e)) {\n        this.changeColorEmit(this.hex);\n        this.selectColor.emit(this.hex);\n      }\n    };\n\n    canvas.addEventListener('mousedown', (e: MouseEvent) => {\n      this.eventHandler(e, getSpectrumColor);\n    });\n\n    canvas.addEventListener('touchstart', (e: TouchEvent) => {\n      this.eventHandler(e, getSpectrumColor);\n    });\n  }\n\n  private createHueSpectrumListeners(canvas: HTMLCanvasElement) {\n    const getHueColor = (e: MouseEvent | TouchEvent) => {\n      e.preventDefault();\n\n      const hueRect = this.canvasService.hueRect;\n      const { x } = getEventRectCoords(e, hueRect);\n\n      const percent = x / hueRect.width;\n      this.hue = 360 * percent;\n\n      const hueColor = `hsl(${this.hue} 100% 50%)`;\n      const color = `hsl(\n        ${this.hue}\n        ${this.saturation * 100}%\n        ${this.lightness * 100}%\n      )`;\n\n      this.canvasService.createRectangleSpectrum(hueColor, this.spectrumCanvas?.nativeElement);\n\n      this.updateHueCursor(x);\n      this.setColorValues(color);\n\n      if (isStartEvent(e)) {\n        this.changeColorEmit(this.hex);\n      }\n\n      if (isMoveEvent(e)) {\n        this.changeColorEmit(this.hex);\n      }\n\n      if (isEndEvent(e)) {\n        this.changeColorEmit(this.hex);\n        this.selectColor.emit(this.hex);\n      }\n    };\n\n    canvas.addEventListener('mousedown', (e: MouseEvent | TouchEvent) => {\n      this.eventHandler(e, getHueColor);\n    });\n\n    canvas.addEventListener('touchstart', (e: TouchEvent) => {\n      this.eventHandler(e, getHueColor);\n    });\n  }\n\n  changeColorEmit(hex: string) {\n    this.changeHex = hex;\n    this.changeColor.emit(this.hex);\n  }\n\n  private setColorValues(color: string) {\n    this.currentColor = color;\n\n    const [red, green, blue] = this.convertService.hslToRgb(\n      this.hue,\n      this.saturation,\n      this.lightness,\n    );\n\n    this.red = red;\n    this.green = green;\n    this.blue = blue;\n    this.hex = this.convertService.hslToHex(this.hue / 360, this.saturation, this.lightness);\n  }\n\n  private updateSpectrumCursor(x: number, y: number): void {\n    if (this.spectrumCursor) {\n      this.spectrumCursor.nativeElement.style.left = x + 'px';\n      this.spectrumCursor.nativeElement.style.top = y + 'px';\n    }\n  }\n\n  private updateHueCursor(x: number): void {\n    if (this.hueCursor) {\n      this.hueCursor.nativeElement.style.left = x + 'px';\n    }\n  }\n\n  private colorToPosition(hexColor: string) {\n    const spectrumRect = this.canvasService.spectrumRect;\n    const hueRect = this.canvasService.hueRect;\n\n    const hsl = this.convertService.hexToHsl(hexColor);\n    this.hue = hsl.h;\n\n    const [, hsvs, hsvv] = this.convertService.hexToHsv(hexColor);\n    const x = spectrumRect.width * hsvs;\n    const y = spectrumRect.height * (1 - hsvv);\n    const hueX = (this.hue / 360) * hueRect.width;\n\n    this.updateSpectrumCursor(x, y);\n    this.updateHueCursor(hueX);\n\n    this.canvasService.createRectangleSpectrum(\n      this.getHueColor(this.hue),\n      this.spectrumCanvas?.nativeElement,\n    );\n  }\n\n  private getHueColor(h: number): string {\n    return `hsl(${h} 100% 50%)`;\n  }\n\n  private eventHandler(\n    e: MouseEvent | TouchEvent,\n    handler: (event: MouseEvent | TouchEvent) => void,\n  ) {\n    handler(e);\n\n    if (!this.window || !this.document) {\n      return;\n    }\n\n    if (e instanceof MouseEvent) {\n      this.document.addEventListener('mousemove', handler);\n\n      const mouseUpEvent = (e: MouseEvent) => {\n        handler(e);\n        this.document.removeEventListener('mousemove', handler);\n        this.document.removeEventListener('mouseup', mouseUpEvent);\n      };\n      this.document.addEventListener('mouseup', mouseUpEvent);\n    }\n\n    if (isTouchEvent(e)) {\n      this.document.addEventListener('touchmove', handler);\n\n      const touchUpEvent = (e: TouchEvent) => {\n        handler(e);\n        this.document.removeEventListener('touchmove', handler);\n        this.document.removeEventListener('touchend', touchUpEvent);\n        this.document.removeEventListener('touchcancel', touchUpEvent);\n      };\n      this.document.addEventListener('touchend', touchUpEvent);\n      this.document.addEventListener('touchcancel', touchUpEvent);\n    }\n  }\n}\n","<div class=\"panel\">\n  <div class=\"spectrum-map\">\n    <button\n      id=\"spectrum-cursor\"\n      class=\"color-spectrum-cursor\"\n      #spectrumCursor\n    ></button>\n    <canvas id=\"spectrum-canvas\" #spectrumCanvas></canvas>\n  </div>\n  <div class=\"hue-map-wrapper\">\n    <div class=\"hue-map\">\n      <button id=\"hue-cursor\" class=\"color-hue-cursor\" #hueCursor></button>\n      <canvas id=\"hue-canvas\" #hueCanvas></canvas>\n    </div>\n    <div class=\"content-fill-opacity\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  effect,\n  input,\n  output,\n  signal,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ColorBoxComponent } from './components/color-box/color-box.component';\n\n@Component({\n  selector: 'lib-color-picker',\n  imports: [CommonModule, ColorBoxComponent],\n  templateUrl: './color-picker.component.html',\n  styleUrls: ['./color-picker.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ColorPicker {\n  inColor = input.required<string | null>();\n  eyeColor = input<string | null>(null);\n  hasTransparent = input(true);\n  hasEyeDropper = input(false);\n  colorDefault = input('#000000');\n\n  changeModel = output<string | null>();\n  changeEnd = output();\n  startEye = output<Event>();\n\n  currentColor = signal<string | null>(null);\n\n  constructor() {\n    effect(() => {\n      this.currentColor.set(this.inColor());\n    });\n  }\n\n  get defaultColor(): string | null {\n    return this.hasTransparent() ? null : this.colorDefault();\n  }\n\n  get isTransparent(): boolean {\n    return !this.currentColor() && this.hasTransparent();\n  }\n\n  changeInput(event: Event) {\n    const color = (event.target as HTMLInputElement).value;\n    this.selectColor(color);\n  }\n\n  changeColor(color: string) {\n    this.currentColor.set(color);\n    this.changeModel.emit(color);\n  }\n\n  selectColor(color: string | null) {\n    this.currentColor.set(color || this.defaultColor);\n    this.changeModel.emit(color);\n    this.changeEnd.emit();\n  }\n}\n","<div class=\"color-box\">\r\n  <div class=\"design-color-box-wrapper\">\r\n    <ng-container *ngTemplateOutlet=\"colorMapTemplate\"></ng-container>\r\n  </div>\r\n\r\n  <div class=\"color-box__info\">\r\n    @if (hasEyeDropper()) {\r\n      <div class=\"color-box__picker\" (click)=\"startEye.emit($event)\">\r\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M20.4227 4.27425L19.7257 3.57734C18.9559 2.80755 17.7079 2.80755 16.9381 3.57734L12.7565 7.75881L12.0596 7.0619C11.6747 6.677 11.0507 6.677 10.6658 7.0619C10.2809 7.44679 10.2809 8.07083 10.6658 8.45572L11.3626 9.15255L4.39341 16.1217C4.5402 17.3687 4.0452 19.2573 3 20.3027L3.69654 21C4.74192 19.9546 6.63098 19.4596 7.87801 19.6062L14.8472 12.6371L15.5442 13.3341C15.9291 13.719 16.5532 13.719 16.9381 13.3341C17.323 12.9492 17.323 12.3252 16.9381 11.9403L16.2411 11.2434L20.4227 7.0619C21.1924 6.29211 21.1924 5.04404 20.4227 4.27425ZM12.0595 9.84946L14.1503 11.9402L7.49458 18.5958C6.82993 18.5871 6.10446 18.7017 5.41883 18.915C5.24707 18.9685 5.07418 19.0292 4.90213 19.0976C4.97048 18.9256 5.03126 18.7527 5.0847 18.5809C5.29805 17.8953 5.41264 17.1698 5.40386 16.5051L12.0595 9.84946Z\" fill=\"#3D3D3D\"/>\r\n        </svg>\r\n      </div>\r\n    }\r\n    <div class=\"color-box__wrapperline\">\r\n      @if (hasTransparent()) {\r\n        <div\r\n          class=\"color-box__transparent\"\r\n          (click)=\"selectColor(null)\"\r\n        >\r\n          <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 32 32\">\r\n            <path fill=\"currentColor\" d=\"M8 25.333c0 1.467 1.2 2.667 2.667 2.667h10.667c1.467 0 2.667-1.2 2.667-2.667v-16h-16v16zM11.28 15.84l1.88-1.88 2.84 2.827 2.827-2.827 1.88 1.88-2.827 2.827 2.827 2.827-1.88 1.88-2.827-2.827-2.827 2.827-1.88-1.88 2.827-2.827-2.84-2.827zM20.667 5.333l-1.333-1.333h-6.667l-1.333 1.333h-4.667v2.667h18.667v-2.667z\"></path>\r\n          </svg>\r\n        </div>\r\n      }\r\n      <div\r\n        class=\"color-box__wrapper\"\r\n        [class.color-box__wrapper-withtransparent]=\"hasTransparent()\"\r\n      >\r\n        @if (eyeColor() || currentColor(); as color) {\r\n          <div\r\n            class=\"color-box__preview\"\r\n            [style.background]=\"color\"\r\n          ></div>\r\n        }\r\n        @if (isTransparent) {\r\n          <div\r\n            class=\"color-box__preview color-box__preview--transparent\"\r\n          ></div>\r\n        }\r\n        <div class=\"color-box__form-element\">\r\n          <input\r\n            type=\"text\"\r\n            [value]=\"\r\n              currentColor() ||\r\n              (hasTransparent() ? 'Без цвета' : colorDefault())\r\n            \"\r\n            class=\"color-box__input\"\r\n            [class.color-box__input-trasparent]=\"isTransparent\"\r\n            [attr.readonly]=\"isTransparent || null\"\r\n            (change)=\"changeInput($event)\"\r\n            pattern=\"^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$\"\r\n            maxlength=\"7\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #colorMapTemplate>\r\n  <color-box\r\n    [inputColorPicker]=\"currentColor() || colorDefault()\"\r\n    (changeColor)=\"changeColor($event)\"\r\n    (selectColor)=\"selectColor($event)\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </color-box>\r\n</ng-template>\r\n\r\n","/*\n * Public API Surface of color-picker\n */\n\nexport * from './lib/color-picker.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@severfam/angular-color-picker",
+  "version": "0.1.0",
+  "description": "Angular color picker component with shade and saturation selection. Renders on Canvas, auto-scales and recalculates sizes on container resize.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sashaseverfam/angular-color-picker.git"
+  },
+  "peerDependencies": {
+    "@angular/common": "^21.2.0",
+    "@angular/core": "^21.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/severfam-angular-color-picker.mjs",
+  "typings": "types/severfam-angular-color-picker.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/severfam-angular-color-picker.d.ts",
+      "default": "./fesm2022/severfam-angular-color-picker.mjs"
+    }
+  },
+  "type": "module"
+}

package/types/severfam-angular-color-picker.d.ts

@@ -0,0 +1,23 @@
+import * as _angular_core from '@angular/core';
+
+declare class ColorPicker {
+    inColor: _angular_core.InputSignal<string | null>;
+    eyeColor: _angular_core.InputSignal<string | null>;
+    hasTransparent: _angular_core.InputSignal<boolean>;
+    hasEyeDropper: _angular_core.InputSignal<boolean>;
+    colorDefault: _angular_core.InputSignal<string>;
+    changeModel: _angular_core.OutputEmitterRef<string | null>;
+    changeEnd: _angular_core.OutputEmitterRef<void>;
+    startEye: _angular_core.OutputEmitterRef<Event>;
+    currentColor: _angular_core.WritableSignal<string | null>;
+    constructor();
+    get defaultColor(): string | null;
+    get isTransparent(): boolean;
+    changeInput(event: Event): void;
+    changeColor(color: string): void;
+    selectColor(color: string | null): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ColorPicker, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ColorPicker, "lib-color-picker", never, { "inColor": { "alias": "inColor"; "required": true; "isSignal": true; }; "eyeColor": { "alias": "eyeColor"; "required": false; "isSignal": true; }; "hasTransparent": { "alias": "hasTransparent"; "required": false; "isSignal": true; }; "hasEyeDropper": { "alias": "hasEyeDropper"; "required": false; "isSignal": true; }; "colorDefault": { "alias": "colorDefault"; "required": false; "isSignal": true; }; }, { "changeModel": "changeModel"; "changeEnd": "changeEnd"; "startEye": "startEye"; }, never, ["*"], true, never>;
+}
+
+export { ColorPicker };