refactor(module:alert): refactor alert (NG-ZORRO#4779)

components/alert/alert.component.ts

@@ -0,0 +1,146 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  SimpleChanges,
+  TemplateRef,
+  ViewEncapsulation
+} from '@angular/core';
+import { InputBoolean, NzConfigService, slideAlertMotion, WithConfig } from 'ng-zorro-antd/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+const NZ_CONFIG_COMPONENT_NAME = 'alert';
+
+@Component({
+  selector: 'nz-alert',
+  exportAs: 'nzAlert',
+  animations: [slideAlertMotion],
+  template: `
+    <div
+      *ngIf="!closed"
+      class="ant-alert"
+      [class.ant-alert-success]="nzType === 'success'"
+      [class.ant-alert-info]="nzType === 'info'"
+      [class.ant-alert-warning]="nzType === 'warning'"
+      [class.ant-alert-error]="nzType === 'error'"
+      [class.ant-alert-no-icon]="!nzShowIcon"
+      [class.ant-alert-banner]="nzBanner"
+      [class.ant-alert-closable]="nzCloseable"
+      [class.ant-alert-with-description]="!!nzDescription"
+      [@slideAlertMotion]
+      (@slideAlertMotion.done)="onFadeAnimationDone()"
+    >
+      <ng-container *ngIf="nzShowIcon">
+        <i nz-icon class="ant-alert-icon" [nzType]="nzIconType || inferredIconType" [nzTheme]="iconTheme"></i>
+      </ng-container>
+      <span class="ant-alert-message" *ngIf="nzMessage">
+        <ng-container *nzStringTemplateOutlet="nzMessage">{{ nzMessage }}</ng-container>
+      </span>
+      <span class="ant-alert-description" *ngIf="nzDescription">
+        <ng-container *nzStringTemplateOutlet="nzDescription">{{ nzDescription }}</ng-container>
+      </span>
+      <button type="button" tabindex="0" *ngIf="nzCloseable || nzCloseText" class="ant-alert-close-icon" (click)="closeAlert()">
+        <ng-template #closeDefaultTemplate>
+          <i nz-icon nzType="close"></i>
+        </ng-template>
+        <ng-container *ngIf="nzCloseText; else closeDefaultTemplate">
+          <ng-container *nzStringTemplateOutlet="nzCloseText">
+            <span class="ant-alert-close-text">{{ nzCloseText }}</span>
+          </ng-container>
+        </ng-container>
+      </button>
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  preserveWhitespaces: false
+})
+export class NzAlertComponent implements OnChanges, OnDestroy {
+  @Input() nzCloseText: string | TemplateRef<void> | null = null;
+  @Input() nzIconType: string | null = null;
+  @Input() nzMessage: string | TemplateRef<void> | null = null;
+  @Input() nzDescription: string | TemplateRef<void> | null = null;
+  @Input() nzType: 'success' | 'info' | 'warning' | 'error' = 'info';
+  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, false) @InputBoolean() nzCloseable: boolean;
+  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, false) @InputBoolean() nzShowIcon: boolean;
+  @Input() @InputBoolean() nzBanner = false;
+  @Output() readonly nzOnClose = new EventEmitter<boolean>();
+  closed = false;
+  iconTheme: 'outline' | 'fill' = 'fill';
+  inferredIconType: string = 'info-circle';
+  private isTypeSet = false;
+  private isShowIconSet = false;
+  private destroy$ = new Subject();
+
+  constructor(public nzConfigService: NzConfigService, private cdr: ChangeDetectorRef) {
+    this.nzConfigService
+      .getConfigChangeEventForComponent(NZ_CONFIG_COMPONENT_NAME)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        this.cdr.markForCheck();
+      });
+  }
+
+  closeAlert(): void {
+    this.closed = true;
+  }
+
+  onFadeAnimationDone(): void {
+    if (this.closed) {
+      this.nzOnClose.emit(true);
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const { nzShowIcon, nzDescription, nzType, nzBanner } = changes;
+    if (nzShowIcon) {
+      this.isShowIconSet = true;
+    }
+    if (nzType) {
+      this.isTypeSet = true;
+      switch (this.nzType) {
+        case 'error':
+          this.inferredIconType = 'close-circle';
+          break;
+        case 'success':
+          this.inferredIconType = 'check-circle';
+          break;
+        case 'info':
+          this.inferredIconType = 'info-circle';
+          break;
+        case 'warning':
+          this.inferredIconType = 'exclamation-circle';
+          break;
+      }
+    }
+    if (nzDescription) {
+      this.iconTheme = this.nzDescription ? 'outline' : 'fill';
+    }
+    if (nzBanner) {
+      if (!this.isTypeSet) {
+        this.nzType = 'warning';
+      }
+      if (!this.isShowIconSet) {
+        this.nzShowIcon = true;
+      }
+    }
+  }
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}

components/alert/nz-alert.module.ts → components/alert/alert.module.ts

@@ -11,7 +11,7 @@ import { NgModule } from '@angular/core';
 import { NzOutletModule } from 'ng-zorro-antd/core';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 
-import { NzAlertComponent } from './nz-alert.component';
+import { NzAlertComponent } from './alert.component';
 
 @NgModule({
   declarations: [NzAlertComponent],

components/alert/nz-alert.spec.ts → components/alert/alert.spec.ts

@@ -2,11 +2,9 @@ import { Component, DebugElement, TemplateRef, ViewChild } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-
 import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
-
-import { NzAlertComponent } from './nz-alert.component';
-import { NzAlertModule } from './nz-alert.module';
+import { NzAlertComponent } from './alert.component';
+import { NzAlertModule } from './alert.module';
 
 describe('alert', () => {
   beforeEach(fakeAsync(() => {

components/alert/doc/index.en-US.md

@@ -27,6 +27,6 @@ import { NzAlertModule } from 'ng-zorro-antd/alert';
 | `[nzDescription]` | Additional content of Alert | `string \| TemplateRef<void>` | - |
 | `[nzMessage]` | Content of Alert | `string \| TemplateRef<void>` | - |
 | `[nzShowIcon]` | Whether to show icon, in `nzBanner` mode default is `true` | `boolean` | `false` | ✅ |
-| `[nzIconType]` | Icon type, effective when `nzShowIcon` is `true` | `string \| string[] \| Set<string> \| { [klass: string]: any; }` | - |
+| `[nzIconType]` | Icon type, effective when `nzShowIcon` is `true` | `string` | - |
 | `[nzType]` | Type of Alert styles, in `nzBanner` mode default is `'warning'` | `'success' \| 'info' \| 'warning' \| 'error'` | `'info'` |
 | `(nzOnClose)` | Callback when Alert is closed | `EventEmitter<void>` | - |

components/alert/doc/index.zh-CN.md

@@ -28,6 +28,6 @@ import { NzAlertModule } from 'ng-zorro-antd/alert';
 | `[nzDescription]` | 警告提示的辅助性文字介绍 | `string \| TemplateRef<void>` | - |
 | `[nzMessage]` | 警告提示内容 | `string \| TemplateRef<void>` | - |
 | `[nzShowIcon]` | 是否显示辅助图标，`nzBanner` 模式下默认值为 `true` | `boolean` | `false` | ✅ |
-| `[nzIconType]` | 自定义图标类型，`nzShowIcon` 为 `true` 时有效 | `string \| string[] \| Set<string> \| { [klass: string]: any; }` | - |
+| `[nzIconType]` | 自定义图标类型，`nzShowIcon` 为 `true` 时有效 | `string` | - |
 | `[nzType]` | 指定警告提示的样式，`nzBanner` 模式下默认值为 `'warning'` | `'success' \| 'info' \| 'warning' \| 'error'` | `'info'` |
 | `(nzOnClose)` | 关闭时触发的回调函数 | `EventEmitter<void>` | - |

components/alert/public-api.ts

@@ -6,5 +6,5 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-export * from './nz-alert.component';
-export * from './nz-alert.module';
+export * from './alert.component';
+export * from './alert.module';

components/alert/style/entry.less

@@ -1 +1,2 @@
 @import './index.less';
+@import './patch.less';

components/alert/style/patch.less

@@ -0,0 +1,3 @@
+nz-alert {
+  display: block;
+}