/*!
 * Custom elements for Nanopore-Digital Web applications
 */
'use strict';

var index = require('./index-DGttnXif.js');
var renderer = require('./renderer-jVpDRMfV.js');
var slot = require('./slot-CfuOT0U4.js');
var dom = require('./dom-Dxk5vXYq.js');
var scroll = require('./scroll-C6pO9RvO.js');

const inPageNavCss = ":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{display:block}:host(.external-links){--color-bg:var(--nano-color-base-0) !important}:host(.external-links) .nano-details{--border-active:3px solid var(--nano-color-neutral-1200) !important}:host(.external-links) nav{border-block:1px solid var(--nano-color-neutral-200)}.desktop-nav{display:block}@media (width <= 730px){.desktop-nav{display:none}}.mobile-nav{display:none}@media (width <= 730px){.mobile-nav{display:block}}nav{background-color:var(--color-bg);padding:0}@media (width <= 730px){nav:has(.details-wrapper[open]){box-shadow:var(--nano-shadow-l1)}}.header{padding:var(--spacing-l2) var(--spacing-l2) 0;display:flex;flex-direction:column;gap:var(--spacing-l2);font-size:var(--font-size)}.header ::slotted(a[slot=back]),.header::slotted(a[slot=back]){display:flex !important;align-items:center !important;padding:0 !important;margin:0;gap:var(--spacing-l3) !important;cursor:pointer}.header ::slotted(a[slot=back])::before,.header::slotted(a[slot=back])::before{content:\"\";display:inline-block;background-size:cover;inline-size:1rem;block-size:1rem;background-color:var(--color-primary);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;rotate:calc(180deg * var(--flip-icon-ltr))}.details-wrapper{--padding:0;--btn-bg-color:transparent;--btn-bg-color--hover:transparent;--btn-text-color:var(--color-text);border:none}.details-wrapper [part~=header],.details-wrapper::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);padding:var(--spacing-l2)}.details-wrapper[open]::part(header){background-color:var(--nano-color-primary-75)}.details-wrapper::part(content){padding:0}.details-wrapper::part(body){padding:0}.details-wrapper.sticky.stuck[open]::part(header){z-index:var(--nano-z-index-menubar);inset-block-start:0;position:sticky;box-shadow:var(--nano-shadow-l1);padding:var(--spacing-l2)}.details-wrapper a,.details-wrapper ul,.details-wrapper li{all:unset}.details-wrapper ul{display:flex;flex-direction:column;list-style:none}.details-wrapper ul:not(ul ul){padding:0 var(--spacing-l2) 0 var(--spacing-l2)}.details-wrapper a{cursor:pointer}.details-wrapper a:hover{text-decoration:underline}.details-wrapper a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.details-wrapper ul>li:not(ul>li li){margin:0;padding:var(--spacing-l2) 0;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;inline-size:100%}.details-wrapper ul>li:not(ul>li li):not(:last-of-type){border-block-end:1px solid var(--color-bottom-border)}.details-wrapper ul>li:not(ul>li li) span,.details-wrapper ul>li:not(ul>li li) a{color:var(--color-text)}.details-wrapper ul>li:not(ul>li li) span.is-active,.details-wrapper ul>li:not(ul>li li) a.is-active{border-inline-start:var(--border-active);padding-inline-start:1rem;display:block}.details-wrapper ul>li:not(ul>li li) span:hover,.details-wrapper ul>li:not(ul>li li) a:hover{color:var(--color-text-hover)}.details-wrapper nano-details.is-active::part(header){border-inline-start:var(--border-active);padding-inline-start:1rem !important;color:var(--color-primary)}.details-wrapper ul>li>ul,.details-wrapper ul>li>.nano-details ul{padding:var(--list-gap) 0 0 var(--spacing-l2);gap:var(--list-gap)}.details-wrapper ul>li>ul a,.details-wrapper ul>li>.nano-details ul a{color:var(--color-primary) !important}.details-wrapper ul>li>ul>li>.nano-details>ul,.details-wrapper ul>li>.nano-details ul>li>.nano-details ul{padding:var(--list-gap) 0 0 var(--nano-spacing-xl)}.details-wrapper .nano-details .nano-details:not(.nano-details .nano-details .nano-details){color:var(--color-text)}.details-wrapper .nano-details{--padding:0;--btn-bg-color:transparent;--btn-bg-color--open:var(--nano-color-primary-75);--btn-bg-color--hover:transparent;border:none;color:var(--color-primary)}.details-wrapper .nano-details.is-active [part~=header],.details-wrapper .nano-details .is-active::part(header){border-inline-start:var(--border-active);padding-inline-start:1rem !important;color:var(--color-primary)}.details-wrapper .nano-details[open]>[slot=icon-start]{rotate:90deg}.details-wrapper .nano-details::part(icon--start){margin-inline-end:var(--spacing-l3)}.details-wrapper .nano-details [part~=header],.details-wrapper .nano-details::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing)}.details-wrapper .nano-details [part~=header]:hover,.details-wrapper .nano-details::part(header):hover{text-decoration:underline}.details-wrapper .nano-details:not(.nav-details){color:var(--color-primary)}";

const NanoInPageNav = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    get host() { return index.getElement(this); }
    autoExternalLinks = false;
    io;
    mobileNavWrapper;
    slotCtrl = new slot.HasSlotController(this, '[default]', 'back', 'accessory');
    /** Whether the active link should be automatically set based on when a corresponding #id is in view. Defaults to true */
    autoActive = true;
    /** Menus that contain links to external pages should have different styling from in-page anchors */
    externalLinks = 'auto';
    createMobileMenu() {
        const ul = dom.getDirectChildren(this.host, 'ul')[0];
        if (!ul)
            return;
        const cloned = ul.cloneNode(true);
        dom.getDirectChildren(cloned, 'li', true).forEach((li) => {
            const link = dom.getDirectChildren(li, 'a', true)[0];
            const submenu = dom.getDirectChildren(li, 'ul', true)[0];
            if (link && submenu) {
                const details = this.createDetails(link.textContent?.trim() || '', submenu);
                link.remove();
                li.prepend(details);
            }
        });
        this.mobileNavWrapper.appendChild(cloned);
    }
    /**
     * Creates a nano-details element with the given label and submenu.
     * @returns a nano-details element
     */
    createDetails(label, submenu) {
        const node = document.createElement('nano-details');
        node.setAttribute('label', label);
        node.classList.add('nav-details');
        node.appendChild(submenu);
        return node;
    }
    assessLinks() {
        if (this.externalLinks !== 'auto')
            return;
        const anchors = this.host.querySelectorAll('a[href^="#"]');
        const allLinks = this.host.querySelectorAll('a[href]');
        if (anchors.length > allLinks.length / 2) {
            this.autoExternalLinks = false;
        }
        else {
            this.autoExternalLinks = true;
        }
    }
    setupIntersectionObserver() {
        if (!this.autoActive)
            return;
        const anchors = this.host.querySelectorAll('a[href^="#"]');
        const sections = [];
        const scrollElement = scroll.findScrollParent(this.host);
        anchors.forEach((link) => {
            const id = link.getAttribute('href')?.substring(1);
            if (!id)
                return;
            const section = document.getElementById(id);
            if (section)
                sections.push(section);
        });
        if (this.io)
            this.io.disconnect();
        this.io = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                const id = entry.target.getAttribute('id');
                if (!id)
                    return;
                const link = this.host.querySelector(`a[href="#${id}"]`);
                if (!link)
                    return;
                if (entry.isIntersecting) {
                    entry.target.classList.add('in-view');
                }
                else {
                    entry.target.classList.remove('in-view');
                }
            });
            // pick the section nearest to the top
            const visible = sections.filter((s) => s.classList.contains('in-view'));
            if (visible.length) {
                // sort by boundingClientRect.top
                visible.sort((a, b) => b.getBoundingClientRect().top - a.getBoundingClientRect().top);
                anchors.forEach((l) => l.classList.remove('is-active'));
                const topId = visible[0].getAttribute('id');
                const activeLink = this.host.querySelector(`a[href="#${topId}"]`);
                activeLink?.classList.add('is-active');
            }
        }, {
            root: scrollElement === document.documentElement ? null : scrollElement,
            rootMargin: '0px 0px -60% 0px',
            threshold: 0,
        });
        sections.forEach((section) => this.io.observe(section));
    }
    handleSlotChange = () => {
        this.assessLinks();
        this.createMobileMenu();
        this.setupIntersectionObserver();
    };
    componentDidLoad() {
        this.createMobileMenu();
    }
    connectedCallback() {
        this.assessLinks();
        {
            this.setupIntersectionObserver();
        }
    }
    disconnectedCallback() {
        if (this.io) {
            this.io.disconnect();
            this.io = null;
        }
    }
    render() {
        return (renderer.h(index.Host, { key: 'a975c3e0b58fe39d504281784dd2f16e086eb0a1', class: {
                'nano-in-page-nav': true,
                'external-links': this.externalLinks === true ||
                    (this.externalLinks === 'auto' && this.autoExternalLinks),
            } }, renderer.h("nav", { key: 'd5ecad4befef8a17ab87bc6fd8166548d3bbac02', part: "root", "aria-label": "In-page navigation" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (renderer.h("div", { key: 'b8af62ddcfb510d5db84b10fdae6c3abc140adff', class: "header" }, renderer.h("slot", { key: 'd54e126201453b1b4ddf0d788193eecd9fb3f32f', name: "back" }), renderer.h("slot", { key: 'aabc23912eb3f55c38793596f347de8c1bb72fa0', name: "accessory" }))), renderer.h("div", { key: 'dcd9be9561af10b16731a80072ee851f16d1cacd', class: "desktop-nav" }, renderer.h("slot", { key: '5af492dafc853a042d14fa752f327303c102be23', onSlotchange: () => this.handleSlotChange })), renderer.h("nano-details", { key: 'b04115b88b4f2fbcfad931f82de1fe70030400be', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
    }
};
NanoInPageNav.style = inPageNavCss;

exports.nano_in_page_nav = NanoInPageNav;
