@arcgis/portal-components 5.2.0-next.9 → 5.2.0-next.90

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

@@ -0,0 +1,736 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as T } from "../../chunks/runtime.js";
+import { css as W, html as p } from "lit";
+import { keyed as A } from "lit/directives/keyed.js";
+import { substitute as w } from "@arcgis/core/intl.js";
+import { LitElement as M, createEvent as m, nothing as B, safeClassMap as q } from "@arcgis/lumina";
+import { u as _ } from "../../chunks/useT9n.js";
+import { a as $, i as g } from "../../chunks/functionalities.js";
+import { c as E, a as P } from "../../chunks/string.js";
+import { i as L } from "../../chunks/users.js";
+import "../arcgis-portal-browser-search/customElement.js";
+import "../arcgis-portal-browser-top-bar/customElement.js";
+import { c as I, a as D } from "../../chunks/portal-browser.js";
+import "../arcgis-portal-group-card/customElement.js";
+import "../arcgis-portal-group-browser-preview/customElement.js";
+import { c as Q } from "../../chunks/store.js";
+import { i as z, g as V, a as H, b as N, c as j, d as J } from "../../chunks/query.js";
+import K from "@arcgis/core/portal/PortalGroup.js";
+import { r as X } from "../../chunks/request.js";
+import { a as Y } from "../../chunks/portal.js";
+import { g as f, a as v, d as U, w as Z } from "../../chunks/portal-browser-filter-date.js";
+import { b as O } from "../../chunks/ui.js";
+import { watch as ee } from "@arcgis/core/core/reactiveUtils.js";
+import { PortalGroupBrowserSort as te } from "../portal-group-browser-sort/customElement.js";
+import { PortalGroupBrowserPagination as re } from "../portal-group-browser-pagination/customElement.js";
+import { PortalGroupBrowserFilters as se } from "../portal-group-browser-filters/customElement.js";
+const ie = W`: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-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){:host{--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 oe(r, e) {
+  const t = `${Y(r)}community/groups`, s = le(e), i = ce(e), o = !!e.searchUser?.trim();
+  if (!s.trim() && !o)
+    return {
+      nextStart: -1,
+      num: 0,
+      q: s,
+      queryParams: { ...i, q: s },
+      results: [],
+      start: 0,
+      total: 0
+    };
+  const a = { ...i, q: s }, n = await X({
+    url: t,
+    portal: r,
+    params: a
+  }), d = n.results.map((l) => {
+    const c = K.fromJSON(l);
+    return c.portal = r, c;
+  });
+  return {
+    ...n,
+    q: s,
+    queryParams: a,
+    results: d
+  };
+}
+const ae = ["created", "modified", "owner", "title"];
+function ne(r) {
+  return !!r && ae.includes(r);
+}
+function le(r) {
+  const e = [], t = r.baseQuery?.trim();
+  t && e.push(`(${t})`);
+  const s = r.searchTerm?.trim();
+  s && e.push(`(${E(s)})`);
+  for (const i of Object.values(r.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 ce(r) {
+  return {
+    num: r.num,
+    start: r.start,
+    ...r.searchUser ? { searchUserAccess: "groupMember", searchUserName: r.searchUser } : {},
+    ...r.sortField === "relevance" || !ne(r.sortField) ? {} : {
+      sortField: r.sortField,
+      sortOrder: r.sortOrder
+    }
+  };
+}
+function he(r, e, t) {
+  switch (r) {
+    case "yesterday": {
+      const s = f();
+      return [s - U, s - 1];
+    }
+    case "today":
+      return [f(), v()];
+    case "last7":
+      return [f() - Z, v()];
+    case "last30":
+      return [f() - U * 30, v()];
+    case "never":
+      return [-1, -1];
+    case "custom":
+      return e && t ? [f(e), v(t)] : null;
+    default:
+      return $(r);
+  }
+}
+const de = ["created", "modified", "owner", "relevance", "title"], pe = ["asc", "desc"], ue = ["custom", "last7", "last30", "never", "today", "yesterday"], me = ["inOrg", "outsideOrg", "owner"], ge = ["anyOrg", "collaboration", "org"], we = ["anotherOrg", "myOrg"], fe = ["admin", "distributed", "openData", "settings", "sharedUpdate"], be = ["org", "private", "public"], ve = [
+  "access",
+  "created",
+  "created_from",
+  "created_to",
+  "memberorgids",
+  "membershipaccess",
+  "modified",
+  "modified_from",
+  "modified_to",
+  "owner",
+  "q",
+  "searchTerm",
+  "sortField",
+  "sortOrder",
+  "specialGroups",
+  "start",
+  "num"
+];
+function F(r) {
+  if (!r)
+    return;
+  const e = Number.parseInt(r, 10);
+  return Number.isFinite(e) && e > 0 ? e : void 0;
+}
+function C(r, e) {
+  const t = r.get(e);
+  if (!g(ue, t))
+    return;
+  if (t !== "custom")
+    return { range: t };
+  const s = F(r.get(`${e}_from`)), i = F(r.get(`${e}_to`));
+  if (!(!s || !i))
+    return { range: t, start: new Date(s), end: new Date(i) };
+}
+function R(r, e, t) {
+  t?.range && (r.set(e, t.range), t.range === "custom" && (t.start && r.set(`${e}_from`, `${f(t.start)}`), t.end && r.set(`${e}_to`, `${v(t.end)}`)));
+}
+function ye(r) {
+  const e = r.get("searchTerm")?.trim() || r.get("q")?.trim() || void 0, t = r.get("sortField"), s = r.get("sortOrder"), i = F(r.get("start")), o = F(r.get("num")), a = r.get("access"), n = r.get("memberorgids"), d = r.get("membershipaccess"), l = r.get("owner"), c = r.get("specialGroups"), h = C(r, "created"), u = C(r, "modified");
+  return {
+    ...e ? { searchTerm: e } : {},
+    ...g(de, t) ? { sortField: t } : {},
+    ...g(pe, s) ? { sortOrder: s } : {},
+    ...i ? { start: i } : {},
+    ...o ? { num: o } : {},
+    filters: {
+      ...g(be, a) ? { access: a } : {},
+      ...h ? { created: h } : {},
+      ...g(we, n) ? { memberOrg: n } : {},
+      ...g(ge, d) ? { membership: d } : {},
+      ...u ? { modified: u } : {},
+      ...g(me, l) ? { owner: l } : {},
+      ...g(fe, c) ? { specialGroups: c } : {}
+    }
+  };
+}
+function Fe(r) {
+  const e = new URLSearchParams(r.currentSearchParams);
+  return ve.forEach((t) => {
+    e.delete(t);
+  }), r.searchTerm?.trim() && e.set("searchTerm", r.searchTerm.trim()), r.sortField && e.set("sortField", r.sortField), r.sortOrder && e.set("sortOrder", r.sortOrder), Object.values(r.filters ?? {}).forEach((t) => {
+    if (t)
+      switch (t.id) {
+        case "owner":
+          t.owner && e.set("owner", t.owner);
+          break;
+        case "access":
+          t.access && e.set("access", t.access);
+          break;
+        case "specialGroups":
+          t.specialGroup && e.set("specialGroups", t.specialGroup);
+          break;
+        case "memberOrg":
+          t.memberOrg && e.set("memberorgids", t.memberOrg);
+          break;
+        case "membership":
+          t.membership && e.set("membershipaccess", t.membership);
+          break;
+        case "created":
+          R(e, "created", t);
+          break;
+        case "modified":
+          R(e, "modified", t);
+          break;
+        default:
+          $(t);
+      }
+  }), e;
+}
+function G(r, e = "desc") {
+  switch (r) {
+    case "owner":
+    case "title":
+      return "asc";
+    case "created":
+    case "modified":
+    case "relevance":
+      return "desc";
+    default:
+      return e;
+  }
+}
+function Ge(r) {
+  let e, t, s;
+  const i = () => {
+    e?.();
+    const l = ee(
+      () => r.getStore().width,
+      () => {
+        o();
+      }
+    );
+    e = () => {
+      l.remove();
+    };
+  }, o = () => {
+    const l = r.getStore(), c = l.width || r.getHostWidth() || r.getViewportWidth(), h = Math.min(c, r.getViewportWidth());
+    l.width !== h && (l.width = h);
+    const u = h > O.md ? "large" : "small";
+    r.getResponsiveFormFactor() === "large" && u === "small" && (l.panel = !1, l.filtersExpanded = !1), r.getResponsiveFormFactor() === "small" && u === "large" && (l.panel = !1, l.filtersExpanded = !0), r.setResponsiveFormFactor(u);
+  };
+  return {
+    connect: () => {
+      typeof ResizeObserver < "u" && (t = new ResizeObserver((l) => {
+        const c = l[0]?.contentRect?.width ?? 0;
+        if (c > 0) {
+          const h = Math.round(c);
+          r.setHostWidth(h), r.getStore().width = h, o();
+        }
+      }), t.observe(r.el)), i(), o();
+    },
+    disconnect: () => {
+      s !== void 0 && (cancelAnimationFrame(s), s = void 0), e?.(), t?.disconnect(), t = void 0;
+    },
+    refreshStoreWatcher: i,
+    handleWindowResize: () => {
+      if (r.setViewportWidth(window.innerWidth), !t) {
+        if (s !== void 0)
+          return;
+        s = requestAnimationFrame(() => {
+          s = void 0;
+          const l = Math.round(
+            r.el.getBoundingClientRect().width || r.getHostWidth() || r.getViewportWidth()
+          ), c = Math.min(l, r.getViewportWidth()), h = r.getStore();
+          h.width !== c && (h.width = c), o();
+        });
+        return;
+      }
+      o();
+    },
+    updateResponsiveLayout: o
+  };
+}
+function Se(r) {
+  let e = !1;
+  const t = () => !!r.getSearchParamInteraction()?.read, s = () => !!r.getSearchParamInteraction()?.write;
+  return { hydrateFromLocation: async () => {
+    !t() || typeof window > "u" || (await r.applySearchParams(new URLSearchParams(window.location.search)), e = !0);
+  }, writeToLocation: (a) => {
+    if (!s() || typeof window > "u")
+      return;
+    if (e) {
+      e = !1;
+      return;
+    }
+    const n = a.toString(), d = window.location.search.startsWith("?") ? window.location.search.slice(1) : window.location.search;
+    if (n === d)
+      return;
+    const l = `${window.location.pathname}${n ? `?${n}` : ""}${window.location.hash}`;
+    window.history.replaceState(window.history.state, "", l);
+  } };
+}
+const S = ["title", "relevance", "modified"], x = {
+  queryParams: void 0,
+  nextStart: -1,
+  results: [],
+  start: -1,
+  num: 0,
+  total: 0
+}, k = [
+  "openData",
+  "sharedUpdate",
+  "distributed",
+  "admin",
+  "settings"
+];
+class Oe extends M {
+  constructor() {
+    super(...arguments), this._messages = _({ name: "portal-group-browser", blocking: !0 }), this._browserMessages = _({ name: "portal-browser", blocking: !0 }), this.responsiveLayoutController = Ge({
+      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.restoreFocusTarget = null, this.searchParamController = Se({
+      applySearchParams: async (e) => {
+        await this.applySearchParams(e);
+      },
+      getSearchParamInteraction: () => this.searchParamInteraction
+    }), this.handleBrowserFilterClear = () => {
+      this.clearFilters();
+    }, this.handleBrowserFilterRemove = (e) => {
+      const t = e.detail;
+      t && this.removeFilter(t);
+    }, this.selectedOwner = null, this.selectedMembership = null, this.selectedMemberOrg = null, this.selectedSpecialGroup = null, this.selectedAccess = null, this.selectedGroups = [], this.previewGroup = null, this.queryResponse = x, this.specialGroupOptions = k, this.responsiveFormFactor = "large", this.viewportWidth = typeof window > "u" ? O.lg : window.innerWidth, this.hostWidth = 0, this.store = Q({
+      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.cards = {}, this.preview = "top", this.q = "", this.num = 60, this.sort = {
+      enabled: !0,
+      props: {
+        options: S
+      }
+    }, this.searchParamInteraction = {
+      read: !1,
+      write: !1
+    }, this.selection = "none", this.alwaysShowSelection = !1, this.hidePreviewFooter = !1, this.hidePreviewBadges = !1, this.hasIndoorsSpaces = !1, this.arcgisGroupBrowserLoading = m(), this.arcgisGroupBrowserPreview = m(), this.arcgisGroupBrowserSelect = m(), this.arcgisGroupBrowserSublayerPreview = m(), this.arcgisGroupBrowserUpdate = m(), this.arcgisGroupBrowserInternalUIAction = m(), this.arcgisGroupBrowserUserFilterChange = m(), this.arcgisAriaUpdate = m();
+  }
+  static {
+    this.properties = { selectedGroupsByUser: 16, selectedOwner: 16, selectedMembership: 16, selectedMemberOrg: 16, selectedSpecialGroup: 16, selectedAccess: 16, selectedGroups: 16, previewGroup: 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, selected: 0, 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 = ie;
+  }
+  get currentUsername() {
+    return this.portal.user?.username ?? "";
+  }
+  async refresh() {
+    await this.fetchGroups();
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("resize", this.responsiveLayoutController.handleWindowResize), this.responsiveLayoutController.connect();
+  }
+  firstUpdated() {
+    this.initializeBrowserState();
+  }
+  updated(e) {
+    e.has("store") && (this.responsiveLayoutController.refreshStoreWatcher(), this.responsiveLayoutController.updateResponsiveLayout()), e.has("selected") && (this.selectedGroups = this.selected || []);
+    const t = e.get("num");
+    t !== void 0 && t !== 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.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;
+  }
+  publishFilterStateChange() {
+    this.requestUpdate();
+  }
+  syncSortFromConfig() {
+    const e = this.sort, t = e.props?.options ?? S;
+    if (!e.enabled) {
+      this.sortField = void 0, this.sortOrder = void 0;
+      return;
+    }
+    if (!t.length) {
+      this.sortField = void 0, this.sortOrder = void 0;
+      return;
+    }
+    const s = e.props?.field, i = s && t.includes(s) ? s : t[0];
+    this.sortField = i, this.sortOrder = e.props?.order ?? G(i, this.sortOrder);
+  }
+  async updateSpecialGroupOptions(e = !0) {
+    if (!this.portal) {
+      this.specialGroupOptions = [];
+      return;
+    }
+    let t = "";
+    try {
+      t = await z(this.portal);
+    } catch {
+      t = "";
+    }
+    if (this.specialGroupOptions = k.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" && !t)), 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 t = ye(e);
+    if (!this.searchTerm && t.searchTerm && (this.searchTerm = t.searchTerm), this.sort.enabled) {
+      const s = this.sort.props?.options ?? S;
+      t.sortField && this.sort.props?.field === void 0 && s.includes(t.sortField) && (this.sortField = t.sortField), t.sortOrder && this.sort.props?.order === void 0 ? this.sortOrder = t.sortOrder : t.sortField && this.sort.props?.order === void 0 && (this.sortOrder = G(t.sortField, this.sortOrder));
+    }
+    await this.applyFilterSearchParams(t.filters);
+  }
+  async applyFilterSearchParams(e) {
+    const t = { ...this.store.filters };
+    let s = !1;
+    const i = L(this.portal.user);
+    if (e.owner && this.filters.owner?.enabled && !this.filters.owner.props?.owner) {
+      const n = this.filters.owner.props?.username ?? this.currentUsername;
+      t.owner = {
+        id: "owner",
+        label: w(this._messages.owner.label, {
+          label: this.getOwnerOptionLabel(e.owner, n, i)
+        }),
+        param: "q",
+        value: V(e.owner, n, { isPublicUser: i, orgId: this.portal.id ?? "" }),
+        owner: e.owner,
+        username: n
+      }, this.selectedOwner = e.owner, s = !0;
+    }
+    e.membership && this.filters.membership?.enabled && !this.filters.membership.props?.membership && (t.membership = {
+      id: "membership",
+      label: w(this._messages.membership.label, { label: this._messages.membership[e.membership] }),
+      param: "q",
+      value: H(e.membership, this.hasIndoorsSpaces),
+      membership: e.membership
+    }, this.selectedMembership = e.membership, s = !0), e.memberOrg && this.filters.memberOrg?.enabled && !this.filters.memberOrg.props?.memberOrg && (t.memberOrg = {
+      id: "memberOrg",
+      label: w(this._messages.memberOrg.label, { label: this._messages.memberOrg[e.memberOrg] }),
+      param: "q",
+      value: N(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 && (t.specialGroups = {
+      id: "specialGroups",
+      label: w(this._messages.specialGroups.label, {
+        label: this._messages.specialGroups[e.specialGroups]
+      }),
+      param: "q",
+      value: await j(e.specialGroups, this.portal),
+      specialGroup: e.specialGroups
+    }, this.selectedSpecialGroup = e.specialGroups, s = !0), e.access && this.filters.access?.enabled && !this.filters.access.props?.access && (t.access = {
+      id: "access",
+      label: w(this._messages.access.label, { label: this._messages.access[e.access] }),
+      param: "q",
+      value: J(e.access),
+      access: e.access
+    }, this.selectedAccess = e.access, s = !0);
+    const o = this.getDateFilterDetailFromSearchParams("created", e.created);
+    o && (t.created = o, s = !0);
+    const a = this.getDateFilterDetailFromSearchParams("modified", e.modified);
+    a && (t.modified = a, s = !0), s && (this.store.filters = t, this.publishFilterStateChange());
+  }
+  getDateFilterDetailFromSearchParams(e, t) {
+    const s = this.filters[e];
+    if (!s?.enabled || s.props?.range || s.props?.start || s.props?.end || !t?.range)
+      return;
+    const i = he(t.range, t.start, t.end);
+    if (!i)
+      return;
+    const o = this._browserMessages.filterDate[t.range], [a, n] = i;
+    return {
+      id: e,
+      label: w(this._browserMessages.filterDate[e], { date: o }),
+      param: "q",
+      value: `(${s.props?.serverProperty ?? (e === "modified" ? "modified" : "uploaded")}:[${a} TO ${n}])`,
+      range: t.range,
+      start: new Date(a),
+      end: new Date(n)
+    };
+  }
+  getOwnerOptionLabel(e, t, s) {
+    return e === "owner" ? t : e === "outsideOrg" && s ? this._messages.owner.someoneElse : e === "inOrg" ? this._messages.owner.inOrg : this._messages.owner.outsideOrg;
+  }
+  writeSearchParams(e, t) {
+    const s = Fe({
+      currentSearchParams: typeof window > "u" ? void 0 : new URLSearchParams(window.location.search),
+      filters: this.store.filters,
+      searchTerm: t,
+      sortField: e.queryParams?.sortField,
+      sortOrder: e.queryParams?.sortOrder
+    });
+    this.searchParamController.writeToLocation(s);
+  }
+  async fetchGroups() {
+    this.loading = !0, this.arcgisGroupBrowserLoading.emit();
+    const e = this.createQuery();
+    await this.fetchAndEmit(e, this.searchTerm);
+  }
+  removeFilter(e) {
+    const t = this.store.filters[e];
+    t && (this.store.filters = {
+      ...this.store.filters,
+      [e]: I(t)
+    }, this.resetSelectionByFilterId(e), this.publishFilterStateChange(), this.fetchGroups());
+  }
+  clearFilters() {
+    this.store.filters = D(this.store.filters, {
+      hiddenFilterIds: this.store.hiddenFilters
+    }), this.resetAllFilterSelections(), this.publishFilterStateChange(), this.fetchGroups();
+  }
+  isFilterActive(e) {
+    const t = this.store.filters[e];
+    return t ? !!(t.value || "additionalParams" in t && t.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: t }) => t !== e.id);
+  }
+  isSelected(e) {
+    return this.selectedGroups.some(({ id: t }) => e.id === t);
+  }
+  handleGroupCardSelect(e) {
+    const { selected: t, group: s } = e.detail;
+    switch (this.selection) {
+      case "single":
+        this.selectedGroups = [s];
+        break;
+      case "multiple":
+        t ? this.selectGroup(s) : this.deselectGroup(s);
+        break;
+      default:
+        return;
+    }
+    this.arcgisGroupBrowserSelect.emit(this.selectedGroups);
+  }
+  closePreview(e = {}) {
+    this.store.preview = "", this.previewGroup = null, this.arcgisGroupBrowserPreview.emit(null), this.arcgisGroupBrowserSublayerPreview.emit(null), e.restoreFocus && this.restorePreviewFocus();
+  }
+  async restorePreviewFocus() {
+    const e = this.restoreFocusTarget;
+    if (e) {
+      if (e.restoreFocus) {
+        await e.restoreFocus();
+        return;
+      }
+      if (e.setFocus) {
+        await e.setFocus();
+        return;
+      }
+      e.focus?.();
+    }
+  }
+  async handleSortFieldChange(e) {
+    this.sortField = e, this.sortOrder = G(e, this.sortOrder), this.loading = !0, this.arcgisGroupBrowserLoading.emit();
+    const t = this.createQuery({ start: 1, total: 0 });
+    await this.fetchAndEmit(t, this.searchTerm);
+  }
+  async handleSortOrderChange(e) {
+    this.sortOrder = e, this.loading = !0, this.arcgisGroupBrowserLoading.emit();
+    const t = this.createQuery({ start: 1, total: 0 });
+    await this.fetchAndEmit(t, this.searchTerm);
+  }
+  emitUpdate(e, t) {
+    const s = e.queryParams;
+    this.arcgisGroupBrowserUpdate.emit({
+      queryResponse: e,
+      sortField: s?.sortField,
+      sortOrder: s?.sortOrder,
+      selectedGroups: this.selectedGroups,
+      filters: { ...this.store.filters },
+      searchTerm: t
+    }), this.writeSearchParams(e, t);
+  }
+  async queryGroups(e) {
+    return await (this.fetch?.(e) ?? oe(this.portal, e));
+  }
+  async fetchAndEmit(e, t) {
+    this.preflight && (e = await this.preflight(e));
+    const s = await this.queryGroups(e);
+    this.queryResponse = s, this.loading = !1, this.emitUpdate(s, t);
+  }
+  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 t = this.createQuery({ searchTerm: e });
+    await this.fetchAndEmit(t, e);
+  }
+  async handlePage({ num: e, start: t, total: s }) {
+    this.loading = !0, this.arcgisGroupBrowserLoading.emit();
+    const i = this.createQuery({ start: t, num: e, total: s });
+    await this.fetchAndEmit(i, this.searchTerm);
+  }
+  getBrowserResponseFromQueryResponse(e) {
+    const { nextStart: t, num: s, queryParams: i, results: o, start: a, total: n } = e ?? x;
+    return {
+      nextStart: t ?? -1,
+      num: s ?? i?.num ?? 0,
+      results: o,
+      start: a ?? i?.start ?? 1,
+      total: n
+    };
+  }
+  async formatRange({ start: e, end: t, total: s }) {
+    if (this._messages._lang === "en")
+      return [`${e}-${t} of ${s}`, `${e}-${t} of ${s} group${s === "1" ? "" : "s"}`];
+    const o = this._messages.browser, a = { start: e, end: t, total: s }, n = P(o.pageRange, a), d = P(o.pageRangeAria, a);
+    return [n, d];
+  }
+  getPreviewFooterActionsEmpty() {
+    return !this.el?.querySelector('[slot="preview-footer-action"]');
+  }
+  renderTopBar() {
+    return p`<arcgis-portal-browser-top-bar slot=top-bar .store=${this.store}><arcgis-portal-browser-search slot=search .store=${this.store} .term=${this.searchTerm} @arcgisBrowserSearch=${(e) => {
+      this.handleSearch(e.detail);
+    }}></arcgis-portal-browser-search></arcgis-portal-browser-top-bar>`;
+  }
+  renderEmptyTextSlot(e, t) {
+    return p`<div slot=${e ?? B} class="empty-text-slot"><slot name=${e ?? B}><p class="empty-text-slot__default">${t}</p></slot></div>`;
+  }
+  renderContent() {
+    const e = new Set(this.selectedGroups.map((i) => i.id)), t = this.queryResponse.results.map((i) => {
+      const o = this.cards.group?.(i) ?? {}, a = o.view ?? this.store.view ?? "list";
+      return {
+        group: i,
+        cardProps: o,
+        slots: o.slots,
+        view: a
+      };
+    }), s = t.length > 0 && t.every(({ view: i }) => i === "compact");
+    return p`<div class=${q({ "group-browser__results": !0, "group-browser__results--compact": s })} .part=${"results"}>${t.map(({ group: i, cardProps: o, slots: a, view: n }) => {
+      const d = i.id, l = a?.contentTop?.(i), c = a?.contentEnd?.(i), h = a?.actionsStart?.(i), u = a?.actionsEnd?.(i);
+      return A(d, p`<arcgis-portal-group-card class="group-browser__result-card" .portal=${this.portal} .group=${i} .user=${o.user} .indeterminate=${o.indeterminate} .view=${n} .selection=${this.selection} .selected=${e.has(d)} .preview=${o.preview ?? this.preview} .previewed=${o.previewed ?? this.store.preview === d} .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} @arcgisGroupCardSelect=${(y) => {
+        this.handleGroupCardSelect(y);
+      }} @arcgisGroupBrowserCardPreview=${(y) => {
+        const b = y.detail;
+        if (this.store.filtersExpanded = !1, !b || this.store.preview === b.id) {
+          this.closePreview();
+          return;
+        }
+        this.restoreFocusTarget = y.currentTarget, this.store.preview = b.id, this.previewGroup = b, this.arcgisGroupBrowserPreview.emit(b);
+      }}>${l && p`<div slot=content-top>${l}</div>` || ""}${c && p`<div slot=content-end>${c}</div>` || ""}${h && p`<div slot=actions-start>${h}</div>` || ""}${u && p`<div slot=actions-end>${u}</div>` || ""}</arcgis-portal-group-card>`);
+    })}</div>`;
+  }
+  render() {
+    const e = this.responsiveFormFactor === "small" ? "small" : this.formFactor;
+    return p`<arcgis-portal-browser .store=${this.store} .response=${this.getBrowserResponseFromQueryResponse(this.queryResponse)} .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=${(t) => {
+      this.arcgisAriaUpdate.emit(t.detail);
+    }}><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>${te({ slot: "sort", sort: this.sort, formFactor: e, sortField: this.sortField, sortOrder: this.sortOrder, onSortFieldChange: (t) => {
+      this.handleSortFieldChange(t);
+    }, onSortOrderChange: (t) => {
+      this.handleSortOrderChange(t);
+    } })}<slot name=content slot=content>${this.renderContent()}</slot>${re({ slot: "pagination", store: this.store, total: this.queryResponse.total, start: this.queryResponse?.queryParams?.start ?? 1, num: this.queryResponse?.queryParams?.num ?? this.num, onPage: (t) => {
+      this.handlePage(t);
+    } })}<slot name=content-end slot=content-end></slot><slot name=preview slot=preview>${this.previewGroup && p`<arcgis-portal-group-browser-preview .group=${this.previewGroup} .portal=${this.portal} .user=${this.portal.user ?? void 0} .hideBadges=${this.hidePreviewBadges} .hidePreviewFooter=${this.hidePreviewFooter} .currentResponse=${this.queryResponse} .previewFooterActionsSpaced=${!this.getPreviewFooterActionsEmpty()} @arcgisGroupBrowserInternalUIAction=${(t) => {
+      this.arcgisGroupBrowserInternalUIAction.emit(t.detail);
+    }} @arcgisGroupBrowserPreviewClose=${() => {
+      this.closePreview({ restoreFocus: !0 });
+    }} @arcgisPreviewClose=${() => {
+      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>${se({ 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: (t) => this.isFilterActive(t), handleSelect: (t) => {
+      this.setFilterSelection(t);
+    }, handleUserFilterChange: (t) => {
+      this.arcgisGroupBrowserUserFilterChange.emit(t);
+    }, handleRemove: (t) => {
+      this.removeFilter(t);
+    }, handleUpsert: (t) => {
+      this.store.filters = { ...this.store.filters, [t.id]: t }, this.publishFilterStateChange(), this.fetchGroups();
+    } })}</arcgis-portal-browser>`;
+  }
+}
+T("arcgis-portal-group-browser", Oe);
+export {
+  Oe as ArcgisPortalGroupBrowser
+};