feat(module: all): global config for backdrop (#6380)

close #6029
close #6177

components/cascader/cascader.component.ts

@@ -114,6 +114,7 @@ const defaultDisplayRender = (labels: string[]) => labels.join(' / ');
     <ng-template
       cdkConnectedOverlay
       nzConnectedOverlay
+      [cdkConnectedOverlayHasBackdrop]="nzBackdrop"
       [cdkConnectedOverlayOrigin]="origin"
       [cdkConnectedOverlayPositions]="positions"
       [cdkConnectedOverlayTransformOriginOn]="'.ant-cascader-menus'"
@@ -219,6 +220,7 @@ export class NzCascaderComponent implements NzCascaderComponentAsSource, OnInit,
   @Input() nzLabelProperty = 'label';
   @Input() nzNotFoundContent?: string | TemplateRef<void>;
   @Input() @WithConfig() nzSize: NzCascaderSize = 'default';
+  @Input() @WithConfig() nzBackdrop = false;
   @Input() nzShowSearch: boolean | NzShowSearchOptions = false;
   @Input() nzPlaceHolder: string = '';
   @Input() nzMenuClassName?: string;

components/cascader/cascader.spec.ts

@@ -838,6 +838,14 @@ describe('cascader', () => {
       expect(testComponent.cascader.menuVisible).toBe(false);
     }));
 
+    it('should nzBackdrop works', fakeAsync(() => {
+      testComponent.nzBackdrop = true;
+      fixture.detectChanges();
+      testComponent.cascader.setMenuVisible(true);
+      fixture.detectChanges();
+      expect(overlayContainerElement.children[0].classList).toContain('cdk-overlay-backdrop');
+    }));
+
     it('should navigate up when press UP_ARROW', fakeAsync(() => {
       fixture.detectChanges();
       testComponent.cascader.setMenuVisible(true);
@@ -2000,6 +2008,7 @@ const options5: any[] = []; // tslint:disable-line:no-any
       [nzTriggerAction]="nzTriggerAction"
       [nzSuffixIcon]="nzSuffixIcon"
       [nzValueProperty]="nzValueProperty"
+      [nzBackdrop]="nzBackdrop"
       (ngModelChange)="onValueChanges($event)"
       (nzVisibleChange)="onVisibleChange($event)"
       (nzSelect)="onSelect($event)"
@@ -2046,6 +2055,7 @@ export class NzDemoCascaderDefaultComponent {
   nzMouseLeaveDelay = 150; // ms
   nzSuffixIcon = 'down';
   nzExpandIcon = 'right';
+  nzBackdrop = false;
 
   onVisibleChange = jasmine.createSpy('open change');
   onValueChanges = jasmine.createSpy('value change');

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

@@ -30,6 +30,7 @@ import { NzCascaderModule } from 'ng-zorro-antd/cascader';
 | `[ngModel]` | selected value | `any[]` | - |
 | `[nzAllowClear]` | whether allow clear | `boolean` | `true` |
 | `[nzAutoFocus]` | whether auto focus the input box | `boolean` | `false` |
+| `[nzBackdrop]` | whether or not the overlay should attach a backdrop | `boolean` | `false` |
 | `[nzChangeOn]` | change value on each selection if this function return `true` | `(option: any, index: number) => boolean` | - |
 | `[nzChangeOnSelect]` | change value on each selection if set to true, see above demo for details | `boolean` | `false` |
 | `[nzColumnClassName]` | additional className of column in the popup overlay | `string` | - |

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

@@ -31,6 +31,7 @@ import { NzCascaderModule } from 'ng-zorro-antd/cascader';
 | `[ngModel]` | 指定选中项 | `any[]` | - |
 | `[nzAllowClear]` | 是否支持清除 | `boolean` | `true` |
 | `[nzAutoFocus]` | 是否自动聚焦，当存在输入框时 | `boolean` | `false` |
+| `[nzBackdrop]` | 浮层是否应带有背景板 | `boolean` | `false` |
 | `[nzChangeOn]` | 点击父级菜单选项时，可通过该函数判断是否允许值的变化 | `(option: any, index: number) => boolean` | - |
 | `[nzChangeOnSelect]` | 当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 | `boolean` | `false` |
 | `[nzColumnClassName]` | 自定义浮层列类名 | `string` | - |

components/core/config/config.ts

@@ -49,11 +49,14 @@ export interface NzConfig {
   treeSelect?: TreeSelectConfig;
   typography?: TypographyConfig;
   image?: ImageConfig;
+  popconfirm?: PopConfirmConfig;
+  popover?: PopoverConfig;
 }
 
 export interface SelectConfig {
   nzBorderless?: boolean;
   nzSuffixIcon?: TemplateRef<NzSafeAny> | string | null;
+  nzBackdrop?: boolean;
 }
 
 export interface AffixConfig {
@@ -123,6 +126,7 @@ export interface CarouselConfig {
 
 export interface CascaderConfig {
   nzSize?: string;
+  nzBackdrop?: boolean;
 }
 
 export interface CollapseConfig {
@@ -138,6 +142,7 @@ export interface CollapsePanelConfig {
 export interface DatePickerConfig {
   nzSeparator?: string;
   nzSuffixIcon?: string | TemplateRef<NzSafeAny>;
+  nzBackdrop?: boolean;
 }
 
 export interface DescriptionsConfig {
@@ -266,6 +271,7 @@ export interface TimePickerConfig {
   nzPopupClassName?: string;
   nzUse12Hours?: string;
   nzSuffixIcon?: string | TemplateRef<NzSafeAny>;
+  nzBackdrop?: boolean;
 }
 
 export interface TreeConfig {
@@ -280,6 +286,7 @@ export interface TreeSelectConfig {
   nzDropdownMatchSelectWidth?: boolean;
   nzHideUnMatched?: boolean;
   nzSize?: 'large' | 'small' | 'default';
+  nzBackdrop?: boolean;
 }
 
 export interface TypographyConfig {
@@ -298,6 +305,14 @@ export interface ImageConfig {
   nzDirection?: Direction;
 }
 
+export interface PopConfirmConfig {
+  nzPopconfirmBackdrop?: boolean;
+}
+
+export interface PopoverConfig {
+  nzPopoverBackdrop?: boolean;
+}
+
 export type NzConfigKey = keyof NzConfig;
 
 /**

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

@@ -460,6 +460,13 @@ describe('NzDatePickerComponent', () => {
       const result = (nzOnChange.calls.allArgs()[0] as Date[])[0];
       expect(result.getDate()).toBe(+cellText);
     }));
+
+    it('should support nzBackdrop', fakeAsync(() => {
+      fixtureInstance.nzBackdrop = true;
+      fixture.detectChanges();
+      openPickerByClickTrigger();
+      expect(overlayContainerElement.children[0].classList).toContain('cdk-overlay-backdrop');
+    }));
   });
 
   describe('panel switch and move forward/afterward', () => {
@@ -1118,6 +1125,7 @@ describe('date-fns testing', () => {
         [nzSuffixIcon]="nzSuffixIcon"
         [nzBorderless]="nzBorderless"
         [nzInline]="nzInline"
+        [nzBackdrop]="nzBackdrop"
       ></nz-date-picker>
       <ng-template #tplDateRender let-current>
         <div [class.test-first-day]="current.getDate() === 1">{{ current.getDate() }}</div>
@@ -1170,6 +1178,7 @@ class NzTestDatePickerComponent {
   nzSuffixIcon!: string;
   nzBorderless = false;
   nzInline = false;
+  nzBackdrop = false;
 
   // nzRanges;
   nzOnPanelChange(_: string): void {}

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

@@ -54,6 +54,8 @@ export type NzDatePickerSizeType = 'large' | 'default' | 'small';
   template: `
     <div
       nz-picker
+      style="display: inherit; align-items: center; width: 100%;"
+      [id]="nzId"
       [isRange]="isRange"
       [open]="nzOpen"
       [dir]="dir"
@@ -65,12 +67,12 @@ export type NzDatePickerSizeType = 'large' | 'default' | 'small';
       [allowClear]="nzAllowClear"
       [autoFocus]="nzAutoFocus"
       [placeholder]="nzPlaceHolder"
-      style="display: inherit; align-items: center; width: 100%;"
       [dropdownClassName]="nzDropdownClassName"
       [class.ant-picker-dropdown-rtl]="dir === 'rtl'"
       [popupStyle]="nzPopupStyle"
       [noAnimation]="!!noAnimation?.nzNoAnimation"
       [suffixIcon]="nzSuffixIcon"
+      [hasBackdrop]="nzBackdrop"
       (openChange)="onOpenChange($event)"
       (focusChange)="onFocusChange($event)"
       [nzId]="nzId"
@@ -166,6 +168,7 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Cont
   @Input() nzDefaultPickerValue: CompatibleDate | null = null;
   @Input() @WithConfig() nzSeparator?: string = undefined;
   @Input() @WithConfig() nzSuffixIcon: string | TemplateRef<NzSafeAny> = 'calendar';
+  @Input() @WithConfig() nzBackdrop = false;
   @Input() nzId: string | null = null;
 
   // TODO(@wenqi73) The PanelMode need named for each pickers and export

components/date-picker/doc/index.en-US.md

@@ -36,6 +36,7 @@ The following APIs are shared by nz-date-picker, nz-range-picker.
 | -------- | ----------- | ---- | ------- | - |
 | `[nzAllowClear]` | Whether to show clear button | `boolean` | `true` | - |
 | `[nzAutoFocus]` | get focus when component mounted | `boolean` | `false` | - |
+| `[nzBackdrop]` | whether or not the overlay should attach a backdrop | `boolean` | `false` |
 | `[nzDefaultPickerValue]` | default picker date | `Date` \| `Date[]` | - | - |
 | `[nzDisabled]` | determine whether the nz-date-picker is disabled | `boolean` | `false` | - |
 | `[nzDisabledDate]` | specify the date that cannot be selected | `(current: Date) => boolean` | - | - |

components/date-picker/doc/index.zh-CN.md

@@ -36,6 +36,7 @@ registerLocaleData(zh);
 | --- | --- | --- | --- | - |
 | `[nzAllowClear]` | 是否显示清除按钮 | `boolean` | `true` | - |
 | `[nzAutoFocus]` | 自动获取焦点 | `boolean` | `false` | - |
+| `[nzBackdrop]` | 浮层是否应带有背景板 | `boolean` | `false` |
 | `[nzDefaultPickerValue]` | 默认面板日期 | `Date` \| `Date[]` | - | - |
 | `[nzDisabled]` | 禁用 | `boolean` | `false` | - |
 | `[nzDisabledDate]` | 不可选择的日期 | `(current: Date) => boolean` | - | - |

components/date-picker/picker.component.ts

@@ -147,6 +147,7 @@ import { PREFIX_CLASS } from './util';
     <ng-template
       cdkConnectedOverlay
       nzConnectedOverlay
+      [cdkConnectedOverlayHasBackdrop]="hasBackdrop"
       [cdkConnectedOverlayOrigin]="origin"
       [cdkConnectedOverlayOpen]="realOpenState"
       [cdkConnectedOverlayPositions]="overlayPositions"
@@ -179,6 +180,7 @@ export class NzPickerComponent implements OnInit, AfterViewInit, OnChanges, OnDe
   @Input() suffixIcon?: string | TemplateRef<NzSafeAny>;
   @Input() dir: Direction = 'ltr';
   @Input() nzId: string | null = null;
+  @Input() hasBackdrop = false;
 
   @Output() readonly focusChange = new EventEmitter<boolean>();
   @Output() readonly valueChange = new EventEmitter<CandyDate | CandyDate[] | null>();

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

@@ -34,6 +34,7 @@ import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
 | `[nzPopconfirmMouseLeaveDelay]` | Delay in seconds, before popconfirm is hidden on mouse leave | `number` | `0.1` |
 | `[nzPopconfirmOverlayClassName]` | Class name of the popconfirm card | `string` | - |
 | `[nzPopconfirmOverlayStyle]` | Style of the popconfirm card | `object` | - |
+| `[nzPopconfirmBackdrop]` | whether or not the overlay should attach a backdrop | `boolean` | `false` |
 
 | Param | Description | Type | Default value |
 | ----- | ----------- | ---- | ------------- |

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

@@ -38,6 +38,7 @@ import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
 | `[nzPopconfirmMouseLeaveDelay]` | 鼠标移出后延时多少才隐藏确认框，单位：秒 | `number` | `0.1` |
 | `[nzPopconfirmOverlayClassName]` | 卡片类名 | `string` | - |
 | `[nzPopconfirmOverlayStyle]` | 卡片样式 | `object` | - |
+| `[nzPopconfirmBackdrop]` | 浮层是否应带有背景板 | `boolean` | `false` |
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |

components/popconfirm/popconfirm.spec.ts

@@ -124,6 +124,15 @@ describe('NzPopconfirm', () => {
     fixture.detectChanges();
     expect(overlayContainerElement.querySelector('.ant-popover-arrow')).toBeTruthy();
   }));
+
+  it('should nzPopconfirmBackdrop work', fakeAsync(() => {
+    component.nzPopconfirmBackdrop = true;
+    fixture.detectChanges();
+    const triggerElement = component.stringTemplate.nativeElement;
+    dispatchMouseEvent(triggerElement, 'click');
+    fixture.detectChanges();
+    expect(overlayContainerElement.children[0].classList).toContain('cdk-overlay-backdrop');
+  }));
 });
 
 @Component({
@@ -136,9 +145,10 @@ describe('NzPopconfirm', () => {
       nzOkType="default"
       nzCancelText="cancel-text"
       [nzCondition]="condition"
+      [nzPopconfirmShowArrow]="nzPopconfirmShowArrow"
+      [nzPopconfirmBackdrop]="nzPopconfirmBackdrop"
       (nzOnConfirm)="confirm()"
       (nzOnCancel)="cancel()"
-      [nzPopconfirmShowArrow]="nzPopconfirmShowArrow"
     >
       Delete
     </a>
@@ -153,9 +163,7 @@ describe('NzPopconfirm', () => {
       Delete
     </a>
 
-    <a nz-popconfirm #iconTemplate [nzIcon]="icon">
-      Delete
-    </a>
+    <a nz-popconfirm #iconTemplate [nzIcon]="icon">Delete</a>
 
     <ng-template #titleTemplate>title-template</ng-template>
   `
@@ -166,6 +174,7 @@ export class NzPopconfirmTestNewComponent {
   condition = false;
   nzPopconfirmShowArrow = true;
   icon: string | undefined = undefined;
+  nzPopconfirmBackdrop = false;
 
   @ViewChild('stringTemplate', { static: false }) stringTemplate!: ElementRef;
   @ViewChild('templateTemplate', { static: false }) templateTemplate!: ElementRef;

components/popconfirm/popconfirm.ts

@@ -25,6 +25,7 @@ import {
 } from '@angular/core';
 import { NzButtonType } from 'ng-zorro-antd/button';
 import { zoomBigMotion } from 'ng-zorro-antd/core/animation';
+import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
 import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
 import { BooleanInput, NgStyleInterface, NzTSType } from 'ng-zorro-antd/core/types';
 
@@ -33,6 +34,8 @@ import { NzTooltipBaseDirective, NzToolTipComponent, NzTooltipTrigger, PropertyM
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
+const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'popconfirm';
+
 @Directive({
   selector: '[nz-popconfirm]',
   exportAs: 'nzPopconfirm',
@@ -41,6 +44,7 @@ import { takeUntil } from 'rxjs/operators';
   }
 })
 export class NzPopconfirmDirective extends NzTooltipBaseDirective {
+  readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;
   static ngAcceptInputType_nzCondition: BooleanInput;
   static ngAcceptInputType_nzPopconfirmShowArrow: BooleanInput;
 
@@ -60,6 +64,7 @@ export class NzPopconfirmDirective extends NzTooltipBaseDirective {
   @Input() nzIcon?: string | TemplateRef<void>;
   @Input() @InputBoolean() nzCondition: boolean = false;
   @Input() @InputBoolean() nzPopconfirmShowArrow: boolean = true;
+  @Input() @WithConfig() nzPopconfirmBackdrop?: boolean = false;
 
   // tslint:disable-next-line:no-output-rename
   @Output('nzPopconfirmVisibleChange') readonly visibleChange = new EventEmitter<boolean>();
@@ -78,6 +83,7 @@ export class NzPopconfirmDirective extends NzTooltipBaseDirective {
       nzCondition: ['nzCondition', () => this.nzCondition],
       nzIcon: ['nzIcon', () => this.nzIcon],
       nzPopconfirmShowArrow: ['nzPopconfirmShowArrow', () => this.nzPopconfirmShowArrow],
+      nzPopconfirmBackdrop: ['nzBackdrop', () => this.nzPopconfirmBackdrop],
       ...super.getProxyPropertyMap()
     };
   }
@@ -87,9 +93,10 @@ export class NzPopconfirmDirective extends NzTooltipBaseDirective {
     hostView: ViewContainerRef,
     resolver: ComponentFactoryResolver,
     renderer: Renderer2,
-    @Host() @Optional() noAnimation?: NzNoAnimationDirective
+    @Host() @Optional() noAnimation?: NzNoAnimationDirective,
+    nzConfigService?: NzConfigService
   ) {
-    super(elementRef, hostView, resolver, renderer, noAnimation);
+    super(elementRef, hostView, resolver, renderer, noAnimation, nzConfigService);
   }
 
   /**
@@ -119,6 +126,7 @@ export class NzPopconfirmDirective extends NzTooltipBaseDirective {
       #overlay="cdkConnectedOverlay"
       cdkConnectedOverlay
       nzConnectedOverlay
+      [cdkConnectedOverlayHasBackdrop]="nzBackdrop"
       [cdkConnectedOverlayOrigin]="origin"
       (overlayOutsideClick)="onClickOutside($event)"
       (detach)="hide()"

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

@@ -35,6 +35,7 @@ import { NzPopoverModule } from 'ng-zorro-antd/popover';
 | `[nzPopoverOverlayClassName]` | Class name of the popover card | `string` | - |
 | `[nzPopoverOverlayStyle]` | Style of the popover card | `object` | - |
 Consult [Tooltip's documentation](/components/tooltip/en#api) to find more APIs.
+| `[nzPopoverBackdrop]` | whether or not the overlay should attach a backdrop | `boolean` | `false` |
 
 ## Note
 

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

@@ -35,6 +35,7 @@ import { NzPopoverModule } from 'ng-zorro-antd/popover';
 | `[nzPopoverMouseLeaveDelay]` | 鼠标移出后延时多少才隐藏气泡框，单位：秒 | `number` | `0.1` |
 | `[nzPopoverOverlayClassName]` | 卡片类名 | `string` | - |
 | `[nzPopoverOverlayStyle]` | 卡片样式 | `object` | - |
+| `[nzPopoverBackdrop]` | 浮层是否应带有背景板 | `boolean` | `false` |
 更多属性请参考 [Tooltip](/components/tooltip/zh#api)。
 
 ## 注意