@orangelogic/design-system 2.133.0 → 2.135.0

package/library/chunks/folder-select.DuG4dSPm.js

@@ -0,0 +1,942 @@
+import { C as ee } from "./icon.DnBh6-56.js";
+import { C as ue } from "./input.GUw7x9tK.js";
+import te from "../components/line-clamp.js";
+import fe from "../components/select.js";
+import me from "../components/tag.js";
+import { C as v, a as ye } from "./tree.C14rLLol.js";
+import { n as s, C as B } from "./lib-cortex-element.CVMmyPMC.js";
+import { h as L, F as xe, A as ge } from "./endpoints.tU0_RZ_7.js";
+import { M as P } from "./asset-link-format.QzzboHHE.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.DJikbkDK.js";
+import { w as y } from "./watch.CThbualB.js";
+import { x as m, i as be } from "./lit-element.jLBm65_O.js";
+import { r as x } from "./state.CSDxrqLd.js";
+import { e as se } from "./query.BBf1UFkC.js";
+import { r as $e } from "./choose.BTbF6BAn.js";
+import { C as ie } from "./button.3giRMk79.js";
+import { d as ve } from "./debounce.DaHuiSGU.js";
+import { g as G, p as J, e as Se } from "./string.CjJ09HK3.js";
+import { o as p } from "./if-defined.BRoBj_Rp.js";
+import { c as A } from "./repeat.CFjcER6_.js";
+import { o as le } from "./style-map.llVFPd__.js";
+import { n as w } from "./when.Dr1es41R.js";
+import Ie from "../components/space.js";
+import { g as Fe } from "./template.ClovJacp.js";
+import { e as Te } from "./class-map.BiVq-cVR.js";
+var b = /* @__PURE__ */ ((e) => (e.CortexPath = "Document.CortexPath", e.DocSubTypeIconColor = "DocSubTypeIconColor", e.DocSubTypeIconImageUrl = "DocSubTypeIconImageUrl", e.DocSubTypeIconName = "DocSubTypeIconName", e.DocSubTypeIsFontIcon = "DocSubTypeIsFontIcon", e.DocType = "CoreField.DocType", e.HasBrowserChildren = "Document.HasBrowserChildren", e.RepresentativeAssetId = "Document.DocumentDirectRepresentativeRID", e.TitleWithFallback = "CoreField.TitleWithFallback", e))(b || {});
+const Ce = 50;
+async function q({
+  allowedFolders: e,
+  baseUrl: t,
+  bearerToken: r,
+  excludeVirtualFolders: l,
+  folderId: i,
+  includeDirectChild: u,
+  limit: f = Ce,
+  searchTerm: $,
+  self: T,
+  start: H = 0,
+  token: he
+}) {
+  let U = [], Q = u ?? !0;
+  e && e.length > 0 && !i ? (U = e, T = !0, Q = !1) : i && (U = [i]);
+  try {
+    return (await L.request({
+      baseURL: t,
+      headers: {
+        Authorization: `Bearer ${r}`
+      },
+      method: "GET",
+      params: {
+        IncludeDirectChild: Q,
+        IncludeVirtualFolders: !l,
+        Limit: f,
+        ObjectRecordIDs: U,
+        SeeThru: !!$,
+        Self: T,
+        Start: H,
+        Text: $ || void 0,
+        Token: he || void 0
+      },
+      paramsSerializer: {
+        indexes: null
+      },
+      responseType: "json",
+      transformResponse: [
+        ...Array.isArray(L.defaults.transformResponse) ? L.defaults.transformResponse : [],
+        (S, Oe, E) => {
+          if (E !== void 0 && (E < 200 || E >= 300))
+            return {
+              data: [],
+              hasMore: !1,
+              totalCount: 0
+            };
+          if (!S || typeof S != "object")
+            throw new Error("Invalid response format");
+          const pe = S.contentItems?.length ?? 0;
+          return {
+            data: S.contentItems?.map((g) => {
+              const O = g.fields[b.DocType] ?? "", R = g.fields[b.TitleWithFallback] ?? "", k = g.fields[b.CortexPath] ?? "", M = k.endsWith("/") && k.length > 1 ? k.slice(0, -1) : k;
+              let j = M;
+              (O === P.Album || O === P.ProjectDocument) && (j = M ? `${M}/${R}` : R);
+              const Z = g.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,
+                isFontIcon: Z === void 0 ? void 0 : Z === "1",
+                representativeAssetId: g.fields[b.RepresentativeAssetId] ?? "",
+                title: R
+              };
+            }) ?? [],
+            hasMore: H + pe < S.totalCount,
+            totalCount: S.totalCount
+          };
+        }
+      ],
+      url: xe
+    })).data;
+  } catch {
+    return {
+      data: [],
+      hasMore: !1,
+      totalCount: 0
+    };
+  }
+}
+var C = /* @__PURE__ */ ((e) => (e.Input = "input", e.Select = "select", e))(C || {}), De = Object.defineProperty, _e = Object.getOwnPropertyDescriptor, c = (e, t, r, l) => {
+  for (var i = l > 1 ? void 0 : l ? _e(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 && De(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;
+  }
+  /**
+   * 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
+   */
+  createRenderRoot() {
+    return this;
+  }
+  async fetchFolders({
+    folderId: e,
+    start: t = 0
+  }) {
+    if (!this.api)
+      return {
+        data: [],
+        hasMore: !1,
+        totalCount: 0
+      };
+    try {
+      const { data: r, hasMore: l, totalCount: i } = await this.api({
+        baseUrl: this.baseUrl,
+        bearerToken: this.bearerToken,
+        excludeVirtualFolders: this.excludeVirtualFolders,
+        folderId: e,
+        start: t,
+        token: this.token
+      });
+      return {
+        data: r,
+        hasMore: l,
+        totalCount: i
+      };
+    } catch {
+      return {
+        data: [],
+        hasMore: !1,
+        totalCount: 0
+      };
+    }
+  }
+  async loadMore(e) {
+    e.stopPropagation();
+    const t = this.data?.length || 0;
+    this.loading = !0;
+    try {
+      const { data: r, hasMore: l } = await this.fetchFolders({
+        folderId: this.folderId,
+        start: t
+      });
+      this.data = [...this.data || [], ...r], this.hasMore = l, this.emit("cx-folder-select-children-loaded", { detail: { folders: r } });
+    } catch {
+    } finally {
+      this.loading = !1;
+    }
+  }
+  async handleLazyLoad(e) {
+    e.stopPropagation(), this.treeItem.expanded = !0;
+    const t = this.data?.length || 0;
+    try {
+      const { data: r, hasMore: l } = await this.fetchFolders({
+        folderId: this.folderId,
+        start: t
+      });
+      this.data = r, this.hasMore = l, this.emit("cx-folder-select-children-loaded", { detail: { folders: r } });
+    } catch {
+      this.treeItem.expanded = !1;
+    }
+  }
+  async syncBoxes() {
+    if (this.selection !== "multiple" || (await this.updateComplete, !this.treeItem))
+      return;
+    const e = this.fullPath, t = G({ id: this.folderId, path: e }), r = J(e), l = this.currentRootIDsSet.has(t);
+    let i = !1;
+    if (e)
+      for (const f of this.currentRootIDsSet) {
+        const $ = Se(f);
+        if (!$.path.trim() || !$.id.trim())
+          continue;
+        const T = J($.path);
+        if (T.startsWith(r) && T !== r) {
+          i = !0;
+          break;
+        }
+      }
+    const u = !l && i;
+    this.treeItem.selected = l, await this.treeItem.updateComplete, this.treeItem.indeterminate = u;
+  }
+  /**
+   * Resolves the icon to render, in priority order:
+   * 1. `icon` explicit override (unchanged legacy behavior; used by the
+   *    separate `extra-folder-icon` feature).
+   * 2. Server-resolved DocSubType image icon (`isFontIcon === false` and
+   *    `iconImageUrl` set).
+   * 3. Server-resolved DocSubType font icon (`isFontIcon !== false` and
+   *    `iconName` set).
+   * 4. Default folder icon, keeping the existing docType-driven variant.
+   */
+  renderIcon() {
+    const e = le(
+      this.iconColor ? { color: this.iconColor } : {}
+    );
+    if (!this.icon && this.isFontIcon === !1 && this.iconImageUrl)
+      return m`<cx-icon class="folder-select-tree__item__icon" src=${this.iconImageUrl} style=${e}></cx-icon>`;
+    if (!this.icon && this.isFontIcon !== !1 && this.iconName)
+      return m`<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";
+    return m`<cx-icon class="folder-select-tree__item__icon" name=${this.icon || "folder"} variant=${t}></cx-icon>`;
+  }
+  render() {
+    return m`<cx-tree-item class=${Te({
+      "folder-select-tree-item": !0
+    })} data-id=${this.folderId} data-url=${p(this.url)} data-name=${p(this.name?.trim() || void 0)} data-representative-asset-id=${p(
+      this.representativeAssetId || void 0
+    )} role="option" ?lazy=${this.hasChildren && this.data === null} ?selected=${this.selection !== "multiple" && this.selectedValue === this.folderId} ?disabled-sync-checkboxes=${this.selection === "multiple"} .selectable=${this.selectable} @cx-lazy-load=${this.handleLazyLoad}><cx-space class="folder-select-tree-item__label" direction="horizontal" spacing="x-small" align-items="center" wrap="nowrap">${this.renderIcon()}<cx-line-clamp lines="1" class="folder-select-tree-item__title">${Fe(this.name, this.searchTerm)}</cx-line-clamp></cx-space>${A(
+      this.data || [],
+      (e) => e.id,
+      (e) => m`<cx-folder-select-tree-item slot="children" folder-id=${e.id} full-path=${e.fullPath} name=${e.title} doc-type=${e.docType} icon-name=${p(e.iconName || void 0)} icon-image-url=${p(e.iconImageUrl || void 0)} icon-color=${p(e.iconColor || void 0)} representative-asset-id=${e.representativeAssetId} selected-value=${this.selectedValue} selection=${this.selection} token=${this.token} bearer-token=${this.bearerToken} ?exclude-virtual-folders=${this.excludeVirtualFolders} ?has-children=${e.hasChildren} ?is-font-icon=${e.isFontIcon} ?selectable=${this.selectable} base-url=${this.baseUrl} url=${p(e.url ?? void 0)} .api=${this.api} .currentRootIDsSet=${this.currentRootIDsSet} .removedIDs=${this.removedIDs} value=${e.url}></cx-folder-select-tree-item>`
+    )}
+        ${w(
+      this.hasMore,
+      () => m`<div slot="children" class="load-more-button"><cx-button variant="text" @click=${this.loadMore} ?loading=${this.loading}>${this.localize.term("more")}</cx-button></div>`
+    )}</cx-tree-item>`;
+  }
+};
+a.styles = [re];
+a.dependencies = {
+  "cx-button": ie,
+  "cx-icon": ee,
+  "cx-line-clamp": te,
+  "cx-space": Ie,
+  "cx-tree-item": v
+};
+c([
+  se("cx-tree-item")
+], a.prototype, "treeItem", 2);
+c([
+  s({ attribute: "folder-id", reflect: !0, type: String })
+], a.prototype, "folderId", 2);
+c([
+  s({ attribute: "has-children", reflect: !0, type: Boolean })
+], a.prototype, "hasChildren", 2);
+c([
+  s({ reflect: !0, type: Boolean })
+], a.prototype, "selectable", 2);
+c([
+  s({ attribute: "full-path", reflect: !0, type: String })
+], a.prototype, "fullPath", 2);
+c([
+  s({ attribute: "doc-type", reflect: !0, type: String })
+], a.prototype, "docType", 2);
+c([
+  s({ reflect: !0, type: String })
+], a.prototype, "name", 2);
+c([
+  s({
+    attribute: "representative-asset-id",
+    reflect: !0,
+    type: String
+  })
+], a.prototype, "representativeAssetId", 2);
+c([
+  s({ attribute: "selected-value", reflect: !0, type: String })
+], a.prototype, "selectedValue", 2);
+c([
+  s({ attribute: "selection", reflect: !0, type: String })
+], a.prototype, "selection", 2);
+c([
+  s({ attribute: !1, type: Object })
+], a.prototype, "currentRootIDsSet", 2);
+c([
+  s({ attribute: !1, type: Array })
+], a.prototype, "removedIDs", 2);
+c([
+  s({ reflect: !0, type: String })
+], a.prototype, "token", 2);
+c([
+  s({ attribute: "bearer-token", reflect: !0, type: String })
+], a.prototype, "bearerToken", 2);
+c([
+  s({ attribute: "base-url", reflect: !0, type: String })
+], a.prototype, "baseUrl", 2);
+c([
+  s({ attribute: "search-term", reflect: !0, type: String })
+], a.prototype, "searchTerm", 2);
+c([
+  s({ type: Function })
+], a.prototype, "api", 2);
+c([
+  s({
+    attribute: "exclude-virtual-folders",
+    reflect: !0,
+    type: Boolean
+  })
+], a.prototype, "excludeVirtualFolders", 2);
+c([
+  s({ reflect: !0, type: String })
+], a.prototype, "url", 2);
+c([
+  s({ reflect: !0, type: String })
+], a.prototype, "icon", 2);
+c([
+  s({ attribute: "icon-name", reflect: !0, type: String })
+], a.prototype, "iconName", 2);
+c([
+  s({ attribute: "icon-image-url", reflect: !0, type: String })
+], a.prototype, "iconImageUrl", 2);
+c([
+  s({ attribute: "icon-color", reflect: !0, type: String })
+], a.prototype, "iconColor", 2);
+c([
+  s({ attribute: "is-font-icon", reflect: !0, type: Boolean })
+], a.prototype, "isFontIcon", 2);
+c([
+  x()
+], a.prototype, "data", 2);
+c([
+  x()
+], a.prototype, "hasMore", 2);
+c([
+  x()
+], a.prototype, "loading", 2);
+c([
+  y("currentRootIDsSet"),
+  y("removedIDs"),
+  y("fullPath"),
+  y("folderId")
+], a.prototype, "syncBoxes", 1);
+a = c([
+  N("cx-folder-select-tree-item")
+], a);
+var ke = Object.defineProperty, we = Object.getOwnPropertyDescriptor, ae = (e) => {
+  throw TypeError(e);
+}, d = (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 && ke(t, r, i), i;
+}, oe = (e, t, r) => t.has(e) || ae("Cannot " + r), I = (e, t, r) => (oe(e, t, "read from private field"), t.get(e)), z = (e, t, r) => t.has(e) ? ae("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), K = (e, t, r, l) => (oe(e, t, "write to private field"), t.set(e, r), r), D, V, _;
+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.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());
+  }
+  get empty() {
+    return !this.loading && this.data.length === 0;
+  }
+  /**
+   * This is used to render the cx-tree inside the cx-folder-select without the shadow root so that the cx-folder-select can query select the cx-tree inside
+   */
+  createRenderRoot() {
+    return this;
+  }
+  computeInitialLimit() {
+    const t = this.getRootNode();
+    let r = t instanceof ShadowRoot ? t.host : this.parentElement;
+    for (; r; ) {
+      if (r instanceof HTMLElement && r.offsetHeight > 0)
+        return Math.max(10, Math.ceil(r.offsetHeight / 32) + 2);
+      const l = r.getRootNode();
+      r = l instanceof ShadowRoot ? l.host : r.parentElement;
+    }
+    return 10;
+  }
+  runFirstUpdated() {
+    this.searchTerm = "", this.autoPageSize && K(this, V, this.computeInitialLimit()), 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;
+  }
+  /**
+   * Update `currentRootIDsSet` from a tree-item's toggle. Per-folder
+   * selection: each folder is independent, so a click only adds/removes
+   * the clicked folder — never its ancestors or descendants. Parents
+   * showing an indeterminate hint is purely visual (computed in
+   * `cx-folder-select-tree-item.syncBoxes` from path-prefix matches),
+   * not a real selection.
+   *
+   * Only runs in multiple mode — single mode is still driven by `selectedValue`.
+   */
+  async handleSelectedChange(e) {
+    if (this.selection !== "multiple")
+      return;
+    const t = e.target, r = t.dataset.id ?? "", l = t.closest(
+      "cx-folder-select-tree-item"
+    )?.fullPath;
+    if (await t.updateComplete, !r.trim() || !l?.trim())
+      return;
+    const i = G({ id: r, path: l });
+    t.indeterminate && !t.selected || (t.selected ? this.currentRootIDsSet.add(i) : this.currentRootIDsSet.delete(i), this.currentRootIDsSet = new Set(this.currentRootIDsSet));
+  }
+  async loadMore(e) {
+    if (!this.api)
+      return;
+    e.stopPropagation();
+    const t = this.data.length;
+    this.loading = !0;
+    const { data: r, hasMore: l } = 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, ...r], this.hasMore = l, this.loading = !1, this.seedSelectionFromValue(r), this.removePreloadedFolders(r);
+  }
+  async handleFetchFolders() {
+    const { data: e, hasMore: t } = await this.fetchFolders();
+    I(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();
+  }
+  async handleSelectedValueChange() {
+    if (!I(this, D))
+      return;
+    const e = new Set(
+      this.selectedValue.split(/[\s,]+/).filter(Boolean)
+    ), t = this.preloadedFolders.filter((r) => e.has(r.id));
+    t.length !== this.preloadedFolders.length && (this.preloadedFolders = t), await this.preloadSelectedFolders();
+  }
+  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,
+      bearerToken: this.bearerToken,
+      excludeVirtualFolders: this.excludeVirtualFolders,
+      folderId: "",
+      limit: I(this, V),
+      searchTerm: this.searchTerm,
+      seeThru: this.seeThru,
+      start: 0,
+      token: this.token
+    });
+    return this.data = e, this.hasMore = t, this.loading = !1, {
+      data: e,
+      hasMore: t
+    };
+  }
+  handleChildrenLoaded(e) {
+    this.seedSelectionFromValue(e.detail.folders), this.removePreloadedFolders(e.detail.folders);
+  }
+  removePreloadedFolders(e) {
+    if (this.preloadedFolders.length === 0)
+      return;
+    const t = new Set(e.map((l) => l.id)), r = this.preloadedFolders.filter((l) => !t.has(l.id));
+    r.length !== this.preloadedFolders.length && (this.preloadedFolders = r);
+  }
+  async preloadSelectedFolders() {
+    if (this.selection !== "multiple" || !this.selectedValue || !this.api)
+      return;
+    const e = new Set(
+      this.selectedValue.split(/[\s,]+/).filter(Boolean)
+    ), t = /* @__PURE__ */ new Set([
+      ...this.data.map((i) => i.id),
+      ...this.extraFolderData ? [this.extraFolderData.id] : [],
+      ...this.preloadedFolders.map((i) => i.id),
+      ...I(this, _),
+      ...[
+        ...this.querySelectorAll(
+          "cx-folder-select-tree-item"
+        )
+      ].map((i) => i.getAttribute("folder-id") ?? "").filter(Boolean)
+    ]), r = [...e].filter(
+      (i) => !t.has(i)
+    );
+    if (r.length === 0)
+      return;
+    r.forEach((i) => I(this, _).add(i));
+    const l = [];
+    if (await Promise.all(
+      r.map(async (i) => {
+        try {
+          const { data: u } = await this.api({
+            baseUrl: this.baseUrl,
+            bearerToken: this.bearerToken,
+            excludeVirtualFolders: this.excludeVirtualFolders,
+            folderId: i,
+            includeDirectChild: !1,
+            limit: 1,
+            searchTerm: "",
+            seeThru: this.seeThru,
+            self: !0,
+            start: 0,
+            token: this.token
+          });
+          u[0] && l.push(u[0]);
+        } catch {
+        }
+      })
+    ), r.forEach((i) => I(this, _).delete(i)), 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)
+      ), this.seedSelectionFromValue(u));
+    }
+  }
+  seedSelectionFromValue(e) {
+    if (this.selection !== "multiple" || !this.selectedValue)
+      return;
+    const t = new Set(
+      this.selectedValue.split(/[\s,]+/).map((l) => l.trim()).filter(Boolean)
+    );
+    let r = !1;
+    for (const l of e)
+      if (l.fullPath && t.has(l.id)) {
+        const i = G({ id: l.id, path: l.fullPath });
+        this.currentRootIDsSet.has(i) || (this.currentRootIDsSet.add(i), r = !0);
+      }
+    r && (this.currentRootIDsSet = new Set(this.currentRootIDsSet), this.emit("cx-folder-select-selection-seeded"));
+  }
+  renderFolder(e) {
+    return m`<cx-folder-select-tree-item .api=${this.api} .currentRootIDsSet=${this.currentRootIDsSet} .removedIDs=${this.removedIDs} base-url=${this.baseUrl} doc-type=${e.docType} folder-id=${e.id} full-path=${p(e.fullPath ?? void 0)} icon-name=${p(e.iconName || void 0)} icon-image-url=${p(e.iconImageUrl || void 0)} icon-color=${p(e.iconColor || void 0)} name=${e.title} search-term=${this.searchTerm} selected-value=${this.selectedValue} selection=${this.selection} token=${this.token} bearer-token=${this.bearerToken} url=${p(e.url ?? void 0)} ?has-children=${e.hasChildren} ?is-font-icon=${e.isFontIcon} ?selectable=${this.selection === "multiple"} ?exclude-virtual-folders=${this.excludeVirtualFolders}></cx-folder-select-tree-item>`;
+  }
+  render() {
+    return m`<cx-tree class="folder-select-tree" selection=${this.selection} force-on-change disabled-auto-expand disabled-sync-checkboxes @cx-selected-change=${this.handleSelectedChange} @cx-folder-select-children-loaded=${this.handleChildrenLoaded}>${w(
+      this.empty,
+      () => m`<div class="folder-select-tree__empty-message" role="status" aria-live="polite"><cx-typography variant="body3">${this.localize.term("noResults")}</cx-typography></div>`
+    )}
+      ${w(
+      this.extraFolderData,
+      () => m`<cx-folder-select-tree-item .api=${this.api} .currentRootIDsSet=${this.currentRootIDsSet} .removedIDs=${this.removedIDs} base-url=${this.baseUrl} doc-type=${p(this.extraFolderData?.docType ?? void 0)} folder-id=${p(this.extraFolderData?.id ?? void 0)} full-path=${p(this.extraFolderData?.fullPath ?? void 0)} icon=${this.extraFolderIcon} icon-name=${p(this.extraFolderData?.iconName || void 0)} icon-image-url=${p(
+        this.extraFolderData?.iconImageUrl || void 0
+      )} icon-color=${p(this.extraFolderData?.iconColor || void 0)} name=${this.extraFolderTitle || this.extraFolderData?.title} search-term=${this.searchTerm} selected-value=${this.selectedValue} selection=${this.selection} token=${this.token} bearer-token=${this.bearerToken} url=${p(this.extraFolderData?.url ?? void 0)} ?has-children=${this.extraFolderData?.hasChildren} ?is-font-icon=${this.extraFolderData?.isFontIcon} ?selectable=${this.selection === "multiple"} ?exclude-virtual-folders=${this.excludeVirtualFolders}></cx-folder-select-tree-item>`
+    )}
+      ${A(
+      this.data,
+      (e) => e.id,
+      (e) => this.renderFolder(e)
+    )}
+      ${w(
+      this.hasMore,
+      () => m`<cx-button class="folder-select-tree__load-more" variant="text" @click=${this.loadMore} ?loading=${this.loading}>${this.localize.term("more")}</cx-button>`
+    )}</cx-tree>${A(
+      this.preloadedFolders,
+      (e) => `preloaded-${e.id}`,
+      (e) => m`<cx-folder-select-tree-item style=${le({ display: "none" })} .api=${this.api} .currentRootIDsSet=${this.currentRootIDsSet} .removedIDs=${this.removedIDs} base-url=${this.baseUrl} doc-type=${e.docType} folder-id=${e.id} full-path=${p(e.fullPath ?? void 0)} icon-name=${p(e.iconName || void 0)} icon-image-url=${p(e.iconImageUrl || void 0)} icon-color=${p(e.iconColor || void 0)} name=${e.title} search-term=${this.searchTerm} selected-value=${this.selectedValue} selection=${this.selection} token=${this.token} bearer-token=${this.bearerToken} url=${p(e.url ?? void 0)} ?has-children=${!1} ?is-font-icon=${e.isFontIcon} ?selectable=${this.selection === "multiple"} ?exclude-virtual-folders=${this.excludeVirtualFolders}></cx-folder-select-tree-item>`
+    )}`;
+  }
+};
+D = /* @__PURE__ */ new WeakMap();
+V = /* @__PURE__ */ new WeakMap();
+_ = /* @__PURE__ */ new WeakMap();
+n.dependencies = {
+  "cx-button": ie,
+  "cx-folder-select-tree-item": a,
+  "cx-tree": ye
+};
+d([
+  s({ attribute: "min-query-length", reflect: !0, type: Number })
+], n.prototype, "minQueryLength", 2);
+d([
+  s({ attribute: "selection", reflect: !0, type: String })
+], n.prototype, "selection", 2);
+d([
+  s({ attribute: "search-term", reflect: !0, type: String })
+], n.prototype, "searchTerm", 2);
+d([
+  s({ attribute: "selected-value", reflect: !0, type: String })
+], n.prototype, "selectedValue", 2);
+d([
+  s({ reflect: !0, type: String })
+], n.prototype, "token", 2);
+d([
+  s({ attribute: "bearer-token", reflect: !0, type: String })
+], n.prototype, "bearerToken", 2);
+d([
+  s({ attribute: "base-url", reflect: !0, type: String })
+], n.prototype, "baseUrl", 2);
+d([
+  s({ attribute: "extra-folder-id", reflect: !0, type: String })
+], n.prototype, "extraFolderId", 2);
+d([
+  s({ attribute: "extra-folder-title", reflect: !0, type: String })
+], n.prototype, "extraFolderTitle", 2);
+d([
+  s({ attribute: "extra-folder-icon", reflect: !0, type: String })
+], n.prototype, "extraFolderIcon", 2);
+d([
+  s({ attribute: "see-thru", reflect: !0, type: Boolean })
+], n.prototype, "seeThru", 2);
+d([
+  x()
+], n.prototype, "extraFolderData", 2);
+d([
+  s({ type: Function })
+], n.prototype, "api", 2);
+d([
+  s({
+    attribute: "exclude-virtual-folders",
+    reflect: !0,
+    type: Boolean
+  })
+], n.prototype, "excludeVirtualFolders", 2);
+d([
+  s({ attribute: "first-fetch-callback", reflect: !1, type: Function })
+], n.prototype, "firstFetchCallback", 2);
+d([
+  s({ attribute: "auto-page-size", reflect: !0, type: Boolean })
+], n.prototype, "autoPageSize", 2);
+d([
+  x()
+], n.prototype, "data", 2);
+d([
+  x()
+], n.prototype, "hasMore", 2);
+d([
+  x()
+], n.prototype, "loading", 2);
+d([
+  x()
+], n.prototype, "preloadedFolders", 2);
+d([
+  x()
+], n.prototype, "currentRootIDsSet", 2);
+d([
+  x()
+], n.prototype, "removedIDs", 2);
+d([
+  y("extraFolderId")
+], n.prototype, "handleExtraFolderIdChange", 1);
+d([
+  y("baseUrl", { waitUntilFirstUpdate: !0 }),
+  y("token", { waitUntilFirstUpdate: !0 }),
+  y("searchTerm", { waitUntilFirstUpdate: !0 }),
+  y("excludeVirtualFolders", { waitUntilFirstUpdate: !0 }),
+  ve(500)
+], n.prototype, "handleFetchFolders", 1);
+d([
+  y("selectedValue", { waitUntilFirstUpdate: !0 })
+], n.prototype, "handleSelectedValueChange", 1);
+n = d([
+  N("cx-folder-select-tree")
+], n);
+const Ve = be`: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, Ue = Object.getOwnPropertyDescriptor, ne = (e) => {
+  throw TypeError(e);
+}, h = (e, t, r, l) => {
+  for (var i = l > 1 ? void 0 : l ? Ue(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 && Pe(t, r, i), i;
+}, ce = (e, t, r) => t.has(e) || ne("Cannot " + r), X = (e, t, r) => (ce(e, t, "read from private field"), r ? r.call(e) : t.get(e)), Ee = (e, t, r) => t.has(e) ? ne("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), Y = (e, t, r, l) => (ce(e, t, "write to private field"), t.set(e, r), r), F;
+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.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 = "", Ee(this, F), 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, F, void 0);
+      return;
+    }
+    Y(this, F, async (e) => {
+      try {
+        return await this.api(e);
+      } catch (t) {
+        return t instanceof ge && 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
+      }
+    });
+  }
+  handleSearchTermInputChange(e) {
+    this.searchTerm = e.target.value;
+  }
+  handleSearchTermSelectChange(e) {
+    e.target === e.currentTarget && (this.searchTerm = e.currentTarget.displayInput.value);
+  }
+  handleSelectClear() {
+    if (this.searchTerm = "", this.selection !== "multiple")
+      return;
+    const e = this.shadowRoot?.querySelector("cx-folder-select-tree");
+    e && (e.currentRootIDsSet = /* @__PURE__ */ new Set(), e.removedIDs = []);
+  }
+  /**
+   * cx-select's own `value` only reflects our `value` correctly the very
+   * first time it parses the initial `value` attribute. Any
+   * `handleDefaultSlotChange()` call that runs before matching tree-items
+   * exist (e.g. right after mount, before the tree has fetched/preloaded
+   * folders) makes cx-select recompute `selectedOptions` from zero matches
+   * and overwrite its own `value` to `[]` (`selectionChanged` in
+   * select.ts) — permanently losing the original folder ids, since nothing
+   * else ever pushes `value` back into cx-select afterwards. Re-derive
+   * cx-select.value from our own `value` (the real source of truth) before
+   * every `handleDefaultSlotChange()` call so that wipe never sticks.
+   */
+  syncSelectValue() {
+    this.selectEl && (this.selectEl.value = this.selection === "multiple" ? this.value.split(/[\s,]+/).filter(Boolean) : this.value);
+  }
+  /**
+   * cx-select's selectedOptions cache (which drives the tag UI in
+   * `multiple` mode) is only recomputed during its own `selectionChanged`
+   * flow — that flow doesn't run in our setup because we no-op
+   * `selectSetOptionSelected` for multi-select (cx-tree owns selection).
+   * Re-read options here so the rendered tag list matches, in response to
+   * either signal cx-folder-select-tree can emit:
+   * - `cx-selected-change`, bubbled from a user toggling a tree-item.
+   * - `cx-folder-select-selection-seeded`, emitted when selection is derived
+   *   from `value` during data loading/preloading — those tree-items never
+   *   emit a real `cx-selected-change` themselves (suppressed on their own
+   *   first update), so this is the only signal for that case.
+   */
+  async handleTreeSelectedChange() {
+    this.selection !== "multiple" || !this.selectEl || (await new Promise(
+      (e) => requestAnimationFrame(() => e())
+    ), 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;
+  }
+  selectGetOptionLabel(e) {
+    return !e || !(e instanceof v) ? this.selectedLabel : e.dataset.name || this.selectedLabel;
+  }
+  selectGetOptionSelected(e) {
+    if (!(!e || !(e instanceof v)))
+      return e.selected;
+  }
+  selectFilterCallback(e) {
+    return !(!e || !(e instanceof v));
+  }
+  /**
+   * Custom tag renderer for cx-select multi mode. Identical visuals to the
+   * default tag, but the X click goes through cx-tree's selection flow
+   * (`option.selected = false` → `cx-selected-change` →
+   * cx-folder-select-tree.handleSelectedChange) rather than
+   * cx-select.toggleOptionSelection (which our `selectSetOptionSelected`
+   * no-ops in multi mode, so the default X click would do nothing).
+   */
+  selectGetTag(e) {
+    return m`<cx-tag part="tag" exportparts="
+          base:tag__base,
+          content:tag__content,
+          remove-button:tag__remove-button,
+          remove-button__base:tag__remove-button__base
+        " removable @cx-remove=${(r) => {
+      r.stopPropagation(), e instanceof v && (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 (t === void 0) {
+        e.selected = !e.selected;
+        return;
+      }
+      e.selected = t;
+    }
+  }
+  updateFunctionProps() {
+    this.selectEl && (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());
+  }
+  handleOpenChange() {
+    if (this.selectEl) {
+      if (!this.open) {
+        this.selectEl.hide();
+        return;
+      }
+      this.updateFunctionProps();
+    }
+  }
+  async handleVariantChange() {
+    this.variant === C.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());
+  }
+  render() {
+    return m`<div class="folder-select">${$e(this.variant, [
+      [
+        C.Input,
+        () => m`<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} .api=${X(this, F)} .firstFetchCallback=${this.firstFetchCallback}></cx-folder-select-tree>`
+      ],
+      [
+        C.Select,
+        () => m`<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} .api=${X(this, F)} .firstFetchCallback=${this.firstFetchCallback}></cx-folder-select-tree></cx-select>`
+      ]
+    ])}</div>`;
+  }
+};
+F = /* @__PURE__ */ new WeakMap();
+o.styles = [re, Ve];
+o.dependencies = {
+  "cx-folder-select-tree": n,
+  "cx-icon": ee,
+  "cx-input": ue,
+  "cx-line-clamp": te,
+  "cx-select": fe,
+  "cx-tag": me
+};
+h([
+  se("cx-select")
+], o.prototype, "selectEl", 2);
+h([
+  s({ attribute: "min-query-length", reflect: !0, type: Number })
+], o.prototype, "minQueryLength", 2);
+h([
+  s({ attribute: "selection", reflect: !0, type: String })
+], o.prototype, "selection", 2);
+h([
+  s({ attribute: "variant", reflect: !0, type: String })
+], o.prototype, "variant", 2);
+h([
+  s({ reflect: !0, type: String })
+], o.prototype, "value", 2);
+h([
+  s({ reflect: !0, type: String })
+], o.prototype, "name", 2);
+h([
+  s({ attribute: "selected-label", reflect: !0, type: String })
+], o.prototype, "selectedLabel", 2);
+h([
+  s({ attribute: "base-url", reflect: !0, type: String })
+], o.prototype, "baseUrl", 2);
+h([
+  s({ reflect: !0, type: Boolean })
+], o.prototype, "open", 2);
+h([
+  s({ reflect: !1, type: String })
+], o.prototype, "token", 2);
+h([
+  s({ attribute: "bearer-token", reflect: !0, type: String })
+], o.prototype, "bearerToken", 2);
+h([
+  s({ attribute: "see-thru", reflect: !0, type: Boolean })
+], o.prototype, "seeThru", 2);
+h([
+  s({ type: Function })
+], o.prototype, "api", 2);
+h([
+  s({ reflect: !0, type: Boolean })
+], o.prototype, "required", 2);
+h([
+  s({ reflect: !1 })
+], o.prototype, "form", 2);
+h([
+  s({
+    attribute: "exclude-virtual-folders",
+    reflect: !0,
+    type: Boolean
+  })
+], o.prototype, "excludeVirtualFolders", 2);
+h([
+  s({
+    attribute: "extra-folder-id",
+    reflect: !0,
+    type: String
+  })
+], o.prototype, "extraFolderId", 2);
+h([
+  s({
+    attribute: "extra-folder-title",
+    reflect: !0,
+    type: String
+  })
+], o.prototype, "extraFolderTitle", 2);
+h([
+  s({
+    attribute: "extra-folder-icon",
+    reflect: !0,
+    type: String
+  })
+], o.prototype, "extraFolderIcon", 2);
+h([
+  s({ attribute: "auto-page-size", reflect: !0, type: Boolean })
+], o.prototype, "autoPageSize", 2);
+h([
+  s({ attribute: "first-fetch-callback", reflect: !1, type: Function })
+], o.prototype, "firstFetchCallback", 2);
+h([
+  x()
+], o.prototype, "searchTerm", 2);
+h([
+  y("api")
+], o.prototype, "updateWrappedApi", 1);
+h([
+  y("searchTerm", { waitUntilFirstUpdate: !0 })
+], o.prototype, "handleSearchTermChange", 1);
+h([
+  y("open")
+], o.prototype, "handleOpenChange", 1);
+h([
+  y("variant")
+], o.prototype, "handleVariantChange", 1);
+h([
+  y("selectedLabel", { waitUntilFirstUpdate: !0 }),
+  y("value", { waitUntilFirstUpdate: !0 })
+], o.prototype, "handleValueChange", 1);
+o = h([
+  N("cx-folder-select")
+], o);
+export {
+  o as C,
+  C as F,
+  q as a
+};