'use strict';

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

const index = require('./index-b55be5aa.js');
const helpers = require('./helpers-d38772ff.js');
const theme = require('./theme-293796cf.js');

const styleCss = ".modals-root-container{z-index:9000}x-modal{position:fixed;top:0px;left:0px;right:0px;bottom:0px;width:100%;max-width:100vw;height:100%;max-height:100vh;margin:0px;padding:0px;-webkit-transition:0.2s opacity;transition:0.2s opacity;background-color:rgba(255, 255, 255, 0.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;z-index:9000;overflow:hidden;overflow-y:auto;display:block;pointer-events:none}.is-dark-mode x-modal{background-color:rgba(var(--color-dark-rgb, 31, 31, 31), 0.5)}x-modal.modal-closable{cursor:pointer}x-modal.modal-show{pointer-events:all;visibility:visible;opacity:1}x-modal.modal-show .modal-container>div{width:100% !important;opacity:1;-webkit-transform:translateY(0px);transform:translateY(0px)}x-modal.modal-loading .modal-slot{display:none}x-modal .modal-slot,x-modal .modal-loading{-webkit-animation:0.4s fadeIn;animation:0.4s fadeIn}x-modal .modal-interval-indicator{display:block;width:100%;background-color:rgba(var(--color-border-rgb, 200, 199, 204), 0.2);height:0.5rem;position:fixed;top:0px;z-index:10002;overflow:hidden}.is-dark-mode x-modal .modal-interval-indicator{background-color:rgba(255, 255, 255, 0.2)}x-modal .modal-interval-indicator>span{-webkit-animation-name:interval;animation-name:interval;-webkit-animation-timing-function:linear;animation-timing-function:linear;display:block;width:100%;height:0.5rem;background-color:rgba(var(--color-border-rgb, 200, 199, 204), 0.3)}.is-dark-mode x-modal .modal-interval-indicator>span{background-color:rgba(255, 255, 255, 0.3)}x-modal .modal-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:1rem;min-height:100vh;max-width:100vw;z-index:9000}.is-mobile x-modal .modal-container{-ms-flex-align:end;align-items:flex-end;padding:0.35rem;padding-bottom:calc(0.35rem + var(--inset-bottom))}x-modal .modal-container>div{position:relative;min-width:18rem;width:100%;height:auto;cursor:default;margin:0;padding:0;opacity:0;-webkit-transition-delay:0.2s;transition-delay:0.2s;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1.275);transition-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1.275);-webkit-transform:translateY(100px);transform:translateY(100px)}x-modal .modal-container>div.modal-small{max-width:18rem}x-modal .modal-container>div.modal-regular{max-width:24rem}x-modal .modal-container>div.modal-normal{max-width:28rem}x-modal .modal-container>div.modal-medium{max-width:38rem}x-modal .modal-container>div.modal-big{max-width:48rem}x-modal .modal-container>div.modal-large{max-width:58rem}x-modal .modal-container>div.modal-full{max-width:100%}.is-mobile x-modal .modal-container>div{max-width:100% !important}x-modal .modal-container>div .modal-loading{width:18rem;height:0.5rem;border-radius:0.5rem;background-color:rgba(0, 0, 0, 0.1);-webkit-box-shadow:0px 0px 0px 2px rgba(0, 0, 0, 0.1);box-shadow:0px 0px 0px 2px rgba(0, 0, 0, 0.1);overflow:hidden;position:relative;margin:1rem auto}.is-dark-mode x-modal .modal-container>div .modal-loading{background-color:rgba(255, 255, 255, 0.2);-webkit-box-shadow:0px 0px 0px 3px rgba(255, 255, 255, 0.1);box-shadow:0px 0px 0px 3px rgba(255, 255, 255, 0.1)}x-modal .modal-container>div .modal-loading>span{display:block;position:absolute;content:\"\";left:-200px;width:200px;height:0.5rem;animation:loading 1s linear infinite;-moz-animation:loading 1s linear infinite;-webkit-animation:loading 1s linear infinite;border-radius:0.5rem;background-color:rgba(0, 0, 0, 0.5);background-color:var(--color-primary-tint, #5e8af4)}x-modal .modal-container>div .modal-body{background-color:var(--color-white, #FFFFFF);-webkit-box-shadow:0px 3px 1rem rgba(var(--color-border-rgb, 200, 199, 204), 0.2), inset 0 0 0 1px rgba(var(--color-border-rgb, 200, 199, 204), 0.35);box-shadow:0px 3px 1rem rgba(var(--color-border-rgb, 200, 199, 204), 0.2), inset 0 0 0 1px rgba(var(--color-border-rgb, 200, 199, 204), 0.35);border:none;margin:0;border-radius:0.5rem;width:100%}.is-dark-mode x-modal .modal-container>div .modal-body{background-color:var(--color-black, #000000);-webkit-box-shadow:0px 3px 1rem rgba(var(--color-black-rgb, 0, 0, 0), 0.35), inset 0 0 0 1px var(--color-dark-tint, #414141);box-shadow:0px 3px 1rem rgba(var(--color-black-rgb, 0, 0, 0), 0.35), inset 0 0 0 1px var(--color-dark-tint, #414141)}x-modal.translucent x-card,.translucent x-modal x-card{background:rgba(var(--background-body-rgb), 0.7);-webkit-backdrop-filter:var(--translucent-backdrop-filter);backdrop-filter:var(--translucent-backdrop-filter)}";
const XModalStyle0 = styleCss;

const XModal = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.onOpen = index.createEvent(this, "open", 3);
        this.onClose = index.createEvent(this, "close", 3);
        this.loading = false;
        this.interval = undefined;
        this.size = 'normal';
        this.maxWidth = undefined;
        this.closable = true;
        this.visible = false;
    }
    /**
     * Observe the visible changes
     */
    watchVisible(newValue) {
        newValue && helpers.evaluateOverlayIndex(this.el);
        (newValue ? this.onOpen : this.onClose).emit(this.el);
    }
    /**
     * Open the modal window
     */
    async open() {
        this.visible = true;
        if (this.interval && this.interval > 0) {
            this.timer = setTimeout(() => {
                this.close();
            }, this.interval * 1000);
        }
        setTimeout(() => this.calculateBoundaries(), 300);
    }
    /**
     * Close the modal window
     */
    async close() {
        if (this.timer) {
            clearTimeout(this.timer);
        }
        this.visible = false;
        theme.Theme.validateModals();
    }
    /**
     * On component did loaded hook
     */
    componentDidLoad() {
        const container = helpers.getOverlayContainer();
        const ref = this.el.getAttribute('ref');
        if (ref && theme.Query(ref, container)) {
            theme.Query(ref, container).remove();
        }
        container.appendChild(this.el);
        window.addEventListener('resize', () => this.calculateBoundaries());
    }
    /**
     * Verify if the modal content overflow the viewport and set max height
     */
    calculateBoundaries() {
        const content = this.getModalContentElement();
        const dock = this.getDockElement();
        if (!content) {
            return;
        }
        const containerStyles = window.getComputedStyle(this.container);
        const contentStyles = window.getComputedStyle(content);
        const containerOffset = parseFloat(containerStyles.paddingTop) + parseFloat(containerStyles.paddingBottom);
        const contentOffset = parseFloat(contentStyles.marginTop) + parseFloat(contentStyles.marginBottom);
        const dockHeight = dock ? dock.offsetHeight : 0;
        const maxHeight = window.innerHeight - (dockHeight + containerOffset + contentOffset);
        content.style.overflowY = content.scrollHeight > maxHeight ? 'auto' : 'initial';
        content.style.maxHeight = content.scrollHeight > maxHeight ? `${maxHeight}px` : 'initial';
    }
    /**
     * Search the content element
     */
    getModalContentElement() {
        return this.el.querySelector('x-card, .modal-body');
    }
    /**
     * Search the Dock element
     */
    getDockElement() {
        return this.el.querySelector('x-dock');
    }
    /**
     * On click modal container handler
     *
     * @param e
     * @returns
     */
    onClickContainer(e) {
        if (this.loading || !this.closable) {
            return;
        }
        if ((e.target.classList.contains('modal') || e.target.classList.contains('modal-container'))) {
            this.close();
        }
    }
    /**
     * Render element
     */
    render() {
        return index.h(index.Host, { key: '37b7fb65d9ff7772cbcabda404f6007bcc469e7a', role: "modal", class: helpers.cls('modal', { 'modal-show': this.visible, 'modal-closable': this.closable, 'modal-loading': this.loading }), onClick: this.onClickContainer.bind(this) }, index.h("div", { key: '73e1effeab84c918539d289a9309b1e04697e9de', ref: el => this.container = el, class: "modal-container" }, this.loading && index.h("div", { key: 'a9f4c0ca8155564e9561edf53881d46022cf225a' }, index.h("div", { key: 'fcb9cb86a84d0066de506f57bc4aafbc437a88e1', class: "modal-loading" }, index.h("span", { key: '869f49274d7ff5659cc088e76a6abcdcefed1f73' }))), index.h("div", { key: 'f35880f7419ba9f228d42d3ae44948d2cc5bad78', class: helpers.cls('modal-slot', `modal-${this.size}`), style: { maxWidth: this.maxWidth } }, index.h("slot", { key: 'c447830a313283ad1f1fc9ab03f9ece2d3c3214f' }))), this.interval > 0 && this.visible && index.h("span", { key: '525f4cb294528b2c11d57615477d5986d0f8e90a', class: "modal-interval-indicator" }, index.h("span", { key: '49c56648b5b27d7a0649a585dbb84b3da46ed3f3', style: { animationDuration: this.interval + 's' } })));
    }
    ;
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "visible": ["watchVisible"]
    }; }
};
XModal.style = XModalStyle0;

exports.x_modal = XModal;
