'use strict';

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

const shared_tailwindElement_index = require('../../index-aaa67d55.cjs');
const queryAssignedElements = require('../../query-assigned-elements-1d5d9d4c.cjs');
const state = require('../../state-f73a8b4f.cjs');
const index = require('../../index-e9668573.cjs');
require('../lukso-icon/index.cjs');
require('../lukso-tag/index.cjs');
require('../../directive-8278ab14.cjs');
require('../../style-map-74906707.cjs');

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result)
    __defProp(target, key, result);
  return result;
};
exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.TailwindElement {
  constructor() {
    super(...arguments);
    this.title = "";
    this.isCenter = false;
    this.isSticky = false;
    this.isTransparent = false;
    this.isTestnet = false;
    this.icon = "";
    this.hasMenu = false;
    this.logoUrl = "";
    this.isMenuOpen = false;
    this.defaultLogoUrl = "/assets/images/up-logo.png";
    this.centerStyles = `justify-center`;
    this.stickyStyles = `sticky top-0 z-[1000]`;
    this.transparentStyles = `!bg-transparent !shadow-none`;
  }
  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;
  }
  desktopMenuTemplate() {
    return shared_tailwindElement_index.x`<div
      class="items-center justify-end pr-10 no-underline hidden md:flex"
    >
      <slot name="desktop"></slot>
    </div>`;
  }
  mobileMenuTemplate() {
    return shared_tailwindElement_index.x`<div class="items-center justify-end pr-6 flex md:hidden">
      <div
        class="flex items-center justify-center w-8 h-8 cursor-pointer"
        @click=${this.handleMenuToggle}
      >
        <div
          class="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]
          ${index.customClassMap({
      "!bg-transparent before:rotate-[45deg] before:!-translate-y-[0px] after:-rotate-[45deg] after:!translate-y-[0px]": this.isMenuOpen
    })}
      "
        ></div>
      </div>
      <div
        class="fixed top-[78px] left-0 w-full h-full bg-neutral-100 z-[1000] justify-center items-center flex md:hidden
        ${index.customClassMap({
      "animate-fade-in animation-duration-150": this.isMenuOpen,
      "!hidden": !this.isMenuOpen
    })}"
        @click=${this.handleMenuToggle}
      >
        <slot name="mobile"></slot>
      </div>
    </div>`;
  }
  render() {
    return shared_tailwindElement_index.x`
      <nav
        data-testid="navbar"
        class="bg-neutral-100 shadow-pink-drop-shadow h-78 flex
        ${index.customClassMap({
      [this.centerStyles]: this.isCenter,
      ["justify-between"]: !this.isCenter,
      [this.stickyStyles]: this.isSticky,
      [this.transparentStyles]: this.isTransparent
    })}"
      >
        <div class="flex items-center px-7 h-full sm:px-10">
          <div
            class="flex cursor-pointer group"
            @click=${this.handleBrandClick}
          >
            <img
              src="${this.logoUrl || this.defaultLogoUrl}"
              class="mr-2 h-[26px]"
            />
            <div
              class="text-purple-51 nav-apax-14-medium-uppercase
                whitespace-pre-line flex leading-none transition group-hover:text-purple-41"
            >
              <span>${this.title}</span>
            </div>
            ${this.isTestnet ? shared_tailwindElement_index.x`<lukso-tag background-color="yellow-65" class="ml-2">
                  TESTNET
                </lukso-tag>` : ""}
          </div>
          ${this.icon ? shared_tailwindElement_index.x`<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>` : ""}
        </div>
        ${this.isCenter ? shared_tailwindElement_index.x`` : this.hasMenu ? shared_tailwindElement_index.x`${this.desktopMenuTemplate()} ${this.mobileMenuTemplate()}` : shared_tailwindElement_index.x``}
      </nav>
    `;
  }
};
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoNavbar.prototype, "title", 2);
__decorateClass([
  queryAssignedElements.n({ type: Boolean, attribute: "is-center" })
], exports.LuksoNavbar.prototype, "isCenter", 2);
__decorateClass([
  queryAssignedElements.n({ type: Boolean, attribute: "is-sticky" })
], exports.LuksoNavbar.prototype, "isSticky", 2);
__decorateClass([
  queryAssignedElements.n({ type: Boolean, attribute: "is-transparent" })
], exports.LuksoNavbar.prototype, "isTransparent", 2);
__decorateClass([
  queryAssignedElements.n({ type: Boolean, attribute: "is-testnet" })
], exports.LuksoNavbar.prototype, "isTestnet", 2);
__decorateClass([
  queryAssignedElements.n({ type: String })
], exports.LuksoNavbar.prototype, "icon", 2);
__decorateClass([
  queryAssignedElements.n({ type: Boolean, attribute: "has-menu" })
], exports.LuksoNavbar.prototype, "hasMenu", 2);
__decorateClass([
  queryAssignedElements.n({ type: String, attribute: "logo-url" })
], exports.LuksoNavbar.prototype, "logoUrl", 2);
__decorateClass([
  state.t()
], exports.LuksoNavbar.prototype, "isMenuOpen", 2);
exports.LuksoNavbar = __decorateClass([
  queryAssignedElements.e("lukso-navbar")
], exports.LuksoNavbar);
