Skip to content

Commit b050474

Browse files
Nicoss54Nicoss54
authored
feat(module:color-picker): make color picker standalone (#8316)
fix(module:color-picker): build site failed
1 parent 0a37cad commit b050474

6 files changed

Lines changed: 83 additions & 75 deletions

File tree

‎components/color-picker/color-block.component.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,16 @@
55

66
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
77

8-
import { defaultColor } from 'ng-antd-color-picker';
8+
import { defaultColor, NgAntdColorPickerModule } from 'ng-antd-color-picker';
99

1010
import { NzSizeLDSType } from 'ng-zorro-antd/core/types';
1111

1212
@Component({
1313
selector: 'nz-color-block',
1414
exportAs: 'NzColorBlock',
1515
changeDetection: ChangeDetectionStrategy.OnPush,
16+
standalone: true,
17+
imports: [NgAntdColorPickerModule],
1618
template: ` <ng-antd-color-block [color]="nzColor" (nzOnClick)="nzOnClick.emit($event)"></ng-antd-color-block> `,
1719
host: {
1820
class: 'ant-color-picker-inline',

‎components/color-picker/color-format.component.ts‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,33 @@ import {
1414
Output,
1515
SimpleChanges
1616
} from '@angular/core';
17-
import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, ValidatorFn } from '@angular/forms';
17+
import {
18+
AbstractControl,
19+
FormBuilder,
20+
FormControl,
21+
FormGroup,
22+
ReactiveFormsModule,
23+
ValidationErrors,
24+
ValidatorFn
25+
} from '@angular/forms';
1826
import { Subject } from 'rxjs';
1927
import { debounceTime, filter, takeUntil } from 'rxjs/operators';
2028

2129
import { generateColor } from 'ng-antd-color-picker';
2230

2331
import { InputBoolean } from 'ng-zorro-antd/core/util';
32+
import { NzInputDirective, NzInputGroupComponent } from 'ng-zorro-antd/input';
33+
import { NzInputNumberComponent } from 'ng-zorro-antd/input-number';
34+
import { NzSelectModule } from 'ng-zorro-antd/select';
2435

2536
import { NzColorPickerFormatType } from './typings';
2637

2738
@Component({
2839
selector: 'nz-color-format',
2940
exportAs: 'NzColorFormat',
3041
changeDetection: ChangeDetectionStrategy.OnPush,
42+
standalone: true,
43+
imports: [ReactiveFormsModule, NzSelectModule, NzInputDirective, NzInputGroupComponent, NzInputNumberComponent],
3144
template: `
3245
<div [formGroup]="validateForm" class="ant-color-picker-input-container">
3346
<div class="ant-color-picker-format-select">

‎components/color-picker/color-picker.component.ts‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6+
import { NgTemplateOutlet } from '@angular/common';
67
import {
78
ChangeDetectionStrategy,
89
ChangeDetectorRef,
@@ -21,17 +22,28 @@ import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/f
2122
import { Subject } from 'rxjs';
2223
import { takeUntil } from 'rxjs/operators';
2324

24-
import { defaultColor, generateColor } from 'ng-antd-color-picker';
25+
import { defaultColor, generateColor, NgAntdColorPickerModule } from 'ng-antd-color-picker';
2526

2627
import { BooleanInput, NzSafeAny, NzSizeLDSType } from 'ng-zorro-antd/core/types';
2728
import { InputBoolean, isNonEmptyString, isTemplateRef } from 'ng-zorro-antd/core/util';
29+
import { NzPopoverDirective } from 'ng-zorro-antd/popover';
2830

31+
import { NzColorBlockComponent } from './color-block.component';
32+
import { NzColorFormatComponent } from './color-format.component';
2933
import { NzColor, NzColorPickerFormatType, NzColorPickerTriggerType } from './typings';
3034

3135
@Component({
3236
selector: 'nz-color-picker',
3337
exportAs: 'NzColorPicker',
3438
changeDetection: ChangeDetectionStrategy.OnPush,
39+
standalone: true,
40+
imports: [
41+
NgAntdColorPickerModule,
42+
NzPopoverDirective,
43+
NzColorBlockComponent,
44+
NzColorFormatComponent,
45+
NgTemplateOutlet
46+
],
3547
template: `
3648
<div
3749
[class.ant-color-picker-trigger]="!nzFlipFlop"
@@ -63,7 +75,7 @@ import { NzColor, NzColorPickerFormatType, NzColorPickerTriggerType } from './ty
6375
[panelRenderFooter]="nzPanelRenderFooter"
6476
[disabledAlpha]="nzDisabledAlpha"
6577
(nzOnChange)="colorChange($event)"
66-
></ng-antd-color-picker>
78+
/>
6779
</ng-template>
6880
<ng-template #nzPanelRenderHeader>
6981
@if (nzTitle || nzAllowClear) {
@@ -90,7 +102,7 @@ import { NzColor, NzColorPickerFormatType, NzColorPickerTriggerType } from './ty
90102
[nzDisabledAlpha]="nzDisabledAlpha"
91103
(formatChange)="formatChange($event)"
92104
(nzOnFormatChange)="nzOnFormatChange.emit($event)"
93-
></nz-color-format>
105+
/>
94106
</ng-template>
95107
`,
96108
host: {

‎components/color-picker/color-picker.module.ts‎

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,33 +3,14 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6-
import { CommonModule } from '@angular/common';
76
import { NgModule } from '@angular/core';
8-
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
9-
10-
import { NgAntdColorPickerModule } from 'ng-antd-color-picker';
11-
12-
import { NzInputModule } from 'ng-zorro-antd/input';
13-
import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
14-
import { NzPopoverModule } from 'ng-zorro-antd/popover';
15-
import { NzSelectModule } from 'ng-zorro-antd/select';
167

178
import { NzColorBlockComponent } from './color-block.component';
189
import { NzColorFormatComponent } from './color-format.component';
1910
import { NzColorPickerComponent } from './color-picker.component';
2011

2112
@NgModule({
22-
declarations: [NzColorPickerComponent, NzColorBlockComponent, NzColorFormatComponent],
23-
imports: [
24-
CommonModule,
25-
NgAntdColorPickerModule,
26-
NzPopoverModule,
27-
NzSelectModule,
28-
FormsModule,
29-
NzInputNumberModule,
30-
NzInputModule,
31-
ReactiveFormsModule
32-
],
13+
imports: [NzColorPickerComponent, NzColorBlockComponent, NzColorFormatComponent],
3314
exports: [NzColorPickerComponent, NzColorBlockComponent]
3415
})
3516
export class NzColorPickerModule {}

‎components/color-picker/doc/index.en-US.md‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -22,38 +22,38 @@ Install `ng-antd-color-picker` in your project first:
2222
npm install ng-antd-color-picker
2323
```
2424

25-
### nz-color-picker
25+
### nz-color-picker:standalone
2626

2727
| Parameter | Description | Type | Default |
28-
| -------------------- | ------------------------------------- | -------------------------------------------------- | --------- |
29-
| `[nzFormat]` | Format of color | `rgb`｜`hex`｜`hsb` | `hex` |
30-
| `[nzValue]` | Value of color | `string`｜`NzColor` | - |
31-
| `[nzSize]` | Setting the trigger size | `large`｜`default`｜`small` | `default` |
32-
| `[nzDefaultValue]` | Default value of color | `string`｜`NzColor` | `false` |
28+
|----------------------|---------------------------------------|----------------------------------------------------|-----------|
29+
| `[nzFormat]` | Format of color | `rgb`｜`hex`｜`hsb` | `hex` |
30+
| `[nzValue]` | Value of color | `string`｜`NzColor` | - |
31+
| `[nzSize]` | Setting the trigger size | `large`｜`default`｜`small` | `default` |
32+
| `[nzDefaultValue]` | Default value of color | `string`｜`NzColor` | `false` |
3333
| `[nzAllowClear]` | Allow clearing color selected | `boolean` | `false` |
34-
| `[nzTrigger]` | ColorPicker trigger mode | `hover`｜`click` | `click` |
34+
| `[nzTrigger]` | ColorPicker trigger mode | `hover`｜`click` | `click` |
3535
| `[nzShowText]` | Show color text | `boolean` | `false` |
3636
| `[nzOpen]` | Whether to show popups | `boolean` | `false` |
3737
| `[nzDisabled]` | Disable ColorPicker | `boolean` | `false` |
3838
| `[nzDisabledAlpha]` | Disable Alpha | `boolean` | `false` |
39-
| `[nzTitle]` | Setting the title of the color picker | `TemplateRef<void>`｜`string` | - |
39+
| `[nzTitle]` | Setting the title of the color picker | `TemplateRef<void>`｜`string` | - |
4040
| `(nzOnChange)` | Callback when value is changed | `EventEmitter<{ color: NzColor; format: string }>` | - |
4141
| `(nzOnClear)` | Called when clear | `EventEmitter<boolean>` | - |
42-
| `(nzOnFormatChange)` | Callback when `format` is changed | `EventEmitter<'rgb'｜'hex'｜'hsb'>` | - |
42+
| `(nzOnFormatChange)` | Callback when `format` is changed | `EventEmitter<'rgb'｜'hex'｜'hsb'>` | - |
4343
| `(nzOnOpenChange)` | Callback for opening the color panel | `EventEmitter<boolean>` | - |
4444

45-
### nz-color-block
45+
### nz-color-block:standalone
4646

47-
| Parameter | Description | Type | Default |
48-
| ------------- | -------------------------------------- | --------------------------- | --------- |
49-
| `[nzColor]` | Module colors | `string` | `#1677ff` |
47+
| Parameter | Description | Type | Default |
48+
|---------------|----------------------------------------|---------------------------|-----------|
49+
| `[nzColor]` | Module colors | `string` | `#1677ff` |
5050
| `[nzSize]` | Color block size | `large`｜`default`｜`small` | `default` |
51-
| `[nzOnClick]` | Callbacks for clicking on color blocks | `EventEmitter<boolean>` | - |
51+
| `[nzOnClick]` | Callbacks for clicking on color blocks | `EventEmitter<boolean>` | - |
5252

5353
### NzColor
5454

5555
| Parameter | Description | Type | Default |
56-
| ------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------- | ------- |
56+
|---------------|-----------------------------------------------------------------------------------|---------------------------------------------------------|---------|
5757
| `toHex` | Convert to `hex` format characters, the return type like: `1677ff` | `() => string` | - |
5858
| `toHexString` | Convert to `hex` format color string, the return type like: `#1677ff` | `() => string` | - |
5959
| `toHsb` | Convert to `hsb` object | `() => ({ h: number, s: number, b: number, a number })` | - |

‎components/color-picker/doc/index.zh-CN.md‎

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -23,41 +23,41 @@ import { NzColorPickerModule } from 'ng-zorro-antd/color-picker';
2323
npm install ng-antd-color-picker
2424
```
2525

26-
### nz-color-picker
27-
28-
| 参数 | 说明 | 类型 | 默认值 |
29-
| -------------------- | -------------------- | -------------------------------------------------- | --------- |
30-
| `[nzFormat]` | 颜色格式 | `rgb`｜`hex`｜`hsb` | `hex` |
31-
| `[nzValue]` | 颜色的值 | `string`｜`NzColor` | - |
32-
| `[nzSize]` | 设置触发器大小 | `large`｜`default`｜`small` | `default` |
33-
| `[nzDefaultValue]` | 颜色默认的值 | `string`｜`NzColor` | - |
34-
| `[nzAllowClear]` | 允许清除选择的颜色 | `boolean` | `false` |
35-
| `[nzTrigger]` | 颜色选择器的触发模式 | `hover`｜`click` | `click` |
36-
| `[nzShowText]` | 显示颜色文本 | `boolean` | `false` |
37-
| `[nzOpen]` | 是否显示弹出窗口 | `boolean` | `false` |
38-
| `[nzDisabled]` | 禁用颜色选择器 | `boolean` | `false` |
39-
| `[nzDisabledAlpha]` | 禁用透明度 | `boolean` | `false` |
40-
| `[nzTitle]` | 设置颜色选择器的标题 | `TemplateRef<void>`｜`string` | - |
41-
| `(nzOnChange)` | 颜色变化的回调 | `EventEmitter<{ color: NzColor; format: string }>` | - |
42-
| `(nzOnClear)` | 清除的回调 | `EventEmitter<boolean>` | - |
43-
| `(nzOnFormatChange)` | 颜色格式变化的回调 | `EventEmitter<'rgb'｜'hex'｜'hsb'>` | - |
44-
| `(nzOnOpenChange)` | 打开颜色面板的回调 | `EventEmitter<boolean>` | - |
45-
46-
### nz-color-block
47-
48-
| 参数 | 说明 | 类型 | 默认值 |
49-
| ------------- | ---------------- | --------------------------- | --------- |
50-
| `[nzColor]` | 模块的颜色 | `string` | `#1677ff` |
51-
| `[nzSize]` | 色彩块的大小 | `large`｜`default`｜`small` | `default` |
52-
| `[nzOnClick]` | 点击色彩块的回调 | `EventEmitter<boolean>` | - |
26+
### nz-color-picker:standalone
27+
28+
| 参数 | 说明 | 类型 | 默认值 |
29+
|----------------------|------------|----------------------------------------------------|-----------|
30+
| `[nzFormat]` | 颜色格式 | `rgb`｜`hex`｜`hsb` | `hex` |
31+
| `[nzValue]` | 颜色的值 | `string`｜`NzColor` | - |
32+
| `[nzSize]` | 设置触发器大小 | `large`｜`default`｜`small` | `default` |
33+
| `[nzDefaultValue]` | 颜色默认的值 | `string`｜`NzColor` | - |
34+
| `[nzAllowClear]` | 允许清除选择的颜色 | `boolean` | `false` |
35+
| `[nzTrigger]` | 颜色选择器的触发模式 | `hover`｜`click` | `click` |
36+
| `[nzShowText]` | 显示颜色文本 | `boolean` | `false` |
37+
| `[nzOpen]` | 是否显示弹出窗口 | `boolean` | `false` |
38+
| `[nzDisabled]` | 禁用颜色选择器 | `boolean` | `false` |
39+
| `[nzDisabledAlpha]` | 禁用透明度 | `boolean` | `false` |
40+
| `[nzTitle]` | 设置颜色选择器的标题 | `TemplateRef<void>`｜`string` | - |
41+
| `(nzOnChange)` | 颜色变化的回调 | `EventEmitter<{ color: NzColor; format: string }>` | - |
42+
| `(nzOnClear)` | 清除的回调 | `EventEmitter<boolean>` | - |
43+
| `(nzOnFormatChange)` | 颜色格式变化的回调 | `EventEmitter<'rgb'｜'hex'｜'hsb'>` | - |
44+
| `(nzOnOpenChange)` | 打开颜色面板的回调 | `EventEmitter<boolean>` | - |
45+
46+
### nz-color-block:standalone
47+
48+
| 参数 | 说明 | 类型 | 默认值 |
49+
|---------------|----------|---------------------------|-----------|
50+
| `[nzColor]` | 模块的颜色 | `string` | `#1677ff` |
51+
| `[nzSize]` | 色彩块的大小 | `large`｜`default`｜`small` | `default` |
52+
| `[nzOnClick]` | 点击色彩块的回调 | `EventEmitter<boolean>` | - |
5353

5454
### NzColor
5555

56-
| 参数 | 说明 | 类型 | 默认值 |
57-
| ------------- | -------------------------------------------------------------- | ------------------------------------------------------- | ------ |
58-
| `toHex` | 转换成 `hex` 格式字符，返回格式如：`1677ff` | `() => string` | - |
59-
| `toHexString` | 转换成 `hex` 格式颜色字符串，返回格式如：`#1677ff` | `() => string` | - |
60-
| `toHsb` | 转换成 `hsb` 对象 | `() => ({ h: number, s: number, b: number, a number })` | - |
61-
| `toHsbString` | 转换成 `hsb` 格式颜色字符串，返回格式如：`hsb(215, 91%, 100%)` | `() => string` | - |
62-
| `toRgb` | 转换成 `rgb` 对象 | `() => ({ r: number, g: number, b: number, a number })` | - |
63-
| `toRgbString` | 转换成 `rgb` 格式颜色字符串，返回格式如：`rgb(22, 119, 255)` | `() => string` | - |
56+
| 参数 | 说明 | 类型 | 默认值 |
57+
|---------------|-----------------------------------------------|---------------------------------------------------------|-----|
58+
| `toHex` | 转换成 `hex` 格式字符，返回格式如：`1677ff` | `() => string` | - |
59+
| `toHexString` | 转换成 `hex` 格式颜色字符串，返回格式如：`#1677ff` | `() => string` | - |
60+
| `toHsb` | 转换成 `hsb` 对象 | `() => ({ h: number, s: number, b: number, a number })` | - |
61+
| `toHsbString` | 转换成 `hsb` 格式颜色字符串，返回格式如：`hsb(215, 91%, 100%)` | `() => string` | - |
62+
| `toRgb` | 转换成 `rgb` 对象 | `() => ({ r: number, g: number, b: number, a number })` | - |
63+
| `toRgbString` | 转换成 `rgb` 格式颜色字符串，返回格式如：`rgb(22, 119, 255)` | `() => string` | - |

0 commit comments

Comments
 (0)