@orangelogic/design-system 2.19.0-ci.5

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

@@ -0,0 +1,3396 @@
+import lt from "../components/icon.js";
+import dt from "../components/line-clamp.js";
+import { C as pt, s as ht, a as ut, b as Q } from "./tree.5Cb85J9q.js";
+import { n as p, C as Y, x as r, c as K, i as gt, E as bt } from "./custom-element.fmLrnDZr.js";
+import { c as xt } from "./component.styles.DtouHn2g.js";
+import { L as Z } from "./i18n.C6c6_pqI.js";
+import { k as $t, h as mt, i as ft, w as L, j as wt, l as St, f as It, g as Ct, d as At, m as Dt, n as Tt } from "./watch.BCJD77bD.js";
+import { p as P } from "./string.yyVPNus8.js";
+import { r as x } from "./state.Dt9F_SuS.js";
+import { e as R } from "./query.BBf1UFkC.js";
+import { e as A } from "./class-map.DqNfBvJI.js";
+import { c as F } from "./repeat.B1pVpmRx.js";
+import { n as g } from "./when.Dr1es41R.js";
+import { a as zt, i as _t, c as Et, b as tt } from "./_baseUniq.BUihBa8c.js";
+import Lt from "../components/avatar.js";
+import { C as Rt } from "./button.G_W-dK6b.js";
+import { C as Pt } from "./dialog.upIZWR3x.js";
+import Ft from "../components/divider.js";
+import Ut from "../components/format-bytes.js";
+import kt from "../components/icon-button.js";
+import Ot from "../components/input.js";
+import { C as Nt } from "./option.pgg_ZoHY.js";
+import jt from "../components/progress-bar.js";
+import Mt from "../components/relative-time.js";
+import { C as Bt } from "./select.DMdl1Kdd.js";
+import Vt from "../components/space.js";
+import Ht from "../components/tab.js";
+import { C as Wt } from "./tab-group.3F6gRchD.js";
+import Gt from "../components/tab-panel.js";
+import qt from "../components/tooltip.js";
+import { C as Yt } from "./typography.trna8y2b.js";
+import { C as Kt } from "./confirm-popover.DwSAxWFi.js";
+import { d as Zt } from "./debounce.DZNkg8Q5.js";
+import { a as H } from "./number.eX2EGPvy.js";
+import { o as Xt } from "./style-map.lEJHEwk3.js";
+import { a as Jt } from "./toString.CL_lYXbK.js";
+import { S as et, i as Qt } from "./isObjectLike.z36Fu426.js";
+function te(t, e, i, o) {
+  for (var s = -1, a = t == null ? 0 : t.length; ++s < a; ) {
+    var l = t[s];
+    e(o, l, i(l), t);
+  }
+  return o;
+}
+function ee(t) {
+  return function(e, i, o) {
+    for (var s = -1, a = Object(e), l = o(e), d = l.length; d--; ) {
+      var m = l[++s];
+      if (i(a[m], m, a) === !1)
+        break;
+    }
+    return e;
+  };
+}
+var se = ee();
+function ie(t, e) {
+  return t && se(t, e, $t);
+}
+function oe(t, e) {
+  return function(i, o) {
+    if (i == null)
+      return i;
+    if (!mt(i))
+      return t(i, o);
+    for (var s = i.length, a = -1, l = Object(i); ++a < s && o(l[a], a, l) !== !1; )
+      ;
+    return i;
+  };
+}
+var ae = oe(ie);
+function re(t, e, i, o) {
+  return ae(t, function(s, a, l) {
+    e(o, s, i(s), l);
+  }), o;
+}
+function ne(t, e) {
+  return function(i, o) {
+    var s = ft(i) ? te : re, a = e ? e() : {};
+    return s(i, t, zt(o), a);
+  };
+}
+var ce = ne(function(t, e, i) {
+  t[i ? 0 : 1].push(e);
+}, function() {
+  return [[], []];
+});
+const le = {
+  error: "Upload error",
+  loaded: "Up-to-date",
+  loading: "Syncing"
+}, b = {
+  FAVORITES: "favorites",
+  RECENT: "recent",
+  UPLOADS: "uploads"
+}, W = 20, de = {
+  GET_CONTENT: "/webapi/extensibility/integrations/contentBrowserSDK/getcontent_4bw_v1"
+}, C = {
+  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"
+}, B = "GB", U = 6e4, pe = ["album", "story", "project", "merchandise"], st = (t) => {
+  const e = /* @__PURE__ */ new Date(), i = new Date(
+    e.getFullYear(),
+    e.getMonth(),
+    e.getDate()
+  ).getTime(), o = new Date(
+    e.getFullYear(),
+    e.getMonth(),
+    e.getDate() + 1
+  ).getTime();
+  return ce(
+    t.toSorted((s, a) => a.uploadTimestamp - s.uploadTimestamp),
+    (s) => s.uploadTimestamp >= i && s.uploadTimestamp < o
+  );
+}, he = ({
+  excludesRecordIDs: t,
+  searchText: e
+}) => {
+  let i = "";
+  e?.trim() && (i = `Story_Title:${e}`);
+  let o = "";
+  t?.length && (o = t.map((a) => `RecordID:NOT ${a}`).join(" AND "));
+  let s = i ? ` AND (${[i].filter(Boolean).join(" OR ")})` : "";
+  return o && (s = `${s} AND (${o})`), `(MediaType:Story OR MediaType:Album)${s}`;
+}, ue = 10, vt = async ({
+  excludes: t = [],
+  folderId: e,
+  folderPath: i = [],
+  folderPathsSet: o,
+  limit: s = ue,
+  searchText: a,
+  seeThru: l,
+  siteUrl: d,
+  start: m = 0,
+  token: u
+}) => {
+  if (!d)
+    return { data: [], totalCount: 0 };
+  let h = d;
+  h.endsWith("/") && (h = h.slice(0, -1));
+  const _ = de.GET_CONTENT, f = [
+    ["Token", u],
+    [
+      "extraFilters",
+      he({
+        excludesRecordIDs: t,
+        searchText: a
+      })
+    ],
+    ["fields", C.ASSET_PATH],
+    ["fields", C.CORTEX_PATH],
+    ["fields", C.DOC_TYPE],
+    ["fields", C.TITLE_WITH_FALLBACK],
+    ["fields", C.HAS_BROWSER_CHILDREN],
+    ["fields", C.PARENT_FOLDER_IDENTIFIER],
+    ["fields", C.CHILD_COUNT],
+    ["objectRecordID", e],
+    ["seeThru", a?.trim() || l ? "true" : "false"],
+    ["limit", s.toString()],
+    ["start", m.toString()]
+  ], z = new URL(`${h}${_}`);
+  f.forEach(([S, E]) => {
+    z.searchParams.append(S, E);
+  });
+  const I = await fetch(z.toString(), {
+    headers: {
+      Authorization: `Bearer ${u}`
+    },
+    method: "GET"
+  });
+  if (!I.ok) {
+    const S = new Error();
+    throw S.message = "Failed to fetch", S;
+  }
+  const j = await I.json();
+  let M = /* @__PURE__ */ new Set();
+  o && (M = me(o));
+  const X = j.contentItems?.map((S) => {
+    let E = N(
+      S.fields,
+      C.TITLE_WITH_FALLBACK
+    ) ?? "", O = xe(
+      (N(
+        S.fields,
+        C.ASSET_PATH
+      ) ?? "").replace(/^Root\//i, "")
+    ) || E;
+    if (o) {
+      if (o.has(O)) {
+        const J = O.split("/"), yt = J.pop();
+        O = `${J.join("/")}/${S.recordID}-${yt}`, E = `${S.recordID}-${E}`;
+      }
+      a?.trim() && M.has(E) && (E = O), o.add(O), M.add(E);
+    }
+    return {
+      childCount: Number(
+        N(
+          S.fields,
+          C.CHILD_COUNT
+        ) ?? 0
+      ),
+      children: [],
+      docType: N(
+        S.fields,
+        C.DOC_TYPE
+      ) ?? "",
+      fullPath: O,
+      hasChildren: N(
+        S.fields,
+        C.HAS_BROWSER_CHILDREN
+      ) === "1",
+      id: S.recordID,
+      parentFolderIdentifier: N(
+        S.fields,
+        C.PARENT_FOLDER_IDENTIFIER
+      ) ?? "",
+      parents: [],
+      path: [...i, E],
+      title: E
+    };
+  }) ?? [];
+  return { data: X, totalCount: j.totalCount ?? X.length };
+};
+function N(t, e) {
+  const i = e.toLowerCase(), o = Object.keys(t).find(
+    (s) => s.toLowerCase() === i
+  );
+  return o ? t[o] : void 0;
+}
+const q = "-", $ = (t) => {
+  const e = t.split(q), i = e.pop() ?? "", o = e.join(q);
+  return { id: i, path: o };
+}, k = ({ id: t, path: e }) => [e, t].join(q), ge = (t) => {
+  const e = t.split(".");
+  return e.length > 1 ? e.pop() ?? "" : "";
+}, it = (t) => {
+  const e = t.match(/(?:V\.?)?(\d+(?:\.\d+)*)/);
+  return e ? e[1] : "";
+}, ot = (t, e) => {
+  let i = e?.trim();
+  const o = e ? e.split("/").length : 0;
+  return (t ? t.length : 0) >= o && (i = t.join("/") ?? ""), i;
+}, xe = (t) => t.split("/").map((e) => e.trim()).join("/"), me = (t) => {
+  const e = /* @__PURE__ */ new Set();
+  for (const i of t) {
+    const o = i.split("/"), s = o[o.length - 1];
+    s && e.add(s);
+  }
+  return e;
+}, fe = (t, e) => {
+  const i = t.split("/"), o = e.split("/");
+  return i.slice(0, o.length + 1).join("/");
+};
+var _e = Object.defineProperty, ve = Object.getOwnPropertyDescriptor, D = (t, e, i, o) => {
+  for (var s = o > 1 ? void 0 : o ? ve(e, i) : e, a = t.length - 1, l; a >= 0; a--)
+    (l = t[a]) && (s = (o ? l(e, i, s) : l(s)) || s);
+  return o && s && _e(e, i, s), s;
+};
+let v = class extends Y {
+  constructor() {
+    super(...arguments), this.localize = new Z(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 vt({
+      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: o } = await this.fetchFolders({
+        folderId: this.folder?.id ?? "",
+        start: e
+      });
+      this.data = [...this.data ?? [], ...i], this.totalCount = o, 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 o = !0, s = !0;
+        for (const a of this.treeItem.getChildrenItems())
+          a.selected ? (ht(a, !0, "multiple"), s = !1) : o = !1;
+        this.treeItem.indeterminate = !o && !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(), o = ot(this.folder?.path ?? [], this.folder?.fullPath ?? ""), s = [...this.currentRootIDsSet], a = (u, h) => {
+      u.forEach((_) => {
+        const f = $(_);
+        if (!f.path.trim() || !f.id.trim())
+          return !1;
+        const z = P(f.path), I = P(o);
+        o && z.startsWith(I) && z !== I && h.add(fe(f.path, o));
+      });
+    };
+    a(this.removedIDs, i), a(s, e);
+    let l = !!s.some((u) => {
+      const h = $(u);
+      if (!h.path.trim() || !h.id.trim())
+        return !1;
+      const _ = k({
+        id: this.folder?.id ?? "",
+        path: o
+      }), f = P(h.path), z = P(o), I = h.id === this.folder?.id, j = !this.removedIDs.includes(_) && z.startsWith(f);
+      return I || j;
+    });
+    const d = this.folder?.childCount && e.size === this.folder?.childCount;
+    if (this.folder?.childCount && i.size === this.folder?.childCount) {
+      this.currentRootIDsSet.delete(
+        k({
+          id: this.folder?.id ?? "",
+          path: o
+        })
+      );
+      const u = this.parentElement?.parentElement;
+      u && u instanceof v && u.syncBoxes(), l = !1;
+    } else if (!l)
+      if (d) {
+        this.currentRootIDsSet.add(
+          k({
+            id: this.folder?.id ?? "",
+            path: o
+          })
+        );
+        const u = this.parentElement?.parentElement;
+        u && u instanceof v && u.syncBoxes(), l = !0;
+      } else e.size > 0 && (t = !0);
+    l ? (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 = ot(this.folder?.path ?? [], this.folder?.fullPath ?? "");
+    return r`
+      <cx-tree-item
+        aria-label=${this.folder?.title ?? ""}
+        class=${A({
+      "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>
+        ${F(
+      this.data ?? [],
+      (e) => e.id,
+      (e) => r`<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>`
+    )}
+        ${g(
+      this.data && this.data.length < this.totalCount,
+      () => r`
+            <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>
+    `;
+  }
+};
+v.styles = [xt];
+v.dependencies = {
+  "cx-icon": lt,
+  "cx-line-clamp": dt,
+  "cx-tree-item": pt
+};
+D([
+  R("cx-tree-item")
+], v.prototype, "treeItem", 2);
+D([
+  p({
+    attribute: "site-url",
+    reflect: !0
+  })
+], v.prototype, "siteUrl", 2);
+D([
+  p({ reflect: !0, type: String })
+], v.prototype, "token", 2);
+D([
+  p({ attribute: "search-text", reflect: !0, type: String })
+], v.prototype, "searchText", 2);
+D([
+  p()
+], v.prototype, "folder", 2);
+D([
+  p({
+    attribute: "current-root-ids-set",
+    type: Object
+  })
+], v.prototype, "currentRootIDsSet", 2);
+D([
+  p({ attribute: "folder-paths-set" })
+], v.prototype, "folderPathsSet", 2);
+D([
+  p({
+    attribute: "removed-ids",
+    converter: {
+      fromAttribute: (t) => t.split(" "),
+      toAttribute: (t) => t.join(" ")
+    }
+  })
+], v.prototype, "removedIDs", 2);
+D([
+  x()
+], v.prototype, "data", 2);
+D([
+  x()
+], v.prototype, "totalCount", 2);
+D([
+  x()
+], v.prototype, "isLoading", 2);
+D([
+  L(["currentRootIDsSet", "removedIDs"])
+], v.prototype, "syncBoxes", 1);
+v = D([
+  K("cx-folder-item")
+], v);
+const ye = gt`
+  .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 be = Object.defineProperty, $e = Object.getOwnPropertyDescriptor, w = (t, e, i, o) => {
+  for (var s = o > 1 ? void 0 : o ? $e(e, i) : e, a = t.length - 1, l; a >= 0; a--)
+    (l = t[a]) && (s = (o ? l(e, i, s) : l(s)) || s);
+  return o && s && be(e, i, s), s;
+};
+let y = class extends Y {
+  constructor() {
+    super(...arguments), this.localize = new Z(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) => r`<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(
+        k({
+          id: t.id,
+          path: t.dataset.path ?? ""
+        })
+      ), t.expanded = !1, t.indeterminate = !1;
+    });
+  }
+  async handleSelectedChange(t) {
+    const e = t.target, i = e.dataset.id ?? "", o = e.dataset.path ?? "";
+    if (await e.updateComplete, !i.trim() || !o.trim())
+      return;
+    const s = k({
+      id: i,
+      path: o
+    });
+    if (!(e.indeterminate && !e.selected)) {
+      if (e.selected) {
+        if (!this.currentRootIDsSet.has(s)) {
+          Q(e, "multiple"), this.currentRootIDsSet.add(s);
+          for (const a of e.getChildrenItems())
+            !a.id.trim() || !a.dataset.path?.trim() || this.currentRootIDsSet.add(
+              k({
+                id: a.id,
+                path: a.dataset.path ?? ""
+              })
+            );
+        }
+        this.removedIDs = this.removedIDs.filter(
+          (a) => a !== s && !$(a).path.startsWith(o + "/")
+        );
+      } else
+        this.removedIDs.push(s), this.currentRootIDsSet.has(s) && (this.currentRootIDsSet.delete(s), Q(e, "multiple"));
+      [...this.currentRootIDsSet].forEach((a) => {
+        const l = P(o), d = $(a).path, m = P(d);
+        m.startsWith(l) && m !== l && (e.selected || this.currentRootIDsSet.delete(a));
+      }), this.currentRootIDsSet = new Set(this.currentRootIDsSet);
+    }
+  }
+  render() {
+    return r`
+      <div class="folder-tree selectable">
+        <cx-tree
+          class=${A({
+      selectable: !0
+    })}
+          @cx-selected-change=${this.handleSelectedChange}
+          selection="multiple"
+          disabled-auto-expand
+          disabled-sync-checkboxes
+        >
+          ${F(
+      this.folders,
+      (t) => t.id,
+      (t) => this.renderFolder(t)
+    )}
+          ${g(
+      this.folders && this.folders.length < this.totalCount,
+      () => r`
+              <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>
+    `;
+  }
+};
+y.styles = [xt, ye];
+y.dependencies = {
+  "cx-folder-item": v,
+  "cx-tree": ut
+};
+w([
+  R("cx-tree")
+], y.prototype, "tree", 2);
+w([
+  p({ attribute: "site-url", reflect: !0, type: String })
+], y.prototype, "siteUrl", 2);
+w([
+  p({ attribute: "bearer-token", reflect: !0, type: String })
+], y.prototype, "bearerToken", 2);
+w([
+  p({ attribute: "token", reflect: !0, type: String })
+], y.prototype, "token", 2);
+w([
+  p({ attribute: "search-text", reflect: !0, type: String })
+], y.prototype, "searchText", 2);
+w([
+  p({ type: Array })
+], y.prototype, "folders", 2);
+w([
+  p({ attribute: "root-ids", reflect: !0, type: Array })
+], y.prototype, "rootIDs", 2);
+w([
+  p({ attribute: "total-count", reflect: !0, type: Number })
+], y.prototype, "totalCount", 2);
+w([
+  p({ attribute: "load-more", type: Function })
+], y.prototype, "loadMore", 2);
+w([
+  p({ attribute: "is-loading", reflect: !0, type: Boolean })
+], y.prototype, "isLoading", 2);
+w([
+  p({ attribute: "folder-paths-set" })
+], y.prototype, "folderPathsSet", 2);
+w([
+  x()
+], y.prototype, "removedIDs", 2);
+w([
+  x()
+], y.prototype, "currentRootIDsSet", 2);
+w([
+  L("rootIDs")
+], y.prototype, "handleRootIDsChange", 1);
+y = w([
+  K("cx-folder-tree")
+], y);
+var T = /* @__PURE__ */ ((t) => (t.Canceled = "CANCELED", t.Failed = "FAILED", t.InProgress = "INPROGRESS", t.PendingComplete = "PENDINGCOMPLETE", t.Success = "SUCCESS", t))(T || {});
+const at = (t, e = "https://", i = !1) => i && t.match(we) || t.match(/^[a-zA-Z][a-zA-Z\d+\-.]*:\/\//) ? t : `${e}${t}`, V = (t) => {
+  try {
+    return new URL(t), new RegExp(Se, "i").test(t);
+  } catch {
+    return !1;
+  }
+}, we = "^(?![a-zA-Z][a-zA-Z\\d+\\-.]*:\\/\\/)(?!([a-zA-Z0-9-]+\\.)+[a-zA-Z]{2,}($|\\/))[^\\s]+$", Se = "^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$", As = "^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.){2,}[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$";
+function Ie(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 rt = Math.max;
+function Ce(t, e, i) {
+  return e = rt(e === void 0 ? t.length - 1 : e, 0), function() {
+    for (var o = arguments, s = -1, a = rt(o.length - e, 0), l = Array(a); ++s < a; )
+      l[s] = o[e + s];
+    s = -1;
+    for (var d = Array(e + 1); ++s < e; )
+      d[s] = o[s];
+    return d[e] = i(l), Ie(t, this, d);
+  };
+}
+function Ae(t) {
+  return function() {
+    return t;
+  };
+}
+var nt = function() {
+  try {
+    var t = wt(Object, "defineProperty");
+    return t({}, "", {}), t;
+  } catch {
+  }
+}(), De = nt ? function(t, e) {
+  return nt(t, "toString", {
+    configurable: !0,
+    enumerable: !1,
+    value: Ae(e),
+    writable: !0
+  });
+} : _t, Te = 800, ze = 16, Ee = Date.now;
+function Le(t) {
+  var e = 0, i = 0;
+  return function() {
+    var o = Ee(), s = ze - (o - i);
+    if (i = o, s > 0) {
+      if (++e >= Te)
+        return arguments[0];
+    } else
+      e = 0;
+    return t.apply(void 0, arguments);
+  };
+}
+var Re = Le(De);
+function Pe(t, e) {
+  return Re(Ce(t, e, _t), t + "");
+}
+var Fe = 200;
+function Ue(t, e, i, o) {
+  var s = -1, a = Et, l = !0, d = t.length, m = [], u = e.length;
+  if (!d)
+    return m;
+  i && (e = Jt(e, St(i))), e.length >= Fe && (a = Ct, l = !1, e = new It(e));
+  t:
+    for (; ++s < d; ) {
+      var h = t[s], _ = i == null ? h : i(h);
+      if (h = h !== 0 ? h : 0, l && _ === _) {
+        for (var f = u; f--; )
+          if (e[f] === _)
+            continue t;
+        m.push(h);
+      } else a(e, _, o) || m.push(h);
+    }
+  return m;
+}
+var ct = et ? et.isConcatSpreadable : void 0;
+function ke(t) {
+  return ft(t) || At(t) || !!(ct && t && t[ct]);
+}
+function Oe(t, e, i, o, s) {
+  var a = -1, l = t.length;
+  for (i || (i = ke), s || (s = []); ++a < l; ) {
+    var d = t[a];
+    i(d) ? Dt(s, d) : o || (s[s.length] = d);
+  }
+  return s;
+}
+function Ne(t, e, i) {
+  var o = t.length;
+  if (o < 2)
+    return o ? tt(t[0]) : [];
+  for (var s = -1, a = Array(o); ++s < o; )
+    for (var l = t[s], d = -1; ++d < o; )
+      d != s && (a[s] = Ue(a[s] || l, t[d], e, i));
+  return tt(Oe(a), e, i);
+}
+function je(t) {
+  return Qt(t) && mt(t);
+}
+var G = Pe(function(t) {
+  return Ne(Tt(t, je));
+});
+const Me = gt`
+  :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% / 3);
+  }
+
+  .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 .recent-empty,
+  .assets-list__tab-group .favorites-empty,
+  .assets-list__tab-group .uploads-empty {
+    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 .recent-empty,
+  .assets-list__tab-group .uploads-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 {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    padding: 0 0 var(--cx-spacing-x-small) 0;
+  }
+
+  .favorites-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 {
+    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 .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);
+  }
+
+  .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 */
+  .asset {
+    max-height: var(--asset-height);
+    display: flex;
+    gap: var(--cx-spacing-small);
+    padding: var(--cx-spacing-2x-small) var(--cx-spacing-small);
+  }
+  .asset:hover {
+    background-color: var(--cx-input-filled-background-color-hover);
+  }
+  .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;
+  }
+  .favorite__spinner {
+    min-height: var(--cx-input-height-medium);
+    min-width: var(--cx-input-height-medium);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .favorite__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;
+  }
+
+  .asset__thumbnail--placeholder .asset__thumbnail__image {
+    display: none;
+  }
+
+  .asset__thumbnail--placeholder .asset__thumbnail__icon,
+  .asset__thumbnail--placeholder .asset__thumbnail__extension {
+    display: flex;
+  }
+  .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-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);
+  }
+
+  /** uploads assets */
+  cx-progress-bar {
+    --height: 4px;
+    --indicator-color: var(--color);
+    --track-color: var(--cx-color-neutral-300);
+    z-index: 0;
+  }
+  .uploading-progress,
+  .syncing-progress,
+  .completed-progress,
+  .failed-progress,
+  .canceled-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);
+  }
+
+  .uploading-progress *,
+  .syncing-progress *,
+  .completed-progress *,
+  .failed-progress *,
+  .canceled-progress * {
+    white-space: nowrap;
+  }
+
+  .uploading-progress cx-icon,
+  .syncing-progress cx-icon,
+  .completed-progress cx-icon,
+  .failed-progress cx-icon,
+  .canceled-progress cx-icon {
+    --font-size: var(--cx-font-size-medium);
+  }
+
+  .uploading-progress cx-typography::part(base),
+  .syncing-progress cx-typography::part(base),
+  .completed-progress cx-typography::part(base),
+  .failed-progress cx-typography::part(base),
+  .canceled-progress cx-typography::part(base) {
+    line-height: var(--cx-font-size-medium);
+  }
+
+  .uploading-progress cx-icon {
+    color: var(--cx-color-primary-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);
+  }
+
+  /** #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-small);
+    align-items: center;
+  }
+  .settings__cache__size cx-input {
+    width: 150px;
+  }
+  .settings__cache__location {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cx-spacing-small);
+  }
+  .settings__cache__location__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 Be = Object.defineProperty, Ve = Object.getOwnPropertyDescriptor, c = (t, e, i, o) => {
+  for (var s = o > 1 ? void 0 : o ? Ve(e, i) : e, a = t.length - 1, l; a >= 0; a--)
+    (l = t[a]) && (s = (o ? l(e, i, s) : l(s)) || s);
+  return o && s && Be(e, i, s), s;
+};
+let n = class extends Y {
+  constructor() {
+    super(...arguments), this.localize = new Z(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.uploadingAssets = { assets: [], hasMore: !1 }, this.availableFolderIdentifiers = [], this.isLoading = !1, this.settings = {
+      cacheLocation: "Default",
+      cacheSize: 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 = H({
+      decimals: 2,
+      inputUnit: "B",
+      targetUnit: B,
+      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.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: o = void 0,
+      start: s = 0
+    }) => {
+      try {
+        return await vt({
+          excludes: t,
+          folderId: e,
+          folderPathsSet: i,
+          limit: o,
+          searchText: this.searchText,
+          siteUrl: this.settings.config.siteUrl,
+          start: s,
+          token: this.token
+        });
+      } catch (a) {
+        a instanceof Error && a.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 = V(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(b.RECENT));
+  }
+  updateSettingsStates() {
+    this._activeFoldersMode = this.settings.config.rootIDs?.length > 0, this.rootIDs = this.settings.config.rootIDs ?? [], this.cacheSize = H({
+      decimals: 2,
+      inputUnit: "B",
+      targetUnit: B,
+      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 = V(this.settings.config.siteUrl);
+  }
+  get formHasChanges() {
+    return this.settings.cacheSize !== this.cacheSize || this.settings.cacheLocation !== this.cacheLocation || !!G(this.settings.config.proxyTypes, this.proxyTypes).length || !!G(this.settings.config.rootIDs, this.rootIDs).length;
+  }
+  connect(t = null) {
+    if (t?.preventDefault(), this.connectError = "", !this.siteUrl?.trim())
+      return;
+    const e = at(this.siteUrl);
+    if (!V(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
+      }
+    });
+  }
+  retryUpload(t) {
+    this.emit("cx-retry-upload", {
+      detail: {
+        assetId: t
+      }
+    });
+  }
+  pauseUpload(t) {
+    this.emit("cx-pause-upload", {
+      detail: {
+        assetId: t
+      }
+    });
+  }
+  resumeUpload(t) {
+    this.emit("cx-resume-upload", {
+      detail: {
+        assetId: t
+      }
+    });
+  }
+  cancelUpload(t) {
+    this.emit("cx-cancel-upload", {
+      detail: {
+        assetId: t
+      }
+    });
+  }
+  saveSettings() {
+    this.emit("cx-save-settings", {
+      detail: {
+        settings: {
+          cacheLocation: this.cacheLocation,
+          cacheSize: H({
+            decimals: 2,
+            inputUnit: B,
+            targetUnit: "B",
+            value: this.cacheSize
+          }),
+          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,
+          }
+        }
+      }
+    });
+  }
+  markFavorite(t) {
+    this.emit("cx-mark-favorite", {
+      detail: {
+        assetId: t
+      }
+    });
+  }
+  unmarkFavorite(t) {
+    this.emit("cx-unmark-favorite", {
+      detail: {
+        assetId: t
+      }
+    });
+  }
+  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 - W && (this.isRecentAssetsLoading = !0, this.emit("cx-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 - W && (this.isFavoriteAssetsLoading = !0, this.emit("cx-load-more", {
+      detail: {
+        type: "favorites"
+      }
+    }));
+  }
+  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 - W && (this.isUploadingAssetsLoading = !0, this.emit("cx-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"), o = G(this.rootIDs, e);
+    i.forEach((s) => {
+      o.includes(s.dataset.id ?? "") && ht(s);
+    });
+  }
+  // #region Render
+  renderHeader() {
+    const t = () => {
+      this.openDrive();
+    };
+    return r`
+      <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}
+            >
+              ${g(
+      this.hasNewVersion,
+      () => r`<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) {
+    const i = r`
+      ${this.renderProgress({
+      isPaused: t.isPaused,
+      progress: (t.size ?? 0) - (t.remainingSize ?? 0),
+      remainingTime: t.remainingTime,
+      size: t.size ?? 0,
+      timestamp: t.uploadTimestamp,
+      uploadErrorMessage: t.uploadErrorMessage,
+      uploadStatus: t.uploadStatus
+    })}
+    `, o = (I) => {
+      I.target && I.target.parentElement.classList.add("placeholder");
+    }, s = (I) => {
+      I.target && I.target.parentElement.classList.remove("placeholder");
+    }, a = pe.includes(
+      (t.docType ?? "").toLowerCase()
+    ), l = r`<div
+      class=${A({
+      asset__thumbnail: !0,
+      "asset__thumbnail--folder": a,
+      "asset__thumbnail--placeholder": !t.thumbnail?.trim()
+    })}
+    >
+      ${g(
+      a,
+      () => r`<cx-icon
+            class="asset__folder__icon"
+            name="folder_special"
+          ></cx-icon>`,
+      () => r`<img
+              class="asset__thumbnail__image"
+              src=${t.thumbnail}
+              @error=${o}
+              @load=${s}
+            />
+            <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"
+                >
+                  ${ge(t.fileName)}
+                </cx-typography>
+              </cx-line-clamp>
+            </div>`
+    )}
+    </div>`, d = () => {
+      this.openDrive(t);
+    }, m = () => {
+      t.isInFavorite ? this.unmarkFavorite(t.recordId) : this.markFavorite(t.recordId);
+    }, u = r`<cx-tooltip
+        content=${this.localize.term("openInDrive")}
+        hoist
+      >
+        <cx-icon-button
+          data-testid="asset__drive-button"
+          name="folder_open"
+          @click=${d}
+        ></cx-icon-button>
+      </cx-tooltip>
+      ${g(
+      this.favoriteInProgressAssets.includes(t.recordId),
+      () => r`<cx-spinner class="favorite__spinner"></cx-spinner>`,
+      () => r`<cx-tooltip
+            content=${t.isInFavorite ? this.localize.term("unfavorite") : this.localize.term("favorite")}
+            hoist
+          >
+            <cx-icon-button
+              data-testid="asset__favorite-button"
+              name="star"
+              variant=${t.isInFavorite ? "filled" : "outlined"}
+              @click=${m}
+            ></cx-icon-button>
+          </cx-tooltip>`
+    )} `, h = () => {
+      t.uploadId && this.retryUpload(t.uploadId);
+    }, _ = () => {
+      t.uploadId && (t.isPaused ? this.resumeUpload(t.uploadId) : this.pauseUpload(t.uploadId));
+    }, f = r`</cx-tooltip
+      ><cx-tooltip content=${this.localize.term("retry")} hoist>
+        <cx-icon-button
+          data-testid="asset__retry-button"
+          name="refresh"
+          @click=${h}
+        ></cx-icon-button>
+      </cx-tooltip>`, z = r`<cx-tooltip
+      content=${t.isPaused ? this.localize.term("resume") : this.localize.term("pause")}
+      hoist
+    >
+      <cx-icon-button
+        data-testid=${t.isPaused ? "asset__resume-button" : "asset__pause-button"}
+        name=${t.isPaused ? "play_arrow" : "pause"}
+        variant="filled"
+        @click=${_}
+      ></cx-icon-button>
+    </cx-tooltip>`;
+    return r`
+      <div
+        data-id=${t.recordId}
+        data-testid=${`asset-${t.uploadStatus}`}
+        class="asset"
+      >
+        ${l}
+        <div class="asset__description">
+          <div class="asset__description__label">
+            <cx-line-clamp class="asset__description__label__text" lines="1">
+              <cx-typography variant="body3">${t.fileName}</cx-typography>
+            </cx-line-clamp>
+          </div>
+          <div class="asset__description__status">
+            ${g(
+      e === b.RECENT,
+      () => r`
+                <cx-typography
+                  variant="small"
+                  class="asset__description__status__time"
+                >
+                  <cx-relative-time
+                    format="narrow"
+                    numeric="always"
+                    date=${new Date(t.uploadTimestamp)}
+                    sync
+                    sync-interval=${U}
+                  ></cx-relative-time>
+                </cx-typography>
+              `
+    )}
+            ${g(
+      e === b.UPLOADS,
+      () => i
+    )}
+          </div>
+        </div>
+        <div class="asset__actions">
+          ${g(
+      [T.Success, T.PendingComplete].includes(
+        t.uploadStatus
+      ) || !t.uploadStatus?.trim(),
+      () => u
+    )}
+          ${g(
+      [T.InProgress].includes(
+        t.uploadStatus
+      ),
+      () => z
+    )}
+          ${g(
+      [T.Failed].includes(t.uploadStatus),
+      () => f
+    )}
+        </div>
+      </div>
+    `;
+  }
+  renderRecentAssets() {
+    const t = r`
+      <div class="recent-empty">
+        <cx-icon class="empty-icon" name="explore"></cx-icon>
+        <cx-typography variant="body2">
+          ${this.localize.term("allViewedAssetsWillBeVisibleHere")}
+        </cx-typography>
+      </div>
+    `, [e, i] = st(
+      this.recentAssets.assets
+    ), o = r`
+      <div class="recent__list" @scroll=${this.requestMoreRecentAssets}>
+        <div
+          class=${A({
+      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>
+          ${F(
+      e,
+      (s) => s.recordId,
+      (s) => this.renderAsset(s, b.RECENT)
+    )}
+        </div>
+        <div
+          class=${A({
+      empty: i.length === 0,
+      recent__other: !0
+    })}
+        >
+          <div class="asset-group__label">
+            <cx-typography variant="small">
+              ${this.localize.term("allOther")}
+            </cx-typography>
+          </div>
+          ${F(
+      i,
+      (s) => s.recordId,
+      (s) => this.renderAsset(s, b.RECENT)
+    )}
+        </div>
+      </div>
+    `;
+    return r`
+      <cx-tab-panel
+        name=${b.RECENT}
+        class="assets-list__recent-tab-panel"
+      >
+        ${g(
+      this.recentAssets.assets.length > 0,
+      () => o,
+      () => t
+    )}
+      </cx-tab-panel>
+    `;
+  }
+  renderFavoriteAssets() {
+    const t = r`
+      <div class="favorites-empty">
+        <cx-icon class="empty-icon" name="star"></cx-icon>
+        <cx-typography variant="body2">
+          ${this.localize.term("allFavoriteAssetsWillBeVisibleHere")}
+        </cx-typography>
+      </div>
+    `, e = this.favoriteAssets.assets.toSorted(
+      (o, s) => s.uploadTimestamp - o.uploadTimestamp
+    ), i = r`
+      <div class="favorites__list" @scroll=${this.requestMoreFavoriteAssets}>
+        ${F(
+      e,
+      (o) => o.recordId,
+      (o) => this.renderAsset(o, b.FAVORITES)
+    )}
+      </div>
+    `;
+    return r`
+      <cx-tab-panel name="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=${U}
+              ></cx-relative-time>
+            </cx-typography>
+          </div>
+          ${g(
+      e.length > 0,
+      () => i,
+      () => t
+    )}
+        </div>
+      </cx-tab-panel>
+    `;
+  }
+  renderProgress({
+    isPaused: t = !1,
+    progress: e = 0,
+    remainingTime: i,
+    size: o = 0,
+    timestamp: s = Date.now(),
+    uploadErrorMessage: a,
+    uploadStatus: l = T.InProgress
+  }) {
+    const d = o > 0 ? e * 100 / o : 0, m = l === T.InProgress ? d : 100, u = r`
+      <div class="uploading-progress">
+        ${g(!t, () => r`<cx-icon name="arrow_upward"></cx-icon>`)}
+        <cx-typography variant="small">
+          <cx-line-clamp lines="1">
+            ${g(t, () => r`${this.localize.term("paused")} ‧`)}
+            <cx-format-bytes .value=${e}></cx-format-bytes>
+            of
+            <cx-format-bytes .value=${o}></cx-format-bytes>
+            (${new Intl.NumberFormat("en-IN", {
+      maximumFractionDigits: 2
+    }).format(d)}%)
+            ${g(
+      !!i && !t,
+      () => r`‧
+                  <cx-relative-time
+                    format="narrow"
+                    numeric="always"
+                    date=${new Date(Date.now() + (i ?? 0))}
+                    sync
+                    sync-interval=${U}
+                  ></cx-relative-time>`
+    )}
+          </cx-line-clamp>
+        </cx-typography>
+      </div>
+    `, h = r`
+      <div class="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=${U}
+            ></cx-relative-time>
+          </cx-line-clamp>
+        </cx-typography>
+      </div>
+    `, _ = r`
+      <div class="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=${U}
+            ></cx-relative-time>
+          </cx-line-clamp>
+        </cx-typography>
+      </div>
+    `, f = r`
+      <div class="failed-progress">
+        <cx-typography variant="small">
+          <cx-line-clamp lines="1">
+            <cx-tooltip content=${a}>
+              <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=${U}
+            ></cx-relative-time>
+          </cx-line-clamp>
+        </cx-typography>
+      </div>
+    `, z = r`
+      <div class="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=${U}
+            ></cx-relative-time>
+          </cx-line-clamp>
+        </cx-typography>
+      </div>
+    `;
+    return r`
+      ${g(
+      l === T.InProgress,
+      () => r`<cx-progress-bar
+              style=${Xt({
+        "--color": t ? "var(--cx-color-warning-500)" : "var(--cx-color-primary-500)"
+      })}
+              .value=${m.toFixed(0)}
+              class="progress-bar"
+            ></cx-progress-bar
+            >${u}`
+    )}
+      ${g(
+      l === T.PendingComplete,
+      () => h
+    )}
+      ${g(l === T.Success, () => _)}
+      ${g(l === T.Failed, () => f)}
+      ${g(l === T.Canceled, () => z)}
+    `;
+  }
+  renderUploadingAssets() {
+    const t = r`
+      <div class="uploads-empty">
+        <cx-icon class="empty-icon" name="arrow_upward"></cx-icon>
+        <cx-typography variant="body2">
+          ${this.localize.term("allAssetUploadsWillBeVisibleHere")}
+        </cx-typography>
+      </div>
+    `, [e, i] = st(
+      this.uploadingAssets.assets
+    ), o = r`
+      <div class="uploads__list" @scroll=${this.requestMoreUploadingAssets}>
+        <div
+          class=${A({
+      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>
+          </div>
+          ${F(
+      e,
+      (s) => s.recordId,
+      (s) => this.renderAsset(s, b.UPLOADS)
+    )}
+        </div>
+        <div
+          class=${A({
+      empty: i.length === 0,
+      uploads__other: !0
+    })}
+        >
+          <div class="asset-group__label">
+            <cx-typography variant="small">
+              ${this.localize.term("allOther")}
+            </cx-typography>
+          </div>
+          ${F(
+      i,
+      (s) => s.recordId,
+      (s) => this.renderAsset(s, b.UPLOADS)
+    )}
+        </div>
+      </div>
+    `;
+    return r`
+      <cx-tab-panel name="uploads" class="assets-list__uploads-tab-panel">
+        ${g(
+      this.uploadingAssets.assets.length > 0,
+      () => o,
+      () => t
+    )}
+      </cx-tab-panel>
+    `;
+  }
+  renderAssetsList() {
+    return r`
+      <div class="assets-list">
+        <cx-tab-group
+          @cx-tab-show=${async (e) => {
+      switch (await e.target.updateComplete, e.detail.name) {
+        case b.RECENT:
+          this.requestMoreRecentAssets();
+          break;
+        case b.FAVORITES:
+          this.requestMoreFavoriteAssets();
+          break;
+        case b.UPLOADS:
+          this.requestMoreUploadingAssets();
+          break;
+      }
+    }}
+          no-scroll-controls
+          class="assets-list__tab-group"
+        >
+          <cx-tab
+            active
+            data-testid="assets-list__recent-tab"
+            slot="nav"
+            panel=${b.RECENT}
+          >
+            ${this.localize.term("recent")}
+          </cx-tab>
+          <cx-tab
+            data-testid="assets-list__favorites-tab"
+            slot="nav"
+            panel=${b.FAVORITES}
+          >
+            ${this.localize.term("favorites")}
+          </cx-tab>
+          <cx-tab
+            data-testid="assets-list__uploads-tab"
+            slot="nav"
+            panel=${b.UPLOADS}
+          >
+            ${this.localize.term("uploads")}
+          </cx-tab>
+          ${this.renderRecentAssets()} ${this.renderFavoriteAssets()}
+          ${this.renderUploadingAssets()}
+        </cx-tab-group>
+      </div>
+    `;
+  }
+  renderAssetsView() {
+    return r`
+      <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((d) => {
+        if (!this.folderTree.shadowRoot?.querySelector(
+          `[data-id="${$(d).id}"]`
+        ))
+          return !0;
+      }), a = /* @__PURE__ */ new Set([
+        ...this.folderTree.currentRootIDs,
+        ...s
+      ]);
+      for (const d of a) {
+        const m = P($(d).path), u = this.folderTree.removedIDs.filter(
+          (h) => P($(h).path).startsWith(m)
+        );
+        if (u.length > 0) {
+          const { totalCount: h } = await this.fetchFolders({
+            excludes: u.map((f) => $(f).id),
+            folderId: $(d).id,
+            start: 0
+          }), { data: _ } = await this.fetchFolders({
+            excludes: u.map((f) => $(f).id),
+            folderId: $(d).id,
+            limit: h || 10,
+            start: 0
+          });
+          _.forEach((f) => {
+            a.add(
+              k({ id: f.id, path: f.fullPath })
+            );
+          }), a.delete(d);
+        }
+      }
+      const l = Array.from(a);
+      this.updateActiveFolderIdentifiers(l), this.removedIds = l.filter(
+        (d) => [...l].some((m) => {
+          const u = $(d), h = $(m), _ = P(h.path);
+          return m !== d && u.path.startsWith(_);
+        })
+      ), e(), this.isAddingRootIDs = !1;
+    }, o = (s) => {
+      const a = s.target;
+      this.searchText = (a.value ?? "").trim();
+    };
+    return r`
+      <cx-dialog
+        class="select-folders-popup"
+        no-header
+        @cx-after-hide=${e}
+        .boundary=${this.container}
+      >
+        <cx-input
+          autofocus
+          clearable
+          @cx-input=${o}
+          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 r`
+      <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 bt;
+    const t = this.rootIDs.filter(
+      (o) => !this.removedIds.includes(o)
+    ), e = (o) => {
+      this.updateActiveFolderIdentifiers(
+        t.filter(
+          (s) => $(s).id !== o
+        )
+      ), this.folderTree.rootIDs = this.rootIDs, this.folderTree.resetTree();
+    }, i = (o) => {
+      const { id: s, path: a } = $(o), l = () => {
+        e(s);
+      };
+      return r`
+        <cx-tree-item
+          data-id=${s}
+          class=${A({
+        "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">
+              ${a}
+            </cx-line-clamp>
+          </div>
+          <cx-tooltip
+            slot="actions"
+            content=${this.localize.term("removeFolder", 1)}
+            hoist
+          >
+            <cx-icon-button
+              @click=${l}
+              name="close"
+            ></cx-icon-button>
+          </cx-tooltip>
+        </cx-tree-item>
+      `;
+    };
+    return r`
+      <div data-testid="root-folder-tree" class="folder-tree">
+        <cx-tree selection="none">
+          ${F(
+      t,
+      (o) => o,
+      (o) => i(o)
+    )}
+          >
+        </cx-tree>
+      </div>
+    `;
+  }
+  // renderUploadDownloadSettings(): TemplateResult {
+  //   const maxUploadRateInput = this._unlimitedUploadRate
+  //     ? ''
+  //     : html`<cx-input
+  //         class="settings__upload-rate-input"
+  //         label=${this.localize.term('maxUploadRate')}
+  //         type="number"
+  //         no-spin-buttons
+  //         value=${this.settings.maxUploadRate}
+  //         @cx-change=${(event: CxChangeEvent) => {
+  //           const target = event.target as CxInput;
+  //           const value = Number(target.value);
+  //           if (value < 0) {
+  //             target.setCustomValidity(
+  //               this.localize.term('maxUploadRateCannotBeNegative'),
+  //             );
+  //             return;
+  //           }
+  //           this._maxUploadRate = Number(target.value);
+  //         }}
+  //         ><cx-typography slot="suffix" variant="body2"
+  //           >Mb/s</cx-typography
+  //         ></cx-input
+  //       >`;
+  //   const uploadRateSetting = html`<cx-switch
+  //       class="settings__upload-rate-switch"
+  //       ?checked=${this.settings.unlimitedUploadRate}
+  //       @cx-change=${(event: CxChangeEvent) => {
+  //         this._unlimitedUploadRate = (event.target as HTMLInputElement).checked;
+  //       }}
+  //       >${this.localize.term('unlimitedUploadRate')}</cx-switch
+  //     >${maxUploadRateInput}`;
+  //   const maxDownloadRateInput = this._unlimitedDownloadRate
+  //     ? ''
+  //     : html`<cx-input
+  //         class="settings__download-rate-input"
+  //         label=${this.localize.term('maxDownloadRate')}
+  //         type="number"
+  //         no-spin-buttons
+  //         value=${this.settings.maxDownloadRate}
+  //         @cx-change=${(event: CxChangeEvent) => {
+  //           const target = event.target as CxInput;
+  //           const value = Number(target.value);
+  //           if (value < 0) {
+  //             target.setCustomValidity(
+  //               this.localize.term('maxDownloadRateCannotBeNegative'),
+  //             );
+  //             return;
+  //           }
+  //           this._maxDownloadRate = Number(target.value);
+  //         }}
+  //         ><cx-typography slot="suffix" variant="body2"
+  //           >Mb/s</cx-typography
+  //         ></cx-input
+  //       >`;
+  //   const downloadRateSetting = html`<cx-switch
+  //       class="settings__download-rate-switch"
+  //       ?checked=${this.settings.unlimitedDownloadRate}
+  //       @cx-change=${(event: CxChangeEvent) => {
+  //         this._unlimitedDownloadRate = (event.target as HTMLInputElement).checked;
+  //       }}
+  //       >${this.localize.term('unlimitedDownloadRate')}</cx-switch
+  //     >${maxDownloadRateInput}`;
+  //   return html`<div class="settings-group settings__upload-download">
+  //     <cx-typography variant="h5"
+  //       >${this.localize.term('uploadDownload')}</cx-typography
+  //     >
+  //     ${uploadRateSetting} ${downloadRateSetting}
+  //   </div>`;
+  // }
+  handleActiveFolderChange(t) {
+    t.target.value === "custom" ? (this._activeFoldersMode = !0, this.rootIDs = this.settings.config.rootIDs ?? []) : (this._activeFoldersMode = !1, this.rootIDs = []);
+  }
+  renderGeneralSettings() {
+    const t = r`
+      <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>
+        ${g(
+      this._activeFoldersMode,
+      () => r`
+            ${this.renderRootFolderTree()} ${this.renderSelectFoldersPopup()}
+          `
+    )}
+      </div>
+    `;
+    return r`
+      <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")}
+                  ${it(this.settings.config.version ?? "")}
+                </cx-typography>
+              </cx-line-clamp>
+            </div>
+            ${g(
+      this.hasNewVersion,
+      () => r`<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",
+        it(
+          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 = r`<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 r`
+      <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__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 class="settings-group settings__cache">
+          <cx-typography variant="h5">
+            ${this.localize.term("cache")}
+          </cx-typography>
+          <div class="settings__cache__size">
+            <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"
+                >${B}</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>
+    `;
+  }
+  renderSettingsView() {
+    const t = () => {
+      this.hideSettings();
+    };
+    return r`
+      <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 = r`
+      <cx-typography class="error-message" variant="small">
+        ${this.localize.term("fileOnDemandSyncErrorMessage")}
+      </cx-typography>
+    `, e = () => {
+      switch (this.connectionStatus) {
+        case "excellent":
+          return r`
+            <cx-icon variant="filled" name="check_circle"></cx-icon>
+          `;
+        case "good":
+          return r` <cx-icon variant="filled" name="circle"></cx-icon> `;
+        case "bad":
+          return r` <cx-icon variant="filled" name="circle"></cx-icon> `;
+      }
+    }, i = () => {
+      switch (this.assetIndexSyncStatus) {
+        case "loaded":
+          return r`
+            <cx-icon variant="filled" name="check_circle"></cx-icon>
+          `;
+        case "loading":
+          return r` <cx-icon variant="filled" name="cached"></cx-icon> `;
+        case "error":
+          return r` <cx-icon variant="filled" name="error"></cx-icon> `;
+      }
+    }, o = r`<div
+      class=${A({
+      "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>`;
+    return r`
+      <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>
+        ${o}
+        <div
+          class=${A({
+      "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">
+              ${le[this.assetIndexSyncStatus]}
+            </cx-typography>
+            ${i()}
+          </div>
+        </div>
+        ${g(this.assetIndexSyncStatus === "error", () => t)}
+      </div>
+    `;
+  }
+  handleConnectionURLInput(t) {
+    this.validConnectionUrl = !0, this.siteUrl = t.target.value.trim();
+    const e = at(this.siteUrl);
+    V(e) || (this.validConnectionUrl = !1);
+  }
+  renderWelcomeView() {
+    return r`
+      <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=${A({
+      "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=${A({
+      "welcome__cancel-connection-button": !0
+    })}
+            ?disabled=${!this.isConnecting}
+            @click=${this.cancelConnection}
+          >
+            ${this.localize.term("cancel")}
+          </cx-button>
+          <cx-typography class="error-message" variant="body3">
+            ${g(
+      this.connectError,
+      () => this.connectError,
+      () => " "
+    )}
+          </cx-typography>
+        </form>
+      </div>
+    `;
+  }
+  renderView() {
+    return this.connectionEstablished ? this.isSettingsOpened ? this.renderSettingsView() : this.renderAssetsView() : this.renderWelcomeView();
+  }
+  renderLoadingOverlay() {
+    return r`
+      <div class="loading-overlay">
+        <cx-spinner></cx-spinner>
+      </div>
+    `;
+  }
+  render() {
+    return r`
+      <div
+        class=${A({
+      container: !0,
+      "container--connected": this.connectionEstablished,
+      "container--user-interaction-blocked": this.userInteractionBlocked
+    })}
+      >
+        ${this.renderView()}
+        ${g(this.userInteractionBlocked, () => this.renderLoadingOverlay())}
+      </div>
+    `;
+  }
+  // #endregion
+};
+n.styles = Me;
+n.dependencies = {
+  "cx-avatar": Lt,
+  "cx-button": Rt,
+  "cx-confirm-popover": Kt,
+  "cx-dialog": Pt,
+  "cx-divider": Ft,
+  "cx-folder-tree": y,
+  "cx-format-bytes": Ut,
+  "cx-icon": lt,
+  "cx-icon-button": kt,
+  "cx-input": Ot,
+  "cx-line-clamp": dt,
+  "cx-option": Nt,
+  "cx-progress-bar": jt,
+  "cx-relative-time": Mt,
+  "cx-select": Bt,
+  "cx-space": Vt,
+  "cx-tab": Ht,
+  "cx-tab-group": Wt,
+  "cx-tab-panel": Gt,
+  "cx-tooltip": qt,
+  "cx-tree": ut,
+  "cx-tree-item": pt,
+  "cx-typography": Yt
+};
+c([
+  R(".container")
+], n.prototype, "container", 2);
+c([
+  R("cx-folder-tree")
+], n.prototype, "folderTree", 2);
+c([
+  R("cx-dialog")
+], n.prototype, "dialog", 2);
+c([
+  R(".recent__list")
+], n.prototype, "recentAssetsList", 2);
+c([
+  R(".favorites__list")
+], n.prototype, "favoritesAssetsList", 2);
+c([
+  R(".uploads__list")
+], n.prototype, "uploadsAssetsList", 2);
+c([
+  R(".assets-list__tab-group")
+], n.prototype, "assetsListTabGroup", 2);
+c([
+  R(".settings__cache__location__value__text")
+], n.prototype, "cacheLocationValueText", 2);
+c([
+  p({
+    attribute: "connection-established",
+    type: Boolean
+  })
+], n.prototype, "connectionEstablished", 2);
+c([
+  p({
+    attribute: "connection-status",
+    reflect: !0,
+    type: String
+  })
+], n.prototype, "connectionStatus", 2);
+c([
+  p({
+    attribute: "connection-status-tooltip",
+    type: String
+  })
+], n.prototype, "connectionStatusTooltip", 2);
+c([
+  p({
+    attribute: "asset-index-sync-status",
+    reflect: !0,
+    type: String
+  })
+], n.prototype, "assetIndexSyncStatus", 2);
+c([
+  p({
+    attribute: "user-avatar-url",
+    type: String
+  })
+], n.prototype, "userAvatarUrl", 2);
+c([
+  p({
+    type: String
+  })
+], n.prototype, "username", 2);
+c([
+  p({
+    attribute: "recent-assets",
+    type: Object
+  })
+], n.prototype, "recentAssets", 2);
+c([
+  p({
+    attribute: "favorite-assets",
+    type: Object
+  })
+], n.prototype, "favoriteAssets", 2);
+c([
+  p({
+    attribute: "favorite-last-sync",
+    type: Number
+  })
+], n.prototype, "favoritesLastSync", 2);
+c([
+  p({
+    attribute: "favorite-in-progress-assets",
+    converter: {
+      fromAttribute: (t) => t.split(" ").map(Number),
+      toAttribute: (t) => t.join(" ")
+    },
+    type: String
+  })
+], n.prototype, "favoriteInProgressAssets", 2);
+c([
+  p({
+    attribute: "uploading-assets",
+    type: Object
+  })
+], n.prototype, "uploadingAssets", 2);
+c([
+  x()
+], n.prototype, "availableFolderIdentifiers", 2);
+c([
+  x()
+], n.prototype, "isLoading", 2);
+c([
+  p({
+    attribute: "settings",
+    type: Object
+  })
+], n.prototype, "settings", 2);
+c([
+  p({ attribute: "pick-cache-location" })
+], n.prototype, "pickCacheLocation", 2);
+c([
+  p({
+    attribute: "has-new-version",
+    type: Boolean
+  })
+], n.prototype, "hasNewVersion", 2);
+c([
+  p({
+    attribute: "about-content",
+    type: String
+  })
+], n.prototype, "aboutContent", 2);
+c([
+  p({ type: String })
+], n.prototype, "token", 2);
+c([
+  p({
+    attribute: "user-interaction-blocked",
+    type: Boolean
+  })
+], n.prototype, "userInteractionBlocked", 2);
+c([
+  p({
+    attribute: "is-connecting",
+    type: Boolean
+  })
+], n.prototype, "isConnecting", 2);
+c([
+  p({
+    attribute: "is-cancelling-connection",
+    type: Boolean
+  })
+], n.prototype, "isCancellingConnection", 2);
+c([
+  p({
+    attribute: "is-disconnecting",
+    type: Boolean
+  })
+], n.prototype, "isDisconnecting", 2);
+c([
+  p({
+    attribute: "is-upgrading",
+    type: Boolean
+  })
+], n.prototype, "isUpgrading", 2);
+c([
+  x()
+], n.prototype, "isSettingsOpened", 2);
+c([
+  x()
+], n.prototype, "rootIDs", 2);
+c([
+  x()
+], n.prototype, "_activeFoldersMode", 2);
+c([
+  x()
+], n.prototype, "removedIds", 2);
+c([
+  x()
+], n.prototype, "cacheSize", 2);
+c([
+  x()
+], n.prototype, "cacheLocation", 2);
+c([
+  x()
+], n.prototype, "proxyTypes", 2);
+c([
+  x()
+], n.prototype, "siteUrl", 2);
+c([
+  x()
+], n.prototype, "isRecentAssetsLoading", 2);
+c([
+  x()
+], n.prototype, "isFavoriteAssetsLoading", 2);
+c([
+  x()
+], n.prototype, "isUploadingAssetsLoading", 2);
+c([
+  x()
+], n.prototype, "connectError", 2);
+c([
+  x()
+], n.prototype, "disconnectError", 2);
+c([
+  x()
+], n.prototype, "upgradeError", 2);
+c([
+  x()
+], n.prototype, "totalCount", 2);
+c([
+  x()
+], n.prototype, "folderPathsSet", 2);
+c([
+  x()
+], n.prototype, "validConnectionUrl", 2);
+c([
+  x()
+], n.prototype, "isAddingRootIDs", 2);
+c([
+  L(["connectionEstablished", "token"])
+], n.prototype, "fetchData", 1);
+c([
+  L(["connectionEstablished"])
+], n.prototype, "showRecentTab", 1);
+c([
+  L("settings")
+], n.prototype, "updateSettingsStates", 1);
+c([
+  L("recentAssets")
+], n.prototype, "onRecentAssetsChanged", 1);
+c([
+  L("favoriteAssets")
+], n.prototype, "onFavoriteAssetsChanged", 1);
+c([
+  L("uploadingAssets")
+], n.prototype, "onUploadingAssetsChanged", 1);
+c([
+  x()
+], n.prototype, "searchText", 2);
+c([
+  L(["searchText"]),
+  Zt(200)
+], n.prototype, "onSearch", 1);
+c([
+  L("cacheLocation")
+], n.prototype, "handleCacheLocationChange", 1);
+n = c([
+  K("cx-file-on-demand")
+], n);
+export {
+  n as C,
+  As as U,
+  at as a,
+  Pe as b,
+  Oe as c,
+  nt as d,
+  Ue as e,
+  Ne as f,
+  je as i,
+  Ce as o,
+  Re as s
+};