import { Component, HostListener, ViewEncapsulation, Input, Output, EventEmitter, ViewChild, TemplateRef, ComponentFactory, ViewContainerRef } from '@angular/core';
import { NzModalSubject } from './nz-modal-subject.service';
import nzGlobalMonitor from '../util/nz-global-monitor';
var NzModalComponent = (function () {
    function NzModalComponent(subject, _vcr) {
        this.subject = subject;
        this._vcr = _vcr;
        this._prefixCls = 'ant-modal';
        this._visible = false;
        this._confirmLoading = false;
        this._closable = true;
        this._width = '520px';
        this._zIndex = 1000;
        this._maskClosable = true;
        this._title = '';
        this._content = '';
        this._okText = '确 定';
        this._cancelText = '取 消';
        this._style = {};
        this._wrapClass = this._prefixCls + "-wrap";
        this._customClass = '';
        this._animationStatus = '';
        this._componentParams = {};
        this._footerHide = false;
        this.modalId = "nzModal" + nzGlobalMonitor.getGlobalCount();
        this.nzVisibleChange = new EventEmitter();
        this.nzOnOk = new EventEmitter();
        this.nzOnCancel = new EventEmitter();
        this.subject.modalId = this.modalId;
    }
    Object.defineProperty(NzModalComponent.prototype, "nzVisible", {
        get: function () {
            return this._visible;
        },
        set: function (value) {
            var _this = this;
            // debugger
            if (this._visible === value) {
                return;
            }
            if (value) {
                this.anmiateFade('enter');
                this.subject.next('onShow');
                // 每次触发点击事件的时候，通过全局监听的类，记录下点击的位置，计算动画的origin
                setTimeout(function () {
                    _this.setStyles({
                        x: nzGlobalMonitor.lastClickPos.x || 0,
                        y: nzGlobalMonitor.lastClickPos.y || 0
                    });
                });
            }
            else {
                this.anmiateFade('leave');
                this.subject.next('onHide');
            }
            this._visible = value;
            this.nzVisibleChange.emit(this._visible);
            // 设置全局的overflow样式
            nzGlobalMonitor.setDocumentOverflowHidden(value);
        },
        enumerable: true,
        configurable: true
    });
    ;
    Object.defineProperty(NzModalComponent.prototype, "nzConfirmLoading", {
        set: function (value) {
            this._confirmLoading = value;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(NzModalComponent.prototype, "nzClosable", {
        set: function (value) {
            this._closable = value;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(NzModalComponent.prototype, "nzClass", {
        set: function (value) {
            this._customClass = value;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(NzModalComponent.prototype, "nzWidth", {
        set: function (value) {
            this._width = typeof value === 'number' ? value + 'px' : value;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(NzModalComponent.prototype, "nzZIndex", {
        set: function (value) {
            this._zIndex = value;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(NzModalComponent.prototype, "nzTitle", {
        set: function (value) {
            if (value instanceof TemplateRef) {
                this._titleTpl = value;
            }
            else {
                this._title = value;
            }
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(NzModalComponent.prototype, "nzContent", {
        set: function (value) {
            if (value instanceof ComponentFactory) {
                // 如果容器对象已存在，则直接渲染，如果不存在，则设置到_bodyComponent，在ngAfterViewInit中执行
                if (this.bodyEl) {
                    var compRef = this.bodyEl.createComponent(value, null, this._vcr.injector);
                    Object.assign(compRef.instance, this._componentParams);
                }
                else {
                    this._bodyComponent = value;
                }
            }
            else if (value instanceof TemplateRef) {
                this._contentTpl = value;
            }
            else {
                this._content = value;
            }
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(NzModalComponent.prototype, "nzFooter", {
        set: function (value) {
            if (value instanceof TemplateRef) {
                this._footerTpl = value;
            }
            else {
                this._footerHide = !value;
            }
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(NzModalComponent.prototype, "nzOkText", {
        set: function (value) {
            this._okText = value;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(NzModalComponent.prototype, "nzCancelText", {
        set: function (value) {
            this._cancelText = value;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(NzModalComponent.prototype, "nzMaskClosable", {
        set: function (value) {
            this._maskClosable = value;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(NzModalComponent.prototype, "nzStyle", {
        set: function (value) {
            this._style = value;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(NzModalComponent.prototype, "nzWrapClassName", {
        set: function (value) {
            if (value) {
                this._wrapClass = this._prefixCls + "-wrap " + value;
            }
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(NzModalComponent.prototype, "nzComponentParams", {
        set: function (value) {
            this._componentParams = value;
        },
        enumerable: true,
        configurable: true
    });
    NzModalComponent.prototype.onEsc = function (e) {
        this.clickCancel(e);
    };
    NzModalComponent.prototype.setStyles = function (origin) {
        var el = this.contentEl.nativeElement;
        var transformOrigin = origin ? origin.x - el.offsetLeft + "px " + (origin.y - el.offsetTop) + "px 0px" : '';
        this._bodyStyleMap = Object.assign({
            'width': this._width,
            'transform-origin': transformOrigin
        }, this._style);
    };
    NzModalComponent.prototype.setClassMap = function () {
        this._maskClassMap = (_a = {},
            _a[this._prefixCls + "-mask"] = true,
            _a[this._prefixCls + "-mask-hidden"] = !this._visible && !this._animationStatus,
            _a['fade-enter'] = this._animationStatus === 'enter',
            _a['fade-enter-active'] = this._animationStatus === 'enter',
            _a['fade-leave'] = this._animationStatus === 'leave',
            _a['fade-leave-active'] = this._animationStatus === 'leave',
            _a);
        this._bodyClassMap = (_b = {},
            _b[this._prefixCls] = true,
            _b['zoom-enter'] = this._animationStatus === 'enter',
            _b['zoom-enter-active'] = this._animationStatus === 'enter',
            _b['zoom-leave'] = this._animationStatus === 'leave',
            _b['zoom-leave-active'] = this._animationStatus === 'leave',
            _b);
        var _a, _b;
    };
    NzModalComponent.prototype.anmiateFade = function (status) {
        var _this = this;
        this._animationStatus = status;
        this.setClassMap();
        setTimeout(function (_) {
            _this._animationStatus = '';
            _this.setClassMap();
            _this.subject.next(status === 'enter' ? 'onShown' : 'onHidden');
            // modal打开后，默认焦点设置到modal上
            if (status === 'enter') {
                _this.contentEl.nativeElement.parentNode.focus();
            }
        }, 200);
    };
    NzModalComponent.prototype.closeFromMask = function (e) {
        if (this._maskClosable && e.target.getAttribute('role') === 'dialog') {
            this.clickCancel(e);
        }
    };
    NzModalComponent.prototype.setConfirmLoading = function (loading) {
        this.nzConfirmLoading = loading;
    };
    NzModalComponent.prototype.open = function () {
        this.nzVisible = true;
    };
    NzModalComponent.prototype.close = function () {
        this.nzVisible = false;
    };
    NzModalComponent.prototype.clickOk = function (e) {
        if (this.nzOnOk) {
            this.nzOnOk.emit(e);
        }
        else {
            this.nzVisible = false;
        }
        this.subject.next('onOk');
    };
    NzModalComponent.prototype.clickCancel = function (e) {
        this.nzOnCancel.emit(e);
        this.subject.next('onCancel');
    };
    NzModalComponent.prototype.ngOnInit = function () {
        this.setClassMap();
        this.setStyles();
    };
    NzModalComponent.prototype.ngAfterViewInit = function () {
        if (this._bodyComponent) {
            var compRef = this.bodyEl.createComponent(this._bodyComponent, null, this._vcr.injector);
            Object.assign(compRef.instance, this._componentParams);
        }
    };
    NzModalComponent.prototype.ngOnDestroy = function () {
        this.subject.next('onDestroy');
        this.subject.unsubscribe();
        this.subject = null;
    };
    return NzModalComponent;
}());
export { NzModalComponent };
NzModalComponent.decorators = [
    { type: Component, args: [{
                selector: 'nz-modal',
                viewProviders: [NzModalSubject],
                encapsulation: ViewEncapsulation.None,
                template: "\n    <div [ngClass]=\"_customClass\">\n      <div [ngClass]=\"_maskClassMap\"\n        [style.zIndex]=\"_zIndex\"></div>\n      <div tabindex=\"-1\" role=\"dialog\"\n        [attr.aria-labelledby]=\"modalId\"\n        (click)=\"closeFromMask($event)\"\n        [ngClass]=\"_wrapClass\"\n        [style.zIndex]=\"_zIndex\"\n        [ngStyle]=\"{ 'display': !_visible && !_animationStatus ? 'none' : '' }\">\n\n        <div #modal_content role=\"document\" [ngClass]=\"_bodyClassMap\" [ngStyle]=\"_bodyStyleMap\">\n          <div class=\"ant-modal-content\">\n            <ng-template [ngIf]=\"_closable\">\n              <button aria-label=\"Close\" class=\"ant-modal-close\" (click)=\"clickCancel($event)\">\n                <span class=\"ant-modal-close-x\"></span>\n              </button>\n            </ng-template>\n            <div class=\"ant-modal-header\" *ngIf=\"_title || _titleTpl\">\n              <div class=\"ant-modal-title\" [attr.id]=\"modalId\">\n                <ng-template #defaultTitle>{{ _title }}</ng-template>\n                <ng-template [ngTemplateOutlet]=\"_titleTpl || defaultTitle\"></ng-template>\n              </div>\n            </div>\n            <div class=\"ant-modal-body\">\n              <ng-template #defaultContent>{{ _content }}</ng-template>\n              <ng-template [ngTemplateOutlet]=\"_contentTpl || defaultContent\"></ng-template>\n              <ng-template #modal_component></ng-template>\n            </div>\n            <div class=\"ant-modal-footer\" *ngIf=\"!_footerHide\">\n              <ng-template #defaultFooter>\n                <button nz-button [nzType]=\"'ghost'\" [nzSize]=\"'large'\" (click)=\"clickCancel($event)\">\n                  <span>{{ _cancelText }}</span>\n                </button>\n                <button nz-button [nzType]=\"'primary'\" [nzSize]=\"'large'\" (click)=\"clickOk($event)\" [nzLoading]=\"_confirmLoading\">\n                  <span>{{ _okText }}</span>\n                </button>\n              </ng-template>\n              <ng-template [ngTemplateOutlet]=\"_footerTpl || defaultFooter\"></ng-template>\n            </div>\n          </div>\n        </div>\n        <div tabindex=\"0\" style=\"width: 0px; height: 0px; overflow: hidden;\">sentinel</div>\n      </div>\n    </div>\n  ",
                styles: [
                    "/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */\n/* stylelint-disable declaration-bang-space-before */\n/* stylelint-disable declaration-bang-space-before */\n.ant-modal {\n  position: relative;\n  width: auto;\n  margin: 0 auto;\n  top: 100px;\n  padding-bottom: 24px;\n}\n.ant-modal-wrap {\n  position: fixed;\n  overflow: auto;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1000;\n  -webkit-overflow-scrolling: touch;\n  outline: 0;\n}\n.ant-modal-title {\n  margin: 0;\n  font-size: 14px;\n  line-height: 21px;\n  font-weight: 500;\n  color: rgba(0, 0, 0, 0.85);\n}\n.ant-modal-content {\n  position: relative;\n  background-color: #fff;\n  border: 0;\n  border-radius: 4px;\n  background-clip: padding-box;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n}\n.ant-modal-close {\n  cursor: pointer;\n  border: 0;\n  background: transparent;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 10;\n  font-weight: 700;\n  line-height: 1;\n  text-decoration: none;\n  transition: color .3s ease;\n  color: rgba(0, 0, 0, 0.43);\n  outline: 0;\n}\n.ant-modal-close-x {\n  display: block;\n  font-style: normal;\n  vertical-align: baseline;\n  text-align: center;\n  text-transform: none;\n  text-rendering: auto;\n  width: 48px;\n  height: 48px;\n  line-height: 48px;\n  font-size: 14px;\n}\n.ant-modal-close-x:before {\n  content: \"\\e633\";\n  display: block;\n  font-family: \"anticon\" !important;\n}\n.ant-modal-close:focus,\n.ant-modal-close:hover {\n  color: #444;\n  text-decoration: none;\n}\n.ant-modal-header {\n  padding: 13px 16px;\n  border-radius: 4px 4px 0 0;\n  background: #fff;\n  color: rgba(0, 0, 0, 0.65);\n  border-bottom: 1px solid #e9e9e9;\n}\n.ant-modal-body {\n  padding: 16px;\n  font-size: 12px;\n  line-height: 1.5;\n}\n.ant-modal-footer {\n  border-top: 1px solid #e9e9e9;\n  padding: 10px 16px 10px 10px;\n  text-align: right;\n  border-radius: 0 0 4px 4px;\n}\n.ant-modal-footer button + button {\n  margin-left: 8px;\n  margin-bottom: 0;\n}\n.ant-modal.zoom-enter,\n.ant-modal.zoom-appear {\n  animation-duration: 0.3s;\n  transform: none;\n  opacity: 0;\n}\n.ant-modal-mask {\n  position: fixed;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  background-color: #373737;\n  background-color: rgba(55, 55, 55, 0.6);\n  height: 100%;\n  z-index: 1000;\n  filter: alpha(opacity=50);\n}\n.ant-modal-mask-hidden {\n  display: none;\n}\n.ant-modal-open {\n  overflow: hidden;\n}\n@media (max-width: 768px) {\n  .ant-modal {\n    width: auto !important;\n    margin: 10px;\n  }\n  .vertical-center-modal .ant-modal {\n    flex: 1;\n  }\n}\n.ant-confirm .ant-modal-header {\n  display: none;\n}\n.ant-confirm .ant-modal-close {\n  display: none;\n}\n.ant-confirm .ant-modal-body {\n  padding: 30px 40px;\n}\n.ant-confirm-body-wrapper {\n  zoom: 1;\n}\n.ant-confirm-body-wrapper:before,\n.ant-confirm-body-wrapper:after {\n  content: \" \";\n  display: table;\n}\n.ant-confirm-body-wrapper:after {\n  clear: both;\n  visibility: hidden;\n  font-size: 0;\n  height: 0;\n}\n.ant-confirm-body .ant-confirm-title {\n  color: rgba(0, 0, 0, 0.65);\n  font-weight: bold;\n  font-size: 14px;\n}\n.ant-confirm-body .ant-confirm-content {\n  margin-left: 42px;\n  font-size: 12px;\n  color: rgba(0, 0, 0, 0.65);\n  margin-top: 8px;\n}\n.ant-confirm-body > .anticon {\n  font-size: 24px;\n  margin-right: 16px;\n  padding: 0 1px;\n  float: left;\n}\n.ant-confirm .ant-confirm-btns {\n  margin-top: 30px;\n  float: right;\n}\n.ant-confirm .ant-confirm-btns button + button {\n  margin-left: 10px;\n  margin-bottom: 0;\n}\n.ant-confirm-error .ant-confirm-body > .anticon {\n  color: #f04134;\n}\n.ant-confirm-warning .ant-confirm-body > .anticon,\n.ant-confirm-confirm .ant-confirm-body > .anticon {\n  color: #ffbf00;\n}\n.ant-confirm-info .ant-confirm-body > .anticon {\n  color: #108ee9;\n}\n.ant-confirm-success .ant-confirm-body > .anticon {\n  color: #00a854;\n}\n"
                ]
            },] },
];
/** @nocollapse */
NzModalComponent.ctorParameters = function () { return [
    { type: NzModalSubject, },
    { type: ViewContainerRef, },
]; };
NzModalComponent.propDecorators = {
    'contentEl': [{ type: ViewChild, args: ['modal_content',] },],
    'bodyEl': [{ type: ViewChild, args: ['modal_component', { read: ViewContainerRef },] },],
    'nzVisible': [{ type: Input },],
    'nzConfirmLoading': [{ type: Input },],
    'nzClosable': [{ type: Input },],
    'nzClass': [{ type: Input },],
    'nzWidth': [{ type: Input },],
    'nzZIndex': [{ type: Input },],
    'nzTitle': [{ type: Input },],
    'nzContent': [{ type: Input },],
    'nzFooter': [{ type: Input },],
    'nzOkText': [{ type: Input },],
    'nzCancelText': [{ type: Input },],
    'nzMaskClosable': [{ type: Input },],
    'nzStyle': [{ type: Input },],
    'nzWrapClassName': [{ type: Input },],
    'nzComponentParams': [{ type: Input },],
    'nzVisibleChange': [{ type: Output },],
    'nzOnOk': [{ type: Output },],
    'nzOnCancel': [{ type: Output },],
    'onEsc': [{ type: HostListener, args: ['keydown.esc', ['$event'],] },],
};
