@orangelogic/design-system 2.60.0 → 2.61.0

package/library/chunks/{folder-select.DiWCwR-T.js → folder-select.CSEQxIXF.js}

@@ -1,105 +1,111 @@
-import G from "../components/icon.js";
-import Z from "../components/input.js";
-import { C as J } from "./select.DfO4de04.js";
-import { C as x, a as K } from "./tree.CUfvIDyA.js";
-import { n as r, C as I, x as f, c as w, i as X } from "./custom-element.vnXBMQxc.js";
-import { h as k, F as Y, b as A } from "./endpoints.BgyupJys.js";
-import { c as R } from "./component.styles.CI-v8BZa.js";
-import { L as V } from "./i18n.BP2FRO1v.js";
-import { w as m } from "./watch.BCJD77bD.js";
-import { r as y } from "./state.Cw55xXlb.js";
+import A from "../components/icon.js";
+import X from "../components/input.js";
+import Y from "../components/select.js";
+import { C as $, a as ee } from "./tree.CNbrP8cY.js";
+import { n as r, C as O } from "./lib-cortex-element.CVMmyPMC.js";
+import { h as I, F as te, b as re } from "./endpoints.B7lcoc1N.js";
+import { c as R } from "./component.styles.DMSLciL5.js";
+import { c as D } from "./custom-element.L4WJXn1j.js";
+import { L as w } from "./i18n.DrzK7TPf.js";
+import { w as m } from "./watch.q1sEjPWL.js";
+import { x as f, i as ae } from "./lit-element.jLBm65_O.js";
+import { r as x } from "./state.CSDxrqLd.js";
 import { e as B } from "./query.BBf1UFkC.js";
-import { r as ee } from "./choose.BTbF6BAn.js";
-import { C as q } from "./button.CtCSNRB3.js";
-import { d as te } from "./popup._w5T7x8f.js";
-import { o as S } from "./if-defined.MfEgpxEN.js";
-import { c as W } from "./repeat.CauKaXyy.js";
-import { n as O } from "./when.Dr1es41R.js";
-import re from "../components/line-clamp.js";
-import se from "../components/space.js";
-import { M } from "./asset-link-format.BSRDqHg7.js";
-import { e as ae } from "./class-map.CoZTSvbM.js";
-var v = /* @__PURE__ */ ((e) => (e.CortexPath = "Document.CortexPath", e.DocType = "CoreField.DocType", e.HasBrowserChildren = "Document.HasBrowserChildren", e.RepresentativeAssetId = "Document.DocumentDirectRepresentativeRID", e.TitleWithFallback = "CoreField.TitleWithFallback", e))(v || {});
-const le = 50;
-async function U({
+import { r as se } from "./choose.BTbF6BAn.js";
+import { C as W } from "./button.P71VJ5xh.js";
+import { d as le } from "./debounce.DaHuiSGU.js";
+import { o as y } from "./if-defined.BRoBj_Rp.js";
+import { c as q } from "./repeat.DbF2p5ae.js";
+import { n as C } from "./when.Dr1es41R.js";
+import ie from "../components/line-clamp.js";
+import oe from "../components/space.js";
+import { M as P } from "./asset-link-format.BSRDqHg7.js";
+import { g as ne } from "./template.CsJd8Pb_.js";
+import { e as ce } from "./class-map.BiVq-cVR.js";
+var v = /* @__PURE__ */ ((e) => (e.CortexPath = "Document.CortexPath", e.DocType = "CoreField.DocType", e.HasBrowserChildren = "Document.HasBrowserChildren", e.RepresentativeAssetId = "Document.DocumentDirectRepresentativeRID", e.TitleWithFallback = "CoreField.TitleWithFallback", e.rawDocSubtype = "Document.RawDocSubType", e))(v || {});
+const he = 50;
+async function V({
   allowedFolders: e,
   baseUrl: t,
-  bearerToken: s,
-  excludeVirtualFolders: l,
-  folderId: a,
-  limit: u = le,
-  searchTerm: d,
-  self: L,
-  start: E = 0,
-  token: N
+  bearerToken: a,
+  excludeVirtualFolders: i,
+  folderId: l,
+  includeDirectChild: p,
+  limit: u = he,
+  searchTerm: U,
+  self: E,
+  start: M = 0,
+  token: Z
 }) {
-  let _ = [], P = !0;
-  e && e.length > 0 && !a ? (_ = e, L = !0, P = !1) : a && (_ = [a]);
+  let k = [], L = p ?? !0;
+  e && e.length > 0 && !l ? (k = e, E = !0, L = !1) : l && (k = [l]);
   try {
-    return (await k.request({
+    return (await I.request({
       baseURL: t,
       headers: {
-        Authorization: `Bearer ${s}`
+        Authorization: `Bearer ${a}`
       },
       method: "GET",
       params: {
-        IncludeDirectChild: P,
-        IncludeVirtualFolders: !l,
+        IncludeDirectChild: L,
+        IncludeVirtualFolders: !i,
         Limit: u,
-        ObjectRecordIDs: _,
-        SeeThru: !!d,
-        Self: L,
-        Start: E,
-        Text: d || void 0,
-        Token: N || void 0
+        ObjectRecordIDs: k,
+        SeeThru: !!U,
+        Self: E,
+        Start: M,
+        Text: U || void 0,
+        Token: Z || void 0
       },
       paramsSerializer: {
         indexes: null
       },
       responseType: "json",
       transformResponse: [
-        ...Array.isArray(k.defaults.transformResponse) ? k.defaults.transformResponse : [],
-        ($, fe, F) => {
-          if (F !== void 0 && (F < 200 || F >= 300))
+        ...Array.isArray(I.defaults.transformResponse) ? I.defaults.transformResponse : [],
+        (g, Te, _) => {
+          if (_ !== void 0 && (_ < 200 || _ >= 300))
             return {
               data: [],
-              hasMore: !1
+              hasMore: !1,
+              totalCount: 0
             };
-          if (!$ || typeof $ != "object")
+          if (!g || typeof g != "object")
             throw new Error("Invalid response format");
-          const H = $.contentItems?.length ?? 0;
+          const K = g.contentItems?.length ?? 0;
           return {
-            data: $.contentItems?.map((b) => ({
+            data: g.contentItems?.map((b) => ({
               docType: b.fields[v.DocType] ?? "",
               fullPath: b.fields[v.CortexPath] ?? "",
               hasChildren: b.fields[v.HasBrowserChildren] === "1",
               id: b.recordID,
+              isShared: b.fields[v.rawDocSubtype] === "DO_OR1ND000001913488",
               representativeAssetId: b.fields[v.RepresentativeAssetId] ?? "",
               title: b.fields[v.TitleWithFallback] ?? ""
             })) ?? [],
-            hasMore: E + H < $.totalCount
+            hasMore: M + K < g.totalCount,
+            totalCount: g.totalCount
           };
         }
       ],
-      url: Y
+      url: te
     })).data;
-  } catch (T) {
-    if (T instanceof A && T.response?.status === 401)
-      throw T;
+  } catch {
     return {
       data: [],
-      hasMore: !1
+      hasMore: !1,
+      totalCount: 0
     };
   }
 }
-var C = /* @__PURE__ */ ((e) => (e.Input = "input", e.Select = "select", e))(C || {}), ie = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, c = (e, t, s, l) => {
-  for (var a = l > 1 ? void 0 : l ? oe(t, s) : t, u = e.length - 1, d; u >= 0; u--)
-    (d = e[u]) && (a = (l ? d(t, s, a) : d(a)) || a);
-  return l && a && ie(t, s, a), a;
+var F = /* @__PURE__ */ ((e) => (e.Input = "input", e.Select = "select", e))(F || {}), de = Object.defineProperty, pe = Object.getOwnPropertyDescriptor, d = (e, t, a, i) => {
+  for (var l = i > 1 ? void 0 : i ? pe(t, a) : t, p = e.length - 1, u; p >= 0; p--)
+    (u = e[p]) && (l = (i ? u(t, a, l) : u(l)) || l);
+  return i && l && de(t, a, l), l;
 };
-let o = class extends I {
+let n = class extends O {
   constructor() {
-    super(...arguments), this.localize = new V(this), this.role = "treeitem", this.folderId = "", this.hasChildren = !1, this.fullPath = "", this.docType = M.Story, this.name = "", this.representativeAssetId = "", this.selectedValue = "", this.token = "", this.bearerToken = "", this.baseUrl = "", this.api = U, this.excludeVirtualFolders = !1, this.url = "", this.data = null, this.hasMore = !1, this.loading = !1;
+    super(...arguments), this.localize = new w(this), this.role = "treeitem", this.folderId = "", this.hasChildren = !1, this.fullPath = "", this.docType = P.Story, this.name = "", this.representativeAssetId = "", this.selectedValue = "", this.token = "", this.bearerToken = "", this.baseUrl = "", this.searchTerm = "", this.api = V, this.excludeVirtualFolders = !1, this.url = "", 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
@@ -114,7 +120,7 @@ let o = class extends I {
     if (!this.api)
       return { data: [], hasMore: !1 };
     try {
-      const { data: s, hasMore: l } = await this.api({
+      const { data: a, hasMore: i } = await this.api({
         baseUrl: this.baseUrl,
         bearerToken: this.bearerToken,
         excludeVirtualFolders: this.excludeVirtualFolders,
@@ -122,7 +128,7 @@ let o = class extends I {
         start: t,
         token: this.token
       });
-      return { data: s, hasMore: l };
+      return { data: a, hasMore: i };
     } catch {
       return { data: [], hasMore: !1 };
     }
@@ -132,11 +138,11 @@ let o = class extends I {
     const t = this.data?.length || 0;
     this.loading = !0;
     try {
-      const { data: s, hasMore: l } = await this.fetchFolders({
+      const { data: a, hasMore: i } = await this.fetchFolders({
         folderId: this.folderId,
         start: t
       });
-      this.data = [...this.data || [], ...s], this.hasMore = l;
+      this.data = [...this.data || [], ...a], this.hasMore = i;
     } catch {
     } finally {
       this.loading = !1;
@@ -146,11 +152,11 @@ let o = class extends I {
     e.stopPropagation(), this.treeItem.expanded = !0;
     const t = this.data?.length || 0;
     try {
-      const { data: s, hasMore: l } = await this.fetchFolders({
+      const { data: a, hasMore: i } = await this.fetchFolders({
         folderId: this.folderId,
         start: t
       });
-      this.data = s, this.hasMore = l;
+      this.data = a, this.hasMore = i;
     } catch {
       this.treeItem.expanded = !1;
     }
@@ -158,13 +164,13 @@ let o = class extends I {
   render() {
     return f`
       <cx-tree-item
-        class=${ae({
+        class=${ce({
       "folder-select-tree-item": !0
     })}
         data-id=${this.folderId}
-        data-url=${S(this.url)}
-        data-name=${S(this.name?.trim() || void 0)}
-        data-representative-asset-id=${S(
+        data-url=${y(this.url)}
+        data-name=${y(this.name?.trim() || void 0)}
+        data-representative-asset-id=${y(
       this.representativeAssetId || void 0
     )}
         role="option"
@@ -182,13 +188,13 @@ let o = class extends I {
           <cx-icon
             class="folder-select-tree__item__icon"
             name="folder"
-            variant=${this.docType === M.Album ? "outlined" : "filled"}
+            variant=${this.docType === P.Album ? "outlined" : "filled"}
           ></cx-icon>
           <cx-line-clamp lines="1" class="folder-select-tree-item__title">
-            ${this.name}
+            ${ne(this.name, this.searchTerm)}
           </cx-line-clamp>
         </cx-space>
-        ${W(
+        ${q(
       this.data || [],
       (e) => e.id,
       (e) => f`<cx-folder-select-tree-item
@@ -203,13 +209,13 @@ let o = class extends I {
               ?exclude-virtual-folders=${this.excludeVirtualFolders}
               ?has-children=${e.hasChildren}
               base-url=${this.baseUrl}
-              url=${S(e.url ?? void 0)}
+              url=${y(e.url ?? void 0)}
               .api=${this.api}
               value=${e.url}
             ></cx-folder-select-tree-item>`
     )}
       </cx-tree-item>
-      ${O(
+      ${C(
       this.hasMore,
       () => f`
           <div slot="children" class="load-more-button">
@@ -226,84 +232,89 @@ let o = class extends I {
     `;
   }
 };
-o.styles = [R];
-o.dependencies = {
-  "cx-button": q,
-  "cx-icon": G,
-  "cx-line-clamp": re,
-  "cx-space": se,
-  "cx-tree-item": x
+n.styles = [R];
+n.dependencies = {
+  "cx-button": W,
+  "cx-icon": A,
+  "cx-line-clamp": ie,
+  "cx-space": oe,
+  "cx-tree-item": $
 };
-c([
+d([
   B("cx-tree-item")
-], o.prototype, "treeItem", 2);
-c([
+], n.prototype, "treeItem", 2);
+d([
   r({ attribute: "folder-id", reflect: !0, type: String })
-], o.prototype, "folderId", 2);
-c([
+], n.prototype, "folderId", 2);
+d([
   r({ attribute: "has-children", reflect: !0, type: Boolean })
-], o.prototype, "hasChildren", 2);
-c([
+], n.prototype, "hasChildren", 2);
+d([
   r({ attribute: "full-path", reflect: !0, type: String })
-], o.prototype, "fullPath", 2);
-c([
+], n.prototype, "fullPath", 2);
+d([
   r({ attribute: "doc-type", reflect: !0, type: String })
-], o.prototype, "docType", 2);
-c([
+], n.prototype, "docType", 2);
+d([
   r({ reflect: !0, type: String })
-], o.prototype, "name", 2);
-c([
+], n.prototype, "name", 2);
+d([
   r({
     attribute: "representative-asset-id",
     reflect: !0,
     type: String
   })
-], o.prototype, "representativeAssetId", 2);
-c([
+], n.prototype, "representativeAssetId", 2);
+d([
   r({ attribute: "selected-value", reflect: !0, type: String })
-], o.prototype, "selectedValue", 2);
-c([
+], n.prototype, "selectedValue", 2);
+d([
   r({ reflect: !0, type: String })
-], o.prototype, "token", 2);
-c([
+], n.prototype, "token", 2);
+d([
   r({ attribute: "bearer-token", reflect: !0, type: String })
-], o.prototype, "bearerToken", 2);
-c([
+], n.prototype, "bearerToken", 2);
+d([
   r({ attribute: "base-url", reflect: !0, type: String })
-], o.prototype, "baseUrl", 2);
-c([
+], n.prototype, "baseUrl", 2);
+d([
+  r({ attribute: "search-term", reflect: !0, type: String })
+], n.prototype, "searchTerm", 2);
+d([
   r({ type: Function })
-], o.prototype, "api", 2);
-c([
+], n.prototype, "api", 2);
+d([
   r({
     attribute: "exclude-virtual-folders",
     reflect: !0,
     type: Boolean
   })
-], o.prototype, "excludeVirtualFolders", 2);
-c([
+], n.prototype, "excludeVirtualFolders", 2);
+d([
   r({ reflect: !0, type: String })
-], o.prototype, "url", 2);
-c([
-  y()
-], o.prototype, "data", 2);
-c([
-  y()
-], o.prototype, "hasMore", 2);
-c([
-  y()
-], o.prototype, "loading", 2);
-o = c([
-  w("cx-folder-select-tree-item")
-], o);
-var ne = Object.defineProperty, ce = Object.getOwnPropertyDescriptor, p = (e, t, s, l) => {
-  for (var a = l > 1 ? void 0 : l ? ce(t, s) : t, u = e.length - 1, d; u >= 0; u--)
-    (d = e[u]) && (a = (l ? d(t, s, a) : d(a)) || a);
-  return l && a && ne(t, s, a), a;
-};
-let h = class extends I {
+], n.prototype, "url", 2);
+d([
+  x()
+], n.prototype, "data", 2);
+d([
+  x()
+], n.prototype, "hasMore", 2);
+d([
+  x()
+], n.prototype, "loading", 2);
+n = d([
+  D("cx-folder-select-tree-item")
+], n);
+var ue = Object.defineProperty, fe = Object.getOwnPropertyDescriptor, Q = (e) => {
+  throw TypeError(e);
+}, h = (e, t, a, i) => {
+  for (var l = i > 1 ? void 0 : i ? fe(t, a) : t, p = e.length - 1, u; p >= 0; p--)
+    (u = e[p]) && (l = (i ? u(t, a, l) : u(l)) || l);
+  return i && l && ue(t, a, l), l;
+}, N = (e, t, a) => t.has(e) || Q("Cannot " + a), me = (e, t, a) => (N(e, t, "read from private field"), t.get(e)), ye = (e, t, a) => t.has(e) ? Q("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, a), xe = (e, t, a, i) => (N(e, t, "write to private field"), t.set(e, a), a), S;
+let c = class extends O {
   constructor() {
-    super(...arguments), this.localize = new V(this), this.minQueryLength = 1, this.selection = "single", this.searchTerm = "", this.selectedValue = "", this.token = "", this.bearerToken = "", this.baseUrl = "", this.api = U, this.excludeVirtualFolders = !1, this.data = [], this.hasMore = !1, this.loading = !1;
+    super(...arguments), this.localize = new w(this), this.minQueryLength = 1, this.selection = "single", this.searchTerm = "", this.selectedValue = "", this.token = "", this.bearerToken = "", this.baseUrl = "", this.extraFolderId = "", this.extraFolderTitle = "", this.seeThru = !1, this.extraFolderData = null, this.api = V, this.excludeVirtualFolders = !1, this.firstFetchCallback = null, this.data = [], this.hasMore = !1, this.loading = !1, ye(this, S, !1);
   }
   get empty() {
     return !this.loading && this.data.length === 0;
@@ -317,27 +328,60 @@ let h = class extends I {
   runFirstUpdated() {
     this.searchTerm = "", this.handleFetchFolders();
   }
+  async handleExtraFolderIdChange() {
+    if (!this.extraFolderId || !this.api) {
+      this.extraFolderData = null;
+      return;
+    }
+    const { data: e } = await this.api({
+      baseUrl: this.baseUrl,
+      bearerToken: this.bearerToken,
+      excludeVirtualFolders: this.excludeVirtualFolders,
+      folderId: this.extraFolderId,
+      includeDirectChild: !1,
+      limit: 1,
+      searchTerm: this.searchTerm,
+      seeThru: this.seeThru,
+      self: !0,
+      start: 0,
+      token: this.token
+    });
+    this.extraFolderData = e[0] ?? null;
+  }
   async loadMore(e) {
     if (!this.api)
       return;
     e.stopPropagation();
     const t = this.data.length;
     this.loading = !0;
-    const { data: s, hasMore: l } = await this.api({
+    const { data: a, hasMore: i } = await this.api({
       baseUrl: this.baseUrl,
       bearerToken: this.bearerToken,
       excludeVirtualFolders: this.excludeVirtualFolders,
       folderId: "",
       limit: 10,
       searchTerm: this.searchTerm,
+      seeThru: this.seeThru,
       start: t,
       token: this.token
     });
-    this.data = [...this.data, ...s], this.hasMore = l, this.loading = !1;
+    this.data = [...this.data, ...a], this.hasMore = i, this.loading = !1;
   }
   async handleFetchFolders() {
-    if (!this.api || this.searchTerm.length > 0 && this.searchTerm.length < this.minQueryLength)
-      return;
+    const { data: e, hasMore: t } = await this.fetchFolders();
+    me(this, S) || e.length > 0 && (this.firstFetchCallback?.(e), xe(this, S, !0)), this.data = e, this.hasMore = t, this.loading = !1;
+  }
+  async fetchFolders() {
+    if (!this.api)
+      return {
+        data: [],
+        hasMore: !1
+      };
+    if (this.searchTerm.length > 0 && this.searchTerm.length < this.minQueryLength)
+      return {
+        data: [],
+        hasMore: !1
+      };
     this.loading = !0;
     const { data: e, hasMore: t } = await this.api({
       baseUrl: this.baseUrl,
@@ -346,10 +390,14 @@ let h = class extends I {
       folderId: "",
       limit: 10,
       searchTerm: this.searchTerm,
+      seeThru: this.seeThru,
       start: 0,
       token: this.token
     });
-    this.data = e, this.hasMore = t, this.loading = !1;
+    return this.data = e, this.hasMore = t, this.loading = !1, {
+      data: e,
+      hasMore: t
+    };
   }
   renderFolder(e) {
     return f`<cx-folder-select-tree-item
@@ -357,12 +405,13 @@ let h = class extends I {
       base-url=${this.baseUrl}
       doc-type=${e.docType}
       folder-id=${e.id}
-      full-path=${e.fullPath}
+      full-path=${y(e.fullPath ?? void 0)}
       name=${e.title}
+      search-term=${this.searchTerm}
       selected-value=${this.selectedValue}
       token=${this.token}
       bearer-token=${this.bearerToken}
-      url=${S(e.url ?? void 0)}
+      url=${y(e.url ?? void 0)}
       ?has-children=${e.hasChildren}
       ?exclude-virtual-folders=${this.excludeVirtualFolders}
     ></cx-folder-select-tree-item>`;
@@ -375,7 +424,7 @@ let h = class extends I {
       disabled-auto-expand
       disabled-sync-checkboxes
     >
-      ${O(
+      ${C(
       this.empty,
       () => f`<div
             class="folder-select-tree__empty-message"
@@ -387,12 +436,30 @@ let h = class extends I {
             </cx-typography>
           </div>`
     )}
-      ${W(
+      ${C(
+      this.extraFolderData,
+      () => f`<cx-folder-select-tree-item
+          .api=${this.api}
+          base-url=${this.baseUrl}
+          doc-type=${y(this.extraFolderData?.docType ?? void 0)}
+          folder-id=${y(this.extraFolderData?.id ?? void 0)}
+          full-path=${y(this.extraFolderData?.fullPath ?? void 0)}
+          name=${this.extraFolderTitle || this.extraFolderData?.title}
+          search-term=${this.searchTerm}
+          selected-value=${this.selectedValue}
+          token=${this.token}
+          bearer-token=${this.bearerToken}
+          url=${y(this.extraFolderData?.url ?? void 0)}
+          ?has-children=${this.extraFolderData?.hasChildren}
+          ?exclude-virtual-folders=${this.excludeVirtualFolders}
+        ></cx-folder-select-tree-item>`
+    )}
+      ${q(
       this.data,
       (e) => e.id,
       (e) => this.renderFolder(e)
     )}
-      ${O(
+      ${C(
       this.hasMore,
       () => f`
           <cx-button
@@ -408,62 +475,81 @@ let h = class extends I {
     </cx-tree>`;
   }
 };
-h.dependencies = {
-  "cx-button": q,
-  "cx-folder-select-tree-item": o,
-  "cx-tree": K
+S = /* @__PURE__ */ new WeakMap();
+c.dependencies = {
+  "cx-button": W,
+  "cx-folder-select-tree-item": n,
+  "cx-tree": ee
 };
-p([
+h([
   r({ attribute: "min-query-length", reflect: !0, type: Number })
-], h.prototype, "minQueryLength", 2);
-p([
+], c.prototype, "minQueryLength", 2);
+h([
   r({ attribute: "selection", reflect: !0, type: String })
-], h.prototype, "selection", 2);
-p([
+], c.prototype, "selection", 2);
+h([
   r({ attribute: "search-term", reflect: !0, type: String })
-], h.prototype, "searchTerm", 2);
-p([
+], c.prototype, "searchTerm", 2);
+h([
   r({ attribute: "selected-value", reflect: !0, type: String })
-], h.prototype, "selectedValue", 2);
-p([
+], c.prototype, "selectedValue", 2);
+h([
   r({ reflect: !0, type: String })
-], h.prototype, "token", 2);
-p([
+], c.prototype, "token", 2);
+h([
   r({ attribute: "bearer-token", reflect: !0, type: String })
-], h.prototype, "bearerToken", 2);
-p([
+], c.prototype, "bearerToken", 2);
+h([
   r({ attribute: "base-url", reflect: !0, type: String })
-], h.prototype, "baseUrl", 2);
-p([
+], c.prototype, "baseUrl", 2);
+h([
+  r({ attribute: "extra-folder-id", reflect: !0, type: String })
+], c.prototype, "extraFolderId", 2);
+h([
+  r({ attribute: "extra-folder-title", reflect: !0, type: String })
+], c.prototype, "extraFolderTitle", 2);
+h([
+  r({ attribute: "see-thru", reflect: !0, type: Boolean })
+], c.prototype, "seeThru", 2);
+h([
+  x()
+], c.prototype, "extraFolderData", 2);
+h([
   r({ type: Function })
-], h.prototype, "api", 2);
-p([
+], c.prototype, "api", 2);
+h([
   r({
     attribute: "exclude-virtual-folders",
     reflect: !0,
     type: Boolean
   })
-], h.prototype, "excludeVirtualFolders", 2);
-p([
-  y()
-], h.prototype, "data", 2);
-p([
-  y()
-], h.prototype, "hasMore", 2);
-p([
-  y()
-], h.prototype, "loading", 2);
-p([
+], c.prototype, "excludeVirtualFolders", 2);
+h([
+  r({ attribute: "first-fetch-callback", reflect: !1, type: Function })
+], c.prototype, "firstFetchCallback", 2);
+h([
+  x()
+], c.prototype, "data", 2);
+h([
+  x()
+], c.prototype, "hasMore", 2);
+h([
+  x()
+], c.prototype, "loading", 2);
+h([
+  m("extraFolderId")
+], c.prototype, "handleExtraFolderIdChange", 1);
+h([
   m("baseUrl", { waitUntilFirstUpdate: !0 }),
   m("token", { waitUntilFirstUpdate: !0 }),
   m("searchTerm", { waitUntilFirstUpdate: !0 }),
   m("excludeVirtualFolders", { waitUntilFirstUpdate: !0 }),
-  te(500)
-], h.prototype, "handleFetchFolders", 1);
-h = p([
-  w("cx-folder-select-tree")
-], h);
-const he = X`
+  le(500)
+], c.prototype, "handleFetchFolders", 1);
+c = h([
+  D("cx-folder-select-tree")
+], c);
+const be = ae`
   :host {
     display: block;
     width: 100%;
@@ -472,6 +558,7 @@ const he = X`
   .folder-select {
     display: flex;
     flex-direction: column;
+    gap: var(--cx-spacing-x-small);
   }
 
   .folder-select-tree {
@@ -503,27 +590,34 @@ const he = X`
     overflow: hidden;
   }
 `;
-var de = Object.defineProperty, pe = Object.getOwnPropertyDescriptor, Q = (e) => {
+var ve = Object.defineProperty, ge = Object.getOwnPropertyDescriptor, H = (e) => {
   throw TypeError(e);
-}, n = (e, t, s, l) => {
-  for (var a = l > 1 ? void 0 : l ? pe(t, s) : t, u = e.length - 1, d; u >= 0; u--)
-    (d = e[u]) && (a = (l ? d(t, s, a) : d(a)) || a);
-  return l && a && de(t, s, a), a;
-}, j = (e, t, s) => t.has(e) || Q("Cannot " + s), D = (e, t, s) => (j(e, t, "read from private field"), s ? s.call(e) : t.get(e)), ue = (e, t, s) => t.has(e) ? Q("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, s), z = (e, t, s, l) => (j(e, t, "write to private field"), t.set(e, s), s), g;
-let i = class extends I {
+}, o = (e, t, a, i) => {
+  for (var l = i > 1 ? void 0 : i ? ge(t, a) : t, p = e.length - 1, u; p >= 0; p--)
+    (u = e[p]) && (l = (i ? u(t, a, l) : u(l)) || l);
+  return i && l && ve(t, a, l), l;
+}, j = (e, t, a) => t.has(e) || H("Cannot " + a), G = (e, t, a) => (j(e, t, "read from private field"), a ? a.call(e) : t.get(e)), $e = (e, t, a) => t.has(e) ? H("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, a), z = (e, t, a, i) => (j(e, t, "write to private field"), t.set(e, a), a), T;
+let s = class extends O {
   constructor() {
-    super(), this.localize = new V(this), this.minQueryLength = 1, this.selection = "single", this.variant = C.Input, this.value = "", this.name = "", this.selectedLabel = "", this.baseUrl = "", this.open = !1, this.token = "", this.bearerToken = "", this.api = U, this.required = !1, this.form = void 0, this.excludeVirtualFolders = !1, this.searchTerm = "", ue(this, g), 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.updateWrappedApi();
+    super(), this.localize = new w(this), this.minQueryLength = 1, this.selection = "single", this.variant = F.Input, this.value = "", this.name = "", this.selectedLabel = "", this.baseUrl = "", this.open = !1, this.token = "", this.bearerToken = "", this.seeThru = !1, this.api = V, this.required = !1, this.form = void 0, this.excludeVirtualFolders = !1, this.extraFolderId = "", this.extraFolderTitle = "", this.firstFetchCallback = null, this.searchTerm = "", $e(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.updateWrappedApi();
   }
   updateWrappedApi() {
     if (!this.api) {
-      z(this, g, void 0);
+      z(this, T, void 0);
       return;
     }
-    z(this, g, async (e) => {
+    z(this, T, async (e) => {
       try {
         return await this.api(e);
       } catch (t) {
-        return t instanceof A && t.response?.status === 401 && this.emit("cx-renew-token"), { data: [], hasMore: !1 };
+        return t instanceof re && t.response?.status === 401 && this.emit("cx-renew-token"), { data: [], hasMore: !1, totalCount: 0 };
+      }
+    });
+  }
+  handleSearchTermChange() {
+    this.emit("cx-folder-select-search-term-change", {
+      detail: {
+        value: this.searchTerm
       }
     });
   }
@@ -534,20 +628,20 @@ let i = class extends I {
     this.searchTerm = e.target.displayInput.value;
   }
   selectGetOptionValue(e) {
-    return !e || !(e instanceof x) ? this.value : e.dataset.id || this.value;
+    return !e || !(e instanceof $) ? this.value : e.dataset.id || this.value;
   }
   selectGetOptionLabel(e) {
-    return !e || !(e instanceof x) ? this.selectedLabel : e.dataset.name || this.selectedLabel;
+    return !e || !(e instanceof $) ? this.selectedLabel : e.dataset.name || this.selectedLabel;
   }
   selectGetOptionSelected(e) {
-    if (!(!e || !(e instanceof x)))
+    if (!(!e || !(e instanceof $)))
       return e.selected;
   }
   selectFilterCallback(e) {
-    return !(!e || !(e instanceof x));
+    return !(!e || !(e instanceof $));
   }
   selectSetOptionSelected(e, t) {
-    if (!(!e || !(e instanceof x))) {
+    if (!(!e || !(e instanceof $))) {
       if (t === void 0) {
         e.selected = !e.selected;
         return;
@@ -568,16 +662,16 @@ let i = class extends I {
     }
   }
   async handleVariantChange() {
-    this.variant === C.Select && (await this.updateComplete, this.updateFunctionProps());
+    this.variant === F.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.handleDefaultSlotChange());
   }
   render() {
     return f`<div class="folder-select">
-      ${ee(this.variant, [
+      ${se(this.variant, [
       [
-        C.Input,
+        F.Input,
         () => f`
             <cx-input
               aria-label=${this.localize.term("searchFolders")}
@@ -590,6 +684,8 @@ let i = class extends I {
             </cx-input>
             <cx-folder-select-tree
               base-url=${this.baseUrl}
+              extra-folder-id=${this.extraFolderId}
+              extra-folder-title=${this.extraFolderTitle}
               min-query-length=${this.minQueryLength}
               search-term=${this.searchTerm}
               selected-value=${this.value}
@@ -597,13 +693,15 @@ let i = class extends I {
               token=${this.token}
               bearer-token=${this.bearerToken}
               ?exclude-virtual-folders=${this.excludeVirtualFolders}
-              .api=${D(this, g)}
+              ?see-thru=${this.seeThru}
+              .api=${G(this, T)}
+              .firstFetchCallback=${this.firstFetchCallback}
             >
             </cx-folder-select-tree>
           `
       ],
       [
-        C.Select,
+        F.Select,
         () => f`
             <cx-select
               clearable
@@ -619,6 +717,8 @@ let i = class extends I {
             >
               <cx-folder-select-tree
                 base-url=${this.baseUrl}
+                extra-folder-id=${this.extraFolderId}
+                extra-folder-title=${this.extraFolderTitle}
                 min-query-length=${this.minQueryLength}
                 search-term=${this.searchTerm}
                 selected-value=${this.value}
@@ -626,7 +726,9 @@ let i = class extends I {
                 token=${this.token}
                 bearer-token=${this.bearerToken}
                 ?exclude-virtual-folders=${this.excludeVirtualFolders}
-                .api=${D(this, g)}
+                ?see-thru=${this.seeThru}
+                .api=${G(this, T)}
+                .firstFetchCallback=${this.firstFetchCallback}
               >
               </cx-folder-select-tree>
             </cx-select>
@@ -636,84 +738,107 @@ let i = class extends I {
     </div>`;
   }
 };
-g = /* @__PURE__ */ new WeakMap();
-i.styles = [R, he];
-i.dependencies = {
-  "cx-folder-select-tree": h,
-  "cx-icon": G,
-  "cx-input": Z,
-  "cx-select": J
+T = /* @__PURE__ */ new WeakMap();
+s.styles = [R, be];
+s.dependencies = {
+  "cx-folder-select-tree": c,
+  "cx-icon": A,
+  "cx-input": X,
+  "cx-select": Y
 };
-n([
+o([
   B("cx-select")
-], i.prototype, "selectEl", 2);
-n([
+], s.prototype, "selectEl", 2);
+o([
   r({ attribute: "min-query-length", reflect: !0, type: Number })
-], i.prototype, "minQueryLength", 2);
-n([
+], s.prototype, "minQueryLength", 2);
+o([
   r({ attribute: "selection", reflect: !0, type: String })
-], i.prototype, "selection", 2);
-n([
+], s.prototype, "selection", 2);
+o([
   r({ attribute: "variant", reflect: !0, type: String })
-], i.prototype, "variant", 2);
-n([
+], s.prototype, "variant", 2);
+o([
   r({ reflect: !0, type: String })
-], i.prototype, "value", 2);
-n([
+], s.prototype, "value", 2);
+o([
   r({ reflect: !0, type: String })
-], i.prototype, "name", 2);
-n([
+], s.prototype, "name", 2);
+o([
   r({ attribute: "selected-label", reflect: !0, type: String })
-], i.prototype, "selectedLabel", 2);
-n([
+], s.prototype, "selectedLabel", 2);
+o([
   r({ attribute: "base-url", reflect: !0, type: String })
-], i.prototype, "baseUrl", 2);
-n([
+], s.prototype, "baseUrl", 2);
+o([
   r({ reflect: !0, type: Boolean })
-], i.prototype, "open", 2);
-n([
+], s.prototype, "open", 2);
+o([
   r({ reflect: !1, type: String })
-], i.prototype, "token", 2);
-n([
+], s.prototype, "token", 2);
+o([
   r({ attribute: "bearer-token", reflect: !0, type: String })
-], i.prototype, "bearerToken", 2);
-n([
+], s.prototype, "bearerToken", 2);
+o([
+  r({ attribute: "see-thru", reflect: !0, type: Boolean })
+], s.prototype, "seeThru", 2);
+o([
   r({ type: Function })
-], i.prototype, "api", 2);
-n([
+], s.prototype, "api", 2);
+o([
   r({ reflect: !0, type: Boolean })
-], i.prototype, "required", 2);
-n([
+], s.prototype, "required", 2);
+o([
   r({ reflect: !1 })
-], i.prototype, "form", 2);
-n([
+], s.prototype, "form", 2);
+o([
   r({
     attribute: "exclude-virtual-folders",
     reflect: !0,
     type: Boolean
   })
-], i.prototype, "excludeVirtualFolders", 2);
-n([
-  y()
-], i.prototype, "searchTerm", 2);
-n([
+], s.prototype, "excludeVirtualFolders", 2);
+o([
+  r({
+    attribute: "extra-folder-id",
+    reflect: !0,
+    type: String
+  })
+], s.prototype, "extraFolderId", 2);
+o([
+  r({
+    attribute: "extra-folder-title",
+    reflect: !0,
+    type: String
+  })
+], s.prototype, "extraFolderTitle", 2);
+o([
+  r({ attribute: "first-fetch-callback", reflect: !1, type: Function })
+], s.prototype, "firstFetchCallback", 2);
+o([
+  x()
+], s.prototype, "searchTerm", 2);
+o([
   m("api")
-], i.prototype, "updateWrappedApi", 1);
-n([
+], s.prototype, "updateWrappedApi", 1);
+o([
+  m("searchTerm", { waitUntilFirstUpdate: !0 })
+], s.prototype, "handleSearchTermChange", 1);
+o([
   m("open")
-], i.prototype, "handleOpenChange", 1);
-n([
+], s.prototype, "handleOpenChange", 1);
+o([
   m("variant")
-], i.prototype, "handleVariantChange", 1);
-n([
+], s.prototype, "handleVariantChange", 1);
+o([
   m("selectedLabel", { waitUntilFirstUpdate: !0 }),
   m("value", { waitUntilFirstUpdate: !0 })
-], i.prototype, "handleValueChange", 1);
-i = n([
-  w("cx-folder-select")
-], i);
+], s.prototype, "handleValueChange", 1);
+s = o([
+  D("cx-folder-select")
+], s);
 export {
-  i as C,
-  C as F,
-  U as a
+  s as C,
+  F,
+  V as a
 };