chore: add loading etc.. components

angular.json

@@ -154,8 +154,8 @@
             "codeCoverageExclude": ["schematics/**", "packages/testing/**"],
             "include": [
               "./test.ts",
-              // "**/st.spec.ts"
-              "**/*.spec.ts"
+              "**/down-file.spec.ts"
+              // "**/*.spec.ts"
             ]
           }
         }

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

@@ -7,11 +7,6 @@ import { saveAs } from 'file-saver';
 import { _HttpClient } from '@delon/theme';
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 
-let isFileSaverSupported = false;
-try {
-  isFileSaverSupported = !!new Blob();
-} catch {}
-
 @Directive({
   selector: '[down-file]',
   exportAs: 'downFile',
@@ -45,9 +40,13 @@ export class DownFileDirective {
       });
     return arr.reduce((_o, item) => item, {});
   }
+  private isFileSaverSupported = false;
 
   constructor() {
-    if (!isFileSaverSupported) {
+    try {
+      this.isFileSaverSupported = !!new Blob();
+    } catch {}
+    if (!this.isFileSaverSupported) {
       this.el.classList.add(`down-file__not-support`);
     }
   }
@@ -59,7 +58,7 @@ export class DownFileDirective {
   }
 
   async _click(ev: MouseEvent): Promise<void> {
-    if (!isFileSaverSupported || (typeof this.pre === 'function' && !(await this.pre(ev)))) {
+    if (!this.isFileSaverSupported || (typeof this.pre === 'function' && !(await this.pre(ev)))) {
       ev.stopPropagation();
       ev.preventDefault();
       return;

packages/abc/global-footer/global-footer-item.component.ts

@@ -1,6 +1,12 @@
-import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
-
-import { BooleanInput, InputBoolean } from '@delon/util/decorator';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  TemplateRef,
+  ViewChild,
+  ViewEncapsulation,
+  booleanAttribute
+} from '@angular/core';
 
 @Component({
   selector: 'global-footer-item',
@@ -12,10 +18,8 @@ import { BooleanInput, InputBoolean } from '@delon/util/decorator';
   standalone: true
 })
 export class GlobalFooterItemComponent {
-  static ngAcceptInputType_blankTarget: BooleanInput;
-
   @ViewChild('host', { static: true }) host!: TemplateRef<void>;
 
   @Input() href?: string;
-  @Input() @InputBoolean() blankTarget?: boolean;
+  @Input({ transform: booleanAttribute }) blankTarget?: boolean;
 }

packages/abc/global-footer/global-footer.component.ts

@@ -5,19 +5,18 @@ import {
   ChangeDetectorRef,
   Component,
   ContentChildren,
-  Inject,
+  DestroyRef,
   Input,
   OnInit,
-  Optional,
   QueryList,
-  ViewEncapsulation
+  ViewEncapsulation,
+  inject
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 
 import { WINDOW } from '@delon/util/token';
-import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 import { GlobalFooterItemComponent } from './global-footer-item.component';
 import { GlobalFooterLink } from './global-footer.types';
@@ -37,10 +36,17 @@ import { GlobalFooterLink } from './global-footer.types';
   imports: [NgTemplateOutlet]
 })
 export class GlobalFooterComponent implements OnInit {
-  private dir$ = this.directionality.change?.pipe(takeUntilDestroyed());
+  private readonly router = inject(Router);
+  private readonly win = inject(WINDOW);
+  private readonly dom = inject(DomSanitizer);
+  private readonly directionality = inject(Directionality, { optional: true });
+  private readonly cdr = inject(ChangeDetectorRef);
+  private readonly destroy$ = inject(DestroyRef);
+
+  private dir$ = this.directionality?.change?.pipe(takeUntilDestroyed());
   private _links: GlobalFooterLink[] = [];
 
-  dir: Direction = 'ltr';
+  dir?: Direction = 'ltr';
 
   @Input()
   set links(val: GlobalFooterLink[]) {
@@ -53,14 +59,6 @@ export class GlobalFooterComponent implements OnInit {
 
   @ContentChildren(GlobalFooterItemComponent) readonly items!: QueryList<GlobalFooterItemComponent>;
 
-  constructor(
-    private router: Router,
-    @Inject(WINDOW) private win: NzSafeAny,
-    private dom: DomSanitizer,
-    @Optional() private directionality: Directionality,
-    private cdr: ChangeDetectorRef
-  ) {}
-
   to(item: GlobalFooterLink | GlobalFooterItemComponent): void {
     if (!item.href) {
       return;
@@ -77,8 +75,8 @@ export class GlobalFooterComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.dir = this.directionality.value;
-    this.dir$.subscribe((direction: Direction) => {
+    this.dir = this.directionality?.value;
+    this.dir$?.pipe(takeUntilDestroyed(this.destroy$)).subscribe((direction: Direction) => {
       this.dir = direction;
       this.cdr.detectChanges();
     });

packages/abc/hotkey/hotkey.directive.ts

@@ -1,10 +1,14 @@
 import { Platform } from '@angular/cdk/platform';
-import { Directive, ElementRef, Input, NgZone, OnDestroy } from '@angular/core';
+import { Directive, ElementRef, Input, NgZone, OnDestroy, inject } from '@angular/core';
 
 import { install, uninstall } from '@github/hotkey';
 
 @Directive({ selector: '[hotkey]', standalone: true })
 export class HotkeyDirective implements OnDestroy {
+  private readonly el: HTMLElement = inject(ElementRef).nativeElement;
+  private readonly ngZone = inject(NgZone);
+  private readonly platform = inject(Platform);
+
   /**
    * Specify [hotkey format](https://github.com/github/hotkey#hotkey-string-format)
    *
@@ -14,18 +18,12 @@ export class HotkeyDirective implements OnDestroy {
   set hotkey(key: string) {
     if (!this.platform.isBrowser) return;
 
-    this.ngZone.runOutsideAngular(() => install(this.el.nativeElement, key));
+    this.ngZone.runOutsideAngular(() => install(this.el, key));
   }
 
-  constructor(
-    private el: ElementRef<HTMLElement>,
-    private ngZone: NgZone,
-    private platform: Platform
-  ) {}
-
   ngOnDestroy(): void {
     if (!this.platform.isBrowser) return;
 
-    this.ngZone.runOutsideAngular(() => uninstall(this.el.nativeElement));
+    this.ngZone.runOutsideAngular(() => uninstall(this.el));
   }
 }

packages/abc/loading/loading.component.ts

@@ -22,7 +22,7 @@ import { LoadingCustom, LoadingIcon, LoadingShowOptions } from './loading.types'
 })
 export class LoadingDefaultComponent {
   options!: LoadingShowOptions;
-  dir: Direction = 'ltr';
+  dir?: Direction = 'ltr';
 
   get icon(): LoadingIcon {
     return this.options.icon!;

packages/abc/loading/loading.service.ts

@@ -1,7 +1,7 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
-import { ComponentRef, Injectable, OnDestroy, Optional } from '@angular/core';
+import { ComponentRef, Injectable, OnDestroy, inject } from '@angular/core';
 import { Subject, Subscription, timer, debounce } from 'rxjs';
 
 import { AlainConfigService, AlainLoadingConfig } from '@delon/util/config';
@@ -11,6 +11,10 @@ import { LoadingShowOptions } from './loading.types';
 
 @Injectable({ providedIn: 'root' })
 export class LoadingService implements OnDestroy {
+  private readonly overlay = inject(Overlay);
+  private readonly configSrv = inject(AlainConfigService);
+  private readonly directionality = inject(Directionality, { optional: true });
+
   private _overlayRef?: OverlayRef;
   private compRef: ComponentRef<LoadingDefaultComponent> | null = null;
   private opt: LoadingShowOptions | null = null;
@@ -22,12 +26,8 @@ export class LoadingService implements OnDestroy {
     return this.compRef != null ? this.compRef.instance : null;
   }
 
-  constructor(
-    private overlay: Overlay,
-    private configSrv: AlainConfigService,
-    @Optional() private directionality: Directionality
-  ) {
-    this.cog = configSrv.merge('loading', {
+  constructor() {
+    this.cog = this.configSrv.merge('loading', {
       type: 'spin',
       text: '加载中...',
       icon: {
@@ -55,7 +55,7 @@ export class LoadingService implements OnDestroy {
       backdropClass: 'loading-backdrop'
     });
     this.compRef = this._overlayRef.attach(new ComponentPortal(LoadingDefaultComponent));
-    const dir = this.configSrv.get('loading')!.direction || this.directionality.value;
+    const dir = this.configSrv.get('loading')!.direction || this.directionality?.value;
     if (this.instance != null) {
       this.instance!!.options = this.opt;
       this.instance!!.dir = dir;

packages/abc/lodop/lodop.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, OnDestroy } from '@angular/core';
+import { Injectable, OnDestroy, inject } from '@angular/core';
 import { Observable, of, Subject } from 'rxjs';
 
 import { AlainConfigService, AlainLodopConfig } from '@delon/util/config';
@@ -9,6 +9,8 @@ import { Lodop, LodopPrintResult, LodopResult } from './lodop.types';
 
 @Injectable({ providedIn: 'root' })
 export class LodopService implements OnDestroy {
+  private readonly scriptSrv = inject(LazyService);
+
   private defaultConfig: AlainLodopConfig;
   private _cog!: AlainLodopConfig;
   private pending = false;
@@ -17,10 +19,7 @@ export class LodopService implements OnDestroy {
   private _events = new Subject<LodopPrintResult>();
   private printBuffer: NzSafeAny[] = [];
 
-  constructor(
-    private scriptSrv: LazyService,
-    configSrv: AlainConfigService
-  ) {
+  constructor(configSrv: AlainConfigService) {
     this.defaultConfig = configSrv.merge('lodop', {
       url: '//localhost:8443/CLodopfuncs.js',
       name: 'CLODOP',

packages/abc/media/media.component.ts

@@ -14,14 +14,15 @@ import {
   Renderer2,
   SimpleChange,
   ViewEncapsulation,
-  inject
+  inject,
+  numberAttribute
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { timer, take } from 'rxjs';
 
 import type Plyr from 'plyr';
 
-import { InputNumber, NumberInput, ZoneOutside } from '@delon/util/decorator';
+import { ZoneOutside } from '@delon/util/decorator';
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 import { MediaService } from './media.service';
@@ -41,30 +42,26 @@ export type MediaType = 'html5' | 'youtube' | 'video' | 'audio';
   standalone: true
 })
 export class MediaComponent implements OnChanges, AfterViewInit, OnDestroy {
-  static ngAcceptInputType_delay: NumberInput;
+  private readonly destroy$ = inject(DestroyRef);
+  private readonly el: HTMLElement = inject(ElementRef).nativeElement;
+  private readonly renderer = inject(Renderer2);
+  private readonly ngZone = inject(NgZone);
+  private readonly srv = inject(MediaService);
+  private readonly platform = inject(Platform);
 
   private _p?: Plyr | null;
   private videoEl?: HTMLElement;
-  private destroy$ = inject(DestroyRef);
 
   @Input() type: MediaType = 'video';
   @Input() source?: string | Plyr.SourceInfo;
   @Input() options?: Plyr.Options;
-  @Input() @InputNumber() delay = 0;
+  @Input({ transform: numberAttribute }) delay = 0;
   @Output() readonly ready = new EventEmitter<Plyr>();
 
   get player(): Plyr | undefined | null {
     return this._p;
   }
 
-  constructor(
-    private el: ElementRef<HTMLElement>,
-    private renderer: Renderer2,
-    private srv: MediaService,
-    private ngZone: NgZone,
-    private platform: Platform
-  ) {}
-
   @ZoneOutside()
   private initDelay(): void {
     timer(this.delay)
@@ -95,11 +92,11 @@ export class MediaComponent implements OnChanges, AfterViewInit, OnDestroy {
 
   private ensureElement(): void {
     const { type } = this;
-    let el = this.el.nativeElement.querySelector(type) as HTMLElement;
+    let el = this.el.querySelector(type) as HTMLElement;
     if (!el) {
       el = this.renderer.createElement(type);
       (el as HTMLVideoElement).controls = true;
-      this.el.nativeElement.appendChild(el);
+      this.el.appendChild(el);
     }
     this.videoEl = el;
   }

packages/abc/notice-icon/notice-icon.component.ts

@@ -9,12 +9,14 @@ import {
   OnDestroy,
   OnInit,
   Output,
-  ViewEncapsulation
+  ViewEncapsulation,
+  booleanAttribute,
+  inject,
+  numberAttribute
 } from '@angular/core';
 import { Subscription } from 'rxjs';
 
 import { DelonLocaleService, LocaleData } from '@delon/theme';
-import { BooleanInput, InputBoolean, InputNumber, NumberInput } from '@delon/util/decorator';
 import { NzBadgeComponent } from 'ng-zorro-antd/badge';
 import type { NgClassType } from 'ng-zorro-antd/core/types';
 import { NzDropDownDirective, NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown';
@@ -48,21 +50,18 @@ import { NoticeIconSelect, NoticeItem } from './notice-icon.types';
   ]
 })
 export class NoticeIconComponent implements OnInit, OnChanges, OnDestroy {
-  static ngAcceptInputType_count: NumberInput;
-  static ngAcceptInputType_loading: BooleanInput;
-  static ngAcceptInputType_popoverVisible: BooleanInput;
-  static ngAcceptInputType_centered: BooleanInput;
-
+  private readonly i18n = inject(DelonLocaleService);
+  private readonly cdr = inject(ChangeDetectorRef);
   private i18n$!: Subscription;
   locale: LocaleData = {};
 
   @Input() data: NoticeItem[] = [];
-  @Input() @InputNumber() count?: number;
-  @Input() @InputBoolean() loading = false;
-  @Input() @InputBoolean() popoverVisible = false;
+  @Input({ transform: numberAttribute }) count?: number;
+  @Input({ transform: booleanAttribute }) loading = false;
+  @Input({ transform: booleanAttribute }) popoverVisible = false;
   @Input() btnClass?: NgClassType;
   @Input() btnIconClass?: NgClassType;
-  @Input() @InputBoolean() centered = false;
+  @Input({ transform: booleanAttribute }) centered = false;
   @Output() readonly select = new EventEmitter<NoticeIconSelect>();
   @Output() readonly clear = new EventEmitter<string>();
   @Output() readonly popoverVisibleChange = new EventEmitter<boolean>();
@@ -71,11 +70,6 @@ export class NoticeIconComponent implements OnInit, OnChanges, OnDestroy {
     return `header-dropdown notice-icon${!this.centered ? ' notice-icon__tab-left' : ''}`;
   }
 
-  constructor(
-    private i18n: DelonLocaleService,
-    private cdr: ChangeDetectorRef
-  ) {}
-
   onVisibleChange(result: boolean): void {
     this.popoverVisibleChange.emit(result);
   }