import { Host, h } from "@stencil/core";
import { DEFAULT_Z_INDICES } from "../../constants.js";
export class CpslDrawer {
    constructor() {
        this.closedAnchorPosition = undefined;
        this.showTransition = undefined;
        this.anchor = undefined;
        this.anchorPosition = undefined;
        this.noOverlay = undefined;
        this.open = undefined;
        this.size = undefined;
        this.transitionDuration = 0.15;
        this.transitionFunction = 'ease-in-out';
        this.variant = 'temporary';
        this.zIndexOverride = undefined;
    }
    componentDidLoad() {
        this.closedAnchorPosition = `-${this.getContainerHeight()}px`;
        // Show transition after initial render
        setTimeout(() => {
            this.showTransition = true;
        }, 100);
    }
    getContainerHeight() {
        var _a;
        return (_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.clientHeight;
    }
    get containerEl() {
        return this.el.shadowRoot.getElementById('container');
    }
    render() {
        var _a;
        const setHeight = this.anchor === 'top' || this.anchor === 'bottom';
        const startingAnchor = (_a = `${this.anchorPosition}px`) !== null && _a !== void 0 ? _a : '0px';
        const size = this.size === 'auto' ? 'auto' : `${this.size}px`;
        return (h(Host, { key: 'a658bc7f4a536ad193ffa83045fc9ee051ce00c8', style: Object.assign({ width: setHeight ? '100vw' : size, height: setHeight ? size : '100vh', transitionDuration: `${this.showTransition ? this.transitionDuration : 0}s`, transitionTimingFunction: `${this.transitionFunction}`, [this.anchor]: this.open || this.variant === 'permanent' ? startingAnchor : this.closedAnchorPosition, opacity: this.closedAnchorPosition === undefined ? '0' : '1' }, (this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {})), class: {
                top: this.anchor === 'top',
                bottom: this.anchor === 'bottom',
                left: this.anchor === 'left',
                right: this.anchor === 'right',
            } }, this.variant === 'temporary' && !this.noOverlay && h("cpsl-overlay", { key: '4af453a7893322c7327e4ae2daa36c510d79f63a', open: this.open, zIndexOverride: DEFAULT_Z_INDICES.modal + 1 }), h("div", { key: 'd223fe6203a4b927a4c7b4254fbf74bd0c5b7ba4', id: "container", class: "container", part: "container" }, h("slot", { key: 'c297bc0a9ce799ea62e84a7c15b3d56279424091' }))));
    }
    static get is() { return "cpsl-drawer"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["cpsl-drawer.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["cpsl-drawer.css"]
        };
    }
    static get properties() {
        return {
            "anchor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'top' | 'bottom' | 'left' | 'right'",
                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Side from which the drawer will enter from."
                },
                "attribute": "anchor",
                "reflect": false
            },
            "anchorPosition": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Starting anchor position."
                },
                "attribute": "anchor-position",
                "reflect": false
            },
            "noOverlay": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Hides the overlay for temporary drawers."
                },
                "attribute": "no-overlay",
                "reflect": false
            },
            "open": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether the drawer is open or not."
                },
                "attribute": "open",
                "reflect": false
            },
            "size": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "number | 'auto'",
                    "resolved": "\"auto\" | number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Size (height or width) of the drawer."
                },
                "attribute": "size",
                "reflect": false
            },
            "transitionDuration": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Duration in seconds of the open/close animation.\nDefault is 0.15."
                },
                "attribute": "transition-duration",
                "reflect": false,
                "defaultValue": "0.15"
            },
            "transitionFunction": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Transition timing function to use.\nDefault is ease-in-out."
                },
                "attribute": "transition-function",
                "reflect": false,
                "defaultValue": "'ease-in-out'"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'temporary' | 'permanent'",
                    "resolved": "\"permanent\" | \"temporary\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The variant of the drawer.\n`temporary` drawers will cover content and contain a backdrop. `permanent` drawers will sit beside content, i.e. desktop navigation.\nDefault is `temporary`."
                },
                "attribute": "variant",
                "reflect": false,
                "defaultValue": "'temporary'"
            },
            "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 states() {
        return {
            "closedAnchorPosition": {},
            "showTransition": {}
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=cpsl-drawer.js.map
