import { Host, h } from "@stencil/core";
export class CpslModalV2 {
    constructor() {
        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 (h(Host, { key: '54037c194116e64864a47ea8eeedee31f804a736', class: { 'open': this.open, 'elevated': this.elevated, 'no-overlay': this.noOverlay } }, !this.noOverlay && (h("cpsl-overlay", { key: '152760c8eabdfca0dda636d7d28adc3030532558', zIndexOverride: this.zIndexOverride ? this.zIndexOverride : undefined, id: "overlay", open: this.open, enterTransitionDuration: this.enterTransitionDuration, exitTransitionDuration: this.exitTransitionDuration })), h("cpsl-card", { key: '3e062561091c6831ece6a1abfd2b2e1dd67baefb', class: "card", style: { transitionDuration: this.open ? `${this.exitTransitionDuration}s` : `${this.enterTransitionDuration}s` } }, h("slot", { key: '94e26e323e40fd5bcc899d0311c044483442f5a4' }))));
    }
    static get is() { return "cpsl-modal-v2"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["cpsl-modal-v2.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["cpsl-modal-v2.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 modal entering.\nDefault is .15."
                },
                "attribute": "enter-transition-duration",
                "reflect": false,
                "defaultValue": "0.15"
            },
            "exitTransitionDuration": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Duration in seconds of the modal exiting.\nDefault is .15."
                },
                "attribute": "exit-transition-duration",
                "reflect": false,
                "defaultValue": "0.15"
            },
            "elevated": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether or not to show the modal with a box shadow."
                },
                "attribute": "elevated",
                "reflect": false
            },
            "noOverlay": {
                "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": "no-overlay",
                "reflect": false
            },
            "open": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether or not to show the modal."
                },
                "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 events() {
        return [{
                "method": "cpslModalEntering",
                "name": "cpslModalEntering",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when enter animation starts."
                },
                "complexType": {
                    "original": "null",
                    "resolved": "null",
                    "references": {}
                }
            }, {
                "method": "cpslModalEntered",
                "name": "cpslModalEntered",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when enter animation finishes."
                },
                "complexType": {
                    "original": "null",
                    "resolved": "null",
                    "references": {}
                }
            }, {
                "method": "cpslModalExiting",
                "name": "cpslModalExiting",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when exit animation starts."
                },
                "complexType": {
                    "original": "null",
                    "resolved": "null",
                    "references": {}
                }
            }, {
                "method": "cpslModalExited",
                "name": "cpslModalExited",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when exit animation finishes."
                },
                "complexType": {
                    "original": "null",
                    "resolved": "null",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "open",
                "methodName": "toggleHeight"
            }];
    }
}
//# sourceMappingURL=cpsl-modal-v2.js.map
