refactor(module:progress,statistic,rate,result): migrate demo to stan…

…dalone mode (#8800) * refactor(module:progress): migrate demo to standalone mode * refactor(module:rate): migrate demo to standalone mode * refactor(module:result): migrate demo to standalone mode * refactor(module:statistic): migrate demo to standalone mode
NG-ZORRO · Oct 1, 2024 · 7869fec · 7869fec
1 parent 6c43fab
commit 7869fec
Show file tree

Hide file tree

Showing 42 changed files with 275 additions and 144 deletions.
diff --git a/components/progress/demo/circle-dynamic.ts b/components/progress/demo/circle-dynamic.ts
@@ -1,7 +1,13 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzProgressModule } from 'ng-zorro-antd/progress';
+
 @Component({
   selector: 'nz-demo-progress-circle-dynamic',
+  standalone: true,
+  imports: [NzButtonModule, NzIconModule, NzProgressModule],
   template: `
     <nz-progress [nzPercent]="percent" nzType="circle"></nz-progress>
     <nz-button-group>

diff --git a/components/progress/demo/circle-mini.ts b/components/progress/demo/circle-mini.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzProgressModule } from 'ng-zorro-antd/progress';
+
 @Component({
   selector: 'nz-demo-progress-circle-mini',
+  standalone: true,
+  imports: [NzProgressModule],
   template: `
     <nz-progress [nzPercent]="75" nzType="circle" [nzWidth]="80"></nz-progress>
     <nz-progress [nzPercent]="70" nzType="circle" [nzWidth]="80" nzStatus="exception"></nz-progress>

diff --git a/components/progress/demo/circle.ts b/components/progress/demo/circle.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzProgressModule } from 'ng-zorro-antd/progress';
+
 @Component({
   selector: 'nz-demo-progress-circle',
+  standalone: true,
+  imports: [NzProgressModule],
   template: `
     <nz-progress [nzPercent]="75" nzType="circle"></nz-progress>
     <nz-progress [nzPercent]="70" nzType="circle" nzStatus="exception"></nz-progress>

diff --git a/components/progress/demo/dashboard-layout.ts b/components/progress/demo/dashboard-layout.ts
@@ -1,10 +1,16 @@
 import { Component } from '@angular/core';
 
+import { NzProgressModule } from 'ng-zorro-antd/progress';
+
 @Component({
   selector: 'nz-demo-progress-dashboard-layout',
-  template: `<nz-progress [nzPercent]="1" nzType="dashboard" [nzGapDegree]="90"></nz-progress>
+  standalone: true,
+  imports: [NzProgressModule],
+  template: `
+    <nz-progress [nzPercent]="1" nzType="dashboard" [nzGapDegree]="90"></nz-progress>
     <nz-progress [nzPercent]="75" nzType="dashboard" [nzGapDegree]="180"></nz-progress>
     <nz-progress [nzPercent]="75" nzType="dashboard" [nzGapDegree]="295"></nz-progress>
-    <nz-progress [nzPercent]="1" nzType="dashboard" [nzGapDegree]="340"></nz-progress>`
+    <nz-progress [nzPercent]="1" nzType="dashboard" [nzGapDegree]="340"></nz-progress>
+  `
 })
 export class NzDemoProgressDashboardLayoutComponent {}
diff --git a/components/progress/demo/dashboard.ts b/components/progress/demo/dashboard.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzProgressModule } from 'ng-zorro-antd/progress';
+
 @Component({
   selector: 'nz-demo-progress-dashboard',
-  template: ` <nz-progress [nzPercent]="75" nzType="dashboard"></nz-progress> `
+  standalone: true,
+  imports: [NzProgressModule],
+  template: `<nz-progress [nzPercent]="75" nzType="dashboard"></nz-progress>`
 })
 export class NzDemoProgressDashboardComponent {}
diff --git a/components/progress/demo/dynamic.ts b/components/progress/demo/dynamic.ts
@@ -1,7 +1,13 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzProgressModule } from 'ng-zorro-antd/progress';
+
 @Component({
   selector: 'nz-demo-progress-dynamic',
+  standalone: true,
+  imports: [NzButtonModule, NzIconModule, NzProgressModule],
   template: `
     <nz-progress [nzPercent]="percent"></nz-progress>
     <nz-button-group>

diff --git a/components/progress/demo/format.ts b/components/progress/demo/format.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzProgressModule } from 'ng-zorro-antd/progress';
+
 @Component({
   selector: 'nz-demo-progress-format',
+  standalone: true,
+  imports: [NzProgressModule],
   template: `
     <nz-progress [nzPercent]="75" nzType="circle" [nzFormat]="formatOne"></nz-progress>
     <nz-progress [nzPercent]="100" nzType="circle" [nzFormat]="formatTwo"></nz-progress>

diff --git a/components/progress/demo/gradient.ts b/components/progress/demo/gradient.ts
@@ -1,7 +1,11 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 
+import { NzProgressModule } from 'ng-zorro-antd/progress';
+
 @Component({
   selector: 'nz-demo-progress-gradient',
+  standalone: true,
+  imports: [NzProgressModule],
   template: `
     <nz-progress [nzPercent]="99.9" [nzStrokeColor]="{ '0%': '#108ee9', '100%': '#87d068' }"></nz-progress>
     <nz-progress

diff --git a/components/progress/demo/line-mini.ts b/components/progress/demo/line-mini.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzProgressModule } from 'ng-zorro-antd/progress';
+
 @Component({
   selector: 'nz-demo-progress-line-mini',
+  standalone: true,
+  imports: [NzProgressModule],
   template: `
     <div style="width: 170px;">
       <nz-progress [nzPercent]="30" nzSize="small"></nz-progress>

diff --git a/components/progress/demo/line.ts b/components/progress/demo/line.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzProgressModule } from 'ng-zorro-antd/progress';
+
 @Component({
   selector: 'nz-demo-progress-line',
+  standalone: true,
+  imports: [NzProgressModule],
   template: `
     <nz-progress [nzPercent]="30"></nz-progress>
     <nz-progress [nzPercent]="50" nzStatus="active"></nz-progress>

diff --git a/components/progress/demo/module b/components/progress/demo/module
diff --git a/components/progress/demo/round.ts b/components/progress/demo/round.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzProgressModule } from 'ng-zorro-antd/progress';
+
 @Component({
   selector: 'nz-demo-progress-round',
+  standalone: true,
+  imports: [NzProgressModule],
   template: `
     <nz-progress nzStrokeLinecap="round" nzPercent="75"></nz-progress>
     <nz-progress nzStrokeLinecap="round" nzType="circle" nzPercent="75"></nz-progress>

diff --git a/components/progress/demo/segment.ts b/components/progress/demo/segment.ts
@@ -1,24 +1,29 @@
 import { Component } from '@angular/core';
 
+import { NzProgressModule } from 'ng-zorro-antd/progress';
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+
 @Component({
   selector: 'nz-demo-progress-segment',
+  standalone: true,
+  imports: [NzProgressModule, NzToolTipModule],
   template: `
     <nz-progress
       nz-tooltip
-      nzTitle="3 done / 3 in progress / 4 to do"
+      nzTooltipTitle="3 done / 3 in progress / 4 to do"
       [nzPercent]="60"
       [nzSuccessPercent]="30"
     ></nz-progress>
     <nz-progress
       nz-tooltip
-      nzTitle="3 done / 3 in progress / 4 to do"
+      nzTooltipTitle="3 done / 3 in progress / 4 to do"
       nzType="circle"
       [nzPercent]="60"
       [nzSuccessPercent]="30"
     ></nz-progress>
     <nz-progress
       nz-tooltip
-      nzTitle="3 done / 3 in progress / 4 to do"
+      nzTooltipTitle="3 done / 3 in progress / 4 to do"
       nzType="dashboard"
       [nzPercent]="60"
       [nzSuccessPercent]="30"

diff --git a/components/progress/demo/step.ts b/components/progress/demo/step.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzProgressModule } from 'ng-zorro-antd/progress';
+
 @Component({
   selector: 'nz-demo-progress-step',
+  standalone: true,
+  imports: [NzProgressModule],
   template: `
     <nz-progress [nzPercent]="50" [nzSteps]="3" nzStrokeColor="#1890ff"></nz-progress>
     <nz-progress [nzPercent]="30" [nzSteps]="5" nzStrokeColor="#1890ff"></nz-progress>

diff --git a/components/progress/progress.spec.ts b/components/progress/progress.spec.ts
@@ -1,27 +1,19 @@
-import { BidiModule, Dir } from '@angular/cdk/bidi';
+import { BidiModule, Dir, Direction } from '@angular/cdk/bidi';
 import { Component, DebugElement, TemplateRef, ViewChild } from '@angular/core';
-import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 import { NzProgressComponent } from './progress.component';
 import { NzProgressModule } from './progress.module';
-import { NzProgressFormatter, NzProgressGapPositionType, NzProgressStrokeColorType } from './typings';
+import {
+  NzProgressFormatter,
+  NzProgressGapPositionType,
+  NzProgressStatusType,
+  NzProgressStrokeColorType,
+  NzProgressStrokeLinecapType
+} from './typings';
 
 describe('progress', () => {
-  beforeEach(fakeAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [BidiModule, NzProgressModule],
-      declarations: [
-        NzTestProgressLineComponent,
-        NzTestProgressDashBoardComponent,
-        NzTestProgressCircleComponent,
-        NzTestProgressCircleSuccessComponent,
-        NzTestProgressRtlComponent
-      ]
-    });
-    TestBed.compileComponents();
-  }));
-
   describe('progress line', () => {
     let fixture: ComponentFixture<NzTestProgressLineComponent>;
     let testComponent: NzTestProgressLineComponent;
@@ -99,7 +91,7 @@ describe('progress', () => {
     it('should status work', () => {
       fixture.detectChanges();
       expect(progress.nativeElement.firstElementChild!.classList).toContain('ant-progress-status-normal');
-      const listOfStatus = ['success', 'exception', 'active', 'normal'];
+      const listOfStatus: NzProgressStatusType[] = ['success', 'exception', 'active', 'normal'];
       testComponent.percent = 100;
       listOfStatus.forEach(status => {
         testComponent.status = status;
@@ -430,6 +422,8 @@ describe('progress', () => {
 });
 
 @Component({
+  standalone: true,
+  imports: [NzProgressModule],
   template: `
     <nz-progress
       [nzSize]="size"
@@ -448,19 +442,21 @@ describe('progress', () => {
 })
 export class NzTestProgressLineComponent {
   @ViewChild('formatterTemplate') formatterTemplate!: TemplateRef<{ $implicit: number }>;
-  size?: string;
-  status?: string;
+  size!: 'default' | 'small';
+  status?: NzProgressStatusType;
   formatter?: NzProgressFormatter;
   strokeWidth?: number;
   percent = 0;
   successPercent = 0;
   showInfo = true;
-  strokeLinecap = 'round';
+  strokeLinecap: NzProgressStrokeLinecapType = 'round';
   steps?: number;
   strokeColor?: NzProgressStrokeColorType;
 }
 
 @Component({
+  standalone: true,
+  imports: [NzProgressModule],
   template: `
     <nz-progress
       nzType="dashboard"
@@ -475,16 +471,18 @@ export class NzTestProgressLineComponent {
   `
 })
 export class NzTestProgressDashBoardComponent {
-  status?: string;
+  status?: NzProgressStatusType;
   format?: NzProgressFormatter;
   strokeWidth?: number;
   percent = 0;
   showInfo = true;
   width = 132;
-  strokeLinecap = 'round';
+  strokeLinecap: NzProgressStrokeLinecapType = 'round';
 }
 
 @Component({
+  standalone: true,
+  imports: [NzProgressModule],
   template: `
     <nz-progress
       nzType="circle"
@@ -498,17 +496,21 @@ export class NzTestProgressDashBoardComponent {
 })
 export class NzTestProgressCircleComponent {
   gapDegree?: number;
-  gapPosition?: NzProgressGapPositionType;
-  strokeLinecap = 'round';
+  gapPosition!: NzProgressGapPositionType;
+  strokeLinecap: NzProgressStrokeLinecapType = 'round';
   strokeColor?: NzProgressStrokeColorType;
 }
 
 @Component({
-  template: ` <nz-progress nzType="circle" [nzPercent]="75" [nzSuccessPercent]="60"></nz-progress> `
+  standalone: true,
+  imports: [NzProgressModule],
+  template: ` <nz-progress nzType="circle" [nzPercent]="75" [nzSuccessPercent]="60"></nz-progress>`
 })
 export class NzTestProgressCircleSuccessComponent {}
 
 @Component({
+  standalone: true,
+  imports: [BidiModule, NzProgressModule],
   template: `
     <div [dir]="direction">
       <nz-progress nzType="circle" [nzPercent]="75" [nzSuccessPercent]="60"></nz-progress>
@@ -517,5 +519,5 @@ export class NzTestProgressCircleSuccessComponent {}
 })
 export class NzTestProgressRtlComponent {
   @ViewChild(Dir) dir!: Dir;
-  direction = 'rtl';
+  direction: Direction = 'rtl';
 }
diff --git a/components/rate/demo/basic.ts b/components/rate/demo/basic.ts
@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzRateModule } from 'ng-zorro-antd/rate';
 
 @Component({
   selector: 'nz-demo-rate-basic',
-  template: ` <nz-rate [ngModel]="0"></nz-rate> `
+  standalone: true,
+  imports: [FormsModule, NzRateModule],
+  template: `<nz-rate [ngModel]="0"></nz-rate>`
 })
 export class NzDemoRateBasicComponent {}
diff --git a/components/rate/demo/character.ts b/components/rate/demo/character.ts
@@ -1,7 +1,13 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzRateModule } from 'ng-zorro-antd/rate';
 
 @Component({
   selector: 'nz-demo-rate-character',
+  standalone: true,
+  imports: [FormsModule, NzIconModule, NzRateModule],
   template: `
     <nz-rate [ngModel]="0" nzAllowHalf [nzCharacter]="characterIcon"></nz-rate>
     <br />

diff --git a/components/rate/demo/clear.ts b/components/rate/demo/clear.ts
@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzRateModule } from 'ng-zorro-antd/rate';
 
 @Component({
   selector: 'nz-demo-rate-clear',
+  standalone: true,
+  imports: [FormsModule, NzRateModule],
   template: `
     <nz-rate [(ngModel)]="value" nzAllowHalf></nz-rate>
     <span class="ant-rate-text">allowClear: true</span>

diff --git a/components/rate/demo/customize.ts b/components/rate/demo/customize.ts
@@ -1,7 +1,13 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzRateModule } from 'ng-zorro-antd/rate';
 
 @Component({
   selector: 'nz-demo-rate-customize',
+  standalone: true,
+  imports: [FormsModule, NzIconModule, NzRateModule],
   template: `
     <nz-rate [ngModel]="2" [nzCharacter]="characterNumber"></nz-rate>
     <br />

diff --git a/components/rate/demo/disabled.ts b/components/rate/demo/disabled.ts
@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzRateModule } from 'ng-zorro-antd/rate';
 
 @Component({
   selector: 'nz-demo-rate-disabled',
-  template: ` <nz-rate [ngModel]="2" nzDisabled></nz-rate> `
+  standalone: true,
+  imports: [FormsModule, NzRateModule],
+  template: `<nz-rate [ngModel]="2" nzDisabled></nz-rate>`
 })
 export class NzDemoRateDisabledComponent {}