docs: sc of demo (#1728)

.vscode/settings.json

@@ -12,8 +12,10 @@
     "**/node_modules": true,
     "**/bower_components": true,
     "**/*.code-search": true,
-    "**/dist": true,
+    "**/dist/*/**": true,
     "**/ng-alain": true,
+    "**/.yarn": true,
+    "**/src/app/routes/gen/": true
   },
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit",

angular.json

@@ -105,7 +105,8 @@
             "development": {
               "optimization": false,
               "extractLicenses": false,
-              "sourceMap": true
+              "sourceMap": true,
+              "ssr": false
             }
           },
           "defaultConfiguration": "production"

packages/abc/auto-focus/auto-focus.directive.ts

@@ -6,7 +6,8 @@ import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 @Directive({
   selector: '[auto-focus], input[autofocus="autofocus"], textarea[autofocus="autofocus"]',
-  exportAs: 'autoFocus'
+  exportAs: 'autoFocus',
+  standalone: true
 })
 export class AutoFocusDirective implements AfterViewInit, OnDestroy {
   static ngAcceptInputType_enabled: BooleanInput;

packages/abc/auto-focus/auto-focus.module.ts

@@ -5,7 +5,7 @@ import { AutoFocusDirective } from './auto-focus.directive';
 const COMPONENTS = [AutoFocusDirective];
 
 @NgModule({
-  declarations: COMPONENTS,
+  imports: COMPONENTS,
   exports: COMPONENTS
 })
 export class AutoFocusModule {}

packages/abc/auto-focus/demo/simple.md

@@ -16,16 +16,22 @@ Simplest of usage.
 ```ts
 import { Component } from '@angular/core';
 
+import { AutoFocusDirective } from '@delon/abc/auto-focus';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzInputModule } from 'ng-zorro-antd/input';
+
 @Component({
   selector: 'app-demo',
   template: `
     <button nz-button (click)="showInput = !showInput">Toggle Input</button>
     @if (showInput) {
-      <div  class="mt-md">
+      <div class="mt-md">
         <input nz-input auto-focus />
       </div>
     }
   `,
+  standalone: true,
+  imports: [NzButtonModule, NzInputModule, AutoFocusDirective]
 })
 export class DemoComponent {
   showInput = false;

packages/abc/avatar-list/demo/maxLength.md

@@ -11,15 +11,23 @@ item component.
 ```ts
 import { Component } from '@angular/core';
 
+import { AvatarListModule } from '@delon/abc/avatar-list';
+
 @Component({
   selector: 'app-demo',
-  template: ` <avatar-list size="mini" maxLength="3" [excessItemsStyle]="{ color: '#f56a00', backgroundColor: '#fde3cf' }">
-    <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png"></avatar-list-item>
-    <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png"></avatar-list-item>
-    <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"></avatar-list-item>
-    <avatar-list-item tips="Cipchk" text="Cipchk"></avatar-list-item>
-    <avatar-list-item tips="heart-o" icon="heart-o"></avatar-list-item>
+  template: ` <avatar-list
+    size="mini"
+    maxLength="3"
+    [excessItemsStyle]="{ color: '#f56a00', backgroundColor: '#fde3cf' }"
+  >
+    <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
+    <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
+    <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+    <avatar-list-item tips="Cipchk" text="Cipchk" />
+    <avatar-list-item tips="heart-o" icon="heart-o" />
   </avatar-list>`,
+  standalone: true,
+  imports: [AvatarListModule]
 })
 export class DemoComponent {}
 ```

packages/abc/avatar-list/demo/simple.md

@@ -16,15 +16,19 @@ Simplest of usage.
 ```ts
 import { Component } from '@angular/core';
 
+import { AvatarListModule } from '@delon/abc/avatar-list';
+
 @Component({
   selector: 'app-demo',
   template: ` <avatar-list size="mini">
-    <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png"></avatar-list-item>
-    <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png"></avatar-list-item>
-    <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"></avatar-list-item>
-    <avatar-list-item tips="Cipchk" text="Cipchk"></avatar-list-item>
-    <avatar-list-item tips="heart-o" icon="heart-o"></avatar-list-item>
+    <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
+    <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
+    <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
+    <avatar-list-item tips="Cipchk" text="Cipchk" />
+    <avatar-list-item tips="heart-o" icon="heart-o" />
   </avatar-list>`,
+  standalone: true,
+  imports: [AvatarListModule]
 })
 export class DemoComponent {}
 ```

packages/abc/cell/demo/simple.md

@@ -14,13 +14,16 @@ order: 0
 Simplest of usage.
 
 ```ts
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { JsonPipe } from '@angular/common';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { DomSanitizer } from '@angular/platform-browser';
 import { delay, finalize, of, take } from 'rxjs';
 
 import { subDays } from 'date-fns';
 
-import { CellBadge, CellFuValue, CellOptions, CellRenderType } from '@delon/abc/cell';
+import { CellBadge, CellFuValue, CellModule, CellOptions, CellRenderType } from '@delon/abc/cell';
+import { NzGridModule } from 'ng-zorro-antd/grid';
 
 @Component({
   selector: 'app-demo',
@@ -154,9 +157,13 @@ import { CellBadge, CellFuValue, CellOptions, CellRenderType } from '@delon/abc/
       }
     `
   ],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CellModule, FormsModule, JsonPipe, NzGridModule]
 })
 export class DemoComponent implements OnInit {
+  private readonly ds = inject(DomSanitizer);
+  private readonly cdr = inject(ChangeDetectorRef);
   value: unknown = 'string';
   checkbox = false;
   radio = true;
@@ -187,11 +194,6 @@ export class DemoComponent implements OnInit {
     }
   };
 
-  constructor(
-    private ds: DomSanitizer,
-    private cdr: ChangeDetectorRef
-  ) {}
-
   ngOnInit(): void {
     this.again();
   }

packages/abc/count-down/demo/accuracy.md

@@ -15,16 +15,21 @@ The `0.1s` accuracy usage.
 
 ```ts
 import { Component } from '@angular/core';
+
 import { CountdownConfig } from 'ngx-countdown';
 
+import { CountDownModule } from '@delon/abc/count-down';
+
 @Component({
   selector: 'app-demo',
-  template: ` <count-down [config]="config"></count-down> `,
+  template: ` <count-down [config]="config" /> `,
+  standalone: true,
+  imports: [CountDownModule]
 })
 export class DemoComponent {
   config: CountdownConfig = {
     format: `s.S`,
-    leftTime: 30,
+    leftTime: 30
   };
 }
 ```

packages/abc/count-down/demo/simple.md

@@ -14,22 +14,28 @@ title:
 The simplest usage.
 
 ```ts
-import { Component } from '@angular/core';
-import { NzMessageService } from 'ng-zorro-antd/message';
+import { Component, inject } from '@angular/core';
+
 import { CountdownEvent } from 'ngx-countdown';
 
+import { CountDownModule } from '@delon/abc/count-down';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzMessageService } from 'ng-zorro-antd/message';
+
 @Component({
   selector: 'app-demo',
   template: `
     <div>
-      <count-down #cd [target]="10" (event)="handleEvent($event)" style="font-size: 20px;"></count-down>
+      <count-down #cd [target]="10" (event)="handleEvent($event)" style="font-size: 20px;" />
     </div>
     <button nz-button (click)="cd.instance.pause()">Pause</button>
     <button nz-button (click)="cd.instance.resume()">Resume</button>
   `,
+  standalone: true,
+  imports: [CountDownModule, NzButtonModule]
 })
 export class DemoComponent {
-  constructor(private msg: NzMessageService) {}
+  private readonly msg = inject(NzMessageService);
 
   handleEvent(e: CountdownEvent): void {
     if (e.action === 'done') {

packages/abc/date-picker/demo/basic.md

@@ -14,14 +14,21 @@ title:
 Start and end values with `ngModel`, `ngModelEnd`.
 
 ```ts
+import { JsonPipe } from '@angular/common';
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { DatePickerModule } from '@delon/abc/date-picker';
+import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
 
 @Component({
   selector: 'app-demo',
   template: `
     result: {{ i | json }}<br />
-    <nz-range-picker [(ngModel)]="i.start" extend [(ngModelEnd)]="i.end"></nz-range-picker>
+    <nz-range-picker [(ngModel)]="i.start" extend [(ngModelEnd)]="i.end" />
   `,
+  standalone: true,
+  imports: [JsonPipe, FormsModule, NzDatePickerModule, DatePickerModule]
 })
 export class DemoComponent {
   i: { start?: Date; end?: Date } = {};

packages/abc/date-picker/demo/shortcut.md

@@ -14,14 +14,21 @@ title:
 Use `shortcuts` to customize the shortcut panel (supports global configuration).
 
 ```ts
+import { JsonPipe } from '@angular/common';
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { DatePickerModule } from '@delon/abc/date-picker';
+import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
 
 @Component({
   selector: 'app-demo',
   template: `
     result: {{ i | json }}<br />
-    <nz-range-picker [(ngModel)]="i.start" extend [(ngModelEnd)]="i.end" shortcut></nz-range-picker>
+    <nz-range-picker [(ngModel)]="i.start" extend [(ngModelEnd)]="i.end" shortcut />
   `,
+  standalone: true,
+  imports: [JsonPipe, FormsModule, NzDatePickerModule, DatePickerModule]
 })
 export class DemoComponent {
   i: { start?: Date; end?: Date } = {};

packages/abc/down-file/demo/simple.md

@@ -16,29 +16,27 @@ Download a file.
 ```ts
 import { Component } from '@angular/core';
 
+import { DownFileModule } from '@delon/abc/down-file';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+
 @Component({
   selector: 'app-demo',
   template: `
     @for (i of fileTypes; track $index) {
-      <button
-        nz-button
-        down-file
-        [http-data]="data"
-        http-url="./assets/demo{{ i }}"
-        file-name="demo中文"
-        class="mr-sm"
-      >
+      <button nz-button down-file [http-data]="data" http-url="./assets/demo{{ i }}" file-name="demo中文" class="mr-sm">
         {{ i }}
       </button>
     }
   `,
+  standalone: true,
+  imports: [DownFileModule, NzButtonModule]
 })
 export class DemoComponent {
   fileTypes = ['.xlsx', '.docx', '.pptx', '.pdf'];
 
   data = {
     otherdata: 1,
-    time: new Date(),
+    time: new Date()
   };
 }
 ```

packages/abc/ellipsis/demo/line.md

@@ -20,16 +20,21 @@ Also note that, in this mode, the outer container needs to have a specified widt
 ```ts
 import { Component } from '@angular/core';
 
+import { EllipsisModule } from '@delon/abc/ellipsis';
+
 @Component({
   selector: 'app-demo',
   template: `
     <ellipsis lines="3" tooltip style="width: 200px">
       <p>
-        There were injuries alleged in three <a href="#cover">cases in 2015</a>, and a fourth incident in September, according to the safety
-        recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.
+        There were injuries alleged in three <a href="#cover">cases in 2015</a>, and a fourth incident in September,
+        according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a
+        voluntary recall.
       </p>
     </ellipsis>
   `,
+  standalone: true,
+  imports: [EllipsisModule]
 })
 export class DemoComponent {}
 ```

packages/abc/ellipsis/demo/number.md

@@ -16,13 +16,17 @@ title:
 ```ts
 import { Component } from '@angular/core';
 
+import { EllipsisModule } from '@delon/abc/ellipsis';
+
 @Component({
   selector: 'app-demo',
   template: `
     <ellipsis length="100">{{ article }}</ellipsis>
     <h4 class="mt-lg">Show Tooltip</h4>
     <ellipsis length="100" tooltip>{{ article }}</ellipsis>
   `,
+  standalone: true,
+  imports: [EllipsisModule]
 })
 export class DemoComponent {
   article =

packages/abc/error-collect/demo/basic.md

@@ -7,7 +7,11 @@ title: 基础
 
 ```ts
 import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+
+import { ErrorCollectModule } from '@delon/abc/error-collect';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzInputModule } from 'ng-zorro-antd/input';
 
 @Component({
   selector: 'app-demo',
@@ -18,9 +22,11 @@ import { FormControl, FormGroup, Validators } from '@angular/forms';
           <input nz-input formControlName="email" id="email" />
         </nz-form-control>
       </nz-form-item>
-      <error-collect></error-collect>
+      <error-collect />
     </form>
-  `
+  `,
+  standalone: true,
+  imports: [NzFormModule, ReactiveFormsModule, NzInputModule, ErrorCollectModule]
 })
 export class DemoComponent implements OnInit {
   validateForm = new FormGroup({

packages/abc/exception/demo/403.md

@@ -8,14 +8,13 @@ title: 403
 ```ts
 import { Component } from '@angular/core';
 
+import { ExceptionModule } from '@delon/abc/exception';
+
 @Component({
   selector: 'app-demo',
-  template: ` 
-  <exception [type]="403">
-    <button nz-button [nzType]="'primary'">回到首页</button>
-    <button nz-button>查看详情</button>
-  </exception>
-  `,
+  template: ` <exception [type]="403" />`,
+  standalone: true,
+  imports: [ExceptionModule]
 })
 export class DemoComponent {}
 ```