perf(*): support standalone (#1750)

package.json

@@ -78,7 +78,7 @@
     "extend": "^3.0.2",
     "file-saver": "^2.0.5",
     "ng-github-button": "^17.0.0",
-    "ng-zorro-antd": "^17.0.1",
+    "ng-zorro-antd": "^17.1.0",
     "@angular/cdk": "^17.0.0",
     "ngx-countdown": "^17.0.0",
     "ngx-highlight-js": "^17.0.0",

packages/abc/avatar-list/avatar-list-item.component.ts

@@ -6,7 +6,8 @@ import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@a
   template: `<ng-content />`,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true
 })
 export class AvatarListItemComponent {
   @Input() src?: string;

packages/abc/avatar-list/avatar-list.component.ts

@@ -1,4 +1,5 @@
 import { Direction, Directionality } from '@angular/cdk/bidi';
+import { NgClass, NgStyle } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -14,7 +15,9 @@ import {
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 import { InputNumber, NumberInput } from '@delon/util/decorator';
+import { NzAvatarComponent } from 'ng-zorro-antd/avatar';
 import type { NgStyleInterface, NzSizeLDSType } from 'ng-zorro-antd/core/types';
+import { NzTooltipDirective } from 'ng-zorro-antd/tooltip';
 
 import { AvatarListItemComponent } from './avatar-list-item.component';
 
@@ -28,7 +31,9 @@ import { AvatarListItemComponent } from './avatar-list-item.component';
   },
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [NgStyle, NgClass, NzAvatarComponent, NzTooltipDirective]
 })
 export class AvatarListComponent implements AfterViewInit, OnChanges {
   static ngAcceptInputType_maxLength: NumberInput;

packages/abc/avatar-list/avatar-list.module.ts

@@ -10,8 +10,7 @@ import { AvatarListComponent } from './avatar-list.component';
 const COMPONENTS = [AvatarListComponent, AvatarListItemComponent];
 
 @NgModule({
-  imports: [CommonModule, NzAvatarModule, NzToolTipModule],
-  declarations: COMPONENTS,
+  imports: [CommonModule, NzAvatarModule, NzToolTipModule, ...COMPONENTS],
   exports: COMPONENTS
 })
 export class AvatarListModule {}

packages/abc/avatar-list/index.en-US.md

@@ -10,15 +10,15 @@ A list of user's avatar for project or group member list frequently. If a large
 
 ## API
 
-### avatar-list
+### avatar-list:standalone
 
 | Property | Description | Type | Default |
 |----------|-------------|------|---------|
 | `[size]` | size of list | `'large','small','mini','default'` | `'default'` |
 | `[maxLength]` | max items to show | `number` | - |
 | `[excessItemsStyle]` | the excess item style | `{ [key: string]: string }` | - |
 
-### avatar-list-item
+### avatar-list-item:standalone
 
 | Property | Description | Type | Default |
 |----------|-------------|------|---------|

packages/abc/avatar-list/index.zh-CN.md

@@ -10,15 +10,15 @@ module: import { AvatarListModule } from '@delon/abc/avatar-list';
 
 ## API
 
-### avatar-list
+### avatar-list:standalone
 
 | 成员 | 说明 | 类型 | 默认值 |
 |----|----|----|-----|
 | `[size]` | 头像大小 | `'large','small','mini','default'` | `'default'` |
 | `[maxLength]` | 要显示的最大项目 | `number` | - |
 | `[excessItemsStyle]` | 多余的项目风格 | `{ [key: string]: string }` | - |
 
-### avatar-list-item
+### avatar-list-item:standalone
 
 | 成员 | 说明 | 类型 | 默认值 |
 |----|----|----|-----|

packages/abc/cell/cell.component.ts

@@ -22,14 +22,14 @@ import { Subscription } from 'rxjs';
 import { updateHostClass } from '@delon/util/browser';
 import { BooleanInput, InputBoolean } from '@delon/util/decorator';
 import { WINDOW } from '@delon/util/token';
-import { NzBadgeModule } from 'ng-zorro-antd/badge';
-import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
+import { NzBadgeComponent } from 'ng-zorro-antd/badge';
+import { NzCheckboxComponent } from 'ng-zorro-antd/checkbox';
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
-import { NzIconModule } from 'ng-zorro-antd/icon';
-import { NzImage, NzImageService } from 'ng-zorro-antd/image';
-import { NzRadioModule } from 'ng-zorro-antd/radio';
-import { NzTagModule } from 'ng-zorro-antd/tag';
-import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import { NzIconDirective } from 'ng-zorro-antd/icon';
+import { NzImage, NzImageModule, NzImageService } from 'ng-zorro-antd/image';
+import { NzRadioComponent } from 'ng-zorro-antd/radio';
+import { NzTagComponent } from 'ng-zorro-antd/tag';
+import { NzTooltipDirective } from 'ng-zorro-antd/tooltip';
 
 import { CellHostDirective } from './cell-host.directive';
 import { CellService } from './cell.service';
@@ -115,12 +115,13 @@ import type { CellDefaultText, CellOptions, CellTextResult, CellValue, CellWidge
   imports: [
     FormsModule,
     NgTemplateOutlet,
-    NzCheckboxModule,
-    NzRadioModule,
-    NzIconModule,
-    NzTagModule,
-    NzBadgeModule,
-    NzToolTipModule,
+    NzCheckboxComponent,
+    NzRadioComponent,
+    NzIconDirective,
+    NzTagComponent,
+    NzBadgeComponent,
+    NzTooltipDirective,
+    NzImageModule,
     CellHostDirective
   ]
 })

packages/abc/cell/index.en-US.md

@@ -11,7 +11,7 @@ Cell formatting is supported for multiple data types, and supports widget mode.
 
 ## API
 
-### cell
+### cell:standalone
 
 | Property | Description | Type | Default |
 |----------|-------------|------|---------|

packages/abc/cell/index.zh-CN.md

@@ -11,7 +11,7 @@ module: import { CellModule } from '@delon/abc/cell';
 
 ## API
 
-### cell
+### cell:standalone
 
 | 成员 | 说明 | 类型 | 默认值 |
 |----|----|----|-----|

packages/abc/count-down/count-down.component.ts

@@ -19,7 +19,9 @@ import { CountdownComponent, CountdownConfig, CountdownEvent } from 'ngx-countdo
   }`,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [CountdownComponent]
 })
 export class CountDownComponent {
   @ViewChild('cd', { static: false }) readonly instance!: CountdownComponent;

packages/abc/count-down/count-down.module.ts

@@ -8,8 +8,7 @@ import { CountDownComponent } from './count-down.component';
 const COMPONENTS = [CountDownComponent];
 
 @NgModule({
-  imports: [CommonModule, CountdownModule],
-  declarations: COMPONENTS,
+  imports: [CommonModule, CountdownModule, ...COMPONENTS],
   exports: COMPONENTS
 })
 export class CountDownModule {}

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

@@ -18,13 +18,13 @@ import { Component } from '@angular/core';
 
 import { CountdownConfig } from 'ngx-countdown';
 
-import { CountDownModule } from '@delon/abc/count-down';
+import { CountDownComponent } from '@delon/abc/count-down';
 
 @Component({
   selector: 'app-demo',
   template: ` <count-down [config]="config" /> `,
   standalone: true,
-  imports: [CountDownModule]
+  imports: [CountDownComponent]
 })
 export class DemoComponent {
   config: CountdownConfig = {

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

@@ -18,7 +18,7 @@ import { Component, inject } from '@angular/core';
 
 import { CountdownEvent } from 'ngx-countdown';
 
-import { CountDownModule } from '@delon/abc/count-down';
+import { CountDownComponent } from '@delon/abc/count-down';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzMessageService } from 'ng-zorro-antd/message';
 
@@ -32,7 +32,7 @@ import { NzMessageService } from 'ng-zorro-antd/message';
     <button nz-button (click)="cd.instance.resume()">Resume</button>
   `,
   standalone: true,
-  imports: [CountDownModule, NzButtonModule]
+  imports: [CountDownComponent, NzButtonModule]
 })
 export class DemoComponent {
   private readonly msg = inject(NzMessageService);

packages/abc/count-down/index.en-US.md

@@ -16,7 +16,7 @@ npm i -S ngx-countdown
 
 ## API
 
-### count-down
+### count-down:standalone
 
 | Property | Description | Type | Default |
 |----------|-------------|------|---------|

packages/abc/count-down/index.zh-CN.md

@@ -16,7 +16,7 @@ npm i -S ngx-countdown
 
 ## API
 
-### count-down
+### count-down:standalone
 
 | 成员 | 说明 | 类型 | 默认值 |
 |----|----|----|-----|

packages/abc/date-picker/date-picker.module.ts

@@ -10,8 +10,7 @@ import { RangePickerDirective } from './range.directive';
 const COMPONENTS = [RangePickerDirective, RangePickerShortcutTplComponent];
 
 @NgModule({
-  imports: [CommonModule, FormsModule, NzDatePickerModule],
-  declarations: COMPONENTS,
+  imports: [CommonModule, FormsModule, NzDatePickerModule, ...COMPONENTS],
   exports: COMPONENTS
 })
 export class DatePickerModule {}

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

@@ -18,7 +18,7 @@ import { JsonPipe } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
-import { DatePickerModule } from '@delon/abc/date-picker';
+import { RangePickerDirective } from '@delon/abc/date-picker';
 import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
 
 @Component({
@@ -28,7 +28,7 @@ import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
     <nz-range-picker [(ngModel)]="i.start" extend [(ngModelEnd)]="i.end" />
   `,
   standalone: true,
-  imports: [JsonPipe, FormsModule, NzDatePickerModule, DatePickerModule]
+  imports: [JsonPipe, FormsModule, NzDatePickerModule, RangePickerDirective]
 })
 export class DemoComponent {
   i: { start?: Date; end?: Date } = {};

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

@@ -18,7 +18,7 @@ import { JsonPipe } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
-import { DatePickerModule } from '@delon/abc/date-picker';
+import { RangePickerDirective } from '@delon/abc/date-picker';
 import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
 
 @Component({
@@ -28,7 +28,7 @@ import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
     <nz-range-picker [(ngModel)]="i.start" extend [(ngModelEnd)]="i.end" shortcut />
   `,
   standalone: true,
-  imports: [JsonPipe, FormsModule, NzDatePickerModule, DatePickerModule]
+  imports: [JsonPipe, FormsModule, NzDatePickerModule, RangePickerDirective]
 })
 export class DemoComponent {
   i: { start?: Date; end?: Date } = {};

packages/abc/date-picker/index.en-US.md

@@ -10,7 +10,7 @@ Based on the `nz-range-picker` further optimization, better service to start and
 
 ## API
 
-### [extend]
+### [extend]:standalone
 
 It needs to be used with [nz-range-picker](https://ng.ant.design/components/date-picker/zh#nz-range-picker), for example:
 

packages/abc/date-picker/index.zh-CN.md

@@ -10,7 +10,7 @@ module: import { DatePickerModule } from '@delon/abc/date-picker';
 
 ## API
 
-### [extend]
+### [extend]:standalone
 
 需要配合 [nz-range-picker](https://ng.ant.design/components/date-picker/zh#nz-range-picker) 一起使用，例如：
 

packages/abc/date-picker/range-shortcut.component.ts

@@ -7,14 +7,15 @@ import { AlainDateRangePickerShortcutItem } from '@delon/util/config';
   template: `
     <ng-template #tpl>
       @for (i of list; track $index) {
-        <a (click)="click(i)" [innerHTML]="i._text" [ngClass]="{ 'ml-sm': !$first }"></a>
+        <a (click)="click(i)" [innerHTML]="i._text" [class.ml-sm]="!$first"></a>
       }
     </ng-template>
-  `
+  `,
+  standalone: true
 })
 export class RangePickerShortcutTplComponent {
   @ViewChild('tpl', { static: true })
-  tpl!: TemplateRef<void>;
+  readonly tpl!: TemplateRef<void>;
 
   list: AlainDateRangePickerShortcutItem[] = [];
 

packages/abc/date-picker/range.directive.ts

@@ -24,7 +24,8 @@ import { RangePickerShortcutTplComponent } from './range-shortcut.component';
 
 @Directive({
   selector: 'nz-range-picker[extend]',
-  exportAs: 'extendRangePicker'
+  exportAs: 'extendRangePicker',
+  standalone: true
 })
 export class RangePickerDirective implements OnDestroy, AfterViewInit {
   static ngAcceptInputType_shortcut: AlainDateRangePickerShortcut | string | null;

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

@@ -16,7 +16,7 @@ Download a file.
 ```ts
 import { Component } from '@angular/core';
 
-import { DownFileModule } from '@delon/abc/down-file';
+import { DownFileDirective } from '@delon/abc/down-file';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 
 @Component({
@@ -29,7 +29,7 @@ import { NzButtonModule } from 'ng-zorro-antd/button';
     }
   `,
   standalone: true,
-  imports: [DownFileModule, NzButtonModule]
+  imports: [DownFileDirective, NzButtonModule]
 })
 export class DemoComponent {
   fileTypes = ['.xlsx', '.docx', '.pptx', '.pdf'];

packages/abc/down-file/down-file.directive.ts

@@ -12,7 +12,8 @@ import type { NzSafeAny } from 'ng-zorro-antd/core/types';
   exportAs: 'downFile',
   host: {
     '(click)': '_click($event)'
-  }
+  },
+  standalone: true
 })
 export class DownFileDirective {
   private isFileSaverSupported = true;

packages/abc/down-file/down-file.module.ts

@@ -8,8 +8,7 @@ import { DownFileDirective } from './down-file.directive';
 const DIRECTIVES = [DownFileDirective];
 
 @NgModule({
-  imports: [CommonModule, AlainThemeModule],
-  declarations: [...DIRECTIVES],
-  exports: [...DIRECTIVES]
+  imports: [CommonModule, AlainThemeModule, ...DIRECTIVES],
+  exports: DIRECTIVES
 })
 export class DownFileModule {}

packages/abc/down-file/index.en-US.md

@@ -10,7 +10,7 @@ A file download based on `blob`.
 
 ## API
 
-### [down-file]
+### [down-file]:standalone
 
 | Property | Description | Type | Default |
 |----------|-------------|------|---------|

packages/abc/down-file/index.zh-CN.md

@@ -10,7 +10,7 @@ module: import { DownFileModule } from '@delon/abc/down-file';
 
 ## API
 
-### [down-file]
+### [down-file]:standalone
 
 | 成员 | 说明 | 类型 | 默认值 |
 |----|----|----|-----|

packages/abc/ellipsis/demo/line.md

@@ -20,7 +20,7 @@ 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';
+import { EllipsisComponent } from '@delon/abc/ellipsis';
 
 @Component({
   selector: 'app-demo',
@@ -34,7 +34,7 @@ import { EllipsisModule } from '@delon/abc/ellipsis';
     </ellipsis>
   `,
   standalone: true,
-  imports: [EllipsisModule]
+  imports: [EllipsisComponent]
 })
 export class DemoComponent {}
 ```