@orangelogic/design-system 3.11.0 → 3.13.0

package/library/chunks/{tree.BEFWro0D.js → tree.DKofDMGu.js}

@@ -1,8 +1,8 @@
 import { C as F, n as l } from "./lib-cortex-element.CVMmyPMC.js";
-import { c as O } from "./component.styles.CRO4Odto.js";
+import { c as O } from "./component.styles.CAS3c9pM.js";
 import { c as U } from "./custom-element.L4WJXn1j.js";
 import { L as N } from "./i18n.CNnI4-0K.js";
-import { c as X } from "./math.DuKzLacZ.js";
+import { c as j } from "./math.DuKzLacZ.js";
 import { w as b } from "./watch.DJF5K-8U.js";
 import { i as R, x as m, E } from "./lit-element.jLBm65_O.js";
 import { r as g } from "./state.CSDxrqLd.js";
@@ -10,17 +10,17 @@ import { e as f } from "./query.BBf1UFkC.js";
 import { s as L, a as D, b as $ } from "./event.BeKOsirN.js";
 import { e as C } from "./class-map.BiVq-cVR.js";
 import { o as _ } from "./if-defined.BRoBj_Rp.js";
-import { l as j } from "./live.DCegntDo.js";
+import { l as K } from "./live.DCegntDo.js";
 import { n as y } from "./when.Dr1es41R.js";
 import { g as z, s as G } from "./animation-registry.HmpwNuGH.js";
-import K from "../components/checkbox.js";
-import { C as V } from "./icon.CpHbi8tH.js";
-import W from "../components/line-clamp.js";
-import Y from "../components/spinner.js";
-import { i as J } from "./browser.BHOCIF_A.js";
-import { S as Q } from "./sortable.esm.oSzf6C5Q.js";
-import { v as ee } from "./v4.CKZ6klMF.js";
-function te(e, t, i) {
+import V from "../components/checkbox.js";
+import { C as W } from "./icon.BLXWp6CU.js";
+import Y from "../components/line-clamp.js";
+import J from "../components/spinner.js";
+import { i as Q } from "./browser.BHOCIF_A.js";
+import { S as ee } from "./sortable.esm.oSzf6C5Q.js";
+import { v as te } from "./v4.CKZ6klMF.js";
+function ie(e, t, i) {
   let a;
   return function(...r) {
     const n = this, d = function() {
@@ -29,8 +29,8 @@ function te(e, t, i) {
     a && clearTimeout(a), a = window.setTimeout(d, t);
   };
 }
-const ie = R`:host{--selected-color:var(--cx-color-primary-600);--selected-background-color:var(--cx-color-primary-50);--hover-background-color:var(--cx-menu-item-background-color-hover);--active-background-color:var(--cx-color-neutral-200);--item-padding:var(--cx-spacing-2x-small) var(--cx-spacing-x-small);outline:0;display:block}:host(:focus-visible) .tree-item{outline:var(--cx-focus-ring);outline-offset:calc(-1 * var(--cx-focus-ring-width))}[hidden]{display:none!important}slot:not([name])::slotted(cx-icon){margin-inline-end:var(--cx-spacing-x-small)}.tree-item{color:var(--cx-color-neutral-900);cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:stretch;display:flex;position:relative}.tree-item__checkbox{margin-inline-end:var(--cx-spacing-x-small)}.tree-item__expand-button,.tree-item__checkbox,.tree-item__label{font-family:var(--cx-font-sans);font-size:var(--cx-tree-item-font-size,var(--cx-font-size-small));font-weight:var(--cx-tree-item-font-weight,var(--cx-font-weight-medium));line-height:var(--cx-tree-item-line-height,var(--cx-line-height-large));letter-spacing:var(--cx-tree-item-letter-spacing,var(--cx-letter-spacing-normal))}.tree-item__checkbox::part(base){align-items:center;display:flex}.tree-item__checkbox::part(label){margin-inline-start:0}.tree-item__indentation{flex-shrink:0;width:1em;display:block}.tree-item__expand-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tree-item__expand-button{box-sizing:content-box;color:var(--cx-color-neutral-500);cursor:pointer;min-width:max(1em,1rem);min-height:max(1em,1rem);transition:var(--cx-transition-medium) rotate ease;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.tree-item--expanded .tree-item__expand-button{rotate:90deg}.tree-item--expanded.tree-item--rtl .tree-item__expand-button{rotate:-90deg}.tree-item--expanded slot[name=expand-icon],.tree-item:not(.tree-item--expanded) slot[name=collapse-icon]{display:none}:host(:not([aria-disabled=true])) .tree-item--selected .tree-item__item .tree-item__expand-icon-slot{color:var(--selected-color)}.tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot{visibility:hidden;opacity:0;pointer-events:none}.tree-item__expand-button--visible{cursor:pointer}.tree-item__item{border-radius:var(--cx-border-radius-large);padding:var(--item-padding,var(--cx-spacing-x-small) var(--cx-spacing-small));transition:var(--cx-transition-x-fast) background-color ease;align-items:center;display:flex}.tree-item__item:hover{background-color:var(--hover-background-color)}.tree-item__item:active{background-color:var(--active-background-color)}.tree-item--disabled .tree-item__item{opacity:.5;cursor:default;outline:none}:host(:not([aria-disabled=true])) .tree-item--selected .tree-item__item{background-color:var(--selected-background-color);color:var(--selected-color)}:host(:not([aria-disabled=true])) .tree-item__expand-button{color:var(--cx-color-neutral)}:host(:not([aria-disabled=true]):not([variant=text])) .tree-item--selected,:host(:not([aria-disabled=true]):not([variant=text])) .tree-item--selected .tree-item__expand-button,:host(:not([aria-disabled=true]):not([variant=text])) .tree-item--selected .tree-item__actions::slotted(cx-icon-button){color:var(--cx-color-neutral-0)}:host(:not([aria-disabled=true]):not([variant=text])) .tree-item--selected .tree-item__actions::slotted(cx-icon-button){--hover-background-color:var(--cx-color-neutral-0)}.tree-item__label{align-items:center;display:flex}.tree-item__actions{font-size:var(--cx-font-size-medium);align-items:center;width:fit-content;margin-inline-start:auto;display:flex}.tree-item__actions::slotted(*){visibility:hidden;opacity:0;transition:var(--cx-transition-x-fast) visibility, var(--cx-transition-x-fast) opacity ease}.tree-item__item:hover .tree-item__actions::slotted(*){visibility:visible;opacity:1}@supports not (overlay:auto){.tree-item__actions::slotted(cx-dropdown[open]){visibility:visible;opacity:1}}.tree-item__children{font-size:calc(1em + var(--indent-size,var(--cx-spacing-medium)));gap:var(--children-gap,0);flex-direction:column;display:flex}@media (forced-colors:active){:host(:not([aria-disabled=true])) .tree-item--selected .tree-item__item{outline:1px dashed selecteditem}}::slotted(cx-tree-item){--hover-background-color:inherit;--active-background-color:inherit;--selected-background-color:inherit;--selected-color:inherit}:host([variant=text]){--selected-background-color:transparent;--selected-color:inherit;--hover-background-color:transparent;--active-background-color:transparent;--hover-color:var(--cx-color-primary)}:host([variant=text]:not([aria-disabled=true])) .tree-item__item:hover{color:var(--hover-color)}:host([data-dragging]){position:relative}:host([data-dragging=inside]){background-color:var(--cx-color-primary-400)}:host([data-dragging=before]):before{content:"";border-top:var(--cx-spacing-2x-small) solid var(--cx-color-primary-400);width:100%;position:absolute;top:0;left:0}:host([data-dragging=after]):before{content:"";border-bottom:var(--cx-spacing-2x-small) solid var(--cx-color-primary-400);width:100%;position:absolute;bottom:0;left:0}`, I = "tree-sortable", w = 0.2, P = (e) => e == null;
-function ae() {
+const ae = R`:host{--selected-color:var(--cx-color-primary-600);--selected-background-color:var(--cx-color-primary-50);--hover-background-color:var(--cx-menu-item-background-color-hover);--active-background-color:var(--cx-color-neutral-200);--item-padding:var(--cx-spacing-2x-small) var(--cx-spacing-x-small);outline:0;display:block}:host(:focus-visible) .tree-item{outline:var(--cx-focus-ring);outline-offset:calc(-1 * var(--cx-focus-ring-width))}[hidden]{display:none!important}slot:not([name])::slotted(cx-icon){margin-inline-end:var(--cx-spacing-x-small)}.tree-item{color:var(--cx-color-neutral-900);cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:stretch;display:flex;position:relative}.tree-item__checkbox{margin-inline-end:var(--cx-spacing-x-small)}.tree-item__expand-button,.tree-item__checkbox,.tree-item__label{font-family:var(--cx-font-sans);font-size:var(--cx-tree-item-font-size,var(--cx-font-size-small));font-weight:var(--cx-tree-item-font-weight,var(--cx-font-weight-medium));line-height:var(--cx-tree-item-line-height,var(--cx-line-height-large));letter-spacing:var(--cx-tree-item-letter-spacing,var(--cx-letter-spacing-normal))}.tree-item__checkbox::part(base){align-items:center;display:flex}.tree-item__checkbox::part(label){margin-inline-start:0}.tree-item__indentation{flex-shrink:0;width:1em;display:block}.tree-item__expand-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tree-item__expand-button{box-sizing:content-box;color:var(--cx-color-neutral-500);cursor:pointer;min-width:max(1em,1rem);min-height:max(1em,1rem);transition:var(--cx-transition-medium) rotate ease;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.tree-item--expanded .tree-item__expand-button{rotate:90deg}.tree-item--expanded.tree-item--rtl .tree-item__expand-button{rotate:-90deg}.tree-item--expanded slot[name=expand-icon],.tree-item:not(.tree-item--expanded) slot[name=collapse-icon]{display:none}:host(:not([aria-disabled=true])) .tree-item--selected .tree-item__item .tree-item__expand-icon-slot{color:var(--selected-color)}.tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot{visibility:hidden;opacity:0;pointer-events:none}.tree-item__expand-button--visible{cursor:pointer}.tree-item__item{border-radius:var(--cx-border-radius-large);padding:var(--item-padding,var(--cx-spacing-x-small) var(--cx-spacing-small));transition:var(--cx-transition-x-fast) background-color ease;align-items:center;display:flex}.tree-item__item:hover{background-color:var(--hover-background-color)}.tree-item__item:active{background-color:var(--active-background-color)}.tree-item--disabled .tree-item__item{opacity:.5;cursor:default;outline:none}:host(:not([aria-disabled=true])) .tree-item--selected .tree-item__item{background-color:var(--selected-background-color);color:var(--selected-color)}:host(:not([aria-disabled=true])) .tree-item__expand-button{color:var(--cx-color-neutral)}:host(:not([aria-disabled=true]):not([variant=text])) .tree-item--selected,:host(:not([aria-disabled=true]):not([variant=text])) .tree-item--selected .tree-item__expand-button,:host(:not([aria-disabled=true]):not([variant=text])) .tree-item--selected .tree-item__actions::slotted(cx-icon-button){color:var(--cx-color-neutral-0)}:host(:not([aria-disabled=true]):not([variant=text])) .tree-item--selected .tree-item__actions::slotted(cx-icon-button){--hover-background-color:var(--cx-color-neutral-0)}.tree-item__label{align-items:center;display:flex}.tree-item__actions{font-size:var(--cx-font-size-medium);align-items:center;width:fit-content;margin-inline-start:auto;display:flex}.tree-item__actions::slotted(*){visibility:hidden;opacity:0;transition:var(--cx-transition-x-fast) visibility, var(--cx-transition-x-fast) opacity ease}.tree-item__item:hover .tree-item__actions::slotted(*){visibility:visible;opacity:1}@supports not (overlay:auto){.tree-item__actions::slotted(cx-dropdown[open]){visibility:visible;opacity:1}}.tree-item__children{font-size:calc(1em + var(--indent-size,var(--cx-spacing-medium)));gap:var(--children-gap,0);flex-direction:column;display:flex}@media (forced-colors:active){:host(:not([aria-disabled=true])) .tree-item--selected .tree-item__item{outline:1px dashed selecteditem}}::slotted(cx-tree-item){--hover-background-color:inherit;--active-background-color:inherit;--selected-background-color:inherit;--selected-color:inherit}:host([variant=text]){--selected-background-color:transparent;--selected-color:inherit;--hover-background-color:transparent;--active-background-color:transparent;--hover-color:var(--cx-color-primary)}:host([variant=text]:not([aria-disabled=true])) .tree-item__item:hover{color:var(--hover-color)}:host([data-dragging]){position:relative}:host([data-dragging=inside]){background-color:var(--cx-color-primary-400)}:host([data-dragging=before]):before{content:"";border-top:var(--cx-spacing-2x-small) solid var(--cx-color-primary-400);width:100%;position:absolute;top:0;left:0}:host([data-dragging=after]):before{content:"";border-bottom:var(--cx-spacing-2x-small) solid var(--cx-color-primary-400);width:100%;position:absolute;bottom:0;left:0}`, I = "tree-sortable", w = 0.2, P = (e) => e == null;
+function ne() {
   function e() {
   }
   let t = null;
@@ -54,7 +54,9 @@ function ae() {
       putSortable: x,
       target: p
     }) {
-      if (t = null, !i || !i.options[I] || !i.options.getDropZone || P(i.options.insertBeforeZonePercentage) || P(i.options.insertAfterZonePercentage) || !["CX-TREE-ITEM", "CX-TREE"].includes(p.tagName) || p.hasAttribute("no-drag")) {
+      t = null;
+      const q = !!d?.contains(p);
+      if (!i || !i.options[I] || !i.options.getDropZone || P(i.options.insertBeforeZonePercentage) || P(i.options.insertAfterZonePercentage) || !["CX-TREE-ITEM", "CX-TREE"].includes(p.tagName) || p.hasAttribute("no-drag") || q) {
         a();
         return;
       }
@@ -65,8 +67,8 @@ function ae() {
       }
       const B = A.getBoundingClientRect(), T = (u.clientY - B.top) / B.height, S = x || this.sortable;
       S.captureAnimationState(), S !== i && i.captureAnimationState();
-      const q = p.parentNode;
-      if (d && q)
+      const X = p.parentNode;
+      if (d && X)
         if (T < i.options.insertBeforeZonePercentage)
           t = {
             dragEl: d,
@@ -114,7 +116,7 @@ function ae() {
     pluginName: I
   });
 }
-class v extends Q {
+class v extends ee {
   constructor(t, i) {
     super(t, i);
   }
@@ -122,14 +124,14 @@ class v extends Q {
     return new v(t, i);
   }
 }
-v.mount(new ae());
+v.mount(new ne());
 const M = (e) => ({
   ...e,
   animation: 100,
   draggable: "cx-tree-item:not([no-drag])",
   emptyInsertThreshold: 0,
   fallbackOnBody: !0,
-  forceFallback: J(),
+  forceFallback: Q(),
   getDropZone: (t) => t?.shadowRoot?.querySelector(".tree-item__item"),
   insertAfterZonePercentage: 1 - w,
   insertBeforeZonePercentage: w,
@@ -143,10 +145,10 @@ const M = (e) => ({
   [I]: !0,
   swapThreshold: w
 });
-var ne = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, s = (e, t, i, a) => {
-  for (var r = a > 1 ? void 0 : a ? oe(t, i) : t, n = e.length - 1, d; n >= 0; n--)
+var oe = Object.defineProperty, re = Object.getOwnPropertyDescriptor, s = (e, t, i, a) => {
+  for (var r = a > 1 ? void 0 : a ? re(t, i) : t, n = e.length - 1, d; n >= 0; n--)
     (d = e[n]) && (r = (a ? d(t, i, r) : d(r)) || r);
-  return a && r && ne(t, i, r), r;
+  return a && r && oe(t, i, r), r;
 };
 let o = class extends F {
   constructor() {
@@ -327,7 +329,7 @@ let o = class extends F {
                 checked-icon:checkbox__checked-icon,
                 indeterminate-icon:checkbox__indeterminate-icon,
                 label:checkbox__label
-              " class="tree-item__checkbox" ?disabled=${this.disabled} ?checked=${j(this.selected)} ?indeterminate=${this.indeterminate} tabindex="-1"></cx-checkbox>`
+              " class="tree-item__checkbox" ?disabled=${this.disabled} ?checked=${K(this.selected)} ?indeterminate=${this.indeterminate} tabindex="-1"></cx-checkbox>`
     )}
 
         ${y(
@@ -341,12 +343,12 @@ let o = class extends F {
     )}</div><div class="tree-item__children" part="children" role="group"><slot name="children" @slotchange=${this.handleChildrenSlotChange}></slot></div>`);
   }
 };
-o.styles = [O, ie];
+o.styles = [O, ae];
 o.dependencies = {
-  "cx-checkbox": K,
-  "cx-icon": V,
-  "cx-line-clamp": W,
-  "cx-spinner": Y
+  "cx-checkbox": V,
+  "cx-icon": W,
+  "cx-line-clamp": Y,
+  "cx-spinner": J
 };
 s([
   f("slot:not([name])")
@@ -494,11 +496,11 @@ G("tree-item.collapse", {
   ],
   options: { duration: 200, easing: "cubic-bezier(0.4, 0.0, 0.2, 1)" }
 });
-const re = R`:host{--indent-guide-color:var(--cx-color-neutral-200);--indent-guide-offset:0;--indent-guide-style:solid;--indent-guide-width:0;--indent-size:var(--cx-spacing-large);font-size:0;display:block}:host::part(children){gap:var(--children-gap,0);flex-direction:column;display:flex}:host([dragging]) ::slotted(cx-tree-item){--hover-background-color:transparent!important;--active-background-color:transparent!important;--selected-background-color:transparent!important}`;
-var se = Object.defineProperty, le = Object.getOwnPropertyDescriptor, h = (e, t, i, a) => {
-  for (var r = a > 1 ? void 0 : a ? le(t, i) : t, n = e.length - 1, d; n >= 0; n--)
+const se = R`:host{--indent-guide-color:var(--cx-color-neutral-200);--indent-guide-offset:0;--indent-guide-style:solid;--indent-guide-width:0;--indent-size:var(--cx-spacing-large);font-size:0;display:block}:host::part(children){gap:var(--children-gap,0);flex-direction:column;display:flex}:host([dragging]) ::slotted(cx-tree-item){--hover-background-color:transparent!important;--active-background-color:transparent!important;--selected-background-color:transparent!important}`;
+var le = Object.defineProperty, de = Object.getOwnPropertyDescriptor, h = (e, t, i, a) => {
+  for (var r = a > 1 ? void 0 : a ? de(t, i) : t, n = e.length - 1, d; n >= 0; n--)
     (d = e[n]) && (r = (a ? d(t, i, r) : d(r)) || r);
-  return a && r && se(t, i, r), r;
+  return a && r && le(t, i, r), r;
 };
 function H(e) {
   const t = e.getChildrenItems({ includeDisabled: !1 });
@@ -533,7 +535,7 @@ let c = class extends F {
   }
   runConnectedCallback() {
     if (this.addEventListener("focusin", this.handleFocusIn), this.addEventListener("focusout", this.handleFocusOut), this.addEventListener("mousedown", this.handleHostMouseDown), this.addEventListener("cx-lazy-change", this.handleSlotChange), this.mutationObserver = new MutationObserver(this.handleTreeChanged), this.mutationObserver.observe(this, { childList: !0, subtree: !0 }), this.autoExpandToSelected) {
-      const e = te(() => {
+      const e = ie(() => {
         customElements.whenDefined("cx-tree-item").then(() => {
           this.selectedItems.forEach((t) => {
             this.expandToItem(t);
@@ -647,7 +649,7 @@ let c = class extends F {
     if (t.length > 0) {
       e.preventDefault();
       const r = t.findIndex((x) => x.matches(":focus")), n = t[r], d = (x) => {
-        const p = t[X(x, 0, t.length - 1)];
+        const p = t[j(x, 0, t.length - 1)];
         this.focusItem(p);
       }, u = (x) => {
         n.expanded = x;
@@ -725,7 +727,7 @@ let c = class extends F {
   }
   getSortableGroup() {
     if (!this.disabledSortableGroup)
-      return this.sortableGroup || (this.sortableGroup = ee()), this.sortableGroup;
+      return this.sortableGroup || (this.sortableGroup = te()), this.sortableGroup;
   }
   handleSortableStart() {
     this.setAttribute("dragging", "");
@@ -789,7 +791,7 @@ let c = class extends F {
     return m`<div part="base" class="tree" @click=${this.handleClick} @keydown=${this.handleKeyDown} @mousedown=${this.handleMouseDown}><slot part="children" @slotchange=${this.handleSlotChange}></slot><span hidden aria-hidden="true"><slot name="expand-icon"></slot></span><span hidden aria-hidden="true"><slot name="collapse-icon"></slot></span></div>`;
   }
 };
-c.styles = [O, re];
+c.styles = [O, se];
 h([
   f("slot:not([name])")
 ], c.prototype, "defaultSlot", 2);
@@ -859,6 +861,6 @@ export {
   c as a,
   Z as b,
   H as c,
-  te as d,
+  ie as d,
   k as s
 };