fix(module:cdk): zIndex is not used properly when creating overlay (#8373)

* fix(module:cdk): zIndex is not used properly when creating overlay

* fix(module:cdk): zIndex is not used properly when creating overlay

Author: ParsaArvanehPA

components/core/overlay/overlay-z-index.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 { OverlayRef } from '@angular/cdk/overlay';
+
+export function overlayZIndexSetter(overlayRef: OverlayRef, zIndex?: number): void {
+  if (!zIndex) return;
+
+  (overlayRef['_host'] as HTMLElement).style.zIndex = `${zIndex}`;
+}

components/core/overlay/public-api.ts

@@ -6,3 +6,4 @@
 export * from './nz-connected-overlay';
 export * from './nz-overlay.module';
 export * from './overlay-position';
+export * from './overlay-z-index';

components/drawer/drawer.component.ts

@@ -38,6 +38,7 @@ import { takeUntil } from 'rxjs/operators';
 import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
 import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
 import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
+import { overlayZIndexSetter } from 'ng-zorro-antd/core/overlay';
 import { BooleanInput, NgStyleInterface, NzSafeAny } from 'ng-zorro-antd/core/types';
 import { InputBoolean, isTemplateRef, toCssPixel } from 'ng-zorro-antd/core/util';
 import { NzIconModule } from 'ng-zorro-antd/icon';
@@ -456,6 +457,8 @@ export class NzDrawerComponent<T extends {} = NzSafeAny, R = NzSafeAny, D extend
     if (!this.overlayRef) {
       this.portal = new TemplatePortal(this.drawerTemplate, this.viewContainerRef);
       this.overlayRef = this.overlay.create(this.getOverlayConfig());
+
+      overlayZIndexSetter(this.overlayRef, this.nzZIndex);
     }
 
     if (this.overlayRef && !this.overlayRef.hasAttached()) {

components/modal/modal.service.ts

@@ -12,6 +12,7 @@ import { startWith } from 'rxjs/operators';
 
 import { NzConfigService } from 'ng-zorro-antd/core/config';
 import { warn } from 'ng-zorro-antd/core/logger';
+import { overlayZIndexSetter } from 'ng-zorro-antd/core/overlay';
 import { IndexableObject, NzSafeAny } from 'ng-zorro-antd/core/types';
 import { isNotNil } from 'ng-zorro-antd/core/util';
 
@@ -98,6 +99,8 @@ export class NzModalService implements OnDestroy {
     const modalRef = this.attachModalContent<T, D, R>(componentOrTemplateRef, modalContainer, overlayRef, configMerged);
     modalContainer.modalRef = modalRef;
 
+    overlayZIndexSetter(overlayRef, config?.nzZIndex);
+
     this.openModals.push(modalRef);
     modalRef.afterClose.subscribe(() => this.removeOpenModal(modalRef));
 

components/modal/modal.spec.ts

@@ -138,6 +138,18 @@ describe('NzModal', () => {
     modalRef.close();
   });
 
+  it('should give correct z-index value to overlay', fakeAsync(() => {
+    const Z_INDEX = 9999;
+    modalService.create({
+      nzContent: TestWithModalContentComponent,
+      nzData: 'Modal',
+      nzZIndex: Z_INDEX
+    });
+
+    const overlay = document.querySelector('.cdk-global-overlay-wrapper');
+    expect((overlay as HTMLElement).style.zIndex).toEqual(`${Z_INDEX}`);
+  }));
+
   it('should open a modal with data', () => {
     const modalRef = modalService.create({
       nzContent: TestWithModalContentComponent,