-
Notifications
You must be signed in to change notification settings - Fork 3.8k
/
modal-container.component.ts
99 lines (93 loc) · 3.38 KB
/
modal-container.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
/**
* 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 { FocusTrapFactory } from '@angular/cdk/a11y';
import { OverlayRef } from '@angular/cdk/overlay';
import { CdkPortalOutlet } from '@angular/cdk/portal';
import { DOCUMENT } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ElementRef,
Inject,
NgZone,
OnInit,
Optional,
Renderer2,
ViewChild
} from '@angular/core';
import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
import { NzConfigService } from 'ng-zorro-antd/core/config';
import { NzSafeAny } from 'ng-zorro-antd/core/types';
import { nzModalAnimations } from './modal-animations';
import { BaseModalContainerComponent } from './modal-container';
import { ModalOptions } from './modal-types';
@Component({
selector: 'nz-modal-container',
exportAs: 'nzModalContainer',
template: `
<div
#modalElement
role="document"
class="ant-modal"
[ngClass]="config.nzClassName!"
[ngStyle]="config.nzStyle!"
[style.width]="config?.nzWidth! | nzToCssUnit"
>
<div class="ant-modal-content">
<button *ngIf="config.nzClosable" nz-modal-close (click)="onCloseClick()"></button>
<div *ngIf="config.nzTitle" nz-modal-title></div>
<div class="ant-modal-body" [ngStyle]="config.nzBodyStyle!">
<ng-template cdkPortalOutlet></ng-template>
<div *ngIf="isStringContent" [innerHTML]="config.nzContent"></div>
</div>
<div
*ngIf="config.nzFooter !== null"
nz-modal-footer
[modalRef]="modalRef"
(cancelTriggered)="onCloseClick()"
(okTriggered)="onOkClick()"
></div>
</div>
</div>
`,
animations: [nzModalAnimations.modalContainer],
// Using OnPush for modal caused footer can not to detect changes. we can fix it when 8.x.
changeDetection: ChangeDetectionStrategy.Default,
host: {
tabindex: '-1',
role: 'dialog',
'[class]': 'config.nzWrapClassName ? "ant-modal-wrap " + config.nzWrapClassName : "ant-modal-wrap"',
'[class.ant-modal-wrap-rtl]': `dir === 'rtl'`,
'[class.ant-modal-centered]': 'config.nzCentered',
'[style.zIndex]': 'config.nzZIndex',
'[@.disabled]': 'config.nzNoAnimation',
'[@modalContainer]': 'state',
'(@modalContainer.start)': 'onAnimationStart($event)',
'(@modalContainer.done)': 'onAnimationDone($event)',
'(click)': 'onContainerClick($event)'
}
})
export class NzModalContainerComponent extends BaseModalContainerComponent implements OnInit {
@ViewChild(CdkPortalOutlet, { static: true }) portalOutlet!: CdkPortalOutlet;
@ViewChild('modalElement', { static: true }) modalElementRef!: ElementRef<HTMLDivElement>;
constructor(
ngZone: NgZone,
host: ElementRef<HTMLElement>,
focusTrapFactory: FocusTrapFactory,
cdr: ChangeDetectorRef,
render: Renderer2,
overlayRef: OverlayRef,
nzConfigService: NzConfigService,
public config: ModalOptions,
@Optional() @Inject(DOCUMENT) document: NzSafeAny,
@Optional() @Inject(ANIMATION_MODULE_TYPE) animationType: string
) {
super(ngZone, host, focusTrapFactory, cdr, render, overlayRef, nzConfigService, config, document, animationType);
}
ngOnInit(): void {
this.setupMouseListeners(this.modalElementRef);
}
}