ng-antd-color-picker/fesm2022/ng-antd-color-picker.mjs

The angular version of the color-picker component based on antd styles.

import { TinyColor } from '@ctrl/tinycolor';
import * as i0 from '@angular/core';
import { Component, Input, EventEmitter, Inject, ViewChild, Output, NgModule } from '@angular/core';
import { DOCUMENT, NgClass, NgIf, NgTemplateOutlet } from '@angular/common';

const getRoundNumber = (value) => Math.round(Number(value || 0));
const convertHsb2Hsv = (color) => {
    if (color && typeof color === 'object' && 'h' in color && 'b' in color) {
        const { b, ...resets } = color;
        return {
            ...resets,
            v: b
        };
    }
    if (typeof color === 'string' && /hsb/.test(color)) {
        return color.replace(/hsb/, 'hsv');
    }
    return color;
};
class Color extends TinyColor {
    constructor(color) {
        super(convertHsb2Hsv(color));
    }
    toHsbString() {
        const hsb = this.toHsb();
        const saturation = getRoundNumber(hsb.s * 100);
        const lightness = getRoundNumber(hsb.b * 100);
        const hue = getRoundNumber(hsb.h);
        const alpha = hsb.a;
        const hsbString = `hsb(${hue}, ${saturation}%, ${lightness}%)`;
        const hsbaString = `hsba(${hue}, ${saturation}%, ${lightness}%, ${alpha.toFixed(alpha === 0 ? 0 : 2)})`;
        return alpha === 1 ? hsbString : hsbaString;
    }
    toHsb() {
        let hsv = this.toHsv();
        if (typeof this.originalInput === 'object' && this.originalInput) {
            if ('h' in this.originalInput) {
                hsv = this.originalInput;
            }
        }
        const { v, ...resets } = hsv;
        return {
            ...resets,
            b: hsv.v
        };
    }
}

const generateColor = (color) => {
    if (color instanceof Color) {
        return color;
    }
    return new Color(color);
};
const defaultColor = generateColor('#1677ff');
function calculateColor(offset, containerRef, targetRef, color, type) {
    const { width, height } = containerRef.getBoundingClientRect();
    const { width: targetWidth, height: targetHeight } = targetRef.getBoundingClientRect();
    const centerOffsetX = targetWidth / 2;
    const centerOffsetY = targetHeight / 2;
    const saturation = (offset.x + centerOffsetX) / width;
    const bright = 1 - (offset.y + centerOffsetY) / height;
    const hsb = color?.toHsb() || { a: 0, h: 0, s: 0, b: 0 };
    const alphaOffset = saturation;
    const hueOffset = ((offset.x + centerOffsetX) / width) * 360;
    if (type) {
        switch (type) {
            case 'hue':
                return generateColor({
                    ...hsb,
                    h: hueOffset <= 0 ? 0 : hueOffset
                });
            case 'alpha':
                return generateColor({
                    ...hsb,
                    a: alphaOffset <= 0 ? 0 : alphaOffset
                });
        }
    }
    return generateColor({
        h: hsb.h,
        s: saturation <= 0 ? 0 : saturation,
        b: bright >= 1 ? 1 : bright,
        a: hsb.a
    });
}
const calculateOffset = (containerRef, targetRef, color, type) => {
    const { width, height } = containerRef.getBoundingClientRect();
    const { width: targetWidth, height: targetHeight } = targetRef.getBoundingClientRect();
    const centerOffsetX = targetWidth / 2;
    const centerOffsetY = targetHeight / 2;
    const hsb = color?.toHsb() || { a: 0, h: 0, s: 0, b: 0 };
    // Exclusion of boundary cases
    if ((targetWidth === 0 && targetHeight === 0) || targetWidth !== targetHeight) {
        return null;
    }
    if (type) {
        switch (type) {
            case 'hue':
                return {
                    x: (hsb.h / 360) * width - centerOffsetX,
                    y: -centerOffsetY / 3
                };
            case 'alpha':
                return {
                    x: hsb.a * width - centerOffsetX,
                    y: -centerOffsetY / 3
                };
        }
    }
    return {
        x: hsb.s * width - centerOffsetX,
        y: (1 - hsb.b) * height - centerOffsetY
    };
};

class HandlerComponent {
    constructor() {
        this.color = null;
        this.size = 'default';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: HandlerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: HandlerComponent, isStandalone: true, selector: "color-handler", inputs: { color: "color", size: "size" }, ngImport: i0, template: `
    <div
      class="ant-color-picker-handler"
      [style.background-color]="color"
      [class.ant-color-picker-handler-sm]="size === 'small'"
    ></div>
  `, isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: HandlerComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'color-handler',
                    standalone: true,
                    template: `
    <div
      class="ant-color-picker-handler"
      [style.background-color]="color"
      [class.ant-color-picker-handler-sm]="size === 'small'"
    ></div>
  `
                }]
        }], propDecorators: { color: [{
                type: Input
            }], size: [{
                type: Input
            }] } });

class PaletteComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: PaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: PaletteComponent, isStandalone: true, selector: "color-palette", ngImport: i0, template: `
    <div class="ant-color-picker-palette" style="position: relative">
      <ng-content></ng-content>
    </div>
  `, isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: PaletteComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'color-palette',
                    standalone: true,
                    template: `
    <div class="ant-color-picker-palette" style="position: relative">
      <ng-content></ng-content>
    </div>
  `
                }]
        }] });

function getPosition$1(e) {
    const obj = 'touches' in e ? e.touches[0] : e;
    const scrollXOffset = document.documentElement.scrollLeft || document.body.scrollLeft || window.pageXOffset;
    const scrollYOffset = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
    return { pageX: obj.pageX - scrollXOffset, pageY: obj.pageY - scrollYOffset };
}
class PickerComponent {
    toRgbString() {
        return this.color?.toRgbString();
    }
    toHsb() {
        return `hsl(${this.color?.toHsb().h},100%, 50%)`;
    }
    constructor(cdr, document) {
        this.cdr = cdr;
        this.document = document;
        this.color = null;
        this.nzOnChange = new EventEmitter();
        this.nzOnChangeComplete = new EventEmitter();
        this.disabled = false;
        this.offsetValue = { x: 0, y: 0 };
        this.dragRef = false;
        this.mouseMoveRef = () => null;
        this.mouseUpRef = () => null;
        this.updateOffset = (e, direction = 'y') => {
            const { pageX, pageY } = getPosition$1(e);
            const { x: rectX, y: rectY, width, height } = this.containerRef?.nativeElement?.getBoundingClientRect() || { x: 0, y: 0, width: 0, height: 0 };
            const { width: targetWidth, height: targetHeight } = this.transformRef?.nativeElement?.getBoundingClientRect() || {
                width: 0,
                height: 0
            };
            const centerOffsetX = targetWidth / 2;
            const centerOffsetY = targetHeight / 2;
            const offsetX = Math.max(0, Math.min(pageX - rectX, width)) - centerOffsetX;
            const offsetY = Math.max(0, Math.min(pageY - rectY, height)) - centerOffsetY;
            const calcOffset = {
                x: offsetX,
                y: direction === 'x' ? this.offsetValue.y : offsetY
            };
            // Exclusion of boundary cases
            if ((targetWidth === 0 && targetHeight === 0) || targetWidth !== targetHeight) {
                return;
            }
            this.offsetValue = calcOffset;
            this.nzOnChange.emit(calculateColor(calcOffset, this.containerRef.nativeElement, this.transformRef.nativeElement, this.color));
            this.cdr.detectChanges();
        };
        this.onDragMove = (e) => {
            e.preventDefault();
            this.updateOffset(e);
        };
        this.onDragStop = (e) => {
            e.preventDefault();
            this.dragRef = false;
            this.document.removeEventListener('mousemove', this.onDragMove);
            this.document.removeEventListener('mouseup', this.mouseUpRef);
            this.document.removeEventListener('touchmove', this.mouseMoveRef);
            this.document.removeEventListener('touchend', this.mouseUpRef);
            this.mouseMoveRef = () => null;
            this.mouseUpRef = () => null;
            this.nzOnChangeComplete?.emit();
        };
        this.onDragStart = (e) => {
            if (this.disabled) {
                return;
            }
            this.updateOffset(e);
            this.dragRef = true;
            this.document.addEventListener('mousemove', this.onDragMove);
            this.document.addEventListener('mouseup', this.onDragStop);
            this.document.addEventListener('touchmove', this.onDragMove);
            this.document.addEventListener('touchend', this.onDragStop);
            this.mouseMoveRef = this.onDragMove;
            this.mouseUpRef = this.onDragStop;
            this.cdr.markForCheck();
        };
    }
    ngOnInit() {
        this.document.removeEventListener('mousemove', this.mouseMoveRef);
        this.document.removeEventListener('mouseup', this.mouseUpRef);
        this.document.removeEventListener('touchmove', this.mouseMoveRef);
        this.document.removeEventListener('touchend', this.mouseUpRef);
        this.mouseMoveRef = () => null;
        this.mouseUpRef = () => null;
    }
    ngOnChanges(changes) {
        const { color } = changes;
        if (color) {
            if (!this.dragRef && this.containerRef && this.transformRef) {
                const calcOffset = calculateOffset(this.containerRef.nativeElement, this.transformRef.nativeElement, this.color);
                if (calcOffset) {
                    this.offsetValue = calcOffset;
                    this.cdr.detectChanges();
                }
            }
        }
    }
    ngAfterViewInit() {
        if (!this.dragRef && this.containerRef && this.transformRef) {
            const calcOffset = calculateOffset(this.containerRef.nativeElement, this.transformRef.nativeElement, this.color);
            if (calcOffset) {
                this.offsetValue = calcOffset;
                this.cdr.detectChanges();
            }
        }
    }
    dragStartHandle(e) {
        this.onDragStart(e);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: PickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: PickerComponent, isStandalone: true, selector: "color-picker", inputs: { color: "color", disabled: "disabled" }, outputs: { nzOnChange: "nzOnChange", nzOnChangeComplete: "nzOnChangeComplete" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["slider"], descendants: true }, { propertyName: "transformRef", first: true, predicate: ["transform"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
    <div
      #slider
      class="ant-color-picker-select"
      (mousedown)="dragStartHandle($event)"
      (touchstart)="dragStartHandle($event)"
    >
      <color-palette>
        <div
          #transform
          style="position: absolute; z-index: 1;"
          [style.left]="offsetValue.x + 'px'"
          [style.top]="offsetValue.y + 'px'"
        >
          <color-handler [color]="toRgbString()" />
        </div>
        <div
          class="ant-color-picker-saturation"
          style="
        background-image: linear-gradient(0deg, #000, transparent),
          linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0));
      "
          [style.background-color]="toHsb()"
        ></div>
      </color-palette>
    </div>
  `, isInline: true, dependencies: [{ kind: "component", type: HandlerComponent, selector: "color-handler", inputs: ["color", "size"] }, { kind: "component", type: PaletteComponent, selector: "color-palette" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: PickerComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'color-picker',
                    standalone: true,
                    imports: [HandlerComponent, PaletteComponent],
                    template: `
    <div
      #slider
      class="ant-color-picker-select"
      (mousedown)="dragStartHandle($event)"
      (touchstart)="dragStartHandle($event)"
    >
      <color-palette>
        <div
          #transform
          style="position: absolute; z-index: 1;"
          [style.left]="offsetValue.x + 'px'"
          [style.top]="offsetValue.y + 'px'"
        >
          <color-handler [color]="toRgbString()" />
        </div>
        <div
          class="ant-color-picker-saturation"
          style="
        background-image: linear-gradient(0deg, #000, transparent),
          linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0));
      "
          [style.background-color]="toHsb()"
        ></div>
      </color-palette>
    </div>
  `
                }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }], propDecorators: { containerRef: [{
                type: ViewChild,
                args: ['slider', { static: false }]
            }], transformRef: [{
                type: ViewChild,
                args: ['transform', { static: false }]
            }], color: [{
                type: Input
            }], nzOnChange: [{
                type: Output
            }], nzOnChangeComplete: [{
                type: Output
            }], disabled: [{
                type: Input
            }] } });

class GradientComponent {
    constructor() {
        this.colors = [];
        this.direction = 'to right';
        this.type = 'hue';
        this.gradientColors = '';
    }
    ngOnInit() {
        this.useMemo();
    }
    ngOnChanges(changes) {
        const { colors, type } = changes;
        if (colors || type) {
            this.useMemo();
        }
    }
    useMemo() {
        this.gradientColors = this.colors
            .map((color, idx) => {
            const result = generateColor(color);
            if (this.type === 'alpha' && idx === this.colors.length - 1) {
                result.setAlpha(1);
            }
            return result.toRgbString();
        })
            .join(',');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: GradientComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: GradientComponent, isStandalone: true, selector: "color-gradient", inputs: { colors: "colors", direction: "direction", type: "type" }, usesOnChanges: true, ngImport: i0, template: `
    <div
      class="ant-color-picker-gradient"
      style="position: absolute; inset: 0"
      [style.background]="'linear-gradient(' + direction + ', ' + gradientColors + ')'"
    >
      <ng-content></ng-content>
    </div>
  `, isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: GradientComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'color-gradient',
                    standalone: true,
                    template: `
    <div
      class="ant-color-picker-gradient"
      style="position: absolute; inset: 0"
      [style.background]="'linear-gradient(' + direction + ', ' + gradientColors + ')'"
    >
      <ng-content></ng-content>
    </div>
  `
                }]
        }], ctorParameters: () => [], propDecorators: { colors: [{
                type: Input
            }], direction: [{
                type: Input
            }], type: [{
                type: Input
            }] } });

function getPosition(e) {
    const obj = 'touches' in e ? e.touches[0] : e;
    const scrollXOffset = document.documentElement.scrollLeft || document.body.scrollLeft || window.pageXOffset;
    const scrollYOffset = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
    return { pageX: obj.pageX - scrollXOffset, pageY: obj.pageY - scrollYOffset };
}
class SliderComponent {
    constructor(cdr, document) {
        this.cdr = cdr;
        this.document = document;
        this.gradientColors = [];
        this.direction = 'to right';
        this.type = 'hue';
        this.color = null;
        this.value = null;
        this.disabled = false;
        this.nzOnChange = new EventEmitter();
        this.nzOnChangeComplete = new EventEmitter();
        this.offsetValue = { x: 0, y: 0 };
        this.dragRef = false;
        this.mouseMoveRef = () => null;
        this.mouseUpRef = () => null;
        this.updateOffset = (e, direction = 'x') => {
            const { pageX, pageY } = getPosition(e);
            const { x: rectX, y: rectY, width, height } = this.containerRef?.nativeElement?.getBoundingClientRect() || { x: 0, y: 0, width: 0, height: 0 };
            const { width: targetWidth, height: targetHeight } = this.transformRef?.nativeElement?.getBoundingClientRect() || {
                width: 0,
                height: 0
            };
            const centerOffsetX = targetWidth / 2;
            const centerOffsetY = targetHeight / 2;
            const offsetX = Math.max(0, Math.min(pageX - rectX, width)) - centerOffsetX;
            const offsetY = Math.max(0, Math.min(pageY - rectY, height)) - centerOffsetY;
            const calcOffset = {
                x: offsetX,
                y: direction === 'x' ? this.offsetValue.y : offsetY
            };
            // Exclusion of boundary cases
            if ((targetWidth === 0 && targetHeight === 0) || targetWidth !== targetHeight) {
                return;
            }
            this.offsetValue = calcOffset;
            this.nzOnChange.emit(calculateColor(calcOffset, this.containerRef.nativeElement, this.transformRef.nativeElement, this.color, this.type));
            this.cdr.detectChanges();
        };
        this.onDragMove = (e) => {
            e.preventDefault();
            this.updateOffset(e);
        };
        this.onDragStop = (e) => {
            e.preventDefault();
            this.dragRef = false;
            this.document.removeEventListener('mousemove', this.onDragMove);
            this.document.removeEventListener('mouseup', this.mouseUpRef);
            this.document.removeEventListener('touchmove', this.mouseMoveRef);
            this.document.removeEventListener('touchend', this.mouseUpRef);
            this.mouseMoveRef = () => null;
            this.mouseUpRef = () => null;
            this.nzOnChangeComplete?.emit(this.type);
        };
        this.onDragStart = (e) => {
            if (this.disabled) {
                return;
            }
            this.updateOffset(e);
            this.dragRef = true;
            this.document.addEventListener('mousemove', this.onDragMove);
            this.document.addEventListener('mouseup', this.onDragStop);
            this.document.addEventListener('touchmove', this.onDragMove);
            this.document.addEventListener('touchend', this.onDragStop);
            this.mouseMoveRef = this.onDragMove;
            this.mouseUpRef = this.onDragStop;
            this.cdr.markForCheck();
        };
    }
    ngOnInit() {
        this.document.removeEventListener('mousemove', this.mouseMoveRef);
        this.document.removeEventListener('mouseup', this.mouseUpRef);
        this.document.removeEventListener('touchmove', this.mouseMoveRef);
        this.document.removeEventListener('touchend', this.mouseUpRef);
        this.mouseMoveRef = () => null;
        this.mouseUpRef = () => null;
    }
    ngOnChanges(changes) {
        const { color } = changes;
        if (color) {
            if (!this.dragRef && this.containerRef && this.transformRef) {
                const calcOffset = calculateOffset(this.containerRef.nativeElement, this.transformRef.nativeElement, this.color, this.type);
                if (calcOffset) {
                    this.offsetValue = calcOffset;
                    this.cdr.detectChanges();
                }
            }
        }
    }
    ngAfterViewInit() {
        if (!this.dragRef && this.containerRef && this.transformRef) {
            const calcOffset = calculateOffset(this.containerRef.nativeElement, this.transformRef.nativeElement, this.color, this.type);
            if (calcOffset) {
                this.offsetValue = calcOffset;
                this.cdr.detectChanges();
            }
        }
    }
    dragStartHandle(e) {
        this.onDragStart(e);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: SliderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: SliderComponent, isStandalone: true, selector: "color-slider", inputs: { gradientColors: "gradientColors", direction: "direction", type: "type", color: "color", value: "value", disabled: "disabled" }, outputs: { nzOnChange: "nzOnChange", nzOnChangeComplete: "nzOnChangeComplete" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["slider"], descendants: true }, { propertyName: "transformRef", first: true, predicate: ["transform"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
    <div
      #slider
      (mousedown)="dragStartHandle($event)"
      (touchstart)="dragStartHandle($event)"
      class="ant-color-picker-slider"
      [ngClass]="'ant-color-picker-slider-' + type"
    >
      <color-palette>
        <div
          #transform
          style="position: absolute; z-index: 1;"
          [style.left]="offsetValue.x + 'px'"
          [style.top]="offsetValue.y + 'px'"
        >
          <color-handler size="small" [color]="value"></color-handler>
        </div>
        <color-gradient [colors]="gradientColors" [direction]="direction" [type]="type"></color-gradient>
      </color-palette>
    </div>
  `, isInline: true, styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "component", type: PaletteComponent, selector: "color-palette" }, { kind: "component", type: GradientComponent, selector: "color-gradient", inputs: ["colors", "direction", "type"] }, { kind: "component", type: HandlerComponent, selector: "color-handler", inputs: ["color", "size"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: SliderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'color-slider', standalone: true, imports: [PaletteComponent, GradientComponent, HandlerComponent, NgClass], template: `
    <div
      #slider
      (mousedown)="dragStartHandle($event)"
      (touchstart)="dragStartHandle($event)"
      class="ant-color-picker-slider"
      [ngClass]="'ant-color-picker-slider-' + type"
    >
      <color-palette>
        <div
          #transform
          style="position: absolute; z-index: 1;"
          [style.left]="offsetValue.x + 'px'"
          [style.top]="offsetValue.y + 'px'"
        >
          <color-handler size="small" [color]="value"></color-handler>
        </div>
        <color-gradient [colors]="gradientColors" [direction]="direction" [type]="type"></color-gradient>
      </color-palette>
    </div>
  `, styles: [":host{display:block;width:100%}\n"] }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }], propDecorators: { containerRef: [{
                type: ViewChild,
                args: ['slider', { static: false }]
            }], transformRef: [{
                type: ViewChild,
                args: ['transform', { static: false }]
            }], gradientColors: [{
                type: Input
            }], direction: [{
                type: Input
            }], type: [{
                type: Input
            }], color: [{
                type: Input
            }], value: [{
                type: Input
            }], disabled: [{
                type: Input
            }], nzOnChange: [{
                type: Output
            }], nzOnChangeComplete: [{
                type: Output
            }] } });

class NgAntdColorBlockComponent {
    constructor() {
        this.color = defaultColor.toHsbString();
        this.nzOnClick = new EventEmitter();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: NgAntdColorBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: NgAntdColorBlockComponent, isStandalone: true, selector: "ng-antd-color-block", inputs: { color: "color" }, outputs: { nzOnClick: "nzOnClick" }, ngImport: i0, template: `
    <div class="ant-color-picker-color-block" (click)="nzOnClick.emit(true)">
      <div class="ant-color-picker-color-block-inner" [style.background-color]="color"></div>
    </div>
  `, isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: NgAntdColorBlockComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'ng-antd-color-block',
                    standalone: true,
                    template: `
    <div class="ant-color-picker-color-block" (click)="nzOnClick.emit(true)">
      <div class="ant-color-picker-color-block-inner" [style.background-color]="color"></div>
    </div>
  `
                }]
        }], propDecorators: { color: [{
                type: Input
            }], nzOnClick: [{
                type: Output
            }] } });

class NgAntdColorPickerComponent {
    constructor(cdr) {
        this.cdr = cdr;
        this.nzOnChange = new EventEmitter();
        this.nzOnChangeComplete = new EventEmitter();
        this.panelRenderHeader = null;
        this.panelRenderFooter = null;
        this.disabledAlpha = false;
        this.disabled = false;
        this.colorValue = null;
        this.alphaColor = '';
        this.hueColor = [
            'rgb(255, 0, 0) 0%',
            'rgb(255, 255, 0) 17%',
            'rgb(0, 255, 0) 33%',
            'rgb(0, 255, 255) 50%',
            'rgb(0, 0, 255) 67%',
            'rgb(255, 0, 255) 83%',
            'rgb(255, 0, 0) 100%'
        ];
        this.gradientColors = ['rgba(255, 0, 4, 0) 0%', this.alphaColor];
        this.toRgbString = this.colorValue?.toRgbString() || '';
    }
    ngOnInit() {
        this.setColorValue(this.value);
    }
    ngOnChanges(changes) {
        const { value, defaultValue } = changes;
        if (value || defaultValue) {
            this.setColorValue(this.value);
        }
    }
    hasValue(value) {
        return !!value;
    }
    setColorValue(color) {
        let mergeState;
        if (this.hasValue(color)) {
            mergeState = color;
        }
        else if (this.hasValue(this.defaultValue)) {
            mergeState = this.defaultValue;
        }
        else {
            mergeState = defaultColor;
        }
        this.colorValue = generateColor(mergeState);
        this.setAlphaColor(this.colorValue);
        this.toRgbString = this.colorValue?.toRgbString() || '';
        this.cdr.detectChanges();
    }
    setAlphaColor(colorValue) {
        const rgb = generateColor(colorValue.toRgbString());
        this.alphaColor = rgb.toRgbString();
        this.gradientColors = ['rgba(255, 0, 4, 0) 0%', this.alphaColor];
        this.cdr.markForCheck();
    }
    handleChange(color, type) {
        this.setColorValue(color);
        this.nzOnChange.emit({ color, type });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: NgAntdColorPickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: NgAntdColorPickerComponent, isStandalone: true, selector: "ng-antd-color-picker", inputs: { value: "value", defaultValue: "defaultValue", panelRenderHeader: "panelRenderHeader", panelRenderFooter: "panelRenderFooter", disabledAlpha: "disabledAlpha", disabled: "disabled" }, outputs: { nzOnChange: "nzOnChange", nzOnChangeComplete: "nzOnChangeComplete" }, usesOnChanges: true, ngImport: i0, template: `
    <div class="ant-color-picker-panel" [class.ant-color-picker-panel-disabled]="disabled">
      <ng-container *ngIf="panelRenderHeader">
        <ng-template [ngTemplateOutlet]="panelRenderHeader"></ng-template>
      </ng-container>
      <color-picker
        [color]="colorValue"
        (nzOnChange)="handleChange($event)"
        [disabled]="disabled"
        (nzOnChangeComplete)="nzOnChangeComplete.emit($event)"
      ></color-picker>
      <div class="ant-color-picker-slider-container">
        <div class="ant-color-picker-slider-group" [class.ant-color-picker-slider-group-disabled-alpha]="disabledAlpha">
          <color-slider
            [color]="colorValue"
            [value]="'hsl(' + colorValue?.toHsb()?.h + ',100%, 50%)'"
            [gradientColors]="hueColor"
            (nzOnChange)="handleChange($event, 'hue')"
            [disabled]="disabled"
            (nzOnChangeComplete)="nzOnChangeComplete.emit($event)"
          ></color-slider>
          <ng-container *ngIf="!disabledAlpha">
            <color-slider
              type="alpha"
              [color]="colorValue"
              [value]="toRgbString"
              [gradientColors]="gradientColors"
              (nzOnChange)="handleChange($event, 'alpha')"
              [disabled]="disabled"
              (nzOnChangeComplete)="nzOnChangeComplete.emit($event)"
            ></color-slider>
          </ng-container>
        </div>
        <ng-antd-color-block [color]="toRgbString"></ng-antd-color-block>
      </div>
      <ng-container *ngIf="panelRenderFooter">
        <ng-template [ngTemplateOutlet]="panelRenderFooter"></ng-template>
      </ng-container>
    </div>
  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PickerComponent, selector: "color-picker", inputs: ["color", "disabled"], outputs: ["nzOnChange", "nzOnChangeComplete"] }, { kind: "component", type: SliderComponent, selector: "color-slider", inputs: ["gradientColors", "direction", "type", "color", "value", "disabled"], outputs: ["nzOnChange", "nzOnChangeComplete"] }, { kind: "component", type: NgAntdColorBlockComponent, selector: "ng-antd-color-block", inputs: ["color"], outputs: ["nzOnClick"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: NgAntdColorPickerComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'ng-antd-color-picker',
                    standalone: true,
                    imports: [NgIf, PickerComponent, SliderComponent, NgAntdColorBlockComponent, NgTemplateOutlet],
                    template: `
    <div class="ant-color-picker-panel" [class.ant-color-picker-panel-disabled]="disabled">
      <ng-container *ngIf="panelRenderHeader">
        <ng-template [ngTemplateOutlet]="panelRenderHeader"></ng-template>
      </ng-container>
      <color-picker
        [color]="colorValue"
        (nzOnChange)="handleChange($event)"
        [disabled]="disabled"
        (nzOnChangeComplete)="nzOnChangeComplete.emit($event)"
      ></color-picker>
      <div class="ant-color-picker-slider-container">
        <div class="ant-color-picker-slider-group" [class.ant-color-picker-slider-group-disabled-alpha]="disabledAlpha">
          <color-slider
            [color]="colorValue"
            [value]="'hsl(' + colorValue?.toHsb()?.h + ',100%, 50%)'"
            [gradientColors]="hueColor"
            (nzOnChange)="handleChange($event, 'hue')"
            [disabled]="disabled"
            (nzOnChangeComplete)="nzOnChangeComplete.emit($event)"
          ></color-slider>
          <ng-container *ngIf="!disabledAlpha">
            <color-slider
              type="alpha"
              [color]="colorValue"
              [value]="toRgbString"
              [gradientColors]="gradientColors"
              (nzOnChange)="handleChange($event, 'alpha')"
              [disabled]="disabled"
              (nzOnChangeComplete)="nzOnChangeComplete.emit($event)"
            ></color-slider>
          </ng-container>
        </div>
        <ng-antd-color-block [color]="toRgbString"></ng-antd-color-block>
      </div>
      <ng-container *ngIf="panelRenderFooter">
        <ng-template [ngTemplateOutlet]="panelRenderFooter"></ng-template>
      </ng-container>
    </div>
  `
                }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                type: Input
            }], defaultValue: [{
                type: Input
            }], nzOnChange: [{
                type: Output
            }], nzOnChangeComplete: [{
                type: Output
            }], panelRenderHeader: [{
                type: Input
            }], panelRenderFooter: [{
                type: Input
            }], disabledAlpha: [{
                type: Input
            }], disabled: [{
                type: Input
            }] } });

class NgAntdColorPickerModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: NgAntdColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: NgAntdColorPickerModule, imports: [NgAntdColorPickerComponent, NgAntdColorBlockComponent], exports: [NgAntdColorPickerComponent, NgAntdColorBlockComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: NgAntdColorPickerModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: NgAntdColorPickerModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [NgAntdColorPickerComponent, NgAntdColorBlockComponent],
                    exports: [NgAntdColorPickerComponent, NgAntdColorBlockComponent]
                }]
        }] });

/*
 * Public API Surface of ng-antd-color-picker
 */

/**
 * Generated bundle index. Do not edit.
 */

export { Color, NgAntdColorBlockComponent, NgAntdColorPickerComponent, NgAntdColorPickerModule, calculateColor, calculateOffset, defaultColor, generateColor, getRoundNumber };
//# sourceMappingURL=ng-antd-color-picker.mjs.map