refactor(module:card): migrate demo to standalone mode (#8742)

* refactor(module:card): migrate demo to standalone mode * refactor(module:card): migrate demo to standalone mode
NG-ZORRO · Sep 12, 2024 · 66f0a04 · 66f0a04
1 parent 99b6b15
commit 66f0a04
Show file tree

Hide file tree

Showing 12 changed files with 88 additions and 43 deletions.
diff --git a/components/card/card.spec.ts b/components/card/card.spec.ts
@@ -1,7 +1,13 @@
-import { BidiModule, Dir } from '@angular/cdk/bidi';
+import { BidiModule, Dir, Direction } from '@angular/cdk/bidi';
 import { Component, NO_ERRORS_SCHEMA, ViewChild } from '@angular/core';
 import { TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+import { EditOutline, EllipsisOutline, SettingOutline } from '@ant-design/icons-angular/icons';
+
+import { NzSizeDSType } from 'ng-zorro-antd/core/types';
+import { NzIconModule } from 'ng-zorro-antd/icon';
 
 import { NzCardComponent } from './card.component';
 import { NzCardModule } from './card.module';
@@ -19,22 +25,13 @@ import { NzDemoCardTabsComponent } from './demo/tabs';
 describe('card', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [BidiModule, NzCardModule],
-      schemas: [NO_ERRORS_SCHEMA],
-      declarations: [
-        NzDemoCardBasicComponent,
-        NzDemoCardBorderLessComponent,
-        NzDemoCardFlexibleContentComponent,
-        NzDemoCardGridCardComponent,
-        NzDemoCardInColumnComponent,
-        NzDemoCardInnerComponent,
-        NzDemoCardLoadingComponent,
-        NzDemoCardMetaComponent,
-        NzDemoCardSimpleComponent,
-        NzDemoCardTabsComponent,
-        TestCardSizeComponent,
-        NzTestCardRtlComponent
-      ]
+      imports: [
+        BidiModule,
+        NzCardModule,
+        NoopAnimationsModule,
+        NzIconModule.forRoot([SettingOutline, EditOutline, EllipsisOutline])
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
     });
     TestBed.compileComponents();
   }));
@@ -138,6 +135,8 @@ describe('card', () => {
 });
 
 @Component({
+  standalone: true,
+  imports: [NzCardModule],
   template: `
     <nz-card [nzSize]="size">
       <p>Card content</p>
@@ -147,10 +146,12 @@ describe('card', () => {
   `
 })
 class TestCardSizeComponent {
-  size = 'default';
+  size: NzSizeDSType = 'default';
 }
 
 @Component({
+  standalone: true,
+  imports: [NzCardModule],
   template: `
     <div [dir]="direction">
       <nz-card>
@@ -163,5 +164,5 @@ class TestCardSizeComponent {
 })
 export class NzTestCardRtlComponent {
   @ViewChild(Dir) dir!: Dir;
-  direction = 'rtl';
+  direction: Direction = 'rtl';
 }
diff --git a/components/card/demo/basic.ts b/components/card/demo/basic.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzCardModule } from 'ng-zorro-antd/card';
+
 @Component({
   selector: 'nz-demo-card-basic',
+  standalone: true,
+  imports: [NzCardModule],
   template: `
     <nz-card style="width:300px;" nzTitle="Card title" [nzExtra]="extraTemplate">
       <p>Card content</p>

diff --git a/components/card/demo/border-less.ts b/components/card/demo/border-less.ts
@@ -1,9 +1,13 @@
 import { Component } from '@angular/core';
 
+import { NzCardModule } from 'ng-zorro-antd/card';
+
 @Component({
   selector: 'nz-demo-card-border-less',
+  standalone: true,
+  imports: [NzCardModule],
   template: `
-    <div style="background: #ECECEC;padding:30px;">
+    <div style="background: #ECECEC; padding:30px;">
       <nz-card style="width:300px;" [nzBordered]="false" nzTitle="Card title" [nzExtra]="extraTemplate">
         <p>Card content</p>
         <p>Card content</p>

diff --git a/components/card/demo/flexible-content.ts b/components/card/demo/flexible-content.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzCardModule } from 'ng-zorro-antd/card';
+
 @Component({
   selector: 'nz-demo-card-flexible-content',
+  standalone: true,
+  imports: [NzCardModule],
   template: `
     <nz-card nzHoverable style="width:240px" [nzCover]="coverTemplate">
       <nz-card-meta nzTitle="Europe Street beat" nzDescription="www.instagram.com"></nz-card-meta>

diff --git a/components/card/demo/grid-card.ts b/components/card/demo/grid-card.ts
@@ -1,22 +1,29 @@
 import { Component } from '@angular/core';
 
+import { NzCardModule } from 'ng-zorro-antd/card';
+
 @Component({
   selector: 'nz-demo-card-grid-card',
+  standalone: true,
+  imports: [NzCardModule],
   template: `
     <nz-card nzTitle="Cart Title">
-      <div nz-card-grid [ngStyle]="gridStyle">Content</div>
-      <div nz-card-grid [ngStyle]="gridStyle">Content</div>
-      <div nz-card-grid [ngStyle]="gridStyle">Content</div>
-      <div nz-card-grid [ngStyle]="gridStyle">Content</div>
-      <div nz-card-grid [ngStyle]="gridStyle">Content</div>
-      <div nz-card-grid [ngStyle]="gridStyle">Content</div>
-      <div nz-card-grid [ngStyle]="gridStyle">Content</div>
+      <div nz-card-grid>Content</div>
+      <div nz-card-grid>Content</div>
+      <div nz-card-grid>Content</div>
+      <div nz-card-grid>Content</div>
+      <div nz-card-grid>Content</div>
+      <div nz-card-grid>Content</div>
+      <div nz-card-grid>Content</div>
     </nz-card>
-  `
+  `,
+  styles: [
+    `
+      [nz-card-grid] {
+        width: 25%;
+        text-align: center;
+      }
+    `
+  ]
 })
-export class NzDemoCardGridCardComponent {
-  gridStyle = {
-    width: '25%',
-    textAlign: 'center'
-  };
-}
+export class NzDemoCardGridCardComponent {}
diff --git a/components/card/demo/in-column.ts b/components/card/demo/in-column.ts
@@ -1,9 +1,14 @@
 import { Component } from '@angular/core';
 
+import { NzCardModule } from 'ng-zorro-antd/card';
+import { NzGridModule } from 'ng-zorro-antd/grid';
+
 @Component({
   selector: 'nz-demo-card-in-column',
+  standalone: true,
+  imports: [NzCardModule, NzGridModule],
   template: `
-    <div style="background: #ECECEC;padding:30px;">
+    <div style="background: #ECECEC; padding:30px;">
       <div nz-row [nzGutter]="8">
         <div nz-col [nzSpan]="8">
           <nz-card nzTitle="Card title">

diff --git a/components/card/demo/inner.ts b/components/card/demo/inner.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzCardModule } from 'ng-zorro-antd/card';
+
 @Component({
   selector: 'nz-demo-card-inner',
+  standalone: true,
+  imports: [NzCardModule],
   template: `
     <nz-card nzTitle="Card Title">
       <p style="font-size:14px;color:rgba(0, 0, 0, 0.85);margin-bottom:16px;font-weight: 500;">Group title</p>

diff --git a/components/card/demo/loading.ts b/components/card/demo/loading.ts
@@ -1,7 +1,16 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzAvatarModule } from 'ng-zorro-antd/avatar';
+import { NzCardModule } from 'ng-zorro-antd/card';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
 
 @Component({
   selector: 'nz-demo-card-loading',
+  standalone: true,
+  imports: [FormsModule, NzAvatarModule, NzCardModule, NzIconModule, NzSwitchModule, NzSkeletonModule],
   template: `
     <nz-switch [(ngModel)]="loading"></nz-switch>
     <nz-card style="width: 300px;margin-top: 16px" [nzLoading]="loading">

diff --git a/components/card/demo/meta.ts b/components/card/demo/meta.ts
@@ -1,7 +1,13 @@
 import { Component } from '@angular/core';
 
+import { NzAvatarModule } from 'ng-zorro-antd/avatar';
+import { NzCardModule } from 'ng-zorro-antd/card';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+
 @Component({
   selector: 'nz-demo-card-meta',
+  standalone: true,
+  imports: [NzAvatarModule, NzCardModule, NzIconModule],
   template: `
     <nz-card style="width:300px;" [nzCover]="coverTemplate" [nzActions]="[actionSetting, actionEdit, actionEllipsis]">
       <nz-card-meta

diff --git a/components/card/demo/module b/components/card/demo/module
diff --git a/components/card/demo/simple.ts b/components/card/demo/simple.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzCardModule } from 'ng-zorro-antd/card';
+
 @Component({
   selector: 'nz-demo-card-simple',
+  standalone: true,
+  imports: [NzCardModule],
   template: `
     <nz-card style="width:300px;">
       <p>Card content</p>

diff --git a/components/card/demo/tabs.ts b/components/card/demo/tabs.ts
@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
 
+import { NzCardModule } from 'ng-zorro-antd/card';
+import { NzTabsModule } from 'ng-zorro-antd/tabs';
+
 @Component({
   selector: 'nz-demo-card-tabs',
+  standalone: true,
+  imports: [NzCardModule, NzTabsModule],
   template: `
     <nz-card style="width: 100%;" nzTitle="Card title" [nzExtra]="extraTemplate">
       <nz-card-tab>