import { DOCUMENT } from '@angular/common';
import { Component, ElementRef, Inject, Input, Renderer2, ViewChild } from '@angular/core';
import { backdropFadeInOut, wipeInOutAnimation } from 'ng-devui/utils';
import { isUndefined } from 'lodash-es';
import { fromEvent, Subscription } from 'rxjs';
import { ModalContainerDirective } from './modal.directive';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "./modal.directive";
import * as i3 from "./movable.directive";
export class ModalComponent {
    constructor(elementRef, renderer, doc) {
        this.elementRef = elementRef;
        this.renderer = renderer;
        this.doc = doc;
        this.showAnimation = true;
        this.placement = 'center';
        this.bodyScrollable = true; // 打开弹窗body是否可滚动
        this.animateState = '';
        this.ignoreBackDropClick = false;
        this.pressEscToClose = new Subscription();
        this.onModalClick = ($event) => {
            // 一定要document.contains($event.target)，因为$event.target可能已经不在document里了，这个时候就不能进hide了,使用document.body兼容IE
            if (this.backdropCloseable && !this.ignoreBackDropClick &&
                (!this.dialogElement.nativeElement.contains($event.target) && this.document.body.contains($event.target))) {
                this.hide();
            }
            this.ignoreBackDropClick = false;
        };
        this.modalMouseDown = ($event) => {
            this.mouseDwonEl = $event.target;
        };
        this.modalMouseUp = ($event) => {
            if ($event.target !== this.mouseDwonEl) {
                this.ignoreBackDropClick = true;
            }
        };
        this.backdropCloseable = isUndefined(this.backdropCloseable)
            ? true
            : this.backdropCloseable;
        this.document = this.doc;
    }
    /**
     * @deprecated Use showAnimation to replace.
     */
    set showAnimate(isShowAnimate) {
        this.showAnimation = isShowAnimate;
    }
    ngOnInit() {
        if (this.escapable) {
            this.pressEscToClose.add(fromEvent(window, 'keydown').subscribe((event) => {
                if (event['keyCode'] === 27) {
                    this.hide();
                }
            }));
        }
        const handle = this.elementRef.nativeElement.querySelector('#d-modal-header');
        if (handle) {
            this.draggableHandleEl = handle;
        }
    }
    // Will overwrite this method in modal service
    onHidden() {
    }
    updateButtonOptions(buttonOptions) {
    }
    canHideModel() {
        let hiddenResult = Promise.resolve(true);
        if (this.beforeHidden) {
            const result = this.beforeHidden();
            if (typeof result !== 'undefined') {
                if (result.then) {
                    hiddenResult = result;
                }
                else if (result.subscribe) {
                    hiddenResult = result.toPromise();
                }
                else {
                    hiddenResult = Promise.resolve(result);
                }
            }
        }
        return hiddenResult;
    }
    hide() {
        this.canHideModel().then((canHide) => {
            if (!canHide) {
                return;
            }
            this.animateState = 'void';
        });
    }
    onAnimationEnd($event) {
        if ($event.fromState !== 'void' && this.animateState === 'void') {
            this.onHidden();
        }
    }
    show() {
        if (this.document.documentElement.scrollHeight > this.document.documentElement.clientHeight) {
            this.documentOverFlow = true;
            this.scrollTop = this.document.documentElement.scrollTop || this.document.body.scrollTop;
            this.scrollLeft = this.document.documentElement.scrollLeft || this.document.body.scrollLeft;
            this.renderer.addClass(this.document.body, 'devui-body-scrollblock');
            this.renderer.setStyle(this.document.body, 'top', `-${this.scrollTop}px`);
            this.renderer.setStyle(this.document.body, 'left', `-${this.scrollLeft}px`);
        }
        if (!this.bodyScrollable && this.documentOverFlow) {
            this.renderer.addClass(this.document.body, 'devui-body-overflow-hidden');
        }
        this.dialogElement.nativeElement.focus();
        if (this.showAnimation) {
            this.animateState = 'in';
        }
    }
    resolveTransformTranslate() {
        let autoOffsetYByPlacement;
        switch (this.placement) {
            case 'top':
                autoOffsetYByPlacement = '40px';
                break;
            case 'bottom':
                autoOffsetYByPlacement = '-40px';
                break;
            case 'center':
            default:
                autoOffsetYByPlacement = '0';
                break;
        }
        const offsetX = this.offsetX ? this.offsetX : '0';
        const offsetY = this.offsetY ? this.offsetY : autoOffsetYByPlacement;
        return 'translate(' + offsetX + ',' + offsetY + ')';
    }
    ngOnDestroy() {
        if (this.pressEscToClose) {
            this.pressEscToClose.unsubscribe();
            this.pressEscToClose = null;
        }
    }
}
ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ModalComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: ModalComponent, selector: "d-modal", inputs: { id: "id", showAnimation: "showAnimation", showAnimate: "showAnimate", width: "width", zIndex: "zIndex", backDropZIndex: "backDropZIndex", backdropCloseable: "backdropCloseable", beforeHidden: "beforeHidden", draggable: "draggable", placement: "placement", offsetX: "offsetX", offsetY: "offsetY", bodyScrollable: "bodyScrollable", escapable: "escapable" }, viewQueries: [{ propertyName: "modalContainerHost", first: true, predicate: ModalContainerDirective, descendants: true, static: true }, { propertyName: "dialogElement", first: true, predicate: ["dialog"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"modal-backdrop\" [ngStyle]=\"{ 'z-index': backDropZIndex }\" [@backdropAnimation]=\"animateState\"></div>\n<div\n  class=\"modal in\"\n  [ngStyle]=\"{ 'z-index': zIndex }\"\n  [attr.id]=\"id\"\n  (mousedown)=\"modalMouseDown($event)\"\n  (mouseup)=\"modalMouseUp($event)\"\n  (click)=\"onModalClick($event)\"\n>\n  <div\n    class=\"modal-dialog\"\n    [ngClass]=\"{\n      'place-at-top': placement === 'top',\n      'place-at-bottom': placement === 'bottom',\n      'place-at-center': placement === 'center'\n    }\"\n    [ngStyle]=\"{ width: width }\"\n    [@wipeInOutAnimation]=\"animateState\"\n    (@wipeInOutAnimation.done)=\"onAnimationEnd($event)\"\n    tabindex=\"1\"\n    #dialog\n  >\n    <div class=\"modal-content\" [dMovable]=\"draggable\" [handle]=\"draggableHandleEl\" [ngStyle]=\"{ transform: resolveTransformTranslate() }\">\n      <ng-template dModalContainerHost></ng-template>\n      <ng-container *ngIf=\"contentTemplate\">\n        <ng-template [ngTemplateOutlet]=\"contentTemplate\" [ngTemplateOutletContext]=\"{ modalInstance: this }\"></ng-template>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;z-index:var(--devui-z-index-modal, 1050);outline:0;overflow-y:auto;display:block;display:flex;flex-direction:column}.devui-body-scrollblock .modal{overflow-x:hidden;overflow-y:auto}.modal-dialog{position:relative;width:auto;margin:0 auto}.modal-dialog.place-at-center{margin:auto}.modal-dialog.place-at-top{margin-bottom:auto}.modal-dialog.place-at-bottom{margin-top:auto}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1049;z-index:calc(var(--devui-z-index-modal, 1050) - 1);background-color:#252b3a33;background-color:var(--devui-shadow, rgba(37, 43, 58, .2))}:host ::ng-deep .modal-content{position:relative;border-radius:6px;border-radius:var(--devui-border-radius-card, 6px);border:none;background-color:#fff;background-color:var(--devui-fullscreen-overlay-bg, #ffffff);background-clip:padding-box;outline:0;box-shadow:0 12px 24px #252b3a33;box-shadow:var(--devui-shadow-length-fullscreen-overlay, 0 12px 24px 0) var(--devui-shadow, rgba(37, 43, 58, .2))}:host ::ng-deep .modal-content .modal-body{padding:20px;color:#575d6c;color:var(--devui-text-weak, #575d6c)}:host ::ng-deep .modal-content .modal-footer{border-top:none;text-align:center;padding:0 20px 20px}:host ::ng-deep .modal-content .modal-footer button{margin:0 5px;width:auto}:host ::ng-deep .modal-content .modal-footer button.pull-left{padding-left:5px;padding-right:5px;position:relative;left:-5px}:host ::ng-deep .modal-content .modal-footer button+button{margin-bottom:16px}:host ::ng-deep .d-btn{display:inline-block;margin-bottom:0;font-weight:400;text-align:center;vertical-align:middle;touch-action:manipulation;cursor:pointer;background-image:none;white-space:nowrap;font-size:14px;font-size:var(--devui-font-size-card-title, 14px);line-height:1.42857143;border-radius:2px;border-radius:var(--devui-border-radius, 2px);-webkit-user-select:none;-moz-user-select:none;user-select:none}:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.ModalContainerDirective, selector: "[dModalContainerHost]" }, { kind: "directive", type: i3.MovableDirective, selector: "[dMovable]", inputs: ["handle", "moveEl", "dMovable"] }], animations: [
        backdropFadeInOut,
        wipeInOutAnimation
    ] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ModalComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-modal', animations: [
                        backdropFadeInOut,
                        wipeInOutAnimation
                    ], preserveWhitespaces: false, template: "<div class=\"modal-backdrop\" [ngStyle]=\"{ 'z-index': backDropZIndex }\" [@backdropAnimation]=\"animateState\"></div>\n<div\n  class=\"modal in\"\n  [ngStyle]=\"{ 'z-index': zIndex }\"\n  [attr.id]=\"id\"\n  (mousedown)=\"modalMouseDown($event)\"\n  (mouseup)=\"modalMouseUp($event)\"\n  (click)=\"onModalClick($event)\"\n>\n  <div\n    class=\"modal-dialog\"\n    [ngClass]=\"{\n      'place-at-top': placement === 'top',\n      'place-at-bottom': placement === 'bottom',\n      'place-at-center': placement === 'center'\n    }\"\n    [ngStyle]=\"{ width: width }\"\n    [@wipeInOutAnimation]=\"animateState\"\n    (@wipeInOutAnimation.done)=\"onAnimationEnd($event)\"\n    tabindex=\"1\"\n    #dialog\n  >\n    <div class=\"modal-content\" [dMovable]=\"draggable\" [handle]=\"draggableHandleEl\" [ngStyle]=\"{ transform: resolveTransformTranslate() }\">\n      <ng-template dModalContainerHost></ng-template>\n      <ng-container *ngIf=\"contentTemplate\">\n        <ng-template [ngTemplateOutlet]=\"contentTemplate\" [ngTemplateOutletContext]=\"{ modalInstance: this }\"></ng-template>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".devui-font-size-base{font-size:12px;font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:12px;font-size:var(--devui-font-size, 12px);font-weight:400;line-height:1.5}.devui-font-size-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:18px;font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;line-height:1.5}.devui-font-size-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:16px;font-size:var(--devui-font-size-page-title, 16px);font-weight:700;line-height:1.5}.devui-font-size-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:14px;font-size:var(--devui-font-size-card-title, 14px);font-weight:700;line-height:1.5}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;z-index:var(--devui-z-index-modal, 1050);outline:0;overflow-y:auto;display:block;display:flex;flex-direction:column}.devui-body-scrollblock .modal{overflow-x:hidden;overflow-y:auto}.modal-dialog{position:relative;width:auto;margin:0 auto}.modal-dialog.place-at-center{margin:auto}.modal-dialog.place-at-top{margin-bottom:auto}.modal-dialog.place-at-bottom{margin-top:auto}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1049;z-index:calc(var(--devui-z-index-modal, 1050) - 1);background-color:#252b3a33;background-color:var(--devui-shadow, rgba(37, 43, 58, .2))}:host ::ng-deep .modal-content{position:relative;border-radius:6px;border-radius:var(--devui-border-radius-card, 6px);border:none;background-color:#fff;background-color:var(--devui-fullscreen-overlay-bg, #ffffff);background-clip:padding-box;outline:0;box-shadow:0 12px 24px #252b3a33;box-shadow:var(--devui-shadow-length-fullscreen-overlay, 0 12px 24px 0) var(--devui-shadow, rgba(37, 43, 58, .2))}:host ::ng-deep .modal-content .modal-body{padding:20px;color:#575d6c;color:var(--devui-text-weak, #575d6c)}:host ::ng-deep .modal-content .modal-footer{border-top:none;text-align:center;padding:0 20px 20px}:host ::ng-deep .modal-content .modal-footer button{margin:0 5px;width:auto}:host ::ng-deep .modal-content .modal-footer button.pull-left{padding-left:5px;padding-right:5px;position:relative;left:-5px}:host ::ng-deep .modal-content .modal-footer button+button{margin-bottom:16px}:host ::ng-deep .d-btn{display:inline-block;margin-bottom:0;font-weight:400;text-align:center;vertical-align:middle;touch-action:manipulation;cursor:pointer;background-image:none;white-space:nowrap;font-size:14px;font-size:var(--devui-font-size-card-title, 14px);line-height:1.42857143;border-radius:2px;border-radius:var(--devui-border-radius, 2px);-webkit-user-select:none;-moz-user-select:none;user-select:none}:focus{outline:none}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }]; }, propDecorators: { id: [{
                type: Input
            }], showAnimation: [{
                type: Input
            }], showAnimate: [{
                type: Input
            }], width: [{
                type: Input
            }], zIndex: [{
                type: Input
            }], backDropZIndex: [{
                type: Input
            }], backdropCloseable: [{
                type: Input
            }], beforeHidden: [{
                type: Input
            }], draggable: [{
                type: Input
            }], placement: [{
                type: Input
            }], offsetX: [{
                type: Input
            }], offsetY: [{
                type: Input
            }], bodyScrollable: [{
                type: Input
            }], escapable: [{
                type: Input
            }], modalContainerHost: [{
                type: ViewChild,
                args: [ModalContainerDirective, { static: true }]
            }], dialogElement: [{
                type: ViewChild,
                args: ['dialog', { static: true }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 