import { __decorate, __metadata } from "tslib";
import { Host, h, } from "@stencil/core";
import { BEM } from "../../../utils/bem";
import { isDescendant } from "../../../utils/helpers";
import { Logger } from "../../../utils/log";
import { ListenToResize } from "../../../utils/resize";
import { BalScrollHandler } from "../../../utils/scroll";
export class NavMenuFlyout {
    constructor() {
        this.bodyScrollHandler = new BalScrollHandler();
        this.isHidden = false;
        /**
         * PUBLIC PROPERTY API
         * ------------------------------------------------------
         */
        /**
         * This is used to connect the flyout to the aria controls
         * */
        this.navId = `bal-nav-x${NavMenuFlyOutIds++}`;
    }
    createLogger(log) {
        this.log = log;
    }
    /**
     * LIFECYCLE
     * ------------------------------------------------------
     */
    connectedCallback() {
        this.bodyScrollHandler.connect();
    }
    disconnectedCallback() {
        this.bodyScrollHandler.disconnect();
    }
    /**
     * LISTENERS
     * ------------------------------------------------------
     */
    onFocusLeave(event) {
        if (this.el && event.relatedTarget && !isDescendant(this.el, event.relatedTarget)) {
            this.balFocusOut.emit(event);
        }
    }
    resizeListener() {
        if (this.isFlyoutScrollable()) {
            this.bodyScrollHandler.disable();
        }
        else {
            this.bodyScrollHandler.enable();
        }
    }
    /**
     * PRIVATE METHODS
     * ------------------------------------------------------
     */
    isFlyoutScrollable() {
        var _a, _b;
        return ((_a = this.el) === null || _a === void 0 ? void 0 : _a.scrollHeight) > ((_b = this.el) === null || _b === void 0 ? void 0 : _b.clientHeight);
    }
    /**
     * RENDER
     * ------------------------------------------------------
     */
    render() {
        const block = BEM.block('nav-menu-flyout');
        const line = block.element('line');
        return (h(Host, { key: '5b8b721ba798c1b821379db4eb80bb99d03cbc5b', id: `${this.navId}-menu-flyout`, class: Object.assign({}, block.class()) }, h("div", { key: 'b17ee85558e1fcd48d98f1b1744f7484f105e5dc', class: Object.assign({}, line.class()) }), h("div", { key: 'b864ab407819d5169e5ac03108d15f1cd0383715', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '2e517d14555faa2f42447ea55208c3580882fa7b' }))));
    }
    static get is() { return "bal-nav-menu-flyout"; }
    static get originalStyleUrls() {
        return {
            "$": ["bal-nav-menu-flyout.sass"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bal-nav-menu-flyout.css"]
        };
    }
    static get properties() {
        return {
            "navId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "This is used to connect the flyout to the aria controls"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "nav-id",
                "defaultValue": "`bal-nav-x${NavMenuFlyOutIds++}`"
            }
        };
    }
    static get states() {
        return {
            "isHidden": {}
        };
    }
    static get events() {
        return [{
                "method": "balFocusOut",
                "name": "balFocusOut",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the flyout loses focus"
                },
                "complexType": {
                    "original": "BalEvents.BalNavFlyoutFocusOutDetail",
                    "resolved": "FocusEvent",
                    "references": {
                        "BalEvents": {
                            "location": "global",
                            "id": "global::BalEvents"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "focusout",
                "method": "onFocusLeave",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
__decorate([
    Logger('bal-nav-menu-flyout'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Function]),
    __metadata("design:returntype", void 0)
], NavMenuFlyout.prototype, "createLogger", null);
__decorate([
    ListenToResize(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], NavMenuFlyout.prototype, "resizeListener", null);
let NavMenuFlyOutIds = 0;
