feat(module:autocomplete,dropdown): add class & style properties in o…

…verlay panel

components/auto-complete/doc/index.en-US.md

@@ -40,6 +40,8 @@ When there is a need for autocomplete functionality.
 | `[nzDataSource]` | Data source for autocomplete | `AutocompleteDataSource` | - |
 | `[nzDefaultActiveFirstOption]` | Whether active first option by default | `boolean` | `true` |
 | `[nzWidth]` | Custom width, unit px | `number` | trigger element width |
+| `[nzOverlayClassName]` | Class name of the dropdown root element | string | - |
+| `[nzOverlayStyle]` | Style of the dropdown root element | object | - |
 
 ### nz-auto-option
 

components/auto-complete/doc/index.zh-CN.md

@@ -41,6 +41,8 @@ subtitle: 自动完成
 | `[nzDataSource]` | 自动完成的数据源 | `AutocompleteDataSource` | - |
 | `[nzDefaultActiveFirstOption]` | 是否默认高亮第一个选项。 | `boolean` | `true` |
 | `[nzWidth]` | 自定义宽度单位 px | `number` | 触发元素宽度 |
+| `[nzOverlayClassName]` | 下拉根元素的类名称 | string | - |
+| `[nzOverlayStyle]` | 下拉根元素的样式 | object | - |
 
 ### nz-auto-option
 

components/auto-complete/nz-autocomplete.component.html

@@ -2,7 +2,7 @@
   <div class="ant-select-dropdown ant-select-dropdown--single ant-select-dropdown-placement-bottomLeft"
     #panel
     [@dropDownAnimation]="dropDownPosition"
-    [class.ant-select-dropdown-hidden]="!showPanel">
+    [class.ant-select-dropdown-hidden]="!showPanel" [ngClass]="nzOverlayClassName" [ngStyle]="nzOverlayStyle">
     <div style="overflow: auto;">
       <ul class="ant-select-dropdown-menu  ant-select-dropdown-menu-root ant-select-dropdown-menu-vertical"
         role="menu"

components/auto-complete/nz-autocomplete.component.ts

@@ -52,6 +52,8 @@ export type AutocompleteDataSource = AutocompleteDataSourceItem[] | string[] | n
 export class NzAutocompleteComponent implements AfterViewInit, OnDestroy {
 
   @Input() nzWidth: number;
+  @Input() nzOverlayClassName = '';
+  @Input() nzOverlayStyle: { [ key: string ]: string } = {};
   @Input() @InputBoolean() nzDefaultActiveFirstOption = true;
   @Input() @InputBoolean() nzBackfill = false;
   @Input() nzDataSource: AutocompleteDataSource;

components/auto-complete/nz-autocomplete.spec.ts

@@ -364,6 +364,19 @@ describe('auto-complete', () => {
 
     }));
 
+    it('should overlayClassName & overlayStyle work', () => {
+      fixture.componentInstance.overlayClassName = 'testClass';
+      fixture.componentInstance.overlayStyle = { color: 'rgb(1, 2, 3)' };
+      fixture.detectChanges();
+
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+
+      const dropdown = overlayContainerElement.querySelector('.ant-select-dropdown') as HTMLElement;
+      expect(dropdown.classList.contains(`testClass`)).toBe(true);
+      expect(dropdown.style.color).toBe(`rgb(1, 2, 3)`);
+    });
+
   });
 
   describe('value', () => {
@@ -929,14 +942,16 @@ class NzTestSimpleAutocompleteComponent {
   <div>
       <input [(ngModel)]="inputValue"
              [nzAutocomplete]="auto">
-      <nz-autocomplete [nzWidth]="width" [nzDataSource]="options" [nzDefaultActiveFirstOption]="false" nzBackfill #auto>
+      <nz-autocomplete [nzWidth]="width" [nzOverlayClassName]="overlayClassName" [nzOverlayStyle]="overlayStyle" [nzDataSource]="options" [nzDefaultActiveFirstOption]="false" nzBackfill #auto>
       </nz-autocomplete>
   </div>
   `
 })
 class NzTestAutocompletePropertyComponent {
   inputValue: string;
   width: number;
+  overlayClassName = '';
+  overlayStyle = {};
   options = ['Burns Bay Road', 'Downing Street', 'Wall Street'];
   @ViewChild(NzAutocompleteComponent) panel: NzAutocompleteComponent;
   @ViewChild(NzAutocompleteTriggerDirective) trigger: NzAutocompleteTriggerDirective;

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

@@ -23,6 +23,8 @@ If there are too many operations to display, you can wrap them in a `Dropdown`.
 | `[nzTrigger]` | the trigger mode which executes the drop-down action | `click`丨`hover` | `hover` |
 | `[nzClickHide]` | whether hide menu when click | boolean | true |
 | `[nzVisible]` | whether the dropdown menu is visible, double binding | boolean | - |
+| `[nzOverlayClassName]` | Class name of the dropdown root element | string | - |
+| `[nzOverlayStyle]` | Style of the dropdown root element | object | - |
 | `(nzVisibleChange)` | a callback function takes an argument: `nzVisible`, is executed when the visible state is changed | `EventEmitter<boolean>` | - |
 
 You should use [nz-menu](/components/menu/en) in `nz-dropdown`. The menu items and dividers are also available by using `nz-menu-item` and `nz-menu-divider`.

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

@@ -25,6 +25,8 @@ title: Dropdown
 | `[nzTrigger]` | 触发下拉的行为 | `click`丨`hover` | `hover` |
 | `[nzClickHide]` | 点击后是否隐藏菜单 | boolean | true |
 | `[nzVisible]` | 菜单是否显示，可双向绑定 | boolean | - |
+| `[nzOverlayClassName]` | 下拉根元素的类名称 | string | - |
+| `[nzOverlayStyle]` | 下拉根元素的样式 | object | - |
 | `(nzVisibleChange)` | 菜单显示状态改变时调用，参数为 nzVisible | `EventEmitter<boolean>` | - |
 
 菜单使用 [nz-menu](/components/menu/zh)，还包括菜单项 `[nz-menu-item]`，分割线 `[nz-menu-divider]`。

components/dropdown/nz-dropdown.component.html

@@ -11,6 +11,7 @@
   [cdkConnectedOverlayOpen]="nzVisible">
   <div
     class="{{'ant-dropdown ant-dropdown-placement-'+nzPlacement}}"
+    [ngClass]="nzOverlayClassName" [ngStyle]="nzOverlayStyle"
     [@dropDownAnimation]="dropDownPosition"
     (mouseenter)="onMouseEnterEvent()"
     (mouseleave)="onMouseLeaveEvent()"

components/dropdown/nz-dropdown.component.ts

@@ -62,6 +62,8 @@ export class NzDropDownComponent implements OnInit, OnDestroy, AfterViewInit {
   @ContentChild(NzDropDownDirective) nzOrigin: NzDropDownDirective;
   @ContentChild(NzMenuDirective) nzMenu: NzMenuDirective;
   @Input() nzTrigger: 'click' | 'hover' = 'hover';
+  @Input() nzOverlayClassName = '';
+  @Input() nzOverlayStyle: { [ key: string ]: string } = {};
   @Output() readonly nzVisibleChange: EventEmitter<boolean> = new EventEmitter();
   @ViewChild(CdkConnectedOverlay) cdkOverlay: CdkConnectedOverlay;
 

components/dropdown/nz-dropdown.spec.ts

@@ -225,6 +225,15 @@ describe('dropdown', () => {
       expect(nestedCallback).toHaveBeenCalledWith(false);
       expect(nestedCallback).toHaveBeenCalledTimes(1);
     });
+    it('should overlayClassName & overlayStyle work', () => {
+      testComponent.visible = true;
+      testComponent.overlayClassName = 'testClass';
+      testComponent.overlayStyle = { color: 'rgb(1, 2, 3)' };
+      fixture.detectChanges();
+      const dropdown = overlayContainerElement.querySelector('.ant-dropdown') as HTMLElement;
+      expect(dropdown.classList.contains(`testClass`)).toBe(true);
+      expect(dropdown.style.color).toBe(`rgb(1, 2, 3)`);
+    });
   });
   describe('nz-dropdown-component-button', () => {
     let fixture;
@@ -393,7 +402,8 @@ describe('dropdown', () => {
 @Component({
   selector: 'nz-test-dropdown',
   template: `
-    <nz-dropdown [(nzVisible)]="visible" [nzClickHide]="clickHide" [nzPlacement]="placement" (nzVisibleChange)="visibleChange($event)" [nzTrigger]="trigger" [nzDisabled]="disabled">
+    <nz-dropdown [(nzVisible)]="visible" [nzClickHide]="clickHide" [nzPlacement]="placement" (nzVisibleChange)="visibleChange($event)" [nzTrigger]="trigger" [nzDisabled]="disabled"
+      [nzOverlayClassName]="overlayClassName" [nzOverlayStyle]="overlayStyle">
       <a nz-dropdown>
         Hover me <i nz-icon type="down"></i>
       </a>
@@ -427,6 +437,8 @@ export class NzTestDropdownComponent {
   disabled = false;
   clickHide = true;
   visibleChange = jasmine.createSpy('visibleChange callback');
+  overlayClassName = '';
+  overlayStyle = {};
 }
 
 @Component({