import { __decorate } from 'tslib';
import * as i0 from '@angular/core';
import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, forwardRef, NgModule } from '@angular/core';
import * as i1$1 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Subject } from 'rxjs';
import { filter, debounceTime, takeUntil } from 'rxjs/operators';
import * as i1 from 'ng-antd-color-picker';
import { defaultColor, generateColor, NgAntdColorPickerModule } from 'ng-antd-color-picker';
import { isTemplateRef, isNonEmptyString, InputBoolean } from 'ng-zorro-antd/core/util';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i4$1 from 'ng-zorro-antd/popover';
import { NzPopoverModule } from 'ng-zorro-antd/popover';
import * as i3 from 'ng-zorro-antd/select';
import { NzSelectModule } from 'ng-zorro-antd/select';
import * as i4 from 'ng-zorro-antd/input-number';
import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
import * as i5 from 'ng-zorro-antd/input';
import { NzInputModule } from 'ng-zorro-antd/input';

/**
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
 */

/**
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
 */
class NzColorBlockComponent {
    constructor() {
        this.nzColor = defaultColor.toHexString();
        this.nzSize = 'default';
        this.nzOnClick = new EventEmitter();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: NzColorBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: NzColorBlockComponent, selector: "nz-color-block", inputs: { nzColor: "nzColor", nzSize: "nzSize" }, outputs: { nzOnClick: "nzOnClick" }, host: { properties: { "class.ant-color-picker-inline-sm": "nzSize === 'small'", "class.ant-color-picker-inline-lg": "nzSize === 'large'" }, classAttribute: "ant-color-picker-inline" }, exportAs: ["NzColorBlock"], ngImport: i0, template: ` <ng-antd-color-block [color]="nzColor" (nzOnClick)="nzOnClick.emit($event)"></ng-antd-color-block> `, isInline: true, dependencies: [{ kind: "component", type: i1.NgAntdColorBlockComponent, selector: "ng-antd-color-block", inputs: ["color"], outputs: ["nzOnClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: NzColorBlockComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'nz-color-block',
                    exportAs: 'NzColorBlock',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    template: ` <ng-antd-color-block [color]="nzColor" (nzOnClick)="nzOnClick.emit($event)"></ng-antd-color-block> `,
                    host: {
                        class: 'ant-color-picker-inline',
                        '[class.ant-color-picker-inline-sm]': `nzSize === 'small'`,
                        '[class.ant-color-picker-inline-lg]': `nzSize === 'large'`
                    }
                }]
        }], ctorParameters: function () { return []; }, propDecorators: { nzColor: [{
                type: Input
            }], nzSize: [{
                type: Input
            }], nzOnClick: [{
                type: Output
            }] } });

/**
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
 */
class NzColorFormatComponent {
    validatorFn() {
        return (control) => {
            const REGEXP = /^[0-9a-fA-F]{6}$/;
            if (!control.value) {
                return { error: true };
            }
            else if (!REGEXP.test(control.value)) {
                return { error: true };
            }
            return null;
        };
    }
    constructor(formBuilder) {
        this.formBuilder = formBuilder;
        this.format = null;
        this.colorValue = '';
        this.clearColor = false;
        this.formatChange = new EventEmitter();
        this.nzOnFormatChange = new EventEmitter();
        this.destroy$ = new Subject();
        this.formatterPercent = (value) => `${value} %`;
        this.parserPercent = (value) => value.replace(' %', '');
        this.validateForm = this.formBuilder.nonNullable.group({
            isFormat: this.formBuilder.control('hex'),
            hex: this.formBuilder.control('1677FF', this.validatorFn()),
            hsbH: 215,
            hsbS: 91,
            hsbB: 100,
            rgbR: 22,
            rgbG: 119,
            rgbB: 255,
            roundA: 100
        });
    }
    ngOnInit() {
        this.validateForm.valueChanges
            .pipe(filter(() => this.validateForm.valid), debounceTime(200), takeUntil(this.destroy$))
            .subscribe(value => {
            let color = '';
            switch (value.isFormat) {
                case 'hsb':
                    color = generateColor({
                        h: Number(value.hsbH),
                        s: Number(value.hsbS) / 100,
                        b: Number(value.hsbB) / 100,
                        a: Number(value.roundA) / 100
                    }).toHsbString();
                    break;
                case 'rgb':
                    color = generateColor({
                        r: Number(value.rgbR),
                        g: Number(value.rgbG),
                        b: Number(value.rgbB),
                        a: Number(value.roundA) / 100
                    }).toRgbString();
                    break;
                default:
                    const hex = generateColor(value.hex);
                    const hexColor = generateColor({
                        r: hex.r,
                        g: hex.g,
                        b: hex.b,
                        a: Number(value.roundA) / 100
                    });
                    color = hexColor.getAlpha() < 1 ? hexColor.toHex8String() : hexColor.toHexString();
                    break;
            }
            this.formatChange.emit({ color, format: value.isFormat || this.format || 'hex' });
        });
        this.validateForm
            .get('isFormat')
            ?.valueChanges.pipe(takeUntil(this.destroy$))
            .subscribe(value => {
            this.nzOnFormatChange.emit(value);
        });
    }
    ngOnChanges(changes) {
        const { colorValue, format, clearColor } = changes;
        if (colorValue) {
            const colorValue = {
                hex: generateColor(this.colorValue).toHex(),
                hsbH: Math.round(generateColor(this.colorValue).toHsb().h),
                hsbS: Math.round(generateColor(this.colorValue).toHsb().s * 100),
                hsbB: Math.round(generateColor(this.colorValue).toHsb().b * 100),
                rgbR: Math.round(generateColor(this.colorValue).r),
                rgbG: Math.round(generateColor(this.colorValue).g),
                rgbB: Math.round(generateColor(this.colorValue).b),
                roundA: Math.round(generateColor(this.colorValue).roundA * 100)
            };
            this.validateForm.patchValue(colorValue);
        }
        if (format && this.format) {
            this.validateForm.get('isFormat')?.patchValue(this.format);
        }
        if (clearColor && this.clearColor) {
            this.validateForm.get('roundA')?.patchValue(0);
        }
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: NzColorFormatComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: NzColorFormatComponent, selector: "nz-color-format", inputs: { format: "format", colorValue: "colorValue", clearColor: "clearColor" }, outputs: { formatChange: "formatChange", nzOnFormatChange: "nzOnFormatChange" }, exportAs: ["NzColorFormat"], usesOnChanges: true, ngImport: i0, template: `
    <div [formGroup]="validateForm" class="ant-color-picker-input-container">
      <div class="ant-color-picker-format-select">
        <nz-select formControlName="isFormat" nzBorderless nzSize="small">
          <nz-option nzValue="hex" nzLabel="HEX"></nz-option>
          <nz-option nzValue="hsb" nzLabel="HSB"></nz-option>
          <nz-option nzValue="rgb" nzLabel="RGB"></nz-option>
        </nz-select>
      </div>
      <div class="ant-color-picker-input" [ngSwitch]="validateForm.get('isFormat')?.value">
        <div class="ant-color-picker-hex-input" *ngSwitchCase="'hex'">
          <nz-input-group nzPrefix="#" nzSize="small">
            <input nz-input nzSize="small" formControlName="hex" />
          </nz-input-group>
        </div>

        <div class="ant-color-picker-hsb-input" *ngSwitchCase="'hsb'">
          <div class="ant-color-picker-steppers ant-color-picker-hsb-input">
            <nz-input-number
              formControlName="hsbH"
              [nzMin]="0"
              [nzMax]="360"
              [nzStep]="1"
              [nzPrecision]="0"
              nzSize="small"
            ></nz-input-number>
          </div>
          <div class="ant-color-picker-steppers ant-color-picker-hsb-input">
            <nz-input-number
              formControlName="hsbS"
              [nzMin]="0"
              [nzMax]="100"
              [nzStep]="1"
              [nzFormatter]="formatterPercent"
              [nzParser]="parserPercent"
              nzSize="small"
            ></nz-input-number>
          </div>
          <div class="ant-color-picker-steppers ant-color-picker-hsb-input">
            <nz-input-number
              formControlName="hsbB"
              [nzMin]="0"
              [nzMax]="100"
              [nzStep]="1"
              [nzFormatter]="formatterPercent"
              [nzParser]="parserPercent"
              nzSize="small"
            ></nz-input-number>
          </div>
        </div>

        <div class="ant-color-picker-rgb-input" *ngSwitchDefault>
          <div class="ant-color-picker-steppers ant-color-picker-rgb-input">
            <nz-input-number formControlName="rgbR" [nzMin]="0" [nzMax]="255" [nzStep]="1" nzSize="small">
            </nz-input-number>
          </div>
          <div class="ant-color-picker-steppers ant-color-picker-rgb-input">
            <nz-input-number
              formControlName="rgbG"
              [nzMin]="0"
              [nzMax]="255"
              [nzStep]="1"
              nzSize="small"
            ></nz-input-number>
          </div>
          <div class="ant-color-picker-steppers ant-color-picker-rgb-input">
            <nz-input-number
              formControlName="rgbB"
              [nzMin]="0"
              [nzMax]="255"
              [nzStep]="1"
              nzSize="small"
            ></nz-input-number>
          </div>
        </div>
      </div>

      <div class="ant-color-picker-steppers ant-color-picker-alpha-input">
        <nz-input-number
          formControlName="roundA"
          [nzMin]="0"
          [nzMax]="100"
          [nzStep]="1"
          [nzFormatter]="formatterPercent"
          [nzParser]="parserPercent"
          nzSize="small"
        ></nz-input-number>
      </div>
    </div>
  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.NzOptionComponent, selector: "nz-option", inputs: ["nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i3.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.NzInputNumberComponent, selector: "nz-input-number", inputs: ["nzSize", "nzMin", "nzMax", "nzParser", "nzPrecision", "nzPrecisionMode", "nzPlaceHolder", "nzStatus", "nzStep", "nzInputMode", "nzId", "nzDisabled", "nzReadOnly", "nzAutoFocus", "nzBorderless", "nzFormatter"], outputs: ["nzBlur", "nzFocus"], exportAs: ["nzInputNumber"] }, { kind: "directive", type: i5.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStepperless", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i5.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i5.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: NzColorFormatComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'nz-color-format',
                    exportAs: 'NzColorFormat',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    template: `
    <div [formGroup]="validateForm" class="ant-color-picker-input-container">
      <div class="ant-color-picker-format-select">
        <nz-select formControlName="isFormat" nzBorderless nzSize="small">
          <nz-option nzValue="hex" nzLabel="HEX"></nz-option>
          <nz-option nzValue="hsb" nzLabel="HSB"></nz-option>
          <nz-option nzValue="rgb" nzLabel="RGB"></nz-option>
        </nz-select>
      </div>
      <div class="ant-color-picker-input" [ngSwitch]="validateForm.get('isFormat')?.value">
        <div class="ant-color-picker-hex-input" *ngSwitchCase="'hex'">
          <nz-input-group nzPrefix="#" nzSize="small">
            <input nz-input nzSize="small" formControlName="hex" />
          </nz-input-group>
        </div>

        <div class="ant-color-picker-hsb-input" *ngSwitchCase="'hsb'">
          <div class="ant-color-picker-steppers ant-color-picker-hsb-input">
            <nz-input-number
              formControlName="hsbH"
              [nzMin]="0"
              [nzMax]="360"
              [nzStep]="1"
              [nzPrecision]="0"
              nzSize="small"
            ></nz-input-number>
          </div>
          <div class="ant-color-picker-steppers ant-color-picker-hsb-input">
            <nz-input-number
              formControlName="hsbS"
              [nzMin]="0"
              [nzMax]="100"
              [nzStep]="1"
              [nzFormatter]="formatterPercent"
              [nzParser]="parserPercent"
              nzSize="small"
            ></nz-input-number>
          </div>
          <div class="ant-color-picker-steppers ant-color-picker-hsb-input">
            <nz-input-number
              formControlName="hsbB"
              [nzMin]="0"
              [nzMax]="100"
              [nzStep]="1"
              [nzFormatter]="formatterPercent"
              [nzParser]="parserPercent"
              nzSize="small"
            ></nz-input-number>
          </div>
        </div>

        <div class="ant-color-picker-rgb-input" *ngSwitchDefault>
          <div class="ant-color-picker-steppers ant-color-picker-rgb-input">
            <nz-input-number formControlName="rgbR" [nzMin]="0" [nzMax]="255" [nzStep]="1" nzSize="small">
            </nz-input-number>
          </div>
          <div class="ant-color-picker-steppers ant-color-picker-rgb-input">
            <nz-input-number
              formControlName="rgbG"
              [nzMin]="0"
              [nzMax]="255"
              [nzStep]="1"
              nzSize="small"
            ></nz-input-number>
          </div>
          <div class="ant-color-picker-steppers ant-color-picker-rgb-input">
            <nz-input-number
              formControlName="rgbB"
              [nzMin]="0"
              [nzMax]="255"
              [nzStep]="1"
              nzSize="small"
            ></nz-input-number>
          </div>
        </div>
      </div>

      <div class="ant-color-picker-steppers ant-color-picker-alpha-input">
        <nz-input-number
          formControlName="roundA"
          [nzMin]="0"
          [nzMax]="100"
          [nzStep]="1"
          [nzFormatter]="formatterPercent"
          [nzParser]="parserPercent"
          nzSize="small"
        ></nz-input-number>
      </div>
    </div>
  `
                }]
        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { format: [{
                type: Input
            }], colorValue: [{
                type: Input
            }], clearColor: [{
                type: Input
            }], formatChange: [{
                type: Output
            }], nzOnFormatChange: [{
                type: Output
            }] } });

class NzColorPickerComponent {
    constructor(formBuilder, cdr) {
        this.formBuilder = formBuilder;
        this.cdr = cdr;
        this.nzFormat = null;
        this.nzValue = '';
        this.nzSize = 'default';
        this.nzDefaultValue = '';
        this.nzTrigger = 'click';
        this.nzTitle = '';
        this.nzFlipFlop = null;
        this.nzShowText = false;
        this.nzOpen = false;
        this.nzAllowClear = false;
        this.nzDisabled = false;
        this.nzOnChange = new EventEmitter();
        this.nzOnFormatChange = new EventEmitter();
        this.nzOnClear = new EventEmitter();
        this.nzOnOpenChange = new EventEmitter();
        this.isTemplateRef = isTemplateRef;
        this.isNonEmptyString = isNonEmptyString;
        this.destroy$ = new Subject();
        this.isNzDisableFirstChange = true;
        this.blockColor = '';
        this.clearColor = false;
        this.showText = defaultColor.toHexString();
        this.formControl = this.formBuilder.control('');
        this.onChange = () => { };
    }
    writeValue(value) {
        this.nzValue = value;
        this.getBlockColor();
        this.formControl.patchValue(value);
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched() { }
    setDisabledState(isDisabled) {
        this.nzDisabled = (this.isNzDisableFirstChange && this.nzDisabled) || isDisabled;
        this.isNzDisableFirstChange = false;
        this.cdr.markForCheck();
    }
    ngOnInit() {
        this.getBlockColor();
        this.formControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(value => {
            if (!!value) {
                let color = value;
                if (this.nzFormat === 'hex') {
                    color =
                        generateColor(value).getAlpha() < 1
                            ? generateColor(value).toHex8String()
                            : generateColor(value).toHexString();
                }
                else if (this.nzFormat === 'hsb') {
                    color = generateColor(value).toHsbString();
                }
                else if (this.nzFormat === 'rgb') {
                    color = generateColor(value).toRgbString();
                }
                this.showText = color;
                this.onChange(color);
                this.cdr.markForCheck();
            }
        });
    }
    ngOnChanges(changes) {
        const { nzValue, nzDefaultValue } = changes;
        if (nzValue || nzDefaultValue) {
            this.getBlockColor();
        }
    }
    clearColorHandle() {
        this.clearColor = true;
        this.nzOnClear.emit(true);
        this.cdr.markForCheck();
    }
    getBlockColor() {
        if (!!this.nzValue) {
            this.blockColor = generateColor(this.nzValue).toRgbString();
        }
        else if (!!this.nzDefaultValue) {
            this.blockColor = generateColor(this.nzDefaultValue).toRgbString();
        }
        else {
            this.blockColor = defaultColor.toHexString();
        }
    }
    colorChange(value) {
        this.blockColor = value.color.getAlpha() < 1 ? value.color.toHex8String() : value.color.toHexString();
        this.clearColor = false;
        this.cdr.markForCheck();
    }
    formatChange(value) {
        this.nzValue = value.color;
        this.clearColor = false;
        this.getBlockColor();
        this.nzOnChange.emit({ color: generateColor(value.color), format: value.format });
        this.formControl.patchValue(value.color);
        this.cdr.markForCheck();
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: NzColorPickerComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: NzColorPickerComponent, selector: "nz-color-picker", inputs: { nzFormat: "nzFormat", nzValue: "nzValue", nzSize: "nzSize", nzDefaultValue: "nzDefaultValue", nzTrigger: "nzTrigger", nzTitle: "nzTitle", nzFlipFlop: "nzFlipFlop", nzShowText: "nzShowText", nzOpen: "nzOpen", nzAllowClear: "nzAllowClear", nzDisabled: "nzDisabled" }, outputs: { nzOnChange: "nzOnChange", nzOnFormatChange: "nzOnFormatChange", nzOnClear: "nzOnClear", nzOnOpenChange: "nzOnOpenChange" }, host: { properties: { "class.ant-color-picker-disabled": "nzDisabled" }, classAttribute: "ant-color-picker-inline" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => NzColorPickerComponent),
                multi: true
            }
        ], exportAs: ["NzColorPicker"], usesOnChanges: true, ngImport: i0, template: `
    <div
      [class.ant-color-picker-trigger]="!nzFlipFlop"
      [class.ant-color-picker-sm]="nzSize === 'small'"
      [class.ant-color-picker-lg]="nzSize === 'large'"
      nz-popover
      [nzPopoverContent]="colorPicker"
      [nzPopoverTrigger]="!nzDisabled ? nzTrigger : null"
      [nzPopoverVisible]="nzOpen"
      (nzPopoverVisibleChange)="nzOnOpenChange.emit($event)"
    >
      <ng-container *ngIf="!nzFlipFlop">
        <nz-color-block [nzColor]="blockColor" [nzSize]="nzSize"></nz-color-block>
      </ng-container>
      <ng-container *ngIf="nzFlipFlop">
        <ng-template [ngTemplateOutlet]="nzFlipFlop"></ng-template>
      </ng-container>
      <div class="ant-color-picker-trigger-text" *ngIf="nzShowText && !!showText && !nzFlipFlop">
        {{ showText }}
      </div>
    </div>
    <ng-template #colorPicker>
      <ng-antd-color-picker
        [value]="nzValue"
        [defaultValue]="nzDefaultValue"
        [disabled]="nzDisabled"
        [panelRenderHeader]="nzPanelRenderHeader"
        [panelRenderFooter]="nzPanelRenderFooter"
        (nzOnChange)="colorChange($event)"
      ></ng-antd-color-picker>
    </ng-template>
    <ng-template #nzPanelRenderHeader>
      <div class="ant-color-picker-title" *ngIf="nzAllowClear || nzTitle">
        <div class="ant-color-picker-title-content">
          <ng-container [ngSwitch]="true">
            <ng-container *ngSwitchCase="isTemplateRef(nzTitle)">
              <ng-container *ngTemplateOutlet="$any(nzTitle)"></ng-container>
            </ng-container>
            <ng-container *ngSwitchCase="isNonEmptyString(nzTitle)">
              <span [innerHTML]="nzTitle"></span>
            </ng-container>
          </ng-container>
        </div>
        <div class="ant-color-picker-clear" *ngIf="nzAllowClear" (click)="clearColorHandle()"></div>
      </div>
    </ng-template>
    <ng-template #nzPanelRenderFooter>
      <nz-color-format
        [colorValue]="blockColor"
        [clearColor]="clearColor"
        [format]="nzFormat"
        (formatChange)="formatChange($event)"
        (nzOnFormatChange)="nzOnFormatChange.emit($event)"
      ></nz-color-format>
    </ng-template>
  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i1.NgAntdColorPickerComponent, selector: "ng-antd-color-picker", inputs: ["value", "defaultValue", "panelRenderHeader", "panelRenderFooter", "disabledAlpha", "disabled"], outputs: ["nzOnChange", "nzOnChangeComplete"] }, { kind: "directive", type: i4$1.NzPopoverDirective, selector: "[nz-popover]", inputs: ["nzPopoverArrowPointAtCenter", "nzPopoverTitle", "nzPopoverContent", "nz-popover", "nzPopoverTrigger", "nzPopoverPlacement", "nzPopoverOrigin", "nzPopoverVisible", "nzPopoverMouseEnterDelay", "nzPopoverMouseLeaveDelay", "nzPopoverOverlayClassName", "nzPopoverOverlayStyle", "nzPopoverBackdrop"], outputs: ["nzPopoverVisibleChange"], exportAs: ["nzPopover"] }, { kind: "component", type: NzColorBlockComponent, selector: "nz-color-block", inputs: ["nzColor", "nzSize"], outputs: ["nzOnClick"], exportAs: ["NzColorBlock"] }, { kind: "component", type: NzColorFormatComponent, selector: "nz-color-format", inputs: ["format", "colorValue", "clearColor"], outputs: ["formatChange", "nzOnFormatChange"], exportAs: ["NzColorFormat"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
__decorate([
    InputBoolean()
], NzColorPickerComponent.prototype, "nzShowText", void 0);
__decorate([
    InputBoolean()
], NzColorPickerComponent.prototype, "nzOpen", void 0);
__decorate([
    InputBoolean()
], NzColorPickerComponent.prototype, "nzAllowClear", void 0);
__decorate([
    InputBoolean()
], NzColorPickerComponent.prototype, "nzDisabled", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: NzColorPickerComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'nz-color-picker',
                    exportAs: 'NzColorPicker',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    template: `
    <div
      [class.ant-color-picker-trigger]="!nzFlipFlop"
      [class.ant-color-picker-sm]="nzSize === 'small'"
      [class.ant-color-picker-lg]="nzSize === 'large'"
      nz-popover
      [nzPopoverContent]="colorPicker"
      [nzPopoverTrigger]="!nzDisabled ? nzTrigger : null"
      [nzPopoverVisible]="nzOpen"
      (nzPopoverVisibleChange)="nzOnOpenChange.emit($event)"
    >
      <ng-container *ngIf="!nzFlipFlop">
        <nz-color-block [nzColor]="blockColor" [nzSize]="nzSize"></nz-color-block>
      </ng-container>
      <ng-container *ngIf="nzFlipFlop">
        <ng-template [ngTemplateOutlet]="nzFlipFlop"></ng-template>
      </ng-container>
      <div class="ant-color-picker-trigger-text" *ngIf="nzShowText && !!showText && !nzFlipFlop">
        {{ showText }}
      </div>
    </div>
    <ng-template #colorPicker>
      <ng-antd-color-picker
        [value]="nzValue"
        [defaultValue]="nzDefaultValue"
        [disabled]="nzDisabled"
        [panelRenderHeader]="nzPanelRenderHeader"
        [panelRenderFooter]="nzPanelRenderFooter"
        (nzOnChange)="colorChange($event)"
      ></ng-antd-color-picker>
    </ng-template>
    <ng-template #nzPanelRenderHeader>
      <div class="ant-color-picker-title" *ngIf="nzAllowClear || nzTitle">
        <div class="ant-color-picker-title-content">
          <ng-container [ngSwitch]="true">
            <ng-container *ngSwitchCase="isTemplateRef(nzTitle)">
              <ng-container *ngTemplateOutlet="$any(nzTitle)"></ng-container>
            </ng-container>
            <ng-container *ngSwitchCase="isNonEmptyString(nzTitle)">
              <span [innerHTML]="nzTitle"></span>
            </ng-container>
          </ng-container>
        </div>
        <div class="ant-color-picker-clear" *ngIf="nzAllowClear" (click)="clearColorHandle()"></div>
      </div>
    </ng-template>
    <ng-template #nzPanelRenderFooter>
      <nz-color-format
        [colorValue]="blockColor"
        [clearColor]="clearColor"
        [format]="nzFormat"
        (formatChange)="formatChange($event)"
        (nzOnFormatChange)="nzOnFormatChange.emit($event)"
      ></nz-color-format>
    </ng-template>
  `,
                    host: {
                        class: 'ant-color-picker-inline',
                        '[class.ant-color-picker-disabled]': `nzDisabled`
                    },
                    providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => NzColorPickerComponent),
                            multi: true
                        }
                    ]
                }]
        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { nzFormat: [{
                type: Input
            }], nzValue: [{
                type: Input
            }], nzSize: [{
                type: Input
            }], nzDefaultValue: [{
                type: Input
            }], nzTrigger: [{
                type: Input
            }], nzTitle: [{
                type: Input
            }], nzFlipFlop: [{
                type: Input
            }], nzShowText: [{
                type: Input
            }], nzOpen: [{
                type: Input
            }], nzAllowClear: [{
                type: Input
            }], nzDisabled: [{
                type: Input
            }], nzOnChange: [{
                type: Output
            }], nzOnFormatChange: [{
                type: Output
            }], nzOnClear: [{
                type: Output
            }], nzOnOpenChange: [{
                type: Output
            }] } });

/**
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
 */
class NzColorPickerModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: NzColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.5", ngImport: i0, type: NzColorPickerModule, declarations: [NzColorPickerComponent, NzColorBlockComponent, NzColorFormatComponent], imports: [CommonModule,
            NgAntdColorPickerModule,
            NzPopoverModule,
            NzSelectModule,
            FormsModule,
            NzInputNumberModule,
            NzInputModule,
            ReactiveFormsModule], exports: [NzColorPickerComponent, NzColorBlockComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: NzColorPickerModule, imports: [CommonModule,
            NgAntdColorPickerModule,
            NzPopoverModule,
            NzSelectModule,
            FormsModule,
            NzInputNumberModule,
            NzInputModule,
            ReactiveFormsModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: NzColorPickerModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [NzColorPickerComponent, NzColorBlockComponent, NzColorFormatComponent],
                    imports: [
                        CommonModule,
                        NgAntdColorPickerModule,
                        NzPopoverModule,
                        NzSelectModule,
                        FormsModule,
                        NzInputNumberModule,
                        NzInputModule,
                        ReactiveFormsModule
                    ],
                    exports: [NzColorPickerComponent, NzColorBlockComponent]
                }]
        }] });

/**
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
 */

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

export { NzColorBlockComponent, NzColorPickerComponent, NzColorPickerModule };
//# sourceMappingURL=ng-zorro-antd-color-picker.mjs.map
