@wolf-scope/wolf-ui/dist/components/menu/menu.mjs

UI library for web applications using Lit

import { property as h, state as d } from "lit/decorators.js";
import { unsafeCSS as c, LitElement as m, html as f } from "lit";
import "../menu-item/menu-item.mjs";
import "lit/directives/if-defined.js";
import "../button/register.mjs";
import "../button/button.mjs";
import "../typography/register.mjs";
import "../typography/typography.mjs";
import "../../chain-filter-963a1f6f.js";
const u = `:host{display:flex;position:relative}:host .active-menu-border{position:absolute;background-color:var(--wolf-menu-color, var(--wolf-color-primary))}:host([variant=horizontal]){flex-direction:row;border-bottom:1px solid var(--wolf-border-color)}:host([variant=horizontal]) .active-menu-border{bottom:0;left:var(--wolf-active-menu-offset, 0);width:var(--wolf-menu-border-width, 0);height:2px;transition:left .2s ease-in-out,width .2s ease-in-out}:host([variant=horizontal-reversed]){flex-direction:row-reverse;border-bottom:1px solid var(--wolf-border-color)}:host([variant=horizontal-reversed]) .active-menu-border{bottom:0;right:var(--wolf-active-menu-offset, 0);width:var(--wolf-menu-border-width, 0);height:2px;transition:right .2s ease-in-out,width .2s ease-in-out}:host([variant=vertical]){flex-direction:column;border-left:1px solid var(--wolf-border-color)}:host([variant=vertical]) .active-menu-border{left:0;top:var(--wolf-active-menu-offset, 0);height:var(--wolf-menu-border-height, 0);width:2px;transition:top .2s ease-in-out,height .2s ease-in-out}:host([variant=vertical-reversed]){flex-direction:column-reverse;border-left:1px solid var(--wolf-border-color)}:host([variant=vertical-reversed]) .active-menu-border{left:0;bottom:var(--wolf-active-menu-offset, 0);height:var(--wolf-menu-border-height, 0);width:2px;transition:bottom .2s ease-in-out,height .2s ease-in-out}:host([noBorder]){border:none}:host([sticky]){position:fixed;top:0;left:0;right:0;z-index:10;background:var(--wolf-theme-color)}
`;
var v = Object.defineProperty, p = Object.getOwnPropertyDescriptor, a = (l, t, r, i) => {
  for (var e = i > 1 ? void 0 : i ? p(t, r) : t, o = l.length - 1, s; o >= 0; o--)
    (s = l[o]) && (e = (i ? s(t, r, e) : s(e)) || e);
  return i && e && v(t, r, e), e;
};
const z = "wolf-menu";
class n extends m {
  constructor() {
    super(...arguments), this.variant = "horizontal", this.activeItemIndex = 0, this.noBorder = !1, this.sticky = !1, this.color = "", this.menuItems = [];
  }
  handleMenuClick(t) {
    const r = t.target;
    if (this.menuItems.forEach((o) => o.isActive = !1), r === this.menuItems[this.activeItemIndex] && !t.firstLoad)
      return;
    const i = this.getBorderWidth(r);
    this.activeItemIndex = this.menuItems.indexOf(r);
    const e = this.getOffsetByIndex(this.activeItemIndex);
    r.isActive = !0, this.style.setProperty("--wolf-menu-border-width", `${i}px`), this.style.setProperty("--wolf-menu-border-height", `${this.getBorderHeight(r)}px`), this.style.setProperty("--wolf-active-menu-offset", `${e}px`);
  }
  /**
   * Get the offset of the menu at the given index
   * @param index
   * @returns
   */
  getOffsetByIndex(t) {
    const r = this.menuItems.slice(0, t);
    return this.variant === "horizontal-reversed" || this.variant === "horizontal" ? r.reduce((o, s) => o + this.getBorderWidth(s), 0) : r.reduce((e, o) => e + this.getBorderHeight(o), 0);
  }
  getBorderWidth(t) {
    return t.clientWidth;
  }
  getBorderHeight(t) {
    return t.clientHeight;
  }
  connectedCallback() {
    super.connectedCallback(), this.menuItems = Array.from(this.querySelectorAll("wolf-menu-item")), requestAnimationFrame(() => {
      const t = window.location.pathname, r = this.menuItems.slice();
      r.sort((o, s) => s.href.length - o.href.length);
      const i = r.find((o) => t.startsWith(o.href));
      if (!i)
        return;
      this.activeItemIndex = this.menuItems.indexOf(i);
      const e = this.menuItems[this.activeItemIndex];
      e && (e.isActive = !0, this.style.setProperty("--wolf-menu-border-width", `${this.getBorderWidth(e)}px`), this.style.setProperty("--wolf-menu-border-height", `${this.getBorderHeight(e)}px`), this.style.setProperty("--wolf-menu-color", this.color), this.handleMenuClick({ target: e ?? this.menuItems[0], firstLoad: !0 }));
    });
  }
  render() {
    return f`<slot @menu-click=${this.handleMenuClick}></slot>
      <div class="active-menu-border"></div>`;
  }
}
n.styles = c(u);
a([
  h()
], n.prototype, "variant", 2);
a([
  h({ type: Number })
], n.prototype, "activeItemIndex", 2);
a([
  h({ type: Boolean })
], n.prototype, "noBorder", 2);
a([
  h({ type: Boolean })
], n.prototype, "sticky", 2);
a([
  h()
], n.prototype, "color", 2);
a([
  d()
], n.prototype, "menuItems", 2);
export {
  n as WolfMenu,
  z as tagName
};