@orangelogic/design-system 2.78.0 → 2.79.0-ci.2

package/library/chunks/file-on-demand.BTTdth3o.js

@@ -1,3802 +0,0 @@
-import J from "../components/icon.js";
-import Q from "../components/line-clamp.js";
-import { C as yt, s as bt, a as $t, b as lt } from "./tree.OXvhEOjS.js";
-import { n as d, C as H } from "./lib-cortex-element.CVMmyPMC.js";
-import { c as tt } from "./component.styles.DMSLciL5.js";
-import { c as W } from "./custom-element.L4WJXn1j.js";
-import { L as q } from "./i18n.BUW7B9hr.js";
-import { k as zt, h as St, i as wt, w as P, j as Et, l as Lt, f as Ft, g as Ut, d as Rt, m as kt, n as Ot } from "./watch.BCJD77bD.js";
-import { p as R } from "./string.B_rEG27K.js";
-import { x as n, i as at, E as Nt } from "./lit-element.jLBm65_O.js";
-import { r as u } from "./state.CSDxrqLd.js";
-import { e as z } from "./query.BBf1UFkC.js";
-import { e as C } from "./class-map.BiVq-cVR.js";
-import { c as U } from "./repeat.DbF2p5ae.js";
-import { n as p } from "./when.Dr1es41R.js";
-import { a as jt, i as It, c as Bt, b as dt } from "./_baseUniq.BUihBa8c.js";
-import Mt from "../components/avatar.js";
-import { C as Vt } from "./button.DS64Tr8Z.js";
-import { C as Ht } from "./dialog.BdXQkCKY.js";
-import Wt from "../components/divider.js";
-import ot from "../components/format-bytes.js";
-import { C as Ct } from "./icon-button.C3eqeQl9.js";
-import qt from "../components/input.js";
-import { C as Gt } from "./option.Csqefux_.js";
-import At from "../components/relative-time.js";
-import Yt from "../components/select.js";
-import Kt from "../components/space.js";
-import Xt from "../components/tab.js";
-import { C as Zt } from "./tab-group.Dg6a82ei.js";
-import Jt from "../components/tab-panel.js";
-import Dt from "../components/tooltip.js";
-import { C as nt } from "./typography.oDzoLbZS.js";
-import { C as Qt } from "./confirm-popover.BNjRvnN0.js";
-import { d as te } from "./debounce.DaHuiSGU.js";
-import { a as et } from "./number.CjNxU7Xs.js";
-import { i as K, a as ht } from "./url.Cj9cIQXJ.js";
-import { a as ee } from "./toString.CL_lYXbK.js";
-import { S as pt, i as se } from "./isObjectLike.z36Fu426.js";
-import ie from "../components/progress-bar.js";
-import ae from "../components/spinner.js";
-import { o as oe } from "./style-map.llVFPd__.js";
-import { r as ne } from "./choose.BTbF6BAn.js";
-function re(t, e, i, a) {
-  for (var s = -1, o = t == null ? 0 : t.length; ++s < o; ) {
-    var c = t[s];
-    e(a, c, i(c), t);
-  }
-  return a;
-}
-function ce(t) {
-  return function(e, i, a) {
-    for (var s = -1, o = Object(e), c = a(e), h = c.length; h--; ) {
-      var _ = c[++s];
-      if (i(o[_], _, o) === !1)
-        break;
-    }
-    return e;
-  };
-}
-var le = ce();
-function de(t, e) {
-  return t && le(t, e, zt);
-}
-function he(t, e) {
-  return function(i, a) {
-    if (i == null)
-      return i;
-    if (!St(i))
-      return t(i, a);
-    for (var s = i.length, o = -1, c = Object(i); ++o < s && a(c[o], o, c) !== !1; )
-      ;
-    return i;
-  };
-}
-var pe = he(de);
-function ue(t, e, i, a) {
-  return pe(t, function(s, o, c) {
-    e(a, s, i(s), c);
-  }), a;
-}
-function ge(t, e) {
-  return function(i, a) {
-    var s = wt(i) ? re : ue, o = e ? e() : {};
-    return s(i, t, jt(a), o);
-  };
-}
-var xe = ge(function(t, e, i) {
-  t[i ? 0 : 1].push(e);
-}, function() {
-  return [[], []];
-});
-const me = {
-  error: "Upload error",
-  loaded: "Up-to-date",
-  loading: "Syncing"
-}, x = {
-  FAVORITES: "favorites",
-  PINNED: "pinned",
-  RECENT: "recent",
-  UPLOADS: "uploads"
-}, X = 20, _e = {
-  GET_CONTENT: "/webapi/extensibility/integrations/contentBrowserSDK/getcontent_4bw_v1"
-}, A = {
-  ASSET_PATH: "Document.AssetPath",
-  CHILD_COUNT: "Document.ChildCount",
-  CORTEX_PATH: "Document.CortexPath",
-  DOC_TYPE: "CoreField.DocType",
-  HAS_BROWSER_CHILDREN: "Document.HasBrowserChildren",
-  PARENT_FOLDER_IDENTIFIER: "Document.ParentRecordID",
-  TITLE_WITH_FALLBACK: "CoreField.TitleWithFallback"
-}, Z = "GB", O = 6e4, fe = ["album", "story", "project", "merchandise"], ut = (t) => {
-  const e = /* @__PURE__ */ new Date(), i = new Date(
-    e.getFullYear(),
-    e.getMonth(),
-    e.getDate()
-  ).getTime(), a = new Date(
-    e.getFullYear(),
-    e.getMonth(),
-    e.getDate() + 1
-  ).getTime();
-  return xe(
-    t.toSorted((s, o) => o.uploadTimestamp - s.uploadTimestamp),
-    (s) => s.uploadTimestamp >= i && s.uploadTimestamp < a
-  );
-}, ve = ({
-  excludesRecordIDs: t,
-  searchText: e
-}) => {
-  let i = "";
-  e?.trim() && (i = `Story_Title:${e}`);
-  let a = "";
-  t?.length && (a = t.map((o) => `RecordID:NOT ${o}`).join(" AND "));
-  let s = i ? ` AND (${[i].filter(Boolean).join(" OR ")})` : "";
-  return a && (s = `${s} AND (${a})`), `(MediaType:Story OR MediaType:Album)${s}`;
-}, ye = 10, Tt = async ({
-  excludes: t = [],
-  folderId: e,
-  folderPath: i = [],
-  folderPathsSet: a,
-  limit: s = ye,
-  searchText: o,
-  seeThru: c,
-  siteUrl: h,
-  start: _ = 0,
-  token: m
-}) => {
-  if (!h)
-    return { data: [], totalCount: 0 };
-  let g = h;
-  g.endsWith("/") && (g = g.slice(0, -1));
-  const $ = _e.GET_CONTENT, f = [
-    ["Token", m],
-    [
-      "extraFilters",
-      ve({
-        excludesRecordIDs: t,
-        searchText: o
-      })
-    ],
-    ["fields", A.ASSET_PATH],
-    ["fields", A.CORTEX_PATH],
-    ["fields", A.DOC_TYPE],
-    ["fields", A.TITLE_WITH_FALLBACK],
-    ["fields", A.HAS_BROWSER_CHILDREN],
-    ["fields", A.PARENT_FOLDER_IDENTIFIER],
-    ["fields", A.CHILD_COUNT],
-    ["objectRecordID", e],
-    ["seeThru", o?.trim() || c ? "true" : "false"],
-    ["limit", s.toString()],
-    ["start", _.toString()]
-  ], F = new URL(`${g}${$}`);
-  f.forEach(([I, E]) => {
-    F.searchParams.append(I, E);
-  });
-  const k = await fetch(F.toString(), {
-    headers: {
-      Authorization: `Bearer ${m}`
-    },
-    method: "GET"
-  });
-  if (!k.ok) {
-    const I = new Error();
-    throw I.message = "Failed to fetch", I;
-  }
-  const G = await k.json();
-  let Y = /* @__PURE__ */ new Set();
-  a && (Y = Se(a));
-  const rt = G.contentItems?.map((I) => {
-    let E = M(
-      I.fields,
-      A.TITLE_WITH_FALLBACK
-    ) ?? "", B = $e(
-      (M(
-        I.fields,
-        A.ASSET_PATH
-      ) ?? "").replace(/^Root\//i, "")
-    ) || E;
-    if (a) {
-      if (a.has(B)) {
-        const ct = B.split("/"), Pt = ct.pop();
-        B = `${ct.join("/")}/${I.recordID}-${Pt}`, E = `${I.recordID}-${E}`;
-      }
-      o?.trim() && Y.has(E) && (E = B), a.add(B), Y.add(E);
-    }
-    return {
-      childCount: Number(
-        M(
-          I.fields,
-          A.CHILD_COUNT
-        ) ?? 0
-      ),
-      children: [],
-      docType: M(
-        I.fields,
-        A.DOC_TYPE
-      ) ?? "",
-      fullPath: B,
-      hasChildren: M(
-        I.fields,
-        A.HAS_BROWSER_CHILDREN
-      ) === "1",
-      id: I.recordID,
-      parentFolderIdentifier: M(
-        I.fields,
-        A.PARENT_FOLDER_IDENTIFIER
-      ) ?? "",
-      parents: [],
-      path: [...i, E],
-      title: E
-    };
-  }) ?? [];
-  return { data: rt, totalCount: G.totalCount ?? rt.length };
-};
-function M(t, e) {
-  const i = e.toLowerCase(), a = Object.keys(t).find(
-    (s) => s.toLowerCase() === i
-  );
-  return a ? t[a] : void 0;
-}
-const it = "-", S = (t) => {
-  const e = t.split(it), i = e.pop() ?? "", a = e.join(it);
-  return { id: i, path: a };
-}, N = ({ id: t, path: e }) => [e, t].join(it), be = (t) => {
-  const e = t.split(".");
-  return e.length > 1 ? e.pop() ?? "" : "";
-}, gt = (t) => {
-  const e = t.match(/(?:V\.?)?(\d+(?:\.\d+)*)/);
-  return e ? e[1] : "";
-}, xt = (t, e) => {
-  let i = e?.trim();
-  const a = e ? e.split("/").length : 0;
-  return (t ? t.length : 0) >= a && (i = t.join("/") ?? ""), i;
-}, $e = (t) => t.split("/").map((e) => e.trim()).join("/"), Se = (t) => {
-  const e = /* @__PURE__ */ new Set();
-  for (const i of t) {
-    const a = i.split("/"), s = a[a.length - 1];
-    s && e.add(s);
-  }
-  return e;
-}, we = (t, e) => {
-  const i = t.split("/"), a = e.split("/");
-  return i.slice(0, a.length + 1).join("/");
-};
-function mt(t) {
-  return t.toSorted((e, i) => i.uploadTimestamp - e.uploadTimestamp);
-}
-var Ie = Object.defineProperty, Ce = Object.getOwnPropertyDescriptor, D = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? Ce(e, i) : e, o = t.length - 1, c; o >= 0; o--)
-    (c = t[o]) && (s = (a ? c(e, i, s) : c(s)) || s);
-  return a && s && Ie(e, i, s), s;
-};
-let y = class extends H {
-  constructor() {
-    super(...arguments), this.localize = new q(this), this.role = "treeitem", this.siteUrl = "", this.token = "", this.searchText = "", this.folder = null, this.currentRootIDsSet = /* @__PURE__ */ new Set(), this.folderPathsSet = /* @__PURE__ */ new Set(), this.removedIDs = [], this.data = null, this.totalCount = 0, this.isLoading = !1, this.fetchFolders = async ({
-      folderId: t,
-      start: e = 0
-    }) => await Tt({
-      folderId: t,
-      folderPath: this.folder?.path ?? [],
-      folderPathsSet: this.folderPathsSet,
-      siteUrl: this.siteUrl,
-      start: e,
-      token: this.token
-    }), this.loadMore = async (t) => {
-      t?.stopPropagation();
-      const e = this.data?.length ?? 0;
-      if (e >= this.totalCount)
-        return;
-      this.isLoading = !0;
-      const { data: i, totalCount: a } = await this.fetchFolders({
-        folderId: this.folder?.id ?? "",
-        start: e
-      });
-      this.data = [...this.data ?? [], ...i], this.totalCount = a, this.isLoading = !1;
-    }, this.onLazyLoad = async (t) => {
-      if (t.target !== this.treeItem)
-        return;
-      const { data: e, totalCount: i } = await this.fetchFolders({
-        folderId: this.folder?.id ?? ""
-      });
-      if (this.data = e, this.totalCount = i, await this.updateComplete, !this.treeItem.selected && !this.treeItem.indeterminate) {
-        let a = !0, s = !0;
-        for (const o of this.treeItem.getChildrenItems())
-          o.selected ? (bt(o, !0, "multiple"), s = !1) : a = !1;
-        this.treeItem.indeterminate = !a && !s;
-      }
-    };
-  }
-  get selected() {
-    return this.treeItem.selected;
-  }
-  set selected(t) {
-    this.treeItem.selected = t;
-  }
-  get expanded() {
-    return this.treeItem.expanded;
-  }
-  set expanded(t) {
-    this.treeItem.expanded = t;
-  }
-  get indeterminate() {
-    return this.treeItem.indeterminate;
-  }
-  set indeterminate(t) {
-    this.treeItem.indeterminate = t;
-  }
-  // this is so that external cx-tree can query select the cx-tree-item inside
-  createRenderRoot() {
-    return this;
-  }
-  getChildrenItems() {
-    return this.treeItem.getChildrenItems();
-  }
-  async syncBoxes() {
-    if (await this.updateComplete, !this.treeItem)
-      return;
-    let t = !1;
-    const e = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), a = xt(this.folder?.path ?? [], this.folder?.fullPath ?? ""), s = [...this.currentRootIDsSet], o = (m, g) => {
-      m.forEach(($) => {
-        const f = S($);
-        if (!f.path.trim() || !f.id.trim())
-          return !1;
-        const F = R(f.path), k = R(a);
-        a && F.startsWith(k) && F !== k && g.add(we(f.path, a));
-      });
-    };
-    o(this.removedIDs, i), o(s, e);
-    let c = !!s.some((m) => {
-      const g = S(m);
-      if (!g.path.trim() || !g.id.trim())
-        return !1;
-      const $ = N({
-        id: this.folder?.id ?? "",
-        path: a
-      }), f = R(g.path), F = R(a), k = g.id === this.folder?.id, G = !this.removedIDs.includes($) && F.startsWith(f);
-      return k || G;
-    });
-    const h = this.folder?.childCount && e.size === this.folder?.childCount;
-    if (this.folder?.childCount && i.size === this.folder?.childCount) {
-      this.currentRootIDsSet.delete(
-        N({
-          id: this.folder?.id ?? "",
-          path: a
-        })
-      );
-      const m = this.parentElement?.parentElement;
-      m && m instanceof y && m.syncBoxes(), c = !1;
-    } else if (!c)
-      if (h) {
-        this.currentRootIDsSet.add(
-          N({
-            id: this.folder?.id ?? "",
-            path: a
-          })
-        );
-        const m = this.parentElement?.parentElement;
-        m && m instanceof y && m.syncBoxes(), c = !0;
-      } else e.size > 0 && (t = !0);
-    c ? (t = i.size > 0, this.treeItem.selected = !0) : (t = e.size > 0, this.treeItem.selected = !1, await this.treeItem.updateComplete), t ? (this.treeItem.selected = !1, await this.treeItem.updateComplete, this.treeItem.indeterminate = !0) : this.treeItem.indeterminate = !1;
-  }
-  render() {
-    const t = xt(this.folder?.path ?? [], this.folder?.fullPath ?? "");
-    return n`
-      <cx-tree-item
-        aria-label=${this.folder?.title ?? ""}
-        class=${C({
-      "folder-tree__item": !0,
-      selectable: !0
-    })}
-        data-id=${this.folder?.id}
-        data-path=${t}
-        ?lazy=${this.folder?.hasChildren && this.data === null}
-        @cx-lazy-load=${this.onLazyLoad}
-      >
-        <div class="folder-tree__label">
-          <cx-icon class="folder-tree__icon" name="folder"></cx-icon>
-          <cx-line-clamp lines="1" class="folder-tree__label__value">
-            ${this.folder?.title}
-          </cx-line-clamp>
-        </div>
-        ${U(
-      this.data ?? [],
-      (e) => e.id,
-      (e) => n`<cx-folder-item
-              slot="children"
-              .folder=${e}
-              .siteUrl=${this.siteUrl}
-              .token=${this.token}
-              .removedIDs=${this.removedIDs}
-              .currentRootIDsSet=${this.currentRootIDsSet}
-              .folderPathsSet=${this.folderPathsSet}
-            ></cx-folder-item>`
-    )}
-        ${p(
-      this.data && this.data.length < this.totalCount,
-      () => n`
-            <div slot="children" class="load-more-button">
-              <cx-button
-                data-testid="load-more-button"
-                variant="text"
-                @click=${this.loadMore}
-                ?loading=${this.isLoading}
-              >
-                ${this.localize.term("more")}
-              </cx-button>
-            </div>
-          `
-    )}
-      </cx-tree-item>
-    `;
-  }
-};
-y.styles = [tt];
-y.dependencies = {
-  "cx-icon": J,
-  "cx-line-clamp": Q,
-  "cx-tree-item": yt
-};
-D([
-  z("cx-tree-item")
-], y.prototype, "treeItem", 2);
-D([
-  d({
-    attribute: "site-url",
-    reflect: !0,
-    type: String
-  })
-], y.prototype, "siteUrl", 2);
-D([
-  d({ reflect: !0, type: String })
-], y.prototype, "token", 2);
-D([
-  d({ attribute: "search-text", reflect: !0, type: String })
-], y.prototype, "searchText", 2);
-D([
-  d({ type: Object })
-], y.prototype, "folder", 2);
-D([
-  d({
-    attribute: "current-root-ids-set",
-    type: Object
-  })
-], y.prototype, "currentRootIDsSet", 2);
-D([
-  d({ attribute: "folder-paths-set", type: Object })
-], y.prototype, "folderPathsSet", 2);
-D([
-  d({
-    attribute: "removed-ids",
-    converter: {
-      fromAttribute: (t) => t.split(" "),
-      toAttribute: (t) => t.join(" ")
-    },
-    type: String
-  })
-], y.prototype, "removedIDs", 2);
-D([
-  u()
-], y.prototype, "data", 2);
-D([
-  u()
-], y.prototype, "totalCount", 2);
-D([
-  u()
-], y.prototype, "isLoading", 2);
-D([
-  P(["currentRootIDsSet", "removedIDs"])
-], y.prototype, "syncBoxes", 1);
-y = D([
-  W("cx-folder-item")
-], y);
-const Ae = at`
-  .folder-tree {
-    overflow: auto;
-    flex: 1;
-  }
-
-  .folder-tree:not(.selectable) {
-    max-height: 200px;
-  }
-
-  .folder-tree__item::part(label) {
-    width: 100%;
-    overflow: hidden;
-  }
-
-  .folder-tree__icon {
-    font-size: var(--cx-font-size-large);
-    color: var(--cx-color-neutral-600);
-  }
-
-  .folder-tree__label {
-    display: flex;
-    width: 100%;
-    overflow: hidden;
-    gap: var(--cx-spacing-x-small);
-    line-height: var(--cx-line-height-medium);
-  }
-
-  .folder-tree__label__value {
-    flex-grow: 1;
-    flex-shrink: 1;
-    overflow: hidden;
-    --tooltip-max-width: min(80vw, 640px);
-  }
-
-  /**
-   * align load more button with the folder tree item
-   * 1em = .tree-item__indentation's width
-   * var(--cx-spacing-x-small) = .tree-item__item's padding-left
-   * 1rem = .tree-item__expand-button's width
-   * var(--cx-spacing-x-small) * 2 = .tree-item__expand-button's padding-left and padding-right
-   */
-  .load-more-button {
-    margin-left: calc(
-      1em + var(--cx-spacing-x-small) + 1rem + var(--cx-spacing-x-small) * 2
-    );
-  }
-
-  /**
-   * reset line-height so as not to be affected by nested "em" units inside folder-tree
-   */
-  .load-more-button cx-button {
-    line-height: var(--cx-line-height-small);
-  }
-`;
-var De = Object.defineProperty, Te = Object.getOwnPropertyDescriptor, w = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? Te(e, i) : e, o = t.length - 1, c; o >= 0; o--)
-    (c = t[o]) && (s = (a ? c(e, i, s) : c(s)) || s);
-  return a && s && De(e, i, s), s;
-};
-let b = class extends H {
-  constructor() {
-    super(...arguments), this.localize = new q(this), this.role = "tree", this.siteUrl = "", this.bearerToken = "", this.token = "", this.searchText = "", this.folders = [], this.rootIDs = [], this.totalCount = 0, this.loadMore = () => {
-    }, this.isLoading = !1, this.folderPathsSet = /* @__PURE__ */ new Set(), this.removedIDs = [], this.currentRootIDsSet = /* @__PURE__ */ new Set(), this.renderFolder = (t) => n`<cx-folder-item
-      .currentRootIDsSet=${this.currentRootIDsSet}
-      .folder=${t}
-      .folderPathsSet=${this.folderPathsSet}
-      .removedIDs=${this.removedIDs}
-      bearer-token=${this.bearerToken}
-      search-text=${this.searchText}
-      site-url=${this.siteUrl}
-      token=${this.token}
-    ></cx-folder-item>`;
-  }
-  get currentRootIDs() {
-    return Array.from(this.currentRootIDsSet);
-  }
-  handleRootIDsChange() {
-    this.currentRootIDsSet = new Set(this.rootIDs);
-  }
-  resetTree() {
-    this.currentRootIDsSet = new Set(this.rootIDs), this.tree.querySelectorAll("cx-folder-item").forEach((t) => {
-      t.selected = this.currentRootIDsSet.has(
-        N({
-          id: t.id,
-          path: t.dataset.path ?? ""
-        })
-      ), t.expanded = !1, t.indeterminate = !1;
-    });
-  }
-  async handleSelectedChange(t) {
-    const e = t.target, i = e.dataset.id ?? "", a = e.dataset.path ?? "";
-    if (await e.updateComplete, !i.trim() || !a.trim())
-      return;
-    const s = N({
-      id: i,
-      path: a
-    });
-    if (!(e.indeterminate && !e.selected)) {
-      if (e.selected) {
-        if (!this.currentRootIDsSet.has(s)) {
-          lt(e, "multiple"), this.currentRootIDsSet.add(s);
-          for (const o of e.getChildrenItems())
-            !o.id.trim() || !o.dataset.path?.trim() || this.currentRootIDsSet.add(
-              N({
-                id: o.id,
-                path: o.dataset.path ?? ""
-              })
-            );
-        }
-        this.removedIDs = this.removedIDs.filter(
-          (o) => o !== s && !S(o).path.startsWith(a + "/")
-        );
-      } else
-        this.removedIDs.push(s), this.currentRootIDsSet.has(s) && (this.currentRootIDsSet.delete(s), lt(e, "multiple"));
-      [...this.currentRootIDsSet].forEach((o) => {
-        const c = R(a), h = S(o).path, _ = R(h);
-        _.startsWith(c) && _ !== c && (e.selected || this.currentRootIDsSet.delete(o));
-      }), this.currentRootIDsSet = new Set(this.currentRootIDsSet);
-    }
-  }
-  render() {
-    return n`
-      <div class="folder-tree selectable">
-        <cx-tree
-          class=${C({
-      selectable: !0
-    })}
-          @cx-selected-change=${this.handleSelectedChange}
-          selection="multiple"
-          disabled-auto-expand
-          disabled-sync-checkboxes
-        >
-          ${U(
-      this.folders,
-      (t) => t.id,
-      (t) => this.renderFolder(t)
-    )}
-          ${p(
-      this.folders && this.folders.length < this.totalCount,
-      () => n`
-              <div class="load-more-button">
-                <cx-button
-                  variant="text"
-                  @click=${this.loadMore}
-                  ?loading=${this.isLoading}
-                >
-                  ${this.localize.term("more")}
-                </cx-button>
-              </div>
-            `
-    )}
-        </cx-tree>
-      </div>
-    `;
-  }
-};
-b.styles = [tt, Ae];
-b.dependencies = {
-  "cx-folder-item": y,
-  "cx-tree": $t
-};
-w([
-  z("cx-tree")
-], b.prototype, "tree", 2);
-w([
-  d({ attribute: "site-url", reflect: !0, type: String })
-], b.prototype, "siteUrl", 2);
-w([
-  d({ attribute: "bearer-token", reflect: !0, type: String })
-], b.prototype, "bearerToken", 2);
-w([
-  d({ attribute: "token", reflect: !0, type: String })
-], b.prototype, "token", 2);
-w([
-  d({ attribute: "search-text", reflect: !0, type: String })
-], b.prototype, "searchText", 2);
-w([
-  d({ type: Array })
-], b.prototype, "folders", 2);
-w([
-  d({ attribute: "root-ids", reflect: !0, type: Array })
-], b.prototype, "rootIDs", 2);
-w([
-  d({ attribute: "total-count", reflect: !0, type: Number })
-], b.prototype, "totalCount", 2);
-w([
-  d({ attribute: "load-more", type: Function })
-], b.prototype, "loadMore", 2);
-w([
-  d({ attribute: "is-loading", reflect: !0, type: Boolean })
-], b.prototype, "isLoading", 2);
-w([
-  d({ attribute: "folder-paths-set", type: Object })
-], b.prototype, "folderPathsSet", 2);
-w([
-  u()
-], b.prototype, "removedIDs", 2);
-w([
-  u()
-], b.prototype, "currentRootIDsSet", 2);
-w([
-  P("rootIDs")
-], b.prototype, "handleRootIDsChange", 1);
-b = w([
-  W("cx-folder-tree")
-], b);
-function Pe(t, e, i) {
-  switch (i.length) {
-    case 0:
-      return t.call(e);
-    case 1:
-      return t.call(e, i[0]);
-    case 2:
-      return t.call(e, i[0], i[1]);
-    case 3:
-      return t.call(e, i[0], i[1], i[2]);
-  }
-  return t.apply(e, i);
-}
-var _t = Math.max;
-function ze(t, e, i) {
-  return e = _t(e === void 0 ? t.length - 1 : e, 0), function() {
-    for (var a = arguments, s = -1, o = _t(a.length - e, 0), c = Array(o); ++s < o; )
-      c[s] = a[e + s];
-    s = -1;
-    for (var h = Array(e + 1); ++s < e; )
-      h[s] = a[s];
-    return h[e] = i(c), Pe(t, this, h);
-  };
-}
-function Ee(t) {
-  return function() {
-    return t;
-  };
-}
-var ft = function() {
-  try {
-    var t = Et(Object, "defineProperty");
-    return t({}, "", {}), t;
-  } catch {
-  }
-}(), Le = ft ? function(t, e) {
-  return ft(t, "toString", {
-    configurable: !0,
-    enumerable: !1,
-    value: Ee(e),
-    writable: !0
-  });
-} : It, Fe = 800, Ue = 16, Re = Date.now;
-function ke(t) {
-  var e = 0, i = 0;
-  return function() {
-    var a = Re(), s = Ue - (a - i);
-    if (i = a, s > 0) {
-      if (++e >= Fe)
-        return arguments[0];
-    } else
-      e = 0;
-    return t.apply(void 0, arguments);
-  };
-}
-var Oe = ke(Le);
-function Ne(t, e) {
-  return Oe(ze(t, e, It), t + "");
-}
-var je = 200;
-function Be(t, e, i, a) {
-  var s = -1, o = Bt, c = !0, h = t.length, _ = [], m = e.length;
-  if (!h)
-    return _;
-  i && (e = ee(e, Lt(i))), e.length >= je && (o = Ut, c = !1, e = new Ft(e));
-  t:
-    for (; ++s < h; ) {
-      var g = t[s], $ = i == null ? g : i(g);
-      if (g = g !== 0 ? g : 0, c && $ === $) {
-        for (var f = m; f--; )
-          if (e[f] === $)
-            continue t;
-        _.push(g);
-      } else o(e, $, a) || _.push(g);
-    }
-  return _;
-}
-var vt = pt ? pt.isConcatSpreadable : void 0;
-function Me(t) {
-  return wt(t) || Rt(t) || !!(vt && t && t[vt]);
-}
-function Ve(t, e, i, a, s) {
-  var o = -1, c = t.length;
-  for (i || (i = Me), s || (s = []); ++o < c; ) {
-    var h = t[o];
-    i(h) ? kt(s, h) : a || (s[s.length] = h);
-  }
-  return s;
-}
-function He(t, e, i) {
-  var a = t.length;
-  if (a < 2)
-    return a ? dt(t[0]) : [];
-  for (var s = -1, o = Array(a); ++s < a; )
-    for (var c = t[s], h = -1; ++h < a; )
-      h != s && (o[s] = Be(o[s] || c, t[h], e, i));
-  return dt(Ve(o), e, i);
-}
-function We(t) {
-  return se(t) && St(t);
-}
-var st = Ne(function(t) {
-  return He(Ot(t, We));
-}), v = /* @__PURE__ */ ((t) => (t.Canceled = "CANCELED", t.Failed = "FAILED", t.InProgress = "INPROGRESS", t.PendingComplete = "PENDINGCOMPLETE", t.Success = "SUCCESS", t))(v || {}), qe = Object.defineProperty, Ge = Object.getOwnPropertyDescriptor, j = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? Ge(e, i) : e, o = t.length - 1, c; o >= 0; o--)
-    (c = t[o]) && (s = (a ? c(e, i, s) : c(s)) || s);
-  return a && s && qe(e, i, s), s;
-};
-let T = class extends H {
-  constructor() {
-    super(...arguments), this.localize = new q(this), this.size = 0, this.remainingSize = 0, this.childrenCount = 0, this.assetsCount = 0;
-  }
-  get cachedSize() {
-    return Math.max(0, this.size - this.remainingSize);
-  }
-  get percentage() {
-    return this.size ? Math.round(this.cachedSize / this.size * 100) : 0;
-  }
-  createRenderRoot() {
-    return this;
-  }
-  renderFolderSuccessText() {
-    return n`${this.childrenCount} ${this.localize.term("subfolders")},
-    ${this.assetsCount} ${this.localize.term("assets")}`;
-  }
-  renderSuccess() {
-    return n`<div class="file-on-demand-pinned-status__success progress">
-      <cx-icon name="file_download" variant="filled"></cx-icon>
-      <cx-typography variant="small">
-        <cx-line-clamp lines="1">
-          ${p(this.isFolder, this.renderFolderSuccessText.bind(this), () => n`${this.localize.term("cached")}`)}
-        </cx-line-clamp>
-      </cx-typography>
-    </div>`;
-  }
-  renderFailed() {
-    return n`<div class="file-on-demand-pinned-status__failed progress">
-      <cx-icon name="file_download_off" variant="filled"></cx-icon>
-      <cx-typography variant="small">
-        <cx-line-clamp lines="1">
-          ${this.localize.term("syncFailedCacheFull")}
-        </cx-line-clamp>
-      </cx-typography>
-    </div>`;
-  }
-  renderCanceled() {
-    return n`<div class="file-on-demand-pinned-status__canceled progress">
-      <cx-icon name="file_download_off" variant="filled"></cx-icon>
-      <cx-typography variant="small">
-        <cx-line-clamp lines="1">
-          ${this.localize.term("syncCanceled")}
-        </cx-line-clamp>
-      </cx-typography>
-    </div>`;
-  }
-  renderInProgress() {
-    return n`<div class="file-on-demand-pinned-status__in-progress progress">
-      <cx-icon name="downloading" variant="filled"></cx-icon>
-      <cx-typography variant="small">
-        <cx-line-clamp lines="1">
-          ${this.localize.term("caching")} ${this.percentage}% (<cx-format-bytes .value=${this.cachedSize}></cx-format-bytes>/
-          <cx-format-bytes .value=${this.size}></cx-format-bytes>)
-        </cx-line-clamp>
-      </cx-typography>
-    </div>`;
-  }
-  render() {
-    return n`<div class="file-on-demand-pinned-status">
-      ${ne(this.uploadStatus, [
-      [v.Success, this.renderSuccess.bind(this)],
-      [v.Failed, this.renderFailed.bind(this)],
-      [v.InProgress, this.renderInProgress.bind(this)],
-      [v.PendingComplete, this.renderInProgress.bind(this)],
-      [v.Canceled, this.renderCanceled.bind(this)]
-    ])}
-    </div>`;
-  }
-};
-T.styles = [tt];
-T.dependencies = {
-  "cx-format-bytes": ot,
-  "cx-icon": J,
-  "cx-line-clamp": Q,
-  "cx-typography": nt
-};
-j([
-  d({
-    attribute: "upload-status",
-    type: String
-  })
-], T.prototype, "uploadStatus", 2);
-j([
-  d({ type: Number })
-], T.prototype, "size", 2);
-j([
-  d({
-    attribute: "remaining-size",
-    type: Number
-  })
-], T.prototype, "remainingSize", 2);
-j([
-  d({
-    attribute: "is-folder",
-    type: Boolean
-  })
-], T.prototype, "isFolder", 2);
-j([
-  d({
-    attribute: "children-count",
-    type: Number
-  })
-], T.prototype, "childrenCount", 2);
-j([
-  d({
-    attribute: "assets-count",
-    type: Number
-  })
-], T.prototype, "assetsCount", 2);
-T = j([
-  W("cx-file-on-demand-pinned-status")
-], T);
-const Ye = at`
-  :host {
-    padding: var(--cx-spacing-2x-small) var(--cx-spacing-small);
-    display: block;
-  }
-
-  .asset {
-    max-height: var(--asset-height);
-    display: flex;
-    gap: var(--cx-spacing-small);
-  }
-  :host(:hover) {
-    background-color: var(--cx-input-filled-background-color-hover);
-  }
-
-  .asset__description {
-    flex: 1;
-    width: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-  .asset__description__label {
-    display: flex;
-  }
-  .asset__description__label__text {
-    flex-grow: 1;
-    flex-shrink: 1;
-    overflow: hidden;
-  }
-  .asset__description__status {
-    color: var(--cx-color-neutral-500);
-    line-height: var(--cx-line-height-medium);
-  }
-
-  .asset__actions {
-    display: flex;
-    min-width: 64px;
-    justify-content: flex-end;
-    align-items: center;
-  }
-  .asset:hover .asset__actions {
-    visibility: visible;
-    opacity: 1;
-  }
-  .asset__actions {
-    visibility: hidden;
-    opacity: 0;
-  }
-
-  .asset__actions__spinner {
-    min-height: var(--cx-input-height-medium);
-    min-width: var(--cx-input-height-medium);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .asset__actions__spinner::part(base) {
-    flex-grow: 0;
-  }
-
-  .asset__thumbnail {
-    width: 56px;
-    height: var(--asset-height);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    border-radius: var(--cx-border-radius-medium);
-  }
-  .asset__thumbnail--placeholder {
-    background-color: var(--cx-color-primary-50);
-  }
-  .asset__thumbnail--folder {
-    background-color: var(--cx-color-neutral-100);
-  }
-
-  .asset__thumbnail__image {
-    height: 100%;
-    width: 100%;
-    object-fit: cover;
-    flex-shrink: 0;
-    border-radius: var(--cx-border-radius-medium);
-  }
-  .asset__thumbnail__icon {
-    --font-size: 38px;
-    display: none;
-    color: var(--cx-color-primary-400);
-  }
-
-  .asset__folder__icon {
-    --font-size: var(--cx-font-size-x-large);
-    color: var(--cx-color-neutral-600);
-  }
-
-  .asset__thumbnail__extension {
-    display: none;
-    position: absolute;
-    bottom: var(--cx-spacing-3x-small);
-    left: 50%;
-    transform: translateX(-50%);
-    width: 26px;
-    color: var(--cx-color-primary-50);
-  }
-
-  .asset__thumbnail__extension__line-clamp {
-    width: 100%;
-    text-align: center;
-  }
-
-  .asset__thumbnail__extension__text {
-    flex-grow: 1;
-    flex-shrink: 1;
-    overflow: hidden;
-    text-transform: uppercase;
-    display: contents;
-  }
-
-  .asset__thumbnail--placeholder .asset__thumbnail__image {
-    display: none;
-  }
-
-  .asset__thumbnail--placeholder .asset__thumbnail__icon,
-  .asset__thumbnail--placeholder .asset__thumbnail__extension {
-    display: flex;
-  }
-
-  /** uploads assets */
-  cx-progress-bar {
-    --height: 4px;
-    --indicator-color: var(--color);
-    --track-color: var(--cx-color-neutral-300);
-    z-index: 0;
-  }
-  .progress {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    gap: var(--cx-spacing-2x-small);
-    margin-top: var(--cx-spacing-3x-small);
-  }
-
-  .syncing-progress,
-  .completed-progress,
-  .failed-progress,
-  .canceled-progress {
-    margin-top: var(--cx-spacing-2x-small);
-  }
-
-  .progress * {
-    white-space: nowrap;
-  }
-
-  .progress cx-icon {
-    --font-size: var(--cx-font-size-medium);
-  }
-
-  .progress cx-typography::part(base) {
-    line-height: var(--cx-font-size-medium);
-  }
-
-  .uploading-progress.in-progress cx-icon {
-    color: var(--cx-color-primary-500);
-  }
-
-  .uploading-progress.paused cx-icon {
-    color: var(--cx-color-warning-500);
-  }
-
-  .syncing-progress cx-icon {
-    color: var(--cx-color-warning);
-  }
-
-  .completed-progress cx-icon {
-    color: var(--cx-color-success);
-  }
-
-  .failed-progress cx-icon,
-  .failed-progress__text {
-    color: var(--cx-color-danger);
-    cursor: help;
-  }
-
-  .canceled-progress cx-icon {
-    color: var(--cx-color-neutral-600);
-  }
-
-  .file-on-demand-pinned-status__success cx-icon,
-  .file-on-demand-pinned-status__in-progress cx-icon {
-      color: var(--cx-color-success-500);
-  }
-
-  .file-on-demand-pinned-status__failed cx-icon {
-    color: var(--cx-color-danger-500);
-  }
-
-  .file-on-demand-pinned-status__canceled cx-icon {
-    color: var(--cx-color-neutral-500);
-  }
-`;
-var Ke = Object.defineProperty, Xe = Object.getOwnPropertyDescriptor, V = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? Xe(e, i) : e, o = t.length - 1, c; o >= 0; o--)
-    (c = t[o]) && (s = (a ? c(e, i, s) : c(s)) || s);
-  return a && s && Ke(e, i, s), s;
-};
-let L = class extends H {
-  constructor() {
-    super(...arguments), this.localize = new q(this), this.favoriteInProgressAssets = [], this.pinInProgressAssets = [], this.thumbnailLoadError = !1;
-  }
-  /** Failed or canceled uploads: show open-in-drive and retry. */
-  get showRetryableUploadActions() {
-    return this.listType === x.PINNED ? !1 : this.asset.uploadStatus === v.Failed || this.asset.uploadStatus === v.Canceled;
-  }
-  get showInProgressActions() {
-    return this.listType === x.PINNED ? !1 : this.asset.uploadStatus === v.InProgress;
-  }
-  get showNormalActions() {
-    return this.listType === x.PINNED ? !1 : [v.Success, v.PendingComplete].includes(
-      this.asset.uploadStatus
-    ) || !this.asset.uploadStatus?.trim();
-  }
-  get showPinnedActions() {
-    return this.listType === x.PINNED;
-  }
-  get isFolder() {
-    return fe.includes((this.asset.docType ?? "").toLowerCase());
-  }
-  get thumbnailUrl() {
-    return this.asset.thumbnail?.trim() ?? "";
-  }
-  get showThumbnailPlaceholder() {
-    return !this.thumbnailUrl || this.thumbnailLoadError;
-  }
-  willUpdate(t) {
-    if (super.willUpdate(t), !t.has("asset"))
-      return;
-    (t.get("asset")?.thumbnail?.trim() ?? "") !== this.thumbnailUrl && (this.thumbnailLoadError = !1);
-  }
-  handleImgError() {
-    this.thumbnailLoadError = !0;
-  }
-  handleImgLoad() {
-    this.thumbnailLoadError = !1;
-  }
-  handleOpenDriveClick() {
-    this.openDrive(this.asset);
-  }
-  openDrive(t) {
-    this.emit("cx-open-drive", {
-      detail: {
-        asset: t
-      }
-    });
-  }
-  unmarkFavorite(t) {
-    this.emit("cx-unmark-favorite", {
-      detail: {
-        assetId: t
-      }
-    });
-  }
-  markFavorite(t) {
-    this.emit("cx-mark-favorite", {
-      detail: {
-        assetId: t
-      }
-    });
-  }
-  pinAsset(t) {
-    this.emit("cx-file-on-demand-pin", {
-      detail: {
-        assetId: t
-      }
-    });
-  }
-  unpinAsset(t) {
-    this.emit("cx-file-on-demand-unpin", {
-      detail: {
-        assetId: t
-      }
-    });
-  }
-  handlePinClick() {
-    this.asset.isPinned ? this.unpinAsset(this.asset.recordId) : this.pinAsset(this.asset.recordId);
-  }
-  handleFavoriteClick() {
-    this.asset.isInFavorite ? this.unmarkFavorite(this.asset.recordId) : this.markFavorite(this.asset.recordId);
-  }
-  retryUpload(t) {
-    this.emit("cx-retry-upload", {
-      detail: {
-        assetId: t
-      }
-    });
-  }
-  handleRetryUploadClick() {
-    this.asset.uploadId && this.retryUpload(this.asset.uploadId);
-  }
-  resumeUpload(t) {
-    this.emit("cx-resume-upload", {
-      detail: {
-        assetId: t
-      }
-    });
-  }
-  pauseUpload(t) {
-    this.emit("cx-pause-upload", {
-      detail: {
-        assetId: t
-      }
-    });
-  }
-  cancelUpload(t) {
-    this.emit("cx-cancel-upload", {
-      detail: {
-        assetId: t
-      }
-    });
-  }
-  handlePauseUploadClick() {
-    this.asset.uploadId && (this.asset.isPaused ? this.resumeUpload(this.asset.uploadId) : this.pauseUpload(this.asset.uploadId));
-  }
-  handleCancelUploadClick() {
-    this.asset.uploadId && this.cancelUpload(this.asset.uploadId);
-  }
-  renderProgress({
-    isPaused: t = !1,
-    progress: e = 0,
-    remainingTime: i,
-    size: a = 0,
-    timestamp: s = Date.now(),
-    uploadErrorMessage: o,
-    uploadStatus: c = v.InProgress
-  }) {
-    const h = a > 0 ? e * 100 / a : 0, _ = c === v.InProgress ? h : 100, m = n`
-      <div class=${C({
-      "in-progress": c === v.InProgress,
-      paused: t,
-      progress: !0,
-      "uploading-progress": !0
-    })}>
-        ${p(t, () => n`<cx-icon name="pause" variant="filled"></cx-icon>`, () => n`<cx-icon name="arrow_upward"></cx-icon>`)}
-        <cx-typography variant="small">
-          <cx-line-clamp lines="1">
-            ${p(t, () => n`${this.localize.term("paused")} ‧`)}
-            <cx-format-bytes .value=${e}></cx-format-bytes>
-            ${this.localize.term("of")}
-            <cx-format-bytes .value=${a}></cx-format-bytes>
-            (${Math.round(h)}%)
-            ${p(
-      !!i && !t,
-      () => n`‧
-                  <cx-relative-time
-                    format="narrow"
-                    numeric="always"
-                    date=${new Date(Date.now() + (i ?? 0))}
-                    sync
-                    sync-interval=${O}
-                  ></cx-relative-time>`
-    )}
-          </cx-line-clamp>
-        </cx-typography>
-      </div>
-    `, g = n`
-      <div class="progress syncing-progress">
-        <cx-icon name="cached"></cx-icon>
-        <cx-typography variant="small">
-          <cx-line-clamp lines="1">
-            ${this.localize.term("syncing")} ‧
-            <cx-relative-time
-              format="narrow"
-              numeric="always"
-              date=${new Date(s)}
-              sync
-              sync-interval=${O}
-            ></cx-relative-time>
-          </cx-line-clamp>
-        </cx-typography>
-      </div>
-    `, $ = n`
-      <div class="progress completed-progress">
-        <cx-icon name="check"></cx-icon>
-        <cx-typography variant="small">
-          <cx-line-clamp lines="1">
-            ${this.localize.term("readyToUse")} ‧
-            <cx-relative-time
-              format="narrow"
-              numeric="always"
-              date=${new Date(s)}
-              sync
-              sync-interval=${O}
-            ></cx-relative-time>
-          </cx-line-clamp>
-        </cx-typography>
-      </div>
-    `, f = n`
-      <div class="progress failed-progress">
-        <cx-typography variant="small">
-          <cx-line-clamp lines="1">
-            <cx-tooltip
-              content=${o || this.localize.term("uploadFailed")}
-            >
-              <span class="failed-progress__text">
-                ${this.localize.term("uploadFailed")} ‧
-              </span>
-            </cx-tooltip>
-            <cx-relative-time
-              format="narrow"
-              numeric="always"
-              date=${new Date(s)}
-              sync
-              sync-interval=${O}
-            ></cx-relative-time>
-          </cx-line-clamp>
-        </cx-typography>
-      </div>
-    `, F = n`
-      <div class="progress canceled-progress">
-        <cx-icon name="cancel"></cx-icon>
-        <cx-typography variant="small">
-          <cx-line-clamp lines="1">
-            ${this.localize.term("canceled")} ‧
-            <cx-relative-time
-              format="narrow"
-              numeric="always"
-              date=${new Date(s)}
-              sync
-              sync-interval=${O}
-            ></cx-relative-time>
-          </cx-line-clamp>
-        </cx-typography>
-      </div>
-    `;
-    return n`
-      ${p(
-      c === v.InProgress,
-      () => n`<cx-progress-bar
-              style=${oe({
-        "--color": t ? "var(--cx-color-warning-500)" : "var(--cx-color-primary-500)"
-      })}
-              .value=${_.toFixed(0)}
-              class="progress-bar"
-            ></cx-progress-bar
-            >${m}`
-    )}
-      ${p(
-      c === v.PendingComplete,
-      () => g
-    )}
-      ${p(c === v.Success, () => $)}
-      ${p(c === v.Failed, () => f)}
-      ${p(c === v.Canceled, () => F)}
-    `;
-  }
-  renderUploadingStatus() {
-    return n`
-      ${this.renderProgress({
-      isPaused: this.asset.isPaused,
-      progress: (this.asset.size ?? 0) - (this.asset.remainingSize ?? 0),
-      remainingTime: this.asset.remainingTime,
-      size: this.asset.size ?? 0,
-      timestamp: this.asset.uploadTimestamp,
-      uploadErrorMessage: this.asset.uploadErrorMessage,
-      uploadStatus: this.asset.uploadStatus
-    })}
-    `;
-  }
-  renderPinnedStatus() {
-    return n`<cx-file-on-demand-pinned-status
-      size=${this.asset.size ?? 0}
-      remaining-size=${this.asset.remainingSize ?? 0}
-      upload-status=${this.asset.uploadStatus}
-      ?is-folder=${this.isFolder}
-      children-count=${this.asset.childrenCount ?? 0}
-      assets-count=${this.asset.assetsCount ?? 0}
-    ></cx-file-on-demand-pinned-status>`;
-  }
-  renderThumbnailContent() {
-    return this.isFolder ? this.listType === x.FAVORITES ? n`<cx-icon
-          class="asset__folder__icon"
-          name="folder_special"
-        ></cx-icon>` : n`<cx-icon class="asset__folder__icon" name="topic"></cx-icon>` : n`${p(
-      !!this.thumbnailUrl,
-      () => n`<img
-            alt=${this.asset.fileName}
-            class="asset__thumbnail__image"
-            src=${this.thumbnailUrl}
-            @error=${this.handleImgError}
-            @load=${this.handleImgLoad}
-          />`
-    )}
-      <cx-icon
-        class="asset__thumbnail__icon"
-        name="insert_drive_file"
-        variant="filled"
-      ></cx-icon>
-      <div class="asset__thumbnail__extension">
-        <cx-line-clamp
-          class="asset__thumbnail__extension__line-clamp"
-          lines="1"
-        >
-          <cx-typography
-            class="asset__thumbnail__extension__text"
-            variant="small"
-          >
-            ${be(this.asset.fileName)}
-          </cx-typography>
-        </cx-line-clamp>
-      </div>`;
-  }
-  renderThumbnail() {
-    return n`<div
-      class=${C({
-      asset__thumbnail: !0,
-      "asset__thumbnail--folder": this.isFolder,
-      "asset__thumbnail--placeholder": this.showThumbnailPlaceholder
-    })}
-    >
-      ${this.renderThumbnailContent()}
-    </div>`;
-  }
-  renderOpenDriveButton() {
-    return n`<cx-tooltip content=${this.localize.term("openInDrive")} hoist>
-      <cx-icon-button
-        data-testid="asset__drive-button"
-        name="folder_open"
-        @click=${this.handleOpenDriveClick}
-      ></cx-icon-button>
-    </cx-tooltip>`;
-  }
-  renderNormalActions() {
-    return n`${this.renderOpenDriveButton()}
-      ${p(
-      this.favoriteInProgressAssets.includes(this.asset.recordId),
-      () => n`<cx-spinner class="asset__actions__spinner"></cx-spinner>`,
-      () => n`<cx-tooltip
-            content=${this.asset.isInFavorite ? this.localize.term("unfavorite") : this.localize.term("favorite")}
-            hoist
-          >
-            <cx-icon-button
-              data-testid="asset__favorite-button"
-              name="star"
-              variant=${this.asset.isInFavorite ? "filled" : "outlined"}
-              @click=${this.handleFavoriteClick}
-            ></cx-icon-button>
-          </cx-tooltip>`
-    )} `;
-  }
-  renderRetryableUploadActions() {
-    return n`${this.renderOpenDriveButton()}
-      <cx-tooltip content=${this.localize.term("retry")} hoist>
-        <cx-icon-button
-          data-testid="asset__retry-button"
-          name="refresh"
-          @click=${this.handleRetryUploadClick}
-        ></cx-icon-button>
-      </cx-tooltip>`;
-  }
-  renderInProgressActions() {
-    return n`
-      <cx-tooltip
-        content=${this.asset.isPaused ? this.localize.term("resume") : this.localize.term("pause")}
-        hoist
-      >
-        <cx-icon-button
-          data-testid=${this.asset.isPaused ? "asset__resume-button" : "asset__pause-button"}
-          name=${this.asset.isPaused ? "play_arrow" : "pause"}
-          variant="filled"
-          @click=${this.handlePauseUploadClick}
-        ></cx-icon-button>
-      </cx-tooltip>
-      <cx-tooltip content=${this.localize.term("cancel")} hoist>
-        <cx-icon-button
-          data-testid="asset__cancel-button"
-          name="close"
-          @click=${this.handleCancelUploadClick}
-        ></cx-icon-button>
-      </cx-tooltip>
-    `;
-  }
-  renderPinnedActions() {
-    return n`${p(
-      this.pinInProgressAssets.includes(this.asset.recordId),
-      () => n`<cx-spinner class="asset__actions__spinner"></cx-spinner>`,
-      () => n`<cx-tooltip
-          content=${this.asset.isPinned ? this.localize.term("unpin") : this.localize.term("pin")}
-          hoist
-        >
-          <cx-icon-button
-            data-testid="asset__pin-button"
-            name="keep"
-            variant=${this.asset.isPinned ? "filled" : "outlined"}
-            @click=${this.handlePinClick}
-          ></cx-icon-button>
-        </cx-tooltip>`
-    )} `;
-  }
-  render() {
-    return n`
-      <div
-        data-id=${this.asset.recordId}
-        data-testid=${`asset-${this.asset.uploadStatus}`}
-        class="asset"
-      >
-        ${this.renderThumbnail()}
-        <div class="asset__description">
-          <div class="asset__description__label">
-            <cx-line-clamp class="asset__description__label__text" lines="1">
-              <cx-typography variant="body3"
-                >${this.asset.fileName}</cx-typography
-              >
-            </cx-line-clamp>
-          </div>
-          <div class="asset__description__status">
-            ${p(
-      this.listType === x.RECENT,
-      () => n`
-                <cx-typography
-                  variant="small"
-                  class="asset__description__status__time"
-                >
-                  <cx-relative-time
-                    format="narrow"
-                    numeric="always"
-                    date=${new Date(this.asset.uploadTimestamp)}
-                    sync
-                    sync-interval=${O}
-                  ></cx-relative-time>
-                </cx-typography>
-              `
-    )}
-            ${p(
-      this.listType === x.UPLOADS,
-      () => this.renderUploadingStatus()
-    )}
-            ${p(
-      this.listType === x.PINNED,
-      () => this.renderPinnedStatus()
-    )}
-          </div>
-        </div>
-        <div class="asset__actions">
-          ${p(this.showNormalActions, () => this.renderNormalActions())}
-          ${p(
-      this.showInProgressActions,
-      () => this.renderInProgressActions()
-    )}
-          ${p(
-      this.showRetryableUploadActions,
-      () => this.renderRetryableUploadActions()
-    )}
-          ${p(this.showPinnedActions, () => this.renderPinnedActions())}
-        </div>
-      </div>
-    `;
-  }
-};
-L.styles = [tt, Ye];
-L.dependencies = {
-  "cx-file-on-demand-pinned-status": T,
-  "cx-format-bytes": ot,
-  "cx-icon": J,
-  "cx-icon-button": Ct,
-  "cx-line-clamp": Q,
-  "cx-progress-bar": ie,
-  "cx-relative-time": At,
-  "cx-spinner": ae,
-  "cx-tooltip": Dt,
-  "cx-typography": nt
-};
-V([
-  d({ type: Object })
-], L.prototype, "asset", 2);
-V([
-  d({
-    attribute: "list-type",
-    type: String
-  })
-], L.prototype, "listType", 2);
-V([
-  d({
-    attribute: "favorite-in-progress-assets",
-    converter: {
-      fromAttribute: (t) => t.split(" ").filter(Boolean),
-      toAttribute: (t) => t.join(" ")
-    },
-    type: String
-  })
-], L.prototype, "favoriteInProgressAssets", 2);
-V([
-  d({
-    attribute: "pin-in-progress-assets",
-    converter: {
-      fromAttribute: (t) => t.split(" ").filter(Boolean),
-      toAttribute: (t) => t.join(" ")
-    },
-    type: String
-  })
-], L.prototype, "pinInProgressAssets", 2);
-V([
-  u()
-], L.prototype, "thumbnailLoadError", 2);
-L = V([
-  W("cx-file-on-demand-asset")
-], L);
-const Ze = at`
-  :host {
-    --asset-height: 40px;
-    display: block;
-    color: var(--cx-color-neutral-900);
-    height: 100%;
-    --cx-button-text-transform: none;
-    --tooltip-max-width: min(80vw, 640px);
-  }
-
-  .container {
-    display: block;
-    height: 100%;
-  }
-
-  .container--user-interaction-blocked {
-    pointer-events: none;
-    user-select: none;
-  }
-
-  .loading-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--cx-color-neutral-50);
-    opacity: 0.8;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: var(--cx-z-index-tooltip); /* Ensure it is above other content */
-  }
-
-  .assets,
-  .welcome {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
-  /* #region Icons */
-  .assets-list__tab-group .empty-icon {
-    color: var(--cx-color-neutral-600);
-    font-size: var(--cx-font-size-3x-large);
-  }
-
-  cx-tab {
-    line-height: var(--cx-line-height-large);
-  }
-
-  .assets-list__tab-group cx-tab {
-    width: calc(100% / 4);
-  }
-
-  .settings__tab-group cx-tab {
-    width: calc(100% / 2);
-  }
-
-  cx-tab::part(base) {
-    display: flex;
-    justify-content: center;
-  }
-
-  cx-tab::part(label) {
-    text-align: center;
-  }
-
-  cx-tab-panel {
-    --padding: 0 0 var(--cx-spacing-x-small) 0;
-  }
-
-  cx-icon[slot='prefix'] {
-    font-size: var(--cx-font-size-large);
-  }
-
-  .error-message {
-    color: var(--cx-color-danger);
-    min-height: 1ch;
-  }
-
-  /** welcome */
-  .welcome {
-    justify-content: center;
-    align-items: center;
-    padding: var(--cx-spacing-x-large) var(--cx-spacing-medium)
-      var(--cx-spacing-medium) var(--cx-spacing-medium);
-    gap: var(--cx-spacing-x-large);
-  }
-
-  .welcome__message {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: var(--cx-spacing-x-small);
-  }
-
-  .welcome__actions {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: var(--cx-spacing-x-small);
-  }
-
-  .welcome__connect-button,
-  .welcome__cancel-connection-button,
-  .welcome__input {
-    width: 100%;
-  }
-
-  .welcome__connect-button--disabled::part(base) {
-    cursor: help;
-  }
-
-  .welcome .error-message {
-    text-align: center;
-  }
-
-  /** header */
-  .header {
-    display: flex;
-    justify-content: space-between;
-    background-color: var(--cx-color-neutral-50);
-    padding: var(--cx-spacing-x-small) var(--cx-spacing-small);
-    line-height: 1;
-  }
-  .header__user {
-    display: flex;
-    align-items: center;
-    gap: var(--cx-spacing-x-small);
-    overflow: hidden;
-  }
-  .header__username {
-    display: flex;
-    overflow: hidden;
-  }
-  .header__username__text {
-    flex-grow: 1;
-    flex-shrink: 1;
-    overflow: hidden;
-  }
-  .header__avatar {
-    --size: 24px;
-  }
-  .header__actions {
-    min-width: fit-content;
-  }
-
-  .settings__version__badge::part(base) {
-    width: var(--cx-spacing-x-small);
-    padding: 0;
-  }
-
-  /** assets list */
-  .assets-list {
-    flex: 1;
-    height: 0;
-  }
-
-  /** Make sure the overflown element is .recent__list
-   * to trigger scroll event for infinite scroll
-   */
-  .assets-list__tab-group,
-  .assets-list__tab-group::part(base),
-  .assets-list__tab-group::part(body),
-  .assets-list__tab-group cx-tab-panel,
-  .assets-list__tab-group cx-tab-panel::part(base) {
-    height: 100%;
-    overflow: hidden;
-  }
-  .assets-list__tab-group .assets-list__tab-group__empty-message {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: var(--cx-spacing-medium);
-    font-size: var(--cx-font-size-x-large);
-    padding: var(--cx-spacing-large) 0;
-    text-align: center;
-  }
-
-  .assets-list__tab-group .assets-list__tab-group__empty-message:not(.favorites-empty) {
-    margin-top: 40px; /** to that they are aligned with favorite tab */
-  }
-
-  .assets-list__tab-group .recent__list,
-  .assets-list__tab-group .favorites__list,
-  .assets-list__tab-group .uploads__list,
-  .assets-list__tab-group .pinned__list {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding: 0 0 var(--cx-spacing-x-small) 0;
-  }
-
-  .favorites-tab-panel__content,
-  .pinned-tab-panel__content {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-
-  .favorites__sync-time {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .assets-list__tab-group .favorites__list,
-  .assets-list__tab-group .pinned__list {
-    flex: 1;
-    height: 0;
-  }
-
-  .recent__other.empty,
-  .uploads__other.empty,
-  .recent__today.empty,
-  .uploads__today.empty {
-    display: none;
-  }
-
-  /** status footer */
-  .status-footer {
-    padding: 0 var(--cx-spacing-small) var(--cx-spacing-small)
-      var(--cx-spacing-small);
-    display: flex;
-    flex-direction: column;
-    gap: var(--cx-spacing-2x-small);
-  }
-  .status-footer cx-typography {
-    line-height: 1;
-  }
-  .status-footer cx-line-clamp {
-    line-height: 1;
-  }
-  .status-footer .label {
-    color: var(--cx-color-neutral-600);
-  }
-  .status-footer .cache-usage,
-  .status-footer .connected-url,
-  .status-footer .connection-status,
-  .status-footer .asset-index-sync-status {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .status-footer .label {
-    color: var(--cx-color-neutral-600);
-  }
-
-  .status-footer__divider {
-    --spacing: 0;
-    margin-bottom: var(--cx-spacing-small);
-  }
-
-  .connected-url .label {
-    white-space: nowrap;
-  }
-
-  .connected-url .value-line-clamp {
-    padding: 0 var(--cx-spacing-2x-small);
-  }
-
-  .connected-url .value::part(base) {
-    font-weight: var(--cx-font-weight-medium);
-    color: var(--cx-color-neutral-900);
-  }
-
-  .cache-usage__warning-icon {
-    color: var(--cx-color-warning-500);
-  }
-
-  .status-footer .cache-usage .label {
-    color: var(--cx-color-primary-600);
-  }
-
-  .connection-status__value {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--cx-spacing-2x-small);
-    cursor: help;
-  }
-  .connection-status__value cx-typography {
-    display: inline-flex;
-  }
-  .connection-status__value cx-typography::part(base) {
-    text-transform: capitalize;
-    font-weight: var(--cx-font-weight-medium);
-  }
-  .connection-status--excellent .connection-status__value {
-    color: var(--cx-color-success);
-  }
-  .connection-status--good .connection-status__value {
-    color: var(--cx-color-warning);
-  }
-  .connection-status--bad .connection-status__value {
-    color: var(--cx-color-danger);
-  }
-  .connection-status cx-icon {
-    font-size: var(--cx-font-size-medium);
-  }
-
-  .asset-index-sync-status .value {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--cx-spacing-2x-small);
-  }
-  .asset-index-sync-status .value cx-typography {
-    display: inline-flex;
-  }
-  .asset-index-sync-status .value cx-typography::part(base) {
-    text-transform: capitalize;
-    font-weight: var(--cx-font-weight-medium);
-  }
-  .asset-index-sync-status--loaded .value {
-    color: var(--cx-color-success);
-  }
-  .asset-index-sync-status--loading .value {
-    color: var(--cx-color-warning);
-  }
-  .asset-index-sync-status--error .value {
-    color: var(--cx-color-danger);
-  }
-  .asset-index-sync-status cx-icon {
-    font-size: var(--cx-font-size-medium);
-  }
-  
-
-  /** asset */
-  .uploads__list .asset-group__label {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .asset-group__clear-button::part(base) {
-    color: var(--cx-color-primary-500);
-    font-size: var(--cx-font-size-x-small);
-  }
-  
-  .asset-group__label {
-    padding: var(--cx-spacing-x-small) var(--cx-spacing-small);
-    color: var(--cx-color-neutral-400);
-    line-height: var(--cx-line-height-large);
-  }
-
-  /** #region Settings */
-  .settings {
-    height: 100%;
-  }
-  .settings .error-message {
-    text-align: center;
-  }
-  .settings__form {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-  .settings__tab-group {
-    flex: 1;
-    height: 0;
-  }
-  .settings__tab-group::part(base),
-  .settings__tab-group::part(body) {
-    height: 100%;
-    overflow: hidden;
-  }
-  .settings__tab-group cx-tab-panel {
-    padding: var(--cx-spacing-medium) var(--cx-spacing-large)
-      var(--cx-spacing-large) var(--cx-spacing-large);
-    height: 100%;
-    overflow-y: auto;
-  }
-  .settings-group {
-    display: flex;
-    flex-direction: column;
-    gap: var(--cx-spacing-x-small);
-  }
-  .settings__general,
-  .settings__advanced {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--cx-spacing-small) * 2);
-  }
-  .settings__footer {
-    border-top: 1px solid var(--cx-color-neutral-200);
-    padding: var(--cx-spacing-x-small) var(--cx-spacing-small);
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  .settings__footer__actions {
-    display: flex;
-    gap: var(--cx-spacing-x-small);
-  }
-
-  .settings__connection-url {
-    display: flex;
-    justify-content: space-between;
-  }
-  .settings__connection-url__value {
-    padding: 0 var(--cx-spacing-small);
-    flex-grow: 1;
-    flex-shrink: 1;
-    overflow: hidden;
-  }
-
-  .settings__software__version {
-    display: flex;
-    flex-direction: column;
-    gap: var(--cx-spacing-small);
-  }
-  .settings__software__version__value {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--cx-spacing-2x-small);
-  }
-  .settings__software__version__value__text {
-    flex-grow: 1;
-    flex-shrink: 1;
-    overflow: hidden;
-  }
-  .settings__software__version__install-button {
-    flex-shrink: 0;
-  }
-
-  .settings__about {
-    text-align: center;
-    color: var(--cx-color-neutral-500);
-  }
-
-  .settings__disconnect-button {
-    width: 100%;
-  }
-  .settings__disconnect-button::part(base),
-  .settings__disconnect-button cx-icon {
-    color: var(--cx-color-danger);
-  }
-
-  .settings__cache__size {
-    display: flex;
-    gap: var(--cx-spacing-x-small);
-    justify-content: center;
-    flex-direction: column;
-  }
-  .settings__cache__size cx-input {
-    width: 150px;
-  }
-  .settings__cache__location {
-    display: flex;
-    flex-direction: column;
-    gap: var(--cx-spacing-small);
-  }
-  .settings__cache__location__label,
-  .settings__cache__size__label {
-    --color: var(--cx-color-neutral-600);
-  }
-  .settings__cache__location__value {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  .settings__cache__location__value__text {
-    padding: 0 var(--cx-spacing-small);
-    flex-grow: 1;
-    flex-shrink: 1;
-    overflow: hidden;
-  }
-  .settings__cache__location__actions {
-    flex-wrap: nowrap;
-  }
-  .settings__cache__location__change-button {
-    flex-shrink: 0;
-  }
-  /** #endregion */
-
-  cx-tree-item:not(.selectable) {
-    --selected-color: var(--cx-color-neutral-700);
-  }
-
-  cx-tree-item:not(:hover):not(.selectable)::part(item) {
-    background-color: unset;
-    color: var(--cx-color-neutral-700);
-  }
-
-  .folder-tree {
-    overflow: auto;
-    flex: 1;
-  }
-
-  .folder-tree:not(.selectable) {
-    max-height: 200px;
-  }
-
-  .folder-tree__item::part(label) {
-    width: 100%;
-    overflow: hidden;
-  }
-
-  .folder-tree__icon {
-    font-size: var(--cx-font-size-large);
-    color: var(--cx-color-neutral-600);
-  }
-
-  .folder-tree__label {
-    display: flex;
-    width: 100%;
-    overflow: hidden;
-    gap: var(--cx-spacing-x-small);
-    line-height: var(--cx-line-height-medium);
-  }
-
-  .folder-tree__label__value {
-    flex-grow: 1;
-    flex-shrink: 1;
-    overflow: hidden;
-  }
-
-  .select-folders-popup::part(body) {
-    display: flex;
-    flex-direction: column;
-    gap: var(--cx-spacing-medium);
-    overflow: hidden;
-  }
-  .select-folders-popup .selectable-folder-tree {
-    flex: 1;
-    overflow: auto;
-  }
-  .select-folders-popup__actions {
-    display: flex;
-    justify-content: flex-end;
-  }
-`;
-var Je = Object.defineProperty, Qe = Object.getOwnPropertyDescriptor, l = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? Qe(e, i) : e, o = t.length - 1, c; o >= 0; o--)
-    (c = t[o]) && (s = (a ? c(e, i, s) : c(s)) || s);
-  return a && s && Je(e, i, s), s;
-};
-let r = class extends H {
-  constructor() {
-    super(...arguments), this.localize = new q(this), this.connectionEstablished = !1, this.connectionStatus = "excellent", this.connectionStatusTooltip = "", this.assetIndexSyncStatus = "loading", this.userAvatarUrl = "", this.username = "", this.recentAssets = { assets: [], hasMore: !1 }, this.favoriteAssets = { assets: [], hasMore: !1 }, this.favoritesLastSync = Date.now(), this.favoriteInProgressAssets = [], this.pinInProgressAssets = [], this.uploadingAssets = { assets: [], hasMore: !1 }, this.pinnedAssets = { assets: [], hasMore: !1 }, this.availableFolderIdentifiers = [], this.isLoading = !1, this.settings = {
-      cacheLocation: "Default",
-      cacheSize: 0,
-      cacheUsage: 0,
-      config: {
-        latestVersion: "",
-        monitoringActivated: !1,
-        mountPoint: "",
-        mountProxy: !1,
-        proxyTypes: [],
-        rootIDs: [],
-        siteUrl: "",
-        version: ""
-        // unlimitedDownloadRate: false,
-        // unlimitedUploadRate: false,
-        // maxDownloadRate: 0,
-        // maxUploadRate: 0,
-      }
-    }, this.pickCacheLocation = async () => "Default", this.hasNewVersion = !1, this.aboutContent = "", this.token = "", this.userInteractionBlocked = !1, this.isConnecting = !1, this.isCancellingConnection = !1, this.isDisconnecting = !1, this.isUpgrading = !1, this.isSettingsOpened = !1, this.rootIDs = this.settings.config.rootIDs, this._activeFoldersMode = this.rootIDs.length > 0, this.removedIds = [], this.cacheSize = et({
-      decimals: 2,
-      inputUnit: "B",
-      targetUnit: Z,
-      value: this.settings.cacheSize ?? 0
-    }), this.cacheLocation = this.settings.cacheLocation, this.proxyTypes = this.settings.config.proxyTypes ?? [], this.siteUrl = this.settings.config.siteUrl, this.isRecentAssetsLoading = !1, this.isFavoriteAssetsLoading = !1, this.isUploadingAssetsLoading = !1, this.isPinnedAssetsLoading = !1, this.connectError = "", this.disconnectError = "", this.upgradeError = "", this.totalCount = 0, this.folderPathsSet = /* @__PURE__ */ new Set(), this.validConnectionUrl = !1, this.isAddingRootIDs = !1, this.fetchFolders = async ({
-      excludes: t = [],
-      folderId: e,
-      folderPathsSet: i,
-      limit: a = void 0,
-      start: s = 0
-    }) => {
-      try {
-        return await Tt({
-          excludes: t,
-          folderId: e,
-          folderPathsSet: i,
-          limit: a,
-          searchText: this.searchText,
-          siteUrl: this.settings.config.siteUrl,
-          start: s,
-          token: this.token
-        });
-      } catch (o) {
-        o instanceof Error && o.message === "Failed to fetch" && this.emit("cx-renew-token");
-      }
-      return {
-        data: this.availableFolderIdentifiers,
-        totalCount: this.availableFolderIdentifiers.length
-      };
-    }, this.searchText = "", this.loadMore = async () => {
-      const t = this.availableFolderIdentifiers?.length ?? 0;
-      if (t >= this.totalCount)
-        return;
-      this.isLoading = !0;
-      const { data: e, totalCount: i } = await this.fetchFolders({
-        folderId: "",
-        folderPathsSet: this.folderPathsSet,
-        start: t
-      });
-      this.availableFolderIdentifiers = [
-        ...this.availableFolderIdentifiers ?? [],
-        ...e
-      ], this.totalCount = i, this.isLoading = !1;
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  runFirstUpdated() {
-    this.settings.config.siteUrl && this.connect();
-  }
-  fetchData() {
-    if (!this.connectionEstablished) {
-      this.validConnectionUrl = K(this.settings.config.siteUrl);
-      return;
-    }
-    this.folderPathsSet = /* @__PURE__ */ new Set(), this.fetchFolders({
-      folderId: "",
-      folderPathsSet: this.folderPathsSet
-    }).then((t) => {
-      this.availableFolderIdentifiers = t.data, this.totalCount = t.totalCount;
-    });
-  }
-  // set recent tab as active when connection is established
-  async showRecentTab() {
-    this.connectionEstablished && (await this.updateComplete, await this.assetsListTabGroup?.updateComplete, this.assetsListTabGroup?.show(x.RECENT));
-  }
-  updateSettingsStates() {
-    this._activeFoldersMode = this.settings.config.rootIDs?.length > 0, this.rootIDs = this.settings.config.rootIDs ?? [], this.cacheSize = et({
-      decimals: 2,
-      inputUnit: "B",
-      targetUnit: Z,
-      value: this.settings.cacheSize ?? 0
-    }), this.cacheLocation = this.settings.cacheLocation ?? "Default", this.proxyTypes = this.settings.config.proxyTypes ?? [], this.siteUrl = this.settings.config.siteUrl ?? "", this.validConnectionUrl = K(this.settings.config.siteUrl);
-  }
-  get formHasChanges() {
-    return this.settings.cacheSize !== this.cacheSize || this.settings.cacheLocation !== this.cacheLocation || !!st(this.settings.config.proxyTypes, this.proxyTypes).length || !!st(this.settings.config.rootIDs, this.rootIDs).length;
-  }
-  connect(t = null) {
-    if (t?.preventDefault(), this.connectError = "", !this.siteUrl?.trim())
-      return;
-    const e = ht(this.siteUrl);
-    if (!K(e)) {
-      this.connectError = this.localize.term("pleaseEnterAValidUrl");
-      return;
-    }
-    this.settings.config.siteUrl = e, this.emit("cx-connect", {
-      detail: {
-        connectionUrl: this.settings.config.siteUrl
-      }
-    });
-  }
-  cancelConnection() {
-    this.emit("cx-cancel-connection", {
-      detail: {
-        connectionUrl: this.settings.config.siteUrl
-      }
-    });
-  }
-  disconnect() {
-    this.emit("cx-disconnect", {
-      detail: {
-        connectionUrl: this.settings.config.siteUrl
-      }
-    });
-  }
-  upgrade() {
-    this.emit("cx-upgrade");
-  }
-  clearCache() {
-    this.emit("cx-clear-cache");
-  }
-  importSettings() {
-    this.emit("cx-import-settings");
-  }
-  exportSettings() {
-    this.emit("cx-export-settings");
-  }
-  viewLogs(t = "") {
-    this.emit("cx-view-logs", {
-      detail: {
-        assetId: t
-      }
-    });
-  }
-  clearUpload() {
-    this.emit("cx-clear-upload");
-  }
-  saveSettings() {
-    this.emit("cx-save-settings", {
-      detail: {
-        settings: {
-          cacheLocation: this.cacheLocation,
-          cacheSize: et({
-            decimals: 2,
-            inputUnit: Z,
-            targetUnit: "B",
-            value: this.cacheSize
-          }),
-          cacheUsage: this.settings.cacheUsage,
-          config: {
-            latestVersion: this.settings.config.latestVersion,
-            monitoringActivated: this.settings.config.monitoringActivated,
-            mountPoint: this.settings.config.mountPoint,
-            mountProxy: this.settings.config.mountProxy,
-            proxyTypes: this.proxyTypes,
-            rootIDs: this.rootIDs.filter(
-              (t) => !this.removedIds.includes(t)
-            ),
-            siteUrl: this.settings.config.siteUrl,
-            version: this.settings.config.version
-            // maxDownloadRate: this._maxDownloadRate,
-            // maxUploadRate: this._maxUploadRate,
-            // unlimitedDownloadRate: this._unlimitedDownloadRate,
-            // unlimitedUploadRate: this._unlimitedUploadRate,
-          }
-        }
-      }
-    });
-  }
-  openSearch() {
-    this.emit("cx-open-search");
-  }
-  openDrive(t) {
-    this.emit("cx-open-drive", {
-      detail: {
-        asset: t
-      }
-    });
-  }
-  openCacheLocation() {
-    this.emit("cx-open-cache-location");
-  }
-  hideSettings() {
-    this.isSettingsOpened = !1, this.isDisconnecting = !1, this.disconnectError = "", this.isUpgrading = !1, this.upgradeError = "", this.updateSettingsStates();
-  }
-  showSettings() {
-    this.isSettingsOpened = !0;
-  }
-  requestMoreRecentAssets() {
-    if (!this.recentAssetsList)
-      return;
-    const { clientHeight: t, scrollHeight: e, scrollTop: i } = this.recentAssetsList;
-    !this.isRecentAssetsLoading && this.recentAssets.hasMore && i + t >= e - X && (this.isRecentAssetsLoading = !0, this.emit("cx-file-on-demand-load-more", {
-      detail: {
-        type: "recent"
-      }
-    }));
-  }
-  onRecentAssetsChanged() {
-    this.isRecentAssetsLoading = !1;
-  }
-  requestMoreFavoriteAssets() {
-    if (!this.favoritesAssetsList)
-      return;
-    const { clientHeight: t, scrollHeight: e, scrollTop: i } = this.favoritesAssetsList;
-    !this.isFavoriteAssetsLoading && this.favoriteAssets.hasMore && i + t >= e - X && (this.isFavoriteAssetsLoading = !0, this.emit("cx-file-on-demand-load-more", {
-      detail: {
-        type: "favorites"
-      }
-    }));
-  }
-  requestMorePinnedAssets() {
-    if (!this.pinnedAssetsList)
-      return;
-    const { clientHeight: t, scrollHeight: e, scrollTop: i } = this.pinnedAssetsList;
-    !this.isPinnedAssetsLoading && this.pinnedAssets.hasMore && i + t >= e - X && (this.isPinnedAssetsLoading = !0, this.emit("cx-file-on-demand-load-more", {
-      detail: {
-        type: "pinned"
-      }
-    }));
-  }
-  onPinnedAssetsChanged() {
-    this.isPinnedAssetsLoading = !1;
-  }
-  onFavoriteAssetsChanged() {
-    this.isFavoriteAssetsLoading = !1;
-  }
-  requestMoreUploadingAssets() {
-    if (!this.uploadsAssetsList)
-      return;
-    const { clientHeight: t, scrollHeight: e, scrollTop: i } = this.uploadsAssetsList;
-    !this.isUploadingAssetsLoading && this.uploadingAssets.hasMore && i + t >= e - X && (this.isUploadingAssetsLoading = !0, this.emit("cx-file-on-demand-load-more", {
-      detail: {
-        type: "uploads"
-      }
-    }));
-  }
-  onUploadingAssetsChanged() {
-    this.isUploadingAssetsLoading = !1;
-  }
-  async updateActiveFolderIdentifiers(t) {
-    const e = this.rootIDs;
-    this.rootIDs = t, await this.updateComplete;
-    const i = this.container.querySelectorAll("cx-tree-item"), a = st(this.rootIDs, e);
-    i.forEach((s) => {
-      a.includes(s.dataset.id ?? "") && bt(s);
-    });
-  }
-  // #region Render
-  renderHeader() {
-    const t = () => {
-      this.openDrive();
-    };
-    return n`
-      <div class="header">
-        <div class="header__user">
-          <cx-avatar
-            class="header__avatar"
-            image=${this.userAvatarUrl}
-            label=${this.username}
-          ></cx-avatar>
-          <div class="header__username">
-            <cx-line-clamp lines="1" class="header__username__text">
-              <cx-typography variant="body3">${this.username}</cx-typography>
-            </cx-line-clamp>
-          </div>
-        </div>
-        <div class="header__actions">
-          <cx-tooltip content=${this.localize.term("search")} hoist>
-            <cx-icon-button
-              data-testid="header__search-button"
-              name="search"
-              @click=${this.openSearch}
-            ></cx-icon-button>
-          </cx-tooltip>
-          <cx-tooltip content=${this.localize.term("openDrive")} hoist>
-            <cx-icon-button
-              data-testid="header__drive-button"
-              name="folder_open"
-              @click=${t}
-            ></cx-icon-button>
-          </cx-tooltip>
-          <cx-tooltip content=${this.localize.term("settings")} hoist>
-            <cx-icon-button
-              data-testid="header__settings-button"
-              class="header__settings"
-              name="settings"
-              @click=${this.showSettings}
-            >
-              ${p(
-      this.hasNewVersion,
-      () => n`<cx-badge
-                    class="settings__version__badge"
-                    slot="badge"
-                    variant="danger"
-                    pill
-                    size="x-small"
-                  ></cx-badge>`
-    )}
-            </cx-icon-button>
-          </cx-tooltip>
-        </div>
-      </div>
-    `;
-  }
-  // #region Assets
-  renderAsset(t, e) {
-    return n`<cx-file-on-demand-asset
-      .asset=${t}
-      .listType=${e}
-      .favoriteInProgressAssets=${this.favoriteInProgressAssets}
-      .pinInProgressAssets=${this.pinInProgressAssets}
-    ></cx-file-on-demand-asset>`;
-  }
-  renderRecentAssets() {
-    const t = n`
-      <div class="recent-empty assets-list__tab-group__empty-message">
-        <cx-icon class="empty-icon" name="explore"></cx-icon>
-        <cx-typography variant="body2">
-          ${this.localize.term("allViewedAssetsWillBeVisibleHere")}
-        </cx-typography>
-      </div>
-    `, [e, i] = ut(
-      this.recentAssets.assets
-    ), a = n`
-      <div class="recent__list" @scroll=${this.requestMoreRecentAssets}>
-        <div
-          class=${C({
-      empty: e.length === 0,
-      recent__today: !0
-    })}
-          data-testid="recent__today"
-        >
-          <div class="asset-group__label">
-            <cx-typography variant="small">
-              ${this.localize.term("today")}
-            </cx-typography>
-          </div>
-          ${U(
-      e,
-      (s) => s.recordId,
-      (s) => this.renderAsset(s, x.RECENT)
-    )}
-        </div>
-        <div
-          class=${C({
-      empty: i.length === 0,
-      recent__other: !0
-    })}
-        >
-          <div class="asset-group__label">
-            <cx-typography variant="small">
-              ${this.localize.term("allOther")}
-            </cx-typography>
-          </div>
-          ${U(
-      i,
-      (s) => s.recordId,
-      (s) => this.renderAsset(s, x.RECENT)
-    )}
-        </div>
-      </div>
-    `;
-    return n`
-      <cx-tab-panel
-        name=${x.RECENT}
-        class="assets-list__recent-tab-panel"
-      >
-        ${p(
-      this.recentAssets.assets.length > 0,
-      () => a,
-      () => t
-    )}
-      </cx-tab-panel>
-    `;
-  }
-  renderFavoriteAssets() {
-    const t = n`
-      <div class="favorites-empty assets-list__tab-group__empty-message">
-        <cx-icon class="empty-icon" name="star"></cx-icon>
-        <cx-typography variant="body2">
-          ${this.localize.term("allFavoriteAssetsWillBeVisibleHere")}
-        </cx-typography>
-      </div>
-    `, e = mt(this.favoriteAssets.assets), i = n`
-      <div class="favorites__list" @scroll=${this.requestMoreFavoriteAssets}>
-        ${U(
-      e,
-      (a) => a.recordId,
-      (a) => this.renderAsset(a, x.FAVORITES)
-    )}
-      </div>
-    `;
-    return n`
-      <cx-tab-panel
-        name=${x.FAVORITES}
-        class="assets-list__favorites-tab-panel"
-      >
-        <div class="favorites-tab-panel__content">
-          <div class="asset-group__label favorites__sync-time">
-            <cx-typography variant="small">
-              ${this.localize.term("favoritesSync")} -
-              <cx-relative-time
-                format="narrow"
-                numeric="always"
-                date=${new Date(this.favoritesLastSync)}
-                sync
-                sync-interval=${O}
-              ></cx-relative-time>
-            </cx-typography>
-          </div>
-          ${p(
-      e.length > 0,
-      () => i,
-      () => t
-    )}
-        </div>
-      </cx-tab-panel>
-    `;
-  }
-  renderUploadingAssets() {
-    const t = n`
-      <div class="uploads-empty assets-list__tab-group__empty-message">
-        <cx-icon class="empty-icon" name="arrow_upward"></cx-icon>
-        <cx-typography variant="body2">
-          ${this.localize.term("allAssetUploadsWillBeVisibleHere")}
-        </cx-typography>
-      </div>
-    `, [e, i] = ut(
-      this.uploadingAssets.assets
-    ), a = n`
-      <div class="uploads__list" @scroll=${this.requestMoreUploadingAssets}>
-        <div
-          class=${C({
-      empty: e.length === 0,
-      recent__today: !0
-    })}
-          data-testid="uploads__today"
-        >
-          <div class="asset-group__label">
-            <cx-typography variant="small">
-              ${this.localize.term("today")}
-            </cx-typography>
-            <cx-button
-              class="asset-group__clear-button"
-              variant="text"
-              size="small"
-              @click=${this.clearUpload}
-            >
-              ${this.localize.term("clearAll")}
-            </cx-button>
-          </div>
-          ${U(
-      e,
-      (s) => s.recordId,
-      (s) => this.renderAsset(s, x.UPLOADS)
-    )}
-        </div>
-        <div
-          class=${C({
-      empty: i.length === 0,
-      uploads__other: !0
-    })}
-        >
-          <div class="asset-group__label">
-            <cx-typography variant="small">
-              ${this.localize.term("allOther")}
-            </cx-typography>
-          </div>
-          ${U(
-      i,
-      (s) => s.recordId,
-      (s) => this.renderAsset(s, x.UPLOADS)
-    )}
-        </div>
-      </div>
-    `;
-    return n`
-      <cx-tab-panel
-        name=${x.UPLOADS}
-        class="assets-list__uploads-tab-panel"
-      >
-        ${p(
-      this.uploadingAssets.assets.length > 0,
-      () => a,
-      () => t
-    )}
-      </cx-tab-panel>
-    `;
-  }
-  renderPinnedAssets() {
-    const t = n`
-      <div class="pinned-empty assets-list__tab-group__empty-message">
-        <cx-icon class="empty-icon" name="keep"></cx-icon>
-        <cx-typography variant="body2">
-          ${this.localize.term("allPinnedAssetsWillBeVisibleHere")}
-        </cx-typography>
-      </div>
-    `, e = mt(this.pinnedAssets.assets), i = n`
-      <div class="pinned__list" @scroll=${this.requestMorePinnedAssets}>
-        ${U(
-      e,
-      (a) => a.recordId,
-      (a) => this.renderAsset(a, x.PINNED)
-    )}
-      </div>
-    `;
-    return n`
-      <cx-tab-panel
-        name=${x.PINNED}
-        class="assets-list__pinned-tab-panel"
-      >
-        <div class="pinned-tab-panel__content">
-          ${p(
-      e.length > 0,
-      () => i,
-      () => t
-    )}
-        </div>
-      </cx-tab-panel>
-    `;
-  }
-  renderAssetsList() {
-    return n`
-      <div class="assets-list">
-        <cx-tab-group
-          @cx-tab-show=${async (e) => {
-      switch (await e.target.updateComplete, e.detail.name) {
-        case x.RECENT:
-          this.requestMoreRecentAssets();
-          break;
-        case x.FAVORITES:
-          this.requestMoreFavoriteAssets();
-          break;
-        case x.UPLOADS:
-          this.requestMoreUploadingAssets();
-          break;
-        case x.PINNED:
-          this.requestMorePinnedAssets();
-          break;
-      }
-    }}
-          no-scroll-controls
-          class="assets-list__tab-group"
-        >
-          <cx-tab
-            active
-            data-testid="assets-list__recent-tab"
-            slot="nav"
-            panel=${x.RECENT}
-          >
-            ${this.localize.term("recent")}
-          </cx-tab>
-          <cx-tab
-            data-testid="assets-list__pins-tab"
-            slot="nav"
-            panel=${x.PINNED}
-          >
-            ${this.localize.term("pins")}
-          </cx-tab>
-          <cx-tab
-            data-testid="assets-list__favorites-tab"
-            slot="nav"
-            panel=${x.FAVORITES}
-          >
-            ${this.localize.term("favorites")}
-          </cx-tab>
-          <cx-tab
-            data-testid="assets-list__uploads-tab"
-            slot="nav"
-            panel=${x.UPLOADS}
-          >
-            ${this.localize.term("uploads")}
-          </cx-tab>
-          ${this.renderRecentAssets()} ${this.renderFavoriteAssets()}
-          ${this.renderUploadingAssets()} ${this.renderPinnedAssets()}
-        </cx-tab-group>
-      </div>
-    `;
-  }
-  renderAssetsView() {
-    return n`
-      <div class="assets">
-        ${this.renderHeader()}${this.renderAssetsList()}${this.renderStatusFooter()}
-      </div>
-    `;
-  }
-  onSearch() {
-    this.folderPathsSet = /* @__PURE__ */ new Set(), this.fetchFolders({
-      folderId: "",
-      folderPathsSet: this.folderPathsSet
-    }).then((t) => {
-      this.availableFolderIdentifiers = t.data, this.totalCount = t.totalCount;
-    });
-  }
-  renderSelectFoldersPopup() {
-    const t = () => {
-      this.folderTree.rootIDs = this.rootIDs, this.dialog.show();
-    }, e = (s = null) => {
-      s?.target && s.target !== this.dialog || (this.folderTree.resetTree(), this.folderTree.rootIDs = [], this.folderTree.removedIDs = [], this.dialog.hide(), this.searchText = "");
-    }, i = async () => {
-      this.isAddingRootIDs = !0, await this.updateComplete, this.searchText = "";
-      const s = this.rootIDs.filter((h) => {
-        if (!this.folderTree.shadowRoot?.querySelector(
-          `[data-id="${S(h).id}"]`
-        ))
-          return !0;
-      }), o = /* @__PURE__ */ new Set([
-        ...this.folderTree.currentRootIDs,
-        ...s
-      ]);
-      for (const h of o) {
-        const _ = R(S(h).path), m = this.folderTree.removedIDs.filter(
-          (g) => R(S(g).path).startsWith(_)
-        );
-        if (m.length > 0) {
-          const { totalCount: g } = await this.fetchFolders({
-            excludes: m.map((f) => S(f).id),
-            folderId: S(h).id,
-            start: 0
-          }), { data: $ } = await this.fetchFolders({
-            excludes: m.map((f) => S(f).id),
-            folderId: S(h).id,
-            limit: g || 10,
-            start: 0
-          });
-          $.forEach((f) => {
-            o.add(
-              N({ id: f.id, path: f.fullPath })
-            );
-          }), o.delete(h);
-        }
-      }
-      const c = Array.from(o);
-      this.updateActiveFolderIdentifiers(c), this.removedIds = c.filter(
-        (h) => [...c].some((_) => {
-          const m = S(h), g = S(_), $ = R(g.path);
-          return _ !== h && m.path.startsWith($);
-        })
-      ), e(), this.isAddingRootIDs = !1;
-    }, a = (s) => {
-      const o = s.target;
-      this.searchText = (o.value ?? "").trim();
-    };
-    return n`
-      <cx-dialog
-        class="select-folders-popup"
-        no-header
-        @cx-after-hide=${e}
-        .boundary=${this.container}
-      >
-        <cx-input
-          autofocus
-          clearable
-          @cx-input=${a}
-          value=${this.searchText}
-          placeholder=${this.localize.term("search")}
-        >
-          <cx-icon name="search" slot="prefix"></cx-icon>
-        </cx-input>
-        ${this.renderSelectableFolderTree()}
-        <div class="select-folders-popup__actions">
-          <cx-button
-            ?loading=${this.isAddingRootIDs}
-            variant="primary"
-            @click=${i}
-          >
-            ${this.localize.term("add")}
-          </cx-button>
-        </div>
-      </cx-dialog>
-      <cx-button
-        data-testid="settings__select-folders-button"
-        @click=${t}
-      >
-        <cx-icon name="folder" slot="prefix"></cx-icon>
-        ${this.localize.term("selectFolders")}
-      </cx-button>
-    `;
-  }
-  renderSelectableFolderTree() {
-    const t = this.availableFolderIdentifiers;
-    return n`
-      <cx-folder-tree
-        class="selectable-folder-tree"
-        .siteUrl=${this.settings.config.siteUrl}
-        .token=${this.token}
-        .searchText=${this.searchText}
-        .folders=${t}
-        .rootIDs=${this.rootIDs}
-        .totalCount=${this.totalCount}
-        .loadMore=${this.loadMore}
-        .folderPathsSet=${this.folderPathsSet}
-        ?isLoading=${this.isLoading}
-      ></cx-folder-tree>
-    `;
-  }
-  renderRootFolderTree() {
-    if (!this.rootIDs.length)
-      return Nt;
-    const t = this.rootIDs.filter(
-      (a) => !this.removedIds.includes(a)
-    ), e = (a) => {
-      this.updateActiveFolderIdentifiers(
-        t.filter(
-          (s) => S(s).id !== a
-        )
-      ), this.folderTree.rootIDs = this.rootIDs, this.folderTree.resetTree();
-    }, i = (a) => {
-      const { id: s, path: o } = S(a), c = () => {
-        e(s);
-      };
-      return n`
-        <cx-tree-item
-          data-id=${s}
-          class=${C({
-        "folder-tree__item": !0
-      })}
-        >
-          <div class="folder-tree__label">
-            <cx-icon class="folder-tree__icon" name="folder"></cx-icon>
-            <cx-line-clamp lines="1" class="folder-tree__label__value">
-              ${o}
-            </cx-line-clamp>
-          </div>
-          <cx-tooltip
-            slot="actions"
-            content=${this.localize.term("removeFolder", 1)}
-            hoist
-          >
-            <cx-icon-button
-              @click=${c}
-              name="close"
-            ></cx-icon-button>
-          </cx-tooltip>
-        </cx-tree-item>
-      `;
-    };
-    return n`
-      <div data-testid="root-folder-tree" class="folder-tree">
-        <cx-tree selection="none">
-          ${U(
-      t,
-      (a) => a,
-      (a) => i(a)
-    )}
-          >
-        </cx-tree>
-      </div>
-    `;
-  }
-  handleActiveFolderChange(t) {
-    t.target.value === "custom" ? (this._activeFoldersMode = !0, this.rootIDs = this.settings.config.rootIDs ?? []) : (this._activeFoldersMode = !1, this.rootIDs = []);
-  }
-  renderGeneralSettings() {
-    const t = n`
-      <div class="settings-group settings__active-folder">
-        <cx-typography variant="h5">
-          ${this.localize.term("activeFolders")}
-        </cx-typography>
-        <cx-typography variant="body3">
-          ${this.localize.term("activeFoldersHelpText")}
-        </cx-typography>
-        <cx-select
-          data-testid="settings__active-folder-select"
-          hoist
-          input-behavior="none"
-          value=${this._activeFoldersMode ? "custom" : "all"}
-          @cx-change=${this.handleActiveFolderChange}
-        >
-          <cx-option value="all">
-            ${this.localize.term("allFoldersDefault")}
-          </cx-option>
-          <cx-option value="custom">${this.localize.term("custom")}</cx-option>
-        </cx-select>
-        ${p(
-      this._activeFoldersMode,
-      () => n`
-            ${this.renderRootFolderTree()} ${this.renderSelectFoldersPopup()}
-          `
-    )}
-      </div>
-    `;
-    return n`
-      <div class="settings__general">
-        ${t}
-        <div class="settings-group settings__software">
-          <cx-typography variant="h5">
-            ${this.localize.term("software")}
-          </cx-typography>
-          <div class="settings__software__version">
-            <div class="settings__software__version__value">
-              <cx-line-clamp
-                lines="1"
-                class="settings__software__version__value__text"
-              >
-                <cx-typography variant="body3">
-                  ${this.localize.term("currentVersion")}
-                  ${gt(this.settings.config.version ?? "")}
-                </cx-typography>
-              </cx-line-clamp>
-            </div>
-            ${p(
-      this.hasNewVersion,
-      () => n`<div class="settings__software__version__value">
-                  <cx-badge
-                    class="settings__version__badge"
-                    slot="badge"
-                    variant="danger"
-                    pill
-                    size="x-small"
-                  ></cx-badge>
-
-                  <cx-line-clamp
-                    lines="1"
-                    class="settings__software__version__value__text"
-                  >
-                    <cx-typography variant="body3">
-                      ${this.localize.term(
-        "newVersionAvailable",
-        gt(
-          this.settings.config.latestVersion ?? ""
-        )
-      )}
-                    </cx-typography>
-                  </cx-line-clamp>
-                  <cx-button
-                    size="small"
-                    ?loading=${this.isUpgrading}
-                    class="settings__software__version__install-button"
-                    outline
-                    @click=${this.upgrade}
-                  >
-                    <cx-icon name="install_desktop" slot="prefix"></cx-icon>
-                    ${this.localize.term("download")}
-                  </cx-button>
-                </div>`
-    )}
-          </div>
-        </div>
-        <div class="settings-group settings__connection">
-          <cx-typography variant="h5">
-            ${this.localize.term("connection")}
-          </cx-typography>
-          <div class="settings__connection-url">
-            <cx-typography variant="body3">URL:</cx-typography>
-            <cx-line-clamp class="settings__connection-url__value" lines="1">
-              <cx-typography variant="body3">
-                ${this.settings.config.siteUrl}
-              </cx-typography>
-            </cx-line-clamp>
-          </div>
-        </div>
-        <cx-space direction="vertical">
-          <div class="settings__disconnect">
-            <cx-button
-              slot="trigger"
-              ?loading=${this.isDisconnecting}
-              text
-              variant="text"
-              class="settings__disconnect-button"
-              @click=${this.disconnect}
-            >
-              <cx-icon name="cloud_off" slot="prefix"></cx-icon>
-              ${this.localize.term("disconnect")}
-            </cx-button>
-            <cx-typography class="error-message" variant="body3">
-              ${this.disconnectError}
-            </cx-typography>
-          </div>
-        </cx-space>
-        <div class="settings-group settings__about">
-          <div data-testid="settings__about__content">
-            <cx-typography variant="small">${this.aboutContent}</cx-typography>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-  handleProxyChange(t) {
-    const i = t.target.value;
-    i.includes("All") ? this.proxyTypes = ["All"] : this.proxyTypes = i;
-  }
-  handleCacheSizeKeydown(t) {
-    const e = /\d/;
-    // Block minus sign and non-numeric characters
-    (t.key === "Minus" || // for key="-" (Firefox)
-    t.key === "-" || // for key="-" (Chrome)
-    t.key.length === 1 && !e.test(t.key)) && t.preventDefault();
-  }
-  handleCacheSizeChange(t) {
-    const e = t.target;
-    if (Number(e.value) < 0) {
-      e.setCustomValidity(this.localize.term("cacheSizeCannotBeNegative"));
-      return;
-    }
-    this.cacheSize = Number(e.value);
-  }
-  async handleCacheLocationClick() {
-    const t = await this.pickCacheLocation();
-    this.cacheLocation = t;
-  }
-  async handleCacheLocationChange() {
-    await this.updateComplete, this.cacheLocationValueText?.handleResize();
-  }
-  renderAdvancedSettings() {
-    const t = n`<cx-tooltip
-      content=${this.localize.term("openDrive")}
-      hoist
-    >
-      <cx-icon-button
-        data-testid="settings__cache__location__open-button"
-        name="folder_open"
-        outline
-        @click=${this.openCacheLocation}
-      ></cx-icon-button>
-    </cx-tooltip>`;
-    return n`
-      <div class="settings__advanced">
-        <div class="settings-group settings__proxy">
-          <cx-typography variant="h5">Proxy</cx-typography>
-          <cx-select
-            class="settings__proxy__select"
-            label=${this.localize.term("types")}
-            multiple
-            input-behavior="none"
-            value=${(this.proxyTypes ?? []).join(" ")}
-            @cx-change=${this.handleProxyChange}
-          >
-            <cx-option
-              value="Image"
-              ?disabled=${(this.proxyTypes ?? []).includes("All")}
-              >${this.localize.term("image")}</cx-option
-            >
-            <cx-option
-              value="Video"
-              ?disabled=${(this.proxyTypes ?? []).includes("All")}
-              >${this.localize.term("video")}</cx-option
-            >
-            <cx-option
-              value="Audio"
-              ?disabled=${(this.proxyTypes ?? []).includes("All")}
-              >${this.localize.term("audio")}</cx-option
-            >
-            <cx-option value="All">${this.localize.term("all")}</cx-option>
-          </cx-select>
-          <cx-typography variant="small">
-            ${this.localize.term(
-      "itCanTakeAFewMinutesForThisSettingToTakeEffect"
-    )}
-          </cx-typography>
-        </div>
-        <div class="settings-group settings__cache">
-          <cx-typography variant="h5">
-            ${this.localize.term("cache")}
-          </cx-typography>
-          <div class="settings__cache__size">
-            <cx-typography
-              variant="body3"
-              class="settings__cache__size__label"
-            >
-              ${this.localize.term("currentUsage")}: <cx-format-bytes .value=${this.settings.cacheUsage}></cx-format-bytes>
-            </cx-typography>
-            <cx-typography
-              variant="body3"
-              class="settings__cache__size__label"
-            >
-              ${this.localize.term("capacity")}
-            </cx-typography>
-            <cx-input
-              data-testid="settings__cache__size__input"
-              label=${this.localize.term("size")}
-              type="number"
-              no-spin-buttons
-              min="0"
-              step="any"
-              value=${this.cacheSize}
-              @keydown=${this.handleCacheSizeKeydown}
-              @cx-change=${this.handleCacheSizeChange}
-            >
-              <cx-typography slot="suffix" variant="body2"
-                >${Z}</cx-typography
-              >
-            </cx-input>
-          </div>
-          <div class="settings__cache__location">
-            <cx-typography
-              variant="body3"
-              class="settings__cache__location__label"
-            >
-              ${this.localize.term("location")}
-            </cx-typography>
-            <div class="settings__cache__location__value">
-              <cx-line-clamp
-                lines="1"
-                class="settings__cache__location__value__text"
-              >
-                <cx-typography variant="body3">
-                  ${this.cacheLocation}
-                </cx-typography>
-              </cx-line-clamp>
-              <cx-space
-                spacing="x-small"
-                class="settings__cache__location__actions"
-              >
-                <cx-button
-                  class="settings__cache__location__change-button"
-                  outline
-                  @click=${this.handleCacheLocationClick}
-                >
-                  <cx-icon name="edit" slot="prefix"></cx-icon>
-                  ${this.localize.term("change")}
-                </cx-button>
-                ${t}
-              </cx-space>
-            </div>
-          </div>
-
-          <div class="settings__cache__buttons">
-            <cx-button
-              data-testid="settings__cache__clear-button"
-              @click=${this.clearCache}
-            >
-              <cx-icon name="delete" slot="prefix"></cx-icon>
-              ${this.localize.term("clearCache")}
-            </cx-button>
-          </div>
-        </div>
-        <div class="settings-group settings__config">
-          <cx-typography variant="h5">
-            ${this.localize.term("config")}
-          </cx-typography>
-          <div class="settings__config__buttons">
-            <cx-button
-              data-testid="settings__config__export-button"
-              @click=${this.exportSettings}
-            >
-              <cx-icon name="file_download" slot="prefix"></cx-icon>
-              ${this.localize.term("export")}
-            </cx-button>
-            <cx-button
-              @click=${this.importSettings}
-              data-testid="settings__config__import-button"
-            >
-              <cx-icon name="file_upload" slot="prefix"></cx-icon>
-              ${this.localize.term("import")}
-            </cx-button>
-          </div>
-        </div>
-        <div class="settings-group settings__logs">
-          <cx-typography variant="h5">
-            ${this.localize.term("logs")}
-          </cx-typography>
-          <div class="settings__logs__buttons">
-            <cx-button
-              data-testid="settings__logs__view-button"
-              @click=${this.viewLogs}
-            >
-              <cx-icon name="code" slot="prefix"></cx-icon>
-              ${this.localize.term("view")}
-            </cx-button>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-  renderSettingsView() {
-    const t = () => {
-      this.hideSettings();
-    };
-    return n`
-      <div class="settings">
-        <form class="settings__form" @submit=${(i) => {
-      i.preventDefault(), this.saveSettings();
-    }}>
-          <cx-tab-group no-scroll-controls class="settings__tab-group">
-            <cx-tab
-              active
-              class="settings_general-tab"
-              slot="nav"
-              panel="general"
-            >
-              ${this.localize.term("general")}
-            </cx-tab>
-            <cx-tab
-              data-testid="settings_advanced-tab"
-              slot="nav"
-              panel="advanced"
-            >
-              ${this.localize.term("advanced")}
-            </cx-tab>
-            <cx-tab-panel name="general">
-              ${this.renderGeneralSettings()}
-            </cx-tab-panel>
-            <cx-tab-panel name="advanced" class="settings_advanced-tab-panel">
-              ${this.renderAdvancedSettings()}
-            </cx-tab-panel>
-          </cx-tab-group>
-          <div class="settings__footer">
-            <div class="settings__footer__actions">
-              <cx-button
-                data-testid="settings__cancel-button"
-                type="button"
-                @click=${t}
-              >
-                ${this.localize.term("cancel")}
-              </cx-button>
-              <cx-button
-                data-testid="settings__save-button"
-                ?disabled=${!this.formHasChanges}
-                type="submit"
-                variant="primary"
-              >
-                ${this.localize.term("save")}
-              </cx-button>
-            </div>
-          </div>
-        </form>
-      </div>
-    `;
-  }
-  // #endregion
-  renderStatusFooter() {
-    const t = n`
-      <cx-typography class="error-message" variant="small">
-        ${this.localize.term("fileOnDemandSyncErrorMessage")}
-      </cx-typography>
-    `, e = () => {
-      switch (this.connectionStatus) {
-        case "excellent":
-          return n`
-            <cx-icon variant="filled" name="check_circle"></cx-icon>
-          `;
-        case "good":
-          return n` <cx-icon variant="filled" name="circle"></cx-icon> `;
-        case "bad":
-          return n` <cx-icon variant="filled" name="circle"></cx-icon> `;
-      }
-    }, i = () => {
-      switch (this.assetIndexSyncStatus) {
-        case "loaded":
-          return n`
-            <cx-icon variant="filled" name="check_circle"></cx-icon>
-          `;
-        case "loading":
-          return n` <cx-icon variant="filled" name="cached"></cx-icon> `;
-        case "error":
-          return n` <cx-icon variant="filled" name="error"></cx-icon> `;
-      }
-    }, a = n`<div
-      class=${C({
-      "connection-status": !0,
-      "connection-status--bad": this.connectionStatus === "bad",
-      "connection-status--excellent": this.connectionStatus === "excellent",
-      "connection-status--good": this.connectionStatus === "good"
-    })}
-    >
-      <cx-typography class="label" variant="small">
-        ${this.localize.term("connection")}
-      </cx-typography>
-      <cx-tooltip
-        class="connection-status__tooltip"
-        content=${this.connectionStatusTooltip}
-        hoist
-        ?disabled=${!this.connectionStatusTooltip.trim()}
-      >
-        <div class="connection-status__value">
-          <cx-typography variant="small">
-            ${this.connectionStatus}
-          </cx-typography>
-          ${e()}
-        </div>
-      </cx-tooltip>
-    </div>`, s = this.settings.cacheUsage >= this.settings.cacheSize;
-    return n`
-      <cx-divider class="status-footer__divider"></cx-divider>
-      <div class="status-footer">
-        <div class="connected-url">
-          <cx-typography class="label" variant="small">
-            ${this.localize.term("connectedTo")}
-          </cx-typography>
-          <cx-line-clamp class="value-line-clamp" lines="1">
-            <cx-typography class="value" variant="small">
-              ${this.settings.config.siteUrl}
-            </cx-typography>
-          </cx-line-clamp>
-        </div>
-        ${a}
-        <div
-          class=${C({
-      "asset-index-sync-status": !0,
-      "asset-index-sync-status--error": this.assetIndexSyncStatus === "error",
-      "asset-index-sync-status--loaded": this.assetIndexSyncStatus === "loaded",
-      "asset-index-sync-status--loading": this.assetIndexSyncStatus === "loading"
-    })}
-        >
-          <cx-typography class="label" variant="small">
-            ${this.localize.term("assetIndexSync")}
-          </cx-typography>
-          <div class="value">
-            <cx-typography variant="small">
-              ${me[this.assetIndexSyncStatus]}
-            </cx-typography>
-            ${i()}
-          </div>
-        </div>
-        <div class="cache-usage">
-          <cx-typography class="label" variant="small">
-            ${this.localize.term("cache")}
-          </cx-typography>
-          <cx-tooltip ?disabled=${!s} content=${this.localize.term("cacheUsageWarning")}>
-            <cx-space spacing="3x-small">
-              <cx-line-clamp class="value-line-clamp" lines="1">
-                <cx-typography class="value" variant="small">
-                  <cx-format-bytes .value=${this.settings.cacheUsage}></cx-format-bytes>
-                  /
-                  <cx-format-bytes .value=${this.settings.cacheSize}></cx-format-bytes>
-                </cx-typography>
-              </cx-line-clamp>
-              ${p(s, () => n`<cx-icon class="cache-usage__warning-icon" name="warning" variant="filled"></cx-icon>`)}
-            </cx-space>
-          </cx-tooltip>
-        </div>
-        ${p(this.assetIndexSyncStatus === "error", () => t)}
-      </div>
-    `;
-  }
-  handleConnectionURLInput(t) {
-    this.validConnectionUrl = !0, this.siteUrl = t.target.value.trim();
-    const e = ht(this.siteUrl);
-    K(e) || (this.validConnectionUrl = !1);
-  }
-  renderWelcomeView() {
-    return n`
-      <div class="welcome">
-        <div class="welcome__message">
-          <cx-typography variant="h5">
-            ${this.localize.term("welcomeToFileOnDemand")}
-          </cx-typography>
-          <cx-typography variant="body3">
-            ${this.localize.term("enterYourSiteUrlToConnect")}
-          </cx-typography>
-        </div>
-        <form class="welcome__actions" @submit=${this.connect}>
-          <cx-input
-            aria-label=${this.localize.term("connectionURLInput")}
-            class="welcome__input"
-            placeholder="Ex: https://cortex.orangelogic.com/"
-            value=${this.settings.config.siteUrl}
-            @cx-input=${this.handleConnectionURLInput}
-          ></cx-input>
-          <cx-tooltip
-            class="welcome__connect-button__tooltip"
-            ?disabled=${this.siteUrl.trim() && this.validConnectionUrl}
-            content=${this.siteUrl.trim() ? this.localize.term("pleaseEnterAValidUrl") : this.localize.term("connectionCannotBeEmpty")}
-          >
-            <cx-button
-              type="submit"
-              ?loading=${this.isConnecting}
-              variant="primary"
-              class=${C({
-      "welcome__connect-button": !0,
-      "welcome__connect-button--disabled": !this.siteUrl.trim() || !this.validConnectionUrl
-    })}
-              ?disabled=${!this.siteUrl.trim() || !this.validConnectionUrl}
-            >
-              ${this.localize.term("connect")}
-            </cx-button>
-          </cx-tooltip>
-          <cx-button
-            type="button"
-            ?loading=${this.isCancellingConnection}
-            variant="text"
-            class=${C({
-      "welcome__cancel-connection-button": !0
-    })}
-            ?disabled=${!this.isConnecting}
-            @click=${this.cancelConnection}
-          >
-            ${this.localize.term("cancel")}
-          </cx-button>
-          <cx-typography class="error-message" variant="body3">
-            ${p(
-      this.connectError,
-      () => this.connectError,
-      () => " "
-    )}
-          </cx-typography>
-        </form>
-      </div>
-    `;
-  }
-  renderView() {
-    return this.connectionEstablished ? this.isSettingsOpened ? this.renderSettingsView() : this.renderAssetsView() : this.renderWelcomeView();
-  }
-  renderLoadingOverlay() {
-    return n`
-      <div class="loading-overlay">
-        <cx-spinner></cx-spinner>
-      </div>
-    `;
-  }
-  render() {
-    return n`
-      <div
-        class=${C({
-      container: !0,
-      "container--connected": this.connectionEstablished,
-      "container--user-interaction-blocked": this.userInteractionBlocked
-    })}
-      >
-        ${this.renderView()}
-        ${p(this.userInteractionBlocked, () => this.renderLoadingOverlay())}
-      </div>
-    `;
-  }
-  // #endregion
-};
-r.styles = Ze;
-r.dependencies = {
-  "cx-avatar": Mt,
-  "cx-button": Vt,
-  "cx-confirm-popover": Qt,
-  "cx-dialog": Ht,
-  "cx-divider": Wt,
-  "cx-file-on-demand-asset": L,
-  "cx-folder-tree": b,
-  "cx-format-bytes": ot,
-  "cx-icon": J,
-  "cx-icon-button": Ct,
-  "cx-input": qt,
-  "cx-line-clamp": Q,
-  "cx-option": Gt,
-  "cx-relative-time": At,
-  "cx-select": Yt,
-  "cx-space": Kt,
-  "cx-tab": Xt,
-  "cx-tab-group": Zt,
-  "cx-tab-panel": Jt,
-  "cx-tooltip": Dt,
-  "cx-tree": $t,
-  "cx-tree-item": yt,
-  "cx-typography": nt
-};
-l([
-  z(".container")
-], r.prototype, "container", 2);
-l([
-  z("cx-folder-tree")
-], r.prototype, "folderTree", 2);
-l([
-  z("cx-dialog")
-], r.prototype, "dialog", 2);
-l([
-  z(".recent__list")
-], r.prototype, "recentAssetsList", 2);
-l([
-  z(".favorites__list")
-], r.prototype, "favoritesAssetsList", 2);
-l([
-  z(".uploads__list")
-], r.prototype, "uploadsAssetsList", 2);
-l([
-  z(".pinned__list")
-], r.prototype, "pinnedAssetsList", 2);
-l([
-  z(".assets-list__tab-group")
-], r.prototype, "assetsListTabGroup", 2);
-l([
-  z(".settings__cache__location__value__text")
-], r.prototype, "cacheLocationValueText", 2);
-l([
-  d({
-    attribute: "connection-established",
-    type: Boolean
-  })
-], r.prototype, "connectionEstablished", 2);
-l([
-  d({
-    attribute: "connection-status",
-    reflect: !0,
-    type: String
-  })
-], r.prototype, "connectionStatus", 2);
-l([
-  d({
-    attribute: "connection-status-tooltip",
-    type: String
-  })
-], r.prototype, "connectionStatusTooltip", 2);
-l([
-  d({
-    attribute: "asset-index-sync-status",
-    reflect: !0,
-    type: String
-  })
-], r.prototype, "assetIndexSyncStatus", 2);
-l([
-  d({
-    attribute: "user-avatar-url",
-    type: String
-  })
-], r.prototype, "userAvatarUrl", 2);
-l([
-  d({
-    type: String
-  })
-], r.prototype, "username", 2);
-l([
-  d({
-    attribute: "recent-assets",
-    type: Object
-  })
-], r.prototype, "recentAssets", 2);
-l([
-  d({
-    attribute: "favorite-assets",
-    type: Object
-  })
-], r.prototype, "favoriteAssets", 2);
-l([
-  d({
-    attribute: "favorite-last-sync",
-    type: Number
-  })
-], r.prototype, "favoritesLastSync", 2);
-l([
-  d({
-    attribute: "favorite-in-progress-assets",
-    converter: {
-      fromAttribute: (t) => t.split(" ").filter(Boolean),
-      toAttribute: (t) => t.join(" ")
-    },
-    type: String
-  })
-], r.prototype, "favoriteInProgressAssets", 2);
-l([
-  d({
-    attribute: "pin-in-progress-assets",
-    converter: {
-      fromAttribute: (t) => t.split(" ").filter(Boolean),
-      toAttribute: (t) => t.join(" ")
-    },
-    type: String
-  })
-], r.prototype, "pinInProgressAssets", 2);
-l([
-  d({
-    attribute: "uploading-assets",
-    type: Object
-  })
-], r.prototype, "uploadingAssets", 2);
-l([
-  d({
-    attribute: "pinned-assets",
-    type: Object
-  })
-], r.prototype, "pinnedAssets", 2);
-l([
-  u()
-], r.prototype, "availableFolderIdentifiers", 2);
-l([
-  u()
-], r.prototype, "isLoading", 2);
-l([
-  d({
-    attribute: "settings",
-    type: Object
-  })
-], r.prototype, "settings", 2);
-l([
-  d({ attribute: "pick-cache-location", type: Function })
-], r.prototype, "pickCacheLocation", 2);
-l([
-  d({
-    attribute: "has-new-version",
-    type: Boolean
-  })
-], r.prototype, "hasNewVersion", 2);
-l([
-  d({
-    attribute: "about-content",
-    type: String
-  })
-], r.prototype, "aboutContent", 2);
-l([
-  d({ type: String })
-], r.prototype, "token", 2);
-l([
-  d({
-    attribute: "user-interaction-blocked",
-    type: Boolean
-  })
-], r.prototype, "userInteractionBlocked", 2);
-l([
-  d({
-    attribute: "is-connecting",
-    type: Boolean
-  })
-], r.prototype, "isConnecting", 2);
-l([
-  d({
-    attribute: "is-cancelling-connection",
-    type: Boolean
-  })
-], r.prototype, "isCancellingConnection", 2);
-l([
-  d({
-    attribute: "is-disconnecting",
-    type: Boolean
-  })
-], r.prototype, "isDisconnecting", 2);
-l([
-  d({
-    attribute: "is-upgrading",
-    type: Boolean
-  })
-], r.prototype, "isUpgrading", 2);
-l([
-  u()
-], r.prototype, "isSettingsOpened", 2);
-l([
-  u()
-], r.prototype, "rootIDs", 2);
-l([
-  u()
-], r.prototype, "_activeFoldersMode", 2);
-l([
-  u()
-], r.prototype, "removedIds", 2);
-l([
-  u()
-], r.prototype, "cacheSize", 2);
-l([
-  u()
-], r.prototype, "cacheLocation", 2);
-l([
-  u()
-], r.prototype, "proxyTypes", 2);
-l([
-  u()
-], r.prototype, "siteUrl", 2);
-l([
-  u()
-], r.prototype, "isRecentAssetsLoading", 2);
-l([
-  u()
-], r.prototype, "isFavoriteAssetsLoading", 2);
-l([
-  u()
-], r.prototype, "isUploadingAssetsLoading", 2);
-l([
-  u()
-], r.prototype, "isPinnedAssetsLoading", 2);
-l([
-  u()
-], r.prototype, "connectError", 2);
-l([
-  u()
-], r.prototype, "disconnectError", 2);
-l([
-  u()
-], r.prototype, "upgradeError", 2);
-l([
-  u()
-], r.prototype, "totalCount", 2);
-l([
-  u()
-], r.prototype, "folderPathsSet", 2);
-l([
-  u()
-], r.prototype, "validConnectionUrl", 2);
-l([
-  u()
-], r.prototype, "isAddingRootIDs", 2);
-l([
-  P(["connectionEstablished", "token"])
-], r.prototype, "fetchData", 1);
-l([
-  P(["connectionEstablished"])
-], r.prototype, "showRecentTab", 1);
-l([
-  P("settings")
-], r.prototype, "updateSettingsStates", 1);
-l([
-  P("recentAssets")
-], r.prototype, "onRecentAssetsChanged", 1);
-l([
-  P("pinnedAssets")
-], r.prototype, "onPinnedAssetsChanged", 1);
-l([
-  P("favoriteAssets")
-], r.prototype, "onFavoriteAssetsChanged", 1);
-l([
-  P("uploadingAssets")
-], r.prototype, "onUploadingAssetsChanged", 1);
-l([
-  u()
-], r.prototype, "searchText", 2);
-l([
-  P(["searchText"]),
-  te(200)
-], r.prototype, "onSearch", 1);
-l([
-  P("cacheLocation")
-], r.prototype, "handleCacheLocationChange", 1);
-r = l([
-  W("cx-file-on-demand")
-], r);
-export {
-  r as C,
-  Ve as a,
-  Ne as b,
-  Be as c,
-  ft as d,
-  He as e,
-  We as i,
-  ze as o,
-  Oe as s
-};