/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { proxyCustomElement, HTMLElement, Build, h } from '@stencil/core/internal/client';
import { a as addGlobalStylesheetToShadow } from './style.js';
import { d as defineCustomElement$5 } from './dropdown.js';
import { d as defineCustomElement$4 } from './icon.js';
import { d as defineCustomElement$3 } from './menu.js';
import { d as defineCustomElement$2 } from './nav-item.js';

const breadcrumbCss = ":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{--text-color:var(--nano-color-primary-1100);--text-color-hover:var(--nano-color-primary-1200);--text-color-secondary:var(--nano-color-neutral-1400);--text-color-disabled:var(--nano-color-neutral-1000);--border-color:var(--nano-color-neutral-400);--trigger-bg-color:var(--nano-color-base-0);display:block}.breadcrumbs{inline-size:fit-content}nano-menu.breadcrumbs{inline-size:100%}.breadcrumbs-hidden{position:absolute;visibility:hidden;pointer-events:none;block-size:0;overflow:hidden}ol{list-style:none;padding:var(--nano-spacing-l3) 0;margin:0;display:flex;flex-direction:row}li{display:flex;align-items:center;justify-content:flex-start;font-size:var(--nano-font-size-xs);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);text-wrap:nowrap;margin-block-end:0}li:not(.return-only li)::after,nano-nav-item::after{content:\"/\";margin:0 var(--nano-spacing-xs);color:var(--border-color)}a.link{color:var(--text-color)}a:not(.link){color:var(--text-color-secondary)}a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset);z-index:1}a.link:hover{color:var(--text-color-hover)}a.return.link{display:flex;align-items:center;gap:calc(var(--nano-spacing-sm) / 2)}.breadcrumbs__dropdown{inline-size:100%}.breadcrumbs__dropdown[open]::part(trigger){box-shadow:var(--nano-shadow-l1)}.trigger-button{inline-size:100%;display:flex;justify-content:space-between;align-items:center;padding:var(--nano-spacing-l3) var(--nano-spacing-l2);color:var(--text-color);background-color:var(--trigger-bg-color);cursor:pointer;text-align:start;border:none;font-size:var(--nano-font-size-xs)}.trigger-button .trigger-button_label{text-decoration:underline}.trigger-button .trigger-button_label::after{content:\"/\";margin:0 var(--nano-spacing-xs);color:var(--border-color)}.trigger-button:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.trigger-icon{transform:rotate(0deg);transition:var(--nano-transition-x-fast) ease transform}.trigger-icon--open{transform:rotate(180deg)}nano-nav-item::after{display:none !important}.trigger-button_label::after{display:inline-block !important}.return-only{padding:var(--nano-spacing-l3) var(--nano-spacing-l2) !important}";

const NanoBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class NanoBreadcrumb extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
    }
    get el() { return this; }
    /** Array of breadcrumb items to render */
    breadcrumbs = [];
    isOpen = false;
    isOverflowing = false;
    mainRef;
    componentDidLoad() {
        if (Build.isBrowser) {
            this.checkOverflow();
            addGlobalStylesheetToShadow(this.el?.shadowRoot);
        }
    }
    componentDidUpdate() {
        if (Build.isBrowser) {
            this.checkOverflow();
        }
    }
    connectedCallback() {
        if (Build.isBrowser) {
            window.addEventListener('resize', this.checkOverflow);
        }
    }
    disconnectedCallback() {
        if (Build.isBrowser) {
            window.removeEventListener('resize', this.checkOverflow);
        }
    }
    checkOverflow = () => {
        if (!this.mainRef)
            return;
        const containerWidth = this.el.clientWidth;
        const contentWidth = this.mainRef.scrollWidth;
        const shouldOverflow = contentWidth > containerWidth * 0.9;
        if (this.isOverflowing !== shouldOverflow) {
            this.isOverflowing = shouldOverflow;
            if (this.isOverflowing)
                this.isOpen = false; // Reset dropdown state when overflow occurs
        }
    };
    render() {
        const returnBreadcrumb = this.breadcrumbs?.find((breadcrumb) => breadcrumb.return);
        if (returnBreadcrumb) {
            return (h("nav", { "aria-label": "Breadcrumb", class: "breadcrumbs" }, h(BreadcrumbList, { breadcrumbs: [returnBreadcrumb], className: "return-only" })));
        }
        const parentBreadcrumb = this.breadcrumbs?.length
            ? this.breadcrumbs.at(-1)
            : null;
        return (h("div", { class: "breadcrumbs" }, h("nav", { "aria-label": "Breadcrumb" }, h(BreadcrumbList, { breadcrumbs: this.breadcrumbs, className: `main${this.isOverflowing ? ' breadcrumbs-hidden' : ''}`, mainRef: (el) => (this.mainRef = el) })), this.isOverflowing && (h("nano-dropdown", { dialogTitle: `${parentBreadcrumb?.label} Breadcrumb`, onNanoShow: () => (this.isOpen = true), onNanoHide: () => (this.isOpen = false), containingElement: this.el, class: "breadcrumbs__dropdown" }, h("button", { class: "trigger-button", slot: "trigger" }, h("span", null, this.breadcrumbs && this.breadcrumbs.length > 1 && (h("span", { class: "trigger-button_label" }, "..")), h("span", { class: "trigger-button_label" }, parentBreadcrumb?.label)), h("nano-icon", { class: {
                'trigger-icon': true,
                'trigger-icon--open': this.isOpen,
            }, name: "light/chevron-down" })), h("nav", null, h("nano-menu", { class: "breadcrumbs small", label: "Breadcrumbs" }, this.breadcrumbs?.slice(0, -1)?.map((breadcrumb, index) => (h("nano-nav-item", { key: index, href: breadcrumb.href, class: {
                return: breadcrumb.return,
                link: !!breadcrumb.href,
            }, disabled: !breadcrumb.href }, breadcrumb.label)))))))));
    }
    static get style() { return breadcrumbCss; }
}, [257, "nano-breadcrumb", {
        "breadcrumbs": [16],
        "isOpen": [32],
        "isOverflowing": [32]
    }]);
const BreadcrumbList = ({ breadcrumbs, className, mainRef, }) => (h("ol", { class: `breadcrumbs ${className}`, ref: mainRef }, breadcrumbs?.map((breadcrumb, index) => (h("li", null, h("a", { key: index, href: breadcrumb.href, class: { return: breadcrumb.return, link: !!breadcrumb.href } }, breadcrumb.return && (h("nano-icon", { name: "light/chevron-left", size: "small", class: "breadcrumb-icon" })), breadcrumb.label))))));
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["nano-breadcrumb", "nano-dropdown", "nano-icon", "nano-menu", "nano-nav-item"];
    components.forEach(tagName => { switch (tagName) {
        case "nano-breadcrumb":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, NanoBreadcrumb$1);
            }
            break;
        case "nano-dropdown":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "nano-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "nano-menu":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "nano-nav-item":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const NanoBreadcrumb = NanoBreadcrumb$1;
const defineCustomElement = defineCustomElement$1;

export { NanoBreadcrumb, defineCustomElement };
