'use strict';

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

const index = require('./index-65f57499.js');

const cpslModalV2Css = ":host{display:none;position:absolute;top:0;left:0;width:100vw;height:100vh;justify-content:center;align-items:center;z-index:10005}:host .card{z-index:10005;opacity:0;position:relative;transition:all}:host(.no-overlay){position:relative;top:unset;left:unset;width:100%;height:auto}:host(.open) .card{opacity:1}:host(.elevated) .card{--card-border-width:0px}:host(.elevated) .card::part(card-container){box-shadow:0px 8px 16px 0px rgba(0, 0, 0, 0.12)}";
const CpslModalV2Style0 = cpslModalV2Css;

const CpslModalV2 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.cpslModalEntering = index.createEvent(this, "cpslModalEntering", 7);
        this.cpslModalEntered = index.createEvent(this, "cpslModalEntered", 7);
        this.cpslModalExiting = index.createEvent(this, "cpslModalExiting", 7);
        this.cpslModalExited = index.createEvent(this, "cpslModalExited", 7);
        this.enterTransitionDuration = 0.15;
        this.exitTransitionDuration = 0.15;
        this.elevated = undefined;
        this.noOverlay = undefined;
        this.open = undefined;
        this.zIndexOverride = undefined;
    }
    toggleHeight() {
        if (!this.open) {
            this.cpslModalExiting.emit();
            // Animate out before setting display to none
            setTimeout(() => {
                this.el.style.display = 'none';
                this.cpslModalExited.emit();
            }, this.exitTransitionDuration * 1000);
        }
        else {
            this.cpslModalEntering.emit();
            this.el.style.display = 'flex';
            setTimeout(() => {
                this.cpslModalEntered.emit();
            }, this.enterTransitionDuration * 1000);
        }
    }
    componentDidLoad() {
        this.toggleHeight();
    }
    render() {
        return (index.h(index.Host, { key: '54037c194116e64864a47ea8eeedee31f804a736', class: { 'open': this.open, 'elevated': this.elevated, 'no-overlay': this.noOverlay } }, !this.noOverlay && (index.h("cpsl-overlay", { key: '152760c8eabdfca0dda636d7d28adc3030532558', zIndexOverride: this.zIndexOverride ? this.zIndexOverride : undefined, id: "overlay", open: this.open, enterTransitionDuration: this.enterTransitionDuration, exitTransitionDuration: this.exitTransitionDuration })), index.h("cpsl-card", { key: '3e062561091c6831ece6a1abfd2b2e1dd67baefb', class: "card", style: { transitionDuration: this.open ? `${this.exitTransitionDuration}s` : `${this.enterTransitionDuration}s` } }, index.h("slot", { key: '94e26e323e40fd5bcc899d0311c044483442f5a4' }))));
    }
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "open": ["toggleHeight"]
    }; }
};
CpslModalV2.style = CpslModalV2Style0;

exports.cpsl_modal_v2 = CpslModalV2;

//# sourceMappingURL=cpsl-modal-v2.cjs.entry.js.map