'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-d337cd8a.js');
const helpers = require('./helpers-81cd6930.js');
require('./constants-4d389abc.js');

const icNavigationMenuCss = ":host{display:block;position:fixed;top:0;left:0;width:100%;min-height:100% !important;background:rgb(0 0 0 / 60%);z-index:var(--ic-z-index-navigation-menu)}.popout-modal{position:absolute;inset:0}.popout-menu{position:fixed;top:0;right:0;width:16rem;bottom:0;background-color:var(--ic-top-navigation-menu-background);color:var(--ic-top-navigation-nav-item);--ic-typography-color:var(--ic-top-navigation-nav-item);box-shadow:var(--ic-elevation-overlay);overflow-y:auto;overflow-x:hidden}:host(.inline) .popout-menu{position:absolute}.menu-close-button-container{position:relative;left:11.875rem;padding:var(--ic-space-md) 0}.nav-group-first{padding-bottom:0}.menu-buttons-container{padding:var(--ic-space-sm) 0;border-bottom:var(--ic-border-width) solid var(--ic-architectural-200)}.menu-buttons-container-nav-item-above{margin-top:var(--ic-space-md);border-top:var(--ic-border-width) solid var(--ic-architectural-200)}.menu-status-version-container{display:flex;flex-wrap:wrap;gap:var(--ic-space-xs);padding:var(--ic-space-md) var(--ic-space-md) var(--ic-space-xl)}.status-version-no-buttons{border-top:var(--ic-space-1px) solid var(--ic-architectural-200)}.menu-status{background-color:var(--ic-status-tag-neutral);--ic-typography-color:var(--ic-color-text-inverted);border-radius:var(--ic-space-md);width:-moz-fit-content;width:fit-content;padding:var(--ic-space-xxs) var(--ic-space-sm)}.menu-version{border-radius:var(--ic-space-md);background-color:var(--ic-status-tag-outlined-background-neutral-contrast);--ic-typography-color:var(--ic-color-text-primary-light);padding:var(--ic-space-xxs) var(--ic-space-sm)}.menu-status-text,.menu-version-text{overflow-wrap:break-word}.navigation-landmark-text{position:absolute;width:var(--ic-space-1px);height:var(--ic-space-1px);padding:0;margin:calc(-1 * var(--ic-space-1px));overflow:hidden}";
const IcNavigationMenuStyle0 = icNavigationMenuCss;

const NAV_GROUP_TAG = "IC-NAVIGATION-GROUP";
const NAV_ITEM_TAG = "IC-NAVIGATION-ITEM";
const NavigationMenu = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.icNavigationMenuClose = index.createEvent(this, "icNavigationMenuClose", 7);
        this.hasButtons = false;
        this.hasNavigation = false;
        this.lastTabStop = null;
        this.navGroupFirst = false;
        this.navItemAboveButtons = false;
        /**
         * The status info to display.
         */
        this.status = "";
        /**
         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
         */
        this.theme = "inherit";
        /**
         * The version info to display.
         */
        this.version = "";
        this.setLastTabStop = (lastNavGroupExpanded) => {
            let lastEl = this.navigationEls[this.navigationEls.length - 1];
            if (lastEl.tagName === NAV_GROUP_TAG && lastNavGroupExpanded) {
                const childNavItems = lastEl.children;
                lastEl = childNavItems[childNavItems.length - 1];
            }
            if (lastEl.tagName === NAV_ITEM_TAG) {
                //check for slotted content i.e. react router link
                const slotContent = helpers.getSlot(lastEl, "navigation-item");
                if (slotContent !== null) {
                    lastEl = slotContent;
                }
            }
            this.lastTabStop = lastEl;
        };
        this.closeMenu = () => {
            this.icNavigationMenuClose.emit();
        };
        this.focusCloseButton = () => {
            var _a;
            (_a = this.closeButton) === null || _a === void 0 ? void 0 : _a.focus();
        };
        this.focusLastTabStop = () => {
            let focusEl;
            if (this.lastTabStop !== null) {
                switch (this.lastTabStop.tagName) {
                    case "IC-NAVIGATION-BUTTON":
                    case NAV_ITEM_TAG:
                    case NAV_GROUP_TAG:
                        focusEl = this.lastTabStop;
                        focusEl.focus();
                        break;
                    case "A":
                        this.lastTabStop.focus();
                        break;
                }
            }
        };
    }
    componentWillLoad() {
        this.navBarEl = document.querySelector("ic-top-navigation");
        this.navigationEls = helpers.getSlotContent(this.el, "navigation");
        if (this.navigationEls) {
            this.hasNavigation = true;
            const lastEl = this.navigationEls[this.navigationEls.length - 1];
            if (lastEl.tagName === NAV_ITEM_TAG) {
                this.navItemAboveButtons = true;
            }
            else if (lastEl.tagName === NAV_GROUP_TAG) {
                lastEl.addEventListener("navigationGroupExpanded", ((event) => {
                    this.setLastTabStop(event.detail.expanded);
                }));
            }
            const firstEl = this.navigationEls[0];
            if (firstEl.tagName === NAV_GROUP_TAG) {
                this.navGroupFirst = true;
            }
        }
        const buttonContent = helpers.getSlotContent(this.el, "buttons");
        if (buttonContent !== null) {
            this.hasButtons = true;
            this.lastTabStop = buttonContent[buttonContent.length - 1];
        }
        else {
            if (this.hasNavigation && this.navigationEls) {
                this.setLastTabStop(false);
            }
        }
    }
    componentDidLoad() {
        this.focusCloseButton();
    }
    componentWillRender() {
        this.hasNavigation = helpers.isSlotUsed(this.el, "navigation");
        this.hasButtons = helpers.isSlotUsed(this.el, "buttons");
    }
    navItemClickHandler() {
        this.closeMenu();
    }
    handleKeyDown(ev) {
        if (ev.key === "Tab") {
            if (ev.shiftKey) {
                if (document.activeElement === this.navBarEl) {
                    ev.preventDefault();
                    this.focusLastTabStop();
                }
            }
            else if (document.activeElement === this.lastTabStop ||
                this.lastTabStop === null) {
                ev.preventDefault();
                this.focusCloseButton();
            }
        }
        else if (ev.key === "Escape") {
            this.closeMenu();
        }
    }
    render() {
        return (index.h(index.Host, { key: 'ac63539f6c719e4301e5dc9c5da00e1029686b30', class: { [`ic-theme-${this.theme}`]: this.theme !== "inherit" } }, index.h("div", { key: '18265d55b05cc1412fc61b1b2dd1fb0bc90ea260', class: "popout-modal", onClick: this.closeMenu }), index.h("div", { key: '7b1e84b4f504b6f5430de693e29b8dd573183ebf', class: "popout-menu", role: "dialog", "aria-modal": "true", "aria-label": `${this.hasNavigation ? "Navigation" : "App"} menu` }, index.h("span", { key: '1b2d95e6f90b9c8fd6d108619166830d9139d518', "aria-hidden": "true", id: "navigation-landmark-text", class: "navigation-landmark-text" }, "Main navigation"), index.h("nav", { key: '4f0400371b0005238851d763e119ca9822f6386c', "aria-labelledby": "navigation-landmark-text", "aria-hidden": this.hasNavigation ? "false" : "true" }, index.h("div", { key: '55745ebcb8e4f88f3b0b499a36e7a1d8bfaf1598', class: {
                ["menu-close-button-container"]: true,
                ["nav-group-first"]: this.navGroupFirst,
            } }, index.h("ic-button", { key: '8a40b35da2336562fb0a4bad6d6e40236796aeae', ref: (el) => (this.closeButton = el), id: "menu-close-button", class: "menu-close-button", variant: "icon-tertiary", size: "large", "aria-label": `Close ${this.hasNavigation ? "navigation" : "app"} menu`, onClick: this.closeMenu }, index.h("svg", { key: '789aa723a6fd133f5620649224afab29986f6b18', width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '75dd71b1d6656d9f3c1d9bce05eb02a90e8ffda0', d: "M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" })))), this.hasNavigation && index.h("slot", { key: '5722c097933587563a0551ada79b994c413d6f41', name: "navigation" })), this.hasButtons && (index.h("div", { key: '1cdcb5873efce302d10c922c6826d29c2b43a926', class: {
                ["menu-buttons-container"]: true,
                ["menu-buttons-container-nav-item-above"]: this.navItemAboveButtons,
            } }, index.h("slot", { key: 'b2c9c585c7b0993bee785c1eb1c113d5aabecb92', name: "buttons" }))), (this.status !== "" || this.version !== "") && (index.h("div", { key: '37042390776accbdcab1fb0df068cca0e199d58a', class: {
                ["menu-status-version-container"]: true,
                ["status-version-no-buttons"]: !this.hasButtons,
            } }, this.status !== "" && (index.h("div", { key: '660fa1e6ddc8c42e75b4abc98950429b25461b1d', class: "menu-status" }, index.h("ic-typography", { key: '00e6f1a08da2acff8079b52924c4c52fe5a6013a', variant: "label-uppercase", "aria-label": "app tag", class: "menu-status-text" }, this.status))), this.version !== "" && (index.h("div", { key: 'b8643188baaf9d524c1e8c11b144e65f55d178d7', class: "menu-version" }, index.h("ic-typography", { key: 'bda827b0f1ddcfbb7dbd62378df84f9773039bf1', variant: "label", class: "menu-version-text", "aria-label": "app version" }, this.version))))))));
    }
    get el() { return index.getElement(this); }
};
NavigationMenu.style = IcNavigationMenuStyle0;

exports.ic_navigation_menu = NavigationMenu;

//# sourceMappingURL=ic-navigation-menu.cjs.entry.js.map