import { Component, Input } from '@angular/core';
import { fromEvent } from 'rxjs';
import { takeWhile } from 'rxjs/operators';
import { Key } from 'ts-keycode-enum';
import * as i0 from "@angular/core";
import * as i1 from "./evo-modal.service";
import * as i2 from "../evo-button/components/evo-button/evo-button.component";
import * as i3 from "@angular/common";
export var EvoModalCloseTargets;
(function (EvoModalCloseTargets) {
    EvoModalCloseTargets["BACKGROUND"] = "background";
    EvoModalCloseTargets["BUTTON"] = "button";
    EvoModalCloseTargets["DEFAULT"] = "default";
    EvoModalCloseTargets["ESC"] = "escape";
})(EvoModalCloseTargets || (EvoModalCloseTargets = {}));
export class EvoModalComponent {
    constructor(modalService, elRef) {
        this.modalService = modalService;
        this.elRef = elRef;
        this.declineButtonColor = 'secondary';
        this.declineButtonTheme = 'rounded-outline';
        this.isAcceptLoading = false;
        this.isDeclineDisabled = false;
        this.isVisible = false;
        this.closeTargets = EvoModalCloseTargets;
        this.closeTarget = EvoModalCloseTargets.DEFAULT;
    }
    get id() {
        return this._id;
    }
    set id(id) {
        if (id) {
            this._id = id;
            this.modalService.register(id);
        }
        else {
            throw new Error("EvoModal. Can't be registered, wrong id passed");
        }
    }
    ngOnInit() {
        this.subscribeModalEvents();
    }
    ngOnDestroy() {
        this.modalService.unregister(this.id);
    }
    onBackgroundClick($event) {
        if (this.declineText &&
            $event &&
            $event.target &&
            !this.elRef.nativeElement.querySelector('.evo-modal').contains($event.target) &&
            this.modalState.isOpen) {
            this.handleOnClose(false, this.closeTargets.BACKGROUND);
        }
    }
    handleOnClose(agreement, closeTarget) {
        this.closeTarget = closeTarget;
        if (agreement === false && this.isDeclineDisabled) {
            return;
        }
        if (agreement && typeof this.asyncAccept === 'function') {
            const setAsyncStates = (isLoading = false) => {
                this.isDeclineDisabled = isLoading;
                this.isAcceptLoading = isLoading;
            };
            setAsyncStates(true);
            return this.asyncAccept().subscribe(() => {
                setAsyncStates(false);
                this.modalService.close(this.id, agreement, {
                    closeTarget: this.closeTarget,
                });
            }, () => {
                setAsyncStates(false);
            });
        }
        this.modalService.close(this.id, agreement, {
            closeTarget: this.closeTarget,
        });
    }
    subscribeModalEvents() {
        this.modalService.getEventsSubscription(this.id).subscribe((modalState) => {
            this.modalState = modalState;
            // timeout for modal animation support
            setTimeout(() => {
                this.isVisible = modalState.isOpen;
            });
            if (modalState.isOpen) {
                this.initKeyboardListener();
            }
        });
    }
    initKeyboardListener() {
        return fromEvent(document.body, 'keydown')
            .pipe(takeWhile(() => {
            return this.modalState.isOpen;
        }))
            .subscribe((event) => {
            if (this.declineText && event.keyCode === Key.Escape) {
                this.handleOnClose(false, this.closeTargets.ESC);
            }
        });
    }
}
EvoModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EvoModalComponent, deps: [{ token: i1.EvoModalService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
EvoModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: EvoModalComponent, selector: "evo-modal", inputs: { id: "id", titleText: "titleText", acceptText: "acceptText", acceptButtonColor: "acceptButtonColor", acceptButtonTheme: "acceptButtonTheme", declineText: "declineText", declineButtonColor: "declineButtonColor", declineButtonTheme: "declineButtonTheme", asyncAccept: "asyncAccept" }, ngImport: i0, template: "<div\n    *ngIf=\"modalState?.isOpen\"\n    class=\"evo-modal__background\"\n    [ngClass]=\"{'evo-modal__background_visible': isVisible}\"\n    (click)=\"onBackgroundClick($event)\"\n></div>\n<div\n    *ngIf=\"modalState?.isOpen\"\n    class=\"evo-modal__wrapper\"\n    [ngClass]=\"{'evo-modal_visible': isVisible}\"\n    (click)=\"onBackgroundClick($event)\"\n>\n    <div class=\"evo-modal\">\n        <div class=\"evo-modal__icon\">\n            <ng-content select=\"evo-icon\"></ng-content>\n        </div>\n        <h2 *ngIf=\"titleText !== undefined\" class=\"evo-modal__title\">{{ titleText }}</h2>\n        <div class=\"evo-modal__content\">\n            <ng-content></ng-content>\n        </div>\n        <div class=\"evo-modal__buttons\" [ngClass]=\"{'evo-modal__buttons_single-btn': !declineText || !acceptText}\">\n            <button\n                *ngIf=\"declineText\"\n                evoButton\n                class=\"evo-modal__button evo-modal__button_decline\"\n                [color]=\"declineButtonColor\"\n                [theme]=\"declineButtonTheme\"\n                [disabled]=\"isDeclineDisabled\"\n                (click)=\"handleOnClose(false, closeTargets.BUTTON)\"\n            >\n                {{ declineText }}\n            </button>\n            <button\n                *ngIf=\"acceptText\"\n                evoButton\n                class=\"evo-modal__button evo-modal__button_accept\"\n                [color]=\"acceptButtonColor\"\n                [theme]=\"acceptButtonTheme\"\n                [loading]=\"isAcceptLoading\"\n                (click)=\"handleOnClose(true, closeTargets.BUTTON)\"\n            >\n                {{ acceptText }}\n            </button>\n        </div>\n    </div>\n</div>\n", styles: [".evo-modal{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:100%;max-width:738px;height:auto;max-height:100%;margin-top:50px;padding:56px 0 16px;overflow:hidden;text-align:center;background-color:#fff;border-radius:16px;box-shadow:0 0 12px 2px #0000004d;opacity:0;transition:margin-top .25s,opacity .25s;transition-delay:50ms}.evo-modal_visible .evo-modal{margin-top:0;opacity:1}@media (min-width: 768px){.evo-modal{width:738px;height:auto;padding:32px 0}}.evo-modal__title{margin-top:0;margin-bottom:0;padding-right:32px;padding-left:32px;font-weight:700;font-size:16px;line-height:24px}@media (min-width: 768px){.evo-modal__title{width:674px;padding-right:16px;padding-left:16px;font-size:24px;line-height:32px}}.evo-modal__icon{margin-bottom:8px}.evo-modal__icon ::ng-deep evo-icon{display:block;width:64px;height:64px}@media (min-width: 768px){.evo-modal__icon{margin-bottom:32px}}.evo-modal__icon:empty{display:none}.evo-modal__content{width:100%;margin-top:32px;padding:0 32px;overflow:auto;font-size:14px;line-height:22px}.evo-modal__content:empty{display:none;margin-top:0}@media (min-width: 768px){.evo-modal__content{padding:0 16px}}.evo-modal__content ::ng-deep *:last-child{margin-bottom:0}.evo-modal__background{position:fixed;inset:0;z-index:1010;display:flex;justify-content:center;width:100%;height:100%;background:rgba(0,0,0,.5);opacity:0;transition:opacity .25s}.evo-modal__background_visible{opacity:1}.evo-modal__wrapper{position:fixed;inset:0;z-index:1011;display:flex;justify-content:center;align-items:center;width:100%;padding:16px}@media (min-width: 768px){.evo-modal__wrapper{width:auto}}.evo-modal__buttons{display:flex;flex-shrink:0;flex-direction:column-reverse;justify-content:center;align-items:center;width:100%;margin-top:56px;padding-right:32px;padding-left:32px}@media (min-width: 768px){.evo-modal__buttons{display:grid;width:auto;grid-template-columns:repeat(2,minmax(140px,1fr));grid-column-gap:32px;margin:32px auto 0;padding-right:16px;padding-left:16px}.evo-modal__buttons_single-btn{grid-template-columns:minmax(140px,1fr)}}.evo-modal__button{display:block;width:100%}@media (min-width: 768px){.evo-modal__button{width:auto}}.evo-modal__button+.evo-modal__button{margin:0 0 16px}@media (min-width: 768px){.evo-modal__button+.evo-modal__button{margin:0}}\n"], components: [{ type: i2.EvoButtonComponent, selector: "button[evoButton], a[evoButton]", inputs: ["size", "color", "theme", "disabled", "loading"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EvoModalComponent, decorators: [{
            type: Component,
            args: [{ selector: 'evo-modal', template: "<div\n    *ngIf=\"modalState?.isOpen\"\n    class=\"evo-modal__background\"\n    [ngClass]=\"{'evo-modal__background_visible': isVisible}\"\n    (click)=\"onBackgroundClick($event)\"\n></div>\n<div\n    *ngIf=\"modalState?.isOpen\"\n    class=\"evo-modal__wrapper\"\n    [ngClass]=\"{'evo-modal_visible': isVisible}\"\n    (click)=\"onBackgroundClick($event)\"\n>\n    <div class=\"evo-modal\">\n        <div class=\"evo-modal__icon\">\n            <ng-content select=\"evo-icon\"></ng-content>\n        </div>\n        <h2 *ngIf=\"titleText !== undefined\" class=\"evo-modal__title\">{{ titleText }}</h2>\n        <div class=\"evo-modal__content\">\n            <ng-content></ng-content>\n        </div>\n        <div class=\"evo-modal__buttons\" [ngClass]=\"{'evo-modal__buttons_single-btn': !declineText || !acceptText}\">\n            <button\n                *ngIf=\"declineText\"\n                evoButton\n                class=\"evo-modal__button evo-modal__button_decline\"\n                [color]=\"declineButtonColor\"\n                [theme]=\"declineButtonTheme\"\n                [disabled]=\"isDeclineDisabled\"\n                (click)=\"handleOnClose(false, closeTargets.BUTTON)\"\n            >\n                {{ declineText }}\n            </button>\n            <button\n                *ngIf=\"acceptText\"\n                evoButton\n                class=\"evo-modal__button evo-modal__button_accept\"\n                [color]=\"acceptButtonColor\"\n                [theme]=\"acceptButtonTheme\"\n                [loading]=\"isAcceptLoading\"\n                (click)=\"handleOnClose(true, closeTargets.BUTTON)\"\n            >\n                {{ acceptText }}\n            </button>\n        </div>\n    </div>\n</div>\n", styles: [".evo-modal{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:100%;max-width:738px;height:auto;max-height:100%;margin-top:50px;padding:56px 0 16px;overflow:hidden;text-align:center;background-color:#fff;border-radius:16px;box-shadow:0 0 12px 2px #0000004d;opacity:0;transition:margin-top .25s,opacity .25s;transition-delay:50ms}.evo-modal_visible .evo-modal{margin-top:0;opacity:1}@media (min-width: 768px){.evo-modal{width:738px;height:auto;padding:32px 0}}.evo-modal__title{margin-top:0;margin-bottom:0;padding-right:32px;padding-left:32px;font-weight:700;font-size:16px;line-height:24px}@media (min-width: 768px){.evo-modal__title{width:674px;padding-right:16px;padding-left:16px;font-size:24px;line-height:32px}}.evo-modal__icon{margin-bottom:8px}.evo-modal__icon ::ng-deep evo-icon{display:block;width:64px;height:64px}@media (min-width: 768px){.evo-modal__icon{margin-bottom:32px}}.evo-modal__icon:empty{display:none}.evo-modal__content{width:100%;margin-top:32px;padding:0 32px;overflow:auto;font-size:14px;line-height:22px}.evo-modal__content:empty{display:none;margin-top:0}@media (min-width: 768px){.evo-modal__content{padding:0 16px}}.evo-modal__content ::ng-deep *:last-child{margin-bottom:0}.evo-modal__background{position:fixed;inset:0;z-index:1010;display:flex;justify-content:center;width:100%;height:100%;background:rgba(0,0,0,.5);opacity:0;transition:opacity .25s}.evo-modal__background_visible{opacity:1}.evo-modal__wrapper{position:fixed;inset:0;z-index:1011;display:flex;justify-content:center;align-items:center;width:100%;padding:16px}@media (min-width: 768px){.evo-modal__wrapper{width:auto}}.evo-modal__buttons{display:flex;flex-shrink:0;flex-direction:column-reverse;justify-content:center;align-items:center;width:100%;margin-top:56px;padding-right:32px;padding-left:32px}@media (min-width: 768px){.evo-modal__buttons{display:grid;width:auto;grid-template-columns:repeat(2,minmax(140px,1fr));grid-column-gap:32px;margin:32px auto 0;padding-right:16px;padding-left:16px}.evo-modal__buttons_single-btn{grid-template-columns:minmax(140px,1fr)}}.evo-modal__button{display:block;width:100%}@media (min-width: 768px){.evo-modal__button{width:auto}}.evo-modal__button+.evo-modal__button{margin:0 0 16px}@media (min-width: 768px){.evo-modal__button+.evo-modal__button{margin:0}}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.EvoModalService }, { type: i0.ElementRef }]; }, propDecorators: { id: [{
                type: Input
            }], titleText: [{
                type: Input
            }], acceptText: [{
                type: Input
            }], acceptButtonColor: [{
                type: Input
            }], acceptButtonTheme: [{
                type: Input
            }], declineText: [{
                type: Input
            }], declineButtonColor: [{
                type: Input
            }], declineButtonTheme: [{
                type: Input
            }], asyncAccept: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 