@arcgis/portal-components 5.2.0-next.7 → 5.2.0-next.71

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

@@ -0,0 +1,492 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as S } from "../../chunks/runtime.js";
+import { css as $, html as u } from "lit";
+import { keyed as B } from "lit/directives/keyed.js";
+import { LitElement as O, createEvent as p, nothing as w, safeClassMap as C } from "@arcgis/lumina";
+import { u as f } from "../../chunks/useT9n.js";
+import { a as U } from "../../chunks/functionalities.js";
+import { c as x, a as v } from "../../chunks/string.js";
+import "../arcgis-portal-browser-search/customElement.js";
+import "../arcgis-portal-browser-top-bar/customElement.js";
+import { c as R, a as _ } from "../../chunks/portal-browser.js";
+import "../arcgis-portal-group-card/customElement.js";
+import "../arcgis-portal-group-browser-preview/customElement.js";
+import { c as W } from "../../chunks/store.js";
+import { i as P } from "../../chunks/query.js";
+import k from "@arcgis/core/portal/PortalGroup.js";
+import { r as A } from "../../chunks/request.js";
+import { g as M } from "../../chunks/portal.js";
+import { b as g } from "../../chunks/ui.js";
+import { watch as T } from "@arcgis/core/core/reactiveUtils.js";
+import { PortalGroupBrowserSort as E } from "../portal-group-browser-sort/customElement.js";
+import { PortalGroupBrowserPagination as q } from "../portal-group-browser-pagination/customElement.js";
+import { PortalGroupBrowserFilters as L } from "../portal-group-browser-filters/customElement.js";
+const z = $`: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 Q(s, e) {
+  const t = `${M(s)}community/groups`, r = D(e), o = H(e), i = !!e.searchUser?.trim();
+  if (!r.trim() && !i)
+    return {
+      nextStart: -1,
+      num: 0,
+      q: r,
+      queryParams: { ...o, q: r },
+      results: [],
+      start: 0,
+      total: 0
+    };
+  const l = { ...o, q: r }, n = await A({
+    url: t,
+    portal: s,
+    params: l
+  }), h = n.results.map((a) => {
+    const c = k.fromJSON(a);
+    return c.portal = s, c;
+  });
+  return {
+    ...n,
+    q: r,
+    queryParams: l,
+    results: h
+  };
+}
+const I = ["created", "modified", "owner", "title"];
+function V(s) {
+  return !!s && I.includes(s);
+}
+function D(s) {
+  const e = [], t = s.baseQuery?.trim();
+  t && e.push(`(${t})`);
+  const r = s.searchTerm?.trim();
+  r && e.push(`(${x(r)})`);
+  for (const o of Object.values(s.filters ?? {}))
+    typeof o.value == "string" && o.value.trim() && e.push(`(${o.value.trim()})`), typeof o.additionalParams == "string" && o.additionalParams.trim() && e.push(`(${o.additionalParams.trim()})`);
+  return e.join(" AND ");
+}
+function H(s) {
+  return {
+    num: s.num,
+    start: s.start,
+    ...s.searchUser ? { searchUserAccess: "groupMember", searchUserName: s.searchUser } : {},
+    ...s.sortField === "relevance" || !V(s.sortField) ? {} : {
+      sortField: s.sortField,
+      sortOrder: s.sortOrder
+    }
+  };
+}
+function b(s, e = "desc") {
+  switch (s) {
+    case "owner":
+    case "title":
+      return "asc";
+    case "created":
+    case "modified":
+    case "relevance":
+      return "desc";
+    default:
+      return e;
+  }
+}
+function N(s) {
+  let e, t, r;
+  const o = () => {
+    e?.();
+    const a = T(
+      () => s.getStore().width,
+      () => {
+        i();
+      }
+    );
+    e = () => {
+      a.remove();
+    };
+  }, i = () => {
+    const a = s.getStore(), c = a.width || s.getHostWidth() || s.getViewportWidth(), d = Math.min(c, s.getViewportWidth());
+    a.width !== d && (a.width = d);
+    const m = d > g.md ? "large" : "small";
+    s.getResponsiveFormFactor() === "large" && m === "small" && (a.panel = !1, a.filtersExpanded = !1), s.getResponsiveFormFactor() === "small" && m === "large" && (a.panel = !1, a.filtersExpanded = !0), s.setResponsiveFormFactor(m);
+  };
+  return {
+    connect: () => {
+      typeof ResizeObserver < "u" && (t = new ResizeObserver((a) => {
+        const c = a[0]?.contentRect?.width ?? 0;
+        if (c > 0) {
+          const d = Math.round(c);
+          s.setHostWidth(d), s.getStore().width = d, i();
+        }
+      }), t.observe(s.el)), o(), i();
+    },
+    disconnect: () => {
+      r !== void 0 && (cancelAnimationFrame(r), r = void 0), e?.(), t?.disconnect(), t = void 0;
+    },
+    refreshStoreWatcher: o,
+    handleWindowResize: () => {
+      if (s.setViewportWidth(window.innerWidth), !t) {
+        if (r !== void 0)
+          return;
+        r = requestAnimationFrame(() => {
+          r = void 0;
+          const a = Math.round(
+            s.el.getBoundingClientRect().width || s.getHostWidth() || s.getViewportWidth()
+          ), c = Math.min(a, s.getViewportWidth()), d = s.getStore();
+          d.width !== c && (d.width = c), i();
+        });
+        return;
+      }
+      i();
+    },
+    updateResponsiveLayout: i
+  };
+}
+const y = ["title", "relevance", "modified"], F = {
+  queryParams: void 0,
+  nextStart: -1,
+  results: [],
+  start: -1,
+  num: 0,
+  total: 0
+}, G = [
+  "openData",
+  "sharedUpdate",
+  "distributed",
+  "admin",
+  "settings"
+];
+class j extends O {
+  constructor() {
+    super(...arguments), this._messages = f({ name: "portal-group-browser", blocking: !0 }), this._browserMessages = f({ name: "portal-browser", blocking: !0 }), this.responsiveLayoutController = N({
+      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.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 = F, this.specialGroupOptions = G, this.responsiveFormFactor = "large", this.viewportWidth = typeof window > "u" ? g.lg : window.innerWidth, this.hostWidth = 0, this.store = W({
+      type: "group-browser",
+      width: window?.innerWidth ?? g.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: y
+      }
+    }, this.selection = "none", this.alwaysShowSelection = !1, this.hidePreviewFooter = !1, this.hidePreviewBadges = !1, this.hasIndoorsSpaces = !1, this.arcgisGroupBrowserLoading = p(), this.arcgisGroupBrowserPreview = p(), this.arcgisGroupBrowserSelect = p(), this.arcgisGroupBrowserSublayerPreview = p(), this.arcgisGroupBrowserUpdate = p(), this.arcgisGroupBrowserInternalUIAction = p(), this.arcgisGroupBrowserUserFilterChange = p(), this.arcgisAriaUpdate = p();
+  }
+  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, selection: 1, alwaysShowSelection: 5, hidePreviewFooter: 5, hidePreviewBadges: 5, hasIndoorsSpaces: 5 };
+  }
+  static {
+    this.styles = z;
+  }
+  get currentUsername() {
+    return this.portal.user?.username ?? "";
+  }
+  async refresh() {
+    await this.fetchGroups();
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("resize", this.responsiveLayoutController.handleWindowResize), this.responsiveLayoutController.connect(), this.syncSortFromConfig(), this.selectedGroups = this.selected || [], this.syncSelectionsFromConfig(), this.updateSpecialGroupOptions(), this.fetchGroups();
+  }
+  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;
+  }
+  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 ?? y;
+    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 r = e.props?.field, o = r && t.includes(r) ? r : t[0];
+    this.sortField = o, this.sortOrder = e.props?.order ?? b(o, this.sortOrder);
+  }
+  async updateSpecialGroupOptions() {
+    if (!this.portal) {
+      this.specialGroupOptions = [];
+      return;
+    }
+    let e = "";
+    try {
+      e = await P(this.portal);
+    } catch {
+      e = "";
+    }
+    this.specialGroupOptions = G.filter((t) => !(t === "openData" && this.portal.isPortal || // https://devtopia.esri.com/webgis/arcgis-portal-app/issues/37831
+    t === "distributed" && this.hasIndoorsSpaces || // https://devtopia.esri.com/WebGIS/arcgis-portal-app/issues/45449 orgs with no settings
+    t === "settings" && !e)), this.selectedSpecialGroup && !this.specialGroupOptions.includes(this.selectedSpecialGroup) && this.removeFilter("specialGroups");
+  }
+  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]: R(t)
+    }, this.resetSelectionByFilterId(e), this.publishFilterStateChange(), this.fetchGroups());
+  }
+  clearFilters() {
+    this.store.filters = _(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:
+        U(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: r } = e.detail;
+    switch (this.selection) {
+      case "single":
+        this.selectedGroups = [r];
+        break;
+      case "multiple":
+        t ? this.selectGroup(r) : this.deselectGroup(r);
+        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 = b(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 r = e.queryParams;
+    this.arcgisGroupBrowserUpdate.emit({
+      queryResponse: e,
+      sortField: r?.sortField,
+      sortOrder: r?.sortOrder,
+      selectedGroups: this.selectedGroups,
+      filters: { ...this.store.filters },
+      searchTerm: t
+    });
+  }
+  async queryGroups(e) {
+    return await (this.fetch?.(e) ?? Q(this.portal, e));
+  }
+  async fetchAndEmit(e, t) {
+    this.preflight && (e = await this.preflight(e));
+    const r = await this.queryGroups(e);
+    this.queryResponse = r, this.loading = !1, this.emitUpdate(r, 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: r }) {
+    this.loading = !0, this.arcgisGroupBrowserLoading.emit();
+    const o = this.createQuery({ start: t, num: e, total: r });
+    await this.fetchAndEmit(o, this.searchTerm);
+  }
+  getBrowserResponseFromQueryResponse(e) {
+    const { nextStart: t, num: r, queryParams: o, results: i, start: l, total: n } = e ?? F;
+    return {
+      nextStart: t ?? -1,
+      num: r ?? o?.num ?? 0,
+      results: i,
+      start: l ?? o?.start ?? 1,
+      total: n
+    };
+  }
+  async formatRange({ start: e, end: t, total: r }) {
+    if (this._messages._lang === "en")
+      return [`${e}-${t} of ${r}`, `${e}-${t} of ${r} group${r === "1" ? "" : "s"}`];
+    const i = this._messages.browser, l = { start: e, end: t, total: r }, n = v(i.pageRange, l), h = v(i.pageRangeAria, l);
+    return [n, h];
+  }
+  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) => {
+      this.handleSearch(e.detail);
+    }}></arcgis-portal-browser-search></arcgis-portal-browser-top-bar>`;
+  }
+  renderEmptyTextSlot(e, t) {
+    return u`<div slot=${e ?? w} class="empty-text-slot"><slot name=${e ?? w}><p class="empty-text-slot__default">${t}</p></slot></div>`;
+  }
+  renderContent() {
+    const e = new Set(this.selectedGroups.map((o) => o.id)), t = this.queryResponse.results.map((o) => {
+      const i = this.cards.group?.(o) ?? {}, l = i.view || this.store.view || "list";
+      return {
+        group: o,
+        cardProps: i,
+        view: l
+      };
+    }), r = t.length > 0 && t.every(({ view: o }) => o === "compact");
+    return u`<div class=${C({ "group-browser__results": !0, "group-browser__results--compact": r })} .part=${"results"}>${t.map(({ group: o, cardProps: i, view: l }) => {
+      const n = o.id;
+      return B(n, u`<arcgis-portal-group-card class="group-browser__result-card" .portal=${this.portal} .group=${o} .user=${i.user} .indeterminate=${i.indeterminate} .view=${l} .selection=${this.selection} .selected=${e.has(n)} .preview=${i.preview ?? this.preview} .previewed=${i.previewed ?? this.store.preview === n} .name=${i.name} .showSummary=${i.showSummary ?? !0} .hideBadges=${i.hideBadges ?? !1} .hideDateUpdated=${i.hideDateUpdated ?? !1} .showDateCreated=${i.showDateCreated ?? !1} .hideViewableBy=${i.hideViewableBy ?? !1} .hideOwner=${i.hideOwner ?? !1} .link=${i.link} .linkHandler=${i.linkHandler} .newTab=${i.newTab ?? !1} .disabled=${i.disabled ?? !1} @arcgisGroupCardSelect=${(h) => {
+        this.handleGroupCardSelect(h);
+      }} @arcgisGroupBrowserCardPreview=${(h) => {
+        const a = h.detail;
+        if (this.store.filtersExpanded = !1, !a || this.store.preview === a.id) {
+          this.closePreview();
+          return;
+        }
+        this.restoreFocusTarget = h.currentTarget, this.store.preview = a.id, this.previewGroup = a, this.arcgisGroupBrowserPreview.emit(a);
+      }}></arcgis-portal-group-card>`);
+    })}</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=${(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>${E({ 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>${q({ 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 && 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=${(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>${L({ 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>`;
+  }
+}
+S("arcgis-portal-group-browser", j);
+export {
+  j as ArcgisPortalGroupBrowser
+};

package/dist/components/arcgis-portal-group-browser/index.d.ts

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

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

@@ -0,0 +1,6 @@
+import "../arcgis-portal-browser-top-bar/index.js";
+import "../arcgis-portal-browser-search/index.js";
+import "../arcgis-portal-group-card/index.js";
+import "../arcgis-portal-browser/index.js";
+import "../arcgis-portal-group-browser-preview/index.js";
+export * from "./customElement.js";