@arcgis/portal-components 5.2.0-next.12 → 5.2.0-next.121

package/dist/components/arcgis-portal-group-browser/customElement.js

@@ -0,0 +1,801 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as E } from "../../chunks/runtime.js";
+import { css as q, html as u } from "lit";
+import { keyed as D } from "lit/directives/keyed.js";
+import { substitute as f } from "@arcgis/core/intl.js";
+import { LitElement as L, createEvent as g, nothing as U, safeClassMap as Q } from "@arcgis/lumina";
+import { u as R } from "../../chunks/useT9n.js";
+import { a as $, i as w } from "../../chunks/functionalities.js";
+import { c as z, a as T } from "../../chunks/string.js";
+import { i as H } from "../../chunks/users.js";
+import "../arcgis-portal-browser-search/customElement.js";
+import "../arcgis-portal-browser-top-bar/customElement.js";
+import { c as N, a as V } from "../../chunks/portal-browser.js";
+import "../arcgis-portal-group-card/customElement.js";
+import "../arcgis-portal-group-browser-card/customElement.js";
+import "../arcgis-portal-group-browser-preview/customElement.js";
+import { c as j } from "../../chunks/store.js";
+import { i as K, g as J, b as X, a as Y, c as Z, d as ee } from "../../chunks/query.js";
+import re from "@arcgis/core/portal/PortalGroup.js";
+import { r as se } from "../../chunks/request.js";
+import { a as te } from "../../chunks/portal.js";
+import { g as b, a as v, d as x, w as ie } from "../../chunks/portal-browser-filter-date.js";
+import { b as O } from "../../chunks/ui.js";
+import { watch as oe } from "@arcgis/core/core/reactiveUtils.js";
+import { PortalGroupBrowserSort as ae } from "../portal-group-browser-sort/customElement.js";
+import { PortalGroupBrowserPagination as ne } from "../portal-group-browser-pagination/customElement.js";
+import { PortalGroupBrowserFilters as le } from "../portal-group-browser-filters/customElement.js";
+const M = {
+  select: "arcgisGroupCardSelect",
+  preview: "arcgisGroupBrowserCardPreview"
+}, ce = q`:host{position:relative;background-color:var(--calcite-color-background);display:flex;flex-direction:column;height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;--portal-group-browser-max-width: var(--group-browser-max-width, 100%);--portal-group-browser-pane-width: 18.75rem;--portal-group-browser-pane-z-index: 11;container-type:inline-size;container-name:portal-group-browser}arcgis-portal-browser{--arcgis-browser-max-width: var(--portal-group-browser-max-width);--arcgis-browser-pane-width: var(--portal-group-browser-pane-width);--arcgis-browser-pane-z-index: var(--portal-group-browser-pane-z-index)}.filters-title__heading{color:var(--calcite-color-text-1);font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);line-height:1.2;margin:0;padding:1rem .5rem}.filters-title:has(>slot[name=before-filters][data-has-before-filters=true]) .filters-title__heading{border-bottom:1px solid var(--calcite-color-border-2)}.filters-shell{display:block}.filters-shell__top{padding:0}.filters-shell__top--padded{padding:0 1rem 1rem}.filter__accordion-item{--calcite-accordion-item-content-space: .75rem .25rem;--calcite-accordion-icon-margin: .5rem;border-top:1px solid var(--calcite-color-border-1)}.filter__actions-slot{display:flex;align-self:center;align-items:center;line-height:0}.filter__content{margin:0}.filter__content--padded{margin:-.75rem .5rem 0}.filter__content>calcite-tree>calcite-tree-item>a{padding-block:.25rem}.clear-button{line-height:1;margin-inline:.25rem}.custom-date-picker{margin-block:.5rem;margin-inline-start:1.75rem;width:12.75rem}.groups-by-user__label{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.special-groups-settings-option{display:inline-flex;align-items:center;gap:.25rem}.special-groups-settings-icon{display:inline-flex;align-items:center}.group-browser__results{display:grid;gap:.5rem}.group-browser__results--compact{gap:0}.group-browser__result-card{margin:0}@container portal-group-browser (max-width: 640px){arcgis-portal-browser{--portal-group-browser-pane-width: 100%}}.empty-text-slot{width:100%;height:100%;display:flex;justify-content:center}.empty-text-slot__default{@apply max-w-lg mx-auto px-6 pb-16;max-width:32rem;margin-inline:auto;padding-inline:1.5rem;padding-bottom:4rem;margin-top:min(8rem,30vh)}`;
+async function he(t, e) {
+  const r = `${te(t)}community/groups`, s = me(e), i = ue(e), n = !!e.searchUser?.trim();
+  if (!s.trim() && !n)
+    return {
+      nextStart: -1,
+      num: 0,
+      q: s,
+      queryParams: { ...i, q: s },
+      results: [],
+      start: 0,
+      total: 0
+    };
+  const a = { ...i, q: s }, o = await se({
+    url: r,
+    portal: t,
+    params: a
+  }), c = o.results.map((l) => {
+    const p = re.fromJSON(l);
+    return p.portal = t, p;
+  });
+  return {
+    ...o,
+    q: s,
+    queryParams: a,
+    results: c
+  };
+}
+const de = ["created", "modified", "owner", "title"];
+function pe(t) {
+  return !!t && de.includes(t);
+}
+function me(t) {
+  const e = [], r = t.baseQuery?.trim();
+  r && e.push(`(${r})`);
+  const s = t.searchTerm?.trim();
+  s && e.push(`(${z(s)})`);
+  for (const i of Object.values(t.filters ?? {}))
+    typeof i.value == "string" && i.value.trim() && e.push(`(${i.value.trim()})`), typeof i.additionalParams == "string" && i.additionalParams.trim() && e.push(`(${i.additionalParams.trim()})`);
+  return e.join(" AND ");
+}
+function ue(t) {
+  return {
+    num: t.num,
+    start: t.start,
+    ...t.searchUser ? { searchUserAccess: "groupMember", searchUserName: t.searchUser } : {},
+    ...t.sortField === "relevance" || !pe(t.sortField) ? {} : {
+      sortField: t.sortField,
+      sortOrder: t.sortOrder
+    }
+  };
+}
+function ge(t, e, r) {
+  switch (t) {
+    case "yesterday": {
+      const s = b();
+      return [s - x, s - 1];
+    }
+    case "today":
+      return [b(), v()];
+    case "last7":
+      return [b() - ie, v()];
+    case "last30":
+      return [b() - x * 30, v()];
+    case "never":
+      return [-1, -1];
+    case "custom":
+      return e && r ? [b(e), v(r)] : null;
+    default:
+      return $(t);
+  }
+}
+const we = ["created", "modified", "owner", "relevance", "title"], fe = ["asc", "desc"], be = ["custom", "last7", "last30", "never", "today", "yesterday"], ve = ["inOrg", "outsideOrg", "owner"], ye = ["anyOrg", "collaboration", "org"], Fe = ["anotherOrg", "myOrg"], Ge = ["admin", "distributed", "openData", "settings", "sharedUpdate"], Se = ["org", "private", "public"], Oe = [
+  "access",
+  "created",
+  "created_from",
+  "created_to",
+  "memberorgids",
+  "membershipaccess",
+  "modified",
+  "modified_from",
+  "modified_to",
+  "owner",
+  "q",
+  "searchTerm",
+  "sortField",
+  "sortOrder",
+  "specialGroups",
+  "start",
+  "num"
+];
+function y(t) {
+  if (!t)
+    return;
+  const e = Number.parseInt(t, 10);
+  return Number.isFinite(e) && e > 0 ? e : void 0;
+}
+function k(t, e) {
+  const r = t.get(e);
+  if (!w(be, r))
+    return;
+  if (r !== "custom")
+    return { range: r };
+  const s = y(t.get(`${e}_from`)), i = y(t.get(`${e}_to`));
+  if (!(!s || !i))
+    return { range: r, start: new Date(s), end: new Date(i) };
+}
+function W(t, e, r) {
+  r?.range && (t.set(e, r.range), r.range === "custom" && (r.start && t.set(`${e}_from`, `${b(r.start)}`), r.end && t.set(`${e}_to`, `${v(r.end)}`)));
+}
+function I(t) {
+  const e = t.get("searchTerm")?.trim() || t.get("q")?.trim() || void 0, r = t.get("sortField"), s = t.get("sortOrder"), i = y(t.get("start")), n = y(t.get("num")), a = t.get("access"), o = t.get("memberorgids"), c = t.get("membershipaccess"), l = t.get("owner"), p = t.get("specialGroups"), h = k(t, "created"), m = k(t, "modified");
+  return {
+    ...e ? { searchTerm: e } : {},
+    ...w(we, r) ? { sortField: r } : {},
+    ...w(fe, s) ? { sortOrder: s } : {},
+    ...i ? { start: i } : {},
+    ...n ? { num: n } : {},
+    filters: {
+      ...w(Se, a) ? { access: a } : {},
+      ...h ? { created: h } : {},
+      ...w(Fe, o) ? { memberOrg: o } : {},
+      ...w(ye, c) ? { membership: c } : {},
+      ...m ? { modified: m } : {},
+      ...w(ve, l) ? { owner: l } : {},
+      ...w(Ge, p) ? { specialGroups: p } : {}
+    }
+  };
+}
+function B(t) {
+  const e = I(t), { filters: r, num: s, sortField: i, sortOrder: n, start: a } = e, { access: o, created: c, memberOrg: l, membership: p, modified: h, owner: m, specialGroups: P } = r, d = {}, C = t.get("searchTerm")?.trim() || void 0, _ = t.get("q")?.trim() || void 0;
+  return C && (d.searchTerm = C), _ && (d.q = _), i && (d.sortField = i), n && (d.sortOrder = n), a && (d.start = a), s && (d.num = s), o && (d.access = o), m && (d.owner = m), p && (d.membershipAccess = p), l && (d.memberOrgIds = l), P && (d.specialGroups = P), c?.range && (d.created = c.range), c?.start && (d.createdFrom = c.start.getTime()), c?.end && (d.createdTo = c.end.getTime()), h?.range && (d.modified = h.range), h?.start && (d.modifiedFrom = h.start.getTime()), h?.end && (d.modifiedTo = h.end.getTime()), d;
+}
+function Be(t) {
+  const e = new URLSearchParams(t.currentSearchParams);
+  return Oe.forEach((r) => {
+    e.delete(r);
+  }), t.searchTerm?.trim() && e.set("searchTerm", t.searchTerm.trim()), t.sortField && e.set("sortField", t.sortField), t.sortOrder && e.set("sortOrder", t.sortOrder), Object.values(t.filters ?? {}).forEach((r) => {
+    if (r)
+      switch (r.id) {
+        case "owner":
+          r.owner && e.set("owner", r.owner);
+          break;
+        case "access":
+          r.access && e.set("access", r.access);
+          break;
+        case "specialGroups":
+          r.specialGroup && e.set("specialGroups", r.specialGroup);
+          break;
+        case "memberOrg":
+          r.memberOrg && e.set("memberorgids", r.memberOrg);
+          break;
+        case "membership":
+          r.membership && e.set("membershipaccess", r.membership);
+          break;
+        case "created":
+          W(e, "created", r);
+          break;
+        case "modified":
+          W(e, "modified", r);
+          break;
+        default:
+          $(r);
+      }
+  }), e;
+}
+function F(t, e = "desc") {
+  switch (t) {
+    case "owner":
+    case "title":
+      return "asc";
+    case "created":
+    case "modified":
+    case "relevance":
+      return "desc";
+    default:
+      return e;
+  }
+}
+function $e(t) {
+  return !t || !(t instanceof HTMLElement) ? null : t;
+}
+async function Pe(t) {
+  if (t) {
+    if (t.restoreFocus) {
+      await t.restoreFocus();
+      return;
+    }
+    if (t.setFocus) {
+      await t.setFocus();
+      return;
+    }
+    t.focus?.();
+  }
+}
+function Ce(t) {
+  let e = null;
+  const r = async (i = {}) => {
+    t.onClose(), i.restoreFocus && await Pe(e);
+  };
+  return { handlePreview: (i, n) => {
+    if (!i?.id) {
+      r();
+      return;
+    }
+    e = $e(n), t.onOpen({ preview: i });
+  }, closePreview: r };
+}
+function _e(t) {
+  let e, r, s;
+  const i = () => {
+    e?.();
+    const l = oe(
+      () => t.getStore().width,
+      () => {
+        n();
+      }
+    );
+    e = () => {
+      l.remove();
+    };
+  }, n = () => {
+    const l = t.getStore(), p = l.width || t.getHostWidth() || t.getViewportWidth(), h = Math.min(p, t.getViewportWidth());
+    l.width !== h && (l.width = h);
+    const m = h > O.md ? "large" : "small";
+    t.getResponsiveFormFactor() === "large" && m === "small" && (l.panel = !1, l.filtersExpanded = !1), t.getResponsiveFormFactor() === "small" && m === "large" && (l.panel = !1, l.filtersExpanded = !0), t.setResponsiveFormFactor(m);
+  };
+  return {
+    connect: () => {
+      typeof ResizeObserver < "u" && (r = new ResizeObserver((l) => {
+        const p = l[0]?.contentRect?.width ?? 0;
+        if (p > 0) {
+          const h = Math.round(p);
+          t.setHostWidth(h), t.getStore().width = h, n();
+        }
+      }), r.observe(t.el)), i(), n();
+    },
+    disconnect: () => {
+      s !== void 0 && (cancelAnimationFrame(s), s = void 0), e?.(), r?.disconnect(), r = void 0;
+    },
+    refreshStoreWatcher: i,
+    handleWindowResize: () => {
+      if (t.setViewportWidth(window.innerWidth), !r) {
+        if (s !== void 0)
+          return;
+        s = requestAnimationFrame(() => {
+          s = void 0;
+          const l = Math.round(
+            t.el.getBoundingClientRect().width || t.getHostWidth() || t.getViewportWidth()
+          ), p = Math.min(l, t.getViewportWidth()), h = t.getStore();
+          h.width !== p && (h.width = p), n();
+        });
+        return;
+      }
+      n();
+    },
+    updateResponsiveLayout: n
+  };
+}
+function Ue(t) {
+  let e = !1;
+  const r = () => !!t.getSearchParamInteraction()?.read, s = () => !!t.getSearchParamInteraction()?.write;
+  return { hydrateFromLocation: async () => {
+    if (!r() || typeof window > "u")
+      return;
+    const a = new URLSearchParams(window.location.search);
+    await t.applySearchParams(a), t.onSearchParamsUpdate?.({
+      phase: "hydrate",
+      search: a.toString(),
+      searchParams: a,
+      searchParamMap: B(a)
+    }), e = !0;
+  }, writeToLocation: (a) => {
+    if (!s() || typeof window > "u")
+      return;
+    if (e) {
+      e = !1;
+      return;
+    }
+    const o = a.toString(), c = window.location.search.startsWith("?") ? window.location.search.slice(1) : window.location.search;
+    if (o === c)
+      return;
+    const l = `${window.location.pathname}${o ? `?${o}` : ""}${window.location.hash}`;
+    window.history.replaceState(window.history.state, "", l), t.onSearchParamsUpdate?.({
+      phase: "write",
+      search: o,
+      searchParams: a,
+      searchParamMap: B(a)
+    });
+  } };
+}
+const G = ["title", "relevance", "modified"], S = {
+  queryParams: void 0,
+  nextStart: -1,
+  results: [],
+  start: -1,
+  num: 0,
+  total: 0
+}, A = [
+  "openData",
+  "sharedUpdate",
+  "distributed",
+  "admin",
+  "settings"
+];
+class Re extends L {
+  constructor() {
+    super(), this._messages = R({ name: "portal-group-browser", blocking: !0 }), this._browserMessages = R({ name: "portal-browser", blocking: !0 }), this.responsiveLayoutController = _e({
+      el: this.el,
+      getStore: () => this.store,
+      getViewportWidth: () => this.viewportWidth,
+      setViewportWidth: (e) => {
+        this.viewportWidth = e;
+      },
+      getHostWidth: () => this.hostWidth,
+      setHostWidth: (e) => {
+        this.hostWidth = e;
+      },
+      getResponsiveFormFactor: () => this.responsiveFormFactor,
+      setResponsiveFormFactor: (e) => {
+        this.responsiveFormFactor = e;
+      }
+    }), this.previewSessionController = Ce({
+      onOpen: ({ preview: e }) => {
+        this.store.preview = e.id, this.arcgisGroupBrowserPreview.emit(e);
+      },
+      onClose: () => {
+        this.store.preview = null, this.arcgisGroupBrowserPreview.emit(null), this.arcgisGroupBrowserSublayerPreview.emit(null);
+      }
+    }), this.browserResponse = this.getBrowserResponseFromQueryResponse(S), this.previewGroupsById = /* @__PURE__ */ new Map(), this.searchParamController = Ue({
+      applySearchParams: async (e) => {
+        await this.applySearchParams(e);
+      },
+      getSearchParamInteraction: () => this.searchParamInteraction,
+      onSearchParamsUpdate: (e) => {
+        this.arcgisGroupBrowserSearchParamsUpdate.emit(e);
+      }
+    }), this.handleBrowserFilterClear = () => {
+      this.clearFilters();
+    }, this.handleBrowserFilterRemove = (e) => {
+      const r = e.detail;
+      r && this.removeFilter(r);
+    }, this.onDelegatedGroupCardSelect = (e) => {
+      this.handleGroupCardSelect(e);
+    }, this.onDelegatedGroupCardPreview = (e) => {
+      this.handleGroupCardPreview(e);
+    }, this.selectedOwner = null, this.selectedMembership = null, this.selectedMemberOrg = null, this.selectedSpecialGroup = null, this.selectedAccess = null, this.selectedGroups = [], this.queryResponse = S, this.specialGroupOptions = A, this.responsiveFormFactor = "large", this.viewportWidth = typeof window > "u" ? O.lg : window.innerWidth, this.hostWidth = 0, this.store = j({
+      type: "group-browser",
+      width: window?.innerWidth ?? O.lg,
+      hiddenFilters: [],
+      filtersEmpty: !1,
+      topbarEmpty: !1,
+      sortEmpty: !1,
+      filtersExpanded: !1,
+      panel: !1,
+      filters: {}
+    }), this.filters = {}, this.loading = !1, this.formFactor = "large", this.height = "full", this.searchTerm = "", this.messageOverrides = {}, this.hideTopBar = !1, this.cards = {}, this.preview = "top", this.q = "", this.num = 60, this.sort = {
+      enabled: !0,
+      props: {
+        options: G
+      }
+    }, this.searchParamInteraction = {
+      read: !1,
+      write: !1
+    }, this.selection = "none", this.alwaysShowSelection = !1, this.hidePreviewFooter = !1, this.hidePreviewBadges = !1, this.hasIndoorsSpaces = !1, this.arcgisGroupBrowserLoading = g(), this.arcgisGroupBrowserPreview = g(), this.arcgisGroupBrowserSelect = g(), this.arcgisGroupBrowserSublayerPreview = g(), this.arcgisGroupBrowserUpdate = g(), this.arcgisGroupBrowserInternalUIAction = g(), this.arcgisGroupBrowserUserFilterChange = g(), this.arcgisGroupBrowserSearchParamsUpdate = g(), this.arcgisAriaUpdate = g(), this.listen(M.select, this.onDelegatedGroupCardSelect), this.listen(M.preview, this.onDelegatedGroupCardPreview);
+  }
+  static {
+    this.properties = { selectedGroupsByUser: 16, selectedOwner: 16, selectedMembership: 16, selectedMemberOrg: 16, selectedSpecialGroup: 16, selectedAccess: 16, selectedGroups: 16, queryResponse: 16, specialGroupOptions: 16, sortField: 16, sortOrder: 16, responsiveFormFactor: 16, viewportWidth: 16, hostWidth: 16, store: 0, filters: 0, loading: 5, formFactor: 1, height: 3, searchTerm: 1, messageOverrides: 0, hideTopBar: 5, selected: 0, view: 1, cards: 0, preview: 1, q: 1, portal: 0, num: 9, sort: 0, fetch: 0, preflight: 0, searchUser: 1, searchParamInteraction: 0, selection: 1, alwaysShowSelection: 5, hidePreviewFooter: 5, hidePreviewBadges: 5, hasIndoorsSpaces: 5 };
+  }
+  static {
+    this.styles = ce;
+  }
+  get currentUsername() {
+    return this.portal.user?.username ?? "";
+  }
+  get selectedGroupsState() {
+    return this.selectedGroups;
+  }
+  get previewedGroupId() {
+    return this.store.preview || void 0;
+  }
+  async refresh() {
+    await this.fetchGroups();
+  }
+  async clearFilters() {
+    this.clearFiltersInternal(), await this.fetchGroups();
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("resize", this.responsiveLayoutController.handleWindowResize), this.responsiveLayoutController.connect();
+  }
+  firstUpdated() {
+    this.initializeBrowserState();
+  }
+  updated(e) {
+    e.has("view") && (this.store.view = this.view), e.has("store") && (this.view !== void 0 && (this.store.view = this.view), this.responsiveLayoutController.refreshStoreWatcher(), this.responsiveLayoutController.updateResponsiveLayout(), this.syncFiltersEmptyFromConfig()), e.has("filters") && this.syncFiltersEmptyFromConfig(), e.has("selected") && (this.selectedGroups = this.selected || []);
+    const r = e.get("num");
+    r !== void 0 && r !== this.num && this.fetchGroups(), (e.has("portal") || e.has("hasIndoorsSpaces")) && this.updateSpecialGroupOptions(), e.has("sort") && this.syncSortFromConfig();
+  }
+  disconnectedCallback() {
+    this.responsiveLayoutController.disconnect(), window.removeEventListener("resize", this.responsiveLayoutController.handleWindowResize), super.disconnectedCallback();
+  }
+  syncSelectionsFromConfig() {
+    this.selectedGroupsByUser = this.filters.groupsByUser?.props?.selectedUsername ?? this.currentUsername, this.selectedOwner = this.filters.owner?.props?.owner || null, this.selectedMembership = this.filters.membership?.props?.membership || null, this.selectedMemberOrg = this.filters.memberOrg?.props?.memberOrg || null, this.selectedSpecialGroup = this.filters.specialGroups?.props?.specialGroup || null, this.selectedAccess = this.filters.access?.props?.access || null;
+  }
+  async initializeBrowserState() {
+    this.syncSortFromConfig(), this.syncFiltersEmptyFromConfig(), this.selectedGroups = this.selected || [], this.syncSelectionsFromConfig(), await this.searchParamController.hydrateFromLocation(), await this.updateSpecialGroupOptions(!1), await this.fetchGroups();
+  }
+  resetSelectionByFilterId(e) {
+    switch (e) {
+      case "groupsByUser":
+        this.selectedGroupsByUser = this.filters.groupsByUser?.props?.selectedUsername ?? this.currentUsername;
+        break;
+      case "owner":
+        this.selectedOwner = null;
+        break;
+      case "membership":
+        this.selectedMembership = null;
+        break;
+      case "memberOrg":
+        this.selectedMemberOrg = null;
+        break;
+      case "specialGroups":
+        this.selectedSpecialGroup = null;
+        break;
+      case "access":
+        this.selectedAccess = null;
+        break;
+    }
+  }
+  resetAllFilterSelections() {
+    this.selectedGroupsByUser = this.filters.groupsByUser?.props?.selectedUsername ?? this.currentUsername, this.selectedOwner = null, this.selectedMembership = null, this.selectedMemberOrg = null, this.selectedSpecialGroup = null, this.selectedAccess = null;
+  }
+  getSearchParamsSnapshot(e, r) {
+    return Be({
+      currentSearchParams: typeof window > "u" ? void 0 : new URLSearchParams(window.location.search),
+      filters: this.store.filters,
+      searchTerm: r,
+      sortField: e.queryParams?.sortField,
+      sortOrder: e.queryParams?.sortOrder
+    });
+  }
+  publishFilterStateChange() {
+    this.requestUpdate();
+  }
+  syncFiltersEmptyFromConfig() {
+    const r = [
+      "created",
+      "modified",
+      "owner",
+      "membership",
+      "memberOrg",
+      "specialGroups",
+      "access",
+      "groupsByUser"
+    ].some((s) => !!this.filters[s]?.enabled);
+    this.store.filtersEmpty = !r;
+  }
+  syncSortFromConfig() {
+    const e = this.sort, r = e.props?.options ?? G;
+    if (!e.enabled) {
+      this.sortField = void 0, this.sortOrder = void 0;
+      return;
+    }
+    if (!r.length) {
+      this.sortField = void 0, this.sortOrder = void 0;
+      return;
+    }
+    const s = e.props?.field, i = s && r.includes(s) ? s : r[0];
+    this.sortField = i, this.sortOrder = e.props?.order ?? F(i, this.sortOrder);
+  }
+  async updateSpecialGroupOptions(e = !0) {
+    if (!this.portal) {
+      this.specialGroupOptions = [];
+      return;
+    }
+    let r = "";
+    try {
+      r = await K(this.portal);
+    } catch {
+      r = "";
+    }
+    if (this.specialGroupOptions = A.filter((s) => !(s === "openData" && this.portal.isPortal || // https://devtopia.esri.com/webgis/arcgis-portal-app/issues/37831
+    s === "distributed" && this.hasIndoorsSpaces || // https://devtopia.esri.com/WebGIS/arcgis-portal-app/issues/45449 orgs with no settings
+    s === "settings" && !r)), this.selectedSpecialGroup && !this.specialGroupOptions.includes(this.selectedSpecialGroup))
+      if (e)
+        this.removeFilter("specialGroups");
+      else {
+        const { specialGroups: s, ...i } = this.store.filters;
+        this.store.filters = {
+          ...i
+        }, this.selectedSpecialGroup = null;
+      }
+  }
+  async applySearchParams(e) {
+    const r = I(e);
+    if (!this.searchTerm && r.searchTerm && (this.searchTerm = r.searchTerm), this.sort.enabled) {
+      const s = this.sort.props?.options ?? G;
+      r.sortField && this.sort.props?.field === void 0 && s.includes(r.sortField) && (this.sortField = r.sortField), r.sortOrder && this.sort.props?.order === void 0 ? this.sortOrder = r.sortOrder : r.sortField && this.sort.props?.order === void 0 && (this.sortOrder = F(r.sortField, this.sortOrder));
+    }
+    await this.applyFilterSearchParams(r.filters);
+  }
+  async applyFilterSearchParams(e) {
+    const r = { ...this.store.filters };
+    let s = !1;
+    const i = H(this.portal.user);
+    if (e.owner && this.filters.owner?.enabled && !this.filters.owner.props?.owner) {
+      const o = this.filters.owner.props?.username ?? this.currentUsername;
+      r.owner = {
+        id: "owner",
+        label: f(this._messages.owner.label, {
+          label: this.getOwnerOptionLabel(e.owner, o, i)
+        }),
+        param: "q",
+        value: J(e.owner, o, { isPublicUser: i, orgId: this.portal.id ?? "" }),
+        owner: e.owner,
+        username: o
+      }, this.selectedOwner = e.owner, s = !0;
+    }
+    e.membership && this.filters.membership?.enabled && !this.filters.membership.props?.membership && (r.membership = {
+      id: "membership",
+      label: f(this._messages.membership.label, { label: this._messages.membership[e.membership] }),
+      param: "q",
+      value: X(e.membership, this.hasIndoorsSpaces),
+      membership: e.membership
+    }, this.selectedMembership = e.membership, s = !0), e.memberOrg && this.filters.memberOrg?.enabled && !this.filters.memberOrg.props?.memberOrg && (r.memberOrg = {
+      id: "memberOrg",
+      label: f(this._messages.memberOrg.label, { label: this._messages.memberOrg[e.memberOrg] }),
+      param: "q",
+      value: Y(e.memberOrg, this.filters.memberOrg.props?.orgId ?? this.portal.id ?? ""),
+      memberOrg: e.memberOrg,
+      orgId: this.filters.memberOrg.props?.orgId ?? this.portal.id ?? ""
+    }, this.selectedMemberOrg = e.memberOrg, s = !0), e.specialGroups && this.filters.specialGroups?.enabled && !this.filters.specialGroups.props?.specialGroup && (r.specialGroups = {
+      id: "specialGroups",
+      label: f(this._messages.specialGroups.label, {
+        label: this._messages.specialGroups[e.specialGroups]
+      }),
+      param: "q",
+      value: await Z(e.specialGroups, this.portal),
+      specialGroup: e.specialGroups
+    }, this.selectedSpecialGroup = e.specialGroups, s = !0), e.access && this.filters.access?.enabled && !this.filters.access.props?.access && (r.access = {
+      id: "access",
+      label: f(this._messages.access.label, { label: this._messages.access[e.access] }),
+      param: "q",
+      value: ee(e.access),
+      access: e.access
+    }, this.selectedAccess = e.access, s = !0);
+    const n = this.getDateFilterDetailFromSearchParams("created", e.created);
+    n && (r.created = n, s = !0);
+    const a = this.getDateFilterDetailFromSearchParams("modified", e.modified);
+    a && (r.modified = a, s = !0), s && (this.store.filters = r, this.publishFilterStateChange());
+  }
+  getDateFilterDetailFromSearchParams(e, r) {
+    const s = this.filters[e];
+    if (!s?.enabled || s.props?.range || s.props?.start || s.props?.end || !r?.range)
+      return;
+    const i = ge(r.range, r.start, r.end);
+    if (!i)
+      return;
+    const n = this._browserMessages.filterDate[r.range], [a, o] = i;
+    return {
+      id: e,
+      label: f(this._browserMessages.filterDate[e], { date: n }),
+      param: "q",
+      value: `(${s.props?.serverProperty ?? (e === "modified" ? "modified" : "uploaded")}:[${a} TO ${o}])`,
+      range: r.range,
+      start: new Date(a),
+      end: new Date(o)
+    };
+  }
+  getOwnerOptionLabel(e, r, s) {
+    return e === "owner" ? r : e === "outsideOrg" && s ? this._messages.owner.someoneElse : e === "inOrg" ? this._messages.owner.inOrg : this._messages.owner.outsideOrg;
+  }
+  writeSearchParams(e) {
+    this.searchParamController.writeToLocation(e);
+  }
+  async fetchGroups() {
+    this.loading = !0, this.arcgisGroupBrowserLoading.emit();
+    const e = this.createQuery();
+    await this.fetchAndEmit(e, this.searchTerm);
+  }
+  removeFilter(e) {
+    const r = this.store.filters[e];
+    r && (this.store.filters = {
+      ...this.store.filters,
+      [e]: N(r)
+    }, this.resetSelectionByFilterId(e), this.publishFilterStateChange(), this.fetchGroups());
+  }
+  clearFiltersInternal() {
+    this.store.filters = V(this.store.filters, {
+      hiddenFilterIds: this.store.hiddenFilters
+    }), this.resetAllFilterSelections(), this.publishFilterStateChange(), this.fetchGroups();
+  }
+  isFilterActive(e) {
+    const r = this.store.filters[e];
+    return r ? !!(r.value || "additionalParams" in r && r.additionalParams) : !1;
+  }
+  setFilterSelection(e) {
+    switch (e.kind) {
+      case "owner":
+        this.selectedOwner = e.value;
+        break;
+      case "membership":
+        this.selectedMembership = e.value;
+        break;
+      case "memberOrg":
+        this.selectedMemberOrg = e.value;
+        break;
+      case "access":
+        this.selectedAccess = e.value;
+        break;
+      case "groupsByUser":
+        this.selectedGroupsByUser = e.value;
+        break;
+      case "specialGroups":
+        this.selectedSpecialGroup = e.value;
+        break;
+      default:
+        $(e);
+    }
+  }
+  selectGroup(e) {
+    this.isSelected(e) || (this.selectedGroups = [...this.selectedGroups, e]);
+  }
+  deselectGroup(e) {
+    this.selectedGroups = this.selectedGroups.filter(({ id: r }) => r !== e.id);
+  }
+  isSelected(e) {
+    return this.selectedGroups.some(({ id: r }) => e.id === r);
+  }
+  handleGroupCardSelect(e) {
+    const { selected: r, group: s } = e.detail;
+    switch (this.selection) {
+      case "single":
+        this.selectedGroups = [s];
+        break;
+      case "multiple":
+        r ? this.selectGroup(s) : this.deselectGroup(s);
+        break;
+      default:
+        return;
+    }
+    this.arcgisGroupBrowserSelect.emit(this.selectedGroups);
+  }
+  handleGroupCardPreview(e) {
+    this.store.filtersExpanded = !1, this.previewSessionController.handlePreview(e.detail, e.target);
+  }
+  closePreview(e = {}) {
+    this.previewSessionController.closePreview(e);
+  }
+  async handleSortFieldChange(e) {
+    this.sortField = e, this.sortOrder = F(e, this.sortOrder), this.loading = !0, this.arcgisGroupBrowserLoading.emit();
+    const r = this.createQuery({ start: 1, total: 0 });
+    await this.fetchAndEmit(r, this.searchTerm);
+  }
+  async handleSortOrderChange(e) {
+    this.sortOrder = e, this.loading = !0, this.arcgisGroupBrowserLoading.emit();
+    const r = this.createQuery({ start: 1, total: 0 });
+    await this.fetchAndEmit(r, this.searchTerm);
+  }
+  emitUpdate(e, r) {
+    const s = e.queryParams, i = this.getSearchParamsSnapshot(e, r), n = B(i);
+    this.arcgisGroupBrowserUpdate.emit({
+      queryResponse: e,
+      sortField: s?.sortField,
+      sortOrder: s?.sortOrder,
+      selectedGroups: this.selectedGroups,
+      filters: { ...this.store.filters },
+      searchTerm: r,
+      searchParamMap: n
+    }), this.writeSearchParams(i);
+  }
+  async queryGroups(e) {
+    return await (this.fetch?.(e) ?? he(this.portal, e));
+  }
+  async fetchAndEmit(e, r) {
+    this.preflight && (e = await this.preflight(e));
+    const s = await this.queryGroups(e);
+    this.store.preview && !s.results.some((i) => i.id === this.store.preview) && this.closePreview(), this.queryResponse = s, this.previewGroupsById = new Map(s.results.filter((i) => !!i.id).map((i) => [i.id, i])), this.browserResponse = this.getBrowserResponseFromQueryResponse(s), this.loading = !1, this.emitUpdate(s, r);
+  }
+  createQuery(e = {}) {
+    return {
+      filters: this.store.filters,
+      searchUser: this.searchUser,
+      searchTerm: e.searchTerm ?? this.searchTerm,
+      baseQuery: this.q,
+      sortField: this.sortField,
+      sortOrder: this.sortOrder,
+      start: e.start ?? 1,
+      num: e.num ?? this.num,
+      total: e.total ?? this.queryResponse.total
+    };
+  }
+  async handleSearch(e) {
+    this.searchTerm = e, this.loading = !0, this.arcgisGroupBrowserLoading.emit();
+    const r = this.createQuery({ searchTerm: e });
+    await this.fetchAndEmit(r, e);
+  }
+  async handlePage({ num: e, start: r, total: s }) {
+    this.loading = !0, this.arcgisGroupBrowserLoading.emit();
+    const i = this.createQuery({ start: r, num: e, total: s });
+    await this.fetchAndEmit(i, this.searchTerm);
+  }
+  getBrowserResponseFromQueryResponse(e) {
+    const { nextStart: r, num: s, queryParams: i, results: n, start: a, total: o } = e ?? S;
+    return {
+      nextStart: r ?? -1,
+      num: s ?? i?.num ?? 0,
+      results: n,
+      start: a ?? i?.start ?? 1,
+      total: o
+    };
+  }
+  async formatRange({ start: e, end: r, total: s }) {
+    if (this._messages._lang?.toLowerCase().startsWith("en"))
+      return [`${e}-${r} of ${s}`, `${e}-${r} of ${s} group${s === "1" ? "" : "s"}`];
+    const n = this._messages.browser, a = { start: e, end: r, total: s }, o = T(n.pageRange, a), c = T(n.pageRangeAria, a);
+    return [o, c];
+  }
+  getPreviewFooterActionsEmpty() {
+    return !this.el?.querySelector('[slot="preview-footer-action"]');
+  }
+  renderTopBar() {
+    return u`<arcgis-portal-browser-top-bar slot=top-bar .store=${this.store}><slot name=top-bar-start slot=content-start></slot><arcgis-portal-browser-search slot=search .store=${this.store} .term=${this.searchTerm} .placeholder=${this.messageOverrides.searchPlaceholder} @arcgisBrowserSearch=${(e) => {
+      this.handleSearch(e.detail);
+    }}></arcgis-portal-browser-search><slot name=top-bar-end slot=content-end></slot></arcgis-portal-browser-top-bar>`;
+  }
+  renderEmptyTextSlot(e, r) {
+    return u`<div slot=${e ?? U} class="empty-text-slot"><slot name=${e ?? U}><p class="empty-text-slot__default">${r}</p></slot></div>`;
+  }
+  renderDefaultContent() {
+    const e = new Set(this.selectedGroups.map((a) => a.id)), r = !!this.el.querySelector('[slot="group-cards"]'), s = this.view ?? this.store.view ?? "list", i = this.queryResponse.results.map((a) => {
+      const o = this.cards.group, c = typeof o == "function" ? o(a) : {};
+      return {
+        group: a,
+        cardProps: c
+      };
+    }), n = i.length > 0 && s === "compact";
+    return u`<div slot=content class=${Q({ "group-browser__results": !0, "group-browser__results--compact": n })} .part=${"results"}>${r ? u`<slot name=group-cards></slot>` : u`<slot name=group-cards>${i.map(({ group: a, cardProps: o }) => {
+      const c = a.id;
+      return D(c, u`<arcgis-portal-group-card class="group-browser__result-card" .portal=${this.portal} .group=${a} .user=${o.user} .indeterminate=${o.indeterminate} .view=${s} .selection=${this.selection} .selected=${e.has(c)} .preview=${o.preview ?? this.preview} .previewed=${o.previewed ?? this.store.preview === c} .name=${o.name} .showSummary=${o.showSummary ?? !0} .hideBadges=${o.hideBadges ?? !1} .hideDateUpdated=${o.hideDateUpdated ?? !1} .showDateCreated=${o.showDateCreated ?? !1} .hideViewableBy=${o.hideViewableBy ?? !1} .hideOwner=${o.hideOwner ?? !1} .link=${o.link} .linkHandler=${o.linkHandler} .newTab=${o.newTab ?? !1} .disabled=${o.disabled ?? !1}></arcgis-portal-group-card>`);
+    })}</slot>`}</div>`;
+  }
+  render() {
+    const e = this.responsiveFormFactor === "small" ? "small" : this.formFactor, r = this.previewGroupsById.get(this.store.preview ?? "");
+    return u`<arcgis-portal-browser .store=${this.store} .response=${this.browserResponse} .loading=${this.loading} .formFactor=${e} .height=${this.height} .searchTerm=${this.searchTerm} .rangeFormatter=${this.formatRange} .selected=${this.selectedGroups} .alwaysShowSelection=${this.alwaysShowSelection} @arcgisBrowserFilterClear=${this.handleBrowserFilterClear} @arcgisBrowserFilterRemove=${this.handleBrowserFilterRemove} @arcgisAriaUpdate=${(s) => {
+      this.arcgisAriaUpdate.emit(s.detail);
+    }}>${!this.hideTopBar && u`<slot name=top-bar slot=top-bar>${this.renderTopBar()}</slot>` || ""}<slot name=content-start slot=content-start></slot><slot name=selection slot=selection></slot><slot name=actions slot=actions></slot><slot name=view slot=view></slot>${ae({ slot: "sort", sort: this.sort, formFactor: e, sortField: this.sortField, sortOrder: this.sortOrder, onSortFieldChange: (s) => {
+      this.handleSortFieldChange(s);
+    }, onSortOrderChange: (s) => {
+      this.handleSortOrderChange(s);
+    } })}${this.renderDefaultContent()}${ne({ slot: "pagination", store: this.store, total: this.queryResponse.total, start: this.queryResponse?.queryParams?.start ?? 1, num: this.queryResponse?.queryParams?.num ?? this.num, onPage: (s) => {
+      this.handlePage(s);
+    } })}<slot name=content-end slot=content-end></slot><slot name=preview slot=preview>${r && u`<arcgis-portal-group-browser-preview .group=${r} .portal=${this.portal} .user=${this.portal.user ?? void 0} .hideBadges=${this.hidePreviewBadges} .hidePreviewFooter=${this.hidePreviewFooter} .currentResponse=${this.queryResponse} .previewFooterActionsSpaced=${!this.getPreviewFooterActionsEmpty()} @arcgisGroupBrowserInternalUIAction=${(s) => {
+      this.arcgisGroupBrowserInternalUIAction.emit(s.detail);
+    }} @arcgisGroupBrowserPreviewClose=${() => {
+      this.closePreview({ restoreFocus: !0 });
+    }}><slot name=preview-footer-action slot=footer-action></slot></arcgis-portal-group-browser-preview>` || ""}</slot>${this.renderEmptyTextSlot("no-results", this._messages.content.noResults)}${this.renderEmptyTextSlot("no-content", this._messages.content.noContent)}<slot name=scroll-end slot=scroll-end></slot>${le({ slot: "filters", filters: this.filters, messages: this._messages, browserMessages: this._browserMessages, store: this.store, portal: this.portal, hasIndoorsSpaces: this.hasIndoorsSpaces, selectedGroupsByUser: this.selectedGroupsByUser, selectedOwner: this.selectedOwner, selectedMembership: this.selectedMembership, selectedMemberOrg: this.selectedMemberOrg, selectedSpecialGroup: this.selectedSpecialGroup, specialGroupOptions: this.specialGroupOptions, selectedAccess: this.selectedAccess, isFilterActive: (s) => this.isFilterActive(s), handleSelect: (s) => {
+      this.setFilterSelection(s);
+    }, handleUserFilterChange: (s) => {
+      this.arcgisGroupBrowserUserFilterChange.emit(s);
+    }, handleRemove: (s) => {
+      this.removeFilter(s);
+    }, handleUpsert: (s) => {
+      this.store.filters = { ...this.store.filters, [s.id]: s }, this.publishFilterStateChange(), this.fetchGroups();
+    } })}</arcgis-portal-browser>`;
+  }
+}
+E("arcgis-portal-group-browser", Re);
+export {
+  Re as ArcgisPortalGroupBrowser
+};