fix(module:button): fix button animation bug caused by angular

close #2697

components/button/button-group.component.ts

@@ -25,11 +25,10 @@ export class NzButtonGroupComponent implements OnInit, OnChanges {
   @Input() nzSize: NzButtonGroupSize = 'default';
   hostClassMap = {};
   updateHostClassMap(): void {
-    const prefixCls = 'ant-btn-group';
     this.hostClassMap = {
-      [`${prefixCls}`]: true,
-      [`${prefixCls}-lg`]: this.nzSize === 'large',
-      [`${prefixCls}-sm`]: this.nzSize === 'small'
+      ['ant-btn-group']: true,
+      ['ant-btn-group-lg']: this.nzSize === 'large',
+      ['ant-btn-group-sm']: this.nzSize === 'small'
     };
   }
 

components/button/button-group.spec.ts

@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { By } from '@angular/platform-browser';
-import { createComponentBed, NzButtonGroupComponent } from 'ng-zorro-antd';
-import { NzButtonGroupSize } from './button-group.component';
+import { ɵcreateComponentBed as createComponentBed } from 'ng-zorro-antd/core';
+import { NzButtonGroupComponent, NzButtonGroupSize } from './button-group.component';
 
 describe('button-group', () => {
   it('should button group size work', () => {

components/button/button.component.ts

@@ -68,22 +68,21 @@ export class NzButtonComponent implements OnInit, OnDestroy, OnChanges, AfterVie
   hostClassMap = {};
 
   updateHostClassMap(): void {
-    const prefixCls = 'ant-btn';
     this.hostClassMap = {
-      [`${prefixCls}`]: true,
-      [`${prefixCls}-primary`]: this.nzType === 'primary',
-      [`${prefixCls}-dashed`]: this.nzType === 'dashed',
-      [`${prefixCls}-link`]: this.nzType === 'link',
-      [`${prefixCls}-danger`]: this.nzType === 'danger',
-      [`${prefixCls}-circle`]: this.nzShape === 'circle',
-      [`${prefixCls}-round`]: this.nzShape === 'round',
-      [`${prefixCls}-lg`]: this.nzSize === 'large',
-      [`${prefixCls}-sm`]: this.nzSize === 'small',
-      [`${prefixCls}-dangerous`]: this.nzDanger,
-      [`${prefixCls}-loading`]: this.nzLoading,
-      [`${prefixCls}-background-ghost`]: this.nzGhost,
-      [`${prefixCls}-block`]: this.nzBlock,
-      [`ant-input-search-button`]: this.nzSearch
+      ['ant-btn']: true,
+      ['ant-btn-primary']: this.nzType === 'primary',
+      ['ant-btn-dashed']: this.nzType === 'dashed',
+      ['ant-btn-link']: this.nzType === 'link',
+      ['ant-btn-danger']: this.nzType === 'danger',
+      ['ant-btn-circle']: this.nzShape === 'circle',
+      ['ant-btn-round']: this.nzShape === 'round',
+      ['ant-btn-lg']: this.nzSize === 'large',
+      ['ant-btn-sm']: this.nzSize === 'small',
+      ['ant-btn-dangerous']: this.nzDanger,
+      ['ant-btn-loading']: this.nzLoading,
+      ['ant-btn-background-ghost']: this.nzGhost,
+      ['ant-btn-block']: this.nzBlock,
+      ['ant-input-search-button']: this.nzSearch
     };
     this.cdr.markForCheck();
   }

components/button/button.module.ts

@@ -9,15 +9,15 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { NzWaveModule } from 'ng-zorro-antd/core';
+import { NzWaveModule, ɵNzTransitionPatchModule as NzTransitionPatchModule } from 'ng-zorro-antd/core';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 
 import { NzButtonGroupComponent } from './button-group.component';
 import { NzButtonComponent } from './button.component';
 
 @NgModule({
   declarations: [NzButtonComponent, NzButtonGroupComponent],
-  exports: [NzButtonComponent, NzButtonGroupComponent],
-  imports: [CommonModule, NzWaveModule, NzIconModule]
+  exports: [NzButtonComponent, NzButtonGroupComponent, NzTransitionPatchModule],
+  imports: [CommonModule, NzWaveModule, NzIconModule, NzTransitionPatchModule]
 })
 export class NzButtonModule {}

components/button/button.spec.ts

@@ -1,7 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { fakeAsync, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { ComponentBed, createComponentBed } from 'ng-zorro-antd/core';
+import { ɵComponentBed as ComponentBed, ɵcreateComponentBed as createComponentBed } from 'ng-zorro-antd/core';
 import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
 import { NzButtonComponent, NzButtonShape, NzButtonSize, NzButtonType } from './index';
 

components/core/public-api.ts

@@ -8,6 +8,7 @@
 
 export * from './addon/public-api';
 export * from './animation/public-api';
+export * from './transition-patch/public-api';
 export * from './no-animation/public-api';
 export * from './overlay/public-api';
 export * from './time/public-api';

components/core/testing/public-api.ts

@@ -12,4 +12,4 @@ export * from './type-in-element';
 export * from './wrapped-error-message';
 export * from './fake-viewport-ruler';
 export * from './mock-ng-zone';
-export * from './componet-bed';
+export { createComponentBed as ɵcreateComponentBed, ComponentBed as ɵComponentBed } from './componet-bed';

components/core/transition-patch/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @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
+ */
+
+export * from './public-api';

components/core/transition-patch/package.json

@@ -0,0 +1,7 @@
+{
+  "ngPackage": {
+    "lib": {
+      "entryFile": "public-api.ts"
+    }
+  }
+}

components/core/transition-patch/public-api.ts

@@ -0,0 +1,10 @@
+/**
+ * @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
+ */
+
+export { NzTransitionPatchModule as ɵNzTransitionPatchModule } from './transition-patch.module';
+export { NzTransitionPatchDirective as ɵNzTransitionPatchDirective } from './transition-patch.directive';

components/core/transition-patch/transition-patch.directive.ts

@@ -0,0 +1,62 @@
+/**
+ * @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 { Platform } from '@angular/cdk/platform';
+import { AfterViewInit, Directive, ElementRef, Renderer2 } from '@angular/core';
+
+/**
+ * hack the bug
+ * angular router change with unexpected transition trigger after calling applicationRef.attachView
+ * https://github.com/angular/angular/issues/34718
+ */
+@Directive({
+  selector: '[nz-button],nz-button-group,[nz-icon]'
+})
+export class NzTransitionPatchDirective implements AfterViewInit {
+  readonly nativeElement: HTMLElement | null = null;
+  private readonly hiddenAttribute: string | null = null;
+  getHiddenAttribute(element: HTMLElement): string | null {
+    if (this.platform.isBrowser) {
+      return element.getAttribute('hidden');
+    } else {
+      return null;
+    }
+  }
+  getHiddenAttributeCount(attribute: string | null): number {
+    if (attribute === null) {
+      return 0;
+    } else if (typeof +attribute === 'number' && !isNaN(+attribute)) {
+      return +attribute;
+    } else {
+      return 1;
+    }
+  }
+  setHiddenAttribute(element: HTMLElement): void {
+    const increasedHiddenAttribute = this.getHiddenAttributeCount(this.getHiddenAttribute(element)) + 1;
+    this.renderer.setAttribute(element, 'hidden', `${increasedHiddenAttribute}`);
+  }
+  restoreHiddenAttribute(element: HTMLElement, originHiddenAttribute: string | null): void {
+    const decreasedHiddenAttribute = this.getHiddenAttributeCount(this.getHiddenAttribute(element)) - 1;
+    if (decreasedHiddenAttribute === 0) {
+      this.renderer.removeAttribute(element, 'hidden');
+    } else if (decreasedHiddenAttribute === 1) {
+      this.renderer.setAttribute(element, 'hidden', originHiddenAttribute || '');
+    } else {
+      this.renderer.setAttribute(element, 'hidden', `${decreasedHiddenAttribute}`);
+    }
+  }
+
+  constructor(elementRef: ElementRef, private renderer: Renderer2, private platform: Platform) {
+    this.nativeElement = elementRef.nativeElement;
+    this.hiddenAttribute = this.getHiddenAttribute(this.nativeElement!);
+    this.setHiddenAttribute(this.nativeElement!);
+  }
+  ngAfterViewInit(): void {
+    this.restoreHiddenAttribute(this.nativeElement!, this.hiddenAttribute);
+  }
+}

components/core/transition-patch/transition-patch.module.ts

@@ -0,0 +1,18 @@
+/**
+ * @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 { PlatformModule } from '@angular/cdk/platform';
+import { NgModule } from '@angular/core';
+import { NzTransitionPatchDirective } from './transition-patch.directive';
+
+@NgModule({
+  imports: [PlatformModule],
+  exports: [NzTransitionPatchDirective],
+  declarations: [NzTransitionPatchDirective]
+})
+export class NzTransitionPatchModule {}

components/core/transition-patch/transition-patch.spec.ts

@@ -0,0 +1,51 @@
+/**
+ * @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 { Component } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { ɵcreateComponentBed as createComponentBed } from 'ng-zorro-antd/core';
+import { NzTransitionPatchDirective } from './transition-patch.directive';
+
+describe('transition-patch', () => {
+  it('should visible after afterViewInit', () => {
+    const testBed = createComponentBed(TestTransitionPatchComponent, { declarations: [NzTransitionPatchDirective] });
+    const buttonElement = testBed.debugElement.query(By.directive(NzTransitionPatchDirective)).nativeElement;
+    expect(buttonElement.getAttribute('hidden')).toBeFalsy();
+  });
+  it('should hidden after afterViewInit', () => {
+    const testBed = createComponentBed(TestTransitionPatchHiddenComponent, { declarations: [NzTransitionPatchDirective] });
+    const buttonElement = testBed.debugElement.query(By.directive(NzTransitionPatchDirective)).nativeElement;
+    expect(buttonElement.getAttribute('hidden')).toBeFalsy();
+  });
+  it('should restore after afterViewInit', () => {
+    const testBed = createComponentBed(TestTransitionPatchRestoreComponent, { declarations: [NzTransitionPatchDirective] });
+    const buttonElement = testBed.debugElement.query(By.directive(NzTransitionPatchDirective)).nativeElement;
+    expect(buttonElement.getAttribute('hidden')).toBe('abc');
+  });
+});
+
+@Component({
+  template: `
+    <button nz-button id="patch"></button>
+  `
+})
+export class TestTransitionPatchComponent {}
+
+@Component({
+  template: `
+    <button nz-button hidden id="patch"></button>
+  `
+})
+export class TestTransitionPatchHiddenComponent {}
+
+@Component({
+  template: `
+    <button nz-button hidden="abc" id="patch"></button>
+  `
+})
+export class TestTransitionPatchRestoreComponent {}