feat(module:checkbox): support standalone component (#8269)

ParsaArvanehPA · web-flow · commit 1491fb3523ab · 2023-12-05T00:58:52.000+08:00
diff --git a/components/checkbox/checkbox-group.component.ts b/components/checkbox/checkbox-group.component.ts
@@ -5,6 +5,7 @@
 
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { Direction, Directionality } from '@angular/cdk/bidi';
+import { NgForOf } from '@angular/common';
 import {
   ChangeDetectorRef,
   Component,
@@ -23,6 +24,8 @@ import { takeUntil } from 'rxjs/operators';
 import { BooleanInput, OnChangeType, OnTouchedType } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
 
+import { NzCheckboxComponent } from './checkbox.component';
+
 export interface NzCheckBoxOptionInterface {
   label: string;
   value: string;
@@ -57,7 +60,9 @@ export interface NzCheckBoxOptionInterface {
   host: {
     class: 'ant-checkbox-group',
     '[class.ant-checkbox-group-rtl]': `dir === 'rtl'`
-  }
+  },
+  imports: [NgForOf, NzCheckboxComponent],
+  standalone: true
 })
 export class NzCheckboxGroupComponent implements ControlValueAccessor, OnInit, OnDestroy {
   static ngAcceptInputType_nzDisabled: BooleanInput;
diff --git a/components/checkbox/checkbox-wrapper.component.ts b/components/checkbox/checkbox-wrapper.component.ts
@@ -18,7 +18,8 @@ import { NzCheckboxComponent } from './checkbox.component';
   template: ` <ng-content></ng-content> `,
   host: {
     class: 'ant-checkbox-group'
-  }
+  },
+  standalone: true
 })
 export class NzCheckboxWrapperComponent {
   @Output() readonly nzOnChange = new EventEmitter<NzSafeAny[]>();
diff --git a/components/checkbox/checkbox.component.ts b/components/checkbox/checkbox.component.ts
@@ -22,7 +22,7 @@ import {
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { fromEvent, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -72,7 +72,9 @@ import { NzCheckboxWrapperComponent } from './checkbox-wrapper.component';
     '[class.ant-checkbox-wrapper-in-form-item]': '!!nzFormStatusService',
     '[class.ant-checkbox-wrapper-checked]': 'nzChecked',
     '[class.ant-checkbox-rtl]': `dir === 'rtl'`
-  }
+  },
+  imports: [FormsModule],
+  standalone: true
 })
 export class NzCheckboxComponent implements OnInit, ControlValueAccessor, OnDestroy, AfterViewInit {
   static ngAcceptInputType_nzAutoFocus: BooleanInput;
diff --git a/components/checkbox/checkbox.module.ts b/components/checkbox/checkbox.module.ts
@@ -3,19 +3,14 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { A11yModule } from '@angular/cdk/a11y';
-import { BidiModule } from '@angular/cdk/bidi';
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
 
 import { NzCheckboxGroupComponent } from './checkbox-group.component';
 import { NzCheckboxWrapperComponent } from './checkbox-wrapper.component';
 import { NzCheckboxComponent } from './checkbox.component';
 
 @NgModule({
-  imports: [BidiModule, CommonModule, FormsModule, A11yModule],
-  declarations: [NzCheckboxComponent, NzCheckboxGroupComponent, NzCheckboxWrapperComponent],
+  imports: [NzCheckboxComponent, NzCheckboxGroupComponent, NzCheckboxWrapperComponent],
   exports: [NzCheckboxComponent, NzCheckboxGroupComponent, NzCheckboxWrapperComponent]
 })
 export class NzCheckboxModule {}
diff --git a/components/checkbox/doc/index.en-US.md b/components/checkbox/doc/index.en-US.md
@@ -18,37 +18,37 @@ import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
 
 ## API
 
-### [nz-checkbox]
+### [nz-checkbox]:standalone
 
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| `[nzId]` | input id attribute inside the component| `string` | - |
-| `[nzAutoFocus]` | get focus when component mounted | `boolean` | `false` |
-| `[nzDisabled]` | Disable checkbox | `boolean` | `false` |
-| `[ngModel]` | Specifies whether the checkbox is selected, double binding | `boolean` | `false` |
-| `[nzIndeterminate]` | set the status of indeterminate，only affect the style | `boolean` | `false` |
-| `[nzValue]` | use for the callback of `nz-checkbox-wrapper` | `any` | - |
-| `(ngModelChange)` | The callback function that is triggered when the state changes. | `EventEmitter<boolean>` | - |
+| Property            | Description                                                     | Type                    | Default |
+| ------------------- | --------------------------------------------------------------- | ----------------------- | ------- |
+| `[nzId]`            | input id attribute inside the component                         | `string`                | -       |
+| `[nzAutoFocus]`     | get focus when component mounted                                | `boolean`               | `false` |
+| `[nzDisabled]`      | Disable checkbox                                                | `boolean`               | `false` |
+| `[ngModel]`         | Specifies whether the checkbox is selected, double binding      | `boolean`               | `false` |
+| `[nzIndeterminate]` | set the status of indeterminate，only affect the style          | `boolean`               | `false` |
+| `[nzValue]`         | use for the callback of `nz-checkbox-wrapper`                   | `any`                   | -       |
+| `(ngModelChange)`   | The callback function that is triggered when the state changes. | `EventEmitter<boolean>` | -       |
 
-### nz-checkbox-group
+### nz-checkbox-group:standalone
 
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| `[ngModel]` | Specifies options, double binding |  `Array<{ label: string; value: string; checked?: boolean; }>` | `[]` |
-| `[nzDisabled]` | Disable all checkboxes | `boolean` | `false` |
-| `(ngModelChange)` | The callback function that is triggered when the state changes. | `EventEmitter<Array<{ label: string; value: string; checked?: boolean; }>>` | - |
+| Property          | Description                                                     | Type                                                                        | Default |
+| ----------------- | --------------------------------------------------------------- | --------------------------------------------------------------------------- | ------- |
+| `[ngModel]`       | Specifies options, double binding                               | `Array<{ label: string; value: string; checked?: boolean; }>`               | `[]`    |
+| `[nzDisabled]`    | Disable all checkboxes                                          | `boolean`                                                                   | `false` |
+| `(ngModelChange)` | The callback function that is triggered when the state changes. | `EventEmitter<Array<{ label: string; value: string; checked?: boolean; }>>` | -       |
 
-### nz-checkbox-wrapper
+### nz-checkbox-wrapper:standalone
 
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| `(nzOnChange)` | The callback function that is triggered when the state changes. | `EventEmitter<any[]>` | - |
+| Property       | Description                                                     | Type                  | Default |
+| -------------- | --------------------------------------------------------------- | --------------------- | ------- |
+| `(nzOnChange)` | The callback function that is triggered when the state changes. | `EventEmitter<any[]>` | -       |
 
 ## Methods
 
-### [nz-checkbox]
+### [nz-checkbox]:standalone
 
-| Name | Description |
-| ---- | ----------- |
-| focus() | get focus |
-| blur() | remove focus |
+| Name    | Description  |
+| ------- | ------------ |
+| focus() | get focus    |
+| blur()  | remove focus |
diff --git a/components/checkbox/doc/index.zh-CN.md b/components/checkbox/doc/index.zh-CN.md
@@ -19,40 +19,39 @@ import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
 
 ## API
 
-### [nz-checkbox]
+### [nz-checkbox]:standalone
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| `[nzId]` | 组件内部 input 的 id 值 | `string` | - |
-| `[nzAutoFocus]` | 自动获取焦点 | `boolean` | `false` |
-| `[nzDisabled]` | 设定 disable 状态 | `boolean` | `false` |
-| `[ngModel]` | 指定当前是否选中，可双向绑定 | `boolean` | `false` |
-| `[nzIndeterminate]` | 设置 indeterminate 状态，只负责样式控制 | `boolean` | `false` |
-| `[nzValue]` | 仅与 `nz-checkbox-wrapper` 的选中回调配合使用 | `any` | - |
-| `(ngModelChange)` | 选中变化时回调 | `EventEmitter<boolean>` | - |
+| 参数                | 说明                                          | 类型                    | 默认值  |
+| ------------------- | --------------------------------------------- | ----------------------- | ------- |
+| `[nzId]`            | 组件内部 input 的 id 值                       | `string`                | -       |
+| `[nzAutoFocus]`     | 自动获取焦点                                  | `boolean`               | `false` |
+| `[nzDisabled]`      | 设定 disable 状态                             | `boolean`               | `false` |
+| `[ngModel]`         | 指定当前是否选中，可双向绑定                  | `boolean`               | `false` |
+| `[nzIndeterminate]` | 设置 indeterminate 状态，只负责样式控制       | `boolean`               | `false` |
+| `[nzValue]`         | 仅与 `nz-checkbox-wrapper` 的选中回调配合使用 | `any`                   | -       |
+| `(ngModelChange)`   | 选中变化时回调                                | `EventEmitter<boolean>` | -       |
 
-### nz-checkbox-group
+### nz-checkbox-group:standalone
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| `[ngModel]` | 指定可选项，可双向绑定 | `Array<{ label: string; value: string; checked?: boolean; }>` | `[]` |
-| `[nzDisabled]` | 设定全部 checkbox disable 状态 | `boolean` | `false` |
-| `(ngModelChange)` | 选中数据变化时的回调 | `EventEmitter<Array<{ label: string; value: string; checked?: boolean; }>>` | - |
+| 参数              | 说明                           | 类型                                                                        | 默认值  |
+| ----------------- | ------------------------------ | --------------------------------------------------------------------------- | ------- |
+| `[ngModel]`       | 指定可选项，可双向绑定         | `Array<{ label: string; value: string; checked?: boolean; }>`               | `[]`    |
+| `[nzDisabled]`    | 设定全部 checkbox disable 状态 | `boolean`                                                                   | `false` |
+| `(ngModelChange)` | 选中数据变化时的回调           | `EventEmitter<Array<{ label: string; value: string; checked?: boolean; }>>` | -       |
 
+### nz-checkbox-wrapper:standalone
 
-### nz-checkbox-wrapper
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| `(nzOnChange)` | 选中数据变化时的回调 | `EventEmitter<any[]>` | - |
+| 参数           | 说明                 | 类型                  | 默认值 |
+| -------------- | -------------------- | --------------------- | ------ |
+| `(nzOnChange)` | 选中数据变化时的回调 | `EventEmitter<any[]>` | -      |
 
 ## 方法
 
-### [nz-checkbox]
+### [nz-checkbox]:standalone
 
-通过ViewChild或其他方式获得 `nz-checkbox` 实例
+通过 ViewChild 或其他方式获得 `nz-checkbox` 实例
 
-| 名称 | 描述 |
-| ---- | ----------- |
+| 名称    | 描述     |
+| ------- | -------- |
 | focus() | 获取焦点 |
-| blur() | 移除焦点 |
+| blur()  | 移除焦点 |
