feat(module:card): component support standalone (#8273)

* feat(module:card): support standalone component * feat(module:card): support standalone component
NG-ZORRO · Dec 4, 2023 · 0902a4b · 0902a4b
1 parent c5df26f
commit 0902a4b
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 69 deletions.
diff --git a/components/card/card-grid.directive.ts b/components/card/card-grid.directive.ts
@@ -14,7 +14,8 @@ import { InputBoolean } from 'ng-zorro-antd/core/util';
   host: {
     class: 'ant-card-grid',
     '[class.ant-card-hoverable]': 'nzHoverable'
-  }
+  },
+  standalone: true
 })
 export class NzCardGridDirective {
   static ngAcceptInputType_nzHoverable: BooleanInput;

diff --git a/components/card/card-loading.component.ts b/components/card/card-loading.component.ts
@@ -3,6 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { NgClass, NgForOf } from '@angular/common';
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
@@ -24,7 +25,9 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
-  host: { class: 'ant-card-loading-content' }
+  host: { class: 'ant-card-loading-content' },
+  imports: [NgForOf, NgClass],
+  standalone: true
 })
 export class NzCardLoadingComponent {
   listOfLoading: string[][] = [

diff --git a/components/card/card-meta.component.ts b/components/card/card-meta.component.ts
@@ -3,8 +3,11 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { NgIf, NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
 
+import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
+
 @Component({
   selector: 'nz-card-meta',
   exportAs: 'nzCardMeta',
@@ -24,7 +27,9 @@ import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulati
       </div>
     </div>
   `,
-  host: { class: 'ant-card-meta' }
+  host: { class: 'ant-card-meta' },
+  imports: [NgIf, NgTemplateOutlet, NzOutletModule],
+  standalone: true
 })
 export class NzCardMetaComponent {
   @Input() nzTitle: string | TemplateRef<void> | null = null;

diff --git a/components/card/card-tab.component.ts b/components/card/card-tab.component.ts
@@ -14,7 +14,8 @@ import { ChangeDetectionStrategy, Component, TemplateRef, ViewChild, ViewEncapsu
     <ng-template>
       <ng-content></ng-content>
     </ng-template>
-  `
+  `,
+  standalone: true
 })
 export class NzCardTabComponent {
   @ViewChild(TemplateRef, { static: true }) template!: TemplateRef<void>;

diff --git a/components/card/card.component.ts b/components/card/card.component.ts
@@ -4,6 +4,7 @@
  */
 
 import { Direction, Directionality } from '@angular/cdk/bidi';
+import { NgForOf, NgIf, NgStyle, NgTemplateOutlet } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -22,10 +23,12 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
+import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
 import { BooleanInput, NgStyleInterface, NzSizeDSType } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
 
 import { NzCardGridDirective } from './card-grid.directive';
+import { NzCardLoadingComponent } from './card-loading.component';
 import { NzCardTabComponent } from './card-tab.component';
 
 const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'card';
@@ -77,7 +80,9 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'card';
     '[class.ant-card-type-inner]': 'nzType === "inner"',
     '[class.ant-card-contain-tabs]': '!!listOfNzCardTabComponent',
     '[class.ant-card-rtl]': `dir === 'rtl'`
-  }
+  },
+  imports: [NgIf, NzOutletModule, NgTemplateOutlet, NgStyle, NzCardLoadingComponent, NgForOf],
+  standalone: true
 })
 export class NzCardComponent implements OnDestroy, OnInit {
   readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;

diff --git a/components/card/card.module.ts b/components/card/card.module.ts
@@ -4,20 +4,16 @@
  */
 
 import { BidiModule } from '@angular/cdk/bidi';
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
-
 import { NzCardGridDirective } from './card-grid.directive';
 import { NzCardLoadingComponent } from './card-loading.component';
 import { NzCardMetaComponent } from './card-meta.component';
 import { NzCardTabComponent } from './card-tab.component';
 import { NzCardComponent } from './card.component';
 
 @NgModule({
-  imports: [CommonModule, NzOutletModule],
-  declarations: [NzCardComponent, NzCardGridDirective, NzCardMetaComponent, NzCardLoadingComponent, NzCardTabComponent],
+  imports: [NzCardComponent, NzCardGridDirective, NzCardMetaComponent, NzCardLoadingComponent, NzCardTabComponent],
   exports: [
     BidiModule,
     NzCardComponent,

diff --git a/components/card/doc/index.en-US.md b/components/card/doc/index.en-US.md
@@ -22,37 +22,37 @@ import { NzCardModule } from 'ng-zorro-antd/card';
 <nz-card nzTitle="card title">card content</nz-card>
 ```
 
-### nz-card
-
-| Property | Description | Type | Default | Global Config |
-| -------- | ----------- | ---- | ------- | ------------- |
-| `[nzActions]` | The action list, shows at the bottom of the Card. | `Array<TemplateRef<void>>` | - |
-| `[nzBodyStyle]` | Inline style to apply to the card content | `{ [key: string]: string }` | - |
-| `[nzBorderless]` | Remove border around the card | `boolean` | `false` | ✅ |
-| `[nzCover]` | Card cover | `TemplateRef<void>` | - |
-| `[nzExtra]` | Content to render in the top-right corner of the card | `string\|TemplateRef<void>` | - |
-| `[nzHoverable]` | Lift up when hovering card | `boolean` | `false` | ✅ |
-| `[nzLoading]` | Shows a loading indicator while the contents of the card are being fetched | `boolean` | `false` |
-| `[nzTitle]` | Card title | `string\|TemplateRef<void>` | - |
-| `[nzType]` | Card style type, can be set to `inner` or not set | `'inner'` | - |
-| `[nzSize]` | Size of card | `'default'\|'small'` | `'default'` | ✅ |
-
-
-### nz-card-meta
-
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| `[nzAvatar]` | avatar or icon | `TemplateRef<void>` | - |
-| `[nzDescription]` | description content | `string\|TemplateRef<void>` | - |
-| `[nzTitle]` | title content | `string\|TemplateRef<void>` | - |
-
-### [nz-card-grid]
-
-| Property | Description | Type | Default | Global Config |
-| -------- | ----------- | ---- | ------- | ------------- |
-| `[nzHoverable]` | Lift up when hovering card | `boolean` | `true` | - |
+### nz-card:standalone
+
+| Property         | Description                                                                | Type                        | Default     | Global Config |
+| ---------------- | -------------------------------------------------------------------------- | --------------------------- | ----------- | ------------- |
+| `[nzActions]`    | The action list, shows at the bottom of the Card.                          | `Array<TemplateRef<void>>`  | -           |
+| `[nzBodyStyle]`  | Inline style to apply to the card content                                  | `{ [key: string]: string }` | -           |
+| `[nzBorderless]` | Remove border around the card                                              | `boolean`                   | `false`     | ✅            |
+| `[nzCover]`      | Card cover                                                                 | `TemplateRef<void>`         | -           |
+| `[nzExtra]`      | Content to render in the top-right corner of the card                      | `string\|TemplateRef<void>` | -           |
+| `[nzHoverable]`  | Lift up when hovering card                                                 | `boolean`                   | `false`     | ✅            |
+| `[nzLoading]`    | Shows a loading indicator while the contents of the card are being fetched | `boolean`                   | `false`     |
+| `[nzTitle]`      | Card title                                                                 | `string\|TemplateRef<void>` | -           |
+| `[nzType]`       | Card style type, can be set to `inner` or not set                          | `'inner'`                   | -           |
+| `[nzSize]`       | Size of card                                                               | `'default'\|'small'`        | `'default'` | ✅            |
+
+### nz-card-meta:standalone
+
+| Property          | Description         | Type                        | Default |
+| ----------------- | ------------------- | --------------------------- | ------- |
+| `[nzAvatar]`      | avatar or icon      | `TemplateRef<void>`         | -       |
+| `[nzDescription]` | description content | `string\|TemplateRef<void>` | -       |
+| `[nzTitle]`       | title content       | `string\|TemplateRef<void>` | -       |
+
+### [nz-card-grid]:standalone
+
+| Property        | Description                | Type      | Default | Global Config |
+| --------------- | -------------------------- | --------- | ------- | ------------- |
+| `[nzHoverable]` | Lift up when hovering card | `boolean` | `true`  | -             |
 
 Area for grid style card
 
-### nz-card-tab
+### nz-card-tab:standalone
+
 Area for tab card
diff --git a/components/card/doc/index.zh-CN.md b/components/card/doc/index.zh-CN.md
@@ -23,36 +23,37 @@ import { NzCardModule } from 'ng-zorro-antd/card';
 <nz-card nzTitle="卡片标题">卡片内容</nz-card>
 ```
 
-### nz-card
-
-| 参数 | 说明 | 类型 | 默认值 | 支持全局配置 |
-| --- | --- | --- | --- | --- |
-| `[nzActions]` | 卡片操作组，位置在卡片底部 | `Array<TemplateRef<void>>` | - |
-| `[nzBodyStyle]` | 内容区域自定义样式 | `{ [key: string]: string }` | - |
-| `[nzBorderless]` | 是否移除边框 | `boolean` | `false` | ✅ |
-| `[nzCover]` | 卡片封面 | `TemplateRef<void>` | - |
-| `[nzExtra]` | 卡片右上角的操作区域 | `string\|TemplateRef<void>` | - |
-| `[nzHoverable]` | 鼠标移过时可浮起 | `boolean` | `false` | ✅ |
-| `[nzLoading]` | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | `boolean` | `false` |
-| `[nzTitle]` | 卡片标题 | `string\|TemplateRef<void>` | - |
-| `[nzType]` | 卡片类型，可设置为 `inner` 或 不设置 | `'inner'` | - |
-| `[nzSize]` | 卡片的尺寸 | `'default'\|'small'` | `'default'` | ✅ |
-
-### nz-card-meta
-
-| 参数 | 说明 | 类型 | 默认值 |
-| -------- | ----------- | ---- | ------- |
-| `[nzAvatar]` | 头像/图标 | `TemplateRef<void>` | - |
-| `[nzDescription]` | 描述内容 | `string \| TemplateRef<void>` | - |
-| `[nzTitle]` | 标题内容 | `string \| TemplateRef<void>` | - |
-
-
-### [nz-card-grid]
-| 参数 | 说明 | 类型 | 默认值 | 支持全局配置 |
-| --- | --- | --- | --- | --- |
-| `[nzHoverable]` | 鼠标移过时可浮起 | `boolean` | `true` | - |
+### nz-card:standalone
+
+| 参数             | 说明                                                | 类型                        | 默认值      | 支持全局配置 |
+| ---------------- | --------------------------------------------------- | --------------------------- | ----------- | ------------ |
+| `[nzActions]`    | 卡片操作组，位置在卡片底部                          | `Array<TemplateRef<void>>`  | -           |
+| `[nzBodyStyle]`  | 内容区域自定义样式                                  | `{ [key: string]: string }` | -           |
+| `[nzBorderless]` | 是否移除边框                                        | `boolean`                   | `false`     | ✅           |
+| `[nzCover]`      | 卡片封面                                            | `TemplateRef<void>`         | -           |
+| `[nzExtra]`      | 卡片右上角的操作区域                                | `string\|TemplateRef<void>` | -           |
+| `[nzHoverable]`  | 鼠标移过时可浮起                                    | `boolean`                   | `false`     | ✅           |
+| `[nzLoading]`    | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | `boolean`                   | `false`     |
+| `[nzTitle]`      | 卡片标题                                            | `string\|TemplateRef<void>` | -           |
+| `[nzType]`       | 卡片类型，可设置为 `inner` 或 不设置                | `'inner'`                   | -           |
+| `[nzSize]`       | 卡片的尺寸                                          | `'default'\|'small'`        | `'default'` | ✅           |
+
+### nz-card-meta:standalone
+
+| 参数              | 说明      | 类型                          | 默认值 |
+| ----------------- | --------- | ----------------------------- | ------ |
+| `[nzAvatar]`      | 头像/图标 | `TemplateRef<void>`           | -      |
+| `[nzDescription]` | 描述内容  | `string \| TemplateRef<void>` | -      |
+| `[nzTitle]`       | 标题内容  | `string \| TemplateRef<void>` | -      |
+
+### [nz-card-grid]:standalone
+
+| 参数            | 说明             | 类型      | 默认值 | 支持全局配置 |
+| --------------- | ---------------- | --------- | ------ | ------------ |
+| `[nzHoverable]` | 鼠标移过时可浮起 | `boolean` | `true` | -            |
 
 分隔卡片内容区域
 
-### nz-card-tab
+### nz-card-tab:standalone
+
 分隔页签标题区域