refactor(module:divider): refactor divider (#2482)

ref #2381

components/badge/style/index.less

@@ -25,6 +25,7 @@
     font-weight: @badge-font-weight;
     white-space: nowrap;
     box-shadow: 0 0 0 1px #fff;
+    z-index: 10;
     a,
     a:hover {
       color: #fff;
@@ -80,7 +81,7 @@
         height: 100%;
         border-radius: 50%;
         border: 1px solid @processing-color;
-        content: '';
+        content: "";
         animation: antStatusProcessing 1.2s infinite ease-in-out;
       }
     }

components/button/style/index.less

@@ -82,7 +82,7 @@
     right: -1px;
     background: #fff;
     opacity: 0.35;
-    content: '';
+    content: "";
     border-radius: inherit;
     z-index: 1;
     transition: opacity .2s;
@@ -163,7 +163,7 @@
   }
 
   .christmas&-primary:before {
-    content: '';
+    content: "";
     display: block;
     position: absolute;
     top: -6px;

components/button/style/mixin.less

@@ -101,7 +101,7 @@
   > a:only-child {
     color: currentColor;
     &:after {
-      content: '';
+      content: "";
       position: absolute;
       top: 0;
       left: 0;

components/checkbox/style/mixin.less

@@ -28,7 +28,7 @@
       height: 100%;
       border-radius: @border-radius-sm;
       border: 1px solid @checkbox-color;
-      content: '';
+      content: "";
       animation: antCheckboxEffect 0.36s ease-in-out;
       animation-fill-mode: both;
       visibility: hidden;

components/collapse/nz-collapse.module.ts

@@ -1,15 +1,15 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { NzStringTemplateOutletDirective } from '../core/addon/string_template_outlet';
+import { NzAddOnModule } from '../core/addon/addon.module';
 import { NzIconModule } from '../icon/nz-icon.module';
 
 import { NzCollapsePanelComponent } from './nz-collapse-panel.component';
 import { NzCollapseComponent } from './nz-collapse.component';
 
 @NgModule({
-  declarations: [ NzCollapsePanelComponent, NzCollapseComponent, NzStringTemplateOutletDirective ],
+  declarations: [ NzCollapsePanelComponent, NzCollapseComponent ],
   exports     : [ NzCollapsePanelComponent, NzCollapseComponent ],
-  imports     : [ CommonModule, NzIconModule ]
+  imports     : [ CommonModule, NzIconModule, NzAddOnModule ]
 })
 
 export class NzCollapseModule {

components/core/addon/addon.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { NzStringTemplateOutletDirective } from './string_template_outlet';
+
+@NgModule({
+  imports     : [ CommonModule ],
+  exports     : [ NzStringTemplateOutletDirective ],
+  declarations: [ NzStringTemplateOutletDirective ]
+})
+export class NzAddOnModule {
+}

components/date-picker/style/Picker.less

@@ -42,6 +42,11 @@
     outline: none;
   }
 
+  &-input.@{ant-prefix}-input-sm {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
   &:hover &-input:not(.@{ant-prefix}-input-disabled) {
     border-color: @primary-color;
   }

components/date-picker/style/RangePicker.less

@@ -134,7 +134,7 @@
       z-index: 1;
     }
     &:before {
-      content: '';
+      content: "";
       display: block;
       background: @item-active-bg;
       border-radius: 0;

components/date-picker/style/TimePicker.less

@@ -90,7 +90,7 @@
     }
 
     li:last-child:after {
-      content: '';
+      content: "";
       height: 202px;
       display: block;
     }

components/divider/demo/horizontal.ts

@@ -13,10 +13,6 @@ import { Component } from '@angular/core';
         <ng-template #text><i nz-icon type="plus"></i> Add</ng-template>
       </nz-divider>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
-      <nz-divider nzText="With Text" nzOrientation="left"></nz-divider>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
-      <nz-divider nzText="With Text" nzOrientation="right"></nz-divider>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
     </div>
   `
 })

components/divider/demo/orientation.md

@@ -0,0 +1,14 @@
+---
+order: 2
+title:
+  zh-CN: 标题位置
+  en-US: Orientation of title
+---
+
+## zh-CN
+
+修改分割线标题的位置。
+
+## en-US
+
+Set orientation of divider to left or right.

components/divider/demo/orientation.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-divider-orientation',
+  template: `
+    <div>
+      <nz-divider nzText="Left Text" nzOrientation="left"></nz-divider>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
+      <nz-divider nzText="Right Text" nzOrientation="right"></nz-divider>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
+    </div>
+  `
+})
+
+export class NzDemoDividerOrientationComponent {
+
+}

components/divider/divider.spec.ts

@@ -1,5 +1,5 @@
 import { Component, DebugElement, ViewChild } from '@angular/core';
-import { fakeAsync, tick, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 import { NzIconModule } from '../icon/nz-icon.module';

components/divider/nz-divider.component.html

@@ -1,3 +1,3 @@
-<span *ngIf="isText" class="ant-divider-inner-text">
-  <ng-container *ngIf="textStr; else textTpl">{{ textStr }}</ng-container>
+<span *ngIf="nzText" class="ant-divider-inner-text">
+  <ng-container *nzStringTemplateOutlet="nzText">{{ nzText }}</ng-container>
 </span>

components/divider/nz-divider.component.ts

@@ -1,72 +1,44 @@
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   ElementRef,
   Input,
   OnChanges,
   OnInit,
   SimpleChanges,
-  TemplateRef
+  TemplateRef,
+  ViewEncapsulation
 } from '@angular/core';
 
 import { NzUpdateHostClassService } from '../core/services/update-host-class.service';
-import { toBoolean } from '../core/util/convert';
+import { InputBoolean } from '../core/util';
 
 @Component({
   selector           : 'nz-divider',
   templateUrl        : './nz-divider.component.html',
-  providers          : [ NzUpdateHostClassService ],
   preserveWhitespaces: false,
+  providers          : [ NzUpdateHostClassService ],
+  encapsulation      : ViewEncapsulation.None,
   changeDetection    : ChangeDetectionStrategy.OnPush
 })
 export class NzDividerComponent implements OnChanges, OnInit {
-  // region fields
-
-  isText = false;
-  textStr = '';
-  textTpl: TemplateRef<void>;
-
-  @Input()
-  set nzText(value: string | TemplateRef<void>) {
-    if (value instanceof TemplateRef) {
-      this.textStr = null;
-      this.textTpl = value;
-    } else {
-      this.textStr = value;
-    }
-    this.isText = !!value;
-  }
-
+  @Input() nzText: string | TemplateRef<void>;
   @Input() nzType: 'horizontal' | 'vertical' = 'horizontal';
-
   @Input() nzOrientation: 'left' | 'right' | '' = '';
+  @Input() @InputBoolean() nzDashed = false;
 
-  private _dashed = false;
-
-  @Input()
-  set nzDashed(value: boolean) {
-    this._dashed = toBoolean(value);
-  }
-
-  get nzDashed(): boolean {
-    return this._dashed;
-  }
-
-  // endregion
   private setClass(): void {
     const orientationPrefix = (this.nzOrientation.length > 0) ? '-' + this.nzOrientation : this.nzOrientation;
     const classMap = {
       [ 'ant-divider' ]                              : true,
       [ `ant-divider-${this.nzType}` ]               : true,
-      [ `ant-divider-with-text${orientationPrefix}` ]: this.isText,
+      [ `ant-divider-with-text${orientationPrefix}` ]: this.nzText,
       [ `ant-divider-dashed` ]                       : this.nzDashed
     };
-    this.updateHostClassService.updateHostClass(this.el.nativeElement, classMap);
-    this.cd.detectChanges();
+    this.nzUpdateHostClassService.updateHostClass(this.elementRef.nativeElement, classMap);
   }
 
-  constructor(private el: ElementRef, private cd: ChangeDetectorRef, private updateHostClassService: NzUpdateHostClassService) {
+  constructor(private elementRef: ElementRef, private nzUpdateHostClassService: NzUpdateHostClassService) {
   }
 
   ngOnChanges(changes: SimpleChanges): void {

components/divider/nz-divider.module.ts

@@ -1,10 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-
+import { NzAddOnModule } from '../core/addon/addon.module';
 import { NzDividerComponent } from './nz-divider.component';
 
 @NgModule({
-  imports     : [ CommonModule ],
+  imports     : [ CommonModule, NzAddOnModule ],
   declarations: [ NzDividerComponent ],
   exports     : [ NzDividerComponent ]
 })

components/divider/style/index.less

@@ -39,7 +39,7 @@
     margin: 16px 0;
     &:before,
     &:after {
-      content: '';
+      content: "";
       display: table-cell;
       position: relative;
       top: 50%;

components/dropdown/style/index.less

@@ -187,7 +187,7 @@
 
 .@{dropdown-prefix-cls}-trigger,
 .@{dropdown-prefix-cls}-link {
-  .@{iconfont-css-prefix}:not(.@{iconfont-css-prefix}-ellipsis) {
+  > .@{iconfont-css-prefix}:not(.@{iconfont-css-prefix}-ellipsis) {
     .iconfont-size-under-12px(10px);
   }
 }

components/form/style/mixin.less

@@ -91,7 +91,7 @@
   input[type="radio"]:focus,
   input[type="checkbox"]:focus {
     outline: thin dotted;
-    outline: 5px auto -webkit-focus-ring-color; // lesshint duplicateProperty: false
+    outline: 5px auto -webkit-focus-ring-color;
     outline-offset: -2px;
   }
 

components/grid/style/mixin.less

@@ -49,7 +49,6 @@
   .col(1); // kickstart it
 }
 
-// lesshint false
 .loop-grid-columns(@index, @class) when (@index > 0) {
   .@{ant-prefix}-col@{class}-@{index} {
     display: block;

components/input/style/mixin.less

@@ -160,7 +160,7 @@
 
     // Reset Select's style in addon
     .@{ant-prefix}-select {
-      margin: -(@input-padding-vertical-base + 1px) (-@input-padding-horizontal-base);  // lesshint spaceAroundOperator: false
+      margin: -(@input-padding-vertical-base + 1px) (-@input-padding-horizontal-base);
 
       .@{ant-prefix}-select-selection {
         background-color: inherit;
@@ -181,7 +181,7 @@
     // https://github.com/ant-design/ant-design/issues/3714
     > i:only-child:after {
       position: absolute;
-      content: '';
+      content: "";
       top: 0;
       left: 0;
       right: 0;

components/menu/style/index.less

@@ -67,7 +67,7 @@
       left: 0;
       bottom: 0;
       right: 0;
-      content: '';
+      content: "";
     }
   }
 
@@ -180,6 +180,7 @@
       position: absolute;
       border-radius: @border-radius-base;
       z-index: @zindex-dropdown;
+      background: @menu-popup-bg;
 
       .submenu-title-wrapper {
         padding-right: 20px;
@@ -216,7 +217,7 @@
         width: 10px;
         &:before,
         &:after {
-          content: '';
+          content: "";
           position: absolute;
           vertical-align: baseline;
           background: #fff;

components/modal/style/modal.less

@@ -114,7 +114,7 @@
     right: 0;
     left: 0;
     bottom: 0;
-    background-color: @modal-mask-bg; // lesshint duplicateProperty: false
+    background-color: @modal-mask-bg;
     height: 100%;
     z-index: @zindex-modal-mask;
     filter: ~"alpha(opacity=50)";
@@ -132,7 +132,7 @@
 .@{dialog-prefix-cls}-centered {
   text-align: center;
   &:before {
-    content: '';
+    content: "";
     display: inline-block;
     height: 100%;
     vertical-align: middle;

components/notification/style/index.less

@@ -58,7 +58,7 @@
         display: block;
         max-width: 4px;
         &:before {
-          content: '';
+          content: "";
           display: block;
         }
       }

components/radio/style/index.less

@@ -46,7 +46,7 @@
     height: 100%;
     border-radius: 50%;
     border: 1px solid @radio-dot-color;
-    content: '';
+    content: "";
     animation: antRadioEffect 0.36s ease-in-out;
     animation-fill-mode: both;
     visibility: hidden;

components/spin/style/index.less

@@ -90,7 +90,7 @@
     filter: ~"progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false)";
 
     &:after {
-      content: '';
+      content: "";
       position: absolute;
       left: 0;
       right: 0;