ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
1,170 lines (1,158 loc) • 43.2 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { FocusTrapFactory } from '@angular/cdk/a11y';
import { ESCAPE } from '@angular/cdk/keycodes';
import { takeUntil } from 'rxjs/operators';
import { Subject, fromEvent } from 'rxjs';
import { DOCUMENT, CommonModule } from '@angular/common';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzI18nService, NzI18nModule } from 'ng-zorro-antd/i18n';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { Overlay, OverlayKeyboardDispatcher, OverlayRef, OverlayModule } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { InjectionToken, Injectable, Optional, SkipSelf, ChangeDetectionStrategy, ChangeDetectorRef, Component, ComponentFactoryResolver, ElementRef, EventEmitter, Inject, Injector, Input, Output, TemplateRef, Type, ViewChild, ViewContainerRef, Pipe, NgModule } from '@angular/core';
import { getElementOffset, isPromise, InputBoolean, LoggerService, LoggerModule, NzNoAnimationModule } from 'ng-zorro-antd/core';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const NZ_MODAL_CONFIG = new InjectionToken('NZ_MODAL_CONFIG');
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzModalControlService {
/**
* @param {?} parentService
*/
constructor(parentService) {
this.parentService = parentService;
this.rootOpenModals = this.parentService ? null : [];
this.rootAfterAllClose = this.parentService ? null : new Subject();
this.rootRegisteredMetaMap = this.parentService ? null : new Map();
}
// Track singleton afterAllClose through over the injection tree
/**
* @return {?}
*/
get afterAllClose() {
return this.parentService ? this.parentService.afterAllClose : (/** @type {?} */ (this.rootAfterAllClose));
}
// Track singleton openModals array through over the injection tree
/**
* @return {?}
*/
get openModals() {
return this.parentService ? this.parentService.openModals : (/** @type {?} */ (this.rootOpenModals));
}
/**
* @private
* @return {?}
*/
get registeredMetaMap() {
// Registered modal for later usage
return this.parentService ? this.parentService.registeredMetaMap : (/** @type {?} */ (this.rootRegisteredMetaMap));
}
// Register a modal to listen its open/close
/**
* @param {?} modalRef
* @return {?}
*/
registerModal(modalRef) {
if (!this.hasRegistered(modalRef)) {
/** @type {?} */
const afterOpenSubscription = modalRef.afterOpen.subscribe((/**
* @return {?}
*/
() => this.openModals.push(modalRef)));
/** @type {?} */
const afterCloseSubscription = modalRef.afterClose.subscribe((/**
* @return {?}
*/
() => this.removeOpenModal(modalRef)));
this.registeredMetaMap.set(modalRef, { modalRef, afterOpenSubscription, afterCloseSubscription });
}
}
// deregister modals
/**
* @param {?} modalRef
* @return {?}
*/
deregisterModal(modalRef) {
/** @type {?} */
const registeredMeta = this.registeredMetaMap.get(modalRef);
if (registeredMeta) {
// Remove this modal if it is still in the opened modal list (NOTE: it may trigger "afterAllClose")
this.removeOpenModal(registeredMeta.modalRef);
registeredMeta.afterOpenSubscription.unsubscribe();
registeredMeta.afterCloseSubscription.unsubscribe();
this.registeredMetaMap.delete(modalRef);
}
}
/**
* @param {?} modalRef
* @return {?}
*/
hasRegistered(modalRef) {
return this.registeredMetaMap.has(modalRef);
}
// Close all registered opened modals
/**
* @return {?}
*/
closeAll() {
/** @type {?} */
let i = this.openModals.length;
while (i--) {
this.openModals[i].close();
}
}
/**
* @private
* @param {?} modalRef
* @return {?}
*/
removeOpenModal(modalRef) {
/** @type {?} */
const index = this.openModals.indexOf(modalRef);
if (index > -1) {
this.openModals.splice(index, 1);
if (!this.openModals.length) {
this.afterAllClose.next();
}
}
}
}
NzModalControlService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
NzModalControlService.ctorParameters = () => [
{ type: NzModalControlService, decorators: [{ type: Optional }, { type: SkipSelf }] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @license
* Copyright Alibaba.com All Rights Reserved.
*
* 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
*/
/**
* API class that public to users to handle the modal instance.
* NzModalRef is aim to avoid accessing to the modal instance directly by users.
* @abstract
* @template T, R
*/
// tslint:disable-next-line:no-any
class NzModalRef {
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const MODAL_ANIMATE_DURATION = 200;
/** @type {?} */
const WRAP_CLASS_NAME = 'ant-modal-wrap';
/**
* @template T, R
*/
// tslint:disable-next-line:no-any
class NzModalComponent extends NzModalRef {
// tslint:disable-line:no-any
/**
* @param {?} overlay
* @param {?} overlayKeyboardDispatcher
* @param {?} i18n
* @param {?} cfr
* @param {?} elementRef
* @param {?} viewContainer
* @param {?} modalControl
* @param {?} focusTrapFactory
* @param {?} cdr
* @param {?} nzModalGlobalConfig
* @param {?} document
*/
constructor(overlay, overlayKeyboardDispatcher, i18n, cfr, elementRef, viewContainer, modalControl, focusTrapFactory, cdr, nzModalGlobalConfig, document // tslint:disable-line:no-any
) {
super();
this.overlay = overlay;
this.overlayKeyboardDispatcher = overlayKeyboardDispatcher;
this.i18n = i18n;
this.cfr = cfr;
this.elementRef = elementRef;
this.viewContainer = viewContainer;
this.modalControl = modalControl;
this.focusTrapFactory = focusTrapFactory;
this.cdr = cdr;
this.nzModalGlobalConfig = nzModalGlobalConfig;
this.document = document;
this.nzVisible = false;
this.nzClosable = true;
this.nzOkLoading = false;
this.nzOkDisabled = false;
this.nzCancelDisabled = false;
this.nzCancelLoading = false;
this.nzKeyboard = true;
this.nzNoAnimation = false;
// [STATIC] Default Modal ONLY
this.nzGetContainer = (/**
* @return {?}
*/
() => this.overlay.create()); // [STATIC]
// [STATIC]
this.nzZIndex = 1000;
this.nzWidth = 520;
this.nzOkType = 'primary';
this.nzIconType = 'question-circle'; // Confirm Modal ONLY
// Confirm Modal ONLY
this.nzModalType = 'default';
this.nzOnOk = new EventEmitter();
this.nzOnCancel = new EventEmitter();
this.nzAfterOpen = new EventEmitter(); // Trigger when modal open(visible) after animations
// Trigger when modal open(visible) after animations
this.nzAfterClose = new EventEmitter(); // Trigger when modal leave-animation over
// Trigger when modal leave-animation over
this.nzVisibleChange = new EventEmitter();
this.locale = {};
this.transformOrigin = '0px 0px 0px'; // The origin point that animation based on
this.unsubscribe$ = new Subject();
this.dialogMouseDown = false;
this.scrollStrategy = this.overlay.scrollStrategies.block();
}
// Only aim to focus the ok button that needs to be auto focused
/**
* @return {?}
*/
get afterOpen() {
// Observable alias for nzAfterOpen
return this.nzAfterOpen.asObservable();
}
/**
* @return {?}
*/
get afterClose() {
// Observable alias for nzAfterClose
return this.nzAfterClose.asObservable();
}
/**
* @return {?}
*/
get cancelText() {
return this.nzCancelText || (/** @type {?} */ (this.locale.cancelText));
}
/**
* @return {?}
*/
get okText() {
return this.nzOkText || (/** @type {?} */ (this.locale.okText));
}
/**
* @return {?}
*/
get hidden() {
return !this.nzVisible && !this.animationState;
} // Indicate whether this dialog should hidden
// Indicate whether this dialog should hidden
/**
* \@description
* The calculated highest weight of mask value
*
* Weight of different mask input:
* component default value < global configuration < component input value
* @return {?}
*/
get mask() {
if (this.nzMask != null) {
return this.nzMask;
}
else if (this.nzModalGlobalConfig && this.nzModalGlobalConfig.nzMask != null) {
return this.nzModalGlobalConfig.nzMask;
}
else {
return true;
}
}
/**
* \@description
* The calculated highest weight of maskClosable value
*
* Weight of different maskClosable input:
* component default value < global configuration < component input value
* @return {?}
*/
get maskClosable() {
if (this.nzMaskClosable != null) {
return this.nzMaskClosable;
}
else if (this.nzModalGlobalConfig && this.nzModalGlobalConfig.nzMaskClosable != null) {
return this.nzModalGlobalConfig.nzMaskClosable;
}
else {
return true;
}
}
/**
* @return {?}
*/
ngOnInit() {
this.i18n.localeChange.pipe(takeUntil(this.unsubscribe$)).subscribe((/**
* @return {?}
*/
() => {
this.locale = (/** @type {?} */ (this.i18n.getLocaleData('Modal')));
}));
if (this.isComponent(this.nzContent)) {
this.createDynamicComponent((/** @type {?} */ (this.nzContent))); // Create component along without View
}
if (this.isModalButtons(this.nzFooter)) {
// Setup default button options
this.nzFooter = this.formatModalButtons((/** @type {?} */ (this.nzFooter)));
}
// Place the modal dom to elsewhere
this.container = typeof this.nzGetContainer === 'function' ? this.nzGetContainer() : this.nzGetContainer;
if (this.container instanceof HTMLElement) {
this.container.appendChild(this.elementRef.nativeElement);
fromEvent(this.document.body, 'keydown')
.pipe(takeUntil(this.unsubscribe$))
.subscribe((/**
* @param {?} e
* @return {?}
*/
e => this.keydownListener(e)));
}
else if (this.container instanceof OverlayRef) {
// NOTE: only attach the dom to overlay, the view container is not changed actually
this.setOverlayRef(this.container);
this.container.overlayElement.appendChild(this.elementRef.nativeElement);
}
if (this.overlayRef) {
this.overlayRef
.keydownEvents()
.pipe(takeUntil(this.unsubscribe$))
.subscribe((/**
* @param {?} e
* @return {?}
*/
e => this.keydownListener(e)));
}
// Register modal when afterOpen/afterClose is stable
this.modalControl.registerModal(this);
}
// [NOTE] NOT available when using by service!
// Because ngOnChanges never be called when using by service,
// here we can't support "nzContent"(Component) etc. as inputs that initialized dynamically.
// BUT: User also can change "nzContent" dynamically to trigger UI changes (provided you don't use Component that needs initializations)
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes.nzVisible) {
this.handleVisibleStateChange(this.nzVisible, !changes.nzVisible.firstChange); // Do not trigger animation while initializing
}
}
/**
* @return {?}
*/
ngAfterViewInit() {
// If using Component, it is the time to attach View while bodyContainer is ready
if (this.contentComponentRef) {
this.bodyContainer.insert(this.contentComponentRef.hostView);
}
if (this.autoFocusButtonOk) {
((/** @type {?} */ (this.autoFocusButtonOk.nativeElement))).focus();
}
}
/**
* @return {?}
*/
ngOnDestroy() {
// Close self before destructing
this.changeVisibleFromInside(false).then((/**
* @return {?}
*/
() => {
this.modalControl.deregisterModal(this);
if (this.container instanceof OverlayRef) {
this.container.dispose();
}
this.unsubscribe$.next();
this.unsubscribe$.complete();
}));
clearTimeout(this.timeoutId);
}
/**
* @param {?} overlayRef
* @return {?}
*/
setOverlayRef(overlayRef) {
this.overlayRef = overlayRef;
}
/**
* @param {?} event
* @return {?}
*/
keydownListener(event) {
if (event.keyCode === ESCAPE && this.nzKeyboard) {
this.onClickOkCancel('cancel');
}
}
/**
* @return {?}
*/
open() {
this.changeVisibleFromInside(true);
}
/**
* @param {?=} result
* @return {?}
*/
close(result) {
this.changeVisibleFromInside(false, result);
}
/**
* @param {?=} result
* @return {?}
*/
destroy(result) {
// Destroy equals Close
this.close(result);
}
/**
* @return {?}
*/
triggerOk() {
this.onClickOkCancel('ok');
}
/**
* @return {?}
*/
triggerCancel() {
this.onClickOkCancel('cancel');
}
/**
* @return {?}
*/
getInstance() {
return this;
}
/**
* @return {?}
*/
getContentComponentRef() {
return this.contentComponentRef;
}
/**
* @return {?}
*/
getContentComponent() {
return this.contentComponentRef && this.contentComponentRef.instance;
}
/**
* @return {?}
*/
getElement() {
return this.elementRef && this.elementRef.nativeElement;
}
/**
* @return {?}
*/
onMaskDialogDown() {
this.dialogMouseDown = true;
}
/**
* @return {?}
*/
onDialogUp() {
if (this.dialogMouseDown) {
this.timeoutId = setTimeout((/**
* @return {?}
*/
() => {
this.dialogMouseDown = false;
}), 0);
}
}
/**
* @param {?} $event
* @return {?}
*/
onClickMask($event) {
if (this.mask &&
this.maskClosable &&
((/** @type {?} */ ($event.target))).classList.contains(WRAP_CLASS_NAME) &&
this.nzVisible &&
!this.dialogMouseDown) {
this.onClickOkCancel('cancel');
}
}
/**
* @param {?} type
* @return {?}
*/
isModalType(type) {
return this.nzModalType === type;
}
/**
* @return {?}
*/
onClickCloseBtn() {
if (this.nzVisible) {
this.onClickOkCancel('cancel');
}
}
/**
* @param {?} type
* @return {?}
*/
onClickOkCancel(type) {
/** @type {?} */
const trigger = { ok: this.nzOnOk, cancel: this.nzOnCancel }[type];
/** @type {?} */
const loadingKey = { ok: 'nzOkLoading', cancel: 'nzCancelLoading' }[type];
if (trigger instanceof EventEmitter) {
trigger.emit(this.getContentComponent());
}
else if (typeof trigger === 'function') {
/** @type {?} */
const result = trigger(this.getContentComponent());
/** @type {?} */
const caseClose = (/**
* @param {?} doClose
* @return {?}
*/
(doClose) => doClose !== false && this.close((/** @type {?} */ (doClose))));
if (isPromise(result)) {
this[loadingKey] = true;
/** @type {?} */
const handleThen = (/**
* @param {?} doClose
* @return {?}
*/
(doClose) => {
this[loadingKey] = false;
caseClose(doClose);
});
((/** @type {?} */ (result))).then(handleThen).catch(handleThen);
}
else {
caseClose(result);
}
}
}
/**
* @param {?} value
* @return {?}
*/
isNonEmptyString(value) {
return typeof value === 'string' && value !== '';
}
/**
* @param {?} value
* @return {?}
*/
isTemplateRef(value) {
return value instanceof TemplateRef;
}
/**
* @param {?} value
* @return {?}
*/
isComponent(value) {
return value instanceof Type;
}
/**
* @param {?} value
* @return {?}
*/
isModalButtons(value) {
return Array.isArray(value) && value.length > 0;
}
// Do rest things when visible state changed
/**
* @private
* @param {?} visible
* @param {?=} animation
* @param {?=} closeResult
* @return {?}
*/
handleVisibleStateChange(visible, animation = true, closeResult) {
if (visible) {
// Hide scrollbar at the first time when shown up
this.scrollStrategy.enable();
this.savePreviouslyFocusedElement();
this.trapFocus();
if (this.container instanceof OverlayRef) {
this.overlayKeyboardDispatcher.add(this.overlayRef);
}
}
else {
if (this.container instanceof OverlayRef) {
this.overlayKeyboardDispatcher.remove(this.overlayRef);
}
}
return Promise.resolve(animation ? this.animateTo(visible) : undefined).then((/**
* @return {?}
*/
() => {
// Emit open/close event after animations over
if (visible) {
this.nzAfterOpen.emit();
}
else {
this.nzAfterClose.emit(closeResult);
this.restoreFocus();
this.scrollStrategy.disable();
// Mark the for check so it can react if the view container is using OnPush change detection.
this.cdr.markForCheck();
}
}));
}
// Lookup a button's property, if the prop is a function, call & then return the result, otherwise, return itself.
/**
* @param {?} options
* @param {?} prop
* @return {?}
*/
getButtonCallableProp(options, prop) {
/** @type {?} */
const value = options[prop];
/** @type {?} */
const args = [];
if (this.contentComponentRef) {
args.push(this.contentComponentRef.instance);
}
return typeof value === 'function' ? value.apply(options, args) : value;
}
// On nzFooter's modal button click
/**
* @param {?} button
* @return {?}
*/
onButtonClick(button) {
/** @type {?} */
const result = this.getButtonCallableProp(button, 'onClick');
if (isPromise(result)) {
button.loading = true;
((/** @type {?} */ (result))).then((/**
* @return {?}
*/
() => (button.loading = false))).catch((/**
* @return {?}
*/
() => (button.loading = false)));
}
}
// Change nzVisible from inside
/**
* @private
* @param {?} visible
* @param {?=} closeResult
* @return {?}
*/
changeVisibleFromInside(visible, closeResult) {
if (this.nzVisible !== visible) {
// Change nzVisible value immediately
this.nzVisible = visible;
this.nzVisibleChange.emit(visible);
return this.handleVisibleStateChange(visible, true, closeResult);
}
return Promise.resolve();
}
/**
* @private
* @param {?} state
* @return {?}
*/
changeAnimationState(state) {
this.animationState = state;
if (state) {
this.maskAnimationClassMap = {
[`fade-${state}`]: true,
[`fade-${state}-active`]: true
};
this.modalAnimationClassMap = {
[`zoom-${state}`]: true,
[`zoom-${state}-active`]: true
};
}
else {
this.maskAnimationClassMap = this.modalAnimationClassMap = null;
}
}
/**
* @private
* @param {?} isVisible
* @return {?}
*/
animateTo(isVisible) {
if (isVisible) {
// Figure out the lastest click position when shows up
setTimeout((/**
* @return {?}
*/
() => this.updateTransformOrigin())); // [NOTE] Using timeout due to the document.click event is fired later than visible change, so if not postponed to next event-loop, we can't get the lastest click position
}
this.changeAnimationState(isVisible ? 'enter' : 'leave');
return new Promise((/**
* @param {?} resolve
* @return {?}
*/
resolve => setTimeout((/**
* @return {?}
*/
() => {
// Return when animation is over
this.changeAnimationState(null);
resolve();
}), this.nzNoAnimation ? 0 : MODAL_ANIMATE_DURATION)));
}
/**
* @private
* @param {?} buttons
* @return {?}
*/
formatModalButtons(buttons) {
return buttons.map((/**
* @param {?} button
* @return {?}
*/
button => {
return Object.assign({
type: 'default',
size: 'default',
autoLoading: true,
show: true,
loading: false,
disabled: false
}, button);
}));
}
/**
* Create a component dynamically but not attach to any View (this action will be executed when bodyContainer is ready)
* @private
* @param {?} component Component class
* @return {?}
*/
createDynamicComponent(component) {
/** @type {?} */
const factory = this.cfr.resolveComponentFactory(component);
/** @type {?} */
const childInjector = Injector.create({
providers: [{ provide: NzModalRef, useValue: this }],
parent: this.viewContainer.parentInjector
});
this.contentComponentRef = factory.create(childInjector);
if (this.nzComponentParams) {
Object.assign(this.contentComponentRef.instance, this.nzComponentParams);
}
// Do the first change detection immediately (or we do detection at ngAfterViewInit, multi-changes error will be thrown)
this.contentComponentRef.changeDetectorRef.detectChanges();
}
// Update transform-origin to the last click position on document
/**
* @private
* @return {?}
*/
updateTransformOrigin() {
/** @type {?} */
const modalElement = (/** @type {?} */ (this.modalContainer.nativeElement));
if (this.previouslyFocusedElement) {
/** @type {?} */
const previouslyDOMRect = this.previouslyFocusedElement.getBoundingClientRect();
/** @type {?} */
const lastPosition = getElementOffset(this.previouslyFocusedElement);
/** @type {?} */
const x = lastPosition.left + previouslyDOMRect.width / 2;
/** @type {?} */
const y = lastPosition.top + previouslyDOMRect.height / 2;
this.transformOrigin = `${x - modalElement.offsetLeft}px ${y - modalElement.offsetTop}px 0px`;
}
}
/**
* @private
* @return {?}
*/
savePreviouslyFocusedElement() {
if (this.document) {
this.previouslyFocusedElement = (/** @type {?} */ (this.document.activeElement));
}
}
/**
* @private
* @return {?}
*/
trapFocus() {
if (!this.focusTrap) {
this.focusTrap = this.focusTrapFactory.create(this.elementRef.nativeElement);
}
this.focusTrap.focusInitialElementWhenReady();
}
/**
* @private
* @return {?}
*/
restoreFocus() {
// We need the extra check, because IE can set the `activeElement` to null in some cases.
if (this.previouslyFocusedElement && typeof this.previouslyFocusedElement.focus === 'function') {
this.previouslyFocusedElement.focus();
}
if (this.focusTrap) {
this.focusTrap.destroy();
}
}
}
NzModalComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-modal',
exportAs: 'nzModal',
template: "<ng-template #tplOriginContent><ng-content></ng-content></ng-template> <!-- Compatible: the <ng-content> can appear only once -->\n\n<div [nzNoAnimation]=\"nzNoAnimation\">\n <div *ngIf=\"mask\"\n class=\"ant-modal-mask\"\n [ngClass]=\"maskAnimationClassMap\"\n [class.ant-modal-mask-hidden]=\"hidden\"\n [ngStyle]=\"nzMaskStyle\"\n [style.zIndex]=\"nzZIndex\"\n ></div>\n <div\n (click)=\"onClickMask($event)\"\n (mouseup)=\"onDialogUp()\"\n class=\"ant-modal-wrap {{ nzWrapClassName }}\"\n [style.zIndex]=\"nzZIndex\"\n [style.visibility]=\"hidden ? 'hidden' : null\"\n tabindex=\"-1\"\n role=\"dialog\"\n >\n <div #modalContainer\n class=\"ant-modal {{ nzClassName }}\"\n (mousedown)=\"onMaskDialogDown()\"\n [ngClass]=\"modalAnimationClassMap\"\n [ngStyle]=\"nzStyle\"\n [style.width]=\"nzWidth | toCssUnit\"\n [style.transform-origin]=\"transformOrigin\"\n role=\"document\"\n >\n <div class=\"ant-modal-content\">\n <button *ngIf=\"nzClosable\" (click)=\"onClickCloseBtn()\" class=\"ant-modal-close\" aria-label=\"Close\">\n <span class=\"ant-modal-close-x\">\n <i nz-icon type=\"close\" class=\"ant-modal-close-icon\"></i>\n </span>\n </button>\n <ng-container *ngIf=\"!hidden\" [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isModalType('default')\" [ngTemplateOutlet]=\"tplContentDefault\"></ng-container>\n <ng-container *ngSwitchCase=\"isModalType('confirm')\" [ngTemplateOutlet]=\"tplContentConfirm\"></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n</div>\n\n<!-- [Predefined] Default Modal Content -->\n<ng-template #tplContentDefault>\n <div *ngIf=\"nzTitle\" class=\"ant-modal-header\">\n <div class=\"ant-modal-title\">\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isTemplateRef(nzTitle)\" [ngTemplateOutlet]=\"nzTitle\"></ng-container>\n <ng-container *ngSwitchCase=\"isNonEmptyString(nzTitle)\"><div [innerHTML]=\"nzTitle\"></div></ng-container>\n </ng-container>\n </div>\n </div>\n <div class=\"ant-modal-body\" [ngStyle]=\"nzBodyStyle\">\n <ng-container #bodyContainer>\n <ng-container *ngIf=\"!isComponent(nzContent)\" [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isTemplateRef(nzContent)\" [ngTemplateOutlet]=\"nzContent\"></ng-container>\n <ng-container *ngSwitchCase=\"isNonEmptyString(nzContent)\"><div [innerHTML]=\"nzContent\"></div></ng-container>\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\n </ng-container>\n </ng-container>\n </div>\n <div *ngIf=\"nzFooter !== null\" class=\"ant-modal-footer\">\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isTemplateRef(nzFooter)\" [ngTemplateOutlet]=\"nzFooter\"></ng-container>\n <ng-container *ngSwitchCase=\"isNonEmptyString(nzFooter)\"><div [innerHTML]=\"nzFooter\"></div></ng-container>\n <ng-container *ngSwitchCase=\"isModalButtons(nzFooter)\">\n <button *ngFor=\"let button of nzFooter\" nz-button\n (click)=\"onButtonClick(button)\"\n [hidden]=\"!getButtonCallableProp(button, 'show')\"\n [nzLoading]=\"getButtonCallableProp(button, 'loading')\"\n [disabled]=\"getButtonCallableProp(button, 'disabled')\"\n [nzType]=\"button.type\"\n [nzShape]=\"button.shape\"\n [nzSize]=\"button.size\"\n [nzGhost]=\"button.ghost\"\n >{{ button.label }}</button>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <button *ngIf=\"nzCancelText!==null\" nz-button (click)=\"onClickOkCancel('cancel')\" [nzLoading]=\"nzCancelLoading\" [disabled]=\"nzCancelDisabled\">\n {{ cancelText }}\n </button>\n <button *ngIf=\"nzOkText!==null\" nz-button [nzType]=\"nzOkType\" (click)=\"onClickOkCancel('ok')\" [nzLoading]=\"nzOkLoading\" [disabled]=\"nzOkDisabled\">\n {{ okText }}\n </button>\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n<!-- /[Predefined] Default Modal Content -->\n\n<!-- [Predefined] Confirm Modal Content -->\n<ng-template #tplContentConfirm>\n <div class=\"ant-modal-body\" [ngStyle]=\"nzBodyStyle\">\n <div class=\"ant-modal-confirm-body-wrapper\">\n <div class=\"ant-modal-confirm-body\">\n <i nz-icon [type]=\"nzIconType\"></i>\n <span class=\"ant-modal-confirm-title\">\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isTemplateRef(nzTitle)\" [ngTemplateOutlet]=\"nzTitle\"></ng-container>\n <ng-container *ngSwitchCase=\"isNonEmptyString(nzTitle)\"><span [innerHTML]=\"nzTitle\"></span></ng-container>\n </ng-container>\n </span>\n <div class=\"ant-modal-confirm-content\">\n <ng-container #bodyContainer>\n <ng-container *ngIf=\"!isComponent(nzContent)\" [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isTemplateRef(nzContent)\" [ngTemplateOutlet]=\"nzContent\"></ng-container>\n <ng-container *ngSwitchCase=\"isNonEmptyString(nzContent)\"><div [innerHTML]=\"nzContent\"></div></ng-container>\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div class=\"ant-modal-confirm-btns\">\n <button nz-button *ngIf=\"nzCancelText!==null\" (click)=\"onClickOkCancel('cancel')\" [nzLoading]=\"nzCancelLoading\">\n {{ cancelText }}\n </button>\n <button *ngIf=\"nzOkText!==null\" #autoFocusButtonOk nz-button [nzType]=\"nzOkType\" (click)=\"onClickOkCancel('ok')\" [nzLoading]=\"nzOkLoading\">\n {{ okText }}\n </button>\n </div>\n </div> <!-- /.ant-modal-confirm-body-wrapper -->\n </div>\n</ng-template>\n<!-- /[Predefined] Confirm Modal Content -->\n",
// Using OnPush for modal caused footer can not to detect changes. we can fix it when 8.x.
changeDetection: ChangeDetectionStrategy.Default
}] }
];
/** @nocollapse */
NzModalComponent.ctorParameters = () => [
{ type: Overlay },
{ type: OverlayKeyboardDispatcher },
{ type: NzI18nService },
{ type: ComponentFactoryResolver },
{ type: ElementRef },
{ type: ViewContainerRef },
{ type: NzModalControlService },
{ type: FocusTrapFactory },
{ type: ChangeDetectorRef },
{ type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [NZ_MODAL_CONFIG,] }] },
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
];
NzModalComponent.propDecorators = {
nzVisible: [{ type: Input }],
nzClosable: [{ type: Input }],
nzOkLoading: [{ type: Input }],
nzOkDisabled: [{ type: Input }],
nzCancelDisabled: [{ type: Input }],
nzCancelLoading: [{ type: Input }],
nzKeyboard: [{ type: Input }],
nzNoAnimation: [{ type: Input }],
nzMask: [{ type: Input }],
nzMaskClosable: [{ type: Input }],
nzContent: [{ type: Input }],
nzComponentParams: [{ type: Input }],
nzFooter: [{ type: Input }],
nzGetContainer: [{ type: Input }],
nzZIndex: [{ type: Input }],
nzWidth: [{ type: Input }],
nzWrapClassName: [{ type: Input }],
nzClassName: [{ type: Input }],
nzStyle: [{ type: Input }],
nzTitle: [{ type: Input }],
nzMaskStyle: [{ type: Input }],
nzBodyStyle: [{ type: Input }],
nzOkText: [{ type: Input }],
nzCancelText: [{ type: Input }],
nzOkType: [{ type: Input }],
nzIconType: [{ type: Input }],
nzModalType: [{ type: Input }],
nzOnOk: [{ type: Input }, { type: Output }],
nzOnCancel: [{ type: Input }, { type: Output }],
nzAfterOpen: [{ type: Output }],
nzAfterClose: [{ type: Output }],
nzVisibleChange: [{ type: Output }],
modalContainer: [{ type: ViewChild, args: ['modalContainer',] }],
bodyContainer: [{ type: ViewChild, args: ['bodyContainer', { read: ViewContainerRef },] }],
autoFocusButtonOk: [{ type: ViewChild, args: ['autoFocusButtonOk', { read: ElementRef },] }]
};
__decorate([
InputBoolean(),
__metadata("design:type", Boolean)
], NzModalComponent.prototype, "nzVisible", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Boolean)
], NzModalComponent.prototype, "nzClosable", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Boolean)
], NzModalComponent.prototype, "nzOkLoading", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Boolean)
], NzModalComponent.prototype, "nzOkDisabled", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Boolean)
], NzModalComponent.prototype, "nzCancelDisabled", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Boolean)
], NzModalComponent.prototype, "nzCancelLoading", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Boolean)
], NzModalComponent.prototype, "nzKeyboard", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzModalComponent.prototype, "nzNoAnimation", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Boolean)
], NzModalComponent.prototype, "nzMask", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Boolean)
], NzModalComponent.prototype, "nzMaskClosable", void 0);
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class CssUnitPipe {
/**
* @param {?} value
* @param {?=} defaultUnit
* @return {?}
*/
transform(value, defaultUnit = 'px') {
/** @type {?} */
const formatted = +value;
return isNaN(formatted) ? `${value}` : `${formatted}${defaultUnit}`;
}
}
CssUnitPipe.decorators = [
{ type: Pipe, args: [{
name: 'toCssUnit'
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// A builder used for managing service creating modals
class ModalBuilderForService {
/**
* @param {?} overlay
* @param {?=} options
*/
constructor(overlay, options = {}) {
this.overlay = overlay;
this.createModal();
if (!('nzGetContainer' in options)) {
// As we use CDK to create modal in service by force, there is no need to use nzGetContainer
options.nzGetContainer = undefined; // Override nzGetContainer's default value to prevent creating another overlay
}
this.changeProps(options);
(/** @type {?} */ (this.modalRef)).instance.setOverlayRef(this.overlayRef);
(/** @type {?} */ (this.modalRef)).instance.open();
(/** @type {?} */ (this.modalRef)).instance.nzAfterClose.subscribe((/**
* @return {?}
*/
() => this.destroyModal())); // [NOTE] By default, close equals destroy when using as Service
}
/**
* @return {?}
*/
getInstance() {
return this.modalRef && this.modalRef.instance;
}
/**
* @return {?}
*/
destroyModal() {
if (this.modalRef) {
this.overlayRef.dispose();
this.modalRef = null;
}
}
/**
* @private
* @param {?} options
* @return {?}
*/
changeProps(options) {
if (this.modalRef) {
Object.assign(this.modalRef.instance, options); // DANGER: here not limit user's inputs at runtime
}
}
// Create component to ApplicationRef
/**
* @private
* @return {?}
*/
createModal() {
this.overlayRef = this.overlay.create();
this.modalRef = this.overlayRef.attach(new ComponentPortal(NzModalComponent));
}
}
class NzModalService {
/**
* @param {?} overlay
* @param {?} logger
* @param {?} modalControl
*/
constructor(overlay, logger, modalControl) {
this.overlay = overlay;
this.logger = logger;
this.modalControl = modalControl;
}
// Track of the current close modals (we assume invisible is close this time)
/**
* @return {?}
*/
get openModals() {
return this.modalControl.openModals;
}
/**
* @return {?}
*/
get afterAllClose() {
return this.modalControl.afterAllClose.asObservable();
}
// Closes all of the currently-open dialogs
/**
* @return {?}
*/
closeAll() {
this.modalControl.closeAll();
}
/**
* @template T
* @param {?=} options
* @return {?}
*/
create(options = {}) {
if (typeof options.nzOnCancel !== 'function') {
options.nzOnCancel = (/**
* @return {?}
*/
() => { }); // Leave a empty function to close this modal by default
}
// NOTE: use NzModalComponent as the NzModalRef by now, we may need archive the real NzModalRef object in the future
/** @type {?} */
const modalRef = (/** @type {?} */ (new ModalBuilderForService(this.overlay, options).getInstance()));
return modalRef;
}
/**
* @template T
* @param {?=} options
* @param {?=} confirmType
* @return {?}
*/
confirm(options = {}, confirmType = 'confirm') {
if ('nzFooter' in options) {
this.logger.warn(`The Confirm-Modal doesn't support "nzFooter", this property will be ignored.`);
}
if (!('nzWidth' in options)) {
options.nzWidth = 416;
}
if (typeof options.nzOnOk !== 'function') {
// NOTE: only support function currently by calling confirm()
options.nzOnOk = (/**
* @return {?}
*/
() => { }); // Leave a empty function to close this modal by default
}
options.nzModalType = 'confirm';
options.nzClassName = `ant-modal-confirm ant-modal-confirm-${confirmType} ${options.nzClassName || ''}`;
options.nzMaskClosable = false;
return this.create(options);
}
/**
* @template T
* @param {?=} options
* @return {?}
*/
info(options = {}) {
return this.simpleConfirm(options, 'info');
}
/**
* @template T
* @param {?=} options
* @return {?}
*/
success(options = {}) {
return this.simpleConfirm(options, 'success');
}
/**
* @template T
* @param {?=} options
* @return {?}
*/
error(options = {}) {
return this.simpleConfirm(options, 'error');
}
/**
* @template T
* @param {?=} options
* @return {?}
*/
warning(options = {}) {
return this.simpleConfirm(options, 'warning');
}
/**
* @private
* @template T
* @param {?=} options
* @param {?=} confirmType
* @return {?}
*/
simpleConfirm(options = {}, confirmType) {
/** @type {?} */
const iconMap = {
info: 'info-circle',
success: 'check-circle',
error: 'close-circle',
warning: 'exclamation-circle'
};
if (!('nzIconType' in options)) {
options.nzIconType = iconMap[confirmType];
}
if (!('nzCancelText' in options)) {
// Remove the Cancel button if the user not specify a Cancel button
options.nzCancelText = null;
}
return this.confirm(options, confirmType);
}
}
NzModalService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
NzModalService.ctorParameters = () => [
{ type: Overlay },
{ type: LoggerService },
{ type: NzModalControlService }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NzModalModule {
}
NzModalModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, OverlayModule, NzI18nModule, NzButtonModule, LoggerModule, NzIconModule, NzNoAnimationModule],
exports: [NzModalComponent],
declarations: [NzModalComponent, CssUnitPipe],
entryComponents: [NzModalComponent],
providers: [NzModalControlService, NzModalService]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NzModalComponent, NzModalRef, NzModalModule, NzModalService, NZ_MODAL_CONFIG, NzModalControlService, CssUnitPipe };
//# sourceMappingURL=ng-zorro-antd-modal.js.map