import { r as d, c, h as o, H as b, g as p } from "./index.61732cef.js";
import { c as f, o as v, s as w, f as M, a as g } from "./floating-ui.dom-CLsTbQHn.fe95e3a6.js";
import { c as y } from "./index-orsBiyT_.fc4357c3.js";
import { q as a, l, m as h, i as I, k as x } from "./utils-CCck-DTo.e4e43b6a.js";
import "react";
import "react-dom";
const _ = () => ':host{display:block}:host *{box-sizing:border-box}.menu{width:100%}.menu--mobile.menu--root{position:relative}.menu--mobile.menu--root .menu__menu{top:3.5rem;transition:left 0.2s}.menu--mobile.menu--active .menu__menu{display:block}.menu--mobile .menu__menu{position:absolute;top:0;left:0;display:none;width:100%}:not(.menu--mobile).menu--root{position:relative}:not(.menu--mobile).menu--root .menu__menu{position:relative;padding-top:0;padding-bottom:0}:not(.menu--mobile):not(.menu--root) .menu__menu{z-index:1;max-width:22.5rem;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-1);padding:var(--s-space-4);outline:var(--s-border-width-default) solid var(--s-border-translucent-outline)}:not(.menu--mobile):not(.menu--root) .menu__menu:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--s-translucent-low-default);-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l))}:not(.menu--mobile).menu--active .menu__menu{display:block}:not(.menu--mobile) .menu__menu{position:fixed;display:none}.menu__mobile-header{display:flex;height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);gap:var(--s-space-8)}.menu__mobile-header>*{display:inline-flex;flex-shrink:0}.menu__title{min-width:0;flex-grow:1;flex-shrink:1}.menu__title swirl-heading{min-width:0}.menu__done-button{margin-right:calc(-1 * var(--s-space-8))}', k = class {
  constructor(e) {
    d(this, e), this.done = c(this, "done", 7), this.valueChange = c(this, "valueChange", 7), this.active = !0, this.level = 0, this.mobileBackButtonLabel = "Back", this.mobileCloseMenuButtonLabel = "Close menu", this.placement = "right-start", this.mobileDoneButtonLabel = "Done", this.variant = "action", this.activeLevel = 0, this.mobileMediaQuery = window.matchMedia("(min-width: 768px)"), this.mediaQueryHandler = () => {
      this.updateMobileState();
    }, this.resetMenu = () => {
      this.items.forEach((t) => {
        t.tabIndex = -1;
      }), !(this.level > 0) && setTimeout(() => {
        this.activeLevel = 0, a(this.el, "swirl-menu").forEach((i) => {
          i.active = !1, i.parentElement.expanded = !1;
        });
      }, this.mobile ? 200 : 60);
    }, this.closeMenu = () => {
      this.disableAutoUpdate && this.disableAutoUpdate(), this.swirlPopover.close(), this.resetMenu();
    }, this.reposition = async () => {
      if (this.mobile || this.level === 0) {
        this.position = void 0;
        return;
      }
      const t = this.el.parentElement;
      !Boolean(t) || !Boolean(this.menuContainer) || requestAnimationFrame(async () => {
        this.position = await f(t, this.menuContainer, {
          placement: this.placement,
          strategy: "fixed",
          middleware: [v({ mainAxis: -10, crossAxis: 0 }), w(), M()]
        });
      });
    }, this.onKeyDown = (t) => {
      if (t.code === "ArrowDown")
        t.preventDefault(), t.stopPropagation(), this.focusNextItem();
      else if (t.code === "ArrowUp")
        t.preventDefault(), t.stopPropagation(), this.focusPreviousItem();
      else if (t.code === "ArrowLeft")
        t.preventDefault(), t.stopPropagation(), this.rootMenu.goBack();
      else if (t.code === "ArrowRight") {
        t.preventDefault();
        const i = l(this.items[this.getActiveItemIndex()], "swirl-menu-item");
        if (!Boolean(i))
          return;
        this.rootMenu.activateMenuItem(i);
      }
    }, this.onClose = () => {
      this.closeMenu();
    }, this.onDone = () => {
      this.closeMenu(), this.done.emit();
    }, this.onGoBack = () => {
      this.rootMenu.goBack();
    };
  }
  componentWillLoad() {
    this.updateMobileState(), this.updateLevel(), this.observeSlotChanges();
  }
  componentDidLoad() {
    this.mobileMediaQuery.addEventListener("change", this.mediaQueryHandler), this.parentMenu = l(this.el.parentElement, "swirl-menu"), this.swirlPopover = l(this.el, "swirl-popover"), this.rootMenu = h(this.el, "swirl-menu").pop(), Boolean(this.parentMenu) && queueMicrotask(() => {
      this.active = !1;
    }), this.swirlPopover.addEventListener("popoverClose", this.resetMenu), this.updateItems();
  }
  disconnectedCallback() {
    var e, t, i, n;
    (e = this.swirlPopover) == null || e.removeEventListener("popoverClose", this.resetMenu), (i = (t = this.mobileMediaQuery).removeEventListener) == null || i.call(t, "change", this.mediaQueryHandler), (n = this.observer) == null || n.disconnect();
  }
  watchActive() {
    this.position = void 0, this.reposition(), this.disableAutoUpdate && this.disableAutoUpdate(), this.disableAutoUpdate = g(this.el.parentElement, this.menuContainer, this.reposition);
  }
  watchValue() {
    this.updateActiveItem();
  }
  async activateMenuItem(e) {
    if (Boolean(this.parentMenu))
      return;
    const t = await e.getParentMenu();
    a(this.el, "swirl-menu").filter((s) => s.level >= t.level && s !== t).forEach((s) => {
      s.active = !1, s.parentElement.expanded = !1;
    });
    const n = await e.getSubMenu();
    !Boolean(n) || (e.expanded = !0, n.active = !0, this.activeLevel = n.level, setTimeout(() => {
      n.focusFirstItem();
    }, this.mobile ? 200 : 60));
  }
  async close() {
    this.closeMenu();
  }
  async goBack() {
    if (Boolean(this.parentMenu) || this.activeLevel === 0)
      return;
    const t = (a(this.el, "swirl-menu").find((s) => s.level === this.activeLevel && s.active) || this.rootMenu).parentElement;
    t.expanded = !1, this.activeLevel = Math.max(this.activeLevel - 1, 0), a(this.el, "swirl-menu").filter((s) => s.level > this.activeLevel).forEach((s) => {
      s.active = !1;
    }), (a(this.el, "swirl-menu").find((s) => s.level === this.activeLevel && s.active) || this.rootMenu).focusItemAtIndex(Array.from(t.parentElement.children).indexOf(t));
  }
  async focusFirstItem() {
    this.focusItem(this.items[0]);
  }
  async focusItemAtIndex(e) {
    this.focusItem(this.items[e]);
  }
  async updateSelection(e) {
    this.valueChange.emit(e.value);
  }
  async updateActiveItem() {
    a(this.el, "swirl-menu-item").filter((t) => l(t, "swirl-menu") === this.el).forEach((t) => {
      t.updateValue();
    }), this.parentMenu && this.parentMenu.variant === "action" && this.parentMenu.updateActiveItem();
  }
  observeSlotChanges() {
    this.observer = new MutationObserver(() => {
      requestAnimationFrame(() => {
        this.updateItems();
      });
    }), this.observer.observe(this.el, { childList: !0 });
  }
  updateMobileState() {
    const e = I();
    e !== this.mobile && (this.mobile = e);
  }
  updateItems() {
    this.items = [
      ...a(this.el, '[role="menuitem"]'),
      ...a(this.el, '[role="menuitemradio"]')
    ].filter((e) => l(e, "swirl-menu") === this.el);
  }
  updateLevel() {
    const e = h(this.el.parentNode, "swirl-menu");
    this.level = e.length;
  }
  focusItem(e) {
    [
      ...a(this.rootMenu, '[role="menuitem"]'),
      ...a(this.rootMenu, '[role="menuitemradio"]')
    ].forEach((i) => {
      i.tabIndex = -1;
    }), Boolean(e) && (e.tabIndex = 0, e.focus());
  }
  focusNextItem() {
    const t = (this.getActiveItemIndex() + 1) % this.items.length, i = this.items[t];
    this.focusItem(i);
  }
  focusPreviousItem() {
    const e = this.getActiveItemIndex(), t = e === 0 ? this.items.length - 1 : e - 1, i = this.items[t];
    this.focusItem(i);
  }
  getActiveItemIndex() {
    const e = x();
    return this.items.findIndex((t) => t === e || t === (e == null ? void 0 : e.querySelector('[role="menuitem"]')) || t === (e == null ? void 0 : e.querySelector('[role="menuitemradio"]')));
  }
  render() {
    var r, u;
    const e = !Boolean(this.parentMenu), t = e && this.mobile ? void 0 : this.label, i = e && this.mobile ? "menu-title" : void 0, n = e ? "menubar" : "menu", s = y("menu", `menu--level-${this.level}`, {
      "menu--active": this.active,
      "menu--mobile": this.mobile,
      "menu--root": e
    });
    return o(b, { key: "6cd03a94a418d90b16d58cf53e70990fc48454c5" }, o("div", { key: "e6a3a68b003b5e9097a4e9fe5ffe1e25e7978cbe", class: s }, this.mobile && e && o("div", { key: "29eb47ab0bc98a84a3a6f42bcabe31e58418c170", class: "menu__mobile-header" }, this.activeLevel === 0 && o("swirl-button", { key: "9b7f80c2e2072dbcf73cb36fa3db04568478c9b7", hideLabel: !0, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" }), this.activeLevel > 0 && o("swirl-button", { key: "96a914381228ef8f12b04bf53d3f30f39a260e73", hideLabel: !0, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" }), o("span", { key: "7a69dd2fd66cda17ebb3efa2f995509ea9f05385", class: "menu__title", id: "menu-title" }, o("swirl-heading", { key: "cf249cb19f1ebd43b5d853ab3698b379a9b39684", align: "center", as: "span", level: 4, text: this.label, truncate: !0 })), o("swirl-button", { key: "35ba0ebfa5e5b27c9fa0ac9508bc95de39bf9f9d", class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone })), o("div", { key: "a1e4f7b04b4d13f159458be152163f2d3849bc2f", "aria-label": t, "aria-labelledby": i, "aria-orientation": "vertical", class: "menu__menu", onKeyDown: this.onKeyDown, ref: (m) => this.menuContainer = m, role: n, style: !this.mobile && this.level > 0 ? {
      top: Boolean(this.position) ? `${(r = this.position) == null ? void 0 : r.y}px` : "",
      left: Boolean(this.position) ? `${(u = this.position) == null ? void 0 : u.x}px` : "",
      opacity: Boolean(this.position) ? void 0 : "0"
    } : this.mobile ? {
      left: e ? `calc(-100% * ${this.activeLevel})` : "100%"
    } : void 0 }, o("slot", { key: "dc3514ab8298685fc0b5ed574937e9b1ca467c84" }))));
  }
  get el() {
    return p(this);
  }
  static get watchers() {
    return {
      active: [{
        watchActive: 0
      }],
      value: [{
        watchValue: 0
      }]
    };
  }
};
k.style = _();
export {
  k as swirl_menu
};
