@arcgis/portal-components 5.2.0-next.111 → 5.2.0-next.113

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

@@ -1,5 +1,5 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as I } from "../../chunks/runtime.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";
@@ -17,20 +17,20 @@ 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 te } from "../../chunks/request.js";
-import { a as se } from "../../chunks/portal.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 k = {
+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 = `${se(t)}community/groups`, s = me(e), i = ue(e), n = !!e.searchUser?.trim();
+  const r = `${te(t)}community/groups`, s = me(e), i = ue(e), n = !!e.searchUser?.trim();
   if (!s.trim() && !n)
     return {
       nextStart: -1,
@@ -41,7 +41,7 @@ async function he(t, e) {
       start: 0,
       total: 0
     };
-  const a = { ...i, q: s }, o = await te({
+  const a = { ...i, q: s }, o = await se({
     url: r,
     portal: t,
     params: a
@@ -125,7 +125,7 @@ function y(t) {
   const e = Number.parseInt(t, 10);
   return Number.isFinite(e) && e > 0 ? e : void 0;
 }
-function M(t, e) {
+function k(t, e) {
   const r = t.get(e);
   if (!w(be, r))
     return;
@@ -138,8 +138,8 @@ function M(t, e) {
 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 E(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 = M(t, "created"), m = M(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(we, r) ? { sortField: r } : {},
@@ -158,7 +158,7 @@ function E(t) {
   };
 }
 function B(t) {
-  const e = E(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;
+  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) {
@@ -208,6 +208,35 @@ function F(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?.();
@@ -258,7 +287,7 @@ function $e(t) {
     updateResponsiveLayout: n
   };
 }
-function Pe(t) {
+function Ue(t) {
   let e = !1;
   const r = () => !!t.getSearchParamInteraction()?.read, s = () => !!t.getSearchParamInteraction()?.write;
   return { hydrateFromLocation: async () => {
@@ -304,9 +333,9 @@ const G = ["title", "relevance", "modified"], S = {
   "admin",
   "settings"
 ];
-class Ce extends L {
+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({
+    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,
@@ -321,7 +350,14 @@ class Ce extends L {
       setResponsiveFormFactor: (e) => {
         this.responsiveFormFactor = e;
       }
-    }), this.restoreFocusTarget = null, this.browserResponse = this.getBrowserResponseFromQueryResponse(S), this.searchParamController = Pe({
+    }), 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);
       },
@@ -338,7 +374,7 @@ class Ce extends L {
       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.previewGroup = null, this.queryResponse = S, this.specialGroupOptions = A, this.responsiveFormFactor = "large", this.viewportWidth = typeof window > "u" ? O.lg : window.innerWidth, this.hostWidth = 0, this.store = j({
+    }, 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: [],
@@ -356,10 +392,10 @@ class Ce 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.listen(k.select, this.onDelegatedGroupCardSelect), this.listen(k.preview, this.onDelegatedGroupCardPreview);
+    }, 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, 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 };
+    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;
@@ -486,7 +522,7 @@ class Ce extends L {
       }
   }
   async applySearchParams(e) {
-    const r = E(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));
@@ -636,32 +672,10 @@ class Ce extends L {
     this.arcgisGroupBrowserSelect.emit(this.selectedGroups);
   }
   handleGroupCardPreview(e) {
-    const r = e.detail;
-    if (this.store.filtersExpanded = !1, !r || this.store.preview === r.id) {
-      this.closePreview();
-      return;
-    }
-    this.restoreFocusTarget = this.getRestoreFocusTarget(e.target), this.store.preview = r.id, this.previewGroup = r, this.arcgisGroupBrowserPreview.emit(r);
-  }
-  getRestoreFocusTarget(e) {
-    return !e || !(e instanceof HTMLElement) ? null : e;
+    this.store.filtersExpanded = !1, this.previewSessionController.handlePreview(e.detail, e.target);
   }
   closePreview(e = {}) {
-    this.store.preview = null, 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?.();
-    }
+    this.previewSessionController.closePreview(e);
   }
   async handleSortFieldChange(e) {
     this.sortField = e, this.sortOrder = F(e, this.sortOrder), this.loading = !0, this.arcgisGroupBrowserLoading.emit();
@@ -691,7 +705,7 @@ class Ce extends L {
   async fetchAndEmit(e, r) {
     this.preflight && (e = await this.preflight(e));
     const s = await this.queryGroups(e);
-    this.queryResponse = s, this.browserResponse = this.getBrowserResponseFromQueryResponse(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 {
@@ -757,31 +771,31 @@ class Ce extends L {
     })}</slot>`}</div>`;
   }
   render() {
-    const e = this.responsiveFormFactor === "small" ? "small" : this.formFactor;
-    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=${(r) => {
-      this.arcgisAriaUpdate.emit(r.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: (r) => {
-      this.handleSortFieldChange(r);
-    }, onSortOrderChange: (r) => {
-      this.handleSortOrderChange(r);
-    } })}${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: (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 });
-    }}><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: (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>`;
   }
 }
-I("arcgis-portal-group-browser", Ce);
+E("arcgis-portal-group-browser", Re);
 export {
-  Ce as ArcgisPortalGroupBrowser
+  Re as ArcgisPortalGroupBrowser
 };

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

@@ -55,7 +55,7 @@ class E extends b {
     super.connectedCallback(), this.loadPreviewData();
   }
   willUpdate(e) {
-    e.has("group") && this.loadPreviewData();
+    (e.has("group") || e.has("portal")) && this.loadPreviewData();
   }
   getGroupSummary(e) {
     return G(e.snippet || "");

package/dist/components/arcgis-portal-navigation/index.js

@@ -2,13 +2,13 @@ import "@esri/calcite-components/components/calcite-chip";
 import "@esri/calcite-components/components/calcite-tooltip";
 import "@esri/calcite-components/components/calcite-list-item";
 import "@esri/calcite-components/components/calcite-action";
+import "@esri/calcite-components/components/calcite-dropdown-item";
 import "@esri/calcite-components/components/calcite-icon";
 import "@esri/calcite-components/components/calcite-popover";
 import "@esri/calcite-components/components/calcite-list";
 import "../arcgis-portal-item-type/index.js";
 import "@esri/calcite-components/components/calcite-loader";
 import "@esri/calcite-components/components/calcite-button";
-import "@esri/calcite-components/components/calcite-dropdown-item";
 import "@esri/calcite-components/components/calcite-input";
 import "@esri/calcite-components/components/calcite-dropdown";
 import "../arcgis-portal-user-avatar/index.js";

package/dist/components/arcgis-portal-sublayer-type/customElement.d.ts

@@ -0,0 +1,76 @@
+/// <reference path="../../index.d.ts" />
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { PortalGeometryType } from "../../types/geometry.js";
+import type { SublayerTypeRenderer } from "./utils.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+import type { Icon as Icon } from "@esri/calcite-components/components/calcite-icon";
+
+/** Displays the icon and label used to represent a sublayer type. */
+export abstract class ArcgisPortalSublayerType extends LitElement {
+  /** Geometry type of the layer or table. */
+  accessor geometry: PortalGeometryType | undefined;
+  /**
+   * Set to true to hide the layer icon.
+   *
+   * @default false
+   */
+  accessor hideIcon: boolean;
+  /**
+   * Set to true to hide the layer name.
+   *
+   * @default false
+   */
+  accessor hideName: boolean;
+  /**
+   * Set to true to hide the type text.
+   *
+   * @default false
+   */
+  accessor hideType: boolean;
+  /** @internal */
+  protected messages: {
+      point: string;
+      line: string;
+      polygon: string;
+      multipatch: string;
+      multipoint: string;
+      table: string;
+      annotation: string;
+      catalog: string;
+      dimension: string;
+      "oriented imagery": string;
+      parcel: string;
+      "utility network": string;
+      topology: string;
+      "trace network": string;
+  } & T9nMeta<{
+      point: string;
+      line: string;
+      polygon: string;
+      multipatch: string;
+      multipoint: string;
+      table: string;
+      annotation: string;
+      catalog: string;
+      dimension: string;
+      "oriented imagery": string;
+      parcel: string;
+      "utility network": string;
+      topology: string;
+      "trace network": string;
+  }>;
+  /** Layer or table name. */
+  accessor name: string | undefined;
+  /** Custom renderer function that receives the resolved type information. */
+  accessor renderer: SublayerTypeRenderer | undefined;
+  /** Desired size. */
+  accessor scale: Icon["scale"] | undefined;
+  /** Type of the layer or table. */
+  accessor type: string | undefined;
+  /**
+   * Underline the layer name. Primarily used to denote links.
+   *
+   * @default false
+   */
+  accessor underline: boolean;
+}

package/dist/components/arcgis-portal-sublayer-type/customElement.js

@@ -0,0 +1,121 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as o } from "../../chunks/runtime.js";
+import { css as l, html as t } from "lit";
+import { LitElement as y, safeClassMap as c } from "@arcgis/lumina";
+import { u as m } from "../../chunks/useT9n.js";
+const u = l`:host{display:inline-flex;align-items:center;line-height:1.35;--sublayer-type-font-size: var(--calcite-font-size--1)}.sublayer-type{display:inline-flex;align-items:center;max-width:100%;min-width:0}.text{flex:1 1 0%;margin-inline-start:.5rem;color:inherit}.name{font-weight:500;font-size:var(--sublayer-type-font-size);overflow-wrap:anywhere;white-space:normal}.name--underline{text-decoration:underline}.type{font-weight:400;color:var(--calcite-color-text-2);font-size:var(--sublayer-type-font-size)}`;
+function p({ geometry: n, type: e }) {
+  if (e !== void 0)
+    switch (e) {
+      case "Annotation Layer":
+        return {
+          icon: "layer-annotation",
+          type: "annotation",
+          isGeometry: !1
+        };
+      case "Dimension Layer":
+        return {
+          icon: "layer-dimension",
+          type: "dimension",
+          isGeometry: !1
+        };
+      case "Utility Network Layer":
+        return {
+          icon: "utility-network-layer",
+          type: "utility network",
+          isGeometry: !1
+        };
+      case "Catalog Layer":
+        return {
+          icon: "catalog-dataset",
+          type: "catalog",
+          isGeometry: !1
+        };
+      case "Parcel Layer":
+        return {
+          icon: "parcel-layer",
+          type: "parcel",
+          isGeometry: !1
+        };
+      case "Oriented Imagery Layer":
+        return {
+          icon: "oriented-imagery-layer",
+          type: "oriented imagery",
+          isGeometry: !1
+        };
+      case "Table":
+        return {
+          icon: "table",
+          type: "table",
+          isGeometry: !0
+        };
+    }
+  switch (n) {
+    case "point":
+    case "esriGeometryPoint":
+      return {
+        type: "point",
+        icon: "point",
+        isGeometry: !0
+      };
+    case "esriGeometryMultipoint":
+    case "multipoint":
+      return {
+        type: "multipoint",
+        icon: "layer-points",
+        isGeometry: !0
+      };
+    case "line":
+    case "polyline":
+    case "esriGeometryPolyline":
+      return {
+        type: "line",
+        icon: "line",
+        isGeometry: !0
+      };
+    case "polygon":
+    case "esriGeometryPolygon":
+      return {
+        type: "polygon",
+        icon: "polygon",
+        isGeometry: !0
+      };
+    case "multipatch":
+    case "esriGeometryMultiPatch":
+      return {
+        type: "multipatch",
+        icon: "cube",
+        isGeometry: !0
+      };
+    default:
+      return {
+        type: "table",
+        icon: "table",
+        isGeometry: !0
+      };
+  }
+}
+class h extends y {
+  constructor() {
+    super(...arguments), this.messages = m({ blocking: !0 }), this.hideName = !1, this.hideIcon = !1, this.hideType = !1, this.underline = !1;
+  }
+  static {
+    this.properties = { geometry: 1, type: 1, scale: 3, name: 1, hideName: 5, hideIcon: 5, hideType: 5, underline: 5, renderer: 0 };
+  }
+  static {
+    this.styles = u;
+  }
+  render() {
+    if (!this.messages._lang)
+      return null;
+    const e = p({ type: this.type, geometry: this.geometry });
+    if (this.renderer)
+      return this.renderer({ ...e, name: this.name ?? "" });
+    const { hideIcon: s, hideName: i, hideType: r, underline: a } = this;
+    return i && s && r ? null : t`<div class="sublayer-type">${!s && t`<calcite-icon .icon=${e.icon} .scale=${this.scale}></calcite-icon>` || ""}${(!i || !r) && t`<div class="text">${!i && t`<div class=${c({ name: !0, "name--underline": a })}>${this.name ?? ""}</div>` || ""}${!r && t`<div class="type">${this.messages[e.type]}</div>` || ""}</div>` || ""}</div>`;
+  }
+}
+o("arcgis-portal-sublayer-type", h);
+export {
+  h as ArcgisPortalSublayerType
+};

package/dist/components/arcgis-portal-sublayer-type/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-portal-sublayer-type/index.js

@@ -0,0 +1,2 @@
+import "@esri/calcite-components/components/calcite-icon";
+export * from "./customElement.js";

package/dist/components/arcgis-portal-sublayer-type/utils.d.ts

@@ -0,0 +1,30 @@
+import type { JsxNode } from "@arcgis/lumina";
+import type { Icon as Icon } from "@esri/calcite-components/components/calcite-icon";
+
+/** @param args */
+export type SublayerTypeRenderer = (args: SublayerTypeRendererArguments) => JsxNode;
+
+export interface SublayerTypeRendererArguments extends SublayerTypeInfo {
+  name: string;
+}
+
+export interface SublayerTypeInfo {
+  icon: Icon["icon"];
+  type: keyof {
+      point: string;
+      line: string;
+      polygon: string;
+      multipatch: string;
+      multipoint: string;
+      table: string;
+      annotation: string;
+      catalog: string;
+      dimension: string;
+      "oriented imagery": string;
+      parcel: string;
+      "utility network": string;
+      topology: string;
+      "trace network": string;
+  };
+  isGeometry: boolean;
+}