UNPKG

ng-zorro-antd

Version:

An enterprise-class UI components based on Ant Design and Angular

1,466 lines (1,457 loc) 89.4 kB
import { OverlayRef, OverlayConfig, Overlay, OverlayModule } from '@angular/cdk/overlay'; import { BasePortalOutlet, CdkPortalOutlet, PortalInjector, ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal'; import { InjectionToken, EventEmitter, Component, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef, Renderer2, NgZone, Optional, Inject, ViewChild, Output, TemplateRef, Injectable, Injector, SkipSelf, Directive, ViewContainerRef, Input, ContentChild, NgModule } from '@angular/core'; import { warn } from 'ng-zorro-antd/core/logger'; import { getElementOffset, isPromise, isNotNil, InputBoolean } from 'ng-zorro-antd/core/util'; import { Subject, defer } from 'rxjs'; import { takeUntil, filter, take, startWith } from 'rxjs/operators'; import { __extends, __assign, __rest, __decorate, __metadata } from 'tslib'; import { FocusTrapFactory } from '@angular/cdk/a11y'; import { DOCUMENT, CommonModule } from '@angular/common'; import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations'; import { NzI18nService, NzI18nModule } from 'ng-zorro-antd/i18n'; import { trigger, state, style, transition, animate } from '@angular/animations'; import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes'; import { NzConfigService, WithConfig } from 'ng-zorro-antd/core/config'; import { NzButtonModule } from 'ng-zorro-antd/button'; import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation'; import { NzOutletModule } from 'ng-zorro-antd/core/outlet'; import { NzPipesModule } from 'ng-zorro-antd/core/pipe'; import { NzIconModule } from 'ng-zorro-antd/icon'; /** * @fileoverview added by tsickle * Generated from: modal-types.ts * @suppress {checkTypes,constantProperty,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 */ /** * @record */ function StyleObjectLike() { } /** @type {?} */ var noopFun = (/** * @return {?} */ function () { return void 0; }); var ɵ0 = noopFun; /** * @template T, R */ var /** * @template T, R */ ModalOptions = /** @class */ (function () { function ModalOptions() { this.nzClosable = true; this.nzOkLoading = false; this.nzOkDisabled = false; this.nzCancelDisabled = false; this.nzCancelLoading = false; this.nzNoAnimation = false; this.nzAutofocus = 'auto'; this.nzMask = true; this.nzMaskClosable = true; this.nzKeyboard = true; this.nzZIndex = 1000; this.nzWidth = 520; this.nzCloseIcon = 'close'; this.nzOkType = 'primary'; this.nzModalType = 'default'; this.nzOnCancel = noopFun; this.nzOnOk = noopFun; this.nzCloseOnNavigation = true; // Confirm this.nzIconType = 'question-circle'; } return ModalOptions; }()); if (false) { /** @type {?} */ ModalOptions.prototype.nzClosable; /** @type {?} */ ModalOptions.prototype.nzOkLoading; /** @type {?} */ ModalOptions.prototype.nzOkDisabled; /** @type {?} */ ModalOptions.prototype.nzCancelDisabled; /** @type {?} */ ModalOptions.prototype.nzCancelLoading; /** @type {?} */ ModalOptions.prototype.nzNoAnimation; /** @type {?} */ ModalOptions.prototype.nzAutofocus; /** @type {?} */ ModalOptions.prototype.nzMask; /** @type {?} */ ModalOptions.prototype.nzMaskClosable; /** @type {?} */ ModalOptions.prototype.nzKeyboard; /** @type {?} */ ModalOptions.prototype.nzZIndex; /** @type {?} */ ModalOptions.prototype.nzWidth; /** @type {?} */ ModalOptions.prototype.nzCloseIcon; /** @type {?} */ ModalOptions.prototype.nzOkType; /** @type {?} */ ModalOptions.prototype.nzModalType; /** @type {?} */ ModalOptions.prototype.nzOnCancel; /** @type {?} */ ModalOptions.prototype.nzOnOk; /** @type {?} */ ModalOptions.prototype.nzComponentParams; /** @type {?} */ ModalOptions.prototype.nzMaskStyle; /** @type {?} */ ModalOptions.prototype.nzBodyStyle; /** @type {?} */ ModalOptions.prototype.nzWrapClassName; /** @type {?} */ ModalOptions.prototype.nzClassName; /** @type {?} */ ModalOptions.prototype.nzStyle; /** @type {?} */ ModalOptions.prototype.nzTitle; /** @type {?} */ ModalOptions.prototype.nzFooter; /** @type {?} */ ModalOptions.prototype.nzCancelText; /** @type {?} */ ModalOptions.prototype.nzOkText; /** @type {?} */ ModalOptions.prototype.nzContent; /** @type {?} */ ModalOptions.prototype.nzCloseOnNavigation; /** @type {?} */ ModalOptions.prototype.nzViewContainerRef; /** * Reset the container element. * @deprecated Not supported. * \@breaking-change 10.0.0 * @type {?} */ ModalOptions.prototype.nzGetContainer; /** @type {?} */ ModalOptions.prototype.nzAfterOpen; /** @type {?} */ ModalOptions.prototype.nzAfterClose; /** @type {?} */ ModalOptions.prototype.nzIconType; } /** * @record * @template T */ function ModalButtonOptions() { } if (false) { /** @type {?} */ ModalButtonOptions.prototype.label; /** @type {?|undefined} */ ModalButtonOptions.prototype.type; /** @type {?|undefined} */ ModalButtonOptions.prototype.shape; /** @type {?|undefined} */ ModalButtonOptions.prototype.ghost; /** @type {?|undefined} */ ModalButtonOptions.prototype.size; /** @type {?|undefined} */ ModalButtonOptions.prototype.autoLoading; /** @type {?|undefined} */ ModalButtonOptions.prototype.show; /** @type {?|undefined} */ ModalButtonOptions.prototype.loading; /** @type {?|undefined} */ ModalButtonOptions.prototype.disabled; /* Skipping unhandled member: [key: string]: NzSafeAny;*/ /** * @this {?} * @param {?=} contentComponentInstance * @return {?} */ ModalButtonOptions.prototype.onClick = function (contentComponentInstance) { }; } /** * @fileoverview added by tsickle * Generated from: modal-config.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @record */ function NzModalConfig() { } if (false) { /** @type {?|undefined} */ NzModalConfig.prototype.nzMask; /** @type {?|undefined} */ NzModalConfig.prototype.nzMaskClosable; } /** @type {?} */ var NZ_MODAL_CONFIG = new InjectionToken('NZ_MODAL_CONFIG'); /** @type {?} */ var ZOOM_CLASS_NAME_MAP = { enter: 'zoom-enter', enterActive: 'zoom-enter-active', leave: 'zoom-leave', leaveActive: 'zoom-leave-active' }; /** @type {?} */ var FADE_CLASS_NAME_MAP = { enter: 'fade-enter', enterActive: 'fade-enter-active', leave: 'fade-leave', leaveActive: 'fade-leave-active' }; /** @type {?} */ var MODAL_MASK_CLASS_NAME = 'ant-modal-mask'; /** * @fileoverview added by tsickle * Generated from: modal-animations.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** @type {?} */ var nzModalAnimations = { modalContainer: trigger('modalContainer', [ state('void, exit', style({})), state('enter', style({})), transition('* => enter', animate('.24s', style({}))), transition('* => void, * => exit', animate('.2s', style({}))) ]) }; /** * @fileoverview added by tsickle * Generated from: modal-container.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @return {?} */ function throwNzModalContentAlreadyAttachedError() { throw Error('Attempting to attach modal content after content is already attached'); } var BaseModalContainer = /** @class */ (function (_super) { __extends(BaseModalContainer, _super); function BaseModalContainer(elementRef, focusTrapFactory, cdr, render, zone, overlayRef, config, document, animationType) { var _this = _super.call(this) || this; _this.elementRef = elementRef; _this.focusTrapFactory = focusTrapFactory; _this.cdr = cdr; _this.render = render; _this.zone = zone; _this.overlayRef = overlayRef; _this.config = config; _this.animationType = animationType; _this.animationStateChanged = new EventEmitter(); _this.containerClick = new EventEmitter(); _this.cancelTriggered = new EventEmitter(); _this.okTriggered = new EventEmitter(); _this.state = 'enter'; _this.isStringContent = false; _this.elementFocusedBeforeModalWasOpened = null; _this.latestMousedownTarget = null; _this.oldMaskStyle = null; _this.document = document; _this.isStringContent = typeof config.nzContent === 'string'; _this.setContainer(); return _this; } /** * @param {?} e * @return {?} */ BaseModalContainer.prototype.onMousedown = /** * @param {?} e * @return {?} */ function (e) { this.latestMousedownTarget = ((/** @type {?} */ (e.target))) || null; }; /** * @param {?} e * @return {?} */ BaseModalContainer.prototype.onMouseup = /** * @param {?} e * @return {?} */ function (e) { if (e.target === this.latestMousedownTarget && e.target === this.elementRef.nativeElement) { this.containerClick.emit(); } this.latestMousedownTarget = null; }; /** * @return {?} */ BaseModalContainer.prototype.onCloseClick = /** * @return {?} */ function () { this.cancelTriggered.emit(); }; /** * @return {?} */ BaseModalContainer.prototype.onOkClick = /** * @return {?} */ function () { this.okTriggered.emit(); }; /** * @template T * @param {?} portal * @return {?} */ BaseModalContainer.prototype.attachComponentPortal = /** * @template T * @param {?} portal * @return {?} */ function (portal) { if (this.portalOutlet.hasAttached()) { throwNzModalContentAlreadyAttachedError(); } this.savePreviouslyFocusedElement(); this.setModalTransformOrigin(); return this.portalOutlet.attachComponentPortal(portal); }; /** * @template C * @param {?} portal * @return {?} */ BaseModalContainer.prototype.attachTemplatePortal = /** * @template C * @param {?} portal * @return {?} */ function (portal) { if (this.portalOutlet.hasAttached()) { throwNzModalContentAlreadyAttachedError(); } this.savePreviouslyFocusedElement(); return this.portalOutlet.attachTemplatePortal(portal); }; /** * @return {?} */ BaseModalContainer.prototype.getNativeElement = /** * @return {?} */ function () { return this.elementRef.nativeElement; }; /** * @private * @return {?} */ BaseModalContainer.prototype.animationDisabled = /** * @private * @return {?} */ function () { return this.config.nzNoAnimation || this.animationType === 'NoopAnimations'; }; /** * @private * @return {?} */ BaseModalContainer.prototype.setModalTransformOrigin = /** * @private * @return {?} */ function () { /** @type {?} */ var modalElement = this.modalElementRef.nativeElement; if ((/** @type {?} */ (this.elementFocusedBeforeModalWasOpened))) { /** @type {?} */ var previouslyDOMRect = (/** @type {?} */ (this.elementFocusedBeforeModalWasOpened)).getBoundingClientRect(); /** @type {?} */ var lastPosition = getElementOffset((/** @type {?} */ (this.elementFocusedBeforeModalWasOpened))); /** @type {?} */ var x = lastPosition.left + previouslyDOMRect.width / 2; /** @type {?} */ var y = lastPosition.top + previouslyDOMRect.height / 2; /** @type {?} */ var transformOrigin = x - modalElement.offsetLeft + "px " + (y - modalElement.offsetTop) + "px 0px"; this.render.setStyle(modalElement, 'transform-origin', transformOrigin); } }; /** * @private * @return {?} */ BaseModalContainer.prototype.savePreviouslyFocusedElement = /** * @private * @return {?} */ function () { var _this = this; if (this.document) { this.elementFocusedBeforeModalWasOpened = (/** @type {?} */ (this.document.activeElement)); if (this.elementRef.nativeElement.focus) { Promise.resolve().then((/** * @return {?} */ function () { return _this.elementRef.nativeElement.focus(); })); } } }; /** * @private * @return {?} */ BaseModalContainer.prototype.trapFocus = /** * @private * @return {?} */ function () { /** @type {?} */ var element = this.elementRef.nativeElement; if (!this.focusTrap) { this.focusTrap = this.focusTrapFactory.create(element); } if (this.config.nzAutofocus) { this.focusTrap.focusInitialElementWhenReady().then(); } else { /** @type {?} */ var activeElement = this.document.activeElement; if (activeElement !== element && !element.contains(activeElement)) { element.focus(); } } }; /** * @private * @return {?} */ BaseModalContainer.prototype.restoreFocus = /** * @private * @return {?} */ function () { /** @type {?} */ var toFocus = (/** @type {?} */ (this.elementFocusedBeforeModalWasOpened)); // We need the extra check, because IE can set the `activeElement` to null in some cases. if (toFocus && typeof toFocus.focus === 'function') { /** @type {?} */ var activeElement = (/** @type {?} */ (this.document.activeElement)); /** @type {?} */ var element = this.elementRef.nativeElement; if (!activeElement || activeElement === this.document.body || activeElement === element || element.contains(activeElement)) { toFocus.focus(); } } if (this.focusTrap) { this.focusTrap.destroy(); } }; /** * @private * @return {?} */ BaseModalContainer.prototype.setEnterAnimationClass = /** * @private * @return {?} */ function () { var _this = this; if (this.animationDisabled()) { return; } this.zone.runOutsideAngular((/** * @return {?} */ function () { // Make sure to set the `TransformOrigin` style before set the modelElement's class names _this.setModalTransformOrigin(); /** @type {?} */ var modalElement = _this.modalElementRef.nativeElement; /** @type {?} */ var backdropElement = _this.overlayRef.backdropElement; _this.render.addClass(modalElement, ZOOM_CLASS_NAME_MAP.enter); _this.render.addClass(modalElement, ZOOM_CLASS_NAME_MAP.enterActive); _this.render.addClass(backdropElement, FADE_CLASS_NAME_MAP.enter); _this.render.addClass(backdropElement, FADE_CLASS_NAME_MAP.enterActive); })); }; /** * @private * @return {?} */ BaseModalContainer.prototype.setExitAnimationClass = /** * @private * @return {?} */ function () { var _this = this; this.zone.runOutsideAngular((/** * @return {?} */ function () { /** @type {?} */ var modalElement = _this.modalElementRef.nativeElement; /** @type {?} */ var backdropElement = _this.overlayRef.backdropElement; if (_this.animationDisabled()) { // https://github.com/angular/components/issues/18645 _this.render.removeClass(backdropElement, MODAL_MASK_CLASS_NAME); return; } _this.render.addClass(modalElement, ZOOM_CLASS_NAME_MAP.leave); _this.render.addClass(modalElement, ZOOM_CLASS_NAME_MAP.leaveActive); _this.render.addClass(backdropElement, FADE_CLASS_NAME_MAP.leave); _this.render.addClass(backdropElement, FADE_CLASS_NAME_MAP.leaveActive); })); }; /** * @private * @return {?} */ BaseModalContainer.prototype.cleanAnimationClass = /** * @private * @return {?} */ function () { var _this = this; if (this.animationDisabled()) { return; } this.zone.runOutsideAngular((/** * @return {?} */ function () { /** @type {?} */ var backdropElement = _this.overlayRef.backdropElement; /** @type {?} */ var modalElement = _this.modalElementRef.nativeElement; _this.render.removeClass(modalElement, ZOOM_CLASS_NAME_MAP.enter); _this.render.removeClass(modalElement, ZOOM_CLASS_NAME_MAP.enterActive); _this.render.removeClass(modalElement, ZOOM_CLASS_NAME_MAP.leave); _this.render.removeClass(modalElement, ZOOM_CLASS_NAME_MAP.leaveActive); _this.render.removeClass(backdropElement, FADE_CLASS_NAME_MAP.enter); _this.render.removeClass(backdropElement, FADE_CLASS_NAME_MAP.enterActive); })); }; /** * @private * @return {?} */ BaseModalContainer.prototype.bindBackdropStyle = /** * @private * @return {?} */ function () { var _this = this; this.zone.runOutsideAngular((/** * @return {?} */ function () { if (_this.oldMaskStyle) { /** @type {?} */ var backdropElement_1 = _this.overlayRef.backdropElement; /** @type {?} */ var styles = (/** @type {?} */ (_this.oldMaskStyle)); Object.keys(styles).forEach((/** * @param {?} key * @return {?} */ function (key) { _this.render.removeStyle(backdropElement_1, key); })); _this.oldMaskStyle = null; } if (typeof _this.config.nzMaskStyle === 'object' && Object.keys(_this.config.nzMaskStyle).length) { /** @type {?} */ var backdropElement_2 = _this.overlayRef.backdropElement; /** @type {?} */ var styles_1 = __assign({}, _this.config.nzMaskStyle); Object.keys(styles_1).forEach((/** * @param {?} key * @return {?} */ function (key) { _this.render.setStyle(backdropElement_2, key, styles_1[key]); })); _this.oldMaskStyle = styles_1; } })); }; /** * Set the container element. * @deprecated Not supported. * @breaking-change 10.0.0 */ /** * Set the container element. * @deprecated Not supported. * \@breaking-change 10.0.0 * @private * @return {?} */ BaseModalContainer.prototype.setContainer = /** * Set the container element. * @deprecated Not supported. * \@breaking-change 10.0.0 * @private * @return {?} */ function () { /** @type {?} */ var container = this.getContainer(); if (container) { this.render.appendChild(container, this.elementRef.nativeElement); } }; /** * Reset the container element. * @deprecated Not supported. * @breaking-change 10.0.0 */ /** * Reset the container element. * @deprecated Not supported. * \@breaking-change 10.0.0 * @private * @return {?} */ BaseModalContainer.prototype.resetContainer = /** * Reset the container element. * @deprecated Not supported. * \@breaking-change 10.0.0 * @private * @return {?} */ function () { /** @type {?} */ var container = this.getContainer(); if (container) { this.render.appendChild(this.overlayRef.overlayElement, this.elementRef.nativeElement); } }; /** * @private * @return {?} */ BaseModalContainer.prototype.getContainer = /** * @private * @return {?} */ function () { var nzGetContainer = this.config.nzGetContainer; /** @type {?} */ var container = typeof nzGetContainer === 'function' ? nzGetContainer() : nzGetContainer; return container instanceof HTMLElement ? container : null; }; /** * @param {?} event * @return {?} */ BaseModalContainer.prototype.onAnimationDone = /** * @param {?} event * @return {?} */ function (event) { if (event.toState === 'void') { return; } if (event.toState === 'enter') { this.setContainer(); this.trapFocus(); } else if (event.toState === 'exit') { this.restoreFocus(); } this.cleanAnimationClass(); this.animationStateChanged.emit(event); }; /** * @param {?} event * @return {?} */ BaseModalContainer.prototype.onAnimationStart = /** * @param {?} event * @return {?} */ function (event) { if (event.toState === 'enter') { this.setEnterAnimationClass(); this.bindBackdropStyle(); } else if (event.toState === 'exit') { this.resetContainer(); this.setExitAnimationClass(); } this.animationStateChanged.emit(event); }; /** * @return {?} */ BaseModalContainer.prototype.startExitAnimation = /** * @return {?} */ function () { this.state = 'exit'; this.cdr.markForCheck(); }; return BaseModalContainer; }(BasePortalOutlet)); if (false) { /** @type {?} */ BaseModalContainer.prototype.portalOutlet; /** @type {?} */ BaseModalContainer.prototype.modalElementRef; /** @type {?} */ BaseModalContainer.prototype.animationStateChanged; /** @type {?} */ BaseModalContainer.prototype.containerClick; /** @type {?} */ BaseModalContainer.prototype.cancelTriggered; /** @type {?} */ BaseModalContainer.prototype.okTriggered; /** @type {?} */ BaseModalContainer.prototype.state; /** @type {?} */ BaseModalContainer.prototype.document; /** @type {?} */ BaseModalContainer.prototype.modalRef; /** @type {?} */ BaseModalContainer.prototype.isStringContent; /** * @type {?} * @private */ BaseModalContainer.prototype.elementFocusedBeforeModalWasOpened; /** * @type {?} * @private */ BaseModalContainer.prototype.focusTrap; /** * @type {?} * @private */ BaseModalContainer.prototype.latestMousedownTarget; /** * @type {?} * @private */ BaseModalContainer.prototype.oldMaskStyle; /** * @type {?} * @protected */ BaseModalContainer.prototype.elementRef; /** * @type {?} * @protected */ BaseModalContainer.prototype.focusTrapFactory; /** @type {?} */ BaseModalContainer.prototype.cdr; /** * @type {?} * @protected */ BaseModalContainer.prototype.render; /** * @type {?} * @protected */ BaseModalContainer.prototype.zone; /** * @type {?} * @protected */ BaseModalContainer.prototype.overlayRef; /** @type {?} */ BaseModalContainer.prototype.config; /** * @type {?} * @protected */ BaseModalContainer.prototype.animationType; } /** * @fileoverview added by tsickle * Generated from: modal-confirm-container.component.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var NzModalConfirmContainerComponent = /** @class */ (function (_super) { __extends(NzModalConfirmContainerComponent, _super); function NzModalConfirmContainerComponent(i18n, elementRef, focusTrapFactory, cdr, render, zone, overlayRef, config, document, animationType) { var _this = _super.call(this, elementRef, focusTrapFactory, cdr, render, zone, overlayRef, config, document, animationType) || this; _this.i18n = i18n; _this.config = config; _this.cancelTriggered = new EventEmitter(); _this.okTriggered = new EventEmitter(); _this.locale = {}; _this.destroy$ = new Subject(); _this.i18n.localeChange.pipe(takeUntil(_this.destroy$)).subscribe((/** * @return {?} */ function () { _this.locale = _this.i18n.getLocaleData('Modal'); })); return _this; } /** * @return {?} */ NzModalConfirmContainerComponent.prototype.onCancel = /** * @return {?} */ function () { this.cancelTriggered.emit(); }; /** * @return {?} */ NzModalConfirmContainerComponent.prototype.onOk = /** * @return {?} */ function () { this.okTriggered.emit(); }; /** * @template T * @param {?} _portal * @return {?} */ NzModalConfirmContainerComponent.prototype.attachComponentPortal = /** * @template T * @param {?} _portal * @return {?} */ function (_portal) { throw new Error('The confirm mode does not support using component as content'); }; /** * @return {?} */ NzModalConfirmContainerComponent.prototype.ngOnDestroy = /** * @return {?} */ function () { this.destroy$.next(); this.destroy$.complete(); }; NzModalConfirmContainerComponent.decorators = [ { type: Component, args: [{ selector: 'nz-modal-confirm-container', exportAs: 'nzModalConfirmContainer', template: "\n <div\n #modalElement\n role=\"document\"\n class=\"ant-modal\"\n [ngClass]=\"config.nzClassName\"\n [ngStyle]=\"config.nzStyle\"\n [style.width]=\"config?.nzWidth | nzToCssUnit\"\n >\n <div class=\"ant-modal-content\">\n <button *ngIf=\"config.nzClosable\" nz-modal-close (click)=\"onCloseClick()\"></button>\n <div class=\"ant-modal-body\" [ngStyle]=\"config.nzBodyStyle\">\n <div class=\"ant-modal-confirm-body-wrapper\">\n <div class=\"ant-modal-confirm-body\">\n <i nz-icon [nzType]=\"config.nzIconType\"></i>\n <span class=\"ant-modal-confirm-title\">\n <ng-container *nzStringTemplateOutlet=\"config.nzTitle\">\n <span [innerHTML]=\"config.nzTitle\"></span>\n </ng-container>\n </span>\n <div class=\"ant-modal-confirm-content\">\n <ng-template cdkPortalOutlet></ng-template>\n <div *ngIf=\"isStringContent\" [innerHTML]=\"config.nzContent\"></div>\n </div>\n </div>\n <div class=\"ant-modal-confirm-btns\">\n <button\n *ngIf=\"config.nzCancelText !== null\"\n [attr.cdkFocusInitial]=\"config.nzAutofocus === 'cancel'\"\n nz-button\n (click)=\"onCancel()\"\n [nzLoading]=\"config.nzCancelLoading\"\n [disabled]=\"config.nzCancelDisabled\"\n >\n {{ config.nzCancelText || locale.cancelText }}\n </button>\n <button\n *ngIf=\"config.nzOkText !== null\"\n [attr.cdkFocusInitial]=\"config.nzAutofocus === 'ok'\"\n nz-button\n [nzType]=\"config.nzOkType\"\n (click)=\"onOk()\"\n [nzLoading]=\"config.nzOkLoading\"\n [disabled]=\"config.nzOkDisabled\"\n >\n {{ config.nzOkText || locale.okText }}\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n ", 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"', '[style.zIndex]': 'config.nzZIndex', '[@.disabled]': 'config.nzNoAnimation', '[@modalContainer]': 'state', '(@modalContainer.start)': 'onAnimationStart($event)', '(@modalContainer.done)': 'onAnimationDone($event)', '(mousedown)': 'onMousedown($event)', '(mouseup)': 'onMouseup($event)' } }] } ]; /** @nocollapse */ NzModalConfirmContainerComponent.ctorParameters = function () { return [ { type: NzI18nService }, { type: ElementRef }, { type: FocusTrapFactory }, { type: ChangeDetectorRef }, { type: Renderer2 }, { type: NgZone }, { type: OverlayRef }, { type: ModalOptions }, { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] }, { type: String, decorators: [{ type: Optional }, { type: Inject, args: [ANIMATION_MODULE_TYPE,] }] } ]; }; NzModalConfirmContainerComponent.propDecorators = { portalOutlet: [{ type: ViewChild, args: [CdkPortalOutlet, { static: true },] }], modalElementRef: [{ type: ViewChild, args: ['modalElement', { static: true },] }], cancelTriggered: [{ type: Output }], okTriggered: [{ type: Output }] }; return NzModalConfirmContainerComponent; }(BaseModalContainer)); if (false) { /** @type {?} */ NzModalConfirmContainerComponent.prototype.portalOutlet; /** @type {?} */ NzModalConfirmContainerComponent.prototype.modalElementRef; /** @type {?} */ NzModalConfirmContainerComponent.prototype.cancelTriggered; /** @type {?} */ NzModalConfirmContainerComponent.prototype.okTriggered; /** @type {?} */ NzModalConfirmContainerComponent.prototype.locale; /** * @type {?} * @private */ NzModalConfirmContainerComponent.prototype.destroy$; /** * @type {?} * @private */ NzModalConfirmContainerComponent.prototype.i18n; /** @type {?} */ NzModalConfirmContainerComponent.prototype.config; } /** * @fileoverview added by tsickle * Generated from: modal-container.component.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var NzModalContainerComponent = /** @class */ (function (_super) { __extends(NzModalContainerComponent, _super); function NzModalContainerComponent(elementRef, focusTrapFactory, cdr, render, zone, overlayRef, config, document, animationType) { var _this = _super.call(this, elementRef, focusTrapFactory, cdr, render, zone, overlayRef, config, document, animationType) || this; _this.config = config; return _this; } NzModalContainerComponent.decorators = [ { type: Component, args: [{ selector: 'nz-modal-container', exportAs: 'nzModalContainer', template: "\n <div\n #modalElement\n role=\"document\"\n class=\"ant-modal\"\n [ngClass]=\"config.nzClassName\"\n [ngStyle]=\"config.nzStyle\"\n [style.width]=\"config?.nzWidth | nzToCssUnit\"\n >\n <div class=\"ant-modal-content\">\n <button *ngIf=\"config.nzClosable\" nz-modal-close (click)=\"onCloseClick()\"></button>\n <div *ngIf=\"config.nzTitle\" nz-modal-title></div>\n <div class=\"ant-modal-body\" [ngStyle]=\"config.nzBodyStyle\">\n <ng-template cdkPortalOutlet></ng-template>\n <div *ngIf=\"isStringContent\" [innerHTML]=\"config.nzContent\"></div>\n </div>\n <div\n *ngIf=\"config.nzFooter !== null\"\n nz-modal-footer\n [modalRef]=\"modalRef\"\n (cancelTriggered)=\"onCloseClick()\"\n (okTriggered)=\"onOkClick()\"\n ></div>\n </div>\n </div>\n ", 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"', '[style.zIndex]': 'config.nzZIndex', '[@.disabled]': 'config.nzNoAnimation', '[@modalContainer]': 'state', '(@modalContainer.start)': 'onAnimationStart($event)', '(@modalContainer.done)': 'onAnimationDone($event)', '(mousedown)': 'onMousedown($event)', '(mouseup)': 'onMouseup($event)' } }] } ]; /** @nocollapse */ NzModalContainerComponent.ctorParameters = function () { return [ { type: ElementRef }, { type: FocusTrapFactory }, { type: ChangeDetectorRef }, { type: Renderer2 }, { type: NgZone }, { type: OverlayRef }, { type: ModalOptions }, { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] }, { type: String, decorators: [{ type: Optional }, { type: Inject, args: [ANIMATION_MODULE_TYPE,] }] } ]; }; NzModalContainerComponent.propDecorators = { portalOutlet: [{ type: ViewChild, args: [CdkPortalOutlet, { static: true },] }], modalElementRef: [{ type: ViewChild, args: ['modalElement', { static: true },] }] }; return NzModalContainerComponent; }(BaseModalContainer)); if (false) { /** @type {?} */ NzModalContainerComponent.prototype.portalOutlet; /** @type {?} */ NzModalContainerComponent.prototype.modalElementRef; /** @type {?} */ NzModalContainerComponent.prototype.config; } /** * @fileoverview added by tsickle * Generated from: modal-ref.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** @enum {number} */ var NzModalState = { OPEN: 0, CLOSING: 1, CLOSED: 2, }; /** @enum {string} */ var NzTriggerAction = { CANCEL: "cancel", OK: "ok", }; /** * @template T, R */ var /** * @template T, R */ NzModalRef = /** @class */ (function () { function NzModalRef(overlayRef, config, containerInstance) { var _this = this; this.overlayRef = overlayRef; this.config = config; this.containerInstance = containerInstance; this.state = 0 /* OPEN */; this.afterClose = new Subject(); this.afterOpen = new Subject(); containerInstance.animationStateChanged .pipe(filter((/** * @param {?} event * @return {?} */ function (event) { return event.phaseName === 'done' && event.toState === 'enter'; })), take(1)) .subscribe((/** * @return {?} */ function () { _this.afterOpen.next(); _this.afterOpen.complete(); if (config.nzAfterOpen instanceof EventEmitter) { config.nzAfterOpen.emit(); } })); containerInstance.animationStateChanged .pipe(filter((/** * @param {?} event * @return {?} */ function (event) { return event.phaseName === 'done' && event.toState === 'exit'; })), take(1)) .subscribe((/** * @return {?} */ function () { clearTimeout(_this.closeTimeout); _this.overlayRef.dispose(); })); containerInstance.containerClick.pipe(take(1)).subscribe((/** * @return {?} */ function () { /** @type {?} */ var cancelable = !_this.config.nzCancelLoading && !_this.config.nzOkLoading && config.nzMask && config.nzMaskClosable; if (cancelable) { _this.trigger("cancel" /* CANCEL */); } })); overlayRef .keydownEvents() .pipe(filter((/** * @param {?} event * @return {?} */ function (event) { return (((/** @type {?} */ (_this.config.nzKeyboard))) && !_this.config.nzCancelLoading && !_this.config.nzOkLoading && event.keyCode === ESCAPE && !hasModifierKey(event)); }))) .subscribe((/** * @param {?} event * @return {?} */ function (event) { event.preventDefault(); _this.trigger("cancel" /* CANCEL */); })); containerInstance.cancelTriggered.subscribe((/** * @return {?} */ function () { return _this.trigger("cancel" /* CANCEL */); })); containerInstance.okTriggered.subscribe((/** * @return {?} */ function () { return _this.trigger("ok" /* OK */); })); overlayRef.detachments().subscribe((/** * @return {?} */ function () { _this.afterClose.next(_this.result); _this.afterClose.complete(); if (config.nzAfterClose instanceof EventEmitter) { config.nzAfterClose.emit(_this.result); } _this.componentInstance = null; _this.overlayRef.dispose(); })); } /** * @return {?} */ NzModalRef.prototype.getContentComponent = /** * @return {?} */ function () { return (/** @type {?} */ (this.componentInstance)); }; /** * @return {?} */ NzModalRef.prototype.getElement = /** * @return {?} */ function () { return this.containerInstance.getNativeElement(); }; /** * @param {?=} result * @return {?} */ NzModalRef.prototype.destroy = /** * @param {?=} result * @return {?} */ function (result) { this.close(result); }; /** * @return {?} */ NzModalRef.prototype.triggerOk = /** * @return {?} */ function () { this.trigger("ok" /* OK */); }; /** * @return {?} */ NzModalRef.prototype.triggerCancel = /** * @return {?} */ function () { this.trigger("cancel" /* CANCEL */); }; /** * Open the modal. * @deprecated Opened when create, this method is useless. * @breaking-change 10.0.0 */ /** * Open the modal. * @deprecated Opened when create, this method is useless. * \@breaking-change 10.0.0 * @return {?} */ NzModalRef.prototype.open = /** * Open the modal. * @deprecated Opened when create, this method is useless. * \@breaking-change 10.0.0 * @return {?} */ function () { // noop }; /** * @param {?=} result * @return {?} */ NzModalRef.prototype.close = /** * @param {?=} result * @return {?} */ function (result) { var _this = this; this.result = result; this.containerInstance.animationStateChanged .pipe(filter((/** * @param {?} event * @return {?} */ function (event) { return event.phaseName === 'start'; })), take(1)) .subscribe((/** * @param {?} event * @return {?} */ function (event) { _this.state = 2 /* CLOSED */; _this.overlayRef.detachBackdrop(); _this.closeTimeout = setTimeout((/** * @return {?} */ function () { _this.overlayRef.dispose(); }), event.totalTime + 100); })); this.containerInstance.startExitAnimation(); this.state = 1 /* CLOSING */; }; /** * @param {?} config * @return {?} */ NzModalRef.prototype.updateConfig = /** * @param {?} config * @return {?} */ function (config) { Object.assign(this.config, config); this.containerInstance.cdr.markForCheck(); }; /** * @return {?} */ NzModalRef.prototype.getState = /** * @return {?} */ function () { return this.state; }; /** * @return {?} */ NzModalRef.prototype.getConfig = /** * @return {?} */ function () { return this.config; }; /** * @return {?} */ NzModalRef.prototype.getBackdropElement = /** * @return {?} */ function () { return this.overlayRef.backdropElement; }; /** * @private * @param {?} action * @return {?} */ NzModalRef.prototype.trigger = /** * @private * @param {?} action * @return {?} */ function (action) { var _this = this; /** @type {?} */ var trigger = { ok: this.config.nzOnOk, cancel: this.config.nzOnCancel }[action]; /** @type {?} */ var loadingKey = (/** @type {?} */ ({ ok: 'nzOkLoading', cancel: 'nzCancelLoading' }[action])); /** @type {?} */ var loading = this.config[loadingKey]; if (loading) { return; } if (trigger instanceof EventEmitter) { trigger.emit(this.getContentComponent()); } else if (typeof trigger === 'function') { /** @type {?} */ var result = trigger(this.getContentComponent()); /** @type {?} */ var caseClose = (/** * @param {?} doClose * @return {?} */ function (doClose) { return doClose !== false && _this.close((/** @type {?} */ (doClose))); }); if (isPromise(result)) { this.config[loadingKey] = true; /** @type {?} */ var handleThen = (/** * @param {?} doClose * @return {?} */ function (doClose) { _this.config[loadingKey] = false; _this.closeWhitResult(doClose); }); result.then(handleThen).catch(handleThen); } else { caseClose(result); } } }; /** * @private * @param {?} result * @return {?} */ NzModalRef.prototype.closeWhitResult = /** * @private * @param {?} result * @return {?} */ function (result) { if (result !== false) { this.close(result); } }; return NzModalRef; }()); if (false) { /** @type {?} */ NzModalRef.prototype.componentInstance; /** @type {?} */ NzModalRef.prototype.result; /** @type {?} */ NzModalRef.prototype.state; /** @type {?} */ NzModalRef.prototype.afterClose; /** @type {?} */ NzModalRef.prototype.afterOpen; /** * @type {?} * @private */ NzModalRef.prototype.closeTimeout; /** * @type {?} * @private */ NzModalRef.prototype.overlayRef; /** * @type {?} * @private */ NzModalRef.prototype.config; /** @type {?} */ NzModalRef.prototype.containerInstance; } /** * @fileoverview added by tsickle * Generated from: utils.ts * @suppress {checkTypes,constantProperty,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 */ /** * @param {?} config * @param {?} defaultOptions * @return {?} */ function applyConfigDefaults(config, defaultOptions) { return __assign(__assign({}, defaultOptions), config); } /** * Assign the params into the content component instance. * @deprecated Should use dependency injection to get the params for user * \@breaking-change 10.0.0 * @template T * @param {?} instance * @param {?} params * @return {?} */ function setContentInstanceParams(instance, params) { Object.assign(instance, params); } /** * @param {?} component * @return {?} */ function getConfigFromComponent(component) { var nzMask = component.nzMask, nzMaskClosable = component.nzMaskClosable, nzClosable = component.nzClosable, nzOkLoading = component.nzOkLoading, nzOkDisabled = component.nzOkDisabled, nzCancelDisabled = component.nzCancelDisabled, nzCancelLoading = component.nzCancelLoading, nzKeyboard = component.nzKeyboard, nzNoAnimation = component.nzNoAnimation, nzContent = component.nzContent, nzComponentParams = component.nzComponentParams, nzFooter = component.nzFooter, nzGetContainer = component.nzGetContainer, nzZIndex = component.nzZIndex, nzWidth = component.nzWidth, nzWrapClassName = component.nzWrapClassName, nzClassName = component.nzClassName, nzStyle = component.nzStyle, nzTitle = component.nzTitle, nzCloseIcon = component.nzCloseIcon, nzMaskStyle = component.nzMaskStyle, nzBodyStyle = component.nzBodyStyle, nzOkText = component.nzOkText, nzCancelText = component.nzCancelText, nzOkType = component.nzOkType, nzIconType = component.nzIconType, nzModalType = component.nzModalType, nzOnOk = component.nzOnOk, nzOnCancel = component.nzOnCancel, nzAfterOpen = component.nzAfterOpen, nzAfterClose = component.nzAfterClose; return { nzMask: nzMask, nzMaskClosable: nzMaskClosable, nzClosable: nzClosable, nzOkLoading: nzOkLoading, nzOkDisabled: nzOkDisabled, nzCancelDisabled: nzCancelDisabled, nzCancelLoading: nzCancelLoading, nzKeyboard: nzKeyboard, nzNoAnimation: nzNoAnimation, nzContent: nzContent, nzComponentParams: nzComponentParams, nzFooter: nzFooter, nzGetContainer: nzGetContainer, nzZIndex: nzZIndex, nzWidth: nzWidth, nzWrapClassName: nzWrapClassName, nzClassName: nzClassName, nzStyle: nzStyle, nzTitle: nzTitle, nzCloseIcon: nzCloseIcon, nzMaskStyle: nzMaskStyle, nzBodyStyle: nzBodyStyle, nzOkText: nzOkText, nzCancelText: nzCancelText, nzOkType: nzOkType, nzIconType: nzIconType, nzModalType: nzModalType, nzOnOk: nzOnOk, nzOnCancel: nzOnCancel, nzAfterOpen: nzAfterOpen, nzAfterClose: nzAfterClose }; } /** * @fileoverview added by tsickle * Generated from: modal.service.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var NzModalService = /** @class */ (function () { function NzModalService(overlay, injector, parentModal) { var _this = this; this.overlay = overlay; this.injector = injector; this.parentModal = parentModal; this.openModalsAtThisLevel = []; this.afterAllClosedAtThisLevel = new Subject(); this.afterAllClose = (/** @type {?} */ (defer((/** * @return {?} */ function () { return _this.openModals.length ? _this._afterAllClosed : _this._afterAllClosed.pipe(startWith(undefined)); })))); } Object.defineProperty(NzModalService.prototype, "openModals", { get: /** * @return {?} */ function () { return this.parentModal ? this.parentModal.openModals : this.openModalsAtThisLevel; }, enumerable: true, configurable: true }); Object.defineProperty(NzModalService.prototype, "_afterAllClosed", { get: /** * @return {?} */ function () { /** @type {?} */ var parent = this.parentModal; return parent ? parent._afterAllClosed : this.afterAllClosedAtThisLevel; }, enumerable: true, configurable: true }); /** * @template T, R * @param {?} config * @return {?} */ NzModalService.prototype.create = /** * @template T, R * @param {?} config * @return {?} */ function (config) { return this.open((/** @type {?} */ (config.nzContent)), config); }; /** * @return {?} */ NzModalService.prototype.closeAll = /** * @return {?} */ functio