'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const __chunk_1 = require('./chunk-2755df65.js');

/*
* The MIT License (MIT)
* Copyright (c) Cavin Jo
* Permissi/on is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
*
* https://github.com/oigil/dndod
 */
const originalOptions = Object.freeze({
    "prefixClass": "dndod",
    "title": "",
    "msg": "",
    "confirmLabel": "OK",
    "cancelLabel": "Cancel",
    "continueLabel": "Continue",
    "textAlign": "center",
    "animation": "from-top",
    "animationDuration": 400,
    "disableCloseBtn": false,
    "disableOutline": false,
    "enableHTML": false,
    "allowClose": true,
    "hostElement": null,
    "events": {
        "create": null,
        "mount": null,
        "close": null,
        "unmount": null
    },
    "buttons": []
});
class Popup {
    constructor(options) {
        this.$wrapper = null;
        this.$popup = null;
        this.$customBtnWrapper = null;
        this.$previousActiveElement = document['activeElement'] || null;
        this.openTimeout = undefined;
        this.closeTimeout = undefined;
        this.resizeHandler = null;
        let mergedOptions = Object.assign({}, originalOptions);
        this.options = Object.assign(mergedOptions, options);
        typeof this.options.events.create === "function" && this.options.events.create();
    }
    render(msg = "", title = "") {
        // create wrapper element.
        this.$wrapper = this.createWrapper();
        // create popup element.
        this.$popup = this.createPopup(msg, title);
        this.$wrapper.appendChild(this.$popup);
        //place custom buttons if exist.
        if (this.options.buttons.length > 0) {
            this.$wrapper.classList.add([this.options.prefixClass, "has-btn"].join("-"));
            this.$customBtnWrapper = this.createCustomBtnWrapper();
            this.options.buttons.forEach(this.createCustomBtn.bind(this));
        }
        //place close button unless disabled.
        if (this.options.disableCloseBtn !== true) {
            this.$popup.appendChild(this.createCloseBtn());
        }
        //place focus trap
        this.$popup.appendChild(this.createFocusTrap());
    }
    createWrapper() {
        let $wrapper = document.createElement("div");
        // TODO : classList polyfill bug at IE11 (cannot add multiple classes)
        // $wrapper.classList.add([this.prefixClass,"wrapper"].join("-"), [this.prefixClass, "animate", this.animation].join("-"));
        $wrapper.classList.add([this.options.prefixClass, "wrapper"].join("-"));
        $wrapper.classList.add([this.options.prefixClass, "animate", this.options.animation].join("-"));
        $wrapper.classList.toggle([this.options.prefixClass, "no-outline"].join("-"), this.options.disableOutline === true);
        if (this.options.animationDuration !== 250) {
            $wrapper.style.transitionDuration = parseInt(this.options.animationDuration, 10) / 1000 + "s";
        }
        $wrapper.setAttribute("tabindex", "0");
        $wrapper['dndodKeydownHandler'] = (e) => {
            e.stopPropagation();
            if (e.keyCode === 27) {
                this.close();
            }
        };
        $wrapper['dndodClickHandler'] = (e) => {
            e.stopPropagation();
            this.close();
        };
        if (this.options.allowClose) {
            $wrapper.addEventListener("keydown", $wrapper['dndodKeydownHandler']);
            $wrapper.addEventListener("click", $wrapper['dndodClickHandler']);
        }
        return $wrapper;
    }
    createPopup(msg, title) {
        let contentProperty = this.options.enableHTML === true ? "innerHTML" : "innerText";
        let $popup = document.createElement("div");
        $popup.classList.add([this.options.prefixClass, "popup"].join("-"));
        $popup.classList.toggle([this.options.prefixClass, "text", this.options.textAlign].join("-"), this.options.textAlign !== "center");
        if (this.options.animationDuration !== 250) {
            $popup.style.transitionDuration = parseInt(this.options.animationDuration, 10) / 1000 + "s";
        }
        $popup.setAttribute("tabindex", "0");
        $popup['dndodClickHandler'] = (e) => {
            e.stopPropagation();
        };
        $popup.addEventListener("click", $popup['dndodClickHandler']);
        let $title = document.createElement("h1");
        $title.classList.add([this.options.prefixClass, "heading"].join("-"));
        $title[contentProperty] = `${title}`;
        $popup.appendChild($title);
        let $message = document.createElement("p");
        $message.classList.add([this.options.prefixClass, "body"].join("-"));
        if (msg instanceof HTMLElement) {
            $message.appendChild(msg);
        }
        else {
            $message[contentProperty] = `${msg}`;
        }
        $popup.appendChild($message);
        return $popup;
    }
    createCloseBtn() {
        let $closeBtn = document.createElement("button");
        $closeBtn.innerHTML = "&times;";
        $closeBtn.setAttribute("title", "Close this popup");
        $closeBtn.classList.add([this.options.prefixClass, "btn-close"].join("-"));
        $closeBtn['dndodClickHandler'] = (e) => {
            e.stopPropagation();
            this.close();
        };
        $closeBtn.addEventListener("click", $closeBtn['dndodClickHandler']);
        return $closeBtn;
    }
    createCustomBtnWrapper() {
        let $customBtnWrapper = document.createElement("div");
        $customBtnWrapper.classList.add([this.options.prefixClass, "custom-btn-wrapper"].join("-"));
        return $customBtnWrapper;
    }
    createCustomBtn(buttonInfo, index, buttons) {
        let $customBtn = document.createElement("button");
        $customBtn.innerHTML = buttonInfo.text;
        $customBtn.classList.add([this.options.prefixClass, "btn-custom"].join("-"));
        buttonInfo.type = buttonInfo.type || "default";
        $customBtn.classList.add([this.options.prefixClass, "btn", buttonInfo.type].join("-"));
        if (typeof buttonInfo.handler === "function") {
            $customBtn['dndodClickHandler'] = (e) => {
                e.stopPropagation();
                buttonInfo.handler(e, this);
            };
            $customBtn.addEventListener("click", $customBtn['dndodClickHandler']);
        }
        this.$customBtnWrapper.appendChild($customBtn);
        buttons[index].$button = $customBtn;
        if (index === buttons.length - 1) {
            this.$popup.appendChild(this.$customBtnWrapper);
        }
    }
    createFocusTrap() {
        let $trap = document.createElement("span");
        $trap.setAttribute("tabindex", "0");
        $trap.addEventListener("focus", (e) => {
            e.stopPropagation();
            this.$popup.focus();
        });
        return $trap;
    }
    watchScreenResize() {
        // TODO : classList polyfill bug at IE11 (cannot toggle)
        // this.$wrapper.classList.toggle([this.options.prefixClass, "oversize"].join("-"), this.$popup.offsetHeight > window.innerHeight - 60);
        let classList = this.$wrapper.classList, oversizeClass = [this.options.prefixClass, "oversize"].join("-");
        (this.$popup.offsetHeight > window.innerHeight - 60) ? classList.add(oversizeClass) : classList.remove(oversizeClass);
    }
    removeAllEventHandler() {
        window.removeEventListener("resize", this.resizeHandler);
        this.$popup.removeEventListener("click", this.$popup['dndodClickHandler']);
        this.$wrapper.removeEventListener("keydown", this.$wrapper.dndodKeydownHandler);
        this.$wrapper.removeEventListener("click", this.$wrapper['dndodClickHandler']);
        this.options.buttons.forEach(function (buttonInfo) {
            buttonInfo.$button.removeEventListener("click", buttonInfo.$button['dndodClickHandler']);
        });
    }
    open() {
        this.$previousActiveElement !== null && this.$previousActiveElement['blur']();
        this.render(this.options.msg, this.options.title);
        this.options.animation === "none" && this.$wrapper.classList.add([this.options.prefixClass, "status-show"].join("-"));
        document.body.appendChild(this.$wrapper);
        setTimeout(() => {
            typeof this.options.events.mount === "function" && this.options.events.mount();
            this.options.animation !== "none" && this.$wrapper.classList.add([this.options.prefixClass, "status-show"].join("-"));
        });
        if (this.options.animation === "none") {
            this.$popup.focus();
        }
        else {
            this.openTimeout = setTimeout(() => {
                this.$popup.focus();
            }, this.options.animationDuration);
        }
        this.watchScreenResize();
        this.resizeHandler = this.watchScreenResize.bind(this);
        window.addEventListener("resize", this.resizeHandler);
    }
    close() {
        typeof this.options.events.close === "function" && this.options.events.close();
        this.openTimeout && clearTimeout(this.openTimeout);
        this.removeAllEventHandler();
        if (this.options.animation === "none") {
            this.remove();
        }
        else {
            this.$wrapper.classList.remove([this.options.prefixClass, "status-show"].join("-"));
            this.closeTimeout = setTimeout(() => {
                this.remove();
            }, this.options.animationDuration);
        }
        // fixme:
        //delete this;
    }
    remove() {
        this.$previousActiveElement !== null && this.$previousActiveElement['focus']();
        this.$wrapper.parentNode.removeChild(this.$wrapper);
        setTimeout(() => {
            typeof this.options.events.unmount === "function" && this.options.events.unmount();
        });
    }
}
const popup = (options = {}) => {
    let pop = new Popup(options);
    pop.open();
};
const notice = (msg = "", options = {}) => {
    options['msg'] = msg;
    let pop = new Popup(options);
    pop.open();
};
const alert = (msg = "", options = {}) => {
    options['msg'] = msg;
    options['buttons'] = [
        {
            text: options['confirmLabel'],
            type: "primary",
            handler: function (e, popup) {
                popup.close();
            }
        }
    ];
    let pop = new Popup(options);
    pop.open();
};
const confirm = (msg = "", calllback = function () { }, options = {}) => {
    options['msg'] = msg;
    options['buttons'] = [
        {
            text: options['cancelLabel'],
            handler: function (e, popup) {
                popup.close();
            }
        },
        {
            text: options['continueLabel'],
            type: "primary",
            handler: function (e, popup) {
                popup.close();
                calllback();
            }
        }
    ];
    let pop = new Popup(options);
    pop.open();
};
const dndod = {
    popup,
    notice,
    alert,
    confirm
};

class Dialog {
    constructor(hostRef) {
        __chunk_1.registerInstance(this, hostRef);
        this.index = 0;
        this.confirmLabel = 'Ok';
        this.cancelLabel = 'Cancel';
        this.continueLabel = 'Yes';
        this.allowClose = true;
    }
    // todo: add cancel + continue handlers
    getOptions() {
        return {
            confirmLabel: this.confirmLabel,
            cancelLabel: this.cancelLabel,
            continueLabel: this.continueLabel,
            allowClose: this.allowClose,
            disableCloseBtn: !this.allowClose,
            enableHTML: true,
            hostElement: this.host
        };
    }
    async popup(options = {}) {
        options = Object.assign(options, this.getOptions());
        dndod.popup(options);
    }
    async notice(msg = "", options = {}) {
        options = Object.assign(options, this.getOptions());
        dndod.notice(msg, options);
    }
    async alert(msg = "", options = {}) {
        options = Object.assign(options, this.getOptions());
        dndod.alert(msg, options);
    }
    ;
    async confirm(msg = "", calllback = this.dialogConfirmHandler, options = {}) {
        options = Object.assign(options, this.getOptions());
        dndod.confirm(msg, calllback, options);
    }
    async setConfirmHandler(callBackHandler) {
        this.dialogConfirmHandler = callBackHandler;
    }
    dialogConfirmHandler() {
        if (this && this.dialogConfirmCallback) {
            this.dialogConfirmCallback();
        }
    }
    // componentDidLoad() {
    //     this.postrender()
    // }
    //
    // componentDidUpdate() {
    //     this.postrender()
    // }
    //
    // postrender() {
    //     Array.from(document.querySelectorAll('.dndod-custom-btn-wrapper')).forEach((wrapper) => {
    //         let buttons = Array.from(wrapper.querySelectorAll('button'))
    //
    //         // Now do something with my button
    //     });
    //     // document.getElementsByClassName('dndod-custom-btn-wrapper');
    //
    // }
    render() {
        return (__chunk_1.h("div", null));
    }
    get host() { return __chunk_1.getElement(this); }
    static get style() { return ":root{--ema-color:#343a40;--ema-primary:#007bff;--ema-secondary:#6c757d;--ema-success:#28a745;--ema-info:#17a2b8;--ema-warning:#ffc107;--ema-danger:#dc3545;--ema-light:#f8f9fa;--ema-dark:#343a40;--ema-background:#fff;--ema-background-diap:rgba(29,29,29,0.97);--ema-border-color:#c5c9cd;--ema-border:1px solid #c5c9cd;--ema-border-radius:3px 3px 3px 3px;--ema-box-shadow:1px 1px 10px 1px #ccc;--ema-margin:0.25rem;--ema-margin-sm:0.5rem;--ema-margin-md:1rem;--ema-margin-lg:1.5rem;--ema-margin-xl:2rem;--ema-padding:0.25rem;--ema-padding-sm:0.5rem;--ema-padding-md:1rem;--ema-padding-lg:1.5rem;--ema-padding-xl:2rem;--ema-gray-100:#f8f9fa;--ema-gray-200:#e9ecef;--ema-gray-300:#dee2e6;--ema-gray-400:#ced4da;--ema-gray-500:#adb5bd;--ema-gray-600:#868e96;--ema-gray-700:#495057;--ema-gray-800:#343a40;--ema-gray-900:#212529}.dndod-wrapper{overflow:auto;position:fixed;top:0;left:0;right:0;bottom:0;z-index:9998;background-color:transparent;-webkit-transition-property:background-color;transition-property:background-color;-webkit-transform:translateZ(0);transform:translateZ(0)}.dndod-wrapper,.dndod-wrapper .dndod-popup{-webkit-transition-duration:.25s;transition-duration:.25s}.dndod-wrapper .dndod-popup{border-radius:var(--ema-border-radius,3px);background:var(--ema-background,#fff);position:absolute;top:50%;left:50%;z-index:9999;min-width:260px;max-width:100%;min-height:70px;padding:40px 50px;text-align:center;-webkit-box-shadow:var(--ema-box-shadow,1px 1px 10px 1px #ccc);box-shadow:var(--ema-box-shadow,1px 1px 10px 1px #ccc);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition-property:top;transition-property:top}.dndod-wrapper .dndod-popup .dndod-btn-close{display:block;overflow:hidden;position:absolute;top:3px;right:3px;width:30px;height:30px;margin:0;padding:0;border:0 none;font-family:sans-serif;font-size:2em;font-weight:lighter;line-height:1em;color:#c5c5c5;background-color:#fff;text-align:center;cursor:pointer}.dndod-wrapper .dndod-popup .dndod-btn-close:focus,.dndod-wrapper .dndod-popup .dndod-btn-close:hover{color:#929292}.dndod-wrapper .dndod-popup .dndod-btn-close:active{color:#797979}.dndod-wrapper .dndod-popup .dndod-heading{font-size:1.4em;margin:0 0 20px}.dndod-wrapper .dndod-popup .dndod-body{font-size:1.2em;line-height:1.4em;margin:20px 0}.dndod-wrapper .dndod-popup.dndod-text-left{text-align:left}.dndod-wrapper.dndod-status-show{background-color:rgba(0,0,0,.3)}.dndod-wrapper.dndod-animate-from-top .dndod-popup{top:-50%}.dndod-wrapper.dndod-animate-from-bottom .dndod-popup{top:150%}.dndod-wrapper.dndod-animate-from-bottom.dndod-status-show .dndod-popup,.dndod-wrapper.dndod-animate-from-top.dndod-status-show .dndod-popup{top:50%}.dndod-wrapper.dndod-oversize .dndod-popup{-webkit-transform:translate(-50%);transform:translate(-50%)}.dndod-wrapper.dndod-oversize.dndod-status-show .dndod-popup{margin:30px 0;top:0!important;-webkit-transition:none;transition:none}.dndod-wrapper.dndod-has-btn .dndod-popup{padding-bottom:90px}.dndod-wrapper.dndod-no-outline .dndod-popup,.dndod-wrapper.dndod-no-outline .dndod-popup button{outline:0 none}.dndod-custom-btn-wrapper{display:-ms-flexbox;display:flex;position:absolute;left:0;right:0;bottom:0;height:60px;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.dndod-custom-btn-wrapper .dndod-btn-custom{-ms-flex:auto;flex:auto;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;width:auto;height:100%;border:0 none;margin:0;padding:0;font-size:1.1em;cursor:pointer}.dndod-custom-btn-wrapper .dndod-btn-custom:focus,.dndod-custom-btn-wrapper .dndod-btn-custom:hover{background-color:#ddd}.dndod-custom-btn-wrapper .dndod-btn-custom:active{background-color:#d1d1d1}.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-default{background-color:#d8d8d8;color:#000}.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-default:focus,.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-default:hover{background-color:#cbcbcb}.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-default:active{background-color:#bfbfbf}.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-kakaobank{background-color:#ffde00;color:#000}.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-kakaobank:focus,.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-kakaobank:hover{background-color:#e6c800}.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-kakaobank:active{background-color:#ccb200}.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-primary{background-color:var(--ema-primary,#007bff);color:var(--ema-light,#f8f9fa)}.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-primary:focus,.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-primary:hover{background:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.05)),to(rgba(0,0,0,.05))) var(--ema-primary,#007bff);background:linear-gradient(0deg,rgba(0,0,0,.05),rgba(0,0,0,.05)) var(--ema-primary,#007bff)}.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-primary:active{background:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.1)),to(rgba(0,0,0,.1))) var(--ema-primary,#007bff);background:linear-gradient(0deg,rgba(0,0,0,.1),rgba(0,0,0,.1)) var(--ema-primary,#007bff)}.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-danger{background-color:var(--ema-danger,#dc3545);color:var(--ema-color,#343a40)}.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-danger:focus,.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-danger:hover{background:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.05)),to(rgba(0,0,0,.05))) var(--ema-danger,#dc3545);background:linear-gradient(0deg,rgba(0,0,0,.05),rgba(0,0,0,.05)) var(--ema-danger,#dc3545)}.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-danger:active{background:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.1)),to(rgba(0,0,0,.1))) var(--ema-danger,#dc3545);background:linear-gradient(0deg,rgba(0,0,0,.1),rgba(0,0,0,.1)) var(--ema-danger,#dc3545)}.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-warning{background-color:#ffdd57;color:rgba(0,0,0,.7)}.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-warning:focus,.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-warning:hover{background-color:#ffd83e}.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-warning:active{background-color:#ffd324}.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-success{background-color:var(--ema-success,#28a745);color:var(--ema-color,#343a40)}.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-success:focus,.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-success:hover{background:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.05)),to(rgba(0,0,0,.05))) var(--ema-success,#28a745);background:linear-gradient(0deg,rgba(0,0,0,.05),rgba(0,0,0,.05)) var(--ema-success,#28a745)}.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-success:active{background:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.1)),to(rgba(0,0,0,.1))) var(--ema-success,#28a745);background:linear-gradient(0deg,rgba(0,0,0,.1),rgba(0,0,0,.1)) var(--ema-success,#28a745)}.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-info{background-color:var(--ema-primary,#007bff);color:var(--ema-color,#343a40)}.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-info:focus,.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-info:hover{background:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.05)),to(rgba(0,0,0,.05))) var(--ema-primary,#007bff);background:linear-gradient(0deg,rgba(0,0,0,.05),rgba(0,0,0,.05)) var(--ema-primary,#007bff)}.dndod-custom-btn-wrapper .dndod-btn-custom.dndod-btn-info:active{background:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.1)),to(rgba(0,0,0,.1))) var(--ema-primary,#007bff);background:linear-gradient(0deg,rgba(0,0,0,.1),rgba(0,0,0,.1)) var(--ema-primary,#007bff)}"; }
}

exports.ema_dialog = Dialog;
