refactor(module:radio,switch): migrate demo to standalone mode (#8801)

* refactor(module:radio): migrate demo to standalone mode * refactor(module:switch): migrate demo to standalone mode
NG-ZORRO · Sep 27, 2024 · 099964c · 099964c
1 parent bbac457
commit 099964c
Show file tree

Hide file tree

Showing 19 changed files with 139 additions and 66 deletions.
diff --git a/components/radio/demo/basic.ts b/components/radio/demo/basic.ts
@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzRadioModule } from 'ng-zorro-antd/radio';
 
 @Component({
   selector: 'nz-demo-radio-basic',
-  template: ` <label nz-radio ngModel>Radio</label> `
+  standalone: true,
+  imports: [FormsModule, NzRadioModule],
+  template: `<label nz-radio ngModel>Radio</label>`
 })
 export class NzDemoRadioBasicComponent {}
diff --git a/components/radio/demo/disable.ts b/components/radio/demo/disable.ts
@@ -1,7 +1,13 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
 
 @Component({
   selector: 'nz-demo-radio-disable',
+  standalone: true,
+  imports: [FormsModule, NzButtonModule, NzRadioModule],
   template: `
     <div>
       <label nz-radio [nzDisabled]="disabled">Disabled</label>

diff --git a/components/radio/demo/module b/components/radio/demo/module
diff --git a/components/radio/demo/radiobutton.ts b/components/radio/demo/radiobutton.ts
@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzRadioModule } from 'ng-zorro-antd/radio';
 
 @Component({
   selector: 'nz-demo-radio-radiobutton',
+  standalone: true,
+  imports: [FormsModule, NzRadioModule],
   template: `
     <nz-radio-group [(ngModel)]="radioValue">
       <label nz-radio-button nzValue="A">Hangzhou</label>

diff --git a/components/radio/demo/radiogroup-more.ts b/components/radio/demo/radiogroup-more.ts
@@ -1,7 +1,13 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
 
 @Component({
   selector: 'nz-demo-radio-radiogroup-more',
+  standalone: true,
+  imports: [FormsModule, NzInputModule, NzRadioModule],
   template: `
     <nz-radio-group [(ngModel)]="radioValue">
       <label nz-radio nzValue="A">Option A</label>

diff --git a/components/radio/demo/radiogroup-options.ts b/components/radio/demo/radiogroup-options.ts
@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzRadioModule } from 'ng-zorro-antd/radio';
 
 @Component({
   selector: 'nz-demo-radio-radiogroup-options',
+  standalone: true,
+  imports: [FormsModule, NzRadioModule],
   template: `
     <nz-radio-group [(ngModel)]="radioValue">
       @for (o of options; track o.value) {

diff --git a/components/radio/demo/radiogroup-with-name.ts b/components/radio/demo/radiogroup-with-name.ts
@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzRadioModule } from 'ng-zorro-antd/radio';
 
 @Component({
   selector: 'nz-demo-radio-radiogroup-with-name',
+  standalone: true,
+  imports: [FormsModule, NzRadioModule],
   template: `
     <nz-radio-group [(ngModel)]="radioValue" nzName="radiogroup">
       <label nz-radio nzValue="A">A</label>

diff --git a/components/radio/demo/radiogroup.ts b/components/radio/demo/radiogroup.ts
@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzRadioModule } from 'ng-zorro-antd/radio';
 
 @Component({
   selector: 'nz-demo-radio-radiogroup',
+  standalone: true,
+  imports: [FormsModule, NzRadioModule],
   template: `
     <nz-radio-group [(ngModel)]="radioValue">
       <label nz-radio nzValue="A">A</label>

diff --git a/components/radio/demo/size.ts b/components/radio/demo/size.ts
@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzRadioModule } from 'ng-zorro-antd/radio';
 
 @Component({
   selector: 'nz-demo-radio-size',
+  standalone: true,
+  imports: [FormsModule, NzRadioModule],
   template: `
     <nz-radio-group [(ngModel)]="radioValue" nzSize="large">
       <label nz-radio-button nzValue="A">Hangzhou</label>

diff --git a/components/radio/demo/solid.ts b/components/radio/demo/solid.ts
@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzRadioModule } from 'ng-zorro-antd/radio';
 
 @Component({
   selector: 'nz-demo-radio-solid',
+  standalone: true,
+  imports: [FormsModule, NzRadioModule],
   template: `
     <nz-radio-group [(ngModel)]="radioValue" nzButtonStyle="solid">
       <label nz-radio-button nzValue="A">Hangzhou</label>

diff --git a/components/radio/radio.spec.ts b/components/radio/radio.spec.ts
@@ -1,36 +1,17 @@
-import { BidiModule, Dir } from '@angular/cdk/bidi';
+import { BidiModule, Dir, Direction } from '@angular/cdk/bidi';
 import { ApplicationRef, Component, DebugElement, ViewChild } from '@angular/core';
-import { ComponentFixture, TestBed, fakeAsync, flush, tick, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed, fakeAsync, flush, tick } from '@angular/core/testing';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 
 import { createMouseEvent } from 'ng-zorro-antd/core/testing';
+import { NzSizeLDSType } from 'ng-zorro-antd/core/types';
 
 import { NzRadioGroupComponent } from './radio-group.component';
 import { NzRadioComponent } from './radio.component';
 import { NzRadioModule } from './radio.module';
 
 describe('radio', () => {
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [BidiModule, NzRadioModule, FormsModule, ReactiveFormsModule],
-      declarations: [
-        NzTestRadioSingleComponent,
-        NzTestRadioButtonComponent,
-        NzTestRadioGroupComponent,
-        NzTestRadioFormComponent,
-        NzTestRadioGroupFormComponent,
-        NzTestRadioGroupDisabledComponent,
-        NzTestRadioGroupDisabledFormComponent,
-        NzTestRadioGroupLabelNgModelComponent,
-        NzTestRadioGroupSolidComponent,
-        NzTestRadioSingleRtlComponent,
-        NzTestRadioGroupRtlComponent,
-        NzTestRadioButtonRtlComponent
-      ]
-    });
-    TestBed.compileComponents();
-  }));
   describe('single radio basic', () => {
     let fixture: ComponentFixture<NzTestRadioSingleComponent>;
     let testComponent: NzTestRadioSingleComponent;
@@ -432,8 +413,9 @@ describe('radio', () => {
 });
 
 @Component({
-  // eslint-disable-next-line
   selector: 'nz-test-radio-single',
+  standalone: true,
+  imports: [FormsModule, NzRadioModule],
   template: `
     <label
       nz-radio
@@ -455,13 +437,16 @@ export class NzTestRadioSingleComponent {
 }
 
 @Component({
-  template: ` <label nz-radio-button>Radio</label> `
+  standalone: true,
+  imports: [FormsModule, NzRadioModule],
+  template: `<label nz-radio-button>Radio</label>`
 })
 export class NzTestRadioButtonComponent {}
 
 @Component({
-  // eslint-disable-next-line
   selector: 'nz-test-radio-group',
+  standalone: true,
+  imports: [FormsModule, NzRadioModule],
   template: `
     <nz-radio-group
       [(ngModel)]="value"
@@ -470,24 +455,24 @@ export class NzTestRadioButtonComponent {}
       (ngModelChange)="modelChange($event)"
       [nzSize]="size"
     >
-      <ng-container [ngClass]>
-        <label nz-radio-button nzValue="A">A</label>
-        <label nz-radio-button nzValue="B">B</label>
-        <label nz-radio-button nzValue="C">C</label>
-        <label nz-radio-button nzValue="D">D</label>
-      </ng-container>
+      <label nz-radio-button nzValue="A">A</label>
+      <label nz-radio-button nzValue="B">B</label>
+      <label nz-radio-button nzValue="C">C</label>
+      <label nz-radio-button nzValue="D">D</label>
     </nz-radio-group>
   `
 })
 export class NzTestRadioGroupComponent {
-  size = 'default';
+  size: NzSizeLDSType = 'default';
   value = 'A';
   disabled = false;
-  name?: string;
+  name!: string;
   modelChange = jasmine.createSpy('change callback');
 }
 
 @Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, NzRadioModule],
   template: `
     <form>
       <label nz-radio [formControl]="formControl" [nzDisabled]="disabled"></label>
@@ -509,6 +494,8 @@ export class NzTestRadioFormComponent {
 }
 
 @Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, NzRadioModule],
   template: `
     <form>
       <nz-radio-group [formControl]="formControl" [nzDisabled]="nzDisabled">
@@ -534,9 +521,10 @@ export class NzTestRadioGroupFormComponent {
 }
 
 /** https://github.com/NG-ZORRO/ng-zorro-antd/issues/1543 **/
-/** https://github.com/NG-ZORRO/ng-zorro-antd/issues/1734 **/
 
 @Component({
+  standalone: true,
+  imports: [FormsModule, NzRadioModule],
   template: `
     <nz-radio-group [(ngModel)]="value" [nzName]="name" [nzDisabled]="disabled" [nzSize]="size">
       <label nz-radio-button nzValue="A">A</label>
@@ -547,17 +535,19 @@ export class NzTestRadioGroupFormComponent {
   `
 })
 export class NzTestRadioGroupDisabledComponent {
-  size = 'default';
+  size: NzSizeLDSType = 'default';
   value = 'A';
   disabled = false;
-  name?: string;
+  name!: string;
   singleDisabled = false;
 }
 
 /** https://github.com/NG-ZORRO/ng-zorro-antd/issues/1735 **/
 @Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, NzRadioModule],
   template: `
-    <form nz-form>
+    <form>
       <nz-radio-group [formControl]="formControl">
         @for (val of radioValues; track val) {
           <label nz-radio [nzValue]="val">{{ val }}</label>
@@ -572,8 +562,10 @@ export class NzTestRadioGroupDisabledFormComponent {
 }
 
 @Component({
+  standalone: true,
+  imports: [FormsModule, NzRadioModule],
   template: `
-    <nz-radio-group [(ngModel)]="value" [nzButtonStyle]="'solid'">
+    <nz-radio-group [(ngModel)]="value" nzButtonStyle="solid">
       <label nz-radio-button nzValue="A">A</label>
       <label nz-radio-button nzValue="B">B</label>
       <label nz-radio-button nzValue="C" [nzDisabled]="singleDisabled">C</label>
@@ -588,6 +580,8 @@ export class NzTestRadioGroupSolidComponent {
 
 /** https://github.com/NG-ZORRO/ng-zorro-antd/issues/7254 */
 @Component({
+  standalone: true,
+  imports: [FormsModule, NzRadioModule],
   template: `
     <nz-radio-group>
       @for (item of items; track item) {
@@ -620,6 +614,8 @@ export class NzTestRadioGroupLabelNgModelComponent {
 }
 
 @Component({
+  standalone: true,
+  imports: [BidiModule, NzTestRadioSingleComponent],
   template: `
     <div [dir]="direction">
       <nz-test-radio-single></nz-test-radio-single>
@@ -628,10 +624,12 @@ export class NzTestRadioGroupLabelNgModelComponent {
 })
 export class NzTestRadioSingleRtlComponent {
   @ViewChild(Dir) dir!: Dir;
-  direction = 'rtl';
+  direction: Direction = 'rtl';
 }
 
 @Component({
+  standalone: true,
+  imports: [BidiModule, NzRadioModule],
   template: `
     <div [dir]="direction">
       <label nz-radio-button>Radio</label>
@@ -640,10 +638,12 @@ export class NzTestRadioSingleRtlComponent {
 })
 export class NzTestRadioButtonRtlComponent {
   @ViewChild(Dir) dir!: Dir;
-  direction = 'rtl';
+  direction: Direction = 'rtl';
 }
 
 @Component({
+  standalone: true,
+  imports: [BidiModule, NzTestRadioGroupComponent],
   template: `
     <div [dir]="direction">
       <nz-test-radio-group></nz-test-radio-group>
@@ -652,5 +652,5 @@ export class NzTestRadioButtonRtlComponent {
 })
 export class NzTestRadioGroupRtlComponent {
   @ViewChild(Dir) dir!: Dir;
-  direction = 'rtl';
+  direction: Direction = 'rtl';
 }
diff --git a/components/switch/demo/basic.ts b/components/switch/demo/basic.ts
@@ -1,8 +1,13 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
 
 @Component({
   selector: 'nz-demo-switch-basic',
-  template: ` <nz-switch [(ngModel)]="switchValue"></nz-switch> `
+  standalone: true,
+  imports: [FormsModule, NzSwitchModule],
+  template: `<nz-switch [(ngModel)]="switchValue"></nz-switch>`
 })
 export class NzDemoSwitchBasicComponent {
   switchValue = false;

diff --git a/components/switch/demo/control.ts b/components/switch/demo/control.ts
@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
 
 @Component({
   selector: 'nz-demo-switch-control',
+  standalone: true,
+  imports: [FormsModule, NzSwitchModule],
   template: `
     <nz-switch [(ngModel)]="switchValue" [nzControl]="true" (click)="clickSwitch()" [nzLoading]="loading"></nz-switch>
   `

diff --git a/components/switch/demo/disabled.ts b/components/switch/demo/disabled.ts
@@ -1,12 +1,18 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
 
 @Component({
   selector: 'nz-demo-switch-disabled',
+  standalone: true,
+  imports: [FormsModule, NzButtonModule, NzSwitchModule],
   template: `
     <nz-switch [(ngModel)]="switchValue" [nzDisabled]="isDisabled"></nz-switch>
     <br />
     <br />
-    <button nz-button [nzType]="'primary'" (click)="isDisabled = !isDisabled">Toggle disabled</button>
+    <button nz-button nzType="primary" (click)="isDisabled = !isDisabled">Toggle disabled</button>
   `
 })
 export class NzDemoSwitchDisabledComponent {

diff --git a/components/switch/demo/loading.ts b/components/switch/demo/loading.ts
@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
 
 @Component({
   selector: 'nz-demo-switch-loading',
+  standalone: true,
+  imports: [FormsModule, NzSwitchModule],
   template: `
     <nz-switch [ngModel]="true" nzLoading></nz-switch>
     <br />