chore: add page-header components

angular.json

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

packages/abc/page-header/page-header.component.ts

@@ -8,25 +8,25 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
-  Inject,
   Input,
   OnChanges,
   OnInit,
-  Optional,
   Renderer2,
   TemplateRef,
   ViewChild,
-  ViewEncapsulation
+  ViewEncapsulation,
+  booleanAttribute,
+  inject,
+  numberAttribute
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NavigationEnd, Router, RouterLink } from '@angular/router';
-import { merge, filter } from 'rxjs';
+import { merge, filter, Observable } from 'rxjs';
 
 import { ReuseTabService } from '@delon/abc/reuse-tab';
-import { AlainI18NService, ALAIN_I18N_TOKEN, Menu, MenuService, SettingsService, TitleService } from '@delon/theme';
+import { ALAIN_I18N_TOKEN, Menu, MenuService, SettingsService, TitleService } from '@delon/theme';
 import { isEmpty } from '@delon/util/browser';
 import { AlainConfigService } from '@delon/util/config';
-import { BooleanInput, InputBoolean, InputNumber, NumberInput } from '@delon/util/decorator';
 import { NzAffixComponent } from 'ng-zorro-antd/affix';
 import { NzBreadCrumbComponent, NzBreadCrumbItemComponent } from 'ng-zorro-antd/breadcrumb';
 import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet';
@@ -58,21 +58,21 @@ interface PageHeaderPath {
   ]
 })
 export class PageHeaderComponent implements OnInit, OnChanges, AfterViewInit {
-  static ngAcceptInputType_loading: BooleanInput;
-  static ngAcceptInputType_wide: BooleanInput;
-  static ngAcceptInputType_autoBreadcrumb: BooleanInput;
-  static ngAcceptInputType_autoTitle: BooleanInput;
-  static ngAcceptInputType_syncTitle: BooleanInput;
-  static ngAcceptInputType_fixed: BooleanInput;
-  static ngAcceptInputType_fixedOffsetTop: NumberInput;
-  static ngAcceptInputType_recursiveBreadcrumb: BooleanInput;
-
-  private dir$ = this.directionality.change?.pipe(takeUntilDestroyed());
+  private readonly renderer = inject(Renderer2);
+  private readonly router = inject(Router);
+  private readonly cdr = inject(ChangeDetectorRef);
+  private readonly menuSrv = inject(MenuService);
+  private readonly i18nSrv = inject(ALAIN_I18N_TOKEN, { optional: true });
+  private readonly titleSrv = inject(TitleService, { optional: true });
+  private readonly reuseSrv = inject(ReuseTabService, { optional: true });
+  private readonly directionality = inject(Directionality, { optional: true });
+
+  private dir$ = this.directionality?.change?.pipe(takeUntilDestroyed());
   @ViewChild('conTpl', { static: false }) private conTpl!: ElementRef;
   @ViewChild('affix', { static: false }) private affix!: NzAffixComponent;
   inited = false;
   isBrowser = true;
-  dir: Direction = 'ltr';
+  dir?: Direction = 'ltr';
 
   private get menus(): Menu[] {
     return this.menuSrv.getPathByUrl(this.router.url, this.recursiveBreadcrumb);
@@ -98,18 +98,18 @@ export class PageHeaderComponent implements OnInit, OnChanges, AfterViewInit {
   }
   @Input() titleSub?: string | TemplateRef<void> | null;
 
-  @Input() @InputBoolean() loading = false;
-  @Input() @InputBoolean() wide = false;
+  @Input({ transform: booleanAttribute }) loading = false;
+  @Input({ transform: booleanAttribute }) wide = false;
   @Input() home?: string;
   @Input() homeLink?: string;
   @Input() homeI18n?: string;
-  @Input() @InputBoolean() autoBreadcrumb!: boolean;
-  @Input() @InputBoolean() autoTitle!: boolean;
-  @Input() @InputBoolean() syncTitle!: boolean;
-  @Input() @InputBoolean() fixed!: boolean;
-  @Input() @InputNumber() fixedOffsetTop!: number;
+  @Input({ transform: booleanAttribute }) autoBreadcrumb!: boolean;
+  @Input({ transform: booleanAttribute }) autoTitle!: boolean;
+  @Input({ transform: booleanAttribute }) syncTitle!: boolean;
+  @Input({ transform: booleanAttribute }) fixed!: boolean;
+  @Input({ transform: numberAttribute }) fixedOffsetTop!: number;
   @Input() breadcrumb?: TemplateRef<NzSafeAny> | null = null;
-  @Input() @InputBoolean() recursiveBreadcrumb!: boolean;
+  @Input({ transform: booleanAttribute }) recursiveBreadcrumb!: boolean;
   @Input() logo?: TemplateRef<void> | null = null;
   @Input() action?: TemplateRef<void> | null = null;
   @Input() content?: TemplateRef<void> | null = null;
@@ -118,19 +118,7 @@ export class PageHeaderComponent implements OnInit, OnChanges, AfterViewInit {
 
   // #endregion
 
-  constructor(
-    settings: SettingsService,
-    private renderer: Renderer2,
-    private router: Router,
-    private menuSrv: MenuService,
-    @Optional() @Inject(ALAIN_I18N_TOKEN) private i18nSrv: AlainI18NService,
-    @Optional() @Inject(TitleService) private titleSrv: TitleService,
-    @Optional() @Inject(ReuseTabService) private reuseSrv: ReuseTabService,
-    private cdr: ChangeDetectorRef,
-    configSrv: AlainConfigService,
-    platform: Platform,
-    @Optional() private directionality: Directionality
-  ) {
+  constructor(settings: SettingsService, configSrv: AlainConfigService, platform: Platform) {
     this.isBrowser = platform.isBrowser;
     configSrv.attach(this, 'pageHeader', {
       home: '首页',
@@ -149,7 +137,10 @@ export class PageHeaderComponent implements OnInit, OnChanges, AfterViewInit {
       )
       .subscribe(() => this.affix.updatePosition({} as NzSafeAny));
 
-    merge(menuSrv.change, router.events.pipe(filter(ev => ev instanceof NavigationEnd)), i18nSrv.change)
+    const obsList: Array<Observable<NzSafeAny>> = [this.router.events.pipe(filter(ev => ev instanceof NavigationEnd))];
+    if (this.menuSrv != null) obsList.push(this.menuSrv.change);
+    if (this.i18nSrv != null) obsList.push(this.i18nSrv.change);
+    merge(...obsList)
       .pipe(
         takeUntilDestroyed(),
         filter(() => this.inited)
@@ -215,8 +206,8 @@ export class PageHeaderComponent implements OnInit, OnChanges, AfterViewInit {
   }
 
   ngOnInit(): void {
-    this.dir = this.directionality.value;
-    this.dir$.subscribe((direction: Direction) => {
+    this.dir = this.directionality?.value;
+    this.dir$?.subscribe((direction: Direction) => {
       this.dir = direction;
       this.cdr.detectChanges();
     });

packages/abc/pdf/pdf.component.ts

@@ -8,16 +8,16 @@ import {
   DestroyRef,
   ElementRef,
   EventEmitter,
-  Inject,
   Input,
   NgZone,
   OnChanges,
   OnDestroy,
-  Optional,
   Output,
   SimpleChange,
   ViewEncapsulation,
-  inject
+  booleanAttribute,
+  inject,
+  numberAttribute
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { fromEvent, timer, debounceTime, filter } from 'rxjs';
@@ -29,7 +29,7 @@ import { fromEvent, timer, debounceTime, filter } from 'rxjs';
 // import type { PDFViewer } from 'pdfjs-dist/types/web/pdf_viewer';
 
 import { AlainConfigService } from '@delon/util/config';
-import { BooleanInput, InputBoolean, InputNumber, NumberInput, ZoneOutside } from '@delon/util/decorator';
+import { ZoneOutside } from '@delon/util/decorator';
 import { LazyService } from '@delon/util/other';
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { NzSkeletonComponent } from 'ng-zorro-antd/skeleton';
@@ -71,17 +71,15 @@ const BORDER_WIDTH = 9;
   imports: [NzSkeletonComponent]
 })
 export class PdfComponent implements OnChanges, AfterViewInit, OnDestroy {
-  static ngAcceptInputType_pi: NumberInput;
-  static ngAcceptInputType_delay: NumberInput;
-  static ngAcceptInputType_showAllPages: BooleanInput;
-  static ngAcceptInputType_stickToPage: BooleanInput;
-  static ngAcceptInputType_originalSize: BooleanInput;
-  static ngAcceptInputType_fitToPage: BooleanInput;
-  static ngAcceptInputType_disableTextLayer: BooleanInput;
-  static ngAcceptInputType_removePageBorders: BooleanInput;
+  private readonly lazySrv = inject(LazyService);
+  private readonly platform = inject(Platform);
+  private readonly _el: HTMLElement = inject(ElementRef).nativeElement;
+  private readonly doc = inject(DOCUMENT);
+  private readonly cdr = inject(ChangeDetectorRef);
+  private readonly ngZone = inject(NgZone);
+  private readonly destroy$ = inject(DestroyRef);
 
   inited = false;
-  private destroy$ = inject(DestroyRef);
   private lib: string = '';
   private _pdf?: PDFDocumentProxy | null;
   private loadingTask?: PDFDocumentLoadingTask;
@@ -107,44 +105,43 @@ export class PdfComponent implements OnChanges, AfterViewInit, OnDestroy {
     this._src = dataOrBuffer;
     this.load();
   }
-  @Input()
-  @InputNumber()
+  @Input({ transform: numberAttribute })
   set pi(val: number) {
     this._pi = this.getValidPi(val);
     if (this.pageViewer) {
       this.pageViewer.scrollPageIntoView({ pageNumber: this._pi });
     }
   }
-  @Input() @InputBoolean() set showAll(val: boolean) {
+  @Input({ transform: booleanAttribute }) set showAll(val: boolean) {
     this._showAll = val;
     this.resetDoc();
   }
-  @Input() @InputBoolean() set renderText(val: boolean) {
+  @Input({ transform: booleanAttribute }) set renderText(val: boolean) {
     this._renderText = val;
     if (this.pageViewer) {
       this.resetDoc();
     }
   }
   @Input() textLayerMode = PdfTextLayerMode.ENABLE;
-  @Input() @InputBoolean() showBorders = false;
-  @Input() @InputBoolean() stickToPage = false;
-  @Input() @InputBoolean() originalSize = true;
-  @Input() @InputBoolean() fitToPage = false;
-  @Input() @InputNumber() set zoom(val: number) {
+  @Input({ transform: booleanAttribute }) showBorders = false;
+  @Input({ transform: booleanAttribute }) stickToPage = false;
+  @Input({ transform: booleanAttribute }) originalSize = true;
+  @Input({ transform: booleanAttribute }) fitToPage = false;
+  @Input({ transform: numberAttribute }) set zoom(val: number) {
     if (val <= 0) return;
     this._zoom = val;
   }
   @Input() zoomScale: PdfZoomScale = 'page-width';
-  @Input() @InputNumber() set rotation(val: number) {
+  @Input({ transform: numberAttribute }) set rotation(val: number) {
     if (val % 90 !== 0) {
       console.warn(`Invalid rotation angle, shoule be divisible by 90.`);
       return;
     }
     this._rotation = val;
   }
-  @Input() @InputBoolean() autoReSize = true;
+  @Input({ transform: booleanAttribute }) autoReSize = true;
   @Input() externalLinkTarget = PdfExternalLinkTarget.BLANK;
-  @Input() @InputNumber() delay?: number;
+  @Input({ transform: numberAttribute }) delay?: number;
   @Output() readonly change = new EventEmitter<PdfChangeEvent>();
 
   get loading(): boolean {
@@ -180,18 +177,10 @@ export class PdfComponent implements OnChanges, AfterViewInit, OnDestroy {
   }
 
   private get el(): HTMLElement {
-    return this._el.nativeElement.querySelector('.pdf-container') as HTMLElement;
-  }
-
-  constructor(
-    private ngZone: NgZone,
-    configSrv: AlainConfigService,
-    private lazySrv: LazyService,
-    private platform: Platform,
-    private _el: ElementRef<HTMLElement>,
-    @Optional() @Inject(DOCUMENT) private doc: NzSafeAny,
-    private cdr: ChangeDetectorRef
-  ) {
+    return this._el.querySelector('.pdf-container') as HTMLElement;
+  }
+
+  constructor(configSrv: AlainConfigService) {
     const cog = configSrv.merge('pdf', PDF_DEFULAT_CONFIG)!;
     Object.assign(this, cog);
 

packages/abc/quick-menu/quick-menu.component.ts

@@ -11,10 +11,12 @@ import {
   Output,
   Renderer2,
   TemplateRef,
-  ViewEncapsulation
+  ViewEncapsulation,
+  booleanAttribute,
+  inject,
+  numberAttribute
 } from '@angular/core';
 
-import { BooleanInput, InputBoolean, InputNumber, NumberInput } from '@delon/util/decorator';
 import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet';
 import { NzIconDirective } from 'ng-zorro-antd/icon';
 
@@ -33,23 +35,18 @@ import { NzIconDirective } from 'ng-zorro-antd/icon';
   imports: [NgStyle, NzIconDirective, NzStringTemplateOutletDirective]
 })
 export class QuickMenuComponent implements OnInit, OnChanges {
-  static ngAcceptInputType_top: NumberInput;
-  static ngAcceptInputType_width: NumberInput;
-  static ngAcceptInputType_expand: BooleanInput;
+  private readonly cdr = inject(ChangeDetectorRef);
+  private readonly el: HTMLElement = inject(ElementRef).nativeElement;
+  private readonly render = inject(Renderer2);
 
-  constructor(
-    private cdr: ChangeDetectorRef,
-    private el: ElementRef,
-    private render: Renderer2
-  ) {}
   ctrlStyle: { [key: string]: string | undefined } = {};
 
   @Input() icon: string | TemplateRef<void> = 'question-circle';
-  @Input() @InputNumber() top = 120;
-  @Input() @InputNumber() width = 200;
+  @Input({ transform: numberAttribute }) top = 120;
+  @Input({ transform: numberAttribute }) width = 200;
   @Input() bgColor?: string;
   @Input() borderColor?: string;
-  @Input() @InputBoolean() expand: boolean = false;
+  @Input({ transform: booleanAttribute }) expand: boolean = false;
   @Output() readonly expandChange = new EventEmitter<boolean>();
 
   private show = false;
@@ -78,7 +75,7 @@ export class QuickMenuComponent implements OnInit, OnChanges {
     if (this.borderColor) {
       res.push(`border-color:${this.borderColor}`);
     }
-    this.render.setAttribute(this.el.nativeElement, 'style', res.join(';'));
+    this.render.setAttribute(this.el, 'style', res.join(';'));
     this.cdr.detectChanges();
   }
 

packages/abc/result/result.component.ts

@@ -5,9 +5,9 @@ import {
   Component,
   Input,
   OnInit,
-  Optional,
   TemplateRef,
-  ViewEncapsulation
+  ViewEncapsulation,
+  inject
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
@@ -29,7 +29,9 @@ import { NzIconDirective } from 'ng-zorro-antd/icon';
   imports: [NzIconDirective, NzStringTemplateOutletDirective]
 })
 export class ResultComponent implements OnInit {
-  private dir$ = this.directionality.change?.pipe(takeUntilDestroyed());
+  private readonly cdr = inject(ChangeDetectorRef);
+  private readonly directionality = inject(Directionality, { optional: true });
+  private dir$ = this.directionality?.change?.pipe(takeUntilDestroyed());
   _type = '';
   _icon = '';
   @Input()
@@ -51,16 +53,11 @@ export class ResultComponent implements OnInit {
   @Input() title?: string | TemplateRef<void>;
   @Input() description?: string | TemplateRef<void>;
   @Input() extra?: string | TemplateRef<void>;
-  dir: Direction = 'ltr';
-
-  constructor(
-    @Optional() private directionality: Directionality,
-    private cdr: ChangeDetectorRef
-  ) {}
+  dir?: Direction = 'ltr';
 
   ngOnInit(): void {
-    this.dir = this.directionality.value;
-    this.dir$.subscribe((direction: Direction) => {
+    this.dir = this.directionality?.value;
+    this.dir$?.subscribe((direction: Direction) => {
       this.dir = direction;
       this.cdr.detectChanges();
     });