refactor(module:descriptions): migrate demo to standalone mode (#8763)

components/descriptions/demo/basic.ts

@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
+
 @Component({
   selector: 'nz-demo-descriptions-basic',
+  standalone: true,
+  imports: [NzDescriptionsModule],
   template: `
     <nz-descriptions nzTitle="User Info">
       <nz-descriptions-item nzTitle="UserName">Zhou Maomao</nz-descriptions-item>

components/descriptions/demo/border.ts

@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
 
+import { NzBadgeModule } from 'ng-zorro-antd/badge';
+import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
+
 @Component({
   selector: 'nz-demo-descriptions-border',
+  standalone: true,
+  imports: [NzBadgeModule, NzDescriptionsModule],
   template: `
     <nz-descriptions nzTitle="User Info" nzBordered>
       <nz-descriptions-item nzTitle="Product">Cloud Database</nz-descriptions-item>

components/descriptions/demo/custom-size.ts

@@ -1,9 +1,13 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
-import { NzDescriptionsSize } from 'ng-zorro-antd/descriptions';
+import { NzDescriptionsModule, NzDescriptionsSize } from 'ng-zorro-antd/descriptions';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
 
 @Component({
   selector: 'nz-demo-descriptions-custom-size',
+  standalone: true,
+  imports: [FormsModule, NzDescriptionsModule, NzRadioModule],
   template: `
     <nz-radio-group [(ngModel)]="size">
       <label nz-radio nzValue="default">default</label>

components/descriptions/demo/responsive.ts

@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
+
 @Component({
   selector: 'nz-demo-descriptions-responsive',
+  standalone: true,
+  imports: [NzDescriptionsModule],
   template: `
     <nz-descriptions
       nzTitle="Responsive Descriptions"

components/descriptions/demo/vertical-border.ts

@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
 
+import { NzBadgeModule } from 'ng-zorro-antd/badge';
+import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
+
 @Component({
   selector: 'nz-demo-descriptions-vertical-border',
+  standalone: true,
+  imports: [NzBadgeModule, NzDescriptionsModule],
   template: `
     <nz-descriptions nzTitle="User Info" nzBordered nzLayout="vertical">
       <nz-descriptions-item nzTitle="Product">Cloud Database</nz-descriptions-item>

components/descriptions/demo/vertical.ts

@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
+
 @Component({
   selector: 'nz-demo-descriptions-vertical',
+  standalone: true,
+  imports: [NzDescriptionsModule],
   template: `
     <nz-descriptions nzTitle="User Info" nzLayout="vertical">
       <nz-descriptions-item nzTitle="UserName">Zhou Maomao</nz-descriptions-item>

components/descriptions/descriptions.spec.ts

@@ -1,10 +1,8 @@
-import { BidiModule, Dir } from '@angular/cdk/bidi';
+import { BidiModule, Dir, Direction } from '@angular/cdk/bidi';
 import { Component, ViewChild } from '@angular/core';
-import { ComponentFixture, fakeAsync, tick } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
-import { ComponentBed, createComponentBed } from 'ng-zorro-antd/core/testing/component-bed';
-
 import { NzDescriptionsComponent } from './descriptions.component';
 import { NzDescriptionsModule } from './descriptions.module';
 
@@ -13,20 +11,15 @@ declare const viewport: any;
 
 describe('nz descriptions', () => {
   describe('with different spans', () => {
-    let testBed: ComponentBed<NzTestDescriptionsComponent>;
     let testComponent: NzTestDescriptionsComponent;
     let componentElement: HTMLElement;
     let fixture: ComponentFixture<NzTestDescriptionsComponent>;
     let rows;
 
     beforeEach(() => {
-      testBed = createComponentBed(NzTestDescriptionsComponent, {
-        imports: [NzDescriptionsModule]
-      });
-      fixture = testBed.fixture;
+      fixture = TestBed.createComponent(NzTestDescriptionsComponent);
       testComponent = fixture.componentInstance;
       componentElement = fixture.debugElement.nativeElement;
-
       fixture.detectChanges();
     });
 
@@ -76,7 +69,7 @@ describe('nz descriptions', () => {
       rows = componentElement.querySelectorAll('.ant-descriptions-row');
       const tds = componentElement.querySelectorAll('.ant-descriptions-item');
       expect(rows.length).toBe(1);
-      expect((tds[1] as HTMLTableDataCellElement).colSpan).toBe(4);
+      expect((tds[1] as HTMLTableCellElement).colSpan).toBe(4);
       spyOnWarn.calls.reset();
     });
 
@@ -126,17 +119,12 @@ describe('nz descriptions', () => {
   });
 
   describe('RTL', () => {
-    let testBed: ComponentBed<NzTestDescriptionsRtlComponent>;
     let fixture: ComponentFixture<NzTestDescriptionsRtlComponent>;
     let componentElement: HTMLElement;
 
     beforeEach(() => {
-      testBed = createComponentBed(NzTestDescriptionsRtlComponent, {
-        declarations: [NzTestDescriptionsComponent],
-        imports: [NzDescriptionsModule, BidiModule]
-      });
-      componentElement = testBed.debugElement.query(By.directive(NzDescriptionsComponent)).nativeElement;
-      fixture = testBed.fixture;
+      fixture = TestBed.createComponent(NzTestDescriptionsRtlComponent);
+      componentElement = fixture.debugElement.query(By.directive(NzDescriptionsComponent)).nativeElement;
       fixture.detectChanges();
     });
 
@@ -150,7 +138,8 @@ describe('nz descriptions', () => {
 });
 
 @Component({
-  // eslint-disable-next-line
+  standalone: true,
+  imports: [NzDescriptionsModule],
   selector: 'nz-test-descriptions',
   template: `
     <nz-descriptions [nzTitle]="title" [nzBordered]="bordered" [nzColumn]="column">
@@ -163,12 +152,14 @@ describe('nz descriptions', () => {
 export class NzTestDescriptionsComponent {
   bordered = false;
   colspanArray: number[] = [1, 1, 1];
-  column: number | { [key: string]: number } = 3;
+  column: NzDescriptionsComponent['nzColumn'] = 3;
   title = 'Title';
   itemTitle = 'Item Title ';
 }
 
 @Component({
+  standalone: true,
+  imports: [BidiModule, NzTestDescriptionsComponent],
   template: `
     <div [dir]="direction">
       <nz-test-descriptions></nz-test-descriptions>
@@ -177,5 +168,5 @@ export class NzTestDescriptionsComponent {
 })
 export class NzTestDescriptionsRtlComponent {
   @ViewChild(Dir) dir!: Dir;
-  direction = 'rtl';
+  direction: Direction = 'rtl';
 }