ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
1,610 lines • 75.4 kB
JavaScript
import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, Output, Input, Component, Directive, inject, DOCUMENT, ChangeDetectorRef, ElementRef, booleanAttribute, ViewChild, NgModule, DestroyRef, signal, computed, forwardRef } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import * as i1$2 from '@angular/forms';
import { FormBuilder, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { NZ_FORM_SIZE } from 'ng-zorro-antd/core/form';
import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet';
import { NzPopoverDirective } from 'ng-zorro-antd/popover';
import { TinyColor } from '@ctrl/tinycolor';
import * as i1$1 from 'ng-zorro-antd/divider';
import { NzDividerModule } from 'ng-zorro-antd/divider';
import * as i1 from 'ng-zorro-antd/collapse';
import { NzCollapseModule } from 'ng-zorro-antd/collapse';
import { filter, debounceTime, distinctUntilChanged } from 'rxjs/operators';
import * as i3 from 'ng-zorro-antd/input';
import { NzInputModule } from 'ng-zorro-antd/input';
import * as i4 from 'ng-zorro-antd/input-number';
import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
import * as i2 from 'ng-zorro-antd/select';
import { NzSelectModule } from 'ng-zorro-antd/select';
/**
* 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
*/
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
};
}
}
/**
* 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
*/
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
};
};
/**
* 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 NgAntdColorBlockComponent {
color = defaultColor.toHsbString();
value = null;
nzOnClick = new EventEmitter();
get isChecked() {
if (!this.value) {
return false;
}
const current = generateColor(this.value).toHexString();
const colorPreset = generateColor(this.color).toHexString();
return current === colorPreset;
}
get isBright() {
const { r, g, b, a } = generateColor(this.color).toRgb();
if (a !== undefined && a <= 0.5)
return true;
const brightness = r * 0.299 + g * 0.587 + b * 0.114;
return brightness > 192;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgAntdColorBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: NgAntdColorBlockComponent, isStandalone: true, selector: "ng-antd-color-block", inputs: { color: "color", value: "value" }, outputs: { nzOnClick: "nzOnClick" }, host: { listeners: { "click": "nzOnClick.emit()" }, properties: { "class.ant-color-picker-presets-color-checked": "isChecked", "class.ant-color-picker-presets-color-bright": "isBright" }, classAttribute: "ant-color-picker-color-block ant-color-picker-presets-color" }, ngImport: i0, template: `<div class="ant-color-picker-color-block-inner" [style.background-color]="color"></div>`, isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgAntdColorBlockComponent, decorators: [{
type: Component,
args: [{
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'ng-antd-color-block',
template: `<div class="ant-color-picker-color-block-inner" [style.background-color]="color"></div>`,
host: {
class: 'ant-color-picker-color-block ant-color-picker-presets-color',
'[class.ant-color-picker-presets-color-checked]': 'isChecked',
'[class.ant-color-picker-presets-color-bright]': 'isBright',
'(click)': 'nzOnClick.emit()'
}
}]
}], propDecorators: { color: [{
type: Input
}], value: [{
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 HandlerDirective {
color = null;
size = 'default';
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: HandlerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: HandlerDirective, isStandalone: true, selector: "color-handler", inputs: { color: "color", size: "size" }, host: { properties: { "style.background-color": "color", "class.ant-color-picker-handler-sm": "size === 'small'" }, classAttribute: "ant-color-picker-handler" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: HandlerDirective, decorators: [{
type: Directive,
args: [{
selector: 'color-handler',
host: {
class: 'ant-color-picker-handler',
'[style.background-color]': 'color',
'[class.ant-color-picker-handler-sm]': `size === 'small'`
}
}]
}], propDecorators: { color: [{
type: Input
}], size: [{
type: 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
*/
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 {
document = inject(DOCUMENT);
cdr = inject(ChangeDetectorRef);
containerRef = inject(ElementRef);
transformRef;
color = null;
nzOnChange = new EventEmitter();
nzOnChangeComplete = new EventEmitter();
disabled = false;
offsetValue = { x: 0, y: 0 };
dragRef = false;
mouseMoveRef = () => null;
mouseUpRef = () => null;
toRgbString() {
return this.color?.toRgbString();
}
toHsb() {
return `hsl(${this.color?.toHsb().h},100%, 50%)`;
}
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);
}
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();
};
onDragMove = (e) => {
e.preventDefault();
this.updateOffset(e);
};
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();
};
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();
};
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.0.6", type: PickerComponent, isStandalone: true, selector: "color-picker", inputs: { color: "color", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { nzOnChange: "nzOnChange", nzOnChangeComplete: "nzOnChangeComplete" }, host: { listeners: { "mousedown": "dragStartHandle($event)", "touchstart": "dragStartHandle($event)" }, classAttribute: "ant-color-picker-select" }, viewQueries: [{ propertyName: "transformRef", first: true, predicate: ["transform"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
<div class="ant-color-picker-palette">
<div #transform class="ant-color-picker-transform" [style.left.px]="offsetValue.x" [style.top.px]="offsetValue.y">
<color-handler [color]="toRgbString()" />
</div>
<div class="ant-color-picker-saturation" [style.background-color]="toHsb()"></div>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: HandlerDirective, selector: "color-handler", inputs: ["color", "size"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PickerComponent, decorators: [{
type: Component,
args: [{
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'color-picker',
imports: [HandlerDirective],
template: `
<div class="ant-color-picker-palette">
<div #transform class="ant-color-picker-transform" [style.left.px]="offsetValue.x" [style.top.px]="offsetValue.y">
<color-handler [color]="toRgbString()" />
</div>
<div class="ant-color-picker-saturation" [style.background-color]="toHsb()"></div>
</div>
`,
host: {
class: 'ant-color-picker-select',
'(mousedown)': 'dragStartHandle($event)',
'(touchstart)': 'dragStartHandle($event)'
}
}]
}], propDecorators: { transformRef: [{
type: ViewChild,
args: ['transform', { static: true }]
}], color: [{
type: Input
}], nzOnChange: [{
type: Output
}], nzOnChangeComplete: [{
type: Output
}], disabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}] } });
/**
* 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 GradientDirective {
colors = [];
direction = 'to right';
type = 'hue';
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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GradientDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: GradientDirective, isStandalone: true, selector: "color-gradient", inputs: { colors: "colors", direction: "direction", type: "type" }, host: { properties: { "style.background": "'linear-gradient(' + direction + ', ' + gradientColors + ')'" }, classAttribute: "ant-color-picker-gradient" }, usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GradientDirective, decorators: [{
type: Directive,
args: [{
selector: 'color-gradient',
host: {
class: 'ant-color-picker-gradient',
'[style.background]': `'linear-gradient(' + direction + ', ' + gradientColors + ')'`
}
}]
}], propDecorators: { colors: [{
type: Input
}], direction: [{
type: Input
}], type: [{
type: 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
*/
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 {
document = inject(DOCUMENT);
cdr = inject(ChangeDetectorRef);
containerRef = inject(ElementRef);
transformRef;
gradientColors = [];
direction = 'to right';
type = 'hue';
color = null;
value = null;
disabled = false;
nzOnChange = new EventEmitter();
nzOnChangeComplete = new EventEmitter();
offsetValue = { x: 0, y: 0 };
dragRef = false;
mouseMoveRef = () => null;
mouseUpRef = () => null;
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);
}
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();
};
onDragMove = (e) => {
e.preventDefault();
this.updateOffset(e);
};
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);
};
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();
};
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.0.6", type: SliderComponent, isStandalone: true, selector: "color-slider", inputs: { gradientColors: "gradientColors", direction: "direction", type: "type", color: "color", value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { nzOnChange: "nzOnChange", nzOnChangeComplete: "nzOnChangeComplete" }, host: { listeners: { "mousedown": "dragStartHandle($event)", "touchstart": "dragStartHandle($event)" }, properties: { "class": "'ant-color-picker-slider-' + type" }, classAttribute: "ant-color-picker-slider" }, viewQueries: [{ propertyName: "transformRef", first: true, predicate: ["transform"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
<div class="ant-color-picker-palette">
<div #transform class="ant-color-picker-transform" [style.left.px]="offsetValue.x" [style.top.px]="offsetValue.y">
<color-handler size="small" [color]="value" />
</div>
<color-gradient [colors]="gradientColors" [direction]="direction" [type]="type" />
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: GradientDirective, selector: "color-gradient", inputs: ["colors", "direction", "type"] }, { kind: "directive", type: HandlerDirective, selector: "color-handler", inputs: ["color", "size"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SliderComponent, decorators: [{
type: Component,
args: [{
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'color-slider',
imports: [GradientDirective, HandlerDirective],
template: `
<div class="ant-color-picker-palette">
<div #transform class="ant-color-picker-transform" [style.left.px]="offsetValue.x" [style.top.px]="offsetValue.y">
<color-handler size="small" [color]="value" />
</div>
<color-gradient [colors]="gradientColors" [direction]="direction" [type]="type" />
</div>
`,
host: {
class: 'ant-color-picker-slider',
'[class]': `'ant-color-picker-slider-' + type`,
'(mousedown)': `dragStartHandle($event)`,
'(touchstart)': `dragStartHandle($event)`
}
}]
}], propDecorators: { transformRef: [{
type: ViewChild,
args: ['transform', { static: true }]
}], gradientColors: [{
type: Input
}], direction: [{
type: Input
}], type: [{
type: Input
}], color: [{
type: Input
}], value: [{
type: Input
}], disabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], nzOnChange: [{
type: Output
}], nzOnChangeComplete: [{
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 NgAntdColorPresetComponent {
cdr = inject(ChangeDetectorRef);
openPresets = new Set();
presets = [];
value = null;
presetSelect = new EventEmitter();
ngOnInit() {
this.presets.forEach((preset, index) => {
if (preset.defaultOpen) {
this.openPresets.add(index);
}
});
}
onPanelActiveChange(index, active) {
if (active) {
this.openPresets.add(index);
}
else {
this.openPresets.delete(index);
}
this.cdr.markForCheck();
}
selectPresetColor(color) {
const colorInstance = typeof color === 'string' ? generateColor(color) : color;
this.presetSelect.emit(colorInstance);
}
getColorString(color) {
if (typeof color === 'string') {
return color;
}
return color.toRgbString();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgAntdColorPresetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NgAntdColorPresetComponent, isStandalone: true, selector: "ng-antd-color-preset", inputs: { presets: "presets", value: "value" }, outputs: { presetSelect: "presetSelect" }, host: { classAttribute: "ant-color-picker-presets-wrapper" }, ngImport: i0, template: `
<div class="ant-color-picker-presets">
<nz-collapse nzGhost>
@for (preset of presets; track preset.key || $index) {
<nz-collapse-panel
[nzActive]="openPresets.has($index)"
(nzActiveChange)="onPanelActiveChange($index, $event)"
[nzHeader]="preset.label"
>
<div class="ant-color-picker-presets-items">
@for (color of preset.colors; track $index) {
<ng-antd-color-block
[value]="value"
[color]="getColorString(color)"
(nzOnClick)="selectPresetColor(color)"
/>
}
</div>
</nz-collapse-panel>
}
</nz-collapse>
</div>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: NzCollapseModule }, { kind: "component", type: i1.NzCollapsePanelComponent, selector: "nz-collapse-panel", inputs: ["nzActive", "nzShowArrow", "nzExtra", "nzHeader", "nzExpandedIcon", "nzCollapsible"], outputs: ["nzActiveChange"], exportAs: ["nzCollapsePanel"] }, { kind: "component", type: i1.NzCollapseComponent, selector: "nz-collapse", inputs: ["nzAccordion", "nzBordered", "nzGhost", "nzExpandIconPosition", "nzSize"], exportAs: ["nzCollapse"] }, { kind: "component", type: NgAntdColorBlockComponent, selector: "ng-antd-color-block", inputs: ["color", "value"], outputs: ["nzOnClick"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgAntdColorPresetComponent, decorators: [{
type: Component,
args: [{
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'ng-antd-color-preset',
imports: [NzCollapseModule, NgAntdColorBlockComponent],
template: `
<div class="ant-color-picker-presets">
<nz-collapse nzGhost>
@for (preset of presets; track preset.key || $index) {
<nz-collapse-panel
[nzActive]="openPresets.has($index)"
(nzActiveChange)="onPanelActiveChange($index, $event)"
[nzHeader]="preset.label"
>
<div class="ant-color-picker-presets-items">
@for (color of preset.colors; track $index) {
<ng-antd-color-block
[value]="value"
[color]="getColorString(color)"
(nzOnClick)="selectPresetColor(color)"
/>
}
</div>
</nz-collapse-panel>
}
</nz-collapse>
</div>
`,
host: {
class: 'ant-color-picker-presets-wrapper'
}
}]
}], propDecorators: { presets: [{
type: Input
}], value: [{
type: Input
}], presetSelect: [{
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 NgAntdColorPickerComponent {
cdr = inject(ChangeDetectorRef);
value = '';
defaultValue;
nzOnChange = new EventEmitter();
nzOnChangeComplete = new EventEmitter();
panelRenderHeader = null;
panelRenderFooter = null;
disabledAlpha = false;
disabled = false;
presets = null;
colorValue = null;
alphaColor = '';
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%'
];
gradientColors = ['rgba(255, 0, 4, 0) 0%', this.alphaColor];
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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgAntdColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NgAntdColorPickerComponent, isStandalone: true, selector: "ng-antd-color-picker", inputs: { value: "value", defaultValue: "defaultValue", panelRenderHeader: "panelRenderHeader", panelRenderFooter: "panelRenderFooter", disabledAlpha: ["disabledAlpha", "disabledAlpha", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], presets: "presets" }, outputs: { nzOnChange: "nzOnChange", nzOnChangeComplete: "nzOnChangeComplete" }, host: { classAttribute: "ant-color-picker-inner" }, usesOnChanges: true, ngImport: i0, template: `
<div class="ant-color-picker-inner-content">
<div class="ant-color-picker-panel" [class.ant-color-picker-panel-disabled]="disabled">
@if (panelRenderHeader) {
<ng-template [ngTemplateOutlet]="panelRenderHeader" />
}
<color-picker
[color]="colorValue"
(nzOnChange)="handleChange($event)"
[disabled]="disabled"
(nzOnChangeComplete)="nzOnChangeComplete.emit($event)"
/>
<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)"
/>
@if (!disabledAlpha) {
<color-slider
type="alpha"
[color]="colorValue"
[value]="toRgbString"
[gradientColors]="gradientColors"
(nzOnChange)="handleChange($event, 'alpha')"
[disabled]="disabled"
(nzOnChangeComplete)="nzOnChangeComplete.emit($event)"
/>
}
</div>
<ng-antd-color-block [color]="toRgbString" />
</div>
</div>
@if (panelRenderFooter) {
<ng-template [ngTemplateOutlet]="panelRenderFooter" />
}
@if (presets && presets.length > 0) {
<nz-divider nzSize="small" />
<ng-antd-color-preset [value]="colorValue" [presets]="presets" (presetSelect)="handleChange($event)" />
}
</div>
`, isInline: true, dependencies: [{ 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", "value"], outputs: ["nzOnClick"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgAntdColorPresetComponent, selector: "ng-antd-color-preset", inputs: ["presets", "value"], outputs: ["presetSelect"] }, { kind: "ngmodule", type: NzDividerModule }, { kind: "component", type: i1$1.NzDividerComponent, selector: "nz-divider", inputs: ["nzText", "nzType", "nzOrientation", "nzVariant", "nzSize", "nzDashed", "nzPlain"], exportAs: ["nzDivider"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgAntdColorPickerComponent, decorators: [{
type: Component,
args: [{
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'ng-antd-color-picker',
imports: [
PickerComponent,
SliderComponent,
NgAntdColorBlockComponent,
NgTemplateOutlet,
NgAntdColorPresetComponent,
NzDividerModule
],
template: `
<div class="ant-color-picker-inner-content">
<div class="ant-color-picker-panel" [class.ant-color-picker-panel-disabled]="disabled">
@if (panelRenderHeader) {
<ng-template [ngTemplateOutlet]="panelRenderHeader" />
}
<color-picker
[color]="colorValue"
(nzOnChange)="handleChange($event)"
[disabled]="disabled"
(nzOnChangeComplete)="nzOnChangeComplete.emit($event)"
/>
<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)"
/>
@if (!disabledAlpha) {
<color-slider
type="alpha"
[color]="colorValue"
[value]="toRgbString"
[gradientColors]="gradientColors"
(nzOnChange)="handleChange($event, 'alpha')"
[disabled]="disabled"
(nzOnChangeComplete)="nzOnChangeComplete.emit($event)"
/>
}
</div>
<ng-antd-color-block [color]="toRgbString" />
</div>
</div>
@if (panelRenderFooter) {
<ng-template [ngTemplateOutlet]="panelRenderFooter" />
}
@if (presets && presets.length > 0) {
<nz-divider nzSize="small" />
<ng-antd-color-preset [value]="colorValue" [presets]="presets" (presetSelect)="handleChange($event)" />
}
</div>
`,
host: {
class: 'ant-color-picker-inner'
}
}]
}], propDecorators: { value: [{
type: Input
}], defaultValue: [{
type: Input
}], nzOnChange: [{
type: Output
}], nzOnChangeComplete: [{
type: Output
}], panelRenderHeader: [{
type: Input
}], panelRenderFooter: [{
type: Input
}], disabledAlpha: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], disabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], presets: [{
type: 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
*/
class NgAntdColorPickerModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgAntdColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: NgAntdColorPickerModule, imports: [NgAntdColorPickerComponent, NgAntdColorBlockComponent, NgAntdColorPresetComponent], exports: [NgAntdColorPickerComponent, NgAntdColorBlockComponent, NgAntdColorPresetComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgAntdColorPickerModule, imports: [NgAntdColorPickerComponent, NgAntdColorPresetComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgAntdColorPickerModule, decorators: [{
type: NgModule,
args: [{
imports: [NgAntdColorPickerComponent, NgAntdColorBlockComponent, NgAntdColorPresetComponent],
exports: [NgAntdColorPickerComponent, NgAntdColorBlockComponent, NgAntdColorPresetComponent]
}]
}] });
/**
* 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 {
nzColor = defaultColor.toHexString();
nzSize = 'default';
nzOnClick = new EventEmitter();
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzColorBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: NzColorBlockComponent, isStandalone: true, 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()" />`, isInline: true, dependencies: [{ kind: "ngmodule", type: NgAntdColorPickerModule }, { kind: "component", type: NgAntdColorBlockComponent, selector: "ng-antd-color-block", inputs: ["color", "value"], outputs: ["nzOnClick"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzColorBlockComponent, decorators: [{
type: Component,
args: [{
selector: 'nz-color-block',
exportAs: 'nzColorBlock',
imports: [NgAntdColorPickerModule],
template: `<ng-antd-color-block [color]="nzColor" (nzOnClick)="nzOnClick.emit()" />`,
host: {
class: 'ant-color-picker-inline',
'[class.ant-color-picker-inline-sm]': `nzSize === 'small'`,
'[class.ant-color-picker-inline-lg]': `nzSize === 'large'`
}
}]
}], 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 {
destroyRef = inject(DestroyRef);
formBuilder = inject(FormBuilder);
format = null;
colorValue = '';
clearColor = false;
nzDisabledAlpha = false;
formatChange = new EventEmitter();
nzOnFormatChange = new EventEmitter();
validateForm = this.formBuilder.nonNullable.group({
isFormat: this.formBuilder.control('hex'),
hex: this.formBuilder.control('1677FF', hexValidator),
hsbH: 215,
hsbS: 91,
hsbB: 100,
rgbR: 22,
rgbG: 119,
rgbB: 255,
roundA: 100
});
formatterPercent = (value) => `${value} %`;
parserPercent = (value) => +value.replace(' %', '');
ngOnInit() {
this.validateForm.valueChanges
.pipe(filter(() => this.validateForm.valid), debounceTime(200), distinctUntilChanged((prev, current) => Object.keys(prev).every(key => prev[key] === current[key])), takeUntilDestroyed(this.destroyRef))
.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(takeUntilDestroyed(this.destroyRef))
.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);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzColorFormatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NzColorFormatComponent, isStandalone: true, selector: "nz-color-format", inputs: { format: "format", colorValue: "colorValue", clearColor: ["clearColor", "clearColor", booleanAttribute], nzDisabledAlpha: ["nzDisabledAlpha", "nzDisabledAlpha", booleanAttribute] }, outputs: { formatChange: "formatChange", nzOnFormatChange: "nzOnFormatChange" }, host: { classAttribute: "ant-color-picker-input-container" }, exportAs: ["nzColorFormat"], usesOnChanges: true, ngImport: i0, template: `
<div class="ant-color-picker-format-select">
<nz-select [formControl]="validateForm.controls.isFormat" nzVariant="borderless" nzSize="small">
<nz-option nzValue="hex" nzLabel="HEX" />
<nz-option nzValue="hsb" nzLabel="HSB" />
<nz-option nzValue="rgb" nzLabel="RGB" />
</nz-select>
</div>
<div class="ant-color-picker-input">
@switch (validateForm.controls.isFormat.value) {
@case ('hex') {
<div class="ant-color-picker-hex-input">
<nz-input-wrapper nzPrefix="#">
<input nz-input nzSize="small" [formControl]="validateForm.controls.hex" />
</nz-input-wrapper>
</div>
}
@case ('hsb') {
<div class="ant-color-picker-hsb-input">
<div class="ant-color-picker-steppers ant-color-picker-hsb-input">
<nz-input-number
[formControl]="validateForm.controls.hsbH"
[nzMin]="0"
[nzMax]="360"
[nzStep]="1"
[nzPrecision]="0"
nzSize="small"
/>
</div>
<div class="ant-color-picker-steppers ant-color-picker-hsb-input">
<nz-input-number
[formControl]="validateForm.controls.hsbS"
[nzMin]="0"
[nzMax]="100"
[nzStep]="1"
[nzFormatter]="formatterPercent"
[nzParser]="parserPercent"
nzSize="small"
/>
</div>
<div class="ant-color-picker-steppers ant-color-picker-hsb-input">
<nz-input-number
[formControl]="validateForm.controls.hsbB"
[nzMin]="0"
[nzMax]="100"
[nzStep]="1"
[nzFormatter]="formatterPercent"
[nzParser]="parserPercent"
nzSize="small"
/>
</div>
</div>
}
@default {
<div class="ant-color-picker-rgb-input">
<div class="ant-color-picker-steppers ant-color-picker-rgb-input">
<nz-input-number
[formControl]="validateForm.controls.rgbR"
[nzMin]="0"
[nzMax]="255"
[nzStep]="1"
nzSize="small"
/>
</div>
<div class="ant-color-picker-steppers ant-color-picker-rgb-input">
<nz-input-number
[formControl]="validateForm.controls.rgbG"
[nzMin]="0"
[nzMax]="255"
[nzStep]="1"
nzSize="small"
/>
</div>
<div class="ant-color-picker-steppers ant-color-picker-rgb-input">
<nz-input-number
[formControl]="validateForm.controls.rgbB"
[nzMin]="0"
[nzMax]="255"
[nzStep]="1"
nzSize="small"
/>
</div>
</div>
}
}
</div>
@if (!nzDisabledAlpha) {
<div class="ant-color-picker-steppers ant-color-picker-alpha-input">
<nz-input-number
[formControl]="validateForm.controls.roundA"
[nzMin]="0"
[nzMax]="100"
[nzStep]="1"
[nzFormatter]="formatterPercent"
[nzParser]="parserPercent"
nzSize="small"
/>
</div>
}
`, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NzSelectModule }, { kind: "component", type: i2.NzOptionComponent, selector: "nz-option", inputs: ["nzTitle", "nzLabel", "nzValue", "nzKey", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { kind: "component", type: i2.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzStatus", "nzVariant", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzPlacement", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzPrefix", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzSelectOnTab", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus", "nzOnClear"], exportAs: ["nzSelect"] }, { kind: "ngmodule", type: NzInputModule }, { kind: "directive", type: i3.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzVariant", "nzSize", "nzStatus", "disabled", "readonly"], exportAs: ["nzInput"] }, { kind: "component", type: i3.NzInputWrapperComponent, selector: "nz-input-wrapper,nz-input-password,nz-input-search", inputs: ["nzAllowClear", "nzPrefix", "nzSuffix", "nzAddonBefore", "nzAddonAfter", "nzShowCount", "nzCount"], outputs: ["nzClear"], exportAs: ["nzInputWrapper"] }, { kind: "ngmodule", type: NzInputNumberModule }, { kind: "component", type: i4.NzInputNumberComponent, selector: "nz-input-number", inputs: ["nzId", "nzSize", "nzPlaceHolder", "nzStatus", "nzVariant", "nzStep", "nzMin", "nzMax", "nzPrecision", "nzParser", "nzFormatter", "nzDisabled", "nzReadOnly", "nzAutoFocus", "nzKeyboard", "nzControls", "nzChangeOnWheel", "nzPrefix", "nzSuffix", "nzAddonBefore", "nzAddonAfter"], outputs: ["nzBlur", "nzFocus", "nzOnStep"], exportAs: ["nzInputNumber"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzColorFormatComponent, decorators: [{
type: Component,
args: [{
selector: 'nz-color-format',
exportAs: 'nzColorFormat',
imports: [ReactiveFormsModule, NzSelectModule, NzInputModule, NzInputNumberModule],
template: `
<div class="ant-color-picker-format-select">
<nz-select [formControl]="validateForm.controls.isFormat" nzVariant="borderless" nzSize="small">
<nz-option nzValue="hex" nzLabel="HEX" />
<nz-option nzValue="hsb" nzLabel="HSB" />
<nz-option nzValue="rgb" nzLabel="RGB" />
</nz-select>
</div>
<div class="ant-color-picker-input">
@switch (validateForm.controls.isFormat.value) {
@case ('hex') {
<div class="ant-color-picker-hex-input">
<nz-input-wrapper nzPrefix="#">
<input nz-input nzSize="small" [formControl]="validateForm.controls.hex" />
</nz-input-wrapper>
</div>
}
@case ('hsb') {
<div class="ant-color-picker-hsb-input">
<div class="ant-color-picker-steppers ant-color-picker-hsb-input">
<nz-input-number
[formControl]="validateForm.controls.hsbH"
[nzMin]="0"
[nzMax]="360"
[nzStep]="1"
[nzPrecision]="0"
nzSize="small"
/>
</div>
<div class="ant-color-picker-steppers ant-color-picker-hsb-input">
<nz-input-number
[formControl]="validateForm.controls.hsbS"
[nzMin]="0"
[nzMax]="100"
[nzStep]="1"
[nzFormatter]="formatterPercent"
[nzParser]="parserPercent"
nzSize="small"
/>
</div>
<div class="ant-color-picker-steppers ant-color-picker-hsb-input">
<nz-input-number
[formControl]="validateForm.controls.hsbB"
[nzMin]="0"
[nzMax]="100"
[nzStep]="1"
[nzFormatter]="formatterPercent"
[nzParser]="parserPercent"
nzSize="small"
/>
</div>
</div>
}
@default {
<div class="ant-color-picker-rgb-input">
<div class="ant-color-picker-steppers ant-color-picker-rgb-input">
<nz-input-number
[formControl]="validateForm.controls.rgbR"
[nzMin]="0"
[nzMax]="255"
[nzStep]="1"
nzSize="small"
/>
</div>
<div class="ant-color-picker-steppers ant-color-picker-rgb-input">
<nz-input-number
[formControl]="validateForm.controls.rgbG"
[nzMin]="0"
[nzMax]="255"
[nzStep]="1"
nzSize="small"
/>
</div>
<div class="ant-color-picker-steppers ant-color-picker-rgb-input">
<nz-input-number
[formControl]="validateForm.controls.rgbB"
[nzMin]="0"
[nzMax]="255"
[nzStep]="1"
nzSize="small"
/>
</div>
</div>
}
}
</div>
@if (!nzDisabledAlpha) {
<div class="ant-color-picker-steppers ant-color-picker-alpha-input">
<nz-input-number
[formControl]="validateForm.controls.roundA"
[nzMin]="0"
[nzMax]="100"
[nzStep]="1"
[nzFormatter]="formatterPercent"
[nzParser]="parserPercent"
nzSize="small"
/>
</div>
}
`,
host: {
class: 'ant-color-picker-input-container'
}
}]
}], propDecorators: { format: [{
type: Input
}], colorValue: [{
type: Input
}], clearColor: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], nzDisabledAlpha: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], formatChange: [{
type: Output
}], nzOnFormatChange: [{
type: Output
}] } });
const hexValidator = (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;
};
/**
* 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 NzColorPickerComponent {
cdr = inject(ChangeDetectorRef);
destroyRef = inject(DestroyRef);
formBuilder = inject(FormBuilder);
formSize = inject(NZ_FORM_SIZE, { optional: true });
nzFormat = null;
nzValue = '';
nzSize = 'default';
nzDefaultValue = '';
nzTrigger = 'click';
nzTitle = '';
nzFlipFlop = null;
nzShowText = false;
nzOpen = false;
nzAllowClear = false;
nzDisabled = false;
nzDisabledAlpha = false;
nzPresets = null;
nzOnChange = new EventEmitter();
nzOnFormatChange = new EventEmitter();
nzOnClear = new EventEmitter();
nzOnOpenChange = new EventEmitter();
isNzDisableFirstChange = true;
popoverPlacements = ['bottomLeft', 'bottomRight', 'topLeft', 'topRight'];
blockColor = '';
clearColor = false;
showText = defaultColor.toHexString();
formControl = this.formBuilder.control('');
size = signal(this.nzSize, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
finalSize = computed(() => this.formSize?.() || this.size(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "finalSize" }] : /* istanbul ignore next */ []));
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(takeUntilDestroyed(this.destroyRef)).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, nzSize } = changes;
if (nzValue || nzDefaultValue) {
this.getBlockColor();
}
if (nzSize) {
this.size.set(nzSize.currentValue);
}
}
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.nzOnChange.emit({ color: value.color, format: this.nzFormat ?? 'hex' });
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();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NzColorPickerComponent, isStandalone: true, selector: "nz-color-picker", inputs: { nzFormat: "nzFormat", nzValue: "nzValue", nzSize: "nzSize", nzDefaultValue: "nzDefaultValue", nzTrigger: "nzTrigger", nzTitle: "nzTitle", nzFlipFlop: "nzFlipFlop", nzShowText: ["nzShowText", "nzShowText", booleanAttribute], nzOpen: ["nzOpen", "nzOpen", booleanAttribute], nzAllowClear: ["nzAllowClear", "nzAllowClear", booleanAttribute], nzDisabled: ["nzDisabled", "nzDisabled", booleanAttribute], nzDisabledAlpha: ["nzDisabledAlpha", "nzDisabledAlpha", booleanAttribute], nzPresets: "nzPresets" }, 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]="finalSize() === 'small'"
[class.ant-color-picker-lg]="finalSize() === 'large'"
nz-popover
[nzPopoverContent]="colorPicker"
[nzPopoverPlacement]="popoverPlacements"
[nzPopoverTrigger]="!nzDisabled ? nzTrigger : null"
[nzPopoverVisible]="nzOpen"
(nzPopoverVisibleChange)="nzOnOpenChange.emit($event)"
>
@if (!nzFlipFlop) {
<nz-color-block [nzColor]="blockColor" [nzSize]="finalSize()" />
} @else {
<ng-template [ngTemplateOutlet]="nzFlipFlop" />
}
@if (nzShowText && !!showText && !nzFlipFlop) {
<div class="ant-color-picker-trigger-text">
{{ showText }}
</div>
}
</div>
<ng-template #colorPicker>
<ng-antd-color-picker
[value]="blockColor"
[defaultValue]="nzDefaultValue"
[disabled]="nzDisabled"
[panelRenderHeader]="nzPanelRenderHeader"
[panelRenderFooter]="nzPanelRenderFooter"
[disabledAlpha]="nzDisabledAlpha"
[presets]="nzPresets"
(nzOnChange)="colorChange($event)"
/>
</ng-template>
<ng-template #nzPanelRenderHeader>
@if (nzTitle || nzAllowClear) {
<div class="ant-color-picker-title">
<div class="ant-color-picker-title-content">
<ng-template [nzStringTemplateOutlet]="nzTitle">{{ nzTitle }}</ng-template>
</div>
@if (nzAllowClear) {
<div class="ant-color-picker-clear" (click)="clearColorHandle()"></div>
}
</div>
}
</ng-template>
<ng-template #nzPanelRenderFooter>
<nz-color-format
[colorValue]="blockColor"
[clearColor]="clearColor"
[format]="nzFormat"
[nzDisabledAlpha]="nzDisabledAlpha"
(formatChange)="formatChange($event)"
(nzOnFormatChange)="nzOnFormatChange.emit($event)"
/>
</ng-template>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: NgAntdColorPickerModule }, { kind: "component", type: NgAntdColorPickerComponent, selector: "ng-antd-color-picker", inputs: ["value", "defaultValue", "panelRenderHeader", "panelRenderFooter", "disabledAlpha", "disabled", "presets"], outputs: ["nzOnChange", "nzOnChangeComplete"] }, { kind: "directive", type: NzPopoverDirective, selector: "[nz-popover]", inputs: ["nzPopoverArrowPointAtCenter", "nzPopoverTitle", "nzPopoverTitleContext", "nzPopoverContent", "nzPopoverContentContext", "nz-popover", "nzPopoverTrigger", "nzPopoverPlacement", "nzPopoverOrigin", "nzPopoverVisible", "nzPopoverMouseEnterDelay", "nzPopoverMouseLeaveDelay", "nzPopoverOverlayClassName", "nzPopoverOverlayStyle", "nzPopoverOverlayClickable", "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", "nzDisabledAlpha"], outputs: ["formatChange", "nzOnFormatChange"], exportAs: ["nzColorFormat"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NzStringTemplateOutletDirective, selector: "[nzStringTemplateOutlet]", inputs: ["nzStringTemplateOutletContext", "nzStringTemplateOutlet"], exportAs: ["nzStringTemplateOutlet"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzColorPickerComponent, decorators: [{
type: Component,
args: [{
selector: 'nz-color-picker',
exportAs: 'nzColorPicker',
imports: [
NgAntdColorPickerModule,
NzPopoverDirective,
NzColorBlockComponent,
NzColorFormatComponent,
NgTemplateOutlet,
NzStringTemplateOutletDirective
],
template: `
<div
[class.ant-color-picker-trigger]="!nzFlipFlop"
[class.ant-color-picker-sm]="finalSize() === 'small'"
[class.ant-color-picker-lg]="finalSize() === 'large'"
nz-popover
[nzPopoverContent]="colorPicker"
[nzPopoverPlacement]="popoverPlacements"
[nzPopoverTrigger]="!nzDisabled ? nzTrigger : null"
[nzPopoverVisible]="nzOpen"
(nzPopoverVisibleChange)="nzOnOpenChange.emit($event)"
>
@if (!nzFlipFlop) {
<nz-color-block [nzColor]="blockColor" [nzSize]="finalSize()" />
} @else {
<ng-template [ngTemplateOutlet]="nzFlipFlop" />
}
@if (nzShowText && !!showText && !nzFlipFlop) {
<div class="ant-color-picker-trigger-text">
{{ showText }}
</div>
}
</div>
<ng-template #colorPicker>
<ng-antd-color-picker
[value]="blockColor"
[defaultValue]="nzDefaultValue"
[disabled]="nzDisabled"
[panelRenderHeader]="nzPanelRenderHeader"
[panelRenderFooter]="nzPanelRenderFooter"
[disabledAlpha]="nzDisabledAlpha"
[presets]="nzPresets"
(nzOnChange)="colorChange($event)"
/>
</ng-template>
<ng-template #nzPanelRenderHeader>
@if (nzTitle || nzAllowClear) {
<div class="ant-color-picker-title">
<div class="ant-color-picker-title-content">
<ng-template [nzStringTemplateOutlet]="nzTitle">{{ nzTitle }}</ng-template>
</div>
@if (nzAllowClear) {
<div class="ant-color-picker-clear" (click)="clearColorHandle()"></div>
}
</div>
}
</ng-template>
<ng-template #nzPanelRenderFooter>
<nz-color-format
[colorValue]="blockColor"
[clearColor]="clearColor"
[format]="nzFormat"
[nzDisabledAlpha]="nzDisabledAlpha"
(formatChange)="formatChange($event)"
(nzOnFormatChange)="nzOnFormatChange.emit($event)"
/>
</ng-template>
`,
host: {
class: 'ant-color-picker-inline',
'[class.ant-color-picker-disabled]': `nzDisabled`
},
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NzColorPickerComponent),
multi: true
}
]
}]
}], 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,
args: [{ transform: booleanAttribute }]
}], nzOpen: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], nzAllowClear: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], nzDisabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], nzDisabledAlpha: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], nzPresets: [{
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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: NzColorPickerModule, imports: [NzColorPickerComponent, NzColorBlockComponent, NzColorFormatComponent], exports: [NzColorPickerComponent, NzColorBlockComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzColorPickerModule, imports: [NzColorPickerComponent, NzColorBlockComponent, NzColorFormatComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NzColorPickerModule, decorators: [{
type: NgModule,
args: [{
imports: [NzColorPickerComponent, NzColorBlockComponent, NzColorFormatComponent],
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