import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { _ as __decorate, a as __metadata } from './tslib.es6.js';
import { B as BEM } from './bem.js';
import { i as isDescendant } from './helpers.js';
import { L as Logger } from './log.js';
import { B as BalScrollHandler } from './scroll.js';
import { L as ListenToResize } from './resize.decorator.js';

const balNavMenuFlyoutCss = ":root{--bal-nav-menu-flyout-border-background:var(--bal-color-grey)}.bal-nav-menu-flyout{position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;padding-bottom:2.5rem;overflow-y:auto;max-height:calc(var(--bal-app-height, 100%) - 90px - 48px - 16px);width:calc(100% + 1rem + 1rem);margin-left:-1rem;margin-right:-1rem}.bal-nav-menu-flyout__container{-ms-flex-positive:1;flex-grow:1;margin:0 auto;position:relative;width:auto;width:100% !important;padding-left:var(--bal-container-space);padding-right:var(--bal-container-space)}.bal-nav-menu-flyout__container--fluid{max-width:var(--bal-container-size-fluid) !important}.bal-nav-menu-flyout__container--detail-page{max-width:var(--bal-container-size-detail-page) !important}.bal-nav-menu-flyout__container--compact{max-width:var(--bal-container-size-compact) !important}.bal-nav-menu-flyout__container--blog-page{max-width:var(--bal-container-size-blog-page) !important}@media screen and (min-width: 769px),print{.bal-nav-menu-flyout__container{padding-left:var(--bal-container-space-tablet);padding-right:var(--bal-container-space-tablet)}}@media screen and (min-width: 1024px){.bal-nav-menu-flyout__container{padding-left:var(--bal-container-space-desktop);padding-right:var(--bal-container-space-desktop);max-width:var(--bal-container-size-normal)}}.bal-nav-menu-flyout .bal-nav-menu-flyout__line{position:-webkit-sticky;position:sticky;width:100%;left:0;top:0;height:1px;background-color:var(--bal-color-grey);margin-bottom:2.5rem}@media screen and (min-width: 1440px)and (max-width: 1539px){.bal-nav-menu-flyout .bal-nav-menu-flyout__line{width:calc(100% - 2rem);left:1rem}}@media screen and (min-width: 769px),print{.bal-nav-menu-flyout{width:calc(100% + 2.5rem + 2.5rem);margin-left:-2.5rem;margin-right:-2.5rem}}@media screen and (min-width: 1024px){.bal-nav-menu-flyout{width:calc(100% + 3rem + 3rem);margin-left:-3rem;margin-right:-3rem}}@media screen and (min-width: 1440px){.bal-nav-menu-flyout{max-height:calc(var(--bal-app-height, 100%) - 96px - 48px - 16px)}}";

const NavMenuFlyout = /*@__PURE__*/ proxyCustomElement(class NavMenuFlyout extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.balFocusOut = createEvent(this, "balFocusOut", 7);
        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: '0ade6170ce034d4820781f4c990d3635bb0dfe79', id: `${this.navId}-menu-flyout`, class: Object.assign({}, block.class()) }, h("div", { key: 'a76e5c0918a3b972fee334a7d9262fae315b85c9', class: Object.assign({}, line.class()) }), h("div", { key: 'd71930bf624ee077c46cf7139f012c7116dc1dc7', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: 'ff98f9f52e602ec787230b9a91a64920531e1152' }))));
    }
    get el() { return this; }
    static get style() { return balNavMenuFlyoutCss; }
}, [260, "bal-nav-menu-flyout", {
        "navId": [1, "nav-id"],
        "isHidden": [32]
    }, [[0, "focusout", "onFocusLeave"]]]);
__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;
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bal-nav-menu-flyout"];
    components.forEach(tagName => { switch (tagName) {
        case "bal-nav-menu-flyout":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, NavMenuFlyout);
            }
            break;
    } });
}

export { NavMenuFlyout as N, defineCustomElement as d };
