Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
require("../../_virtual/_rolldown/runtime.cjs");
const require_safe_custom_element = require("../../shared/safe-custom-element.cjs");
const require_index = require("../../shared/tailwind-element/index.cjs");
const require_decorate = require("../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.cjs");
require("../lukso-icon/index.cjs");
require("../lukso-tag/index.cjs");
let lit = require("lit");
let lit_decorators_js = require("lit/decorators.js");
let tailwind_variants = require("tailwind-variants");
//#region src/components/lukso-navbar/index.ts
var LuksoNavbar = class LuksoNavbar extends require_index.TailwindElement {
	constructor(..._args) {
		super(..._args);
		this.title = "";
		this.isCenter = false;
		this.isSticky = false;
		this.isTransparent = false;
		this.isTestnet = false;
		this.icon = "";
		this.hasMenu = false;
		this.hasMobileDropdownMenu = false;
		this.logoUrl = "";
		this.mobileBreakpoint = "md";
		this.isMenuOpen = false;
		this.defaultLogoUrl = "/assets/images/up-logo.png";
		this.styles = (0, tailwind_variants.tv)({
			slots: {
				wrapper: "h-78 grid items-center",
				mobileMenuWrapper: "items-center justify-end pr-6 flex gap-2",
				mobileMenuTrigger: `w-[18px] h-[2px] rounded-4 bg-neutral-20 transition-all
        before:content-[''] before:absolute before:w-[18px] before:h-[2px] before:bg-neutral-20 before:rounded-4 before:transition-all before:-translate-y-[6px]
        after:content-[''] after:absolute after:w-[18px] after:h-[2px] after:bg-neutral-20 after:rounded-4 after:transition-all after:translate-y-[6px]`,
				mobileMenuDropdown: "fixed top-[78px] left-0 w-full h-full bg-neutral-100 z-[1000] justify-center items-center flex",
				desktopMenuWrapper: "items-center justify-end pr-10 no-underline hidden",
				desktopCenterWrapper: "items-center hidden",
				desktopCenterPlaceholder: ""
			},
			variants: {
				isCenter: {
					true: { wrapper: "justify-center" },
					false: { wrapper: "grid-cols-[minmax(max-content,35%)_auto_minmax(max-content,35%)]" }
				},
				isSticky: { true: { wrapper: "sticky top-0 z-[1000]" } },
				isTransparent: { false: { wrapper: "bg-neutral-100 shadow-pink-drop-shadow" } },
				mobileBreakpoint: {
					sm: {
						mobileMenuWrapper: "sm:hidden",
						mobileMenuDropdown: "sm:hidden",
						desktopMenuWrapper: "sm:flex",
						desktopCenterWrapper: "sm:flex",
						desktopCenterPlaceholder: "sm:hidden"
					},
					md: {
						mobileMenuWrapper: "md:hidden",
						mobileMenuDropdown: "md:hidden",
						desktopMenuWrapper: "md:flex",
						desktopCenterWrapper: "md:flex",
						desktopCenterPlaceholder: "md:hidden"
					},
					lg: {
						mobileMenuWrapper: "lg:hidden",
						mobileMenuDropdown: "lg:hidden",
						desktopMenuWrapper: "lg:flex",
						desktopCenterWrapper: "lg:flex",
						desktopCenterPlaceholder: "lg:hidden"
					},
					xl: {
						mobileMenuWrapper: "xl:hidden",
						mobileMenuDropdown: "xl:hidden",
						desktopMenuWrapper: "xl:flex",
						desktopCenterWrapper: "xl:flex",
						desktopCenterPlaceholder: "xl:hidden"
					}
				},
				isMenuOpen: {
					true: {
						mobileMenuTrigger: "!bg-transparent before:rotate-[45deg] before:!-translate-y-[0px] after:-rotate-[45deg] after:!translate-y-[0px]",
						mobileMenuDropdown: "animate-fade-in animation-duration-150"
					},
					false: { mobileMenuDropdown: "!hidden" }
				}
			},
			compoundVariants: [{
				isMenuOpen: true,
				isTransparent: true,
				class: { wrapper: "bg-neutral-100 transition duration-150" }
			}, {
				isMenuOpen: false,
				isTransparent: true,
				class: { wrapper: "bg-transparent" }
			}]
		});
	}
	handleBrandClick() {
		const event = new CustomEvent("on-brand-click", {
			bubbles: true,
			composed: true
		});
		this.dispatchEvent(event);
	}
	handleIconClick() {
		const event = new CustomEvent("on-icon-click", {
			bubbles: true,
			composed: true
		});
		this.dispatchEvent(event);
	}
	handleMenuToggle() {
		this.isMenuOpen = !this.isMenuOpen;
		if (this.isMenuOpen) document.body.style.overflow = "hidden";
		else document.body.style.overflow = "auto";
	}
	desktopMenuTemplate(styles) {
		return lit.html` <div class=${styles.desktopMenuWrapper()}>
      <slot name="desktop-menu"></slot>
    </div>`;
	}
	desktopCenterTemplate(styles) {
		return lit.html`<div class=${styles.desktopCenterWrapper()}>
        <slot name="desktop-center"></slot>
      </div>
      <div class=${styles.desktopCenterPlaceholder()}></div>`;
	}
	mobileMenuTemplate(styles) {
		return lit.html`<div class=${styles.mobileMenuWrapper()}>
      <slot name="mobile-menu"></slot>

      ${this.hasMobileDropdownMenu ? lit.html` <div
              class="flex items-center justify-center w-8 h-8 cursor-pointer"
              @click=${this.handleMenuToggle}
            >
              <div class=${styles.mobileMenuTrigger()}></div>
            </div>
            <div
              class=${styles.mobileMenuDropdown()}
              @click=${this.handleMenuToggle}
            >
              <slot name="mobile-dropdown"></slot>
            </div>` : lit.nothing}
    </div>`;
	}
	brandTemplate() {
		return lit.html`
      <div class="flex items-center px-6 md:px-10 h-[inherit]">
        <div class="flex cursor-pointer group" @click=${this.handleBrandClick}>
          <img
            src="${this.logoUrl || this.defaultLogoUrl}"
            class="mr-2 h-[26px]"
            alt="${this.title}"
          />
          <div
            class="text-purple-51 nav-inter-14-medium-uppercase
                whitespace-pre-line flex leading-none transition group-hover:text-purple-41"
          >
            <span>${this.title}</span>
          </div>
          ${this.isTestnet ? lit.html`<lukso-tag background-color="yellow-65" class="ml-2">
                TESTNET
              </lukso-tag>` : lit.nothing}
        </div>
        ${this.icon ? lit.html`<div
              class="flex border-l border-l-purple-82 h-7 items-center pl-3 ml-3"
            >
              <lukso-icon
                class="transition cursor-pointer hover:scale-105"
                name="${this.icon}"
                color="purple-51"
                @click=${this.handleIconClick}
              ></lukso-icon>
            </div>` : lit.nothing}
      </div>
    `;
	}
	menuTemplate(styles) {
		return lit.html`<div class="flex items-center justify-end">
      ${this.desktopMenuTemplate(styles)} ${this.mobileMenuTemplate(styles)}
    </div>`;
	}
	render() {
		const styles = this.styles({
			isCenter: this.isCenter,
			isSticky: this.isSticky,
			isTransparent: this.isTransparent,
			mobileBreakpoint: this.mobileBreakpoint,
			isMenuOpen: this.isMenuOpen
		});
		return lit.html`
      <nav data-testid="navbar" class=${styles.wrapper()}>
        ${this.brandTemplate()}
        ${this.isCenter ? lit.nothing : this.desktopCenterTemplate(styles)}
        ${this.isCenter ? lit.nothing : this.hasMenu ? this.menuTemplate(styles) : lit.nothing}
      </nav>
    `;
	}
};
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoNavbar.prototype, "title", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "is-center"
})], LuksoNavbar.prototype, "isCenter", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "is-sticky"
})], LuksoNavbar.prototype, "isSticky", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "is-transparent"
})], LuksoNavbar.prototype, "isTransparent", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "is-testnet"
})], LuksoNavbar.prototype, "isTestnet", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoNavbar.prototype, "icon", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "has-menu"
})], LuksoNavbar.prototype, "hasMenu", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "has-mobile-dropdown-menu"
})], LuksoNavbar.prototype, "hasMobileDropdownMenu", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: String,
	attribute: "logo-url"
})], LuksoNavbar.prototype, "logoUrl", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: String,
	attribute: "mobile-breakpoint"
})], LuksoNavbar.prototype, "mobileBreakpoint", void 0);
require_decorate.__decorate([(0, lit_decorators_js.state)()], LuksoNavbar.prototype, "isMenuOpen", void 0);
LuksoNavbar = require_decorate.__decorate([require_safe_custom_element.safeCustomElement("lukso-navbar")], LuksoNavbar);
//#endregion
Object.defineProperty(exports, "LuksoNavbar", {
	enumerable: true,
	get: function() {
		return LuksoNavbar;
	}
});
