import { h } from "@stencil/core";
import { lockScroll, unlockScroll, getNextZIndex } from "../../utils/popup-manager";
import { createFocusTrap } from "../../utils/a11y";
export class Drawer {
    modelValue = false;
    title = '';
    size = '30%';
    direction = 'rtl';
    closeOnClickModal = true;
    showClose = true;
    modal = true;
    /** 是否按 ESC 关闭 */
    closeOnPressEscape = true;
    zIndexState = 0;
    zIndex = 0;
    panelRef;
    trap;
    hbOpen;
    hbClose;
    handleVisible(val) {
        if (val) {
            this.zIndex = getNextZIndex();
            this.zIndexState = this.zIndex;
            if (this.modal)
                lockScroll();
            this.hbOpen.emit();
            document.addEventListener('keydown', this.handleKeyDown);
        }
        else {
            if (this.modal)
                unlockScroll();
            this.hbClose.emit();
            document.removeEventListener('keydown', this.handleKeyDown);
        }
    }
    componentDidRender() {
        if (!this.panelRef)
            return;
        if (this.modelValue) {
            if (!this.trap) {
                this.trap = createFocusTrap({ container: this.panelRef });
            }
            this.trap.connect();
        }
        else {
            this.trap?.disconnect();
        }
    }
    disconnectedCallback() {
        if (this.modelValue && this.modal)
            unlockScroll();
        document.removeEventListener('keydown', this.handleKeyDown);
        this.trap?.disconnect();
    }
    handleKeyDown = (e) => {
        if (this.closeOnPressEscape && e.key === 'Escape') {
            this.close();
        }
    };
    close = () => { this.modelValue = false; };
    render() {
        const dir = this.direction;
        const isVertical = dir === 'ttb' || dir === 'btt';
        const sizeStyle = isVertical ? { height: this.size } : { width: this.size };
        const translateClass = `hb-drawer--${dir}`;
        return (h("div", { key: 'fdcae509a34a2de7ba9405106b217fda8ce765fa', class: { 'hb-drawer-wrapper': true, 'hb-drawer-wrapper--visible': this.modelValue } }, this.modal && h("div", { key: '439a2a35c0936bc0e347e7826f801dbf87d1047b', class: "hb-drawer__overlay", style: { zIndex: String(this.zIndexState) }, onClick: () => this.closeOnClickModal && this.close() }), h("div", { key: '924fc27dc43f9d7b466b81a7b70cbfb1a6ba199e', ref: (el) => (this.panelRef = el), class: { 'hb-drawer': true, [translateClass]: true, 'hb-drawer--visible': this.modelValue }, style: { ...sizeStyle, zIndex: String(this.zIndexState + 1) }, role: "dialog", "aria-modal": "true", "aria-label": this.title || undefined }, h("div", { key: '6c0c1e6e4938ad96c51add0e4be93de8ef72a056', class: "hb-drawer__header" }, h("span", { key: 'bc061a418b7358364b19190cc6b042fb5a049c95', class: "hb-drawer__title" }, this.title), this.showClose && h("button", { key: '52ceeac26c55f0e89c8c4410959c25b13ab2e28b', type: "button", class: "hb-drawer__close", "aria-label": "\u5173\u95ED", onClick: this.close }, "\u00D7")), h("div", { key: 'ca916f681e9c7e4fb33d1d0b7cee03a20f42f7eb', class: "hb-drawer__body" }, h("slot", { key: 'f8a3fb1d251d5c16c98257bb8896c081623f321e' })))));
    }
    static get is() { return "hb-drawer"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["drawer.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["drawer.css"]
        };
    }
    static get properties() {
        return {
            "modelValue": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "model-value",
                "reflect": false,
                "defaultValue": "false"
            },
            "title": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "title",
                "reflect": false,
                "defaultValue": "''"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "'30%'"
            },
            "direction": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'ltr' | 'rtl' | 'ttb' | 'btt'",
                    "resolved": "\"btt\" | \"ltr\" | \"rtl\" | \"ttb\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "direction",
                "reflect": false,
                "defaultValue": "'rtl'"
            },
            "closeOnClickModal": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "close-on-click-modal",
                "reflect": false,
                "defaultValue": "true"
            },
            "showClose": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "show-close",
                "reflect": false,
                "defaultValue": "true"
            },
            "modal": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "modal",
                "reflect": false,
                "defaultValue": "true"
            },
            "closeOnPressEscape": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u6309 ESC \u5173\u95ED"
                },
                "getter": false,
                "setter": false,
                "attribute": "close-on-press-escape",
                "reflect": false,
                "defaultValue": "true"
            }
        };
    }
    static get states() {
        return {
            "zIndexState": {}
        };
    }
    static get events() {
        return [{
                "method": "hbOpen",
                "name": "hbOpen",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "hbClose",
                "name": "hbClose",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "modelValue",
                "methodName": "handleVisible"
            }];
    }
}
//# sourceMappingURL=Drawer.js.map
