@orangelogic/design-system 2.163.0 → 2.164.0

package/library/chunks/{folder-select.Dh4SX0eU.js → folder-select.Dw1ZKZAq.js}

@@ -3,16 +3,16 @@ import { C as fe } from "./input.DOorVTYZ.js";
 import te from "../components/line-clamp.js";
 import me from "../components/select.js";
 import ye from "../components/tag.js";
-import { C as v, a as xe } from "./tree.Dvnw_4vz.js";
+import { C as S, a as ge } from "./tree.vn5sHbdt.js";
 import { n as s, C as B } from "./lib-cortex-element.CVMmyPMC.js";
-import { h as L, F as ge, A as be } from "./endpoints.CwgTrs4A.js";
-import { M as P } from "./asset-link-format.QzzboHHE.js";
+import { h as M, F as xe, A as be } from "./endpoints.CwgTrs4A.js";
+import { M as U } from "./asset-link-format.ClaYu_v8.js";
 import { c as re } from "./component.styles.CRO4Odto.js";
 import { c as N } from "./custom-element.L4WJXn1j.js";
 import { L as W } from "./i18n.Bchq8v1d.js";
 import { w as m } from "./watch.DJF5K-8U.js";
 import { x as y, i as $e } from "./lit-element.jLBm65_O.js";
-import { r as x } from "./state.CSDxrqLd.js";
+import { r as g } from "./state.CSDxrqLd.js";
 import { e as se } from "./query.BBf1UFkC.js";
 import { r as ve } from "./choose.BTbF6BAn.js";
 import { C as ie } from "./button.DGyqdBou.js";
@@ -36,14 +36,14 @@ async function q({
   includeDirectChild: u,
   limit: f = De,
   searchTerm: $,
-  self: T,
+  self: C,
   start: H = 0,
   token: de
 }) {
-  let U = [], Q = u ?? !0;
-  e && e.length > 0 && !i ? (U = e, T = !0, Q = !1) : i && (U = [i]);
+  let P = [], Q = u ?? !0;
+  e && e.length > 0 && !i ? (P = e, C = !0, Q = !1) : i && (P = [i]);
   try {
-    return (await L.request({
+    return (await M.request({
       baseURL: t,
       headers: {
         Authorization: `Bearer ${r}`
@@ -53,9 +53,9 @@ async function q({
         IncludeDirectChild: Q,
         IncludeVirtualFolders: !l,
         Limit: f,
-        ObjectRecordIDs: U,
+        ObjectRecordIDs: P,
         SeeThru: !!$,
-        Self: T,
+        Self: C,
         Start: H,
         Text: $ || void 0,
         Token: de || void 0
@@ -65,42 +65,42 @@ async function q({
       },
       responseType: "json",
       transformResponse: [
-        ...Array.isArray(L.defaults.transformResponse) ? L.defaults.transformResponse : [],
-        (S, Re, E) => {
+        ...Array.isArray(M.defaults.transformResponse) ? M.defaults.transformResponse : [],
+        (F, Re, E) => {
           if (E !== void 0 && (E < 200 || E >= 300))
             return {
               data: [],
               hasMore: !1,
               totalCount: 0
             };
-          if (!S || typeof S != "object")
+          if (!F || typeof F != "object")
             throw new Error("Invalid response format");
-          const ue = S.contentItems?.length ?? 0;
+          const ue = F.contentItems?.length ?? 0;
           return {
-            data: S.contentItems?.map((g) => {
-              const O = g.fields[b.DocType] ?? "", R = g.fields[b.TitleWithFallback] ?? "", w = g.fields[b.CortexPath] ?? "", M = w.endsWith("/") && w.length > 1 ? w.slice(0, -1) : w;
-              let j = M;
-              (O === P.Album || O === P.ProjectDocument) && (j = M ? `${M}/${R}` : R);
-              const Z = g.fields[b.DocSubTypeIsFontIcon];
+            data: F.contentItems?.map((x) => {
+              const O = x.fields[b.DocType] ?? "", R = x.fields[b.TitleWithFallback] ?? "", w = x.fields[b.CortexPath] ?? "", L = w.endsWith("/") && w.length > 1 ? w.slice(0, -1) : w;
+              let j = L;
+              (O === U.Album || O === U.ProjectDocument) && (j = L ? `${L}/${R}` : R);
+              const Z = x.fields[b.DocSubTypeIsFontIcon];
               return {
                 docType: O,
                 fullPath: j,
-                hasChildren: g.fields[b.HasBrowserChildren] === "1",
-                iconColor: g.fields[b.DocSubTypeIconColor],
-                iconImageUrl: g.fields[b.DocSubTypeIconImageUrl],
-                iconName: g.fields[b.DocSubTypeIconName],
-                id: g.recordID,
+                hasChildren: x.fields[b.HasBrowserChildren] === "1",
+                iconColor: x.fields[b.DocSubTypeIconColor],
+                iconImageUrl: x.fields[b.DocSubTypeIconImageUrl],
+                iconName: x.fields[b.DocSubTypeIconName],
+                id: x.recordID,
                 isFontIcon: Z === void 0 ? void 0 : Z === "1",
-                representativeAssetId: g.fields[b.RepresentativeAssetId] ?? "",
+                representativeAssetId: x.fields[b.RepresentativeAssetId] ?? "",
                 title: R
               };
             }) ?? [],
-            hasMore: H + ue < S.totalCount,
-            totalCount: S.totalCount
+            hasMore: H + ue < F.totalCount,
+            totalCount: F.totalCount
           };
         }
       ],
-      url: ge
+      url: xe
     })).data;
   } catch {
     return {
@@ -114,14 +114,14 @@ const ae = {
   fromAttribute: (e) => (e ?? "").split(" ").filter((t) => t !== ""),
   toAttribute: (e) => e.join(" ")
 };
-var C = /* @__PURE__ */ ((e) => (e.Input = "input", e.Select = "select", e))(C || {}), _e = Object.defineProperty, we = Object.getOwnPropertyDescriptor, c = (e, t, r, l) => {
+var D = /* @__PURE__ */ ((e) => (e.Input = "input", e.Select = "select", e))(D || {}), _e = Object.defineProperty, we = Object.getOwnPropertyDescriptor, h = (e, t, r, l) => {
   for (var i = l > 1 ? void 0 : l ? we(t, r) : t, u = e.length - 1, f; u >= 0; u--)
     (f = e[u]) && (i = (l ? f(t, r, i) : f(i)) || i);
   return l && i && _e(t, r, i), i;
 };
 let a = class extends B {
   constructor() {
-    super(...arguments), this.localize = new W(this), this.role = "treeitem", this.disabledSyncCheckboxes = !0, this.folderId = "", this.hasChildren = !1, this.selectable = !1, this.fullPath = "", this.docType = P.Story, this.name = "", this.representativeAssetId = "", this.selectedValue = "", this.selection = "single", this.currentRootIDsSet = /* @__PURE__ */ new Set(), this.removedIDs = [], this.token = "", this.bearerToken = "", this.baseUrl = "", this.searchTerm = "", this.api = q, this.excludeVirtualFolders = !1, this.url = "", this.icon = "", this.iconName = "", this.iconImageUrl = "", this.iconColor = "", this.isFontIcon = !1, this.data = null, this.hasMore = !1, this.loading = !1;
+    super(...arguments), this.localize = new W(this), this.role = "treeitem", this.disabledSyncCheckboxes = !0, this.folderId = "", this.hasChildren = !1, this.selectable = !1, this.fullPath = "", this.docType = U.Story, this.name = "", this.representativeAssetId = "", this.selectedValue = "", this.selection = "single", this.currentRootIDsSet = /* @__PURE__ */ new Set(), this.removedIDs = [], this.token = "", this.bearerToken = "", this.baseUrl = "", this.searchTerm = "", this.api = q, this.excludeVirtualFolders = !1, this.url = "", this.icon = "", this.iconName = "", this.iconImageUrl = "", this.iconColor = "", this.isFontIcon = !1, this.data = null, this.hasMore = !1, this.loading = !1;
   }
   /**
    * This is used to render the cx-tree-item inside the cx-folder-item without the shadow root so that the cx-tree can query select the cx-tree-item inside
@@ -199,8 +199,8 @@ let a = class extends B {
         const $ = Fe(f);
         if (!$.path.trim() || !$.id.trim())
           continue;
-        const T = J($.path);
-        if (T.startsWith(r) && T !== r) {
+        const C = J($.path);
+        if (C.startsWith(r) && C !== r) {
           i = !0;
           break;
         }
@@ -226,7 +226,7 @@ let a = class extends B {
       return y`<cx-icon class="folder-select-tree__item__icon" src=${this.iconImageUrl} style=${e}></cx-icon>`;
     if (!this.icon && this.isFontIcon !== !1 && this.iconName)
       return y`<cx-icon class="folder-select-tree__item__icon" name=${this.iconName} variant="fa" style=${e}></cx-icon>`;
-    const t = this.docType === P.Album ? "outlined" : "filled";
+    const t = this.docType === U.Album ? "outlined" : "filled";
     return y`<cx-icon class="folder-select-tree__item__icon" name=${this.icon || "folder"} variant=${t}></cx-icon>`;
   }
   render() {
@@ -251,104 +251,104 @@ a.dependencies = {
   "cx-icon": ee,
   "cx-line-clamp": te,
   "cx-space": Ie,
-  "cx-tree-item": v
+  "cx-tree-item": S
 };
-c([
+h([
   se("cx-tree-item")
 ], a.prototype, "treeItem", 2);
-c([
+h([
   s({ attribute: "folder-id", reflect: !0, type: String })
 ], a.prototype, "folderId", 2);
-c([
+h([
   s({ attribute: "has-children", reflect: !0, type: Boolean })
 ], a.prototype, "hasChildren", 2);
-c([
+h([
   s({ reflect: !0, type: Boolean })
 ], a.prototype, "selectable", 2);
-c([
+h([
   s({ attribute: "full-path", reflect: !0, type: String })
 ], a.prototype, "fullPath", 2);
-c([
+h([
   s({ attribute: "doc-type", reflect: !0, type: String })
 ], a.prototype, "docType", 2);
-c([
+h([
   s({ reflect: !0, type: String })
 ], a.prototype, "name", 2);
-c([
+h([
   s({
     attribute: "representative-asset-id",
     reflect: !0,
     type: String
   })
 ], a.prototype, "representativeAssetId", 2);
-c([
+h([
   s({ attribute: "selected-value", reflect: !0, type: String })
 ], a.prototype, "selectedValue", 2);
-c([
+h([
   s({ attribute: "selection", reflect: !0, type: String })
 ], a.prototype, "selection", 2);
-c([
+h([
   s({ attribute: !1, type: Object })
 ], a.prototype, "currentRootIDsSet", 2);
-c([
+h([
   s({ attribute: !1, type: Array })
 ], a.prototype, "removedIDs", 2);
-c([
+h([
   s({ reflect: !0, type: String })
 ], a.prototype, "token", 2);
-c([
+h([
   s({ attribute: "bearer-token", reflect: !0, type: String })
 ], a.prototype, "bearerToken", 2);
-c([
+h([
   s({ attribute: "base-url", reflect: !0, type: String })
 ], a.prototype, "baseUrl", 2);
-c([
+h([
   s({ attribute: "search-term", reflect: !0, type: String })
 ], a.prototype, "searchTerm", 2);
-c([
+h([
   s({ type: Function })
 ], a.prototype, "api", 2);
-c([
+h([
   s({
     attribute: "exclude-virtual-folders",
     reflect: !0,
     type: Boolean
   })
 ], a.prototype, "excludeVirtualFolders", 2);
-c([
+h([
   s({ reflect: !0, type: String })
 ], a.prototype, "url", 2);
-c([
+h([
   s({ reflect: !0, type: String })
 ], a.prototype, "icon", 2);
-c([
+h([
   s({ attribute: "icon-name", reflect: !0, type: String })
 ], a.prototype, "iconName", 2);
-c([
+h([
   s({ attribute: "icon-image-url", reflect: !0, type: String })
 ], a.prototype, "iconImageUrl", 2);
-c([
+h([
   s({ attribute: "icon-color", reflect: !0, type: String })
 ], a.prototype, "iconColor", 2);
-c([
+h([
   s({ attribute: "is-font-icon", reflect: !0, type: Boolean })
 ], a.prototype, "isFontIcon", 2);
-c([
-  x()
+h([
+  g()
 ], a.prototype, "data", 2);
-c([
-  x()
+h([
+  g()
 ], a.prototype, "hasMore", 2);
-c([
-  x()
+h([
+  g()
 ], a.prototype, "loading", 2);
-c([
+h([
   m("currentRootIDsSet"),
   m("removedIDs"),
   m("fullPath"),
   m("folderId")
 ], a.prototype, "syncBoxes", 1);
-a = c([
+a = h([
   N("cx-folder-select-tree-item")
 ], a);
 var ke = Object.defineProperty, Ve = Object.getOwnPropertyDescriptor, oe = (e) => {
@@ -357,10 +357,10 @@ var ke = Object.defineProperty, Ve = Object.getOwnPropertyDescriptor, oe = (e) =
   for (var i = l > 1 ? void 0 : l ? Ve(t, r) : t, u = e.length - 1, f; u >= 0; u--)
     (f = e[u]) && (i = (l ? f(t, r, i) : f(i)) || i);
   return l && i && ke(t, r, i), i;
-}, ne = (e, t, r) => t.has(e) || oe("Cannot " + r), F = (e, t, r) => (ne(e, t, "read from private field"), t.get(e)), z = (e, t, r) => t.has(e) ? oe("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), K = (e, t, r, l) => (ne(e, t, "write to private field"), t.set(e, r), r), D, V, _;
+}, ne = (e, t, r) => t.has(e) || oe("Cannot " + r), v = (e, t, r) => (ne(e, t, "read from private field"), t.get(e)), z = (e, t, r) => t.has(e) ? oe("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), K = (e, t, r, l) => (ne(e, t, "write to private field"), t.set(e, r), r), _, V, I;
 let n = class extends B {
   constructor() {
-    super(...arguments), this.localize = new W(this), this.minQueryLength = 1, this.selection = "single", this.searchTerm = "", this.selectedValue = "", this.token = "", this.bearerToken = "", this.baseUrl = "", this.allowedFolders = [], this.extraFolderId = "", this.extraFolderTitle = "", this.extraFolderIcon = "", this.seeThru = !1, this.extraFolderData = null, this.api = q, this.excludeVirtualFolders = !1, this.firstFetchCallback = null, this.autoPageSize = !1, this.data = [], this.hasMore = !1, this.loading = !1, this.preloadedFolders = [], this.currentRootIDsSet = /* @__PURE__ */ new Set(), this.removedIDs = [], z(this, D, !1), z(this, V, 10), z(this, _, /* @__PURE__ */ new Set());
+    super(...arguments), this.localize = new W(this), this.minQueryLength = 1, this.selection = "single", this.searchTerm = "", this.selectedValue = "", this.token = "", this.bearerToken = "", this.baseUrl = "", this.allowedFolders = [], this.extraFolderId = "", this.extraFolderTitle = "", this.extraFolderIcon = "", this.seeThru = !1, this.extraFolderData = null, this.api = q, this.excludeVirtualFolders = !1, this.firstFetchCallback = null, this.autoPageSize = !1, this.data = [], this.hasMore = !1, this.loading = !1, this.preloading = !1, this.preloadedFolders = [], this.currentRootIDsSet = /* @__PURE__ */ new Set(), this.removedIDs = [], z(this, _, !1), z(this, V, 10), z(this, I, /* @__PURE__ */ new Set());
   }
   get empty() {
     return !this.loading && this.data.length === 0;
@@ -385,6 +385,13 @@ let n = class extends B {
   runFirstUpdated() {
     this.searchTerm = "", this.autoPageSize && K(this, V, this.computeInitialLimit()), this.handleFetchFolders();
   }
+  handleLoadingStateChange() {
+    this.emit("cx-folder-select-loading-change", {
+      detail: {
+        loading: this.loading || this.preloading
+      }
+    });
+  }
   async handleExtraFolderIdChange() {
     if (!this.extraFolderId || !this.api) {
       this.extraFolderData = null;
@@ -448,10 +455,10 @@ let n = class extends B {
   }
   async handleFetchFolders() {
     const { data: e, hasMore: t } = await this.fetchFolders();
-    F(this, D) || (e.length > 0 && this.firstFetchCallback?.(e), K(this, D, !0)), this.data = e, this.hasMore = t, this.loading = !1, this.seedSelectionFromValue(e), this.removePreloadedFolders(e), await this.preloadSelectedFolders();
+    v(this, _) || (e.length > 0 && this.firstFetchCallback?.(e), K(this, _, !0)), this.data = e, this.hasMore = t, this.loading = !1, this.seedSelectionFromValue(e), this.removePreloadedFolders(e), await this.preloadSelectedFolders();
   }
   async handleSelectedValueChange() {
-    if (!F(this, D))
+    if (!v(this, _))
       return;
     const e = new Set(
       this.selectedValue.split(/[\s,]+/).filter(Boolean)
@@ -476,7 +483,7 @@ let n = class extends B {
       bearerToken: this.bearerToken,
       excludeVirtualFolders: this.excludeVirtualFolders,
       folderId: "",
-      limit: F(this, V),
+      limit: v(this, V),
       searchTerm: this.searchTerm,
       seeThru: this.seeThru,
       start: 0,
@@ -505,7 +512,7 @@ let n = class extends B {
       ...this.data.map((i) => i.id),
       ...this.extraFolderData ? [this.extraFolderData.id] : [],
       ...this.preloadedFolders.map((i) => i.id),
-      ...F(this, _),
+      ...v(this, I),
       ...[
         ...this.querySelectorAll(
           "cx-folder-select-tree-item"
@@ -516,7 +523,7 @@ let n = class extends B {
     );
     if (r.length === 0)
       return;
-    r.forEach((i) => F(this, _).add(i));
+    r.forEach((i) => v(this, I).add(i)), this.preloading = !0;
     const l = [];
     if (await Promise.all(
       r.map(async (i) => {
@@ -538,7 +545,7 @@ let n = class extends B {
         } catch {
         }
       })
-    ), r.forEach((i) => F(this, _).delete(i)), l.length > 0) {
+    ), r.forEach((i) => v(this, I).delete(i)), this.preloading = v(this, I).size > 0, l.length > 0) {
       const i = new Set(this.preloadedFolders.map((f) => f.id)), u = l.filter((f) => !i.has(f.id));
       u.length > 0 && (this.preloadedFolders = [...this.preloadedFolders, ...u].sort(
         (f, $) => f.title.localeCompare($.title)
@@ -588,13 +595,13 @@ let n = class extends B {
     )}`;
   }
 };
-D = /* @__PURE__ */ new WeakMap();
-V = /* @__PURE__ */ new WeakMap();
 _ = /* @__PURE__ */ new WeakMap();
+V = /* @__PURE__ */ new WeakMap();
+I = /* @__PURE__ */ new WeakMap();
 n.dependencies = {
   "cx-button": ie,
   "cx-folder-select-tree-item": a,
-  "cx-tree": xe
+  "cx-tree": ge
 };
 d([
   s({ attribute: "min-query-length", reflect: !0, type: Number })
@@ -633,7 +640,7 @@ d([
   s({ attribute: "see-thru", reflect: !0, type: Boolean })
 ], n.prototype, "seeThru", 2);
 d([
-  x()
+  g()
 ], n.prototype, "extraFolderData", 2);
 d([
   s({ type: Function })
@@ -652,23 +659,30 @@ d([
   s({ attribute: "auto-page-size", reflect: !0, type: Boolean })
 ], n.prototype, "autoPageSize", 2);
 d([
-  x()
+  g()
 ], n.prototype, "data", 2);
 d([
-  x()
+  g()
 ], n.prototype, "hasMore", 2);
 d([
-  x()
+  g()
 ], n.prototype, "loading", 2);
 d([
-  x()
+  g()
+], n.prototype, "preloading", 2);
+d([
+  g()
 ], n.prototype, "preloadedFolders", 2);
 d([
-  x()
+  g()
 ], n.prototype, "currentRootIDsSet", 2);
 d([
-  x()
+  g()
 ], n.prototype, "removedIDs", 2);
+d([
+  m("loading", { waitUntilFirstUpdate: !0 }),
+  m("preloading")
+], n.prototype, "handleLoadingStateChange", 1);
 d([
   m("extraFolderId")
 ], n.prototype, "handleExtraFolderIdChange", 1);
@@ -686,24 +700,24 @@ d([
 n = d([
   N("cx-folder-select-tree")
 ], n);
-const Pe = $e`:host{flex-direction:column;width:100%;height:100%;min-height:0;max-height:100%;display:flex}.folder-select{gap:var(--cx-spacing-x-small);flex-direction:column;flex:1;width:100%;min-height:0;display:flex}.folder-select__search{flex-shrink:0}.folder-select__tree{flex-direction:column;flex:1;min-height:0;display:flex}.folder-select-tree{flex:1;min-height:0;overflow:auto}.folder-select-tree__item__icon{color:var(--cx-color-primary)}.folder-select-tree__empty-message{font-size:var(--cx-font-size-small);color:var(--cx-color-neutral-500);padding-block:var(--cx-spacing-2x-small);padding-inline:var(--cx-spacing-small);text-align:center;cursor:default;user-select:none}.folder-select-tree__load-more{margin-inline:var(--cx-spacing-small)}.folder-select-tree-item::part(label),.folder-select-tree-item__label,.folder-select-tree-item__title{overflow:hidden}`;
-var Ue = Object.defineProperty, Ee = Object.getOwnPropertyDescriptor, ce = (e) => {
+const Ue = $e`:host{flex-direction:column;width:100%;height:100%;min-height:0;max-height:100%;display:flex}.folder-select{gap:var(--cx-spacing-x-small);flex-direction:column;flex:1;width:100%;min-height:0;display:flex}.folder-select__search{flex-shrink:0}.folder-select__tree{flex-direction:column;flex:1;min-height:0;display:flex}.folder-select-tree{flex:1;min-height:0;overflow:auto}.folder-select-tree__item__icon{color:var(--cx-color-primary)}.folder-select-tree__empty-message{font-size:var(--cx-font-size-small);color:var(--cx-color-neutral-500);padding-block:var(--cx-spacing-2x-small);padding-inline:var(--cx-spacing-small);text-align:center;cursor:default;user-select:none}.folder-select-tree__load-more{margin-inline:var(--cx-spacing-small)}.folder-select-tree-item::part(label),.folder-select-tree-item__label,.folder-select-tree-item__title{overflow:hidden}`;
+var Pe = Object.defineProperty, Ee = Object.getOwnPropertyDescriptor, ce = (e) => {
   throw TypeError(e);
-}, h = (e, t, r, l) => {
+}, c = (e, t, r, l) => {
   for (var i = l > 1 ? void 0 : l ? Ee(t, r) : t, u = e.length - 1, f; u >= 0; u--)
     (f = e[u]) && (i = (l ? f(t, r, i) : f(i)) || i);
-  return l && i && Ue(t, r, i), i;
-}, he = (e, t, r) => t.has(e) || ce("Cannot " + r), X = (e, t, r) => (he(e, t, "read from private field"), r ? r.call(e) : t.get(e)), Oe = (e, t, r) => t.has(e) ? ce("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), Y = (e, t, r, l) => (he(e, t, "write to private field"), t.set(e, r), r), I;
+  return l && i && Pe(t, r, i), i;
+}, he = (e, t, r) => t.has(e) || ce("Cannot " + r), X = (e, t, r) => (he(e, t, "read from private field"), r ? r.call(e) : t.get(e)), Oe = (e, t, r) => t.has(e) ? ce("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), Y = (e, t, r, l) => (he(e, t, "write to private field"), t.set(e, r), r), T;
 let o = class extends B {
   constructor() {
-    super(), this.localize = new W(this), this.minQueryLength = 1, this.selection = "single", this.variant = C.Input, this.value = "", this.name = "", this.selectedLabel = "", this.baseUrl = "", this.allowedFolders = [], this.open = !1, this.token = "", this.bearerToken = "", this.seeThru = !1, this.api = q, this.required = !1, this.form = void 0, this.excludeVirtualFolders = !1, this.extraFolderId = "", this.extraFolderTitle = "", this.extraFolderIcon = "", this.autoPageSize = !1, this.firstFetchCallback = null, this.searchTerm = "", Oe(this, I), this.selectGetOptionValue = this.selectGetOptionValue.bind(this), this.selectGetOptionLabel = this.selectGetOptionLabel.bind(this), this.selectGetOptionSelected = this.selectGetOptionSelected.bind(this), this.selectFilterCallback = this.selectFilterCallback.bind(this), this.selectSetOptionSelected = this.selectSetOptionSelected.bind(this), this.selectGetTag = this.selectGetTag.bind(this), this.updateWrappedApi();
+    super(), this.localize = new W(this), this.minQueryLength = 1, this.selection = "single", this.variant = D.Input, this.value = "", this.name = "", this.selectedLabel = "", this.baseUrl = "", this.allowedFolders = [], this.open = !1, this.token = "", this.bearerToken = "", this.seeThru = !1, this.api = q, this.required = !1, this.form = void 0, this.excludeVirtualFolders = !1, this.extraFolderId = "", this.extraFolderTitle = "", this.extraFolderIcon = "", this.autoPageSize = !1, this.firstFetchCallback = null, this.searchTerm = "", this.treeLoading = !1, Oe(this, T), this.selectGetOptionValue = this.selectGetOptionValue.bind(this), this.selectGetOptionLabel = this.selectGetOptionLabel.bind(this), this.selectGetOptionSelected = this.selectGetOptionSelected.bind(this), this.selectFilterCallback = this.selectFilterCallback.bind(this), this.selectSetOptionSelected = this.selectSetOptionSelected.bind(this), this.selectGetTag = this.selectGetTag.bind(this), this.updateWrappedApi();
   }
   updateWrappedApi() {
     if (!this.api) {
-      Y(this, I, void 0);
+      Y(this, T, void 0);
       return;
     }
-    Y(this, I, async (e) => {
+    Y(this, T, async (e) => {
       try {
         return await this.api(e);
       } catch (t) {
@@ -724,6 +738,9 @@ let o = class extends B {
   handleSearchTermSelectChange(e) {
     e.target === e.currentTarget && (this.searchTerm = e.currentTarget.displayInput.value);
   }
+  handleTreeLoadingChange(e) {
+    this.treeLoading = e.detail.loading;
+  }
   handleSelectClear() {
     if (this.searchTerm = "", this.selection !== "multiple")
       return;
@@ -764,17 +781,17 @@ let o = class extends B {
     ), this.syncSelectValue(), this.selectEl.handleDefaultSlotChange(), await this.selectEl.updateComplete, this.selectEl.displayLabel = this.searchTerm);
   }
   selectGetOptionValue(e) {
-    return !e || !(e instanceof v) ? this.value : e.dataset.id || this.value;
+    return !e || !(e instanceof S) ? this.value : e.dataset.id || this.value;
   }
   selectGetOptionLabel(e) {
-    return !e || !(e instanceof v) ? this.selectedLabel : e.dataset.name || this.selectedLabel;
+    return !e || !(e instanceof S) ? this.selectedLabel : e.dataset.name || this.selectedLabel;
   }
   selectGetOptionSelected(e) {
-    if (!(!e || !(e instanceof v)))
+    if (!(!e || !(e instanceof S)))
       return e.selected;
   }
   selectFilterCallback(e) {
-    return !(!e || !(e instanceof v));
+    return !(!e || !(e instanceof S));
   }
   /**
    * Custom tag renderer for cx-select multi mode. Identical visuals to the
@@ -791,11 +808,11 @@ let o = class extends B {
           remove-button:tag__remove-button,
           remove-button__base:tag__remove-button__base
         " removable @cx-remove=${(r) => {
-      r.stopPropagation(), e instanceof v && (e.selected = !1);
+      r.stopPropagation(), e instanceof S && (e.selected = !1);
     }}><cx-line-clamp lines="1">${this.selectGetOptionLabel(e)}</cx-line-clamp></cx-tag>`;
   }
   selectSetOptionSelected(e, t) {
-    if (!(!e || !(e instanceof v)) && this.selection !== "multiple") {
+    if (!(!e || !(e instanceof S)) && this.selection !== "multiple") {
       if (t === void 0) {
         e.selected = !e.selected;
         return;
@@ -816,7 +833,7 @@ let o = class extends B {
     }
   }
   async handleVariantChange() {
-    this.variant === C.Select && (await this.updateComplete, this.updateFunctionProps());
+    this.variant === D.Select && (await this.updateComplete, this.updateFunctionProps());
   }
   handleValueChange() {
     this.selectEl && (this.searchTerm = "", this.selectEl.getOptionValue = this.selectGetOptionValue, this.selectEl.getOptionLabel = this.selectGetOptionLabel, this.selectEl.getOptionSelected = this.selectGetOptionSelected, this.selectEl.filterCallback = this.selectFilterCallback, this.selectEl.setOptionSelected = this.selectSetOptionSelected, this.selectEl.getTag = this.selectGetTag, this.syncSelectValue(), this.selectEl.handleDefaultSlotChange());
@@ -824,18 +841,18 @@ let o = class extends B {
   render() {
     return y`<div class="folder-select">${ve(this.variant, [
       [
-        C.Input,
-        () => y`<cx-input class="folder-select__search" aria-label=${this.localize.term("searchFolders")} placeholder=${`${this.localize.term("searchFolders")}...`} value=${this.searchTerm} clearable @cx-input=${this.handleSearchTermInputChange}><cx-icon name="search" slot="prefix"></cx-icon></cx-input><cx-folder-select-tree class="folder-select__tree" base-url=${this.baseUrl} extra-folder-id=${this.extraFolderId} extra-folder-title=${this.extraFolderTitle} extra-folder-icon=${this.extraFolderIcon} min-query-length=${this.minQueryLength} search-term=${this.searchTerm} selected-value=${this.value} selection=${this.selection} token=${this.token} bearer-token=${this.bearerToken} ?exclude-virtual-folders=${this.excludeVirtualFolders} ?see-thru=${this.seeThru} ?auto-page-size=${this.autoPageSize} .allowedFolders=${this.allowedFolders} .api=${X(this, I)} .firstFetchCallback=${this.firstFetchCallback}></cx-folder-select-tree>`
+        D.Input,
+        () => y`<cx-input class="folder-select__search" aria-label=${this.localize.term("searchFolders")} placeholder=${`${this.localize.term("searchFolders")}...`} value=${this.searchTerm} clearable @cx-input=${this.handleSearchTermInputChange}><cx-icon name="search" slot="prefix"></cx-icon></cx-input><cx-folder-select-tree class="folder-select__tree" base-url=${this.baseUrl} extra-folder-id=${this.extraFolderId} extra-folder-title=${this.extraFolderTitle} extra-folder-icon=${this.extraFolderIcon} min-query-length=${this.minQueryLength} search-term=${this.searchTerm} selected-value=${this.value} selection=${this.selection} token=${this.token} bearer-token=${this.bearerToken} ?exclude-virtual-folders=${this.excludeVirtualFolders} ?see-thru=${this.seeThru} ?auto-page-size=${this.autoPageSize} .allowedFolders=${this.allowedFolders} .api=${X(this, T)} .firstFetchCallback=${this.firstFetchCallback}></cx-folder-select-tree>`
       ],
       [
-        C.Select,
-        () => y`<cx-select clearable hoist lazy name=${this.name} value=${this.value} .form=${this.form} ?required=${this.required} ?multiple=${this.selection === "multiple"} @input=${this.handleSearchTermSelectChange} @cx-clear=${this.handleSelectClear} @cx-selected-change=${this.handleTreeSelectedChange} @cx-folder-select-selection-seeded=${this.handleTreeSelectedChange} allow-freetext><cx-folder-select-tree base-url=${this.baseUrl} extra-folder-id=${this.extraFolderId} extra-folder-title=${this.extraFolderTitle} extra-folder-icon=${this.extraFolderIcon} min-query-length=${this.minQueryLength} search-term=${this.searchTerm} selected-value=${this.value} selection=${this.selection} token=${this.token} bearer-token=${this.bearerToken} ?exclude-virtual-folders=${this.excludeVirtualFolders} ?see-thru=${this.seeThru} ?auto-page-size=${this.autoPageSize} .allowedFolders=${this.allowedFolders} .api=${X(this, I)} .firstFetchCallback=${this.firstFetchCallback}></cx-folder-select-tree></cx-select>`
+        D.Select,
+        () => y`<cx-select clearable hoist lazy name=${this.name} value=${this.value} .form=${this.form} ?required=${this.required} ?multiple=${this.selection === "multiple"} ?loading=${this.treeLoading} @input=${this.handleSearchTermSelectChange} @cx-clear=${this.handleSelectClear} @cx-selected-change=${this.handleTreeSelectedChange} @cx-folder-select-selection-seeded=${this.handleTreeSelectedChange} @cx-folder-select-loading-change=${this.handleTreeLoadingChange} allow-freetext><cx-folder-select-tree base-url=${this.baseUrl} extra-folder-id=${this.extraFolderId} extra-folder-title=${this.extraFolderTitle} extra-folder-icon=${this.extraFolderIcon} min-query-length=${this.minQueryLength} search-term=${this.searchTerm} selected-value=${this.value} selection=${this.selection} token=${this.token} bearer-token=${this.bearerToken} ?exclude-virtual-folders=${this.excludeVirtualFolders} ?see-thru=${this.seeThru} ?auto-page-size=${this.autoPageSize} .allowedFolders=${this.allowedFolders} .api=${X(this, T)} .firstFetchCallback=${this.firstFetchCallback}></cx-folder-select-tree></cx-select>`
       ]
     ])}</div>`;
   }
 };
-I = /* @__PURE__ */ new WeakMap();
-o.styles = [re, Pe];
+T = /* @__PURE__ */ new WeakMap();
+o.styles = [re, Ue];
 o.dependencies = {
   "cx-folder-select-tree": n,
   "cx-icon": ee,
@@ -844,113 +861,116 @@ o.dependencies = {
   "cx-select": me,
   "cx-tag": ye
 };
-h([
+c([
   se("cx-select")
 ], o.prototype, "selectEl", 2);
-h([
+c([
   s({ attribute: "min-query-length", reflect: !0, type: Number })
 ], o.prototype, "minQueryLength", 2);
-h([
+c([
   s({ attribute: "selection", reflect: !0, type: String })
 ], o.prototype, "selection", 2);
-h([
+c([
   s({ attribute: "variant", reflect: !0, type: String })
 ], o.prototype, "variant", 2);
-h([
+c([
   s({ reflect: !0, type: String })
 ], o.prototype, "value", 2);
-h([
+c([
   s({ reflect: !0, type: String })
 ], o.prototype, "name", 2);
-h([
+c([
   s({ attribute: "selected-label", reflect: !0, type: String })
 ], o.prototype, "selectedLabel", 2);
-h([
+c([
   s({ attribute: "base-url", reflect: !0, type: String })
 ], o.prototype, "baseUrl", 2);
-h([
+c([
   s({ attribute: "allowed-folders", converter: ae, type: Array })
 ], o.prototype, "allowedFolders", 2);
-h([
+c([
   s({ reflect: !0, type: Boolean })
 ], o.prototype, "open", 2);
-h([
+c([
   s({ reflect: !1, type: String })
 ], o.prototype, "token", 2);
-h([
+c([
   s({ attribute: "bearer-token", reflect: !0, type: String })
 ], o.prototype, "bearerToken", 2);
-h([
+c([
   s({ attribute: "see-thru", reflect: !0, type: Boolean })
 ], o.prototype, "seeThru", 2);
-h([
+c([
   s({ type: Function })
 ], o.prototype, "api", 2);
-h([
+c([
   s({ reflect: !0, type: Boolean })
 ], o.prototype, "required", 2);
-h([
+c([
   s({ reflect: !1 })
 ], o.prototype, "form", 2);
-h([
+c([
   s({
     attribute: "exclude-virtual-folders",
     reflect: !0,
     type: Boolean
   })
 ], o.prototype, "excludeVirtualFolders", 2);
-h([
+c([
   s({
     attribute: "extra-folder-id",
     reflect: !0,
     type: String
   })
 ], o.prototype, "extraFolderId", 2);
-h([
+c([
   s({
     attribute: "extra-folder-title",
     reflect: !0,
     type: String
   })
 ], o.prototype, "extraFolderTitle", 2);
-h([
+c([
   s({
     attribute: "extra-folder-icon",
     reflect: !0,
     type: String
   })
 ], o.prototype, "extraFolderIcon", 2);
-h([
+c([
   s({ attribute: "auto-page-size", reflect: !0, type: Boolean })
 ], o.prototype, "autoPageSize", 2);
-h([
+c([
   s({ attribute: "first-fetch-callback", reflect: !1, type: Function })
 ], o.prototype, "firstFetchCallback", 2);
-h([
-  x()
+c([
+  g()
 ], o.prototype, "searchTerm", 2);
-h([
+c([
+  g()
+], o.prototype, "treeLoading", 2);
+c([
   m("api")
 ], o.prototype, "updateWrappedApi", 1);
-h([
+c([
   m("searchTerm", { waitUntilFirstUpdate: !0 })
 ], o.prototype, "handleSearchTermChange", 1);
-h([
+c([
   m("open")
 ], o.prototype, "handleOpenChange", 1);
-h([
+c([
   m("variant")
 ], o.prototype, "handleVariantChange", 1);
-h([
+c([
   m("selectedLabel", { waitUntilFirstUpdate: !0 }),
   m("value", { waitUntilFirstUpdate: !0 })
 ], o.prototype, "handleValueChange", 1);
-o = h([
+o = c([
   N("cx-folder-select")
 ], o);
 export {
   o as C,
-  C as F,
+  D as F,
   q as a,
   ae as s
 };