refactor(module:dropdown): refactor dropdown

components/affix/nz-affix.component.ts

@@ -25,8 +25,8 @@ import {
   shallowEqual,
   throttleByAnimationFrameDecorator,
   toNumber,
-  NzScrollService,
-  NGStyleInterface
+  NgStyleInterface,
+  NzScrollService
 } from 'ng-zorro-antd/core';
 
 @Component({
@@ -84,8 +84,8 @@ export class NzAffixComponent implements OnInit, OnDestroy {
 
   private readonly placeholderNode: HTMLElement;
 
-  private affixStyle: NGStyleInterface | undefined;
-  private placeholderStyle: NGStyleInterface | undefined;
+  private affixStyle: NgStyleInterface | undefined;
+  private placeholderStyle: NgStyleInterface | undefined;
   private _target: Element | Window | null = null;
   private _offsetTop: number | null;
   private _offsetBottom: number | null;
@@ -167,7 +167,7 @@ export class NzAffixComponent implements OnInit, OnDestroy {
       : ({ top: 0, left: 0, bottom: 0 } as ClientRect);
   }
 
-  private genStyle(affixStyle?: NGStyleInterface): string {
+  private genStyle(affixStyle?: NgStyleInterface): string {
     if (!affixStyle) {
       return '';
     }
@@ -179,7 +179,7 @@ export class NzAffixComponent implements OnInit, OnDestroy {
       .join(';');
   }
 
-  private setAffixStyle(e: Event, affixStyle?: NGStyleInterface): void {
+  private setAffixStyle(e: Event, affixStyle?: NgStyleInterface): void {
     const originalAffixStyle = this.affixStyle;
     const isWindow = this._target === window;
     if (e.type === 'scroll' && originalAffixStyle && affixStyle && isWindow) {
@@ -205,7 +205,7 @@ export class NzAffixComponent implements OnInit, OnDestroy {
     }
   }
 
-  private setPlaceholderStyle(placeholderStyle?: NGStyleInterface): void {
+  private setPlaceholderStyle(placeholderStyle?: NgStyleInterface): void {
     const originalPlaceholderStyle = this.placeholderStyle;
     if (shallowEqual(placeholderStyle, originalPlaceholderStyle)) {
       return;

components/anchor/nz-anchor.component.ts

@@ -25,7 +25,7 @@ import {
 import { fromEvent, Subscription } from 'rxjs';
 import { distinctUntilChanged, throttleTime } from 'rxjs/operators';
 
-import { toNumber, InputBoolean, InputNumber, NzScrollService, NGStyleInterface } from 'ng-zorro-antd/core';
+import { toNumber, InputBoolean, InputNumber, NgStyleInterface, NzScrollService } from 'ng-zorro-antd/core';
 
 import { NzAnchorLinkComponent } from './nz-anchor-link.component';
 
@@ -75,7 +75,7 @@ export class NzAnchorComponent implements OnDestroy, AfterViewInit {
   @Output() readonly nzScroll = new EventEmitter<NzAnchorLinkComponent>();
 
   visible = false;
-  wrapperStyle: NGStyleInterface = { 'max-height': '100vh' };
+  wrapperStyle: NgStyleInterface = { 'max-height': '100vh' };
 
   private links: NzAnchorLinkComponent[] = [];
   private animating = false;

components/badge/nz-badge.spec.ts

@@ -3,7 +3,7 @@ import { fakeAsync, tick, ComponentFixture, TestBed } from '@angular/core/testin
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
-import { NGStyleInterface } from 'ng-zorro-antd/core';
+import { NgStyleInterface } from 'ng-zorro-antd/core';
 
 import { NzBadgeComponent } from './nz-badge.component';
 import { NzBadgeModule } from './nz-badge.module';
@@ -142,6 +142,6 @@ export class NzTestBadgeBasicComponent {
   overflow = 20;
   showZero = false;
   status: string;
-  style: NGStyleInterface;
+  style: NgStyleInterface;
   text: string;
 }

components/badge/style/index.less

@@ -1,191 +0,0 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-
-@badge-prefix-cls: ~'@{ant-prefix}-badge';
-@number-prefix-cls: ~'@{ant-prefix}-scroll-number';
-
-.@{badge-prefix-cls} {
-  .reset-component;
-
-  position: relative;
-  display: inline-block;
-  color: unset;
-  line-height: 1;
-
-  &-count {
-    z-index: @zindex-badge;
-    min-width: @badge-height;
-    height: @badge-height;
-    padding: 0 6px;
-    color: @badge-text-color;
-    font-weight: @badge-font-weight;
-    font-size: @badge-font-size;
-    line-height: @badge-height;
-    white-space: nowrap;
-    text-align: center;
-    background: @highlight-color;
-    border-radius: @badge-height / 2;
-    box-shadow: 0 0 0 1px @shadow-color-inverse;
-    a,
-    a:hover {
-      color: @badge-text-color;
-    }
-  }
-
-  &-multiple-words {
-    padding: 0 8px;
-  }
-
-  &-dot {
-    z-index: @zindex-badge;
-    width: @badge-dot-size;
-    height: @badge-dot-size;
-    background: @highlight-color;
-    border-radius: 100%;
-    box-shadow: 0 0 0 1px @shadow-color-inverse;
-  }
-
-  &-count,
-  &-dot,
-  .@{number-prefix-cls}-custom-component {
-    position: absolute;
-    top: 0;
-    right: 0;
-    transform: translate(50%, -50%);
-    transform-origin: 100% 0%;
-  }
-
-  &-status {
-    line-height: inherit;
-    vertical-align: baseline;
-
-    &-dot {
-      position: relative;
-      top: -1px;
-      display: inline-block;
-      width: @badge-status-size;
-      height: @badge-status-size;
-      vertical-align: middle;
-      border-radius: 50%;
-    }
-    &-success {
-      background-color: @success-color;
-    }
-    &-processing {
-      position: relative;
-      background-color: @processing-color;
-      &::after {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        border: 1px solid @processing-color;
-        border-radius: 50%;
-        animation: antStatusProcessing 1.2s infinite ease-in-out;
-        content: '';
-      }
-    }
-    &-default {
-      background-color: @normal-color;
-    }
-    &-error {
-      background-color: @error-color;
-    }
-    &-warning {
-      background-color: @warning-color;
-    }
-
-    // mixin to iterate over colors and create CSS class for each one
-    .make-color-classes(@i: length(@preset-colors)) when (@i > 0) {
-      .make-color-classes(@i - 1);
-      @color: extract(@preset-colors, @i);
-      @darkColor: '@{color}-6';
-      &-@{color} {
-        background: @@darkColor;
-      }
-    }
-    .make-color-classes();
-
-    &-text {
-      margin-left: 8px;
-      color: @text-color;
-      font-size: @font-size-base;
-    }
-  }
-
-  &-zoom-appear,
-  &-zoom-enter {
-    animation: antZoomBadgeIn 0.3s @ease-out-back;
-    animation-fill-mode: both;
-  }
-
-  &-zoom-leave {
-    animation: antZoomBadgeOut 0.3s @ease-in-back;
-    animation-fill-mode: both;
-  }
-
-  &-not-a-wrapper {
-    &:not(.@{badge-prefix-cls}-status) {
-      vertical-align: middle;
-    }
-
-    .@{ant-prefix}-scroll-number {
-      position: relative;
-      top: auto;
-      display: block;
-    }
-
-    .@{badge-prefix-cls}-count {
-      transform: none;
-    }
-  }
-}
-
-@keyframes antStatusProcessing {
-  0% {
-    transform: scale(0.8);
-    opacity: 0.5;
-  }
-  100% {
-    transform: scale(2.4);
-    opacity: 0;
-  }
-}
-
-.@{number-prefix-cls} {
-  overflow: hidden;
-  &-only {
-    display: inline-block;
-    height: @badge-height;
-    transition: all 0.3s @ease-in-out;
-    > p {
-      height: @badge-height;
-      margin: 0;
-    }
-  }
-
-  &-symbol {
-    vertical-align: top;
-  }
-}
-
-@keyframes antZoomBadgeIn {
-  0% {
-    transform: scale(0) translate(50%, -50%);
-    opacity: 0;
-  }
-  100% {
-    transform: scale(1) translate(50%, -50%);
-  }
-}
-
-@keyframes antZoomBadgeOut {
-  0% {
-    transform: scale(1) translate(50%, -50%);
-  }
-  100% {
-    transform: scale(0) translate(50%, -50%);
-    opacity: 0;
-  }
-}

components/button/demo/multiple.ts

@@ -5,8 +5,8 @@ import { Component } from '@angular/core';
   template: `
     <button nz-button nzType="primary">primary</button>
     <button nz-button nzType="default">secondary</button>
-    <nz-dropdown>
-      <button nz-button nz-dropdown>Actions<i nz-icon type="down"></i></button>
+    <button nz-button nz-dropdown [nzDropdownMenu]="menu">Actions<i nz-icon type="down"></i></button>
+    <nz-dropdown-menu #menu="nzDropdownMenu">
       <ul nz-menu>
         <li nz-menu-item>
           <a>1st item</a>
@@ -18,7 +18,7 @@ import { Component } from '@angular/core';
           <a>3rd item</a>
         </li>
       </ul>
-    </nz-dropdown>
+    </nz-dropdown-menu>
   `,
   styles: [
     `

components/core/dropdown/nz-dropdown-service.resolver.ts

@@ -10,4 +10,4 @@ import { InjectionToken } from '@angular/core';
 
 import { NzMenuBaseService } from './nz-menu-base.service';
 
-export const NzDropdownHigherOrderServiceToken = new InjectionToken<NzMenuBaseService>('NzTreeHigherOrder');
+export const NzDropdownHigherOrderServiceToken = new InjectionToken<NzMenuBaseService>('NzMenuHigherOrder');

components/core/dropdown/nz-menu-base.service.ts

@@ -7,7 +7,7 @@
  */
 
 import { Injectable } from '@angular/core';
-import { merge, BehaviorSubject, Subject } from 'rxjs';
+import { BehaviorSubject, Subject } from 'rxjs';
 
 import { NzDirectionVHIType } from '../types';
 
@@ -18,7 +18,6 @@ export class NzMenuBaseService {
   theme$ = new Subject();
   mode$ = new BehaviorSubject<NzDirectionVHIType>('vertical');
   inlineIndent$ = new BehaviorSubject<number>(24);
-  check$ = merge(this.theme$, this.mode$, this.inlineIndent$);
   theme: 'light' | 'dark' = 'light';
   mode: NzDirectionVHIType = 'vertical';
   inlineIndent = 24;

components/core/overlay/overlay-position.ts

@@ -74,8 +74,8 @@ export const DEFAULT_TOOLTIP_POSITIONS = [POSITION_MAP.top, POSITION_MAP.right,
 export const DEFAULT_DROPDOWN_POSITIONS = [
   POSITION_MAP.bottomLeft,
   POSITION_MAP.bottomRight,
-  POSITION_MAP.topLeft,
-  POSITION_MAP.topRight
+  POSITION_MAP.topRight,
+  POSITION_MAP.topLeft
 ];
 export const DEFAULT_SUBMENU_POSITIONS = [POSITION_MAP.rightTop, POSITION_MAP.leftTop];
 export const DEFAULT_CASCADER_POSITIONS = [

components/core/services/update-host-class.service.ts

@@ -13,7 +13,7 @@ import { NgClassInterface } from '../types/ng-class';
 @Injectable()
 export class NzUpdateHostClassService {
   private classMap = {};
-  private renderer: Renderer2;
+  readonly renderer: Renderer2;
 
   updateHostClass(el: HTMLElement, classMap: object): void {
     this.removeClass(el, this.classMap, this.renderer);

components/core/types/ng-class.ts

@@ -13,6 +13,6 @@ export interface NgClassInterface {
   [klass: string]: any; // tslint:disable-line:no-any
 }
 
-export interface NGStyleInterface {
+export interface NgStyleInterface {
   [klass: string]: any; // tslint:disable-line:no-any
 }

components/date-picker/date-picker.component.spec.ts

@@ -9,7 +9,7 @@ import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import isSameDay from 'date-fns/is_same_day';
 
-import { dispatchKeyboardEvent, dispatchMouseEvent, NGStyleInterface } from 'ng-zorro-antd/core';
+import { dispatchKeyboardEvent, dispatchMouseEvent, NgStyleInterface } from 'ng-zorro-antd/core';
 import en_US from '../i18n/languages/en_US';
 
 import { NzI18nModule, NzI18nService } from 'ng-zorro-antd/i18n';
@@ -846,10 +846,10 @@ class NzTestDatePickerComponent {
   nzDisabledDate: (d: Date) => boolean;
   nzLocale: any; // tslint:disable-line:no-any
   nzPlaceHolder: string;
-  nzPopupStyle: NGStyleInterface;
+  nzPopupStyle: NgStyleInterface;
   nzDropdownClassName: string;
   nzSize: string;
-  nzStyle: NGStyleInterface;
+  nzStyle: NgStyleInterface;
 
   nzOnChange(): void {}
   nzOnCalendarChange(): void {}

components/date-picker/month-picker.component.spec.ts

@@ -8,7 +8,7 @@ import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import isBefore from 'date-fns/is_before';
 
-import { dispatchMouseEvent, NGStyleInterface } from 'ng-zorro-antd/core';
+import { dispatchMouseEvent, NgStyleInterface } from 'ng-zorro-antd/core';
 import { NzInputModule } from 'ng-zorro-antd/input';
 
 import { NzDatePickerModule } from './date-picker.module';
@@ -472,10 +472,10 @@ class NzTestMonthPickerComponent {
   nzDisabledDate: (d: Date) => boolean;
   nzLocale: any; // tslint:disable-line:no-any
   nzPlaceHolder: string;
-  nzPopupStyle: NGStyleInterface;
+  nzPopupStyle: NgStyleInterface;
   nzDropdownClassName: string;
   nzSize: string;
-  nzStyle: NGStyleInterface;
+  nzStyle: NgStyleInterface;
 
   nzOnOpenChange(): void {}