import {
  __decorateClass,
  __privateAdd,
  __privateGet,
  __privateMethod,
  __privateSet
} from "../../chunks/chunk.QU3DSPNU.js";
var _elTriggerBtn, _setupButton, _handleTriggerSlotChange, _renderPopover, _GdsContextMenu_instances, handleItemClick_fn;
import { localized, msg } from "@lit/localize";
import { property, query } from "lit/decorators.js";
import { when } from "lit/directives/when.js";
import { GdsElement } from "../../gds-element.js";
import { GdsMenuItem } from "../../primitives/menu/menu-item.component.js";
import { GdsMenu } from "../../primitives/menu/menu.component.js";
import { tokens } from "../../tokens.style.js";
import { TransitionalStyles } from "../../transitional-styles.js";
import { watch } from "../../utils/decorators/watch.js";
import {
  gdsCustomElement,
  html
} from "../../utils/helpers/custom-element-scoping.js";
import {
  withLayoutChildProps,
  withMarginProps
} from "../../utils/mixins/declarative-layout-mixins.js";
import { GdsButton } from "../button/button.component.js";
import { IconDotGridOneHorizontal } from "../icon/icons/dot-grid-one-horizontal.js";
import {
  applyTriggerAriaAttributes,
  GdsPopover
} from "../popover/popover.component.js";
import { GdsMenuItem as GdsMenuItem2 } from "../../primitives/menu/menu-item.component.js";
import { GdsMenuHeading } from "../../primitives/menu/menu-heading.component.js";
let GdsContextMenu = class extends withMarginProps(
  withLayoutChildProps(GdsElement)
) {
  constructor() {
    super(...arguments);
    __privateAdd(this, _GdsContextMenu_instances);
    this.open = false;
    this.buttonLabel = msg("Open context menu");
    this.showLabel = false;
    this.label = "";
    this.placement = "bottom-start";
    __privateAdd(this, _elTriggerBtn);
    __privateAdd(this, _setupButton, () => {
      if (!__privateGet(this, _elTriggerBtn))
        __privateSet(this, _elTriggerBtn, this.shadowRoot?.querySelector("#trigger") ?? void 0);
      const btn = __privateGet(this, _elTriggerBtn);
      if (btn && !btn.hasAttribute("data-gds-context-menu-trigger")) {
        btn.setAttribute("data-gds-context-menu-trigger", "true");
        btn.addEventListener("click", () => {
          this.open = !this.open;
        });
        btn.addEventListener("keydown", (e) => {
          if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
            e.preventDefault();
            this.open = true;
          }
        });
        applyTriggerAriaAttributes(btn, this.open, "menu");
      }
    });
    __privateAdd(this, _handleTriggerSlotChange, () => {
      const triggerBtn = this._elTriggerSlot.assignedNodes({ flatten: true }).find((node) => {
        return node instanceof HTMLElement;
      });
      if (triggerBtn) {
        __privateSet(this, _elTriggerBtn, triggerBtn);
      }
      __privateGet(this, _setupButton).call(this);
    });
    __privateAdd(this, _renderPopover, () => {
      return html`<gds-popover
      id="menu"
      autofocus
      .open=${this.open}
      .triggerRef=${Promise.resolve(__privateGet(this, _elTriggerBtn))}
      .anchorRef=${Promise.resolve(__privateGet(this, _elTriggerBtn))}
      .label=${this.label}
      .placement=${this.placement}
      .popupRole=${"menu"}
      @gds-ui-state=${(e) => this.open = e.detail.open}
    >
      <gds-menu
        aria-label=${this.label ?? this.buttonLabel}
        @gds-menu-item-click=${__privateMethod(this, _GdsContextMenu_instances, handleItemClick_fn)}
      >
        <slot></slot>
      </gds-menu>
    </gds-popover>`;
    });
  }
  connectedCallback() {
    super.connectedCallback();
    TransitionalStyles.instance.apply(this, "gds-context-menu");
    this.updateComplete.then(__privateGet(this, _handleTriggerSlotChange));
    this.addEventListener("keydown", (e) => {
      if (this.open && e.key == "Tab") {
        this.open = false;
        e.preventDefault();
      }
    });
  }
  render() {
    return html`<slot
        name="trigger"
        @slotchange=${__privateGet(this, _handleTriggerSlotChange)}
        ><gds-button
          .rank=${"secondary"}
          id="trigger"
          label=${this.buttonLabel}
        >
          ${this.showLabel ? html`<slot name="icon" slot="lead"
                  ><gds-icon-dot-grid-one-horizontal></gds-icon-dot-grid-one-horizontal></slot
                >${this.buttonLabel}` : html`<slot name="icon"
                ><gds-icon-dot-grid-one-horizontal></gds-icon-dot-grid-one-horizontal
              ></slot>`}
        </gds-button>
      </slot>
      ${when(this.open, __privateGet(this, _renderPopover))}`;
  }
  _handleOpenChange() {
    if (!this.open) {
      requestAnimationFrame(() => __privateGet(this, _elTriggerBtn)?.focus());
    }
  }
};
_elTriggerBtn = new WeakMap();
_setupButton = new WeakMap();
_handleTriggerSlotChange = new WeakMap();
_renderPopover = new WeakMap();
_GdsContextMenu_instances = new WeakSet();
handleItemClick_fn = function() {
  this.open = false;
};
GdsContextMenu.styles = [tokens];
GdsContextMenu.shadowRootOptions = {
  mode: "open",
  delegatesFocus: true
};
__decorateClass([
  property({ type: Boolean, reflect: true })
], GdsContextMenu.prototype, "open", 2);
__decorateClass([
  property({
    attribute: "button-label"
  })
], GdsContextMenu.prototype, "buttonLabel", 2);
__decorateClass([
  property({
    attribute: "show-label",
    type: Boolean
  })
], GdsContextMenu.prototype, "showLabel", 2);
__decorateClass([
  property()
], GdsContextMenu.prototype, "label", 2);
__decorateClass([
  property()
], GdsContextMenu.prototype, "placement", 2);
__decorateClass([
  query('slot[name="trigger"]')
], GdsContextMenu.prototype, "_elTriggerSlot", 2);
__decorateClass([
  watch("open", { waitUntilFirstUpdate: true })
], GdsContextMenu.prototype, "_handleOpenChange", 1);
GdsContextMenu = __decorateClass([
  gdsCustomElement("gds-context-menu", {
    dependsOn: [
      GdsMenuItem,
      GdsMenu,
      GdsPopover,
      GdsButton,
      IconDotGridOneHorizontal
    ]
  }),
  localized()
], GdsContextMenu);
export {
  GdsContextMenu,
  GdsMenuHeading,
  GdsMenuItem2 as GdsMenuItem
};
