@arcgis/portal-components 5.2.0-next.99 → 6.0.0-next.0

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

@@ -1,33 +1,37 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as q } from "../../chunks/runtime.js";
-import { css as I, html as u } from "lit";
-import { keyed as E } from "lit/directives/keyed.js";
-import { substitute as b } from "@arcgis/core/intl.js";
-import { LitElement as L, createEvent as g, nothing as U, safeClassMap as D } from "@arcgis/lumina";
-import { u as C } from "../../chunks/useT9n.js";
-import { a as B, i as w } from "../../chunks/functionalities.js";
-import { c as Q, a as T } from "../../chunks/string.js";
-import { i as z } from "../../chunks/users.js";
+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 { a as z, b 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 V, a as H } from "../../chunks/portal-browser.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 N } from "../../chunks/store.js";
-import { i as j, g as J, a as K, b as X, c as Y, d as Z } from "../../chunks/query.js";
-import ee from "@arcgis/core/portal/PortalGroup.js";
-import { r as re } from "../../chunks/request.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 v, a as y, d as R, w as se } from "../../chunks/portal-browser-filter-date.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 ie } from "@arcgis/core/core/reactiveUtils.js";
-import { PortalGroupBrowserSort as oe } from "../portal-group-browser-sort/customElement.js";
-import { PortalGroupBrowserPagination as ae } from "../portal-group-browser-pagination/customElement.js";
-import { PortalGroupBrowserFilters as ne } from "../portal-group-browser-filters/customElement.js";
-const le = I`: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 ce(t, e) {
-  const r = `${te(t)}community/groups`, s = pe(e), i = me(e), o = !!e.searchUser?.trim();
-  if (!s.trim() && !o)
+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,
@@ -37,66 +41,66 @@ async function ce(t, e) {
       start: 0,
       total: 0
     };
-  const a = { ...i, q: s }, n = await re({
+  const a = { ...i, q: s }, o = await se({
     url: r,
     portal: t,
     params: a
-  }), d = n.results.map((l) => {
-    const p = ee.fromJSON(l);
+  }), c = o.results.map((l) => {
+    const p = re.fromJSON(l);
     return p.portal = t, p;
   });
   return {
-    ...n,
+    ...o,
     q: s,
     queryParams: a,
-    results: d
+    results: c
   };
 }
-const he = ["created", "modified", "owner", "title"];
-function de(t) {
-  return !!t && he.includes(t);
-}
+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(`(${Q(s)})`);
+  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 me(t) {
+function ue(t) {
   return {
     num: t.num,
     start: t.start,
     ...t.searchUser ? { searchUserAccess: "groupMember", searchUserName: t.searchUser } : {},
-    ...t.sortField === "relevance" || !de(t.sortField) ? {} : {
+    ...t.sortField === "relevance" || !pe(t.sortField) ? {} : {
       sortField: t.sortField,
       sortOrder: t.sortOrder
     }
   };
 }
-function ue(t, e, r) {
+function ge(t, e, r) {
   switch (t) {
     case "yesterday": {
-      const s = v();
-      return [s - R, s - 1];
+      const s = b();
+      return [s - x, s - 1];
     }
     case "today":
-      return [v(), y()];
+      return [b(), v()];
     case "last7":
-      return [v() - se, y()];
+      return [b() - ie, v()];
     case "last30":
-      return [v() - R * 30, y()];
+      return [b() - x * 30, v()];
     case "never":
       return [-1, -1];
     case "custom":
-      return e && r ? [v(e), y(r)] : null;
+      return e && r ? [b(e), v(r)] : null;
     default:
-      return B(t);
+      return $(t);
   }
 }
-const ge = ["created", "modified", "owner", "relevance", "title"], we = ["asc", "desc"], fe = ["custom", "last7", "last30", "never", "today", "yesterday"], be = ["inOrg", "outsideOrg", "owner"], ve = ["anyOrg", "collaboration", "org"], ye = ["anotherOrg", "myOrg"], Fe = ["admin", "distributed", "openData", "settings", "sharedUpdate"], Se = ["org", "private", "public"], Ge = [
+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",
@@ -115,51 +119,51 @@ const ge = ["created", "modified", "owner", "relevance", "title"], we = ["asc",
   "start",
   "num"
 ];
-function F(t) {
+function y(t) {
   if (!t)
     return;
   const e = Number.parseInt(t, 10);
   return Number.isFinite(e) && e > 0 ? e : void 0;
 }
-function x(t, e) {
+function k(t, e) {
   const r = t.get(e);
-  if (!w(fe, r))
+  if (!w(be, r))
     return;
   if (r !== "custom")
     return { range: r };
-  const s = F(t.get(`${e}_from`)), i = F(t.get(`${e}_to`));
+  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 k(t, e, r) {
-  r?.range && (t.set(e, r.range), r.range === "custom" && (r.start && t.set(`${e}_from`, `${v(r.start)}`), r.end && t.set(`${e}_to`, `${y(r.end)}`)));
+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 A(t) {
-  const e = t.get("searchTerm")?.trim() || t.get("q")?.trim() || void 0, r = t.get("sortField"), s = t.get("sortOrder"), i = F(t.get("start")), o = F(t.get("num")), a = t.get("access"), n = t.get("memberorgids"), d = t.get("membershipaccess"), l = t.get("owner"), p = t.get("specialGroups"), h = x(t, "created"), m = x(t, "modified");
+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(ge, r) ? { sortField: r } : {},
-    ...w(we, s) ? { sortOrder: s } : {},
+    ...w(we, r) ? { sortField: r } : {},
+    ...w(fe, s) ? { sortOrder: s } : {},
     ...i ? { start: i } : {},
-    ...o ? { num: o } : {},
+    ...n ? { num: n } : {},
     filters: {
       ...w(Se, a) ? { access: a } : {},
       ...h ? { created: h } : {},
-      ...w(ye, n) ? { memberOrg: n } : {},
-      ...w(ve, d) ? { membership: d } : {},
+      ...w(Fe, o) ? { memberOrg: o } : {},
+      ...w(ye, c) ? { membership: c } : {},
       ...m ? { modified: m } : {},
-      ...w(be, l) ? { owner: l } : {},
-      ...w(Fe, p) ? { specialGroups: p } : {}
+      ...w(ve, l) ? { owner: l } : {},
+      ...w(Ge, p) ? { specialGroups: p } : {}
     }
   };
 }
-function $(t) {
-  const e = A(t), { filters: r, num: s, sortField: i, sortOrder: o, start: a } = e, { access: n, created: d, memberOrg: l, membership: p, modified: h, owner: m, specialGroups: f } = r, c = {}, P = t.get("searchTerm")?.trim() || void 0, _ = t.get("q")?.trim() || void 0;
-  return P && (c.searchTerm = P), _ && (c.q = _), i && (c.sortField = i), o && (c.sortOrder = o), a && (c.start = a), s && (c.num = s), n && (c.access = n), m && (c.owner = m), p && (c.membershipAccess = p), l && (c.memberOrgIds = l), f && (c.specialGroups = f), d?.range && (c.created = d.range), d?.start && (c.createdFrom = d.start.getTime()), d?.end && (c.createdTo = d.end.getTime()), h?.range && (c.modified = h.range), h?.start && (c.modifiedFrom = h.start.getTime()), h?.end && (c.modifiedTo = h.end.getTime()), c;
+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 Oe(t) {
+function Be(t) {
   const e = new URLSearchParams(t.currentSearchParams);
-  return Ge.forEach((r) => {
+  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)
@@ -180,17 +184,17 @@ function Oe(t) {
           r.membership && e.set("membershipaccess", r.membership);
           break;
         case "created":
-          k(e, "created", r);
+          W(e, "created", r);
           break;
         case "modified":
-          k(e, "modified", r);
+          W(e, "modified", r);
           break;
         default:
-          B(r);
+          $(r);
       }
   }), e;
 }
-function S(t, e = "desc") {
+function F(t, e = "desc") {
   switch (t) {
     case "owner":
     case "title":
@@ -204,19 +208,48 @@ function S(t, e = "desc") {
   }
 }
 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 = ie(
+    const l = oe(
       () => t.getStore().width,
       () => {
-        o();
+        n();
       }
     );
     e = () => {
       l.remove();
     };
-  }, o = () => {
+  }, 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";
@@ -228,9 +261,9 @@ function $e(t) {
         const p = l[0]?.contentRect?.width ?? 0;
         if (p > 0) {
           const h = Math.round(p);
-          t.setHostWidth(h), t.getStore().width = h, o();
+          t.setHostWidth(h), t.getStore().width = h, n();
         }
-      }), r.observe(t.el)), i(), o();
+      }), r.observe(t.el)), i(), n();
     },
     disconnect: () => {
       s !== void 0 && (cancelAnimationFrame(s), s = void 0), e?.(), r?.disconnect(), r = void 0;
@@ -245,16 +278,16 @@ function $e(t) {
           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), o();
+          h.width !== p && (h.width = p), n();
         });
         return;
       }
-      o();
+      n();
     },
-    updateResponsiveLayout: o
+    updateResponsiveLayout: n
   };
 }
-function Be(t) {
+function Ue(t) {
   let e = !1;
   const r = () => !!t.getSearchParamInteraction()?.read, s = () => !!t.getSearchParamInteraction()?.write;
   return { hydrateFromLocation: async () => {
@@ -265,7 +298,7 @@ function Be(t) {
       phase: "hydrate",
       search: a.toString(),
       searchParams: a,
-      searchParamMap: $(a)
+      searchParamMap: B(a)
     }), e = !0;
   }, writeToLocation: (a) => {
     if (!s() || typeof window > "u")
@@ -274,35 +307,35 @@ function Be(t) {
       e = !1;
       return;
     }
-    const n = a.toString(), d = window.location.search.startsWith("?") ? window.location.search.slice(1) : window.location.search;
-    if (n === d)
+    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}${n ? `?${n}` : ""}${window.location.hash}`;
+    const l = `${window.location.pathname}${o ? `?${o}` : ""}${window.location.hash}`;
     window.history.replaceState(window.history.state, "", l), t.onSearchParamsUpdate?.({
       phase: "write",
-      search: n,
+      search: o,
       searchParams: a,
-      searchParamMap: $(a)
+      searchParamMap: B(a)
     });
   } };
 }
-const G = ["title", "relevance", "modified"], M = {
+const G = ["title", "relevance", "modified"], S = {
   queryParams: void 0,
   nextStart: -1,
   results: [],
   start: -1,
   num: 0,
   total: 0
-}, W = [
+}, A = [
   "openData",
   "sharedUpdate",
   "distributed",
   "admin",
   "settings"
 ];
-class Pe extends L {
+class Re extends L {
   constructor() {
-    super(...arguments), this._messages = C({ name: "portal-group-browser", blocking: !0 }), this._browserMessages = C({ name: "portal-browser", blocking: !0 }), this.responsiveLayoutController = $e({
+    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,
@@ -317,7 +350,14 @@ class Pe extends L {
       setResponsiveFormFactor: (e) => {
         this.responsiveFormFactor = e;
       }
-    }), this.restoreFocusTarget = null, this.searchParamController = Be({
+    }), 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);
       },
@@ -330,7 +370,11 @@ class Pe extends L {
     }, this.handleBrowserFilterRemove = (e) => {
       const r = e.detail;
       r && this.removeFilter(r);
-    }, this.selectedOwner = null, this.selectedMembership = null, this.selectedMemberOrg = null, this.selectedSpecialGroup = null, this.selectedAccess = null, this.selectedGroups = [], this.previewGroup = null, this.queryResponse = M, this.specialGroupOptions = W, this.responsiveFormFactor = "large", this.viewportWidth = typeof window > "u" ? O.lg : window.innerWidth, this.hostWidth = 0, this.store = N({
+    }, 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: [],
@@ -340,7 +384,7 @@ class Pe extends L {
       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 = {
+    }), 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
@@ -348,17 +392,23 @@ class Pe extends L {
     }, 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.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, 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 };
+    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 = le;
+    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();
   }
@@ -372,7 +422,7 @@ class Pe extends L {
     this.initializeBrowserState();
   }
   updated(e) {
-    e.has("store") && (this.responsiveLayoutController.refreshStoreWatcher(), this.responsiveLayoutController.updateResponsiveLayout()), e.has("selected") && (this.selectedGroups = this.selected || []);
+    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();
   }
@@ -383,7 +433,7 @@ class Pe extends L {
     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();
+    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) {
@@ -411,7 +461,7 @@ class Pe extends L {
     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 Oe({
+    return Be({
       currentSearchParams: typeof window > "u" ? void 0 : new URLSearchParams(window.location.search),
       filters: this.store.filters,
       searchTerm: r,
@@ -422,6 +472,19 @@ class Pe extends L {
   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) {
@@ -433,7 +496,7 @@ class Pe extends L {
       return;
     }
     const s = e.props?.field, i = s && r.includes(s) ? s : r[0];
-    this.sortField = i, this.sortOrder = e.props?.order ?? S(i, this.sortOrder);
+    this.sortField = i, this.sortOrder = e.props?.order ?? F(i, this.sortOrder);
   }
   async updateSpecialGroupOptions(e = !0) {
     if (!this.portal) {
@@ -442,11 +505,11 @@ class Pe extends L {
     }
     let r = "";
     try {
-      r = await j(this.portal);
+      r = await K(this.portal);
     } catch {
       r = "";
     }
-    if (this.specialGroupOptions = W.filter((s) => !(s === "openData" && this.portal.isPortal || // https://devtopia.esri.com/webgis/arcgis-portal-app/issues/37831
+    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)
@@ -459,60 +522,60 @@ class Pe extends L {
       }
   }
   async applySearchParams(e) {
-    const r = A(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 = S(r.sortField, this.sortOrder));
+      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 = z(this.portal.user);
+    const i = H(this.portal.user);
     if (e.owner && this.filters.owner?.enabled && !this.filters.owner.props?.owner) {
-      const n = this.filters.owner.props?.username ?? this.currentUsername;
+      const o = this.filters.owner.props?.username ?? this.currentUsername;
       r.owner = {
         id: "owner",
-        label: b(this._messages.owner.label, {
-          label: this.getOwnerOptionLabel(e.owner, n, i)
+        label: f(this._messages.owner.label, {
+          label: this.getOwnerOptionLabel(e.owner, o, i)
         }),
         param: "q",
-        value: J(e.owner, n, { isPublicUser: i, orgId: this.portal.id ?? "" }),
+        value: J(e.owner, o, { isPublicUser: i, orgId: this.portal.id ?? "" }),
         owner: e.owner,
-        username: n
+        username: o
       }, this.selectedOwner = e.owner, s = !0;
     }
     e.membership && this.filters.membership?.enabled && !this.filters.membership.props?.membership && (r.membership = {
       id: "membership",
-      label: b(this._messages.membership.label, { label: this._messages.membership[e.membership] }),
+      label: f(this._messages.membership.label, { label: this._messages.membership[e.membership] }),
       param: "q",
-      value: K(e.membership, this.hasIndoorsSpaces),
+      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: b(this._messages.memberOrg.label, { label: this._messages.memberOrg[e.memberOrg] }),
+      label: f(this._messages.memberOrg.label, { label: this._messages.memberOrg[e.memberOrg] }),
       param: "q",
-      value: X(e.memberOrg, this.filters.memberOrg.props?.orgId ?? this.portal.id ?? ""),
+      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: b(this._messages.specialGroups.label, {
+      label: f(this._messages.specialGroups.label, {
         label: this._messages.specialGroups[e.specialGroups]
       }),
       param: "q",
-      value: await Y(e.specialGroups, this.portal),
+      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: b(this._messages.access.label, { label: this._messages.access[e.access] }),
+      label: f(this._messages.access.label, { label: this._messages.access[e.access] }),
       param: "q",
-      value: Z(e.access),
+      value: ee(e.access),
       access: e.access
     }, this.selectedAccess = e.access, s = !0);
-    const o = this.getDateFilterDetailFromSearchParams("created", e.created);
-    o && (r.created = o, 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());
   }
@@ -520,18 +583,18 @@ class Pe extends L {
     const s = this.filters[e];
     if (!s?.enabled || s.props?.range || s.props?.start || s.props?.end || !r?.range)
       return;
-    const i = ue(r.range, r.start, r.end);
+    const i = ge(r.range, r.start, r.end);
     if (!i)
       return;
-    const o = this._browserMessages.filterDate[r.range], [a, n] = i;
+    const n = this._browserMessages.filterDate[r.range], [a, o] = i;
     return {
       id: e,
-      label: b(this._browserMessages.filterDate[e], { date: o }),
+      label: f(this._browserMessages.filterDate[e], { date: n }),
       param: "q",
-      value: `(${s.props?.serverProperty ?? (e === "modified" ? "modified" : "uploaded")}:[${a} TO ${n}])`,
+      value: `(${s.props?.serverProperty ?? (e === "modified" ? "modified" : "uploaded")}:[${a} TO ${o}])`,
       range: r.range,
       start: new Date(a),
-      end: new Date(n)
+      end: new Date(o)
     };
   }
   getOwnerOptionLabel(e, r, s) {
@@ -549,11 +612,11 @@ class Pe extends L {
     const r = this.store.filters[e];
     r && (this.store.filters = {
       ...this.store.filters,
-      [e]: V(r)
+      [e]: N(r)
     }, this.resetSelectionByFilterId(e), this.publishFilterStateChange(), this.fetchGroups());
   }
   clearFiltersInternal() {
-    this.store.filters = H(this.store.filters, {
+    this.store.filters = V(this.store.filters, {
       hiddenFilterIds: this.store.hiddenFilters
     }), this.resetAllFilterSelections(), this.publishFilterStateChange(), this.fetchGroups();
   }
@@ -582,7 +645,7 @@ class Pe extends L {
         this.selectedSpecialGroup = e.value;
         break;
       default:
-        B(e);
+        $(e);
     }
   }
   selectGroup(e) {
@@ -608,25 +671,18 @@ class Pe extends L {
     }
     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();
+  handleGroupCardPreview(e) {
+    const r = e.detail, s = !r?.id || this.store.preview === r.id;
+    this.store.filtersExpanded = !1, s ? this.closePreview() : this.previewSessionController.handlePreview(r, e.target), this.arcgisGroupBrowserInternalUIAction.emit({
+      action: s ? "close panel" : "open panel",
+      category: "card action"
+    });
   }
-  async restorePreviewFocus() {
-    const e = this.restoreFocusTarget;
-    if (e) {
-      if (e.restoreFocus) {
-        await e.restoreFocus();
-        return;
-      }
-      if (e.setFocus) {
-        await e.setFocus();
-        return;
-      }
-      e.focus?.();
-    }
+  closePreview(e = {}) {
+    this.previewSessionController.closePreview(e);
   }
   async handleSortFieldChange(e) {
-    this.sortField = e, this.sortOrder = S(e, this.sortOrder), this.loading = !0, this.arcgisGroupBrowserLoading.emit();
+    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);
   }
@@ -636,7 +692,7 @@ class Pe extends L {
     await this.fetchAndEmit(r, this.searchTerm);
   }
   emitUpdate(e, r) {
-    const s = e.queryParams, i = this.getSearchParamsSnapshot(e, r), o = $(i);
+    const s = e.queryParams, i = this.getSearchParamsSnapshot(e, r), n = B(i);
     this.arcgisGroupBrowserUpdate.emit({
       queryResponse: e,
       sortField: s?.sortField,
@@ -644,16 +700,16 @@ class Pe extends L {
       selectedGroups: this.selectedGroups,
       filters: { ...this.store.filters },
       searchTerm: r,
-      searchParamMap: o
+      searchParamMap: n
     }), this.writeSearchParams(i);
   }
   async queryGroups(e) {
-    return await (this.fetch?.(e) ?? ce(this.portal, 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.queryResponse = s, this.loading = !1, this.emitUpdate(s, r);
+    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 {
@@ -679,84 +735,71 @@ class Pe extends L {
     await this.fetchAndEmit(i, this.searchTerm);
   }
   getBrowserResponseFromQueryResponse(e) {
-    const { nextStart: r, num: s, queryParams: i, results: o, start: a, total: n } = e ?? M;
+    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: o,
+      results: n,
       start: a ?? i?.start ?? 1,
-      total: n
+      total: o
     };
   }
   async formatRange({ start: e, end: r, total: s }) {
-    if (this._messages._lang === "en")
+    if (this._messages._lang?.toLowerCase().startsWith("en"))
       return [`${e}-${r} of ${s}`, `${e}-${r} of ${s} group${s === "1" ? "" : "s"}`];
-    const o = this._messages.browser, a = { start: e, end: r, total: s }, n = T(o.pageRange, a), d = T(o.pageRangeAria, a);
-    return [n, d];
+    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}><arcgis-portal-browser-search slot=search .store=${this.store} .term=${this.searchTerm} @arcgisBrowserSearch=${(e) => {
+    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></arcgis-portal-browser-top-bar>`;
+    }}></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>`;
   }
-  renderContent() {
-    const e = new Set(this.selectedGroups.map((i) => i.id)), r = this.queryResponse.results.map((i) => {
-      const o = this.cards.group?.(i) ?? {}, a = o.view ?? this.store.view ?? "list";
+  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: i,
-        cardProps: o,
-        slots: o.slots,
-        view: a
+        group: a,
+        cardProps: c
       };
-    }), s = r.length > 0 && r.every(({ view: i }) => i === "compact");
-    return u`<div class=${D({ "group-browser__results": !0, "group-browser__results--compact": s })} .part=${"results"}>${r.map(({ group: i, cardProps: o, slots: a, view: n }) => {
-      const d = i.id, l = a?.contentTop?.(i), p = a?.contentEnd?.(i), h = a?.actionsStart?.(i), m = a?.actionsEnd?.(i);
-      return E(d, u`<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=${(f) => {
-        this.handleGroupCardSelect(f);
-      }} @arcgisGroupBrowserCardPreview=${(f) => {
-        const c = f.detail;
-        if (this.store.filtersExpanded = !1, !c || this.store.preview === c.id) {
-          this.closePreview();
-          return;
-        }
-        this.restoreFocusTarget = f.currentTarget, this.store.preview = c.id, this.previewGroup = c, this.arcgisGroupBrowserPreview.emit(c);
-      }}>${l && u`<div slot=content-top>${l}</div>` || ""}${p && u`<div slot=content-end>${p}</div>` || ""}${h && u`<div slot=actions-start>${h}</div>` || ""}${m && u`<div slot=actions-end>${m}</div>` || ""}</arcgis-portal-group-card>`);
-    })}</div>`;
+    }), 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;
-    return u`<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=${(r) => {
-      this.arcgisAriaUpdate.emit(r.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>${oe({ slot: "sort", sort: this.sort, formFactor: e, sortField: this.sortField, sortOrder: this.sortOrder, onSortFieldChange: (r) => {
-      this.handleSortFieldChange(r);
-    }, onSortOrderChange: (r) => {
-      this.handleSortOrderChange(r);
-    } })}<slot name=content slot=content>${this.renderContent()}</slot>${ae({ slot: "pagination", store: this.store, total: this.queryResponse.total, start: this.queryResponse?.queryParams?.start ?? 1, num: this.queryResponse?.queryParams?.num ?? this.num, onPage: (r) => {
-      this.handlePage(r);
-    } })}<slot name=content-end slot=content-end></slot><slot name=preview slot=preview>${this.previewGroup && u`<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=${(r) => {
-      this.arcgisGroupBrowserInternalUIAction.emit(r.detail);
+    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 });
-    }} @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>${ne({ 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: (r) => this.isFilterActive(r), handleSelect: (r) => {
-      this.setFilterSelection(r);
-    }, handleUserFilterChange: (r) => {
-      this.arcgisGroupBrowserUserFilterChange.emit(r);
-    }, handleRemove: (r) => {
-      this.removeFilter(r);
-    }, handleUpsert: (r) => {
-      this.store.filters = { ...this.store.filters, [r.id]: r }, this.publishFilterStateChange(), this.fetchGroups();
+    }}><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>`;
   }
 }
-q("arcgis-portal-group-browser", Pe);
+E("arcgis-portal-group-browser", Re);
 export {
-  Pe as ArcgisPortalGroupBrowser
+  Re as ArcgisPortalGroupBrowser
 };