@orangelogic/design-system 2.208.0 → 2.210.0

package/library/components/menu.js

@@ -4,17 +4,17 @@ import { c as y } from "../chunks/custom-element.L4WJXn1j.js";
 import { L as x } from "../chunks/i18n.DbXTTLXx.js";
 import { i as w, x as b } from "../chunks/lit-element.jLBm65_O.js";
 import { r as k } from "../chunks/state.CSDxrqLd.js";
-import { e as A } from "../chunks/query.BBf1UFkC.js";
-import { n as M } from "../chunks/when.Dr1es41R.js";
-import S from "./menu-item.js";
+import { e as M } from "../chunks/query.BBf1UFkC.js";
+import { n as A } from "../chunks/when.Dr1es41R.js";
+import I from "./menu-item.js";
 var p = /* @__PURE__ */ ((e) => (e.Default = "default", e.Multiple = "multiple", e))(p || {});
-const I = w`:host{background:var(--cx-panel-background-color);border:solid var(--cx-panel-border-width) var(--cx-panel-border-color);border-radius:var(--cx-panel-border-radius,var(--cx-border-radius-large));padding:var(--cx-panel-padding,var(--cx-spacing-x-small) 0);--divider-color:var(--cx-panel-border-color);--divider-width:var(--cx-panel-border-width);--divider-spacing:var(--cx-spacing-x-small);display:block;position:relative;overflow:auto}:host([horizontal]){padding:0 var(--cx-spacing-x-small);flex-wrap:wrap;justify-content:space-between;display:flex}::slotted(cx-divider){--color:var(--divider-color);--width:var(--divider-width);--spacing:var(--divider-spacing)}::slotted([data-alternating-grouping]):before{content:" ";background-color:var(--divider-color);margin:var(--divider-spacing) 0;height:var(--divider-width);display:block}::slotted([data-alternating-grouping=horizontal]):before{height:100%;margin:0 var(--divider-spacing);width:var(--divider-width);display:inline-block}:host([horizontal]) ::slotted(cx-menu-section){flex-wrap:wrap;justify-content:space-between;display:flex}:host([horizontal]) ::slotted(cx-menu-item){display:flex}:host([variant=multiple]){position:relative;overflow:hidden}:host([variant=multiple]) ::slotted(cx-menu[name]){opacity:0;pointer-events:none;transition:opacity var(--cx-transition-fast) ease-in-out, transform var(--cx-transition-medium) ease-in-out;border:none;top:0;left:0;transform:translate(-50%);position:absolute!important}:host([variant=multiple]) ::slotted(cx-menu[active]){opacity:1;pointer-events:auto;transform:translate(0)}.back__button::part(checked-icon),.back__button::part(submenu-icon){display:none}.back__divider{--spacing:var(--cx-spacing-x-small)}`;
-var E = Object.defineProperty, C = Object.getOwnPropertyDescriptor, c = (e, i, t, s) => {
-  for (var a = s > 1 ? void 0 : s ? C(i, t) : i, o = e.length - 1, h; o >= 0; o--)
-    (h = e[o]) && (a = (s ? h(i, t, a) : h(a)) || a);
-  return s && a && E(i, t, a), a;
+const S = w`:host{background:var(--cx-panel-background-color);border:solid var(--cx-panel-border-width) var(--cx-panel-border-color);border-radius:var(--cx-panel-border-radius,var(--cx-border-radius-large));padding:var(--cx-panel-padding,var(--cx-spacing-x-small) 0);--divider-color:var(--cx-panel-border-color);--divider-width:var(--cx-panel-border-width);--divider-spacing:var(--cx-spacing-x-small);display:block;position:relative;overflow:auto}:host([horizontal]){padding:0 var(--cx-spacing-x-small);flex-wrap:wrap;justify-content:space-between;display:flex}::slotted(cx-divider){--color:var(--divider-color);--width:var(--divider-width);--spacing:var(--divider-spacing)}::slotted([data-alternating-grouping]):before{content:" ";background-color:var(--divider-color);margin:var(--divider-spacing) 0;height:var(--divider-width);display:block}::slotted([data-alternating-grouping=horizontal]):before{height:100%;margin:0 var(--divider-spacing);width:var(--divider-width);display:inline-block}:host([horizontal]) ::slotted(cx-menu-section){flex-wrap:wrap;justify-content:space-between;display:flex}:host([horizontal]) ::slotted(cx-menu-item){display:flex}:host([variant=multiple]){position:relative;overflow:hidden}:host([variant=multiple]) ::slotted(cx-menu[name]){opacity:0;pointer-events:none;transition:opacity var(--cx-transition-fast) ease-in-out, transform var(--cx-transition-medium) ease-in-out;border:none;top:0;left:0;transform:translate(-50%);position:absolute!important}:host([variant=multiple]) ::slotted(cx-menu[active]){opacity:1;pointer-events:auto;transform:translate(0)}.back__button::part(checked-icon),.back__button::part(submenu-icon){display:none}.back__divider{--spacing:var(--cx-spacing-x-small)}`;
+var E = Object.defineProperty, C = Object.getOwnPropertyDescriptor, c = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? C(t, i) : t, o = e.length - 1, h; o >= 0; o--)
+    (h = e[o]) && (a = (s ? h(t, i, a) : h(a)) || a);
+  return s && a && E(t, i, a), a;
 };
-function m(e) {
+function f(e) {
   return e.tagName.toLowerCase() === "cx-menu" && e instanceof l && e.getAttribute("role") === "menu";
 }
 let l = class extends g {
@@ -24,7 +24,7 @@ let l = class extends g {
   connectedCallback() {
     super.connectedCallback(), this.slotMutationObserver = new MutationObserver((e) => {
       if (e.every(
-        (t) => t.type === "attributes" && (t.attributeName === "checked" || t.attributeName === "active")
+        (i) => i.type === "attributes" && (i.attributeName === "checked" || i.attributeName === "active")
       )) {
         this.syncTabIndexToSelection();
         return;
@@ -48,8 +48,8 @@ let l = class extends g {
     }
   }
   handleClick(e) {
-    const i = ["menuitem", "menuitemcheckbox"], t = e.composedPath(), s = t.find(
-      (n) => i.includes(n?.getAttribute?.("role") || "")
+    const t = ["menuitem", "menuitemcheckbox"], i = e.composedPath(), s = i.find(
+      (n) => t.includes(n?.getAttribute?.("role") || "")
     );
     if (!s)
       return;
@@ -58,7 +58,7 @@ let l = class extends g {
       this.setActiveMenu(a);
       return;
     }
-    if (t.find(
+    if (i.find(
       (n) => n?.getAttribute?.("role") === "menu"
     ) !== this)
       return;
@@ -68,9 +68,9 @@ let l = class extends g {
   handleKeyDown(e) {
     if (this.ignoredKeys.includes(e.key))
       return;
-    const i = e.target, t = this.isMenuItem(i) ? i : void 0;
-    if (t && (e.key === "Enter" || e.key === " "))
-      e.preventDefault(), this.bubbleKeyDown || e.stopPropagation(), t.click();
+    const t = e.target, i = this.isMenuItem(t) ? t : void 0;
+    if (i && (e.key === "Enter" || e.key === " "))
+      e.preventDefault(), this.bubbleKeyDown || e.stopPropagation(), i.click();
     else if ([
       "Home",
       "End",
@@ -79,9 +79,9 @@ let l = class extends g {
       "ArrowLeft",
       "ArrowRight"
     ].includes(e.key)) {
-      const s = this.getAllItems(), a = t ? s.indexOf(t) : -1;
+      const s = this.getAllItems(), a = i ? s.indexOf(i) : -1;
       let o = a === -1 ? s.findIndex((h) => h.getAttribute("tabindex") === "0") : a;
-      if (o === -1 && (o = 0), ["ArrowLeft", "ArrowRight"].includes(e.key) && !this.bubbleKeyDown && !(this.parentElement instanceof l) && !(this.parentElement instanceof S) && e.stopPropagation(), s.length > 0) {
+      if (o === -1 && (o = 0), ["ArrowLeft", "ArrowRight"].includes(e.key) && !this.bubbleKeyDown && !(this.parentElement instanceof l) && !(this.parentElement instanceof I) && e.stopPropagation(), s.length > 0) {
         const h = this.horizontal ? e.key === "ArrowRight" || o === s.length - 1 && e.key === "ArrowDown" : e.key === "ArrowDown", d = this.horizontal ? e.key === "ArrowLeft" || o === 0 && e.key === "ArrowUp" : e.key === "ArrowUp";
         if (["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp"].includes(
           e.key
@@ -94,7 +94,7 @@ let l = class extends g {
         else if (e.key === "Home") {
           e.preventDefault();
           let n = this.parentElement?.firstElementChild;
-          for (; n && !m(n); )
+          for (; n && !f(n); )
             n = n.nextElementSibling;
           if (n) {
             const r = n.getAllItems();
@@ -107,7 +107,7 @@ let l = class extends g {
         } else if (e.key === "End") {
           e.preventDefault();
           let n = this.parentElement?.lastElementChild;
-          for (; n && !m(n); )
+          for (; n && !f(n); )
             n = n.previousElementSibling;
           if (n) {
             const r = n.getAllItems();
@@ -121,7 +121,7 @@ let l = class extends g {
         if (o < 0 && !this.disabledTabLoop) {
           e.preventDefault();
           let n = this.previousElementSibling;
-          for (; n && !m(n); )
+          for (; n && !f(n); )
             n = n.previousElementSibling;
           if (n) {
             const r = n.getAllItems();
@@ -131,12 +131,12 @@ let l = class extends g {
             }
           } else {
             let r = this.parentElement?.lastElementChild;
-            for (; r && !m(r); )
+            for (; r && !f(r); )
               r = r.previousElementSibling;
             if (r) {
-              const f = r.getAllItems();
-              if (f.length > 0) {
-                f[f.length - 1].focus();
+              const m = r.getAllItems();
+              if (m.length > 0) {
+                m[m.length - 1].focus();
                 return;
               }
             }
@@ -146,7 +146,7 @@ let l = class extends g {
         if (o > s.length - 1 && !this.disabledTabLoop) {
           e.preventDefault();
           let n = this.nextElementSibling;
-          for (; n && !m(n); )
+          for (; n && !f(n); )
             n = n.nextElementSibling;
           if (n) {
             const r = n.getAllItems();
@@ -156,12 +156,12 @@ let l = class extends g {
             }
           } else {
             let r = this.parentElement?.firstElementChild;
-            for (; r && !m(r); )
+            for (; r && !f(r); )
               r = r.nextElementSibling;
             if (r) {
-              const f = r.getAllItems();
-              if (f.length > 0) {
-                f[0].focus();
+              const m = r.getAllItems();
+              if (m.length > 0) {
+                m[0].focus();
                 return;
               }
             }
@@ -174,18 +174,22 @@ let l = class extends g {
       }
     }
   }
+  handleMouseDown(e) {
+    const t = e.target;
+    this.isMenuItem(t) && this.setCurrentItem(t);
+  }
   handleSlotChange() {
     this.syncTabIndexToSelection();
     let e = null;
-    this.defaultSlot.assignedElements().filter((i) => {
-      const t = i;
-      return this.isMenuItem(t) || this.isMenuSection(t);
-    }).forEach((i) => {
-      const t = i, s = !t.inert && !t.hasAttribute("is-empty");
-      e && s && (this.isMenuSection(e) && this.isMenuItem(t) || this.isMenuSection(t) && t.childElementCount > 0) ? t.setAttribute(
+    this.defaultSlot.assignedElements().filter((t) => {
+      const i = t;
+      return this.isMenuItem(i) || this.isMenuSection(i);
+    }).forEach((t) => {
+      const i = t, s = !i.inert && !i.hasAttribute("is-empty");
+      e && s && (this.isMenuSection(e) && this.isMenuItem(i) || this.isMenuSection(i) && i.childElementCount > 0) ? i.setAttribute(
         "data-alternating-grouping",
         this.horizontal ? "horizontal" : ""
-      ) : t.removeAttribute("data-alternating-grouping"), s && (e = t);
+      ) : i.removeAttribute("data-alternating-grouping"), s && (e = i);
     });
   }
   /** Sets `tabindex="0"` on the selected item (`checked`/`active`), or the first item if none is selected. */
@@ -193,15 +197,15 @@ let l = class extends g {
     const e = this.getAllItems();
     if (e.length === 0)
       return;
-    let i;
-    for (const t of e)
-      t.setAttribute("tabindex", "-1"), !i && (t.checked || t.active) && (i = t);
-    (i ?? e[0]).setAttribute("tabindex", "0");
+    let t;
+    for (const i of e)
+      i.setAttribute("tabindex", "-1"), !t && (i.checked || i.active) && (t = i);
+    (t ?? e[0]).setAttribute("tabindex", "0");
   }
   /** Moves `tabindex="0"` directly to `item`; used by `setCurrentItem()` for explicit external placement. */
   setRovingTabIndex(e) {
-    for (const i of this.getAllItems())
-      i.setAttribute("tabindex", i === e ? "0" : "-1");
+    for (const t of this.getAllItems())
+      t.setAttribute("tabindex", t === e ? "0" : "-1");
   }
   isMenuSection(e) {
     return e instanceof HTMLElement ? e.tagName.toLowerCase() === "cx-menu-section" : !1;
@@ -213,39 +217,39 @@ let l = class extends g {
   }
   /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
   getAllItems() {
-    return this.defaultSlot.assignedElements({ flatten: !0 }).flatMap((i) => {
-      if (this.isMenuSection(i)) {
-        const t = i.shadowRoot?.querySelector("slot");
-        return t ? [...t.assignedElements({ flatten: !0 })] : [];
+    return this.defaultSlot.assignedElements({ flatten: !0 }).flatMap((t) => {
+      if (this.isMenuSection(t)) {
+        const i = t.shadowRoot?.querySelector("slot");
+        return i ? [...i.assignedElements({ flatten: !0 })] : [];
       }
-      return i;
-    }).filter((i) => !(i.inert || !this.isMenuItem(i)));
+      return t;
+    }).filter((t) => !(t.inert || !this.isMenuItem(t)));
   }
   /** @internal Gets all slotted submenus, used for 'multiple' variant */
   getAllSubMenus() {
     return [...this.querySelectorAll("cx-menu")];
   }
   setActiveMenu(e) {
-    const i = this.getAllSubMenus();
-    let t = null;
-    i.forEach((s) => {
-      s.name === e ? (s.active = !0, t = s) : s.active = !1;
-    }), this.adjustMenuSize(), t && (this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = null), this.resizeObserver = new ResizeObserver(() => {
+    const t = this.getAllSubMenus();
+    let i = null;
+    t.forEach((s) => {
+      s.name === e ? (s.active = !0, i = s) : s.active = !1;
+    }), this.adjustMenuSize(), i && (this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = null), this.resizeObserver = new ResizeObserver(() => {
       this.adjustMenuSize();
-    }), this.resizeObserver.observe(t));
+    }), this.resizeObserver.observe(i));
   }
   async adjustMenuSize(e = 250) {
-    const i = this.getActiveMenu();
-    if (i) {
-      await i.updateComplete;
-      const t = i.offsetWidth, s = i.offsetHeight;
+    const t = this.getActiveMenu();
+    if (t) {
+      await t.updateComplete;
+      const i = t.offsetWidth, s = t.offsetHeight;
       this.animate(
         [
           {
             height: this.style.height ?? `${s}px`,
-            width: this.style.width ?? `${t}px`
+            width: this.style.width ?? `${i}px`
           },
-          { height: `${s}px`, width: `${t}px` }
+          { height: `${s}px`, width: `${i}px` }
           // Fade out
         ],
         {
@@ -257,28 +261,28 @@ let l = class extends g {
       this.style.width = "", this.style.height = "";
   }
   resetActiveMenu() {
-    this.getAllSubMenus().forEach((i) => {
-      i.default && this.setActiveMenu(i.name);
+    this.getAllSubMenus().forEach((t) => {
+      t.default && this.setActiveMenu(t.name);
     });
   }
   getActiveMenu() {
-    return this.getAllSubMenus().find((i) => i.active) || void 0;
+    return this.getAllSubMenus().find((t) => t.active) || void 0;
   }
   /** @internal Sets `tabindex="0"` on `item` and `tabindex="-1"` on all others. Call before focusing a menu item. */
   setCurrentItem(e) {
     this.setRovingTabIndex(e);
   }
   render() {
-    const e = M(
+    const e = A(
       this.back,
       () => b`<slot name="back-button" role="menuitem" menu=${this.back}><cx-menu-item part="back-button" class="back__button" menu=${this.back}><cx-icon slot="prefix" name="chevron_left"></cx-icon>${this.localize.term("back")}</cx-menu-item><cx-divider class="back__divider"></cx-divider></slot>`
     );
-    return this.variant === p.Multiple ? b`${e}<slot @slotchange=${this.handleSlotChange} @click=${this.handleClick} @keydown=${this.handleKeyDown}></slot>` : b`${e}<slot @slotchange=${this.handleSlotChange} @click=${this.handleClick} @keydown=${this.handleKeyDown}></slot>`;
+    return this.variant === p.Multiple ? b`${e}<slot @slotchange=${this.handleSlotChange} @click=${this.handleClick} @keydown=${this.handleKeyDown} @mousedown=${this.handleMouseDown}></slot>` : b`${e}<slot @slotchange=${this.handleSlotChange} @click=${this.handleClick} @keydown=${this.handleKeyDown} @mousedown=${this.handleMouseDown}></slot>`;
   }
 };
-l.styles = [v, I];
+l.styles = [v, S];
 c([
-  A("slot:not([name])")
+  M("slot:not([name])")
 ], l.prototype, "defaultSlot", 2);
 c([
   u({ type: Boolean })