perf(*): support standalone (#1694)

packages/abc/hotkey/hotkey.directive.ts

@@ -3,7 +3,7 @@ import { Directive, ElementRef, Input, NgZone, OnDestroy } from '@angular/core';
 
 import { install, uninstall } from '@github/hotkey';
 
-@Directive({ selector: '[hotkey]' })
+@Directive({ selector: '[hotkey]', standalone: true })
 export class HotkeyDirective implements OnDestroy {
   /**
    * Specify [hotkey format](https://github.com/github/hotkey#hotkey-string-format)

packages/abc/hotkey/hotkey.module.ts

@@ -5,7 +5,7 @@ import { HotkeyDirective } from './hotkey.directive';
 const DIRECTIVES = [HotkeyDirective];
 
 @NgModule({
-  declarations: DIRECTIVES,
+  imports: DIRECTIVES,
   exports: DIRECTIVES
 })
 export class HotkeyModule {}

packages/abc/let/let.directive.ts

@@ -14,7 +14,7 @@ export class LetContext<T> {
   }
 }
 
-@Directive({ selector: '[let]' })
+@Directive({ selector: '[let]', standalone: true })
 export class LetDirective<T> {
   @Input({ required: true }) let!: T;
 

packages/abc/let/let.module.ts

@@ -5,7 +5,7 @@ import { LetDirective } from './let.directive';
 const DIRECTIVES = [LetDirective];
 
 @NgModule({
-  declarations: DIRECTIVES,
+  imports: DIRECTIVES,
   exports: DIRECTIVES
 })
 export class LetModule {}

packages/abc/observers/observer-size.ts

@@ -80,7 +80,8 @@ export class SizeObserver implements OnDestroy {
 
 @Directive({
   selector: '[observeSize]',
-  exportAs: 'observeSize'
+  exportAs: 'observeSize',
+  standalone: true
 })
 export class ObserverSize implements AfterViewInit, OnDestroy {
   private _sub$: Subscription | null = null;
@@ -117,6 +118,6 @@ export class ObserverSize implements AfterViewInit, OnDestroy {
 
 @NgModule({
   exports: [ObserverSize],
-  declarations: [ObserverSize]
+  imports: [ObserverSize]
 })
 export class ObserversModule {}

packages/abc/xlsx/xlsx.directive.ts

@@ -8,7 +8,8 @@ import { XlsxExportOptions } from './xlsx.types';
   exportAs: 'xlsx',
   host: {
     '(click)': '_click()'
-  }
+  },
+  standalone: true
 })
 export class XlsxDirective {
   @Input('xlsx') data!: XlsxExportOptions;

packages/abc/xlsx/xlsx.module.ts

@@ -1,13 +1,11 @@
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { XlsxDirective } from './xlsx.directive';
 
 const COMPONENTS = [XlsxDirective];
 
 @NgModule({
-  imports: [CommonModule],
-  declarations: COMPONENTS,
+  imports: [COMPONENTS],
   exports: COMPONENTS
 })
 export class XlsxModule {}

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

@@ -4,7 +4,6 @@ title: zip
 order: 7
 subtitle: Zip
 cols: 1
-module: import { ZipModule } from '@delon/abc/zip';
 ---
 
 A Zip file operation based on [jszip](http://stuk.github.io/jszip/).

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

@@ -4,7 +4,6 @@ title: zip
 order: 7
 subtitle: Zip 操作
 cols: 1
-module: import { ZipModule } from '@delon/abc/zip';
 ---
 
 一个基于 [jszip](http://stuk.github.io/jszip/) 的Zip文件操作。

packages/abc/zip/public_api.ts

@@ -1,3 +1,2 @@
 export * from './zip.types';
 export { ZipService } from './zip.service';
-export { ZipModule } from './zip.module';

packages/abc/zip/zip.spec.ts

@@ -8,7 +8,6 @@ import * as fs from 'file-saver';
 import { LazyService } from '@delon/util/other';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
-import { ZipModule } from './zip.module';
 import { ZipService } from './zip.service';
 
 let isErrorRequest = false;
@@ -45,7 +44,6 @@ describe('abc: zip', () => {
   let srv: ZipService;
   function genModule(): void {
     TestBed.configureTestingModule({
-      imports: [ZipModule],
       providers: [
         { provide: HttpClient, useClass: MockHttpClient },
         { provide: LazyService, useClass: MockLazyService }

packages/theme/theme-btn/theme-btn.component.html

@@ -24,7 +24,9 @@
   </svg>
   <nz-dropdown-menu #menu="nzDropdownMenu">
     <ul nz-menu nzSelectable>
-      <li nz-menu-item *ngFor="let i of types" (click)="onThemeChange(i.key)">{{ i.text }}</li>
+      @for (i of types; track $index) {
+      <li nz-menu-item (click)="onThemeChange(i.key)">{{ i.text }}</li>
+      }
     </ul>
   </nz-dropdown-menu>
 </div>

packages/theme/theme-btn/theme-btn.component.ts

@@ -20,6 +20,8 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 import { AlainConfigService } from '@delon/util/config';
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 
 export interface ThemeBtnType {
   key: string;
@@ -35,7 +37,9 @@ export const ALAIN_THEME_BTN_KEYS = new InjectionToken<string>('ALAIN_THEME_BTN_
     '[class.theme-btn]': `true`,
     '[class.theme-btn-rtl]': `dir === 'rtl'`
   },
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [NzDropDownModule, NzToolTipModule]
 })
 export class ThemeBtnComponent implements OnInit, OnDestroy {
   private theme = 'default';
@@ -50,16 +54,19 @@ export class ThemeBtnComponent implements OnInit, OnDestroy {
   @Output() readonly themeChange = new EventEmitter<string>();
   private dir$ = this.directionality.change?.pipe(takeUntilDestroyed());
   dir: Direction = 'ltr';
+  private key = '';
 
   constructor(
     private renderer: Renderer2,
     private configSrv: AlainConfigService,
     private platform: Platform,
     @Inject(DOCUMENT) private doc: NzSafeAny,
     @Optional() private directionality: Directionality,
-    @Inject(ALAIN_THEME_BTN_KEYS) private KEYS: string,
+    @Optional() @Inject(ALAIN_THEME_BTN_KEYS) KEYS: string,
     private cdr: ChangeDetectorRef
-  ) {}
+  ) {
+    this.key = KEYS ?? 'site-theme';
+  }
 
   ngOnInit(): void {
     this.dir = this.directionality.value;
@@ -74,7 +81,7 @@ export class ThemeBtnComponent implements OnInit, OnDestroy {
     if (!this.platform.isBrowser) {
       return;
     }
-    this.theme = localStorage.getItem(this.KEYS) || 'default';
+    this.theme = localStorage.getItem(this.key) || 'default';
     this.updateChartTheme();
     this.onThemeChange(this.theme);
   }
@@ -90,26 +97,26 @@ export class ThemeBtnComponent implements OnInit, OnDestroy {
     this.theme = theme;
     this.themeChange.emit(theme);
     this.renderer.setAttribute(this.doc.body, 'data-theme', theme);
-    const dom = this.doc.getElementById(this.KEYS);
+    const dom = this.doc.getElementById(this.key);
     if (dom) {
       dom.remove();
     }
-    localStorage.removeItem(this.KEYS);
+    localStorage.removeItem(this.key);
     if (theme !== 'default') {
       const el = this.doc.createElement('link');
       el.type = 'text/css';
       el.rel = 'stylesheet';
-      el.id = this.KEYS;
+      el.id = this.key;
       el.href = `${this.deployUrl}assets/style.${theme}.css`;
 
-      localStorage.setItem(this.KEYS, theme);
+      localStorage.setItem(this.key, theme);
       this.doc.body.append(el);
     }
     this.updateChartTheme();
   }
 
   ngOnDestroy(): void {
-    const el = this.doc.getElementById(this.KEYS);
+    const el = this.doc.getElementById(this.key);
     if (el != null) {
       this.doc.body.removeChild(el);
     }

packages/theme/theme-btn/theme-btn.module.ts

@@ -4,19 +4,12 @@ import { NgModule } from '@angular/core';
 import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 
-import { ALAIN_THEME_BTN_KEYS, ThemeBtnComponent } from './theme-btn.component';
+import { ThemeBtnComponent } from './theme-btn.component';
 
 const COMPONENTS = [ThemeBtnComponent];
 
 @NgModule({
-  imports: [CommonModule, NzDropDownModule, NzToolTipModule],
-  providers: [
-    {
-      provide: ALAIN_THEME_BTN_KEYS,
-      useValue: 'site-theme'
-    }
-  ],
-  declarations: COMPONENTS,
+  imports: [CommonModule, NzDropDownModule, NzToolTipModule, ...COMPONENTS],
   exports: COMPONENTS
 })
 export class ThemeBtnModule {}

packages/util/pipes/currency/cny.pipe.ts

@@ -2,7 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 
 import { CurrencyCNYOptions, CurrencyService } from '@delon/util/format';
 
-@Pipe({ name: 'cny' })
+@Pipe({ name: 'cny', standalone: true })
 export class CurrencyCNYPipe implements PipeTransform {
   constructor(private srv: CurrencyService) {}
 

packages/util/pipes/currency/mega.pipe.ts

@@ -2,7 +2,7 @@ import { Inject, LOCALE_ID, Pipe, PipeTransform } from '@angular/core';
 
 import { CurrencyMegaOptions, CurrencyService } from '@delon/util/format';
 
-@Pipe({ name: 'mega' })
+@Pipe({ name: 'mega', standalone: true })
 export class CurrencyMegaPipe implements PipeTransform {
   private isCN = false;
   constructor(

packages/util/pipes/currency/module.ts

@@ -7,7 +7,7 @@ import { CurrencyPricePipe } from './price.pipe';
 const PIPES = [CurrencyMegaPipe, CurrencyPricePipe, CurrencyCNYPipe];
 
 @NgModule({
-  declarations: PIPES,
+  imports: PIPES,
   exports: PIPES
 })
 export class CurrencyPipeModule {}

packages/util/pipes/currency/price.pipe.ts

@@ -2,7 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 
 import { CurrencyFormatOptions, CurrencyService } from '@delon/util/format';
 
-@Pipe({ name: 'price' })
+@Pipe({ name: 'price', standalone: true })
 export class CurrencyPricePipe implements PipeTransform {
   constructor(private srv: CurrencyService) {}
   /**

packages/util/pipes/filter/filter.pipe.ts

@@ -2,7 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 
-@Pipe({ name: 'filter' })
+@Pipe({ name: 'filter', standalone: true })
 export class FilterPipe implements PipeTransform {
   /**
    * Filter array

packages/util/pipes/filter/module.ts

@@ -5,7 +5,7 @@ import { FilterPipe } from './filter.pipe';
 const PIPES = [FilterPipe];
 
 @NgModule({
-  declarations: PIPES,
+  imports: PIPES,
   exports: PIPES
 })
 export class FilterPipeModule {}

packages/util/pipes/format/mask.pipe.ts

@@ -2,7 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 
 import { formatMask, FormatMaskOption } from '@delon/util/format';
 
-@Pipe({ name: 'mask' })
+@Pipe({ name: 'mask', standalone: true })
 export class FormatMaskPipe implements PipeTransform {
   /**
    * Format mask

packages/util/pipes/format/module.ts

@@ -5,7 +5,7 @@ import { FormatMaskPipe } from './mask.pipe';
 const PIPES = [FormatMaskPipe];
 
 @NgModule({
-  declarations: PIPES,
+  imports: PIPES,
   exports: PIPES
 })
 export class FormatPipeModule {}

src/app/core/code/files/delon-abc.module.ts

@@ -28,7 +28,6 @@ import { SVModule } from '@delon/abc/sv';
 import { TagSelectModule } from '@delon/abc/tag-select';
 import { MediaModule } from '@delon/abc/media';
 import { XlsxModule } from '@delon/abc/xlsx';
-import { ZipModule } from '@delon/abc/zip';
 import { OnboardingModule } from '@delon/abc/onboarding';
 import { LetModule } from '@delon/abc/let';
 import { AutoFocusModule } from '@delon/abc/auto-focus';
@@ -52,7 +51,6 @@ const MODULES = [
   ReuseTabModule,
   FullContentModule,
   XlsxModule,
-  ZipModule,
   LodopModule,
   QuickMenuModule,
   QRModule,