feat(module:color-picker): make color picker standalone (#8316)

fix(module:color-picker): build site failed
NG-ZORRO · Jan 17, 2024 · b050474 · b050474
1 parent 0a37cad
commit b050474
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 75 deletions.
diff --git a/components/color-picker/color-block.component.ts b/components/color-picker/color-block.component.ts
@@ -5,14 +5,16 @@
 
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 
-import { defaultColor } from 'ng-antd-color-picker';
+import { defaultColor, NgAntdColorPickerModule } from 'ng-antd-color-picker';
 
 import { NzSizeLDSType } from 'ng-zorro-antd/core/types';
 
 @Component({
   selector: 'nz-color-block',
   exportAs: 'NzColorBlock',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [NgAntdColorPickerModule],
   template: ` <ng-antd-color-block [color]="nzColor" (nzOnClick)="nzOnClick.emit($event)"></ng-antd-color-block> `,
   host: {
     class: 'ant-color-picker-inline',

diff --git a/components/color-picker/color-format.component.ts b/components/color-picker/color-format.component.ts
@@ -14,20 +14,33 @@ import {
   Output,
   SimpleChanges
 } from '@angular/core';
-import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, ValidatorFn } from '@angular/forms';
+import {
+  AbstractControl,
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  ValidationErrors,
+  ValidatorFn
+} from '@angular/forms';
 import { Subject } from 'rxjs';
 import { debounceTime, filter, takeUntil } from 'rxjs/operators';
 
 import { generateColor } from 'ng-antd-color-picker';
 
 import { InputBoolean } from 'ng-zorro-antd/core/util';
+import { NzInputDirective, NzInputGroupComponent } from 'ng-zorro-antd/input';
+import { NzInputNumberComponent } from 'ng-zorro-antd/input-number';
+import { NzSelectModule } from 'ng-zorro-antd/select';
 
 import { NzColorPickerFormatType } from './typings';
 
 @Component({
   selector: 'nz-color-format',
   exportAs: 'NzColorFormat',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [ReactiveFormsModule, NzSelectModule, NzInputDirective, NzInputGroupComponent, NzInputNumberComponent],
   template: `
     <div [formGroup]="validateForm" class="ant-color-picker-input-container">
       <div class="ant-color-picker-format-select">

diff --git a/components/color-picker/color-picker.component.ts b/components/color-picker/color-picker.component.ts
@@ -3,6 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { NgTemplateOutlet } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -21,17 +22,28 @@ import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/f
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
-import { defaultColor, generateColor } from 'ng-antd-color-picker';
+import { defaultColor, generateColor, NgAntdColorPickerModule } from 'ng-antd-color-picker';
 
 import { BooleanInput, NzSafeAny, NzSizeLDSType } from 'ng-zorro-antd/core/types';
 import { InputBoolean, isNonEmptyString, isTemplateRef } from 'ng-zorro-antd/core/util';
+import { NzPopoverDirective } from 'ng-zorro-antd/popover';
 
+import { NzColorBlockComponent } from './color-block.component';
+import { NzColorFormatComponent } from './color-format.component';
 import { NzColor, NzColorPickerFormatType, NzColorPickerTriggerType } from './typings';
 
 @Component({
   selector: 'nz-color-picker',
   exportAs: 'NzColorPicker',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    NgAntdColorPickerModule,
+    NzPopoverDirective,
+    NzColorBlockComponent,
+    NzColorFormatComponent,
+    NgTemplateOutlet
+  ],
   template: `
     <div
       [class.ant-color-picker-trigger]="!nzFlipFlop"
@@ -63,7 +75,7 @@ import { NzColor, NzColorPickerFormatType, NzColorPickerTriggerType } from './ty
         [panelRenderFooter]="nzPanelRenderFooter"
         [disabledAlpha]="nzDisabledAlpha"
         (nzOnChange)="colorChange($event)"
-      ></ng-antd-color-picker>
+      />
     </ng-template>
     <ng-template #nzPanelRenderHeader>
       @if (nzTitle || nzAllowClear) {
@@ -90,7 +102,7 @@ import { NzColor, NzColorPickerFormatType, NzColorPickerTriggerType } from './ty
         [nzDisabledAlpha]="nzDisabledAlpha"
         (formatChange)="formatChange($event)"
         (nzOnFormatChange)="nzOnFormatChange.emit($event)"
-      ></nz-color-format>
+      />
     </ng-template>
   `,
   host: {

diff --git a/components/color-picker/color-picker.module.ts b/components/color-picker/color-picker.module.ts
@@ -3,33 +3,14 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-
-import { NgAntdColorPickerModule } from 'ng-antd-color-picker';
-
-import { NzInputModule } from 'ng-zorro-antd/input';
-import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
-import { NzPopoverModule } from 'ng-zorro-antd/popover';
-import { NzSelectModule } from 'ng-zorro-antd/select';
 
 import { NzColorBlockComponent } from './color-block.component';
 import { NzColorFormatComponent } from './color-format.component';
 import { NzColorPickerComponent } from './color-picker.component';
 
 @NgModule({
-  declarations: [NzColorPickerComponent, NzColorBlockComponent, NzColorFormatComponent],
-  imports: [
-    CommonModule,
-    NgAntdColorPickerModule,
-    NzPopoverModule,
-    NzSelectModule,
-    FormsModule,
-    NzInputNumberModule,
-    NzInputModule,
-    ReactiveFormsModule
-  ],
+  imports: [NzColorPickerComponent, NzColorBlockComponent, NzColorFormatComponent],
   exports: [NzColorPickerComponent, NzColorBlockComponent]
 })
 export class NzColorPickerModule {}
diff --git a/components/color-picker/doc/index.en-US.md b/components/color-picker/doc/index.en-US.md
@@ -22,38 +22,38 @@ Install `ng-antd-color-picker` in your project first:
 npm install ng-antd-color-picker
 ```
 
-### nz-color-picker
+### nz-color-picker:standalone
 
 | Parameter            | Description                           | Type                                               | Default   |
-| -------------------- | ------------------------------------- | -------------------------------------------------- | --------- |
-| `[nzFormat]`         | Format of color                       | `rgb`｜`hex`｜`hsb`                                | `hex`     |
-| `[nzValue]`          | Value of color                        | `string`｜`NzColor`                                | -         |
-| `[nzSize]`           | Setting the trigger size              | `large`｜`default`｜`small`                        | `default` |
-| `[nzDefaultValue]`   | Default value of color                | `string`｜`NzColor`                                | `false`   |
+|----------------------|---------------------------------------|----------------------------------------------------|-----------|
+| `[nzFormat]`         | Format of color                       | `rgb`｜`hex`｜`hsb`                                  | `hex`     |
+| `[nzValue]`          | Value of color                        | `string`｜`NzColor`                                 | -         |
+| `[nzSize]`           | Setting the trigger size              | `large`｜`default`｜`small`                          | `default` |
+| `[nzDefaultValue]`   | Default value of color                | `string`｜`NzColor`                                 | `false`   |
 | `[nzAllowClear]`     | Allow clearing color selected         | `boolean`                                          | `false`   |
-| `[nzTrigger]`        | ColorPicker trigger mode              | `hover`｜`click`                                   | `click`   |
+| `[nzTrigger]`        | ColorPicker trigger mode              | `hover`｜`click`                                    | `click`   |
 | `[nzShowText]`       | Show color text                       | `boolean`                                          | `false`   |
 | `[nzOpen]`           | Whether to show popups                | `boolean`                                          | `false`   |
 | `[nzDisabled]`       | Disable ColorPicker                   | `boolean`                                          | `false`   |
 | `[nzDisabledAlpha]`  | Disable Alpha                         | `boolean`                                          | `false`   |
-| `[nzTitle]`          | Setting the title of the color picker | `TemplateRef<void>`｜`string`                      | -         |
+| `[nzTitle]`          | Setting the title of the color picker | `TemplateRef<void>`｜`string`                       | -         |
 | `(nzOnChange)`       | Callback when value is changed        | `EventEmitter<{ color: NzColor; format: string }>` | -         |
 | `(nzOnClear)`        | Called when clear                     | `EventEmitter<boolean>`                            | -         |
-| `(nzOnFormatChange)` | Callback when `format` is changed     | `EventEmitter<'rgb'｜'hex'｜'hsb'>`                | -         |
+| `(nzOnFormatChange)` | Callback when `format` is changed     | `EventEmitter<'rgb'｜'hex'｜'hsb'>`                  | -         |
 | `(nzOnOpenChange)`   | Callback for opening the color panel  | `EventEmitter<boolean>`                            | -         |
 
-### nz-color-block
+### nz-color-block:standalone
 
-| Parameter     | Description                            | Type                        | Default   |
-| ------------- | -------------------------------------- | --------------------------- | --------- |
-| `[nzColor]`   | Module colors                          | `string`                    | `#1677ff` |
+| Parameter     | Description                            | Type                      | Default   |
+|---------------|----------------------------------------|---------------------------|-----------|
+| `[nzColor]`   | Module colors                          | `string`                  | `#1677ff` |
 | `[nzSize]`    | Color block size                       | `large`｜`default`｜`small` | `default` |
-| `[nzOnClick]` | Callbacks for clicking on color blocks | `EventEmitter<boolean>`     | -         |
+| `[nzOnClick]` | Callbacks for clicking on color blocks | `EventEmitter<boolean>`   | -         |
 
 ### NzColor
 
 | Parameter     | Description                                                                       | Type                                                    | Default |
-| ------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------- | ------- |
+|---------------|-----------------------------------------------------------------------------------|---------------------------------------------------------|---------|
 | `toHex`       | Convert to `hex` format characters, the return type like: `1677ff`                | `() => string`                                          | -       |
 | `toHexString` | Convert to `hex` format color string, the return type like: `#1677ff`             | `() => string`                                          | -       |
 | `toHsb`       | Convert to `hsb` object                                                           | `() => ({ h: number, s: number, b: number, a number })` | -       |

diff --git a/components/color-picker/doc/index.zh-CN.md b/components/color-picker/doc/index.zh-CN.md
@@ -23,41 +23,41 @@ import { NzColorPickerModule } from 'ng-zorro-antd/color-picker';
 npm install ng-antd-color-picker
 ```
 
-### nz-color-picker
-
-| 参数                 | 说明                 | 类型                                               | 默认值    |
-| -------------------- | -------------------- | -------------------------------------------------- | --------- |
-| `[nzFormat]`         | 颜色格式             | `rgb`｜`hex`｜`hsb`                                | `hex`     |
-| `[nzValue]`          | 颜色的值             | `string`｜`NzColor`                                | -         |
-| `[nzSize]`           | 设置触发器大小       | `large`｜`default`｜`small`                        | `default` |
-| `[nzDefaultValue]`   | 颜色默认的值         | `string`｜`NzColor`                                | -         |
-| `[nzAllowClear]`     | 允许清除选择的颜色   | `boolean`                                          | `false`   |
-| `[nzTrigger]`        | 颜色选择器的触发模式 | `hover`｜`click`                                   | `click`   |
-| `[nzShowText]`       | 显示颜色文本         | `boolean`                                          | `false`   |
-| `[nzOpen]`           | 是否显示弹出窗口     | `boolean`                                          | `false`   |
-| `[nzDisabled]`       | 禁用颜色选择器       | `boolean`                                          | `false`   |
-| `[nzDisabledAlpha]`  | 禁用透明度           | `boolean`                                          | `false`   |
-| `[nzTitle]`          | 设置颜色选择器的标题 | `TemplateRef<void>`｜`string`                      | -         |
-| `(nzOnChange)`       | 颜色变化的回调       | `EventEmitter<{ color: NzColor; format: string }>` | -         |
-| `(nzOnClear)`        | 清除的回调           | `EventEmitter<boolean>`                            | -         |
-| `(nzOnFormatChange)` | 颜色格式变化的回调   | `EventEmitter<'rgb'｜'hex'｜'hsb'>`                | -         |
-| `(nzOnOpenChange)`   | 打开颜色面板的回调   | `EventEmitter<boolean>`                            | -         |
-
-### nz-color-block
-
-| 参数          | 说明             | 类型                        | 默认值    |
-| ------------- | ---------------- | --------------------------- | --------- |
-| `[nzColor]`   | 模块的颜色       | `string`                    | `#1677ff` |
-| `[nzSize]`    | 色彩块的大小     | `large`｜`default`｜`small` | `default` |
-| `[nzOnClick]` | 点击色彩块的回调 | `EventEmitter<boolean>`     | -         |
+### nz-color-picker:standalone
+
+| 参数                   | 说明         | 类型                                                 | 默认值       |
+|----------------------|------------|----------------------------------------------------|-----------|
+| `[nzFormat]`         | 颜色格式       | `rgb`｜`hex`｜`hsb`                                  | `hex`     |
+| `[nzValue]`          | 颜色的值       | `string`｜`NzColor`                                 | -         |
+| `[nzSize]`           | 设置触发器大小    | `large`｜`default`｜`small`                          | `default` |
+| `[nzDefaultValue]`   | 颜色默认的值     | `string`｜`NzColor`                                 | -         |
+| `[nzAllowClear]`     | 允许清除选择的颜色  | `boolean`                                          | `false`   |
+| `[nzTrigger]`        | 颜色选择器的触发模式 | `hover`｜`click`                                    | `click`   |
+| `[nzShowText]`       | 显示颜色文本     | `boolean`                                          | `false`   |
+| `[nzOpen]`           | 是否显示弹出窗口   | `boolean`                                          | `false`   |
+| `[nzDisabled]`       | 禁用颜色选择器    | `boolean`                                          | `false`   |
+| `[nzDisabledAlpha]`  | 禁用透明度      | `boolean`                                          | `false`   |
+| `[nzTitle]`          | 设置颜色选择器的标题 | `TemplateRef<void>`｜`string`                       | -         |
+| `(nzOnChange)`       | 颜色变化的回调    | `EventEmitter<{ color: NzColor; format: string }>` | -         |
+| `(nzOnClear)`        | 清除的回调      | `EventEmitter<boolean>`                            | -         |
+| `(nzOnFormatChange)` | 颜色格式变化的回调  | `EventEmitter<'rgb'｜'hex'｜'hsb'>`                  | -         |
+| `(nzOnOpenChange)`   | 打开颜色面板的回调  | `EventEmitter<boolean>`                            | -         |
+
+### nz-color-block:standalone
+
+| 参数            | 说明       | 类型                        | 默认值       |
+|---------------|----------|---------------------------|-----------|
+| `[nzColor]`   | 模块的颜色    | `string`                  | `#1677ff` |
+| `[nzSize]`    | 色彩块的大小   | `large`｜`default`｜`small` | `default` |
+| `[nzOnClick]` | 点击色彩块的回调 | `EventEmitter<boolean>`   | -         |
 
 ### NzColor
 
-| 参数          | 说明                                                           | 类型                                                    | 默认值 |
-| ------------- | -------------------------------------------------------------- | ------------------------------------------------------- | ------ |
-| `toHex`       | 转换成 `hex` 格式字符，返回格式如：`1677ff`                    | `() => string`                                          | -      |
-| `toHexString` | 转换成 `hex` 格式颜色字符串，返回格式如：`#1677ff`             | `() => string`                                          | -      |
-| `toHsb`       | 转换成 `hsb` 对象                                              | `() => ({ h: number, s: number, b: number, a number })` | -      |
-| `toHsbString` | 转换成 `hsb` 格式颜色字符串，返回格式如：`hsb(215, 91%, 100%)` | `() => string`                                          | -      |
-| `toRgb`       | 转换成 `rgb` 对象                                              | `() => ({ r: number, g: number, b: number, a number })` | -      |
-| `toRgbString` | 转换成 `rgb` 格式颜色字符串，返回格式如：`rgb(22, 119, 255)`   | `() => string`                                          | -      |
+| 参数            | 说明                                            | 类型                                                      | 默认值 |
+|---------------|-----------------------------------------------|---------------------------------------------------------|-----|
+| `toHex`       | 转换成 `hex` 格式字符，返回格式如：`1677ff`                 | `() => string`                                          | -   |
+| `toHexString` | 转换成 `hex` 格式颜色字符串，返回格式如：`#1677ff`             | `() => string`                                          | -   |
+| `toHsb`       | 转换成 `hsb` 对象                                  | `() => ({ h: number, s: number, b: number, a number })` | -   |
+| `toHsbString` | 转换成 `hsb` 格式颜色字符串，返回格式如：`hsb(215, 91%, 100%)` | `() => string`                                          | -   |
+| `toRgb`       | 转换成 `rgb` 对象                                  | `() => ({ r: number, g: number, b: number, a number })` | -   |
+| `toRgbString` | 转换成 `rgb` 格式颜色字符串，返回格式如：`rgb(22, 119, 255)`   | `() => string`                                          | -   |