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

var index = require('./index-DGttnXif.js');
var style = require('./style-Du-L-qMa.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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    get el() { return index.getElement(this); }
    /** Array of breadcrumb items to render */
    breadcrumbs = [];
    isOpen = false;
    isOverflowing = false;
    mainRef;
    componentDidLoad() {
        {
            this.checkOverflow();
            style.addGlobalStylesheetToShadow(this.el?.shadowRoot);
        }
    }
    componentDidUpdate() {
        {
            this.checkOverflow();
        }
    }
    connectedCallback() {
        {
            window.addEventListener('resize', this.checkOverflow);
        }
    }
    disconnectedCallback() {
        {
            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 (index.h("nav", { "aria-label": "Breadcrumb", class: "breadcrumbs" }, index.h(BreadcrumbList, { breadcrumbs: [returnBreadcrumb], className: "return-only" })));
        }
        const parentBreadcrumb = this.breadcrumbs?.length
            ? this.breadcrumbs.at(-1)
            : null;
        return (index.h("div", { class: "breadcrumbs" }, index.h("nav", { "aria-label": "Breadcrumb" }, index.h(BreadcrumbList, { breadcrumbs: this.breadcrumbs, className: `main${this.isOverflowing ? ' breadcrumbs-hidden' : ''}`, mainRef: (el) => (this.mainRef = el) })), this.isOverflowing && (index.h("nano-dropdown", { dialogTitle: `${parentBreadcrumb?.label} Breadcrumb`, onNanoShow: () => (this.isOpen = true), onNanoHide: () => (this.isOpen = false), containingElement: this.el, class: "breadcrumbs__dropdown" }, index.h("button", { class: "trigger-button", slot: "trigger" }, index.h("span", null, this.breadcrumbs && this.breadcrumbs.length > 1 && (index.h("span", { class: "trigger-button_label" }, "..")), index.h("span", { class: "trigger-button_label" }, parentBreadcrumb?.label)), index.h("nano-icon", { class: {
                'trigger-icon': true,
                'trigger-icon--open': this.isOpen,
            }, name: "light/chevron-down" })), index.h("nav", null, index.h("nano-menu", { class: "breadcrumbs small", label: "Breadcrumbs" }, this.breadcrumbs?.slice(0, -1)?.map((breadcrumb, index$1) => (index.h("nano-nav-item", { key: index$1, href: breadcrumb.href, class: {
                return: breadcrumb.return,
                link: !!breadcrumb.href,
            }, disabled: !breadcrumb.href }, breadcrumb.label)))))))));
    }
};
const BreadcrumbList = ({ breadcrumbs, className, mainRef, }) => (index.h("ol", { class: `breadcrumbs ${className}`, ref: mainRef }, breadcrumbs?.map((breadcrumb, index$1) => (index.h("li", null, index.h("a", { key: index$1, href: breadcrumb.href, class: { return: breadcrumb.return, link: !!breadcrumb.href } }, breadcrumb.return && (index.h("nano-icon", { name: "light/chevron-left", size: "small", class: "breadcrumb-icon" })), breadcrumb.label))))));
NanoBreadcrumb.style = breadcrumbCss;

exports.nano_breadcrumb = NanoBreadcrumb;
