refactor(module:time-picker,timeline): migrate demo to standalone mode (

#8815) * refactor(module:time-picker): migrate demo to standalone mode * refactor(module:timeline): migrate demo to standalone mode
NG-ZORRO · Oct 2, 2024 · d36d73d · d36d73d
1 parent d69fd33
commit d36d73d
Show file tree

Hide file tree

Showing 26 changed files with 226 additions and 220 deletions.
diff --git a/components/time-picker/demo/addon.ts b/components/time-picker/demo/addon.ts
@@ -1,7 +1,13 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
 
 @Component({
   selector: 'nz-demo-time-picker-addon',
+  standalone: true,
+  imports: [FormsModule, NzButtonModule, NzTimePickerModule],
   template: `
     <nz-time-picker [(ngModel)]="time" [nzAddOn]="addOnTemplate" #timePicker></nz-time-picker>
     <ng-template #addOnTemplate>

diff --git a/components/time-picker/demo/basic.ts b/components/time-picker/demo/basic.ts
@@ -1,8 +1,13 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
 
 @Component({
   selector: 'nz-demo-time-picker-basic',
-  template: ` <nz-time-picker [(ngModel)]="time" [nzDefaultOpenValue]="defaultOpenValue"></nz-time-picker> `
+  standalone: true,
+  imports: [FormsModule, NzTimePickerModule],
+  template: `<nz-time-picker [(ngModel)]="time" [nzDefaultOpenValue]="defaultOpenValue"></nz-time-picker>`
 })
 export class NzDemoTimePickerBasicComponent {
   time: Date | null = null;

diff --git a/components/time-picker/demo/bordered.ts b/components/time-picker/demo/bordered.ts
@@ -1,8 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
+
 @Component({
   selector: 'nz-demo-time-picker-bordered',
-  template: ` <nz-time-picker nzBorderless></nz-time-picker> `,
-  styles: []
+  standalone: true,
+  imports: [NzTimePickerModule],
+  template: `<nz-time-picker nzBorderless></nz-time-picker>`
 })
 export class NzDemoTimePickerBorderedComponent {}
diff --git a/components/time-picker/demo/disabled-part.ts b/components/time-picker/demo/disabled-part.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
+
 @Component({
   selector: 'nz-demo-time-picker-disabled-part',
+  standalone: true,
+  imports: [NzTimePickerModule],
   template: `
     <nz-time-picker
       [nzDisabledHours]="disabledHours"

diff --git a/components/time-picker/demo/disabled.ts b/components/time-picker/demo/disabled.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
+
 @Component({
   selector: 'nz-demo-time-picker-disabled',
-  template: ` <nz-time-picker nzDisabled></nz-time-picker> `
+  standalone: true,
+  imports: [NzTimePickerModule],
+  template: `<nz-time-picker nzDisabled></nz-time-picker>`
 })
 export class NzDemoTimePickerDisabledComponent {}
diff --git a/components/time-picker/demo/hide-column.ts b/components/time-picker/demo/hide-column.ts
@@ -1,8 +1,13 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
 
 @Component({
   selector: 'nz-demo-time-picker-hide-column',
-  template: ` <nz-time-picker [(ngModel)]="time" nzFormat="HH:mm"></nz-time-picker> `
+  standalone: true,
+  imports: [FormsModule, NzTimePickerModule],
+  template: `<nz-time-picker [(ngModel)]="time" nzFormat="HH:mm"></nz-time-picker>`
 })
 export class NzDemoTimePickerHideColumnComponent {
   time = new Date();

diff --git a/components/time-picker/demo/interval-options.ts b/components/time-picker/demo/interval-options.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
+
 @Component({
   selector: 'nz-demo-time-picker-interval-options',
-  template: ` <nz-time-picker [nzMinuteStep]="15" [nzSecondStep]="10"></nz-time-picker> `
+  standalone: true,
+  imports: [NzTimePickerModule],
+  template: `<nz-time-picker [nzMinuteStep]="15" [nzSecondStep]="10"></nz-time-picker>`
 })
 export class NzDemoTimePickerIntervalOptionsComponent {}
diff --git a/components/time-picker/demo/module b/components/time-picker/demo/module
diff --git a/components/time-picker/demo/size.ts b/components/time-picker/demo/size.ts
@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
 
 @Component({
   selector: 'nz-demo-time-picker-size',
+  standalone: true,
+  imports: [FormsModule, NzTimePickerModule],
   template: `
     <nz-time-picker [(ngModel)]="time" nzSize="large"></nz-time-picker>
     <nz-time-picker [(ngModel)]="time"></nz-time-picker>

diff --git a/components/time-picker/demo/status.ts b/components/time-picker/demo/status.ts
@@ -1,12 +1,16 @@
 import { Component } from '@angular/core';
 
+import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
+
 @Component({
   selector: 'nz-demo-time-picker-status',
+  standalone: true,
+  imports: [NzTimePickerModule],
   template: `
-    <nz-space nzDirection="vertical">
-      <nz-time-picker *nzSpaceItem nzStatus="error"></nz-time-picker>
-      <nz-time-picker *nzSpaceItem nzStatus="warning">></nz-time-picker>
-    </nz-space>
+    <nz-time-picker nzStatus="error"></nz-time-picker>
+    <br />
+    <br />
+    <nz-time-picker nzStatus="warning">></nz-time-picker>
   `
 })
 export class NzDemoTimePickerStatusComponent {}
diff --git a/components/time-picker/demo/use12-hours.ts b/components/time-picker/demo/use12-hours.ts
@@ -1,28 +1,19 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
 
 @Component({
   selector: 'nz-demo-time-picker-use12-hours',
+  standalone: true,
+  imports: [FormsModule, NzTimePickerModule],
   template: `
-    <nz-time-picker [(ngModel)]="time" [nzUse12Hours]="true" (ngModelChange)="log($event)"></nz-time-picker>
-    <nz-time-picker
-      [(ngModel)]="time"
-      [nzUse12Hours]="true"
-      (ngModelChange)="log($event)"
-      nzFormat="h:mm a"
-    ></nz-time-picker>
-  `,
-  styles: [
-    `
-      nz-time-picker {
-        margin: 0 8px 12px 0;
-      }
-    `
-  ]
+    <nz-time-picker [(ngModel)]="time" nzUse12Hours></nz-time-picker>
+    <br />
+    <br />
+    <nz-time-picker [(ngModel)]="time" nzUse12Hours nzFormat="h:mm a"></nz-time-picker>
+  `
 })
 export class NzDemoTimePickerUse12HoursComponent {
   time: Date | null = null;
-
-  log(value: Date): void {
-    console.log(value);
-  }
 }
diff --git a/components/time-picker/demo/value.ts b/components/time-picker/demo/value.ts
@@ -1,13 +1,14 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
 
 @Component({
   selector: 'nz-demo-time-picker-value',
-  template: ` <nz-time-picker [(ngModel)]="time" (ngModelChange)="log($event)"></nz-time-picker> `
+  standalone: true,
+  imports: [FormsModule, NzTimePickerModule],
+  template: `<nz-time-picker [(ngModel)]="time"></nz-time-picker>`
 })
 export class NzDemoTimePickerValueComponent {
   time: Date | null = null;
-
-  log(time: Date): void {
-    console.log(time && time.toTimeString());
-  }
 }
diff --git a/components/time-picker/time-holder.spec.ts b/components/time-picker/time-holder.spec.ts
@@ -63,12 +63,14 @@ describe('time holder', () => {
     const date = new Date(0, 0, 0, 15, 0, 0, 0);
     expect(mathSecondRound(holder.value!)).toEqual(mathSecondRound(date));
   });
+
   it('should set default selected 12-hours with value', () => {
     const holderPM = new TimeHolder().setValue(new Date(0, 0, 0, 15, 2, 3), true);
     expect(holderPM.selected12Hours).toBe('PM');
     const holderAM = new TimeHolder().setValue(new Date(0, 0, 0, 0, 2, 3), true);
     expect(holderAM.selected12Hours).toBe('AM');
   });
+
   it('should transform special value in 12-hour', () => {
     const holder = new TimeHolder().setValue(new Date(), true);
     holder.setSelected12Hours('am');