fix(module:core): fix the style of CDK conflicts (#2917)

* fix(module:core): fix the style of cdk conflicts

close #2874

* fix(module:core): fix the style of cdk conflicts

* style: add type

* chore: rename `NzConnectedOverlayDirective` selector

* chore: update `.cdk-overlay-backdrop` styles

components/cascader/nz-cascader.component.html

@@ -47,6 +47,7 @@
 </div>
 <ng-template
   cdkConnectedOverlay
+  nzConnectedOverlay
   cdkConnectedOverlayHasBackdrop
   [cdkConnectedOverlayOrigin]="origin"
   [cdkConnectedOverlayPositions]="positions"

components/cascader/nz-cascader.module.ts

@@ -3,14 +3,15 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
+import { NzOverlayModule } from '../core/overlay/nz-overlay.module';
 import { NzEmptyModule } from '../empty/nz-empty.module';
 import { NzIconModule } from '../icon/nz-icon.module';
 import { NzInputModule } from '../input/nz-input.module';
 import { NzCascaderOptionComponent } from './nz-cascader-li.component';
 import { NzCascaderComponent } from './nz-cascader.component';
 
 @NgModule({
-  imports     : [ CommonModule, FormsModule, OverlayModule, NzInputModule, NzIconModule, NzEmptyModule ],
+  imports     : [ CommonModule, FormsModule, OverlayModule, NzInputModule, NzIconModule, NzEmptyModule, NzOverlayModule ],
   declarations: [
     NzCascaderComponent,
     NzCascaderOptionComponent

components/core/overlay/nz-connected-overlay.ts

@@ -0,0 +1,13 @@
+import { CdkConnectedOverlay } from '@angular/cdk/overlay';
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[cdkConnectedOverlay][nzConnectedOverlay]'
+})
+export class NzConnectedOverlayDirective {
+
+  constructor(private cdkConnectedOverlay: CdkConnectedOverlay) {
+    this.cdkConnectedOverlay.backdropClass = 'nz-overlay-transparent-backdrop';
+  }
+
+}

components/core/overlay/nz-overlay.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { NzConnectedOverlayDirective } from './nz-connected-overlay';
+
+@NgModule({
+  declarations   : [ NzConnectedOverlayDirective ],
+  exports        : [ NzConnectedOverlayDirective ]
+})
+export class NzOverlayModule {
+
+}

components/core/style/index.less

@@ -60,6 +60,12 @@
   }
 }
 
+.nz-overlay-transparent-backdrop {
+  &, &.cdk-overlay-backdrop-showing {
+    opacity: 0;
+  }
+}
+
 .box-shadow-left() {
   .ant-table-th-right-sticky, .ant-table-td-right-sticky {
     box-shadow: -6px 0 6px 0px rgba(0, 0, 0, .05);

components/date-picker/date-picker.module.ts

@@ -2,6 +2,7 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
+import { NzOverlayModule } from '../core/overlay/nz-overlay.module';
 import { NzIconModule } from '../icon/nz-icon.module';
 
 import { LibPackerModule } from './lib/lib-packer.module';
@@ -19,10 +20,9 @@ import { NzYearPickerComponent } from './year-picker.component';
   imports: [
     CommonModule,
     OverlayModule,
-
     LibPackerModule,
-
-    NzIconModule
+    NzIconModule,
+    NzOverlayModule
   ],
   exports: [
     NzDatePickerComponent,

components/date-picker/picker.component.html

@@ -69,6 +69,7 @@
 <!-- Overlay -->
 <ng-template
   cdkConnectedOverlay
+  nzConnectedOverlay
   [cdkConnectedOverlayOrigin]="origin"
   [cdkConnectedOverlayOpen]="realOpenState"
   [cdkConnectedOverlayHasBackdrop]="!isOpenHandledByUser()"

components/popconfirm/nz-popconfirm.component.html

@@ -2,6 +2,7 @@
 <ng-template
   #overlay="cdkConnectedOverlay"
   cdkConnectedOverlay
+  nzConnectedOverlay
   [cdkConnectedOverlayOrigin]="overlayOrigin"
   [cdkConnectedOverlayHasBackdrop]="_hasBackdrop"
   (backdropClick)="hide()"

components/popconfirm/nz-popconfirm.module.ts

@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core';
 
 import { NzButtonModule } from '../button/nz-button.module';
 import { NzAddOnModule } from '../core/addon/addon.module';
+import { NzOverlayModule } from '../core/overlay/nz-overlay.module';
 import { NzI18nModule } from '../i18n/nz-i18n.module';
 import { NzIconModule } from '../icon/nz-icon.module';
 
@@ -13,7 +14,7 @@ import { NzPopconfirmDirective } from './nz-popconfirm.directive';
 @NgModule({
   declarations   : [ NzPopconfirmComponent, NzPopconfirmDirective ],
   exports        : [ NzPopconfirmComponent, NzPopconfirmDirective ],
-  imports        : [ CommonModule, NzButtonModule, OverlayModule, NzI18nModule, NzIconModule, NzAddOnModule ],
+  imports        : [ CommonModule, NzButtonModule, OverlayModule, NzI18nModule, NzIconModule, NzAddOnModule, NzOverlayModule ],
   entryComponents: [ NzPopconfirmComponent ]
 })
 

components/popover/nz-popover.component.html

@@ -2,6 +2,7 @@
 <ng-template
   #overlay="cdkConnectedOverlay"
   cdkConnectedOverlay
+  nzConnectedOverlay
   [cdkConnectedOverlayOrigin]="overlayOrigin"
   [cdkConnectedOverlayHasBackdrop]="_hasBackdrop"
   (backdropClick)="hide()"

components/popover/nz-popover.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { NzAddOnModule } from '../core/addon/addon.module';
+import { NzOverlayModule } from '../core/overlay/nz-overlay.module';
 
 import { NzPopoverComponent } from './nz-popover.component';
 import { NzPopoverDirective } from './nz-popover.directive';
@@ -11,7 +12,7 @@ import { NzPopoverDirective } from './nz-popover.directive';
   entryComponents: [ NzPopoverComponent ],
   exports        : [ NzPopoverDirective, NzPopoverComponent ],
   declarations   : [ NzPopoverDirective, NzPopoverComponent ],
-  imports        : [ CommonModule, OverlayModule, NzAddOnModule ]
+  imports        : [ CommonModule, OverlayModule, NzAddOnModule, NzOverlayModule ]
 })
 
 export class NzPopoverModule {

components/select/nz-select.component.html

@@ -18,7 +18,9 @@
   [class.ant-select-selection--multiple]="nzSelectService.isMultipleOrTags"
   (keydown)="onKeyDown($event)">
 </div>
-<ng-template cdkConnectedOverlay
+<ng-template
+  cdkConnectedOverlay
+  nzConnectedOverlay
   [cdkConnectedOverlayHasBackdrop]="true"
   [cdkConnectedOverlayMinWidth]="nzDropdownMatchSelectWidth? null : triggerWidth"
   [cdkConnectedOverlayWidth]="nzDropdownMatchSelectWidth? triggerWidth : null"

components/select/nz-select.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { NzAddOnModule } from '../core/addon/addon.module';
+import { NzOverlayModule } from '../core/overlay/nz-overlay.module';
 import { NzEmptyModule } from '../empty/nz-empty.module';
 import { NzI18nModule } from '../i18n/nz-i18n.module';
 import { NzIconModule } from '../icon/nz-icon.module';
@@ -23,7 +24,8 @@ import { NzSelectComponent } from './nz-select.component';
     OverlayModule,
     NzIconModule,
     NzAddOnModule,
-    NzEmptyModule
+    NzEmptyModule,
+    NzOverlayModule
   ],
   declarations: [
     NzFilterGroupOptionPipe,

components/time-picker/nz-time-picker.component.html

@@ -24,6 +24,7 @@
 
 <ng-template
   cdkConnectedOverlay
+  nzConnectedOverlay
   cdkConnectedOverlayHasBackdrop
   [cdkConnectedOverlayPositions]="overlayPositions"
   [cdkConnectedOverlayOrigin]="origin"

components/time-picker/nz-time-picker.module.ts

@@ -2,6 +2,7 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { NzOverlayModule } from '../core/overlay/nz-overlay.module';
 import { NzI18nModule } from '../i18n/nz-i18n.module';
 import { NzIconModule } from '../icon/nz-icon.module';
 import { NzTimePickerPanelComponent } from './nz-time-picker-panel.component';
@@ -18,7 +19,7 @@ import { NzTimeValueAccessorDirective } from './nz-time-value-accessor.directive
     NzTimePickerPanelComponent,
     NzTimePickerComponent
   ],
-  imports        : [ CommonModule, FormsModule, NzI18nModule, OverlayModule, NzIconModule ],
+  imports        : [ CommonModule, FormsModule, NzI18nModule, OverlayModule, NzIconModule, NzOverlayModule ],
   entryComponents: []
 })
 export class NzTimePickerModule {

components/tooltip/nz-tooltip.component.html

@@ -2,6 +2,7 @@
 <ng-template
   #overlay="cdkConnectedOverlay"
   cdkConnectedOverlay
+  nzConnectedOverlay
   [cdkConnectedOverlayOrigin]="overlayOrigin"
   [cdkConnectedOverlayOpen]="visible$ | async"
   [cdkConnectedOverlayHasBackdrop]="_hasBackdrop"

components/tooltip/nz-tooltip.module.ts

@@ -3,14 +3,15 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { NzAddOnModule } from '../core/addon/addon.module';
+import { NzOverlayModule } from '../core/overlay/nz-overlay.module';
 // NOTE: the `t` is not uppercase in directive. Change this would however introduce break change.
 import { NzToolTipComponent } from './nz-tooltip.component';
 import { NzTooltipDirective } from './nz-tooltip.directive';
 
 @NgModule({
   declarations   : [ NzToolTipComponent, NzTooltipDirective ],
   exports        : [ NzToolTipComponent, NzTooltipDirective ],
-  imports        : [ CommonModule, OverlayModule, NzAddOnModule ],
+  imports        : [ CommonModule, OverlayModule, NzAddOnModule, NzOverlayModule ],
   entryComponents: [ NzToolTipComponent ]
 })
 export class NzToolTipModule {

components/tree-select/nz-tree-select.module.ts

@@ -2,13 +2,14 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { NzOverlayModule } from '../core/overlay/nz-overlay.module';
 import { NzEmptyModule } from '../empty/nz-empty.module';
 import { NzIconModule } from '../icon/nz-icon.module';
 import { NzTreeModule } from '../tree/nz-tree.module';
 import { NzTreeSelectComponent } from './nz-tree-select.component';
 
 @NgModule({
-  imports     : [ CommonModule, OverlayModule, FormsModule, NzTreeModule, NzIconModule, NzEmptyModule ],
+  imports     : [ CommonModule, OverlayModule, FormsModule, NzTreeModule, NzIconModule, NzEmptyModule, NzOverlayModule ],
   declarations: [ NzTreeSelectComponent ],
   exports     : [ NzTreeSelectComponent ]
 })