feat(module:description): support standalone component (#8262)

NG-ZORRO · Dec 4, 2023 · 128f4c0 · 128f4c0
1 parent d21f8a1
commit 128f4c0
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 43 deletions.
diff --git a/components/descriptions/descriptions-item.component.ts b/components/descriptions/descriptions-item.component.ts
@@ -28,7 +28,8 @@ import { InputNumber } from 'ng-zorro-antd/core/util';
     </ng-template>
   `,
   exportAs: 'nzDescriptionsItem',
-  preserveWhitespaces: false
+  preserveWhitespaces: false,
+  standalone: true
 })
 export class NzDescriptionsItemComponent implements OnChanges, OnDestroy {
   static ngAcceptInputType_nzSpan: NumberInput;

diff --git a/components/descriptions/descriptions.component.ts b/components/descriptions/descriptions.component.ts
@@ -4,6 +4,7 @@
  */
 
 import { Direction, Directionality } from '@angular/cdk/bidi';
+import { NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,
@@ -25,6 +26,7 @@ import { auditTime, startWith, switchMap, takeUntil, tap } from 'rxjs/operators'
 
 import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
 import { warn } from 'ng-zorro-antd/core/logger';
+import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
 import { gridResponsiveMap, NzBreakpointEnum, NzBreakpointService } from 'ng-zorro-antd/core/services';
 import { BooleanInput } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
@@ -155,7 +157,9 @@ const defaultColumnMap: { [key in NzBreakpointEnum]: number } = {
     '[class.ant-descriptions-middle]': 'nzSize === "middle"',
     '[class.ant-descriptions-small]': 'nzSize === "small"',
     '[class.ant-descriptions-rtl]': 'dir === "rtl"'
-  }
+  },
+  imports: [NgIf, NzOutletModule, NgForOf, NgTemplateOutlet],
+  standalone: true
 })
 export class NzDescriptionsComponent implements OnChanges, OnDestroy, AfterContentInit, OnInit {
   readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;

diff --git a/components/descriptions/descriptions.module.ts b/components/descriptions/descriptions.module.ts
@@ -3,19 +3,13 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { BidiModule } from '@angular/cdk/bidi';
-import { PlatformModule } from '@angular/cdk/platform';
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
-
 import { NzDescriptionsItemComponent } from './descriptions-item.component';
 import { NzDescriptionsComponent } from './descriptions.component';
 
 @NgModule({
-  imports: [BidiModule, CommonModule, NzOutletModule, PlatformModule],
-  declarations: [NzDescriptionsComponent, NzDescriptionsItemComponent],
+  imports: [NzDescriptionsComponent, NzDescriptionsItemComponent],
   exports: [NzDescriptionsComponent, NzDescriptionsItemComponent]
 })
 export class NzDescriptionsModule {}
diff --git a/components/descriptions/doc/index.en-US.md b/components/descriptions/doc/index.en-US.md
@@ -18,20 +18,20 @@ import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
 
 ## API
 
-### nz-descriptions
-
-| Property | Description | Type | Default | Global Config |
-| -------- | ----------- | ---- | ------- | ------------- |
-| `[nzTitle]` | Describe the title of the list, displayed at the top | `string\|TemplateRef<void>` | `false` |
-| `[nzExtra]` | The action area of the description list, placed at the top-right | `string\|TemplateRef<void>` | `-` |
-| `[nzBordered]` | Whether to display the border | `boolean` | `false` | ✅ |
-| `[nzColumn]` | The number of `nz-descriptions-item` in a row. It could be a number or a object like `{ xs: 8, sm: 16, md: 24}` | `number\|object` | `{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }` | ✅ |
-| `[nzSize]` | Set the size of the list. Only works when `nzBordered` is set | `'default' \| 'middle' \| 'small'` | `'default'` | ✅ |
-| `[nzColon]` | Show colon after title | `boolean` | `true` | ✅ |
-
-### nz-descriptions-item
-
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| `[nzTitle]` | Description of the content | `boolean` | `string\|TemplateRef<void>` |
-| `[nzSpan]` | The number of columns included | `number` | `1` |
+### nz-descriptions:standalone
+
+| Property       | Description                                                                                                     | Type                               | Default                                         | Global Config |
+| -------------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------- | ------------- |
+| `[nzTitle]`    | Describe the title of the list, displayed at the top                                                            | `string\|TemplateRef<void>`        | `false`                                         |
+| `[nzExtra]`    | The action area of the description list, placed at the top-right                                                | `string\|TemplateRef<void>`        | `-`                                             |
+| `[nzBordered]` | Whether to display the border                                                                                   | `boolean`                          | `false`                                         | ✅            |
+| `[nzColumn]`   | The number of `nz-descriptions-item` in a row. It could be a number or a object like `{ xs: 8, sm: 16, md: 24}` | `number\|object`                   | `{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }` | ✅            |
+| `[nzSize]`     | Set the size of the list. Only works when `nzBordered` is set                                                   | `'default' \| 'middle' \| 'small'` | `'default'`                                     | ✅            |
+| `[nzColon]`    | Show colon after title                                                                                          | `boolean`                          | `true`                                          | ✅            |
+
+### nz-descriptions-item:standalone
+
+| Property    | Description                    | Type      | Default                     |
+| ----------- | ------------------------------ | --------- | --------------------------- |
+| `[nzTitle]` | Description of the content     | `boolean` | `string\|TemplateRef<void>` |
+| `[nzSpan]`  | The number of columns included | `number`  | `1`                         |
diff --git a/components/descriptions/doc/index.zh-CN.md b/components/descriptions/doc/index.zh-CN.md
@@ -19,20 +19,20 @@ import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
 
 ## API
 
-### nz-descriptions
-
-| 参数 | 说明 | 类型 | 默认值 | 支持全局配置 |
-| -------- | ----------- | ---- | ------- | --- |
-| `[nzTitle]` | 描述列表的标题，显示在最顶部 | `string\|TemplateRef<void>` | `false` |
-| `[nzExtra]` | 描述列表的操作区域，显示在右上方 | `string\|TemplateRef<void>` | `-` |
-| `[nzBordered]` | 是否展示边框 | `boolean` | `false` | ✅ |
-| `[nzColumn]` | 一行的 `nz-descriptions-item` 的数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | `number\|object` | `{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }` | ✅ |
-| `[nzSize]` | 设置列表的大小（只有设置 `nzBordered` 时生效） | `'default' \| 'middle' \| 'small'` | `'default'` | ✅ |
-| `[nzColon]` | 在标题后显示冒号 | `boolean` | `true` | ✅ |
-
-### nz-descriptions-item
-
-| 参数 | 说明 | 类型 | 默认值 |
-| -------- | ----------- | ---- | ------- |
-| `[nzTitle]` | 内容的描述 | `string\|TemplateRef<void>` | - |
-| `[nzSpan]` | 包含列的数量 | `number` | `1` |
+### nz-descriptions:standalone
+
+| 参数           | 说明                                                                                                  | 类型                               | 默认值                                          | 支持全局配置 |
+| -------------- | ----------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------- | ------------ |
+| `[nzTitle]`    | 描述列表的标题，显示在最顶部                                                                          | `string\|TemplateRef<void>`        | `false`                                         |
+| `[nzExtra]`    | 描述列表的操作区域，显示在右上方                                                                      | `string\|TemplateRef<void>`        | `-`                                             |
+| `[nzBordered]` | 是否展示边框                                                                                          | `boolean`                          | `false`                                         | ✅           |
+| `[nzColumn]`   | 一行的 `nz-descriptions-item` 的数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | `number\|object`                   | `{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }` | ✅           |
+| `[nzSize]`     | 设置列表的大小（只有设置 `nzBordered` 时生效）                                                        | `'default' \| 'middle' \| 'small'` | `'default'`                                     | ✅           |
+| `[nzColon]`    | 在标题后显示冒号                                                                                      | `boolean`                          | `true`                                          | ✅           |
+
+### nz-descriptions-item:standalone
+
+| 参数        | 说明         | 类型                        | 默认值 |
+| ----------- | ------------ | --------------------------- | ------ |
+| `[nzTitle]` | 内容的描述   | `string\|TemplateRef<void>` | -      |
+| `[nzSpan]`  | 包含列的数量 | `number`                    | `1`    |