chore: merge branch 'master' into issues-2410

.eslintrc.js

@@ -178,7 +178,9 @@ module.exports = {
     {
       files: ['*.html'],
       extends: ['plugin:@angular-eslint/template/recommended'],
-      rules: {}
+      rules: {
+        "@angular-eslint/template/prefer-self-closing-tags": "error"
+      }
     },
     {
       files: ['*.html'],

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

@@ -3,7 +3,7 @@ import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@a
 @Component({
   selector: 'avatar-list-item, [avatar-list-item]',
   exportAs: 'avatarListItem',
-  template: `<ng-content></ng-content>`,
+  template: `<ng-content />`,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None

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

@@ -8,15 +8,10 @@
       [nzText]="i.text"
       [nzIcon]="i.icon"
       [nzSize]="avatarSize"
-    ></nz-avatar>
-    <nz-avatar *ngIf="!i.tips" [nzSrc]="i.src" [nzText]="i.text" [nzIcon]="i.icon" [nzSize]="avatarSize"></nz-avatar>
+    />
+    <nz-avatar *ngIf="!i.tips" [nzSrc]="i.src" [nzText]="i.text" [nzIcon]="i.icon" [nzSize]="avatarSize" />
   </li>
   <li *ngIf="exceedCount > 0" [ngClass]="cls">
-    <nz-avatar
-      [nzSize]="avatarSize"
-      style="cursor: auto"
-      [ngStyle]="excessItemsStyle"
-      [nzText]="'+' + exceedCount"
-    ></nz-avatar>
+    <nz-avatar [nzSize]="avatarSize" style="cursor: auto" [ngStyle]="excessItemsStyle" [nzText]="'+' + exceedCount" />
   </li>
 </ul>

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

@@ -7,12 +7,11 @@ import {
   ContentChildren,
   Input,
   OnChanges,
-  OnDestroy,
   Optional,
   QueryList,
   ViewEncapsulation
 } from '@angular/core';
-import { Subject, takeUntil } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 import { InputNumber, NumberInput } from '@delon/util/decorator';
 import type { NgStyleInterface, NzSizeLDSType } from 'ng-zorro-antd/core/types';
@@ -31,13 +30,13 @@ import { AvatarListItemComponent } from './avatar-list-item.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None
 })
-export class AvatarListComponent implements AfterViewInit, OnChanges, OnDestroy {
+export class AvatarListComponent implements AfterViewInit, OnChanges {
   static ngAcceptInputType_maxLength: NumberInput;
 
   private inited = false;
   @ContentChildren(AvatarListItemComponent, { descendants: false })
   private _items!: QueryList<AvatarListItemComponent>;
-  private destroy$ = new Subject<void>();
+  private dir$ = this.directionality.change?.pipe(takeUntilDestroyed());
 
   items: AvatarListItemComponent[] = [];
   exceedCount = 0;
@@ -79,8 +78,9 @@ export class AvatarListComponent implements AfterViewInit, OnChanges, OnDestroy
 
   ngAfterViewInit(): void {
     this.dir = this.directionality.value;
-    this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
+    this.dir$.subscribe((direction: Direction) => {
       this.dir = direction;
+      this.cdr.detectChanges();
     });
     this.gen();
     this.inited = true;
@@ -91,9 +91,4 @@ export class AvatarListComponent implements AfterViewInit, OnChanges, OnDestroy
       this.gen();
     }
   }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
 }

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

@@ -68,20 +68,11 @@ describe('abc: avatar-list', () => {
 @Component({
   template: `
     <avatar-list [size]="size" [maxLength]="maxLength">
-      <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"></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" />
     </avatar-list>
   `
 })

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

@@ -14,7 +14,7 @@ import { CountdownComponent, CountdownConfig, CountdownEvent } from 'ngx-countdo
 @Component({
   selector: 'count-down',
   exportAs: 'countDown',
-  template: ` <countdown #cd *ngIf="config" [config]="config" (event)="handleEvent($event)"></countdown> `,
+  template: `<countdown #cd *ngIf="config" [config]="config" (event)="handleEvent($event)" />`,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None

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

@@ -51,10 +51,10 @@ describe('abc: count-down', () => {
 @Component({
   template: `
     <div *ngIf="config">
-      <count-down [config]="config" (event)="handleEvent()" style="font-size: 20px"></count-down>
+      <count-down [config]="config" (event)="handleEvent()" style="font-size: 20px" />
     </div>
     <div *ngIf="target">
-      <count-down [target]="target" (event)="handleEvent()" style="font-size: 20px"></count-down>
+      <count-down [target]="target" (event)="handleEvent()" style="font-size: 20px" />
     </div>
   `
 })

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

@@ -117,7 +117,7 @@ describe('abc: date-picker: nz-range-picker[extend]', () => {
       extend
       [(ngModelEnd)]="i.end"
       [shortcut]="shortcut"
-    ></nz-range-picker>
+    />
   `
 })
 class TestComponent {

packages/abc/ellipsis/ellipsis.component.html

@@ -1,12 +1,12 @@
-<div (cdkObserveContent)="refresh()" #orgEl style="display: none"><ng-content></ng-content></div>
+<div (cdkObserveContent)="refresh()" #orgEl style="display: none"><ng-content /></div>
 <ng-template #tooltipTpl let-con>
   <span
     *ngIf="tooltip; else con"
     nz-tooltip
     [nzTooltipTitle]="titleTpl"
     [nzTooltipOverlayStyle]="{ 'overflow-wrap': 'break-word', 'word-wrap': 'break-word' }"
   >
-    <ng-container *ngTemplateOutlet="con"></ng-container>
+    <ng-container *ngTemplateOutlet="con" />
     <ng-template #titleTpl><div [innerHTML]="orgHtml"></div></ng-template>
   </span>
 </ng-template>

packages/abc/error-collect/error-collect.component.ts

@@ -5,15 +5,17 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   ElementRef,
   Inject,
   Input,
-  OnDestroy,
   OnInit,
   Optional,
-  ViewEncapsulation
+  ViewEncapsulation,
+  inject
 } from '@angular/core';
-import { interval, Subject, takeUntil } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { interval } from 'rxjs';
 
 import { AlainConfigService } from '@delon/util/config';
 import { InputNumber } from '@delon/util/decorator';
@@ -36,9 +38,9 @@ import type { NzSafeAny } from 'ng-zorro-antd/core/types';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None
 })
-export class ErrorCollectComponent implements OnInit, OnDestroy {
+export class ErrorCollectComponent implements OnInit {
   private formEl: HTMLFormElement | null = null;
-  private destroy$ = new Subject<void>();
+  private destroy$ = inject(DestroyRef);
 
   _hiden = true;
   count = 0;
@@ -83,11 +85,12 @@ export class ErrorCollectComponent implements OnInit, OnDestroy {
 
   private install(): void {
     this.dir = this.directionality.value;
-    this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
+    this.directionality.change?.pipe(takeUntilDestroyed(this.destroy$)).subscribe((direction: Direction) => {
       this.dir = direction;
+      this.cdr.detectChanges();
     });
     interval(this.freq)
-      .pipe(takeUntil(this.destroy$))
+      .pipe(takeUntilDestroyed(this.destroy$))
       .subscribe(() => this.update());
     this.update();
   }
@@ -111,9 +114,4 @@ export class ErrorCollectComponent implements OnInit, OnDestroy {
     if (this.formEl === null) throw new Error('No found form element');
     this.install();
   }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
 }

packages/abc/error-collect/error-collect.spec.ts

@@ -80,7 +80,7 @@ describe('abc: error-collect', () => {
 
   it('should be throw [No found form element] if no form element', () => {
     expect(() => {
-      TestBed.overrideTemplate(TestComponent, `<error-collect #ec [freq]="freq"></error-collect>`)
+      TestBed.overrideTemplate(TestComponent, `<error-collect #ec [freq]="freq" />`)
         .createComponent(TestComponent)
         .detectChanges();
     }).toThrowError('No found form element');
@@ -95,7 +95,7 @@ describe('abc: error-collect', () => {
           <input nz-input formControlName="email" id="email" />
         </nz-form-control>
       </nz-form-item>
-      <error-collect #ec [freq]="freq" [offsetTop]="offsetTop"></error-collect>
+      <error-collect #ec [freq]="freq" [offsetTop]="offsetTop" />
     </form>
   `
 })

packages/abc/exception/exception.component.html

@@ -6,7 +6,7 @@ <h1 class="exception__cont-title" [innerHTML]="_title"></h1>
   <div class="exception__cont-desc" [innerHTML]="_desc || locale[_type]"></div>
   <div class="exception__cont-actions">
     <div (cdkObserveContent)="checkContent()" #conTpl>
-      <ng-content></ng-content>
+      <ng-content />
     </div>
     <button *ngIf="!hasCon" nz-button [routerLink]="backRouterLink" [nzType]="'primary'">
       {{ locale.backToHome }}

packages/abc/exception/exception.component.ts

@@ -3,16 +3,17 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   ElementRef,
   Input,
-  OnDestroy,
   OnInit,
   Optional,
   ViewChild,
-  ViewEncapsulation
+  ViewEncapsulation,
+  inject
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DomSanitizer, SafeHtml, SafeUrl } from '@angular/platform-browser';
-import { Subject, takeUntil } from 'rxjs';
 
 import { DelonLocaleService, LocaleData } from '@delon/theme';
 import { isEmpty } from '@delon/util/browser';
@@ -33,10 +34,10 @@ export type ExceptionType = 403 | 404 | 500;
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None
 })
-export class ExceptionComponent implements OnInit, OnDestroy {
+export class ExceptionComponent implements OnInit {
   static ngAcceptInputType_type: ExceptionType | string;
 
-  private destroy$ = new Subject<void>();
+  private destroy$ = inject(DestroyRef);
   @ViewChild('conTpl', { static: true }) private conTpl!: ElementRef;
 
   _type!: ExceptionType;
@@ -113,15 +114,14 @@ export class ExceptionComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.dir = this.directionality.value;
-    this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
+    this.directionality.change?.pipe(takeUntilDestroyed(this.destroy$)).subscribe((direction: Direction) => {
       this.dir = direction;
+      this.cdr.detectChanges();
+    });
+    this.i18n.change.pipe(takeUntilDestroyed(this.destroy$)).subscribe(() => {
+      this.locale = this.i18n.getData('exception');
+      this.cdr.detectChanges();
     });
-    this.i18n.change.pipe(takeUntil(this.destroy$)).subscribe(() => (this.locale = this.i18n.getData('exception')));
     this.checkContent();
   }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
 }

packages/abc/exception/exception.spec.ts

@@ -2,6 +2,7 @@ import { Directionality } from '@angular/cdk/bidi';
 import { Component, DebugElement, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { RouterTestingModule } from '@angular/router/testing';
 
 import { createTestContext } from '@delon/testing';
 import { DelonLocaleModule, DelonLocaleService, en_US } from '@delon/theme';
@@ -16,7 +17,7 @@ describe('abc: exception', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [ExceptionModule, DelonLocaleModule],
+      imports: [ExceptionModule, DelonLocaleModule, RouterTestingModule],
       declarations: [TestComponent]
     });
     ({ fixture, dl, context } = createTestContext(TestComponent));

packages/abc/footer-toolbar/footer-toolbar.component.html

@@ -2,6 +2,6 @@
   <ng-container *nzStringTemplateOutlet="extra">{{ extra }}</ng-container>
 </div>
 <div class="footer-toolbar__right">
-  <error-collect *ngIf="errorCollect"></error-collect>
-  <ng-content></ng-content>
+  <error-collect *ngIf="errorCollect" />
+  <ng-content />
 </div>

packages/abc/footer-toolbar/footer-toolbar.spec.ts

@@ -58,7 +58,7 @@ describe('abc: footer-toolbar', () => {
 });
 
 @Component({
-  template: ` <form><footer-toolbar [errorCollect]="errorCollect" [extra]="extra"></footer-toolbar></form> `
+  template: ` <form><footer-toolbar [errorCollect]="errorCollect" [extra]="extra" /></form> `
 })
 class TestComponent {
   errorCollect = true;