/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { r as registerInstance, g as getElement, d as writeTask, a as Host } from './index-BM3Om9WE.js';
import { c as closestElement } from './dom-dlicJTEJ.js';
import { t as transformTag, h } from './renderer-DpNDfhNy.js';
import { H as HasSlotController } from './slot-Crs4khNK.js';

const menuDrawerCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--padding-top:13px;--padding-end:13px;--padding-bottom:13px;--padding-start:13px;--icon-size:19px;--font-size:var(--nano-font-size-xs);--bg-color:var(--nano-color-surface-50);--bg-color-hover:var(--nano-color-neutral-75);--bg-color-selected:var(--nano-color-neutral-300);--bg-color-open:var(--nano-color-neutral-300);--content-color:var(--nano-color-neutral-1400);--divider-color:var(--nano-color-neutral-300);--global-nav-height:76px;--menu-width:calc((var(--padding-end) + var(--padding-start)) + var(--icon-size));color-scheme:dark;display:block;z-index:1;background:var(--bg-color);color:var(--content-color);min-block-size:100%}:host(.hide){display:none}.head{border-block-end:var(--divider-color) 1px solid}.container{inset-inline-end:auto;color:var(--content-color);inline-size:var(--menu-width);transition:inline-size 0.3s ease;inset-block-start:var(--global-nav-height);position:sticky;display:flex;flex-direction:column;block-size:100%;max-block-size:calc(100vh - var(--global-nav-height))}:host(.open) .container{inline-size:auto}.content-wrap{inset-inline-start:0;inset-block-start:0;inline-size:inherit;background:var(--bg-color);font-size:var(--font-size);line-height:1;display:flex;flex-direction:column;align-items:stretch;flex:1;box-shadow:var(--nano-shadow-ls)}.content-wrap.secondary-open{box-shadow:none}.content-wrap::after{content:\"\";position:absolute;inset:calc(var(--global-nav-height) * -1) 0 0;background-color:var(--bg-color);z-index:-1}.content{inline-size:auto;display:flex;flex-direction:column;overflow:hidden visible;flex:1}.collapse-btn{all:unset;padding-block:6px;margin-block-start:5px;padding-inline:var(--padding-start) var(--padding-end);inline-size:100%;display:flex;justify-items:flex-start;appearance:none;cursor:pointer;font-size:var(--icon-size)}.collapse-btn:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.collapse-btn:hover{background-color:var(--bg-color-hover)}.collapse-btn:active{background-color:var(--bg-color-selected)}.collapse-btn .nano-icon{transition:var(--nano-transition-x-fast) rotate ease-in-out;rotate:0deg}:host(.open) .collapse-btn .nano-icon{rotate:180deg}.visually-hidden{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.foot{margin-block:auto var(--padding-bottom)}";

const MenuDrawer = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    containerDiv;
    contentDiv;
    globalNav;
    children = [];
    ro;
    slotCtrl = new HasSlotController(this, 'foot');
    get el() { return getElement(this); }
    reset = false;
    isLoading = true;
    hide = false;
    secondaryOpen = false;
    /**
     * Set the initial menu drawer open or closed
     */
    open = true;
    /**
     * Global-nav width to hide the menu drawer and move the items into the nano-global-nav
     */
    hideWidth = 576;
    cancelNavItemEvents(ev) {
        if (!ev.detail.secondaryMenu)
            return;
        ev.stopPropagation();
        this.secondaryOpen = ev.type === 'nanoOpen';
    }
    openChange() {
        {
            localStorage.setItem('nanoMenuDrawerOpen', this.open.toString());
        }
        if (this.containerDiv) {
            const documentWidth = document.documentElement.clientWidth;
            const scrollbarWidth = Math.abs(window.innerWidth - documentWidth);
            if (this.open) {
                const menuWidth = this.contentDiv.scrollWidth;
                writeTask(() => {
                    this.containerDiv.style.width = menuWidth + 'px';
                    this.containerDiv.style.setProperty('--menu-width', menuWidth + 'px');
                    this.containerDiv.style.setProperty('--scrollbar-width', scrollbarWidth + 'px');
                });
            }
            else {
                writeTask(() => {
                    this.containerDiv.style.width = null;
                    this.containerDiv.style.removeProperty('--menu-width');
                    this.containerDiv.style.setProperty('--scrollbar-width', scrollbarWidth + 'px');
                });
            }
        }
    }
    moveItemsToGlobalNav() {
        // dimensions not cool - move items out of element and into global nav
        const currNavItems = this.el.querySelectorAll(transformTag('nano-nav-item'));
        this.hide = true;
        this.globalNav.triggerResize();
        currNavItems.forEach((element) => {
            this.children.push({
                slot: element.getAttribute('slot'),
                element: element,
            });
            element.setAttribute('slot', 'menu');
            element.classList.add('nano-global-nav-menu');
            this.globalNav.appendChild(element);
        });
    }
    moveItemsToDrawer() {
        if (!this.children || !this.children.length)
            return;
        this.children.forEach((child) => {
            child.element.removeAttribute('slot');
            child.element.classList.remove('nano-global-nav-menu');
            if (child.slot && child.slot.length)
                child.element.setAttribute('slot', child.slot);
            this.el.appendChild(child.element);
        });
        this.children = [];
        this.hide = false;
    }
    onResize = () => {
        if (!this.globalNav || false)
            return;
        const { width } = this.globalNav.getBoundingClientRect();
        if (width > this.hideWidth) {
            this.moveItemsToDrawer();
        }
        else {
            this.moveItemsToGlobalNav();
        }
    };
    toggle = (e) => {
        e.preventDefault();
        this.open = !this.open;
    };
    attachRO() {
        if (this.ro)
            return;
        this.ro = new ResizeObserver(() => {
            this.onResize();
        });
        this.ro.observe(this.globalNav);
    }
    componentWillLoad() {
        this.globalNav = closestElement(transformTag('nano-global-nav'), this.el);
        if (!this.globalNav) {
            console.warn('nano-menu-drawer: no nano-global-nav found in the document. nano-global-nav is required to use nano-menu-drawer.');
        }
        {
            const localState = localStorage.getItem('nanoMenuDrawerOpen');
            this.open = localState
                ? localState === 'true'
                    ? true
                    : false
                : this.open;
            this.globalNav.componentOnReady().then(() => {
                this.openChange();
            });
        }
    }
    connectedCallback() {
        this.onResize();
    }
    componentDidLoad() {
        this.attachRO();
    }
    disconnectedCallback() {
        {
            this.ro?.disconnect();
            this.ro = undefined;
        }
    }
    render() {
        return (h(Host, { key: 'bed821db8e5a30f26c3c9bad45b01321bdf4ca77', class: {
                open: this.open,
                'secondary-open': this.secondaryOpen,
                hide: this.hide,
                loading: this.isLoading,
                'has-global-nav': !!this.globalNav,
                'nano-menu-drawer': true,
            }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null }, h("div", { key: 'e80fe18a73873359fc1d86ca93a06b8c6d3173c1', ref: (div) => (this.containerDiv = div), class: "container" }, h("div", { key: 'fe83b1858bacd94f3e0540ee3933d1018f7bfb9d', class: `content-wrap ${this.secondaryOpen ? 'secondary-open' : ''}` }, h("nav", { key: 'bed3b6c253cf16f8a796393be71c2c1b9aebd266', ref: (div) => (this.contentDiv = div), class: "content" }, h("div", { key: 'a8ea363c51345c83fcbf8723a32627bd99c5a9cf', class: "head" }, h("button", { key: 'fa9765354704685582e64771ded73c30c88e0374', onClick: this.toggle, class: "collapse-btn" }, h("nano-icon", { key: '0489c46c0c76a72720daf6656e26c2946433bccc', name: "light/arrow-right-to-line" }), h("span", { key: '81b00aaf09a528d6137351df20e23149a5325bf0', class: "visually-hidden" }, "collapse / expand menu"))), h("slot", { key: 'ab5f6ed3b81b2d5f741a1d102a12db5b0f68bae7' }), this.slotCtrl.has('foot') && (h("div", { key: 'dbb8345173ee78b9685cc46c6dcde5c2d617a868', class: "foot" }, h("slot", { key: '93bfeb1493a1d5e9a420803a09e64dced877591b', name: "foot" }))))))));
    }
    static get watchers() { return {
        "open": ["openChange"]
    }; }
};
MenuDrawer.style = menuDrawerCss;

export { MenuDrawer as nano_menu_drawer };
