refactor(module:date-picker): migrate demo to standalone mode (#8760)

* refactor(module:date-picker): migrate demo to standalone mode

* test(module:comment): fix icons not provided

components/comment/comment.spec.ts

@@ -3,9 +3,7 @@ import { Component, NO_ERRORS_SCHEMA, ViewChild } from '@angular/core';
 import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
-import { DislikeOutline, DislikeTwoTone, LikeOutline, LikeTwoTone } from '@ant-design/icons-angular/icons';
-
-import { provideNzIcons } from 'ng-zorro-antd/icon';
+import { provideNzIconsTesting } from 'ng-zorro-antd/icon/testing';
 
 import { NzCommentComponent } from './comment.component';
 import { NzDemoCommentBasicComponent } from './demo/basic';
@@ -16,7 +14,7 @@ import { NzDemoCommentNestedComponent } from './demo/nested';
 describe('NzCommentComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      providers: [provideNzIcons([LikeOutline, DislikeOutline, LikeTwoTone, DislikeTwoTone])],
+      providers: [provideNzIconsTesting()],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
   }));

components/date-picker/date-picker.component.spec.ts

@@ -21,14 +21,14 @@ import {
 } from 'ng-zorro-antd/core/testing';
 import { ComponentBed, createComponentBed } from 'ng-zorro-antd/core/testing/component-bed';
 import { NgStyleInterface, NzStatus } from 'ng-zorro-antd/core/types';
+import { NzFormModule } from 'ng-zorro-antd/form';
 import { NZ_DATE_LOCALE, NzI18nModule, NzI18nService } from 'ng-zorro-antd/i18n';
+import en_US from 'ng-zorro-antd/i18n/languages/en_US';
 import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
 
-import { NzFormModule } from '../form';
-import en_US from '../i18n/languages/en_US';
-import { NzDatePickerComponent } from './date-picker.component';
+import { NzDatePickerComponent, NzDatePickerSizeType, NzPlacement } from './date-picker.component';
 import { NzDatePickerModule } from './date-picker.module';
-import { NzPanelChangeType } from './standard-types';
+import { CompatibleDate, NzPanelChangeType } from './standard-types';
 import { ENTER_EVENT, getPickerAbstract, getPickerInput } from './testing/util';
 import { PREFIX_CLASS } from './util';
 
@@ -160,7 +160,7 @@ describe('NzDatePickerComponent', () => {
       expect(getPickerContainer()).not.toBeNull();
     }));
 
-    it('should have focus when opened progammatically', fakeAsync(() => {
+    it('should have focus when opened programmatically', fakeAsync(() => {
       fixture.detectChanges();
       openPickerByCode();
       expect(document.activeElement).toEqual(getPickerInput(fixture.debugElement));
@@ -219,7 +219,7 @@ describe('NzDatePickerComponent', () => {
     }));
 
     /* Issue https://github.com/NG-ZORRO/ng-zorro-antd/issues/1539 */
-    it('should be openable after closed by "Escape" key', fakeAsync(() => {
+    it('should be able to open after closed by "Escape" key', fakeAsync(() => {
       fixture.detectChanges();
       openPickerByClickTrigger();
       expect(getPickerContainer()).not.toBeNull();
@@ -893,7 +893,7 @@ describe('NzDatePickerComponent', () => {
         queryFromOverlay('.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner').textContent!.trim()
       ).toBe('11');
 
-      // Click to choose a hour
+      // Click to choose an hour
       dispatchMouseEvent(queryFromOverlay('.ant-picker-time-panel-cell:first-child'), 'click');
       fixture.detectChanges();
       flush();
@@ -1009,7 +1009,7 @@ describe('NzDatePickerComponent', () => {
       expect(getPickerInput(fixture.debugElement).value).toBe('');
     }));
 
-    it('should support updating the disabledtime state when the current time changes', fakeAsync(() => {
+    it('should support updating the nzDisabledTime state when the current time changes', fakeAsync(() => {
       fixtureInstance.nzShowTime = true;
       fixtureInstance.nzDisabledTime = (current: Date) => ({
         nzDisabledHours: () => {
@@ -1078,7 +1078,7 @@ describe('NzDatePickerComponent', () => {
       fixture.detectChanges();
       const result = (nzOnChange.calls.allArgs()[0] as Date[])[0];
       expect(isSameDay(new Date(), result)).toBeTruthy();
-      expect(queryFromOverlay('.ant-picker-container')).toBeFalsy(); // Should closed
+      expect(queryFromOverlay('.ant-picker-container')).toBeFalsy(); // Should be closed
     }));
 
     it('should support nzShowNow', fakeAsync(() => {
@@ -1108,7 +1108,7 @@ describe('NzDatePickerComponent', () => {
       fixture.detectChanges();
       tick(500);
       fixture.detectChanges();
-      expect(queryFromOverlay('.ant-picker-container')).toBeFalsy(); // Should closed
+      expect(queryFromOverlay('.ant-picker-container')).toBeFalsy(); // Should be closed
     }));
 
     it('should support nzMode', fakeAsync(() => {
@@ -1217,14 +1217,14 @@ describe('NzDatePickerComponent', () => {
       openPickerByClickTrigger();
       const input = getPickerInput(fixture.debugElement);
 
-      // Wrong inputing support
+      // Wrong input support
       typeInElement('wrong', input);
       fixture.detectChanges();
       flush();
       fixture.detectChanges();
       // expect(input.classList.contains('ant-calendar-input-invalid')).toBeTruthy();
 
-      // Correct inputing
+      // Correct input
       input.value = '2018-11-22';
       input.dispatchEvent(ENTER_EVENT);
       // dispatchKeyboardEvent(input, 'keyup', ENTER); // Not working?
@@ -1237,12 +1237,12 @@ describe('NzDatePickerComponent', () => {
     }));
 
     // #6070
-    it('should reset after inputing invalid value and close panel', fakeAsync(() => {
+    it('should reset after input invalid value and close panel', fakeAsync(() => {
       fixture.detectChanges();
       openPickerByClickTrigger();
       const input = getPickerInput(fixture.debugElement);
 
-      // Wrong inputing support
+      // Wrong input support
       typeInElement('wrong', input);
       fixture.detectChanges();
       flush();
@@ -1537,11 +1537,11 @@ class NzTestDatePickerComponent {
   nzPlaceHolder!: string;
   nzPopupStyle!: NgStyleInterface;
   nzDropdownClassName!: string;
-  nzSize!: string;
+  nzSize!: NzDatePickerSizeType;
 
   nzOnChange(_: Date | null): void {}
 
-  nzOnCalendarChange(): void {}
+  nzOnCalendarChange(_: Array<Date | null>): void {}
 
   nzOnOpenChange(_: boolean): void {}
 
@@ -1558,13 +1558,13 @@ class NzTestDatePickerComponent {
   nzBorderless = false;
   nzInline = false;
   nzBackdrop = false;
-  nzPlacement = 'bottomLeft';
+  nzPlacement: NzPlacement = 'bottomLeft';
   nzShowWeekNumber = false;
 
   // nzRanges;
   nzOnPanelChange(_: NzPanelChangeType): void {}
 
-  nzOnOk(_: Date): void {}
+  nzOnOk(_: CompatibleDate | null): void {}
 
   // --- Suite 2
   nzOpen: boolean = false;

components/date-picker/date-picker.component.ts

@@ -87,7 +87,7 @@ const POPUP_STYLE_PATCH = { position: 'relative' }; // Aim to override antd's st
 const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'datePicker';
 
 export type NzDatePickerSizeType = 'large' | 'default' | 'small';
-export type NzPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
+export type NzPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'; // todo: export it in public API
 
 /**
  * The base picker for all common APIs

components/date-picker/demo/basic.ts

@@ -1,11 +1,16 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
 import { getISOWeek } from 'date-fns';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
 import { en_US, NzI18nService, zh_CN } from 'ng-zorro-antd/i18n';
 
 @Component({
   selector: 'nz-demo-date-picker-basic',
+  standalone: true,
+  imports: [FormsModule, NzButtonModule, NzDatePickerModule],
   template: `
     <nz-date-picker [(ngModel)]="date" (ngModelChange)="onChange($event)"></nz-date-picker>
     <br />

components/date-picker/demo/bordered.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 
+import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
+
 @Component({
   selector: 'nz-demo-date-picker-bordered',
+  standalone: true,
+  imports: [NzDatePickerModule],
   template: `
     <nz-date-picker nzBorderless></nz-date-picker>
     <br />
     <nz-range-picker nzBorderless></nz-range-picker>
-    <br />
   `,
   styles: [
     `

components/date-picker/demo/date-render.ts

@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
+
 @Component({
   selector: 'nz-demo-date-picker-date-render',
+  standalone: true,
+  imports: [NzDatePickerModule],
   template: `
     <nz-date-picker [nzDateRender]="tplRender"></nz-date-picker>
     <nz-range-picker [nzDateRender]="tplRender"></nz-range-picker>

components/date-picker/demo/disabled-date.ts

@@ -2,10 +2,12 @@ import { Component } from '@angular/core';
 
 import { differenceInCalendarDays, setHours } from 'date-fns';
 
-import { DisabledTimeFn, DisabledTimePartial } from 'ng-zorro-antd/date-picker';
+import { DisabledTimeFn, DisabledTimePartial, NzDatePickerModule } from 'ng-zorro-antd/date-picker';
 
 @Component({
   selector: 'nz-demo-date-picker-disabled-date',
+  standalone: true,
+  imports: [NzDatePickerModule],
   template: `
     <nz-date-picker
       nzFormat="yyyy-MM-dd HH:mm:ss"

components/date-picker/demo/disabled.ts

@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
+
 @Component({
   selector: 'nz-demo-date-picker-disabled',
+  standalone: true,
+  imports: [NzDatePickerModule],
   template: `
     <nz-date-picker nzDisabled></nz-date-picker>
     <br />

components/date-picker/demo/extra-footer.ts

@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
+
 @Component({
   selector: 'nz-demo-date-picker-extra-footer',
+  standalone: true,
+  imports: [NzDatePickerModule],
   template: `
     <nz-date-picker [nzRenderExtraFooter]="footerRender"></nz-date-picker>
     <br />

components/date-picker/demo/format.ts

@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
+
 @Component({
   selector: 'nz-demo-date-picker-format',
+  standalone: true,
+  imports: [NzDatePickerModule],
   template: `
     <nz-date-picker [nzFormat]="dateFormat"></nz-date-picker>
     <br />

components/date-picker/demo/inline.ts

@@ -1,9 +1,15 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
 import { getISOWeek } from 'date-fns';
 
+import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
+import { NzTabsModule } from 'ng-zorro-antd/tabs';
+
 @Component({
   selector: 'nz-demo-date-picker-inline',
+  standalone: true,
+  imports: [FormsModule, NzDatePickerModule, NzTabsModule],
   template: `
     <nz-tabset>
       <nz-tab nzTitle="Default">

components/date-picker/demo/placement.ts

@@ -1,7 +1,14 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
+import { NzPlacement } from 'ng-zorro-antd/date-picker/date-picker.component';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
 
 @Component({
   selector: 'nz-demo-date-picker-placement',
+  standalone: true,
+  imports: [FormsModule, NzDatePickerModule, NzRadioModule],
   template: `
     <nz-radio-group [(ngModel)]="placement">
       <label nz-radio-button nzValue="bottomLeft">bottomLeft</label>
@@ -25,5 +32,5 @@ import { Component } from '@angular/core';
   ]
 })
 export class NzDemoDatePickerPlacementComponent {
-  placement: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight' = 'bottomLeft';
+  placement: NzPlacement = 'bottomLeft';
 }

components/date-picker/demo/presetted-ranges.ts

@@ -1,9 +1,14 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
 import { endOfMonth } from 'date-fns';
 
+import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
+
 @Component({
   selector: 'nz-demo-date-picker-presetted-ranges',
+  standalone: true,
+  imports: [FormsModule, NzDatePickerModule],
   template: `
     <nz-range-picker [nzRanges]="ranges" ngModel (ngModelChange)="onChange($event)"></nz-range-picker>
     <br />

components/date-picker/demo/range-picker.ts

@@ -1,9 +1,14 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
 import { getISOWeek } from 'date-fns';
 
+import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
+
 @Component({
   selector: 'nz-demo-date-picker-range-picker',
+  standalone: true,
+  imports: [FormsModule, NzDatePickerModule],
   template: `
     <nz-range-picker [(ngModel)]="date" (ngModelChange)="onChange($event)"></nz-range-picker>
     <br />

components/date-picker/demo/size.ts

@@ -1,7 +1,13 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzDatePickerModule, NzDatePickerSizeType } from 'ng-zorro-antd/date-picker';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
 
 @Component({
   selector: 'nz-demo-date-picker-size',
+  standalone: true,
+  imports: [FormsModule, NzDatePickerModule, NzRadioModule],
   template: `
     <nz-radio-group [(ngModel)]="size">
       <label nz-radio-button nzValue="large">large</label>
@@ -30,5 +36,5 @@ import { Component } from '@angular/core';
   ]
 })
 export class NzDemoDatePickerSizeComponent {
-  size: 'large' | 'small' | 'default' = 'default';
+  size: NzDatePickerSizeType = 'default';
 }

components/date-picker/demo/start-end.ts

@@ -1,9 +1,12 @@
 import { Component, ViewChild } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
-import { NzDatePickerComponent } from 'ng-zorro-antd/date-picker';
+import { NzDatePickerComponent, NzDatePickerModule } from 'ng-zorro-antd/date-picker';
 
 @Component({
   selector: 'nz-demo-date-picker-start-end',
+  standalone: true,
+  imports: [FormsModule, NzDatePickerModule],
   template: `
     <nz-date-picker
       [nzDisabledDate]="disabledStartDate"

components/date-picker/demo/status.ts

@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
 
+import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
+import { NzSpaceModule } from 'ng-zorro-antd/space';
+
 @Component({
   selector: 'nz-demo-date-picker-status',
+  standalone: true,
+  imports: [NzDatePickerModule, NzSpaceModule],
   template: `
     <nz-space nzDirection="vertical" style="width: 100%">
       <nz-date-picker *nzSpaceItem nzStatus="error" style="width: 100%"></nz-date-picker>

components/date-picker/demo/switch.ts

@@ -1,7 +1,14 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzSpaceModule } from 'ng-zorro-antd/space';
 
 @Component({
   selector: 'nz-demo-date-picker-switch',
+  standalone: true,
+  imports: [FormsModule, NzDatePickerModule, NzSelectModule, NzSpaceModule],
   template: `
     <nz-space>
       <nz-select *nzSpaceItem [(ngModel)]="mode">