@orangelogic/design-system 2.44.0 → 2.45.0

package/library/chunks/menu-item.DOFCmq0Z.js

@@ -1,775 +0,0 @@
-import { i as $, E as y, x as h, n as l, C as M, c as L } from "./custom-element.fmLrnDZr.js";
-import { c as P } from "./component.styles.DtouHn2g.js";
-import { d as k, L as E } from "./i18n.D33BKrRs.js";
-import { H as z, g as A } from "./slot.DJLm4Dig.js";
-import { w as x } from "./watch.BCJD77bD.js";
-import { e as f } from "./query.BBf1UFkC.js";
-import { e as C } from "./class-map.DqNfBvJI.js";
-import { o as m } from "./if-defined.CKupVaWs.js";
-import D from "../components/icon.js";
-import { C as T } from "./popup.CJrePm7n.js";
-import R from "../components/spinner.js";
-import { f as O } from "./directive-helpers.D78ZFDYN.js";
-import { i as H, t as I, e as B } from "./directive.oAbCiebi.js";
-const W = $`
-  :host {
-    --submenu-offset: -2px;
-    --prefix-font-size: var(--cx-font-size-small);
-    --prefix-color: var(--cx-color-neutral-500);
-    --label-color: var(--cx-color-neutral);
-    --suffix-color: var(--cx-color-neutral);
-    --font-weight: var(--cx-font-weight-regular);
-
-    display: block;
-  }
-
-  :host([inert]) {
-    display: none;
-  }
-
-  .menu-item {
-    position: relative;
-    display: flex;
-    align-items: stretch;
-    text-decoration: none;
-    font-family: var(--cx-font-sans);
-    font-size: var(--cx-font-size-small);
-    font-weight: var(--font-weight, var(--cx-font-weight-regular));
-    line-height: var(--cx-line-height-large);
-    letter-spacing: var(--cx-letter-spacing-normal);
-    color: var(--cx-color-neutral);
-    padding: var(--cx-spacing-x-small) var(--cx-spacing-small);
-    transition: var(--cx-transition-fast) fill;
-    background-color: var(--cx-menu-item-background-color, unset);
-    user-select: none;
-    -webkit-user-select: none;
-    white-space: nowrap;
-    cursor: pointer;
-  }
-
-  .menu-item.menu-item--disabled {
-    outline: none;
-    cursor: default;
-  }
-
-  .menu-item.menu-item--disabled .menu-item__label,
-  .menu-item.menu-item--disabled .menu-item__prefix,
-  .menu-item.menu-item--disabled .menu-item__chevron {
-    opacity: 0.5;
-  }
-
-  .menu-item.menu-item--disabled .menu-item__suffix:not(:slotted(cx-tooltip)) {
-    opacity: 0.5;
-  }
-
-  .menu-item.menu-item--loading {
-    outline: none;
-    cursor: wait;
-  }
-
-  .menu-item.menu-item--loading *:not(cx-spinner) {
-    opacity: 0.5;
-  }
-
-  .menu-item--loading cx-spinner {
-    --indicator-color: currentColor;
-    --track-width: 1px;
-    position: absolute;
-    font-size: 0.75em;
-    top: calc(50% - 0.5em);
-    left: 0.65rem;
-    opacity: 1;
-  }
-
-  .menu-item .menu-item__label {
-    color: var(--label-color, var(--cx-color-neutral));
-    flex: 1 1 auto;
-    display: inline-block;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    margin: auto;
-  }
-
-  .menu-item--checked .menu-item__label {
-    color: var(--cx-color-primary);
-  }
-
-  .menu-item .menu-item__prefix {
-    color: var(--prefix-color, var(--cx-color-neutral-500));
-    font-size: var(--prefix-font-size, var(--cx-font-size-small));
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-  }
-
-  .menu-item--checked {
-    --prefix-color: var(--cx-color-primary);
-    --suffix-color: var(--cx-color-primary);
-  }
-
-  .menu-item--checked .menu-item__check {
-    color: var(--cx-color-primary);
-  }
-
-  .menu-item .menu-item__prefix::slotted(*) {
-    margin-inline-end: var(--cx-spacing-x-small);
-  }
-
-  .menu-item .menu-item__suffix {
-    color: var(--suffix-color);
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-  }
-
-  .menu-item .menu-item__suffix::slotted(*) {
-    margin-inline-start: var(--cx-spacing-x-small);
-  }
-
-  /* Safe triangle */
-  .menu-item--submenu-expanded::after {
-    content: '';
-    position: fixed;
-    z-index: calc(var(--cx-z-index-dropdown) - 1);
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    clip-path: polygon(
-      var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),
-      var(--safe-triangle-submenu-start-x, 0)
-        var(--safe-triangle-submenu-start-y, 0),
-      var(--safe-triangle-submenu-end-x, 0)
-        var(--safe-triangle-submenu-end-y, 0)
-    );
-  }
-
-  @media (pointer: none), (pointer: coarse) {
-    .menu-item--submenu-expanded::after {
-      display: none;
-    }
-  }
-
-  :host(:focus-visible) {
-    outline: var(--cx-focus-ring);
-    outline-offset: calc(-1 * var(--cx-focus-ring-width));
-  }
-
-  :host(:hover:not([aria-disabled='true'], :focus-visible, .disable-hover))
-    .menu-item,
-  .menu-item--submenu-expanded {
-    background-color: var(--cx-menu-item-background-color-hover);
-    color: var(--cx-color-neutral-1000);
-  }
-
-  :host(:not([aria-disabled='true'])) .menu-item--active {
-    background-color: var(
-      --cx-menu-item-background-color-active,
-      var(--cx-menu-item-background-color-hover)
-    );
-    color: var(--cx-color-neutral-1000);
-  }
-
-  :host(:hover:not([aria-disabled='true'], :focus-visible, .disable-hover))
-    .menu-item--active {
-    background-color: var(
-      --cx-menu-item-background-color-active-hover,
-      var(--cx-menu-item-background-color-active)
-    );
-  }
-
-  :host(:focus-visible) .menu-item {
-    outline: none;
-    background-color: var(--cx-menu-item-background-color-hover);
-    opacity: 1;
-  }
-
-  .menu-item .menu-item__check,
-  .menu-item .menu-item__chevron {
-    flex: 0 0 auto;
-    align-items: center;
-    justify-content: center;
-    width: 1.5em;
-    visibility: hidden;
-  }
-
-  .menu-item .menu-item__check {
-    display: var(--checked-icon-display, flex);
-    margin-right: var(--cx-spacing-2x-small);
-  }
-
-  .menu-item .menu-item__chevron {
-    display: var(--submenu-icon-display, flex);
-  }
-
-  .menu-item--checked .menu-item__check,
-  .menu-item--has-submenu .menu-item__chevron {
-    visibility: visible;
-  }
-
-  /* Add elevation and z-index to submenus */
-  cx-popup::part(popup) {
-    border: var(--cx-panel-border-width) solid var(--cx-popup-border-color);
-    border-radius: var(--cx-border-radius-large);
-    box-shadow: var(--cx-shadow-large);
-    z-index: var(--cx-z-index-dropdown);
-    margin-left: var(--submenu-offset, -2px);
-    overflow: hidden;
-  }
-
-  .menu-item--rtl cx-popup::part(popup) {
-    margin-left: calc(-1 * var(--submenu-offset));
-  }
-
-  @media (forced-colors: active) {
-    :host(:hover:not([aria-disabled='true'])) .menu-item,
-    :host(:focus-visible) .menu-item {
-      outline: dashed 1px SelectedItem;
-      outline-offset: -1px;
-    }
-  }
-
-  /* When users slot a menu, make sure it conforms to the popup's auto-size */
-  ::slotted(cx-menu) {
-    max-width: var(--auto-size-available-width) !important;
-    max-height: var(--auto-size-available-height) !important;
-  }
-`;
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const c = (t, e) => {
-  const i = t._$AN;
-  if (i === void 0) return !1;
-  for (const s of i) s._$AO?.(e, !1), c(s, e);
-  return !0;
-}, p = (t) => {
-  let e, i;
-  do {
-    if ((e = t._$AM) === void 0) break;
-    i = e._$AN, i.delete(t), t = e;
-  } while (i?.size === 0);
-}, _ = (t) => {
-  for (let e; e = t._$AM; t = e) {
-    let i = e._$AN;
-    if (i === void 0) e._$AN = i = /* @__PURE__ */ new Set();
-    else if (i.has(t)) break;
-    i.add(t), U(e);
-  }
-};
-function G(t) {
-  this._$AN !== void 0 ? (p(this), this._$AM = t, _(this)) : this._$AM = t;
-}
-function N(t, e = !1, i = 0) {
-  const s = this._$AH, r = this._$AN;
-  if (r !== void 0 && r.size !== 0) if (e) if (Array.isArray(s)) for (let a = i; a < s.length; a++) c(s[a], !1), p(s[a]);
-  else s != null && (c(s, !1), p(s));
-  else c(this, t);
-}
-const U = (t) => {
-  t.type == I.CHILD && (t._$AP ??= N, t._$AQ ??= G);
-};
-class V extends H {
-  constructor() {
-    super(...arguments), this._$AN = void 0;
-  }
-  _$AT(e, i, s) {
-    super._$AT(e, i, s), _(this), this.isConnected = e._$AU;
-  }
-  _$AO(e, i = !0) {
-    e !== this.isConnected && (this.isConnected = e, e ? this.reconnected?.() : this.disconnected?.()), i && (c(this, e), p(this));
-  }
-  setValue(e) {
-    if (O(this._$Ct)) this._$Ct._$AI(e, this);
-    else {
-      const i = [...this._$Ct._$AH];
-      i[this._$Ci] = e, this._$Ct._$AI(i, this, 0);
-    }
-  }
-  disconnected() {
-  }
-  reconnected() {
-  }
-}
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const j = () => new q();
-class q {
-}
-const v = /* @__PURE__ */ new WeakMap(), K = B(class extends V {
-  render(t) {
-    return y;
-  }
-  update(t, [e]) {
-    const i = e !== this.G;
-    return i && this.G !== void 0 && this.rt(void 0), (i || this.lt !== this.ct) && (this.G = e, this.ht = t.options?.host, this.rt(this.ct = t.element)), y;
-  }
-  rt(t) {
-    if (this.isConnected || (t = void 0), typeof this.G == "function") {
-      const e = this.ht ?? globalThis;
-      let i = v.get(e);
-      i === void 0 && (i = /* @__PURE__ */ new WeakMap(), v.set(e, i)), i.get(this.G) !== void 0 && this.G.call(this.ht, void 0), i.set(this.G, t), t !== void 0 && this.G.call(this.ht, t);
-    } else this.G.value = t;
-  }
-  get lt() {
-    return typeof this.G == "function" ? v.get(this.ht ?? globalThis)?.get(this.G) : this.G?.value;
-  }
-  disconnected() {
-    this.lt === this.ct && this.rt(void 0);
-  }
-  reconnected() {
-    this.rt(this.ct);
-  }
-});
-class F {
-  constructor(e, i) {
-    this.popupRef = j(), this.parent = null, this.enableSubmenuTimer = -1, this.isHorizontalMenu = !1, this.isConnected = !1, this.isPopupConnected = !1, this.skidding = 0, this.submenuOpenDelay = 100, (this.host = e).addController(this), this.hasSlotController = i, this.handleMouseMove = this.handleMouseMove.bind(this), this.handleMouseOver = this.handleMouseOver.bind(this), this.handleKeyDown = this.handleKeyDown.bind(this), this.handleClick = this.handleClick.bind(this), this.handleSubmenuIconClick = this.handleSubmenuIconClick.bind(this), this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this), this.handleMouseLeave = this.handleMouseLeave.bind(this), this.handlePopupMouseover = this.handlePopupMouseover.bind(this), this.handlePopupReposition = this.handlePopupReposition.bind(this);
-  }
-  get popup() {
-    return this.popupRef.value;
-  }
-  hostConnected() {
-    this.parent = this.host.closest("cx-menu"), this.hasSlotController.test("submenu") && !this.host.disabled && (this.addListeners(), this.updateSkidding()), this.parent && (this.syncIsHorizontalMenu(), this.parentObserver = new MutationObserver(() => {
-      this.syncIsHorizontalMenu();
-    }), this.parentObserver.observe(this.parent, {
-      attributeFilter: ["horizontal"]
-    }));
-  }
-  hostDisconnected() {
-    this.removeListeners(), this.parentObserver && this.parentObserver.disconnect();
-  }
-  hostUpdated() {
-    this.removeListeners(), this.hasSlotController.test("submenu") && !this.host.disabled && (this.addListeners(), this.updateSkidding(), this.syncIsHorizontalMenu());
-  }
-  addListeners() {
-    this.isConnected || (this.host.addEventListener("mousemove", this.handleMouseMove), (this.host.submenuTrigger === "both" || this.host.submenuTrigger === "hover") && (this.host.addEventListener("mouseover", this.handleMouseOver), this.host.addEventListener("mouseleave", this.handleMouseLeave)), (this.host.submenuTrigger === "both" || this.host.submenuTrigger === "click") && (this.host.addEventListener("click", this.handleClick), this.host.submenuIcon?.addEventListener(
-      "click",
-      this.handleSubmenuIconClick
-    ), document.addEventListener("mousedown", this.handleDocumentMouseDown)), this.host.addEventListener("keydown", this.handleKeyDown), this.isConnected = !0), this.isPopupConnected || this.popupRef.value && (this.popupRef.value.addEventListener(
-      "mouseover",
-      this.handlePopupMouseover
-    ), this.popupRef.value.addEventListener(
-      "cx-reposition",
-      this.handlePopupReposition
-    ), this.isPopupConnected = !0);
-  }
-  removeListeners() {
-    this.isConnected && (this.host.removeEventListener("mousemove", this.handleMouseMove), this.host.removeEventListener("mouseover", this.handleMouseOver), this.host.removeEventListener("mouseleave", this.handleMouseLeave), this.host.removeEventListener("click", this.handleClick), this.host.submenuIcon?.removeEventListener(
-      "click",
-      this.handleSubmenuIconClick
-    ), document.removeEventListener("mousedown", this.handleDocumentMouseDown), this.host.removeEventListener("keydown", this.handleKeyDown), this.isConnected = !1), this.isPopupConnected && this.popupRef.value && (this.popupRef.value.removeEventListener(
-      "mouseover",
-      this.handlePopupMouseover
-    ), this.popupRef.value.removeEventListener(
-      "cx-reposition",
-      this.handlePopupReposition
-    ), this.isPopupConnected = !1);
-  }
-  syncIsHorizontalMenu() {
-    this.parent && (this.isHorizontalMenu = this.parent.hasAttribute("horizontal"));
-  }
-  // Set the safe triangle cursor position
-  handleMouseMove(e) {
-    const i = getComputedStyle(this.host).direction === "rtl" || this.popupRef.value?.dataset.currentPlacement?.startsWith("left");
-    this.host.style.setProperty(
-      "--safe-triangle-cursor-x",
-      `${e.clientX + (i ? 1 : 0)}px`
-    ), this.host.style.setProperty(
-      "--safe-triangle-cursor-y",
-      `${e.clientY}px`
-    );
-  }
-  handleMouseOver() {
-    this.hasSlotController.test("submenu") && this.enableSubmenu();
-  }
-  handleSubmenuEntry(e) {
-    const i = this.host.renderRoot.querySelector("slot[name='submenu']");
-    if (!i) {
-      console.error(
-        "Cannot activate a submenu if no corresponding menuitem can be found.",
-        this
-      );
-      return;
-    }
-    let s = null;
-    for (const r of i.assignedElements())
-      if (s = r.querySelectorAll("cx-menu-item, [role^='menuitem']"), s.length !== 0)
-        break;
-    if (!s || s.length === 0) {
-      this.host.lazy && (e.preventDefault(), e.stopPropagation(), this.enableSubmenu(!1));
-      return;
-    }
-    s[0].setAttribute("tabindex", "0");
-    for (let r = 1; r !== s.length; ++r)
-      s[r].setAttribute("tabindex", "-1");
-    this.popupRef.value && (e.preventDefault(), e.stopPropagation(), this.popupRef.value.active ? s[0] instanceof HTMLElement && s[0].focus() : (this.enableSubmenu(!1), this.popupRef.value.addEventListener("cx-opened", () => {
-      s[0] instanceof HTMLElement && s[0].focus();
-    }), this.host.requestUpdate()));
-  }
-  // Focus on the first menu-item of a submenu.
-  handleKeyDown(e) {
-    const i = () => {
-      e.preventDefault(), e.stopPropagation(), this.host.focus(), this.disableSubmenu();
-    };
-    switch (e.key) {
-      case "Tab": {
-        this.disableSubmenu();
-        break;
-      }
-      case "Escape": {
-        this.host.focus(), this.disableSubmenu();
-        break;
-      }
-      case "ArrowLeft": {
-        e.target !== this.host && !this.isHorizontalMenu && i();
-        break;
-      }
-      case "ArrowUp": {
-        e.target !== this.host && this.isHorizontalMenu && i();
-        break;
-      }
-      case "ArrowRight": {
-        this.isHorizontalMenu || this.handleSubmenuEntry(e);
-        break;
-      }
-      case "ArrowDown": {
-        this.isHorizontalMenu && this.handleSubmenuEntry(e);
-        break;
-      }
-    }
-  }
-  handleClick(e) {
-    e.target === this.host ? (e.preventDefault(), e.stopPropagation(), this.isExpanded() ? this.disableSubmenu() : e.isTrusted && this.enableSubmenu()) : e.target instanceof Element && (e.target.tagName === "cx-menu-item" || e.target.role?.startsWith("menuitem"));
-  }
-  handleSubmenuIconClick(e) {
-    e.preventDefault(), e.stopPropagation(), this.isExpanded() ? this.disableSubmenu() : this.enableSubmenu();
-  }
-  handleDocumentMouseDown(e) {
-    const i = e.composedPath();
-    this.host && !i.includes(this.host) && this.disableSubmenu();
-  }
-  // Close this submenu on focus outside of the parent or any descendants.
-  handleMouseLeave(e) {
-    e.relatedTarget && e.relatedTarget instanceof Element && this.host.contains(e.relatedTarget) || this.disableSubmenu();
-  }
-  // Prevent the parent menu-item from getting focus on mouse movement on the submenu
-  handlePopupMouseover(e) {
-    e.stopPropagation();
-  }
-  // Set the safe triangle values for the submenu when the position changes
-  handlePopupReposition() {
-    const i = this.host.renderRoot.querySelector("slot[name='submenu']")?.assignedElements({ flatten: !0 }).filter((b) => b.localName === "cx-menu")[0], s = getComputedStyle(this.host).direction === "rtl" || this.popupRef.value?.dataset.currentPlacement?.startsWith("left");
-    if (!i)
-      return;
-    const { height: r, left: a, top: u, width: d } = i.getBoundingClientRect();
-    this.host.style.setProperty(
-      "--safe-triangle-submenu-start-x",
-      `${s ? a + d : a}px`
-    ), this.host.style.setProperty("--safe-triangle-submenu-start-y", `${u}px`), this.host.style.setProperty(
-      "--safe-triangle-submenu-end-x",
-      `${s ? a + d : a}px`
-    ), this.host.style.setProperty(
-      "--safe-triangle-submenu-end-y",
-      `${u + r}px`
-    );
-  }
-  setSubmenuState(e) {
-    this.popupRef.value && this.popupRef.value.active !== e && (this.popupRef.value.active = e, this.host.requestUpdate());
-  }
-  // Shows the submenu. Supports disabling the opening delay, e.g. for keyboard events that want to set the focus to the
-  // newly opened menu.
-  enableSubmenu(e = !0) {
-    this.host.lazy && this.host.emit("cx-lazy-load"), e ? (window.clearTimeout(this.enableSubmenuTimer), this.enableSubmenuTimer = window.setTimeout(() => {
-      this.setSubmenuState(!0);
-    }, this.submenuOpenDelay)) : this.setSubmenuState(!0);
-  }
-  disableSubmenu() {
-    window.clearTimeout(this.enableSubmenuTimer), this.setSubmenuState(!1);
-  }
-  // Calculate the space the top of a menu takes-up, for aligning the popup menu-item with the activating element.
-  updateSkidding() {
-    if (!this.host.parentElement?.computedStyleMap)
-      return;
-    const e = this.host.parentElement.computedStyleMap(), i = k(this.host) === "rtl", s = this.host.submenuPlacement ?? (i ? "left-start" : "right-start"), r = s.startsWith("left") || s.startsWith("right");
-    let a = [];
-    r && (s.endsWith("-start") ? a = ["padding-top", "border-top-width", "margin-top"] : s.endsWith("-end") && (a = ["padding-bottom", "border-bottom-width", "margin-bottom"]));
-    const u = a.reduce((d, b) => {
-      const g = e.get(b) ?? new CSSUnitValue(0, "px"), S = (g instanceof CSSUnitValue ? g : new CSSUnitValue(0, "px")).to("px"), w = s.endsWith("-end") ? 1 : -1;
-      return d + S.value * w;
-    }, 0);
-    this.skidding = u;
-  }
-  isExpanded() {
-    return this.popupRef.value ? this.popupRef.value.active : !1;
-  }
-  renderSubmenu() {
-    const e = k(this.host) === "rtl";
-    if (!this.hasSlotController.test("submenu"))
-      return null;
-    const i = this.host.submenuPlacement ?? (e ? "left-start" : "right-start");
-    return h`
-      <cx-popup
-        ${K(this.popupRef)}
-        placement=${i}
-        anchor="anchor"
-        part="submenu-popup"
-        flip
-        flip-fallback-strategy="best-fit"
-        skidding=${this.skidding}
-        strategy="overlay"
-        auto-size="both"
-        auto-size-padding="10"
-        ?shift=${!!this.host.shiftBoundary}
-        .flipBoundary=${this.host.flipBoundary}
-        .shiftBoundary=${this.host.shiftBoundary}
-      >
-        <slot name="submenu"></slot>
-      </cx-popup>
-    `;
-  }
-}
-var Q = Object.defineProperty, X = Object.getOwnPropertyDescriptor, o = (t, e, i, s) => {
-  for (var r = s > 1 ? void 0 : s ? X(e, i) : e, a = t.length - 1, u; a >= 0; a--)
-    (u = t[a]) && (r = (s ? u(e, i, r) : u(r)) || r);
-  return s && r && Q(e, i, r), r;
-};
-let n = class extends M {
-  constructor() {
-    super(), this.type = "normal", this.submenuTrigger = "both", this.checked = !1, this.value = "", this.href = "", this.rel = "noreferrer noopener", this.loading = !1, this.disabled = !1, this.active = !1, this.readonly = !1, this.menu = "", this.lazy = !1, this.localize = new E(this), this.hasSlotController = new z(
-      this,
-      "submenu",
-      "submenu-icon"
-    ), this.submenuController = new F(
-      this,
-      this.hasSlotController
-    ), this.handleDocumentWheel = (t) => {
-      const e = t.composedPath();
-      this.submenuController.isExpanded() && (!this.submenuController.popup || !e.includes(this.submenuController.popup)) && (t.preventDefault(), this.submenuController.disableSubmenu());
-    }, this.handleHostClick = this.handleHostClick.bind(this), this.handleMouseOver = this.handleMouseOver.bind(this);
-  }
-  runFirstUpdated() {
-    this.addEventListener("click", this.handleHostClick), this.addEventListener("mouseover", this.handleMouseOver), document.addEventListener("wheel", this.handleDocumentWheel, {
-      passive: !1
-    });
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("click", this.handleHostClick), this.removeEventListener("mouseover", this.handleMouseOver), document.removeEventListener("wheel", this.handleDocumentWheel);
-  }
-  handleDefaultSlotChange() {
-    const t = this.getTextLabel();
-    if (typeof this.cachedTextLabel > "u") {
-      this.cachedTextLabel = t;
-      return;
-    }
-    t !== this.cachedTextLabel && (this.cachedTextLabel = t, this.emit("slotchange", {
-      bubbles: !0,
-      cancelable: !1,
-      composed: !1
-    }));
-  }
-  handleHostClick(t) {
-    (this.disabled || this.readonly) && (t.target === this && t.preventDefault(), t.stopImmediatePropagation()), this.href && this.anchor && this.anchor.click();
-  }
-  handleMouseOver(t) {
-    t.stopPropagation();
-  }
-  handleAnchorClick(t) {
-    t.stopPropagation();
-  }
-  handleCheckedChange() {
-    if (this.checked && this.type !== "checkbox") {
-      this.checked = !1, console.error(
-        'The checked attribute can only be used on menu items with type="checkbox"',
-        this
-      );
-      return;
-    }
-    this.type === "checkbox" ? this.setAttribute("aria-checked", this.checked ? "true" : "false") : this.removeAttribute("aria-checked");
-  }
-  handleDisabledChange() {
-    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
-  }
-  handleTypeChange() {
-    this.type === "checkbox" ? (this.setAttribute("role", "menuitemcheckbox"), this.setAttribute("aria-checked", this.checked ? "true" : "false")) : (this.setAttribute("role", "menuitem"), this.removeAttribute("aria-checked"));
-  }
-  /** Returns a text label based on the contents of the menu item's default slot. */
-  getTextLabel() {
-    return A(this.defaultSlot);
-  }
-  isSubmenu() {
-    return this.hasSlotController.test("submenu") || !!this.menu.trim();
-  }
-  renderBase(t) {
-    const e = !!this.href, i = this.localize.dir() === "rtl", s = this.submenuController.isExpanded();
-    return e ? h`
-        <a
-          id="anchor"
-          part="base"
-          class=${C({
-      "menu-item": !0,
-      "menu-item--active": this.active,
-      "menu-item--checkbox": this.type === "checkbox",
-      "menu-item--checked": this.checked,
-      "menu-item--disabled": this.disabled,
-      "menu-item--has-submenu": this.isSubmenu(),
-      "menu-item--loading": this.loading,
-      "menu-item--rtl": i,
-      "menu-item--submenu-expanded": s
-    })}
-          aria-haspopup=${this.isSubmenu()}
-          href=${m(this.href)}
-          target=${m(this.target)}
-          download=${m(this.download)}
-          rel=${m(this.rel)}
-          aria-label=${this.getTextLabel()}
-          ?inert=${this.disabled}
-          @click=${this.handleAnchorClick}
-        >
-          ${t}
-        </a>
-      ` : h`
-      <div
-        id="anchor"
-        part="base"
-        class=${C({
-      "menu-item": !0,
-      "menu-item--active": this.active,
-      "menu-item--checkbox": this.type === "checkbox",
-      "menu-item--checked": this.checked,
-      "menu-item--disabled": this.disabled,
-      "menu-item--has-submenu": this.isSubmenu(),
-      "menu-item--loading": this.loading,
-      "menu-item--rtl": i,
-      "menu-item--submenu-expanded": s
-    })}
-        aria-haspopup=${this.isSubmenu()}
-        aria-label=${this.getTextLabel()}
-      >
-        ${t}
-      </div>
-    `;
-  }
-  render() {
-    const t = this.localize.dir() === "rtl";
-    let e;
-    return this.submenuPlacement && (this.submenuPlacement.startsWith("top") || this.submenuPlacement.startsWith("bottom")) ? e = "keyboard_arrow_down" : e = t ? "chevron_left" : "chevron_right", this.renderBase(h`
-      <span part="checked-icon" class="menu-item__check">
-        <cx-icon name="check"></cx-icon>
-      </span>
-
-      <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
-
-      <slot
-        part="label"
-        class="menu-item__label"
-        @slotchange=${this.handleDefaultSlotChange}
-      ></slot>
-
-      <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
-
-      <slot name="submenu-icon" part="submenu-icon" class="menu-item__chevron">
-        <cx-icon name=${e} aria-hidden="true"></cx-icon>
-      </slot>
-
-      ${this.submenuController.renderSubmenu()}
-      ${this.loading ? h`
-            <cx-spinner
-              part="spinner"
-              exportparts="base:spinner__base"
-            ></cx-spinner>
-          ` : ""}
-    `);
-  }
-};
-n.styles = [P, W];
-n.dependencies = {
-  "cx-icon": D,
-  "cx-popup": T,
-  "cx-spinner": R
-};
-o([
-  f("slot:not([name])")
-], n.prototype, "defaultSlot", 2);
-o([
-  f("a#anchor", !0)
-], n.prototype, "anchor", 2);
-o([
-  f(".menu-item")
-], n.prototype, "menuItem", 2);
-o([
-  f(".menu-item__chevron")
-], n.prototype, "submenuIcon", 2);
-o([
-  l()
-], n.prototype, "type", 2);
-o([
-  l({ attribute: "submenu-trigger" })
-], n.prototype, "submenuTrigger", 2);
-o([
-  l({ reflect: !0, type: Boolean })
-], n.prototype, "checked", 2);
-o([
-  l()
-], n.prototype, "value", 2);
-o([
-  l()
-], n.prototype, "href", 2);
-o([
-  l()
-], n.prototype, "target", 2);
-o([
-  l()
-], n.prototype, "rel", 2);
-o([
-  l()
-], n.prototype, "download", 2);
-o([
-  l({ reflect: !0, type: Boolean })
-], n.prototype, "loading", 2);
-o([
-  l({ reflect: !0, type: Boolean })
-], n.prototype, "disabled", 2);
-o([
-  l({ reflect: !0, type: Boolean })
-], n.prototype, "active", 2);
-o([
-  l({ reflect: !0, type: Boolean })
-], n.prototype, "readonly", 2);
-o([
-  l({ attribute: "flip-boundary", type: Object })
-], n.prototype, "flipBoundary", 2);
-o([
-  l({ attribute: "shift-boundary", type: Object })
-], n.prototype, "shiftBoundary", 2);
-o([
-  l({ reflect: !0 })
-], n.prototype, "menu", 2);
-o([
-  l({ attribute: "submenu-placement" })
-], n.prototype, "submenuPlacement", 2);
-o([
-  l({ reflect: !0, type: Boolean })
-], n.prototype, "lazy", 2);
-o([
-  x("checked")
-], n.prototype, "handleCheckedChange", 1);
-o([
-  x("disabled")
-], n.prototype, "handleDisabledChange", 1);
-o([
-  x("type")
-], n.prototype, "handleTypeChange", 1);
-n = o([
-  L("cx-menu-item")
-], n);
-export {
-  n as C,
-  j as e,
-  V as f,
-  K as n
-};