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

An enterprise-class UI components based on Ant Design and Angular

{"version":3,"file":"ng-zorro-antd-color-picker.mjs","sources":["../../components/color-picker/typings.ts","../../components/color-picker/src/interfaces/color.ts","../../components/color-picker/src/util/util.ts","../../components/color-picker/src/ng-antd-color-block.component.ts","../../components/color-picker/src/components/handler.component.ts","../../components/color-picker/src/components/palette.component.ts","../../components/color-picker/src/components/picker.component.ts","../../components/color-picker/src/components/gradient.component.ts","../../components/color-picker/src/components/slider.component.ts","../../components/color-picker/src/ng-antd-color-picker.component.ts","../../components/color-picker/src/ng-antd-color-picker.module.ts","../../components/color-picker/color-block.component.ts","../../components/color-picker/color-format.component.ts","../../components/color-picker/color-picker.component.ts","../../components/color-picker/color-picker.module.ts","../../components/color-picker/public-api.ts","../../components/color-picker/ng-zorro-antd-color-picker.ts"],"sourcesContent":["/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { Color } from './src/interfaces/color';\n\nexport type NzColorPickerFormatType = 'rgb' | 'hex' | 'hsb';\n\nexport type NzColorPickerTriggerType = 'click' | 'hover';\n\nexport interface ValidForm {\n  isFormat: NzColorPickerFormatType | null;\n  hex: string | null;\n  hsbH: number;\n  hsbS: number;\n  hsbB: number;\n  rgbR: number;\n  rgbG: number;\n  rgbB: number;\n  roundA: number;\n}\n\nexport type ValidFormKey = keyof ValidForm;\n\nexport interface NzColor extends Color {}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { ColorInput, HSVA, Numberify, TinyColor } from '@ctrl/tinycolor';\n\nimport type { ColorGenInput, HSB, HSBA } from './type';\n\nexport const getRoundNumber = (value: number): number => Math.round(Number(value || 0));\n\nconst convertHsb2Hsv = (color: ColorGenInput): ColorInput => {\n  if (color && typeof color === 'object' && 'h' in color && 'b' in color) {\n    const { b, ...resets } = color as HSB;\n    return {\n      ...resets,\n      v: b\n    };\n  }\n  if (typeof color === 'string' && /hsb/.test(color)) {\n    return color.replace(/hsb/, 'hsv');\n  }\n  return color as ColorInput;\n};\n\nexport class Color extends TinyColor {\n  constructor(color: ColorGenInput) {\n    super(convertHsb2Hsv(color));\n  }\n\n  toHsbString(): string {\n    const hsb = this.toHsb();\n    const saturation = getRoundNumber(hsb.s * 100);\n    const lightness = getRoundNumber(hsb.b * 100);\n    const hue = getRoundNumber(hsb.h);\n    const alpha = hsb.a;\n    const hsbString = `hsb(${hue}, ${saturation}%, ${lightness}%)`;\n    const hsbaString = `hsba(${hue}, ${saturation}%, ${lightness}%, ${alpha.toFixed(alpha === 0 ? 0 : 2)})`;\n    return alpha === 1 ? hsbString : hsbaString;\n  }\n\n  toHsb(): Numberify<HSBA> {\n    let hsv = this.toHsv();\n    if (typeof this.originalInput === 'object' && this.originalInput) {\n      if ('h' in this.originalInput) {\n        hsv = this.originalInput as Numberify<HSVA>;\n      }\n    }\n\n    const { v: _, ...resets } = hsv;\n    return {\n      ...resets,\n      b: hsv.v\n    };\n  }\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { Color } from '../interfaces/color';\nimport type { ColorGenInput, HsbaColorType, TransformOffset } from '../interfaces/type';\n\nexport const generateColor = (color: ColorGenInput): Color => {\n  if (color instanceof Color) {\n    return color;\n  }\n  return new Color(color);\n};\n\nexport const defaultColor = generateColor('#1677ff');\n\nexport function calculateColor(\n  offset: TransformOffset,\n  containerRef: HTMLDivElement,\n  targetRef: HTMLDivElement,\n  color?: Color | null,\n  type?: HsbaColorType\n): Color {\n  const { width, height } = containerRef.getBoundingClientRect();\n  const { width: targetWidth, height: targetHeight } = targetRef.getBoundingClientRect();\n  const centerOffsetX = targetWidth / 2;\n  const centerOffsetY = targetHeight / 2;\n  const saturation = (offset.x + centerOffsetX) / width;\n  const bright = 1 - (offset.y + centerOffsetY) / height;\n  const hsb = color?.toHsb() || { a: 0, h: 0, s: 0, b: 0 };\n  const alphaOffset = saturation;\n  const hueOffset = ((offset.x + centerOffsetX) / width) * 360;\n\n  if (type) {\n    switch (type) {\n      case 'hue':\n        return generateColor({\n          ...hsb,\n          h: hueOffset <= 0 ? 0 : hueOffset\n        });\n      case 'alpha':\n        return generateColor({\n          ...hsb,\n          a: alphaOffset <= 0 ? 0 : alphaOffset\n        });\n    }\n  }\n\n  return generateColor({\n    h: hsb.h,\n    s: saturation <= 0 ? 0 : saturation,\n    b: bright >= 1 ? 1 : bright,\n    a: hsb.a\n  });\n}\n\nexport const calculateOffset = (\n  containerRef: HTMLDivElement,\n  targetRef: HTMLDivElement,\n  color?: Color | null,\n  type?: HsbaColorType\n): TransformOffset | null => {\n  const { width, height } = containerRef.getBoundingClientRect();\n  const { width: targetWidth, height: targetHeight } = targetRef.getBoundingClientRect();\n  const centerOffsetX = targetWidth / 2;\n  const centerOffsetY = targetHeight / 2;\n  const hsb = color?.toHsb() || { a: 0, h: 0, s: 0, b: 0 };\n\n  // Exclusion of boundary cases\n  if ((targetWidth === 0 && targetHeight === 0) || targetWidth !== targetHeight) {\n    return null;\n  }\n\n  if (type) {\n    switch (type) {\n      case 'hue':\n        return {\n          x: (hsb.h / 360) * width - centerOffsetX,\n          y: -centerOffsetY / 3\n        };\n      case 'alpha':\n        return {\n          x: hsb.a * width - centerOffsetX,\n          y: -centerOffsetY / 3\n        };\n    }\n  }\n  return {\n    x: hsb.s * width - centerOffsetX,\n    y: (1 - hsb.b) * height - centerOffsetY\n  };\n};\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { Component, EventEmitter, Input, Output } from '@angular/core';\n\nimport { defaultColor } from './util/util';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'ng-antd-color-block',\n  template: `\n    <div class=\"ant-color-picker-color-block\" (click)=\"nzOnClick.emit(true)\">\n      <div class=\"ant-color-picker-color-block-inner\" [style.background-color]=\"color\"></div>\n    </div>\n  `\n})\nexport class NgAntdColorBlockComponent {\n  @Input() color: string = defaultColor.toHsbString();\n  @Output() readonly nzOnClick = new EventEmitter<boolean>();\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { Component, Input } from '@angular/core';\n\ntype HandlerSize = 'default' | 'small';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'color-handler',\n  template: `\n    <div\n      class=\"ant-color-picker-handler\"\n      [style.background-color]=\"color\"\n      [class.ant-color-picker-handler-sm]=\"size === 'small'\"\n    ></div>\n  `\n})\nexport class HandlerComponent {\n  @Input() color: string | null = null;\n  @Input() size: HandlerSize = 'default';\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { Component } from '@angular/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'color-palette',\n  template: `\n    <div class=\"ant-color-picker-palette\">\n      <ng-content></ng-content>\n    </div>\n  `\n})\nexport class PaletteComponent {}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { DOCUMENT } from '@angular/common';\nimport {\n  AfterViewInit,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  EventEmitter,\n  Input,\n  OnChanges,\n  OnInit,\n  Output,\n  SimpleChanges,\n  ViewChild,\n  booleanAttribute,\n  inject\n} from '@angular/core';\n\nimport { HandlerComponent } from './handler.component';\nimport { PaletteComponent } from './palette.component';\nimport { Color } from '../interfaces/color';\nimport { HsbaColorType, TransformOffset } from '../interfaces/type';\nimport { calculateColor, calculateOffset } from '../util/util';\n\ntype EventType = MouseEvent | TouchEvent;\n\ntype EventHandle = (e: EventType) => void;\n\nfunction getPosition(e: EventType): { pageX: number; pageY: number } {\n  const obj = 'touches' in e ? e.touches[0] : e;\n  const scrollXOffset = document.documentElement.scrollLeft || document.body.scrollLeft || window.pageXOffset;\n  const scrollYOffset = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;\n  return { pageX: obj.pageX - scrollXOffset, pageY: obj.pageY - scrollYOffset };\n}\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'color-picker',\n  imports: [HandlerComponent, PaletteComponent],\n  template: `\n    <div\n      #slider\n      class=\"ant-color-picker-select\"\n      (mousedown)=\"dragStartHandle($event)\"\n      (touchstart)=\"dragStartHandle($event)\"\n    >\n      <color-palette>\n        <div\n          #transform\n          class=\"ant-color-picker-transform\"\n          [style.left]=\"offsetValue.x + 'px'\"\n          [style.top]=\"offsetValue.y + 'px'\"\n        >\n          <color-handler [color]=\"toRgbString()\" />\n        </div>\n        <div class=\"ant-color-picker-saturation\" [style.background-color]=\"toHsb()\"></div>\n      </color-palette>\n    </div>\n  `\n})\nexport class PickerComponent implements OnInit, AfterViewInit, OnChanges {\n  @ViewChild('slider', { static: false }) containerRef!: ElementRef<HTMLDivElement>;\n  @ViewChild('transform', { static: false }) transformRef!: ElementRef<HTMLDivElement>;\n\n  @Input() color: Color | null = null;\n  @Output() readonly nzOnChange = new EventEmitter<Color>();\n  @Output() readonly nzOnChangeComplete = new EventEmitter<HsbaColorType>();\n  @Input({ transform: booleanAttribute }) disabled: boolean = false;\n\n  offsetValue: TransformOffset = { x: 0, y: 0 };\n  dragRef: boolean = false;\n  private document: Document = inject(DOCUMENT);\n\n  mouseMoveRef: (e: MouseEvent | TouchEvent) => void = () => null;\n  mouseUpRef: (e: MouseEvent | TouchEvent) => void = () => null;\n\n  toRgbString(): string {\n    return this.color?.toRgbString() as string;\n  }\n\n  toHsb(): string {\n    return `hsl(${this.color?.toHsb().h},100%, 50%)`;\n  }\n\n  constructor(private cdr: ChangeDetectorRef) {}\n\n  ngOnInit(): void {\n    this.document.removeEventListener('mousemove', this.mouseMoveRef);\n    this.document.removeEventListener('mouseup', this.mouseUpRef);\n    this.document.removeEventListener('touchmove', this.mouseMoveRef);\n    this.document.removeEventListener('touchend', this.mouseUpRef);\n    this.mouseMoveRef = () => null;\n    this.mouseUpRef = () => null;\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    const { color } = changes;\n\n    if (color) {\n      if (!this.dragRef && this.containerRef && this.transformRef) {\n        const calcOffset = calculateOffset(\n          this.containerRef.nativeElement,\n          this.transformRef.nativeElement,\n          this.color\n        );\n        if (calcOffset) {\n          this.offsetValue = calcOffset;\n          this.cdr.detectChanges();\n        }\n      }\n    }\n  }\n\n  ngAfterViewInit(): void {\n    if (!this.dragRef && this.containerRef && this.transformRef) {\n      const calcOffset = calculateOffset(this.containerRef.nativeElement, this.transformRef.nativeElement, this.color);\n      if (calcOffset) {\n        this.offsetValue = calcOffset;\n        this.cdr.detectChanges();\n      }\n    }\n  }\n\n  dragStartHandle(e: MouseEvent | TouchEvent): void {\n    this.onDragStart(e);\n  }\n\n  updateOffset: EventHandle = (e: EventType, direction: 'x' | 'y' = 'y') => {\n    const { pageX, pageY } = getPosition(e);\n    const {\n      x: rectX,\n      y: rectY,\n      width,\n      height\n    } = this.containerRef?.nativeElement?.getBoundingClientRect() || { x: 0, y: 0, width: 0, height: 0 };\n    const { width: targetWidth, height: targetHeight } = this.transformRef?.nativeElement?.getBoundingClientRect() || {\n      width: 0,\n      height: 0\n    };\n\n    const centerOffsetX = targetWidth / 2;\n    const centerOffsetY = targetHeight / 2;\n\n    const offsetX = Math.max(0, Math.min(pageX - rectX, width)) - centerOffsetX;\n    const offsetY = Math.max(0, Math.min(pageY - rectY, height)) - centerOffsetY;\n\n    const calcOffset = {\n      x: offsetX,\n      y: direction === 'x' ? this.offsetValue.y : offsetY\n    };\n    // Exclusion of boundary cases\n    if ((targetWidth === 0 && targetHeight === 0) || targetWidth !== targetHeight) {\n      return;\n    }\n    this.offsetValue = calcOffset;\n    this.nzOnChange.emit(\n      calculateColor(calcOffset, this.containerRef.nativeElement, this.transformRef.nativeElement, this.color)\n    );\n    this.cdr.detectChanges();\n  };\n\n  onDragMove: EventHandle = (e: EventType) => {\n    e.preventDefault();\n    this.updateOffset(e);\n  };\n\n  onDragStop: EventHandle = (e: EventType) => {\n    e.preventDefault();\n    this.dragRef = false;\n    this.document.removeEventListener('mousemove', this.onDragMove);\n    this.document.removeEventListener('mouseup', this.mouseUpRef);\n    this.document.removeEventListener('touchmove', this.mouseMoveRef);\n    this.document.removeEventListener('touchend', this.mouseUpRef);\n    this.mouseMoveRef = () => null;\n    this.mouseUpRef = () => null;\n    this.nzOnChangeComplete?.emit();\n  };\n\n  onDragStart: EventHandle = (e: EventType) => {\n    if (this.disabled) {\n      return;\n    }\n    this.updateOffset(e);\n    this.dragRef = true;\n    this.document.addEventListener('mousemove', this.onDragMove);\n    this.document.addEventListener('mouseup', this.onDragStop);\n    this.document.addEventListener('touchmove', this.onDragMove);\n    this.document.addEventListener('touchend', this.onDragStop);\n    this.mouseMoveRef = this.onDragMove;\n    this.mouseUpRef = this.onDragStop;\n    this.cdr.markForCheck();\n  };\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';\n\nimport { Color } from '../interfaces/color';\nimport { HsbaColorType } from '../interfaces/type';\nimport { generateColor } from '../util/util';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'color-gradient',\n  template: `\n    <div\n      class=\"ant-color-picker-gradient\"\n      [style.background]=\"'linear-gradient(' + direction + ', ' + gradientColors + ')'\"\n    >\n      <ng-content></ng-content>\n    </div>\n  `\n})\nexport class GradientComponent implements OnInit, OnChanges {\n  @Input() colors: Color[] | string[] = [];\n  @Input() direction: string = 'to right';\n  @Input() type: HsbaColorType = 'hue';\n\n  gradientColors: string = '';\n\n  ngOnInit(): void {\n    this.useMemo();\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    const { colors, type } = changes;\n    if (colors || type) {\n      this.useMemo();\n    }\n  }\n\n  useMemo(): void {\n    this.gradientColors = this.colors\n      .map((color, idx) => {\n        const result = generateColor(color);\n        if (this.type === 'alpha' && idx === this.colors.length - 1) {\n          result.setAlpha(1);\n        }\n        return result.toRgbString();\n      })\n      .join(',');\n  }\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { DOCUMENT } from '@angular/common';\nimport {\n  AfterViewInit,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  EventEmitter,\n  Input,\n  OnChanges,\n  OnInit,\n  Output,\n  SimpleChanges,\n  ViewChild,\n  booleanAttribute,\n  inject\n} from '@angular/core';\n\nimport { GradientComponent } from './gradient.component';\nimport { HandlerComponent } from './handler.component';\nimport { PaletteComponent } from './palette.component';\nimport { Color } from '../interfaces/color';\nimport { HsbaColorType, TransformOffset } from '../interfaces/type';\nimport { calculateColor, calculateOffset } from '../util/util';\n\ntype EventType = MouseEvent | TouchEvent;\n\ntype EventHandle = (e: EventType) => void;\n\nfunction getPosition(e: EventType): { pageX: number; pageY: number } {\n  const obj = 'touches' in e ? e.touches[0] : e;\n  const scrollXOffset = document.documentElement.scrollLeft || document.body.scrollLeft || window.pageXOffset;\n  const scrollYOffset = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;\n  return { pageX: obj.pageX - scrollXOffset, pageY: obj.pageY - scrollYOffset };\n}\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'color-slider',\n  imports: [PaletteComponent, GradientComponent, HandlerComponent],\n  template: `\n    <div\n      #slider\n      (mousedown)=\"dragStartHandle($event)\"\n      (touchstart)=\"dragStartHandle($event)\"\n      class=\"ant-color-picker-slider\"\n      [class]=\"'ant-color-picker-slider-' + type\"\n    >\n      <color-palette>\n        <div\n          #transform\n          class=\"ant-color-picker-transform\"\n          [style.left]=\"offsetValue.x + 'px'\"\n          [style.top]=\"offsetValue.y + 'px'\"\n        >\n          <color-handler size=\"small\" [color]=\"value\"></color-handler>\n        </div>\n        <color-gradient [colors]=\"gradientColors\" [direction]=\"direction\" [type]=\"type\"></color-gradient>\n      </color-palette>\n    </div>\n  `,\n  styles: [\n    `\n      :host {\n        display: block;\n        width: 100%;\n      }\n    `\n  ]\n})\nexport class SliderComponent implements OnInit, AfterViewInit, OnChanges {\n  @ViewChild('slider', { static: false }) containerRef!: ElementRef<HTMLDivElement>;\n  @ViewChild('transform', { static: false }) transformRef!: ElementRef<HTMLDivElement>;\n\n  @Input() gradientColors: string[] = [];\n  @Input() direction: string = 'to right';\n  @Input() type: HsbaColorType = 'hue';\n  @Input() color: Color | null = null;\n  @Input() value: string | null = null;\n  @Input({ transform: booleanAttribute }) disabled: boolean = false;\n  @Output() readonly nzOnChange = new EventEmitter<Color>();\n  @Output() readonly nzOnChangeComplete = new EventEmitter<HsbaColorType>();\n\n  offsetValue: TransformOffset = { x: 0, y: 0 };\n  dragRef: boolean = false;\n  mouseMoveRef: (e: MouseEvent | TouchEvent) => void = () => null;\n  mouseUpRef: (e: MouseEvent | TouchEvent) => void = () => null;\n  private document: Document = inject(DOCUMENT);\n\n  constructor(private cdr: ChangeDetectorRef) {}\n\n  ngOnInit(): void {\n    this.document.removeEventListener('mousemove', this.mouseMoveRef);\n    this.document.removeEventListener('mouseup', this.mouseUpRef);\n    this.document.removeEventListener('touchmove', this.mouseMoveRef);\n    this.document.removeEventListener('touchend', this.mouseUpRef);\n    this.mouseMoveRef = () => null;\n    this.mouseUpRef = () => null;\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    const { color } = changes;\n\n    if (color) {\n      if (!this.dragRef && this.containerRef && this.transformRef) {\n        const calcOffset = calculateOffset(\n          this.containerRef.nativeElement,\n          this.transformRef.nativeElement,\n          this.color,\n          this.type\n        );\n        if (calcOffset) {\n          this.offsetValue = calcOffset;\n          this.cdr.detectChanges();\n        }\n      }\n    }\n  }\n\n  ngAfterViewInit(): void {\n    if (!this.dragRef && this.containerRef && this.transformRef) {\n      const calcOffset = calculateOffset(\n        this.containerRef.nativeElement,\n        this.transformRef.nativeElement,\n        this.color,\n        this.type\n      );\n      if (calcOffset) {\n        this.offsetValue = calcOffset;\n        this.cdr.detectChanges();\n      }\n    }\n  }\n\n  dragStartHandle(e: MouseEvent | TouchEvent): void {\n    this.onDragStart(e);\n  }\n\n  updateOffset: EventHandle = (e: EventType, direction: 'x' | 'y' = 'x') => {\n    const { pageX, pageY } = getPosition(e);\n    const {\n      x: rectX,\n      y: rectY,\n      width,\n      height\n    } = this.containerRef?.nativeElement?.getBoundingClientRect() || { x: 0, y: 0, width: 0, height: 0 };\n    const { width: targetWidth, height: targetHeight } = this.transformRef?.nativeElement?.getBoundingClientRect() || {\n      width: 0,\n      height: 0\n    };\n\n    const centerOffsetX = targetWidth / 2;\n    const centerOffsetY = targetHeight / 2;\n\n    const offsetX = Math.max(0, Math.min(pageX - rectX, width)) - centerOffsetX;\n    const offsetY = Math.max(0, Math.min(pageY - rectY, height)) - centerOffsetY;\n\n    const calcOffset = {\n      x: offsetX,\n      y: direction === 'x' ? this.offsetValue.y : offsetY\n    };\n\n    // Exclusion of boundary cases\n    if ((targetWidth === 0 && targetHeight === 0) || targetWidth !== targetHeight) {\n      return;\n    }\n\n    this.offsetValue = calcOffset;\n    this.nzOnChange.emit(\n      calculateColor(\n        calcOffset,\n        this.containerRef.nativeElement,\n        this.transformRef.nativeElement,\n        this.color,\n        this.type\n      )\n    );\n    this.cdr.detectChanges();\n  };\n\n  onDragMove: EventHandle = (e: EventType) => {\n    e.preventDefault();\n    this.updateOffset(e);\n  };\n\n  onDragStop: EventHandle = (e: EventType) => {\n    e.preventDefault();\n    this.dragRef = false;\n    this.document.removeEventListener('mousemove', this.onDragMove);\n    this.document.removeEventListener('mouseup', this.mouseUpRef);\n    this.document.removeEventListener('touchmove', this.mouseMoveRef);\n    this.document.removeEventListener('touchend', this.mouseUpRef);\n    this.mouseMoveRef = () => null;\n    this.mouseUpRef = () => null;\n    this.nzOnChangeComplete?.emit(this.type);\n  };\n\n  onDragStart: EventHandle = (e: EventType) => {\n    if (this.disabled) {\n      return;\n    }\n    this.updateOffset(e);\n    this.dragRef = true;\n    this.document.addEventListener('mousemove', this.onDragMove);\n    this.document.addEventListener('mouseup', this.onDragStop);\n    this.document.addEventListener('touchmove', this.onDragMove);\n    this.document.addEventListener('touchend', this.onDragStop);\n    this.mouseMoveRef = this.onDragMove;\n    this.mouseUpRef = this.onDragStop;\n    this.cdr.markForCheck();\n  };\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectorRef,\n  Component,\n  EventEmitter,\n  Input,\n  OnChanges,\n  OnInit,\n  Output,\n  SimpleChanges,\n  TemplateRef,\n  booleanAttribute\n} from '@angular/core';\n\nimport { PickerComponent } from './components/picker.component';\nimport { SliderComponent } from './components/slider.component';\nimport { Color } from './interfaces/color';\nimport { ColorGenInput, ColorValue, HsbaColorType } from './interfaces/type';\nimport { NgAntdColorBlockComponent } from './ng-antd-color-block.component';\nimport { defaultColor, generateColor } from './util/util';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'ng-antd-color-picker',\n  imports: [PickerComponent, SliderComponent, NgAntdColorBlockComponent, NgTemplateOutlet],\n  template: `\n    <div class=\"ant-color-picker-panel\" [class.ant-color-picker-panel-disabled]=\"disabled\">\n      @if (panelRenderHeader) {\n        <ng-template [ngTemplateOutlet]=\"panelRenderHeader\"></ng-template>\n      }\n      <color-picker\n        [color]=\"colorValue\"\n        (nzOnChange)=\"handleChange($event)\"\n        [disabled]=\"disabled\"\n        (nzOnChangeComplete)=\"nzOnChangeComplete.emit($event)\"\n      ></color-picker>\n      <div class=\"ant-color-picker-slider-container\">\n        <div class=\"ant-color-picker-slider-group\" [class.ant-color-picker-slider-group-disabled-alpha]=\"disabledAlpha\">\n          <color-slider\n            [color]=\"colorValue\"\n            [value]=\"'hsl(' + colorValue?.toHsb()?.h + ',100%, 50%)'\"\n            [gradientColors]=\"hueColor\"\n            (nzOnChange)=\"handleChange($event, 'hue')\"\n            [disabled]=\"disabled\"\n            (nzOnChangeComplete)=\"nzOnChangeComplete.emit($event)\"\n          ></color-slider>\n          @if (!disabledAlpha) {\n            <color-slider\n              type=\"alpha\"\n              [color]=\"colorValue\"\n              [value]=\"toRgbString\"\n              [gradientColors]=\"gradientColors\"\n              (nzOnChange)=\"handleChange($event, 'alpha')\"\n              [disabled]=\"disabled\"\n              (nzOnChangeComplete)=\"nzOnChangeComplete.emit($event)\"\n            ></color-slider>\n          }\n        </div>\n        <ng-antd-color-block [color]=\"toRgbString\"></ng-antd-color-block>\n      </div>\n      @if (panelRenderFooter) {\n        <ng-template [ngTemplateOutlet]=\"panelRenderFooter\"></ng-template>\n      }\n    </div>\n  `\n})\nexport class NgAntdColorPickerComponent implements OnInit, OnChanges {\n  @Input() value: ColorValue;\n  @Input() defaultValue: ColorValue;\n  @Output() readonly nzOnChange = new EventEmitter<{ color: Color; type?: HsbaColorType }>();\n  @Output() readonly nzOnChangeComplete = new EventEmitter<HsbaColorType>();\n  @Input() panelRenderHeader: TemplateRef<void> | null = null;\n  @Input() panelRenderFooter: TemplateRef<void> | null = null;\n  @Input({ transform: booleanAttribute }) disabledAlpha: boolean = false;\n  @Input({ transform: booleanAttribute }) disabled: boolean = false;\n\n  colorValue: Color | null = null;\n  alphaColor: string = '';\n\n  hueColor: string[] = [\n    'rgb(255, 0, 0) 0%',\n    'rgb(255, 255, 0) 17%',\n    'rgb(0, 255, 0) 33%',\n    'rgb(0, 255, 255) 50%',\n    'rgb(0, 0, 255) 67%',\n    'rgb(255, 0, 255) 83%',\n    'rgb(255, 0, 0) 100%'\n  ];\n\n  gradientColors: string[] = ['rgba(255, 0, 4, 0) 0%', this.alphaColor];\n\n  toRgbString: string = this.colorValue?.toRgbString() || '';\n\n  constructor(private cdr: ChangeDetectorRef) {}\n\n  ngOnInit(): void {\n    this.setColorValue(this.value);\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    const { value, defaultValue } = changes;\n    if (value || defaultValue) {\n      this.setColorValue(this.value);\n    }\n  }\n\n  hasValue(value: ColorValue): boolean {\n    return !!value;\n  }\n\n  setColorValue(color: ColorValue): void {\n    let mergeState;\n    if (this.hasValue(color)) {\n      mergeState = color;\n    } else if (this.hasValue(this.defaultValue)) {\n      mergeState = this.defaultValue;\n    } else {\n      mergeState = defaultColor;\n    }\n    this.colorValue = generateColor(mergeState as ColorGenInput);\n    this.setAlphaColor(this.colorValue);\n    this.toRgbString = this.colorValue?.toRgbString() || '';\n    this.cdr.detectChanges();\n  }\n\n  setAlphaColor(colorValue: Color): void {\n    const rgb = generateColor(colorValue.toRgbString());\n    this.alphaColor = rgb.toRgbString();\n    this.gradientColors = ['rgba(255, 0, 4, 0) 0%', this.alphaColor];\n    this.cdr.markForCheck();\n  }\n\n  handleChange(color: Color, type?: HsbaColorType): void {\n    this.setColorValue(color);\n    this.nzOnChange.emit({ color, type });\n  }\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { NgModule } from '@angular/core';\n\nimport { NgAntdColorBlockComponent } from './ng-antd-color-block.component';\nimport { NgAntdColorPickerComponent } from './ng-antd-color-picker.component';\n\n@NgModule({\n  imports: [NgAntdColorPickerComponent, NgAntdColorBlockComponent],\n  exports: [NgAntdColorPickerComponent, NgAntdColorBlockComponent]\n})\nexport class NgAntdColorPickerModule {}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\n\nimport { NzSizeLDSType } from 'ng-zorro-antd/core/types';\n\nimport { NgAntdColorPickerModule } from './src/ng-antd-color-picker.module';\nimport { defaultColor } from './src/util/util';\n\n@Component({\n  selector: 'nz-color-block',\n  exportAs: 'NzColorBlock',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [NgAntdColorPickerModule],\n  template: ` <ng-antd-color-block [color]=\"nzColor\" (nzOnClick)=\"nzOnClick.emit($event)\"></ng-antd-color-block> `,\n  host: {\n    class: 'ant-color-picker-inline',\n    '[class.ant-color-picker-inline-sm]': `nzSize === 'small'`,\n    '[class.ant-color-picker-inline-lg]': `nzSize === 'large'`\n  }\n})\nexport class NzColorBlockComponent {\n  @Input() nzColor: string = defaultColor.toHexString();\n  @Input() nzSize: NzSizeLDSType = 'default';\n  @Output() readonly nzOnClick = new EventEmitter<boolean>();\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  Output,\n  SimpleChanges,\n  booleanAttribute\n} from '@angular/core';\nimport {\n  AbstractControl,\n  FormBuilder,\n  FormControl,\n  FormGroup,\n  ReactiveFormsModule,\n  ValidationErrors,\n  ValidatorFn\n} from '@angular/forms';\nimport { Subject } from 'rxjs';\nimport { debounceTime, distinctUntilChanged, filter, takeUntil } from 'rxjs/operators';\n\nimport { NzInputDirective, NzInputGroupComponent } from 'ng-zorro-antd/input';\nimport { NzInputNumberComponent } from 'ng-zorro-antd/input-number';\nimport { NzSelectModule } from 'ng-zorro-antd/select';\n\nimport { generateColor } from './src/util/util';\nimport { NzColorPickerFormatType, ValidFormKey } from './typings';\n\n@Component({\n  selector: 'nz-color-format',\n  exportAs: 'NzColorFormat',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [ReactiveFormsModule, NzSelectModule, NzInputDirective, NzInputGroupComponent, NzInputNumberComponent],\n  template: `\n    <div [formGroup]=\"validateForm\" class=\"ant-color-picker-input-container\">\n      <div class=\"ant-color-picker-format-select\">\n        <nz-select formControlName=\"isFormat\" nzBorderless nzSize=\"small\">\n          <nz-option nzValue=\"hex\" nzLabel=\"HEX\" />\n          <nz-option nzValue=\"hsb\" nzLabel=\"HSB\" />\n          <nz-option nzValue=\"rgb\" nzLabel=\"RGB\" />\n        </nz-select>\n      </div>\n\n      <div class=\"ant-color-picker-input\">\n        @switch (validateForm.controls.isFormat.value) {\n          @case ('hex') {\n            <div class=\"ant-color-picker-hex-input\">\n              <nz-input-group nzPrefix=\"#\" nzSize=\"small\">\n                <input nz-input nzSize=\"small\" formControlName=\"hex\" />\n              </nz-input-group>\n            </div>\n          }\n          @case ('hsb') {\n            <div class=\"ant-color-picker-hsb-input\">\n              <div class=\"ant-color-picker-steppers ant-color-picker-hsb-input\">\n                <nz-input-number\n                  formControlName=\"hsbH\"\n                  [nzMin]=\"0\"\n                  [nzMax]=\"360\"\n                  [nzStep]=\"1\"\n                  [nzPrecision]=\"0\"\n                  nzSize=\"small\"\n                />\n              </div>\n              <div class=\"ant-color-picker-steppers ant-color-picker-hsb-input\">\n                <nz-input-number\n                  formControlName=\"hsbS\"\n                  [nzMin]=\"0\"\n                  [nzMax]=\"100\"\n                  [nzStep]=\"1\"\n                  [nzFormatter]=\"formatterPercent\"\n                  [nzParser]=\"parserPercent\"\n                  nzSize=\"small\"\n                />\n              </div>\n              <div class=\"ant-color-picker-steppers ant-color-picker-hsb-input\">\n                <nz-input-number\n                  formControlName=\"hsbB\"\n                  [nzMin]=\"0\"\n                  [nzMax]=\"100\"\n                  [nzStep]=\"1\"\n                  [nzFormatter]=\"formatterPercent\"\n                  [nzParser]=\"parserPercent\"\n                  nzSize=\"small\"\n                />\n              </div>\n            </div>\n          }\n          @default {\n            <div class=\"ant-color-picker-rgb-input\">\n              <div class=\"ant-color-picker-steppers ant-color-picker-rgb-input\">\n                <nz-input-number formControlName=\"rgbR\" [nzMin]=\"0\" [nzMax]=\"255\" [nzStep]=\"1\" nzSize=\"small\" />\n              </div>\n              <div class=\"ant-color-picker-steppers ant-color-picker-rgb-input\">\n                <nz-input-number formControlName=\"rgbG\" [nzMin]=\"0\" [nzMax]=\"255\" [nzStep]=\"1\" nzSize=\"small\" />\n              </div>\n              <div class=\"ant-color-picker-steppers ant-color-picker-rgb-input\">\n                <nz-input-number formControlName=\"rgbB\" [nzMin]=\"0\" [nzMax]=\"255\" [nzStep]=\"1\" nzSize=\"small\" />\n              </div>\n            </div>\n          }\n        }\n      </div>\n\n      @if (!nzDisabledAlpha) {\n        <div class=\"ant-color-picker-steppers ant-color-picker-alpha-input\">\n          <nz-input-number\n            formControlName=\"roundA\"\n            [nzMin]=\"0\"\n            [nzMax]=\"100\"\n            [nzStep]=\"1\"\n            [nzFormatter]=\"formatterPercent\"\n            [nzParser]=\"parserPercent\"\n            nzSize=\"small\"\n          />\n        </div>\n      }\n    </div>\n  `\n})\nexport class NzColorFormatComponent implements OnChanges, OnInit, OnDestroy {\n  @Input() format: NzColorPickerFormatType | null = null;\n  @Input() colorValue: string = '';\n  @Input({ transform: booleanAttribute }) clearColor: boolean = false;\n  @Input({ transform: booleanAttribute }) nzDisabledAlpha: boolean = false;\n  @Output() readonly formatChange = new EventEmitter<{ color: string; format: NzColorPickerFormatType }>();\n  @Output() readonly nzOnFormatChange = new EventEmitter<NzColorPickerFormatType>();\n\n  private destroy$ = new Subject<void>();\n\n  validatorFn(): ValidatorFn {\n    return (control: AbstractControl): ValidationErrors | null => {\n      const REGEXP = /^[0-9a-fA-F]{6}$/;\n      if (!control.value) {\n        return { error: true };\n      } else if (!REGEXP.test(control.value)) {\n        return { error: true };\n      }\n      return null;\n    };\n  }\n\n  validateForm: FormGroup<{\n    isFormat: FormControl<NzColorPickerFormatType | null>;\n    hex: FormControl<string | null>;\n    hsbH: FormControl<number>;\n    hsbS: FormControl<number>;\n    hsbB: FormControl<number>;\n    rgbR: FormControl<number>;\n    rgbG: FormControl<number>;\n    rgbB: FormControl<number>;\n    roundA: FormControl<number>;\n  }>;\n\n  formatterPercent = (value: number): string => `${value} %`;\n  parserPercent = (value: string): number => +value.replace(' %', '');\n\n  constructor(private formBuilder: FormBuilder) {\n    this.validateForm = this.formBuilder.nonNullable.group({\n      isFormat: this.formBuilder.control<NzColorPickerFormatType>('hex'),\n      hex: this.formBuilder.control<string>('1677FF', this.validatorFn()),\n      hsbH: 215,\n      hsbS: 91,\n      hsbB: 100,\n      rgbR: 22,\n      rgbG: 119,\n      rgbB: 255,\n      roundA: 100\n    });\n  }\n\n  ngOnInit(): void {\n    this.validateForm.valueChanges\n      .pipe(\n        filter(() => this.validateForm.valid),\n        debounceTime(200),\n        distinctUntilChanged((prev, current) =>\n          Object.keys(prev).every(key => prev[key as ValidFormKey] === current[key as ValidFormKey])\n        ),\n        takeUntil(this.destroy$)\n      )\n      .subscribe(value => {\n        let color = '';\n        switch (value.isFormat) {\n          case 'hsb':\n            color = generateColor({\n              h: Number(value.hsbH),\n              s: Number(value.hsbS) / 100,\n              b: Number(value.hsbB) / 100,\n              a: Number(value.roundA) / 100\n            }).toHsbString();\n            break;\n          case 'rgb':\n            color = generateColor({\n              r: Number(value.rgbR),\n              g: Number(value.rgbG),\n              b: Number(value.rgbB),\n              a: Number(value.roundA) / 100\n            }).toRgbString();\n            break;\n          default: {\n            const hex = generateColor(value.hex as NzColorPickerFormatType);\n            const hexColor = generateColor({\n              r: hex.r,\n              g: hex.g,\n              b: hex.b,\n              a: Number(value.roundA) / 100\n            });\n            color = hexColor.getAlpha() < 1 ? hexColor.toHex8String() : hexColor.toHexString();\n            break;\n          }\n        }\n        this.formatChange.emit({ color, format: value.isFormat || this.format || 'hex' });\n      });\n\n    this.validateForm\n      .get('isFormat')\n      ?.valueChanges.pipe(takeUntil(this.destroy$))\n      .subscribe(value => {\n        this.nzOnFormatChange.emit(value as NzColorPickerFormatType);\n      });\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    const { colorValue, format, clearColor } = changes;\n    if (colorValue) {\n      const colorValue = {\n        hex: generateColor(this.colorValue).toHex(),\n        hsbH: Math.round(generateColor(this.colorValue).toHsb().h),\n        hsbS: Math.round(generateColor(this.colorValue).toHsb().s * 100),\n        hsbB: Math.round(generateColor(this.colorValue).toHsb().b * 100),\n        rgbR: Math.round(generateColor(this.colorValue).r),\n        rgbG: Math.round(generateColor(this.colorValue).g),\n        rgbB: Math.round(generateColor(this.colorValue).b),\n        roundA: Math.round(generateColor(this.colorValue).roundA * 100)\n      };\n      this.validateForm.patchValue(colorValue);\n    }\n\n    if (format && this.format) {\n      this.validateForm.get('isFormat')?.patchValue(this.format);\n    }\n\n    if (clearColor && this.clearColor) {\n      this.validateForm.get('roundA')?.patchValue(0);\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.destroy$.next();\n    this.destroy$.complete();\n  }\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  EventEmitter,\n  forwardRef,\n  inject,\n  Input,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  Output,\n  SimpleChanges,\n  TemplateRef\n} from '@angular/core';\nimport { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet';\nimport { NzSafeAny, NzSizeLDSType } from 'ng-zorro-antd/core/types';\nimport { NzPopoverDirective } from 'ng-zorro-antd/popover';\n\nimport { NzColorBlockComponent } from './color-block.component';\nimport { NzColorFormatComponent } from './color-format.component';\nimport { NgAntdColorPickerModule } from './src/ng-antd-color-picker.module';\nimport { defaultColor, generateColor } from './src/util/util';\nimport { NzColor, NzColorPickerFormatType, NzColorPickerTriggerType } from './typings';\n\n@Component({\n  selector: 'nz-color-picker',\n  exportAs: 'NzColorPicker',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    NgAntdColorPickerModule,\n    NzPopoverDirective,\n    NzColorBlockComponent,\n    NzColorFormatComponent,\n    NgTemplateOutlet,\n    NzStringTemplateOutletDirective\n  ],\n  template: `\n    <div\n      [class.ant-color-picker-trigger]=\"!nzFlipFlop\"\n      [class.ant-color-picker-sm]=\"nzSize === 'small'\"\n      [class.ant-color-picker-lg]=\"nzSize === 'large'\"\n      nz-popover\n      [nzPopoverContent]=\"colorPicker\"\n      [nzPopoverTrigger]=\"!nzDisabled ? nzTrigger : null\"\n      [nzPopoverVisible]=\"nzOpen\"\n      (nzPopoverVisibleChange)=\"nzOnOpenChange.emit($event)\"\n    >\n      @if (!nzFlipFlop) {\n        <nz-color-block [nzColor]=\"blockColor\" [nzSize]=\"nzSize\" />\n      } @else {\n        <ng-template [ngTemplateOutlet]=\"nzFlipFlop\" />\n      }\n      @if (nzShowText && !!showText && !nzFlipFlop) {\n        <div class=\"ant-color-picker-trigger-text\">\n          {{ showText }}\n        </div>\n      }\n    </div>\n    <ng-template #colorPicker>\n      <ng-antd-color-picker\n        [value]=\"nzValue\"\n        [defaultValue]=\"nzDefaultValue\"\n        [disabled]=\"nzDisabled\"\n        [panelRenderHeader]=\"nzPanelRenderHeader\"\n        [panelRenderFooter]=\"nzPanelRenderFooter\"\n        [disabledAlpha]=\"nzDisabledAlpha\"\n        (nzOnChange)=\"colorChange($event)\"\n      />\n    </ng-template>\n    <ng-template #nzPanelRenderHeader>\n      @if (nzTitle || nzAllowClear) {\n        <div class=\"ant-color-picker-title\">\n          <div class=\"ant-color-picker-title-content\">\n            <ng-template [nzStringTemplateOutlet]=\"nzTitle\">{{ nzTitle }}</ng-template>\n          </div>\n          @if (nzAllowClear) {\n            <div class=\"ant-color-picker-clear\" (click)=\"clearColorHandle()\"></div>\n          }\n        </div>\n      }\n    </ng-template>\n    <ng-template #nzPanelRenderFooter>\n      <nz-color-format\n        [colorValue]=\"blockColor\"\n        [clearColor]=\"clearColor\"\n        [format]=\"nzFormat\"\n        [nzDisabledAlpha]=\"nzDisabledAlpha\"\n        (formatChange)=\"formatChange($event)\"\n        (nzOnFormatChange)=\"nzOnFormatChange.emit($event)\"\n      />\n    </ng-template>\n  `,\n  host: {\n    class: 'ant-color-picker-inline',\n    '[class.ant-color-picker-disabled]': `nzDisabled`\n  },\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => NzColorPickerComponent),\n      multi: true\n    }\n  ]\n})\nexport class NzColorPickerComponent implements OnInit, OnChanges, ControlValueAccessor, OnDestroy {\n  @Input() nzFormat: NzColorPickerFormatType | null = null;\n  @Input() nzValue: string | NzColor = '';\n  @Input() nzSize: NzSizeLDSType = 'default';\n  @Input() nzDefaultValue: string | NzColor = '';\n  @Input() nzTrigger: NzColorPickerTriggerType = 'click';\n  @Input() nzTitle: TemplateRef<void> | string = '';\n  @Input() nzFlipFlop: TemplateRef<void> | null = null;\n  @Input({ transform: booleanAttribute }) nzShowText: boolean = false;\n  @Input({ transform: booleanAttribute }) nzOpen: boolean = false;\n  @Input({ transform: booleanAttribute }) nzAllowClear: boolean = false;\n  @Input({ transform: booleanAttribute }) nzDisabled: boolean = false;\n  @Input({ transform: booleanAttribute }) nzDisabledAlpha: boolean = false;\n  @Output() readonly nzOnChange = new EventEmitter<{ color: NzColor; format: string }>();\n  @Output() readonly nzOnFormatChange = new EventEmitter<NzColorPickerFormatType>();\n  @Output() readonly nzOnClear = new EventEmitter<boolean>();\n  @Output() readonly nzOnOpenChange = new EventEmitter<boolean>();\n\n  private formBuilder = inject(FormBuilder);\n  private destroy$ = new Subject<void>();\n  private isNzDisableFirstChange: boolean = true;\n  blockColor: string = '';\n  clearColor: boolean = false;\n  showText: string = defaultColor.toHexString();\n\n  constructor(private cdr: ChangeDetectorRef) {}\n\n  formControl = this.formBuilder.control('');\n\n  onChange: (value: string) => void = () => {};\n\n  writeValue(value: string): void {\n    this.nzValue = value;\n    this.getBlockColor();\n    this.formControl.patchValue(value);\n  }\n\n  registerOnChange(fn: NzSafeAny): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(): void {}\n\n  setDisabledState(isDisabled: boolean): void {\n    this.nzDisabled = (this.isNzDisableFirstChange && this.nzDisabled) || isDisabled;\n    this.isNzDisableFirstChange = false;\n    this.cdr.markForCheck();\n  }\n\n  ngOnInit(): void {\n    this.getBlockColor();\n    this.formControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(value => {\n      if (value) {\n        let color = value;\n        if (this.nzFormat === 'hex') {\n          color =\n            generateColor(value).getAlpha() < 1\n              ? generateColor(value).toHex8String()\n              : generateColor(value).toHexString();\n        } else if (this.nzFormat === 'hsb') {\n          color = generateColor(value).toHsbString();\n        } else if (this.nzFormat === 'rgb') {\n          color = generateColor(value).toRgbString();\n        }\n        this.showText = color;\n        this.onChange(color);\n        this.cdr.markForCheck();\n      }\n    });\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    const { nzValue, nzDefaultValue } = changes;\n    if (nzValue || nzDefaultValue) {\n      this.getBlockColor();\n    }\n  }\n\n  clearColorHandle(): void {\n    this.clearColor = true;\n    this.nzOnClear.emit(true);\n    this.cdr.markForCheck();\n  }\n\n  getBlockColor(): void {\n    if (this.nzValue) {\n      this.blockColor = generateColor(this.nzValue).toRgbString();\n    } else if (this.nzDefaultValue) {\n      this.blockColor = generateColor(this.nzDefaultValue).toRgbString();\n    } else {\n      this.blockColor = defaultColor.toHexString();\n    }\n  }\n\n  colorChange(value: { color: NzColor }): void {\n    this.blockColor = value.color.getAlpha() < 1 ? value.color.toHex8String() : value.color.toHexString();\n    this.clearColor = false;\n    this.cdr.markForCheck();\n  }\n\n  formatChange(value: { color: string; format: NzColorPickerFormatType }): void {\n    this.nzValue = value.color;\n    this.clearColor = false;\n    this.getBlockColor();\n    this.nzOnChange.emit({ color: generateColor(value.color), format: value.format });\n    this.formControl.patchValue(value.color);\n    this.cdr.markForCheck();\n  }\n\n  ngOnDestroy(): void {\n    this.destroy$.next();\n    this.destroy$.complete();\n  }\n}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nimport { NgModule } from '@angular/core';\n\nimport { NzColorBlockComponent } from './color-block.component';\nimport { NzColorFormatComponent } from './color-format.component';\nimport { NzColorPickerComponent } from './color-picker.component';\n\n@NgModule({\n  imports: [NzColorPickerComponent, NzColorBlockComponent, NzColorFormatComponent],\n  exports: [NzColorPickerComponent, NzColorBlockComponent]\n})\nexport class NzColorPickerModule {}\n","/**\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE\n */\n\nexport * from './typings';\nexport * from './color-picker.component';\nexport * from './color-block.component';\nexport * from './color-picker.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["getPosition","i1.NgAntdColorBlockComponent","i1.NgAntdColorPickerComponent"],"mappings":";;;;;;;;;;;;;;;AAAA;;;AAGG;;ACHH;;;AAGG;AAMI,MAAM,cAAc,GAAG,CAAC,KAAa,KAAa,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;AAEvF,MAAM,cAAc,GAAG,CAAC,KAAoB,KAAgB;AAC1D,IAAA,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,GAAG,IAAI,KAAK,IAAI,GAAG,IAAI,KAAK,EAAE;QACtE,MAAM,EAAE,CAAC,EAAE,GAAG,MAAM,EAAE,GAAG,KAAY;QACrC,OAAO;AACL,YAAA,GAAG,MAAM;AACT,YAAA,CAAC,EAAE;SACJ;;AAEH,IAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;QAClD,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC;;AAEpC,IAAA,OAAO,KAAmB;AAC5B,CAAC;AAEK,MAAO,KAAM,SAAQ,SAAS,CAAA;AAClC,IAAA,WAAA,CAAY,KAAoB,EAAA;AAC9B,QAAA,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;;IAG9B,WAAW,GAAA;AACT,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE;QACxB,MAAM,UAAU,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;QAC9C,MAAM,SAAS,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;QAC7C,MAAM,GAAG,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACjC,QAAA,MAAM,KAAK,GAAG,GAAG,CAAC,CAAC;QACnB,MAAM,SAAS,GAAG,CAAO,IAAA,EAAA,GAAG,KAAK,UAAU,CAAA,GAAA,EAAM,SAAS,CAAA,EAAA,CAAI;QAC9D,MAAM,UAAU,GAAG,CAAA,KAAA,EAAQ,GAAG,CAAA,EAAA,EAAK,UAAU,CAAA,GAAA,EAAM,SAAS,CAAA,GAAA,EAAM,KAAK,CAAC,OAAO,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA,CAAA,CAAG;QACvG,OAAO,KAAK,KAAK,CAAC,GAAG,SAAS,GAAG,UAAU;;IAG7C,KAAK,GAAA;AACH,QAAA,IAAI,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE;QACtB,IAAI,OAAO,IAAI,CAAC,aAAa,KAAK,QAAQ,IAAI,IAAI,CAAC,