refactor(module:drawer): migrate demo to standalone mode (#8762)

components/drawer/demo/basic-right.ts

@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzDrawerModule } from 'ng-zorro-antd/drawer';
+
 @Component({
   selector: 'nz-demo-drawer-basic-right',
+  standalone: true,
+  imports: [NzButtonModule, NzDrawerModule],
   template: `
     <button nz-button nzType="primary" (click)="open()">Open</button>
     <nz-drawer

components/drawer/demo/from-drawer.ts

@@ -1,7 +1,16 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
+import { NzDrawerModule } from 'ng-zorro-antd/drawer';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+
 @Component({
   selector: 'nz-demo-drawer-from-drawer',
+  standalone: true,
+  imports: [NzButtonModule, NzDrawerModule, NzDatePickerModule, NzFormModule, NzInputModule, NzSelectModule],
   template: `
     <button nz-button nzType="primary" (click)="open()">Create</button>
     <nz-drawer

components/drawer/demo/multi-level-drawer.ts

@@ -1,7 +1,16 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzDrawerModule } from 'ng-zorro-antd/drawer';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzListModule } from 'ng-zorro-antd/list';
+import { NzTagModule } from 'ng-zorro-antd/tag';
+
 @Component({
   selector: 'nz-demo-drawer-multi-level-drawer',
+  standalone: true,
+  imports: [NzButtonModule, NzDrawerModule, NzFormModule, NzInputModule, NzListModule, NzTagModule],
   template: `
     <button nz-button nzType="primary" (click)="open()">New Cookbook</button>
     <nz-drawer

components/drawer/demo/placement.ts

@@ -1,9 +1,14 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
-import { NzDrawerPlacement } from 'ng-zorro-antd/drawer';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzDrawerModule, NzDrawerPlacement } from 'ng-zorro-antd/drawer';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
 
 @Component({
   selector: 'nz-demo-drawer-placement',
+  standalone: true,
+  imports: [FormsModule, NzButtonModule, NzDrawerModule, NzRadioModule],
   template: `
     <nz-radio-group [(ngModel)]="placement">
       <label nz-radio nzValue="top">top</label>

components/drawer/demo/service.ts

@@ -1,11 +1,16 @@
-/* declarations: NzDrawerCustomComponent */
-
 import { Component, TemplateRef, ViewChild, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
-import { NZ_DRAWER_DATA, NzDrawerRef, NzDrawerService } from 'ng-zorro-antd/drawer';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzDividerModule } from 'ng-zorro-antd/divider';
+import { NZ_DRAWER_DATA, NzDrawerModule, NzDrawerRef, NzDrawerService } from 'ng-zorro-antd/drawer';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzInputModule } from 'ng-zorro-antd/input';
 
 @Component({
   selector: 'nz-demo-drawer-service',
+  standalone: true,
+  imports: [FormsModule, NzButtonModule, NzDrawerModule, NzFormModule, NzInputModule],
   template: `
     <ng-template #drawerTemplate let-data let-drawerRef="drawerRef">
       value: {{ data?.value }}
@@ -81,6 +86,8 @@ export class NzDemoDrawerServiceComponent {
 
 @Component({
   selector: 'nz-drawer-custom-component',
+  standalone: true,
+  imports: [FormsModule, NzButtonModule, NzDividerModule, NzInputModule],
   template: `
     <div>
       <input nz-input [(ngModel)]="nzData.value" />

components/drawer/demo/size.ts

@@ -1,7 +1,13 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzDrawerModule } from 'ng-zorro-antd/drawer';
+import { NzSpaceModule } from 'ng-zorro-antd/space';
+
 @Component({
   selector: 'nz-demo-drawer-size',
+  standalone: true,
+  imports: [NzButtonModule, NzDrawerModule, NzSpaceModule],
   template: `
     <nz-space>
       <button *nzSpaceItem nz-button nzType="primary" (click)="showDefault()">Open Default Size (378px)</button>

components/drawer/demo/user-profile.ts

@@ -1,7 +1,15 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
+import { NzDividerModule } from 'ng-zorro-antd/divider';
+import { NzDrawerModule } from 'ng-zorro-antd/drawer';
+import { NzListModule } from 'ng-zorro-antd/list';
+
 @Component({
   selector: 'nz-demo-drawer-user-profile',
+  standalone: true,
+  imports: [NzButtonModule, NzDescriptionsModule, NzDividerModule, NzDrawerModule, NzListModule],
   template: `
     <nz-list [nzDataSource]="data" [nzRenderItem]="item" [nzItemLayout]="'horizontal'">
       <ng-template #item let-item>
@@ -23,7 +31,7 @@ import { Component } from '@angular/core';
     </nz-list>
     <nz-drawer [nzVisible]="visible" [nzWidth]="640" [nzClosable]="false" (nzOnClose)="close()">
       <ng-container *nzDrawerContent>
-        <p class="title" style=" margin-bottom: 24px;">User Profile</p>
+        <p class="title">User Profile</p>
         <nz-descriptions [nzColumn]="2" nzTitle="Personal">
           <nz-descriptions-item nzTitle="Full Name" [nzSpan]="1">Lily</nz-descriptions-item>
           <nz-descriptions-item nzTitle="Account" [nzSpan]="1">AntDesign&#64;example.com</nz-descriptions-item>
@@ -65,18 +73,7 @@ import { Component } from '@angular/core';
         color: rgba(0, 0, 0, 0.85);
         line-height: 24px;
         display: block;
-        margin-bottom: 16px;
-      }
-      .item-wrap {
-        font-size: 14px;
-        line-height: 22px;
-        margin-bottom: 7px;
-        color: rgba(0, 0, 0, 0.65);
-      }
-      .label {
-        margin-right: 8px;
-        display: inline-block;
-        color: rgba(0, 0, 0, 0.85);
+        margin-bottom: 24px;
       }
     `
   ]

components/drawer/drawer.spec.ts

@@ -1,4 +1,4 @@
-import { BidiModule, Dir } from '@angular/cdk/bidi';
+import { BidiModule, Dir, Direction } from '@angular/cdk/bidi';
 import { ESCAPE } from '@angular/cdk/keycodes';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { Component, Input, TemplateRef, ViewChild, inject } from '@angular/core';
@@ -12,9 +12,12 @@ import {
 } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
 import { dispatchKeyboardEvent } from 'ng-zorro-antd/core/testing';
-import { NZ_DRAWER_DATA } from 'ng-zorro-antd/drawer/drawer-options';
+import { NZ_DRAWER_DATA, NzDrawerPlacement } from 'ng-zorro-antd/drawer/drawer-options';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
 
 import { NzDrawerRef } from './drawer-ref';
 import { NzDrawerComponent } from './drawer.component';
@@ -24,8 +27,7 @@ import { NzDrawerService } from './drawer.service';
 describe('NzDrawerComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [BidiModule, NzDrawerModule, NoopAnimationsModule, NzNoAnimationDirective],
-      declarations: [NzTestDrawerComponent, NzTestDrawerRtlComponent]
+      imports: [NoopAnimationsModule, NzIconTestModule]
     }).compileComponents();
   }));
   describe('default', () => {
@@ -526,7 +528,7 @@ describe('NzDrawerComponent', () => {
       ).toBe(false);
       component.close();
       fixture.detectChanges();
-      component.placement = 'Invalid';
+      component.placement = 'Invalid' as unknown as NzDrawerPlacement;
       fixture.detectChanges();
       component.open();
       expect(
@@ -681,9 +683,8 @@ describe('NzDrawerService', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [NzDrawerModule, NoopAnimationsModule],
-      providers: [NzDrawerService],
-      declarations: [NzTestDrawerWithServiceComponent, NzDrawerCustomComponent]
+      imports: [NoopAnimationsModule],
+      providers: [NzDrawerService]
     });
   }));
 
@@ -801,9 +802,13 @@ describe('NzDrawerService', () => {
 });
 
 @Component({
+  standalone: true,
+  imports: [NzDrawerModule, NzIconModule, NzNoAnimationDirective],
   template: `
     <button (click)="open()">Open</button>
-    <ng-template #closeIconTemplate><span nz-icon nzType="close-circle" nzTheme="outline"></span></ng-template>
+    <ng-template #closeIconTemplate>
+      <span nz-icon nzType="close-square" nzTheme="outline"></span>
+    </ng-template>
     <ng-template #titleTemplate>
       <span class="custom-title">title</span>
       <button class="close-btn"></button>
@@ -848,23 +853,23 @@ class NzTestDrawerComponent {
   closable = true;
   maskClosable = true;
   showMask = true;
-  title: string | TemplateRef<void> = '';
-  extra: string | TemplateRef<void> = '';
-  footer: string | TemplateRef<void> = '';
+  title: string | TemplateRef<{}> = '';
+  extra: string | TemplateRef<{}> = '';
+  footer: string | TemplateRef<{}> = '';
   stringTitle = 'test';
   size: 'large' | 'default' = 'default';
   width?: string | number;
   height?: string | number;
-  placement = 'left';
+  placement: NzDrawerPlacement = 'left';
   noAnimation = false;
-  closeIcon?: TemplateRef<void> | string;
+  closeIcon!: TemplateRef<void> | string;
   offsetX = 0;
   offsetY = 0;
   triggerVisible = jasmine.createSpy('visibleChange');
 
-  @ViewChild('titleTemplate', { static: false }) titleTemplateRef!: TemplateRef<void>;
+  @ViewChild('titleTemplate', { static: false }) titleTemplateRef!: TemplateRef<{}>;
   @ViewChild('closeIconTemplate', { static: false }) closeIconTemplateRef!: TemplateRef<void>;
-  @ViewChild('customFooter', { static: false }) templateFooter!: TemplateRef<void>;
+  @ViewChild('customFooter', { static: false }) templateFooter!: TemplateRef<{}>;
   @ViewChild(NzDrawerComponent, { static: false }) drawerComponent!: NzDrawerComponent;
 
   open(): void {
@@ -877,6 +882,7 @@ class NzTestDrawerComponent {
 }
 
 @Component({
+  standalone: true,
   template: `
     <ng-template #drawerTemplate>
       <span>Template</span>
@@ -906,6 +912,8 @@ class NzTestDrawerWithServiceComponent {
 }
 
 @Component({
+  standalone: true,
+  imports: [NzButtonModule],
   template: `
     <div>
       <p>Custom Component</p>
@@ -925,6 +933,8 @@ export class NzDrawerCustomComponent {
 }
 
 @Component({
+  standalone: true,
+  imports: [BidiModule, NzDrawerModule],
   template: `
     <div [dir]="direction">
       <nz-drawer [nzVisible]="visible" (nzOnClose)="close()">
@@ -939,7 +949,7 @@ export class NzDrawerCustomComponent {
 })
 export class NzTestDrawerRtlComponent {
   @ViewChild(Dir) dir!: Dir;
-  direction = 'rtl';
+  direction: Direction = 'rtl';
   visible = false;
 
   open(): void {