import { h, Host } from "@stencil/core";
import { registerClickOutside } from "stencil-click-outside";
import { govHost, toBoolAttr } from "../../../helpers/Dom/template";
import { createID } from "../../../utils/string.utils";
import { ButtonClass } from "../button/constants";
import { DropdownClass, Position } from "./constants";
export class GovDropdown {
    constructor() {
        /**
         * Dropdown state
         */
        this.open = false;
        /**
         * Menu display position
         */
        this.position = Position.LEFT;
        this.h = govHost(this.host);
        this.listId = createID("GovDropdownList");
        this.controlId = createID("GovDropdownControl");
    }
    watchOpen() {
        var _a;
        (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-expanded", toBoolAttr(this.open));
    }
    get trigger() {
        return this.host.querySelector(`* > ${ButtonClass.root}`);
    }
    get list() {
        return this.h.getSlot("list");
    }
    componentWillLoad() {
        var _a;
        if (!this.trigger)
            return;
        this.trigger.setAttribute("aria-controls", this.listId);
        this.trigger.setAttribute("aria-haspopup", toBoolAttr(!!this.list));
        this.trigger.setAttribute("aria-expanded", toBoolAttr(this.open));
        this.trigger.setAttribute("identifier", (_a = this.identifier) !== null && _a !== void 0 ? _a : this.controlId);
        this.trigger.addEventListener("gov-click", (e) => {
            e.preventDefault();
            e.stopPropagation();
            this.open = !this.open;
            this.govChange.emit({
                component: DropdownClass.root,
                originalEvent: e,
                open: this.open,
            });
        });
    }
    render() {
        return (h(Host, { key: '24e596043840ec3b4e2ae0c59cecd1ec5425f5b5', class: this.h.classes([DropdownClass.root]), open: this.open, position: this.position }, h("slot", { key: '5c9c344162c6842585b134b327e9d45e4c1df19e' }), h("div", { key: 'b424408e77eaebc2eedfe5ac1c7a916808af21f7', ref: el => registerClickOutside(this, el, () => this.open = false), class: DropdownClass.list, id: this.listId, "aria-labelledby": this.controlId, "aria-hidden": toBoolAttr(!this.open), hidden: !this.open }, h("slot", { key: 'b39d21fd27642fd5e7ece4b9d68de2e8468b93ae', name: "list" }))));
    }
    /**
     * Returns the current state of the dropdown
     */
    async getState() {
        return this.open;
    }
    /**
     * Toggle state of dropdown
     */
    async toggle() {
        this.open = !this.open;
    }
    static get is() { return "gov-dropdown"; }
    static get properties() {
        return {
            "identifier": {
                "type": "string",
                "attribute": "identifier",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Custom trigger identifier"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "open": {
                "type": "boolean",
                "attribute": "open",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Dropdown state"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "position": {
                "type": "string",
                "attribute": "position",
                "mutable": false,
                "complexType": {
                    "original": "PositionType",
                    "resolved": "\"left\" | \"right\"",
                    "references": {
                        "PositionType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-button/dropdown/constants.ts::PositionType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Menu display position"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "Position.LEFT"
            }
        };
    }
    static get events() {
        return [{
                "method": "govChange",
                "name": "gov-change",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the dropdown change state"
                },
                "complexType": {
                    "original": "DropdownEvent",
                    "resolved": "DropdownEvent",
                    "references": {
                        "DropdownEvent": {
                            "location": "import",
                            "path": "./gov-dropdown.types",
                            "id": "../../../packages/core/src/components/gov-button/dropdown/gov-dropdown.types.ts::DropdownEvent"
                        }
                    }
                }
            }];
    }
    static get methods() {
        return {
            "getState": {
                "complexType": {
                    "signature": "() => Promise<boolean>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<boolean>"
                },
                "docs": {
                    "text": "Returns the current state of the dropdown",
                    "tags": []
                }
            },
            "toggle": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Toggle state of dropdown",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "open",
                "methodName": "watchOpen"
            }];
    }
}
//# sourceMappingURL=gov-dropdown.js.map
