import { Host, h } from "@stencil/core";
import gsap from "gsap";
export class CpslOverlay {
    constructor() {
        this.enterTransitionDuration = 0.5;
        this.exitTransitionDuration = 0.5;
        this.open = undefined;
        this.zIndexOverride = undefined;
    }
    toggleHeight() {
        this.open
            ? gsap.timeline({ defaults: { duration: this.enterTransitionDuration } }).to(this.el, { display: 'block', opacity: 1 })
            : gsap.timeline({ defaults: { duration: this.exitTransitionDuration } }).to(this.el, { display: 'none', opacity: 0 });
        if (this.open) {
            document.documentElement.style.overflow = 'hidden';
        }
        else {
            // Setting a timeout here to prevent modal from shifting when the scroll bar appears
            setTimeout(() => {
                document.documentElement.style.overflow = 'auto';
            }, this.exitTransitionDuration * 1000);
        }
    }
    componentDidLoad() {
        if (this.open) {
            gsap.timeline({ defaults: { duration: this.enterTransitionDuration } }).to(this.el, { display: 'block', opacity: 1 });
            document.documentElement.style.overflow = 'hidden';
        }
    }
    render() {
        return (h(Host, { key: '6268805f6988b86573778b2f84b543f09c140882', style: this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {} }, h("slot", { key: '2c985bbabb236f31cabec9b3efa9ee72b034e8b7' })));
    }
    static get is() { return "cpsl-overlay"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["cpsl-overlay.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["cpsl-overlay.css"]
        };
    }
    static get properties() {
        return {
            "enterTransitionDuration": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Duration in seconds of the fade out animation.\nDefault is .5."
                },
                "attribute": "enter-transition-duration",
                "reflect": false,
                "defaultValue": "0.5"
            },
            "exitTransitionDuration": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Duration in seconds of the fade out animation.\nDefault is .5."
                },
                "attribute": "exit-transition-duration",
                "reflect": false,
                "defaultValue": "0.5"
            },
            "open": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether or not to show the overlay."
                },
                "attribute": "open",
                "reflect": false
            },
            "zIndexOverride": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Override z-index."
                },
                "attribute": "z-index-override",
                "reflect": false
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "open",
                "methodName": "toggleHeight"
            }];
    }
}
//# sourceMappingURL=cpsl-overlay.js.map
