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

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

@@ -0,0 +1,150 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as w } from "../../chunks/runtime.js";
+import { repeat as _ } from "lit/directives/repeat.js";
+import { keyed as f } from "lit/directives/keyed.js";
+import { substitute as h } from "@arcgis/core/intl.js";
+import { LitElement as b, createEvent as v, safeClassMap as y } from "@arcgis/lumina";
+import { css as $, html as s } from "lit";
+import { createRef as x, ref as k } from "lit/directives/ref.js";
+import { u as I } from "../../chunks/useT9n.js";
+import { a as G, s as A } from "../../chunks/dom.js";
+import { g as p } from "../../chunks/groups2.js";
+import { g as C } from "../../chunks/url.js";
+import { g as T } from "../../chunks/user2.js";
+import { e as P, h as M, f as z } from "../../chunks/query.js";
+import "../arcgis-portal-group-browser-preview-card/customElement.js";
+import { f as B } from "../../chunks/user.js";
+const F = $`:host{display:flex;height:100%;width:100%;flex:1 1 0%;flex-direction:column;background-color:var(--calcite-color-background)}.preview{box-sizing:border-box;display:flex;flex-direction:column;gap:0;height:100%;min-height:0;overflow:auto;padding:0;position:relative}.preview__header{align-items:center;background:var(--calcite-color-foreground-1);display:flex;justify-content:space-between;padding:0;padding-inline-start:.75rem}.preview__title{color:var(--calcite-color-text-1);font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);line-height:1.375;margin:0;overflow-wrap:anywhere;flex:1 1 auto}.preview__accordion{--calcite-accordion-item-header-background-color: var(--calcite-color-foreground-1);--calcite-accordion-item-heading-text-size: var(--calcite-font-size-0)}.preview__accordion calcite-accordion-item{--calcite-internal-accordion-item-padding: 1rem 1rem;border-bottom:1px solid var(--calcite-color-border-2);box-sizing:border-box;width:100%}.preview__section{background:var(--calcite-color-background);line-height:1.35;margin:-1rem;padding:1rem}.preview__section--tight{padding:0}.preview__summary{color:var(--calcite-color-text-2);font-size:var(--calcite-font-size-0);line-height:1.45;margin:0}.preview__description{--item-browser-table-border: 1px solid var(--calcite-color-border-2);color:var(--calcite-color-text-2);line-height:1.35;overflow-wrap:anywhere;*{font-size:.875rem;max-width:100%}a{color:var(--calcite-color-text-link)}img,video{height:auto;max-width:100%}table{background:var(--calcite-color-foreground-1);border:var(--item-browser-table-border);border-collapse:collapse;border-spacing:0;font-size:var(--calcite-font-size--2);overflow:auto;text-align:start;width:100%}table>thead{background:var(--calcite-color-foreground-1);border-bottom:var(--item-browser-table-border);font-weight:var(--calcite-font-weight-normal)}table>tbody{overflow:auto;width:100%}table>tfoot{border-top:var(--item-browser-table-border)}th,td{border-inline:var(--item-browser-table-border);font-weight:var(--calcite-font-weight-light);padding:.5rem;text-align:start}tr{border-bottom:var(--item-browser-table-border);text-align:start}tr:last-child{border-bottom:none}}.preview__empty{color:var(--calcite-color-text-1);margin:0}.preview__empty-wrap{align-items:center;display:flex;flex-direction:column;gap:.5rem;padding:.5rem}.preview__loading-placeholder{min-height:2rem}.preview__empty-icon{color:var(--calcite-color-text-1);height:3rem;width:3rem}.preview__badges{margin-top:1rem}.preview__badges[empty]{display:none}.preview__full-card-wrapper{padding:.75rem .5rem 0}.preview__card{margin:0}.preview__card-body{display:grid;gap:.125rem}.preview__user-popup{overflow:hidden}.preview__settings-title{color:var(--calcite-color-text-3);font-size:var(--calcite-font-size--2);margin:0}.preview__settings-text{color:var(--calcite-color-text-1);margin:0;line-height:1.4}.preview__link-wrap{margin-top:.75rem;padding:0 .25rem 1rem}.preview__footer-actions{width:100%;display:flex;flex-direction:column}.preview__footer-actions--spaced{gap:.5rem}.preview__card-container{display:flex;flex-direction:column;gap:.25rem}.preview__settings-section{display:flex;flex-direction:column;gap:1.25rem}.preview__settings-row{display:grid;gap:.25rem}.preview__link-wrap--settings{padding-inline:0}`, q = async (c, e) => {
+  try {
+    const t = c.id ? (await e.queryGroups({ query: `id:${c.id}`, num: 1 })).results[0] ?? c : c;
+    t.portal = e;
+    const o = p(t), r = o.properties?.featuredItemIds ?? [], n = !!(o.properties?.isFeatured && r.length), [{ items: d, total: m }, l] = await Promise.all([
+      n ? S(t, r) : D(t),
+      t.fetchMembers()
+    ]), a = [l.owner, ...l.admins.filter((g) => g !== l.owner)], i = await Promise.all(a.map(async (g) => await B(g, e)));
+    return { result: { group: t, items: d, total: m, members: l, managers: i } };
+  } catch (t) {
+    return console.error(t), { error: { code: "unhandledError" } };
+  }
+}, u = 4;
+async function S(c, e) {
+  const t = await c.queryItems({
+    num: Math.min(u, e.length),
+    query: `id:(${e.slice(0, u).join(" OR ")})`
+  });
+  return { items: e.map((r) => t.results.find((n) => n.id === r)).filter((r) => !!r), total: t.total || e.length };
+}
+async function D(c) {
+  const { sortField: e = "modified", sortOrder: t = "desc" } = p(c), o = P(c) || M, r = await c.queryItems({ num: u, sortField: e, sortOrder: t, query: o });
+  return { items: r.results || [], total: r.total || 0 };
+}
+class E extends b {
+  constructor() {
+    super(...arguments), this.messages = I({ name: "portal-group-browser", blocking: !0 }), this.requestId = 0, this.flowItemEl = x(), this.loading = !1, this.contentItems = [], this.contentTotal = 0, this.managers = [], this.fullGroup = null, this.hideBadges = !1, this.hidePreviewFooter = !1, this.previewFooterActionsSpaced = !1, this.arcgisGroupBrowserPreviewClose = v(), this.arcgisGroupBrowserInternalUIAction = v();
+  }
+  static {
+    this.properties = { loading: 16, contentItems: 16, contentTotal: 16, managers: 16, fullGroup: 16, group: 0, portal: 0, user: 0, hideBadges: 5, hidePreviewFooter: 5, currentResponse: 0, previewFooterActionsSpaced: 5 };
+  }
+  static {
+    this.styles = F;
+  }
+  async setFocus() {
+    this.flowItemEl.value?.setFocus();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.loadPreviewData();
+  }
+  willUpdate(e) {
+    (e.has("group") || e.has("portal")) && this.loadPreviewData();
+  }
+  getGroupSummary(e) {
+    return G(e.snippet || "");
+  }
+  getGroupDescriptionHtml(e) {
+    return A(e.description || "");
+  }
+  async loadPreviewData() {
+    const { group: e, portal: t } = this, o = ++this.requestId;
+    this.loading = !0, this.contentItems = [], this.contentTotal = 0, this.managers = [], this.fullGroup = null;
+    const { result: r, error: n } = await q(e, t);
+    o === this.requestId && (this.loading = !1, !(n || !r) && o === this.requestId && (this.contentItems = r.items, this.contentTotal = r.total, this.managers = r.managers, this.fullGroup = r.group, this.flowItemEl.value?.setFocus()));
+  }
+  getPreviewPosition(e) {
+    if (!e)
+      return;
+    const o = this.currentResponse?.results?.findIndex((n) => n.id === e);
+    if (o == null || o < 0)
+      return;
+    const r = this.currentResponse?.start ?? 1;
+    return o + r;
+  }
+  isAccordionItem(e) {
+    return e instanceof HTMLElement && e.tagName === "CALCITE-ACCORDION-ITEM";
+  }
+  handleAccordionItemClick(e, t) {
+    e && this.arcgisGroupBrowserInternalUIAction.emit({
+      action: e.expanded ? "expand" : "collapse",
+      category: "group panel action",
+      details: t
+    });
+  }
+  handleDetailsClick(e) {
+    this.arcgisGroupBrowserInternalUIAction.emit({
+      action: "click",
+      category: "group panel action",
+      details: e
+    });
+  }
+  getAccessText(e) {
+    switch (p(e).access) {
+      case "public":
+        return this.messages.preview.everyone;
+      case "private":
+        return this.messages.preview.onlyMembers;
+      case "org":
+        return this.messages.preview.onlyOrganization;
+      case "shared":
+        return this.messages.preview.onlyOrganizationAndPartners;
+      default:
+        return this.messages.preview.unknownValue;
+    }
+  }
+  getContributorsText(e) {
+    return p(e).isViewOnly ? this.messages.preview.onlyOwnerManager : this.messages.preview.allMembers;
+  }
+  getJoinMethodText(e) {
+    const t = p(e);
+    return t.autoJoin ? this.messages.preview.byAutojoin : e.isInvitationOnly ? this.messages.preview.byInvitation : t.providerGroupName ? this.messages.preview.byEnterprise : this.messages.preview.byRequest;
+  }
+  render() {
+    const e = this.fullGroup ?? this.group, t = this.getGroupSummary(e), o = this.getGroupDescriptionHtml(e), { group: r, content: n, members: d, settings: m } = z(this.portal, e), l = this.user?.username === e.owner, a = this.messages.preview;
+    return s`<calcite-flow><calcite-flow-item closable .loading=${this.loading} @calciteFlowItemClose=${() => {
+      this.arcgisGroupBrowserInternalUIAction.emit({
+        action: "close panel",
+        category: "group panel action"
+      }), this.arcgisGroupBrowserPreviewClose.emit();
+    }} ${k(this.flowItemEl)}><div slot=header-content class="preview__header"><h3 class="preview__title">${e.title || this.messages.preview.titleFallback}</h3></div><section class="preview">${f(e.id, s`<calcite-accordion icon-position=start appearance=transparent class="preview__accordion"><calcite-accordion-item .heading=${this.messages.preview.overview} .expanded=${!!t} @click=${(i) => this.isAccordionItem(i.target) && this.handleAccordionItemClick(i.currentTarget, "overview")}><div class="preview__section">${t ? s`<p class="preview__summary">${t}</p>` : s`<p class="preview__empty">${this.messages.preview.noSummary}</p>`}${this.hideBadges ? null : s`<arcgis-portal-group-badges .group=${e} .portal=${this.portal} width=full scale=s appearance=outline-fill class="preview__badges"></arcgis-portal-group-badges>`}</div></calcite-accordion-item><calcite-accordion-item .heading=${a.description} @click=${(i) => this.isAccordionItem(i.target) && this.handleAccordionItemClick(i.currentTarget, "description")}><div class="preview__section">${o ? s`<div class="preview__description" .innerHTML=${o ?? ""}></div>` : s`<p class="preview__empty">${a.noDescription}</p>`}</div></calcite-accordion-item><calcite-accordion-item .heading=${h(a.content, { count: String(this.contentTotal) })} expanded @click=${(i) => this.isAccordionItem(i.target) && this.handleAccordionItemClick(i.currentTarget, "content")}><div class="preview__section preview__section--tight">${this.contentItems.length ? s`<div class="preview__full-card-wrapper"><div class="preview__card-container">${_(this.contentItems, (i) => i.id, (i) => s`<arcgis-portal-group-browser-preview-card class="preview__card" .item=${i} .portal=${this.portal} .user=${this.user}></arcgis-portal-group-browser-preview-card>`)}</div><div class="preview__link-wrap"><calcite-link .href=${n} @click=${() => {
+      this.handleDetailsClick("view all content");
+    }}>${this.messages.preview.viewContent}</calcite-link></div></div>` : this.loading ? s`<div class="preview__loading-placeholder"></div>` : s`<div class="preview__empty-wrap"><calcite-icon scale=l icon=files class="preview__empty-icon"></calcite-icon><p class="preview__empty">${this.messages.preview.noContent}</p></div>`}</div></calcite-accordion-item><calcite-accordion-item .heading=${h(a.groupManagers, { count: String(this.managers.length) })} expanded @click=${(i) => this.isAccordionItem(i.target) && this.handleAccordionItemClick(i.currentTarget, "managers")}><div class="preview__section preview__section--tight"><div class="preview__full-card-wrapper">${this.managers.length ? s`<div class="preview__card-container">${this.managers.map((i) => s`<calcite-card class="preview__card"><div class="preview__card-body"><arcgis-portal-user-popup class="preview__user-popup" .fullName=${i.username === e.owner ? h(a.groupOwner, {
+      fullName: T(i, this.messages._lang)
+    }) : i.fullName} show-name show-username .user=${i} .portal=${this.portal} .baseUrl=${C({ portal: this.portal })}></arcgis-portal-user-popup></div></calcite-card>`)}</div>` : this.loading ? s`<div class="preview__loading-placeholder"></div>` : s`<p class="preview__empty">${a.noManagers}</p>`}<div class="preview__link-wrap"><calcite-link .href=${d} @click=${() => {
+      this.handleDetailsClick("open members page");
+    }}>${a.openMembers}</calcite-link></div></div></div></calcite-accordion-item><calcite-accordion-item .heading=${a.settings} .expanded=${l} @click=${(i) => this.isAccordionItem(i.target) && this.handleAccordionItemClick(i.currentTarget, "settings")}><div class="preview__section preview__settings-section"><div class="preview__settings-row"><h4 class="preview__settings-title">${a.viewableBy}:</h4><p class="preview__settings-text">${this.getAccessText(e)}</p></div><div class="preview__settings-row"><h4 class="preview__settings-title">${a.contributors}:</h4><p class="preview__settings-text">${this.getContributorsText(e)}</p></div>${l ? s`<div class="preview__settings-row"><h4 class="preview__settings-title">${a.joinMethod}:</h4><p class="preview__settings-text">${this.getJoinMethodText(e)}</p><div class="preview__link-wrap preview__link-wrap--settings"><calcite-link .href=${m} @click=${() => {
+      this.handleDetailsClick("open settings");
+    }}>${a.openSettings}</calcite-link></div></div>` : null}</div></calcite-accordion-item></calcite-accordion>`)}</section>${!this.hidePreviewFooter && s`<div slot=footer class=${y({
+      "preview__footer-actions": !0,
+      "preview__footer-actions--spaced": this.previewFooterActionsSpaced
+    })}><calcite-button appearance=solid kind=neutral width=full .href=${r} @click=${() => {
+      this.arcgisGroupBrowserInternalUIAction.emit({
+        action: "click",
+        category: "group panel action",
+        details: "view group details",
+        position: this.getPreviewPosition(e.id)
+      });
+    }}>${a.openGroupPage}</calcite-button><slot name=footer-action></slot></div>` || ""}</calcite-flow-item></calcite-flow>`;
+  }
+}
+w("arcgis-portal-group-browser-preview", E);
+export {
+  E as ArcgisPortalGroupBrowserPreview
+};

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

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

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

@@ -0,0 +1,12 @@
+import "@esri/calcite-components/components/calcite-flow";
+import "@esri/calcite-components/components/calcite-flow-item";
+import "@esri/calcite-components/components/calcite-accordion";
+import "@esri/calcite-components/components/calcite-accordion-item";
+import "../arcgis-portal-group-badges/index.js";
+import "../arcgis-portal-group-browser-preview-card/index.js";
+import "@esri/calcite-components/components/calcite-link";
+import "@esri/calcite-components/components/calcite-icon";
+import "@esri/calcite-components/components/calcite-card";
+import "../arcgis-portal-user-popup/index.js";
+import "@esri/calcite-components/components/calcite-button";
+export * from "./customElement.js";

package/dist/components/arcgis-portal-group-browser-preview-card/customElement.d.ts

@@ -0,0 +1,82 @@
+/// <reference path="../../index.d.ts" />
+import type Portal from "@arcgis/core/portal/Portal.js";
+import type PortalItem from "@arcgis/core/portal/PortalItem.js";
+import type PortalUser from "@arcgis/core/portal/PortalUser.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { InternalUIAction } from "../../types/tracking.js";
+
+export abstract class ArcgisPortalGroupBrowserPreviewCard extends LitElement {
+  /** Optional fully qualified path to the portal home root. */
+  accessor baseUrl: string | undefined;
+  /**
+   * Hide item type in the card body.
+   *
+   * @default false
+   */
+  accessor hideItemType: boolean;
+  /**
+   * Hide owner information in the footer.
+   *
+   * @default false
+   */
+  accessor hideOwner: boolean;
+  /**
+   * Hide the item thumbnail area.
+   *
+   * @default false
+   */
+  accessor hideThumbnail: boolean;
+  /**
+   * Allow hover styles and click interaction on the card.
+   *
+   * @default false
+   */
+  accessor interactive: boolean;
+  /** Item shown in the group preview content list. */
+  accessor item: PortalItem;
+  /** Optional link destination; when provided, upper card section becomes an anchor. */
+  accessor link: string | undefined;
+  /**
+   * Open card link in a new tab.
+   *
+   * @default false
+   */
+  accessor newTab: boolean;
+  /** Current portal instance used for links and thumbnail resolution. */
+  accessor portal: Portal | undefined;
+  /**
+   * Show simple content status badge when available.
+   *
+   * @default false
+   */
+  accessor showBadges: boolean;
+  /**
+   * Show the item modified date in the card details row.
+   *
+   * @default false
+   */
+  accessor showDateUpdated: boolean;
+  /**
+   * Show popup-enabled owner link in footer instead of plain avatar lockup.
+   *
+   * @default false
+   */
+  accessor showOwnerPopup: boolean;
+  /**
+   * Show a short item summary if available.
+   *
+   * @default false
+   */
+  accessor showSummary: boolean;
+  /** Current signed in user for owner and item context. */
+  accessor user: PortalUser | undefined;
+  restoreFocus(): Promise<void>;
+  /** Fires on internal component interaction for telemetry. */
+  readonly arcgisGroupBrowserInternalUIAction: import("@arcgis/lumina").TargetedEvent<this, InternalUIAction>;
+  /** Emitted when this card is selected via interaction. */
+  readonly arcgisGroupBrowserPreviewCardSelect: import("@arcgis/lumina").TargetedEvent<this, PortalItem>;
+  readonly "@eventTypes": {
+    arcgisGroupBrowserInternalUIAction: ArcgisPortalGroupBrowserPreviewCard["arcgisGroupBrowserInternalUIAction"]["detail"];
+    arcgisGroupBrowserPreviewCardSelect: ArcgisPortalGroupBrowserPreviewCard["arcgisGroupBrowserPreviewCardSelect"]["detail"];
+  };
+}

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

@@ -0,0 +1,93 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as u } from "../../chunks/runtime.js";
+import { formatDate as w } from "@arcgis/core/intl.js";
+import { LitElement as v, createEvent as d, nothing as o, safeClassMap as n } from "@arcgis/lumina";
+import { css as _, html as r } from "lit";
+import { createRef as p, ref as h } from "lit/directives/ref.js";
+import { g as f } from "../../chunks/items.js";
+import { g } from "../../chunks/itemThumbnail.js";
+import { g as b } from "../../chunks/url.js";
+const y = _`:host{display:block;min-width:0;container-type:inline-size}.preview-card{position:relative;display:flex;width:100%;height:100%;flex-direction:column;color:var(--calcite-color-text-1);opacity:0;background-color:var(--calcite-color-foreground-1);border:1px solid var(--calcite-color-border-3);transition:background-color .15s ease-in-out,opacity .15s ease-in-out}.preview-card--loaded{opacity:1}.preview-card--hoverable{cursor:pointer}.preview-card--hoverable .preview-card__upper:hover{background-color:var(--calcite-color-background)}.preview-card__upper{display:flex;align-items:stretch;min-width:0;flex:1 1 auto;padding:.75rem;background-color:var(--calcite-color-foreground-1)}.preview-card__upper--link{color:var(--calcite-color-text-1);text-decoration:none}.preview-card__top{display:flex;align-self:stretch;flex:0 0 auto}.preview-card__thumbnail{box-sizing:border-box;display:grid;place-items:center;width:4rem;height:100%;margin:0;margin-inline-start:.75rem;border-radius:2px;overflow:hidden;background-color:var(--calcite-color-foreground-2)}.preview-card__thumbnail-image{width:100%;height:100%;object-fit:cover}.preview-card__thumbnail--fallback{color:var(--calcite-color-text-3)}.preview-card__content{min-width:0;flex:1 1 auto}.preview-card__body{display:grid;min-width:0;gap:.25rem}.preview-card__title{margin:0;height:2rem;font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-medium);line-height:1.15;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}.preview-card__title--padded{margin-bottom:.125rem}.preview-card__title-span{position:relative}.preview-card__summary{color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--2);line-height:1.35;margin:0;overflow:hidden;text-overflow:ellipsis}.preview-card__details{align-items:center;display:flex;flex-wrap:wrap;gap:.25rem}.preview-card__detail,.preview-card__meta{color:var(--calcite-color-text-1);font-size:var(--calcite-font-size--2);margin:0}.preview-card__meta{color:var(--calcite-color-text-2)}.preview-card__status{--calcite-chip-background-color: var(--calcite-color-foreground-2);text-transform:capitalize}.preview-card__divider{align-items:center;display:flex;flex:0 0 auto}.preview-card__divider:before{content:"";height:1rem;width:1px;margin-inline-end:.5rem;background-color:var(--calcite-color-border-2)}.preview-card__details :first-child.preview-card__divider:before{display:none}.preview-card__footer{align-items:center;border-top:1px solid var(--calcite-color-border-2);display:flex;margin-top:auto;min-height:2.25rem;padding:.375rem .75rem}.preview-card__footer-start{align-items:center;display:flex;flex:1 1 auto;min-width:0}.preview-card__owner{min-width:0}@container (max-width: 480px){.preview-card__upper{padding:.625rem}.preview-card__thumbnail{width:3.5rem;margin-inline-start:.5rem}.preview-card__footer{padding:.25rem .625rem}}`;
+class $ extends v {
+  constructor() {
+    super(...arguments), this.sectionEl = p(), this.linkEl = p(), this.cachedOwner = "", this.cachedStatus = "", this.cachedTitle = "-", this.cachedType = "-", this.cachedSummary = "", this.cachedUpdatedText = "", this.cachedThumbnailUri = null, this.handleCardClick = () => {
+      const { link: e, item: t } = this;
+      e || this.arcgisGroupBrowserPreviewCardSelect.emit(t);
+    }, this.isLoaded = !1, this.imageError = !1, this.newTab = !1, this.hideThumbnail = !1, this.hideOwner = !1, this.hideItemType = !1, this.showDateUpdated = !1, this.showSummary = !1, this.showBadges = !1, this.showOwnerPopup = !1, this.interactive = !1, this.arcgisGroupBrowserInternalUIAction = d(), this.arcgisGroupBrowserPreviewCardSelect = d();
+  }
+  static {
+    this.properties = { isLoaded: 16, imageError: 16, item: 0, portal: 0, user: 0, baseUrl: 1, link: 1, newTab: 5, hideThumbnail: 5, hideOwner: 5, hideItemType: 5, showDateUpdated: 5, showSummary: 5, showBadges: 5, showOwnerPopup: 5, interactive: 5 };
+  }
+  static {
+    this.styles = y;
+  }
+  async restoreFocus() {
+    if (this.link && this.linkEl.value) {
+      this.linkEl.value.focus();
+      return;
+    }
+    this.sectionEl.value?.focus();
+  }
+  connectedCallback() {
+    super.connectedCallback(), requestAnimationFrame(() => {
+      this.isLoaded = !0;
+    });
+  }
+  willUpdate(e) {
+    (e.has("item") || e.has("portal") || e.has("showSummary") || e.has("showDateUpdated")) && (this.imageError = !1, this.updateCachedItemData());
+  }
+  get resolvedBaseUrl() {
+    if (!this.portal)
+      return "";
+    const e = b({ portal: this.portal });
+    return this.baseUrl || `${e}/home`;
+  }
+  getItemThumbnailUri(e) {
+    return e.thumbnailUrl ? e.thumbnailUrl : this.portal ? g(this.portal, e) : null;
+  }
+  updateCachedItemData() {
+    const { item: e, showSummary: t, showDateUpdated: s } = this, i = f(e), a = i.snippet?.trim() || "";
+    this.cachedOwner = i.owner || "", this.cachedStatus = i.contentStatus || "", this.cachedTitle = i.title?.trim() || e.title?.trim() || "-", this.cachedType = i.type?.trim() || "-", this.cachedSummary = t ? a.length > 250 ? `${a.slice(0, 250)}...` : a : "", this.cachedUpdatedText = s ? w(i.modified ?? e.modified, { dateStyle: "medium" }) : "", this.cachedThumbnailUri = this.getItemThumbnailUri(e);
+  }
+  renderStatusBadge() {
+    const e = this.cachedStatus;
+    return !this.showBadges || !e ? null : r`<calcite-chip class="preview-card__status" scale=s .value=${e} .label=${e}>${e}</calcite-chip>`;
+  }
+  renderThumbnail() {
+    if (this.hideThumbnail)
+      return null;
+    const e = this.cachedThumbnailUri;
+    return e && !this.imageError ? r`<figure class="preview-card__thumbnail"><img class="preview-card__thumbnail-image" src=${e ?? o} alt @error=${() => {
+      this.imageError = !0;
+    }}></figure>` : r`<figure class="preview-card__thumbnail preview-card__thumbnail--fallback" aria-hidden=true><calcite-icon icon=file scale=m></calcite-icon></figure>`;
+  }
+  renderOwner() {
+    const e = this.cachedOwner;
+    return this.hideOwner || !e || !this.portal ? null : this.showOwnerPopup ? r`<arcgis-portal-user-popup underline .username=${e} .portal=${this.portal} .baseUrl=${this.resolvedBaseUrl} class="preview-card__owner" scale=s @arcgisUserPopupInternalUIAction=${(t) => {
+      t.stopPropagation(), this.arcgisGroupBrowserInternalUIAction.emit(t.detail);
+    }}></arcgis-portal-user-popup>` : r`<arcgis-portal-user-avatar scale=s show-name hide-avatar .username=${e} .portal=${this.portal} class="preview-card__owner"></arcgis-portal-user-avatar>`;
+  }
+  renderBody(e) {
+    const { showSummary: t, showDateUpdated: s } = this, i = !this.hideItemType, a = this.cachedTitle, m = this.cachedType, c = this.cachedSummary, l = this.cachedUpdatedText;
+    return r`<div class="preview-card__body"><h3 class=${n({
+      "preview-card__title": !0,
+      "preview-card__title--padded": i || t && !!c
+    })}><span class="preview-card__title-span">${a}</span></h3>${t && c ? r`<p class="preview-card__summary">${c}</p>` : null}${i ? r`<arcgis-portal-item-type scale=s .item=${e} .portal=${this.portal} .user=${this.user}></arcgis-portal-item-type>` : null}<div class="preview-card__details">${s && l ? r`<span class="preview-card__detail preview-card__divider">${l}</span>` : null}${this.renderStatusBadge()}${i ? null : r`<p class="preview-card__meta">${m}</p>`}</div></div>`;
+  }
+  render() {
+    const { item: e, interactive: t, link: s, newTab: i } = this;
+    return r`<section class=${n({
+      "preview-card": !0,
+      "preview-card--hoverable": t,
+      "preview-card--loaded": this.isLoaded
+    })} .part=${"card"} tabindex=${(t ? 0 : void 0) ?? o} @click=${s ? void 0 : this.handleCardClick} ${h(this.sectionEl)}><slot name=content-top></slot>${s ? r`<a class="preview-card__upper preview-card__upper--link" href=${s ?? o} target=${(i ? "_blank" : void 0) ?? o} rel=${(i ? "noopener noreferrer" : void 0) ?? o} ${h(this.linkEl)}>${r`<div class="preview-card__content">${this.renderBody(e)}</div><div class="preview-card__top">${this.renderThumbnail()}</div>`}</a>` : r`<div class="preview-card__upper"><div class="preview-card__content">${this.renderBody(e)}</div><div class="preview-card__top">${this.renderThumbnail()}</div></div>`}<div class="preview-card__footer" @click=${(a) => {
+      a.stopPropagation();
+    }} @keydown=${(a) => {
+      (a.key === "Enter" || a.key === " ") && a.stopPropagation();
+    }}><div class="preview-card__footer-start">${this.renderOwner()}</div><slot name=actions-end></slot></div></section>`;
+  }
+}
+u("arcgis-portal-group-browser-preview-card", $);
+export {
+  $ as ArcgisPortalGroupBrowserPreviewCard
+};

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

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

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

@@ -0,0 +1,6 @@
+import "@esri/calcite-components/components/calcite-chip";
+import "@esri/calcite-components/components/calcite-icon";
+import "../arcgis-portal-user-popup/index.js";
+import "../arcgis-portal-user-avatar/index.js";
+import "../arcgis-portal-item-type/index.js";
+export * from "./customElement.js";

package/dist/components/arcgis-portal-group-card/customElement.d.ts

@@ -4,8 +4,11 @@ import type PortalGroup from "@arcgis/core/portal/PortalGroup.js";
 import type PortalUser from "@arcgis/core/portal/PortalUser.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { InternalUIAction } from "../../types/tracking.js";
+import type { PortalGroupCardPreviewDetail, PortalGroupCardSelectDetail } from "./types.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
+export type PortalGroupCardProps = Partial<Pick<ArcgisPortalGroupCard, "disabled" | "hideBadges" | "hideDateUpdated" | "hideOwner" | "hideViewableBy" | "indeterminate" | "link" | "linkHandler" | "name" | "newTab" | "preview" | "previewed" | "selected" | "selection" | "showDateCreated" | "showSummary" | "user" | "view">>;
+
 /**
  * A card for displaying portal group information.
  *
@@ -21,8 +24,32 @@ export abstract class ArcgisPortalGroupCard extends LitElement {
    * @default false
    */
   accessor disabled: boolean;
-  /** Partial group JSON from community/groups. */
+  /** Group data from search results or a loaded PortalGroup instance. */
   accessor group: PortalGroup;
+  /**
+   * Hide group badges.
+   *
+   * @default false
+   */
+  accessor hideBadges: boolean;
+  /**
+   * Hide last-updated detail.
+   *
+   * @default false
+   */
+  accessor hideDateUpdated: boolean;
+  /**
+   * Hide the owner information in the card footer.
+   *
+   * @default false
+   */
+  accessor hideOwner: boolean;
+  /**
+   * Hide information on who can view this group.
+   *
+   * @default false
+   */
+  accessor hideViewableBy: boolean;
   /**
    * Show the group as partially selected.
    *
@@ -99,42 +126,18 @@ export abstract class ArcgisPortalGroupCard extends LitElement {
    * @default "none"
    */
   accessor selection: GroupCardSelection;
-  /**
-   * Show group badges.
-   *
-   * @default true
-   */
-  accessor showBadges: boolean;
   /**
    * Show created date detail.
    *
    * @default false
    */
   accessor showDateCreated: boolean;
-  /**
-   * Show last-updated detail.
-   *
-   * @default true
-   */
-  accessor showDateUpdated: boolean;
-  /**
-   * Show the owner information in the card footer.
-   *
-   * @default true
-   */
-  accessor showOwner: boolean;
   /**
    * Show group summary text in card body.
    *
    * @default false
    */
   accessor showSummary: boolean;
-  /**
-   * Show information on who can view this group.
-   *
-   * @default true
-   */
-  accessor showViewableBy: boolean;
   /** Current signed-in portal user. */
   accessor user: PortalUser | undefined;
   /**
@@ -145,14 +148,11 @@ export abstract class ArcgisPortalGroupCard extends LitElement {
   accessor view: GroupCardView;
   restoreFocus(): Promise<void>;
   /** Emitted when preview is requested from card interaction. */
-  readonly arcgisGroupBrowserCardPreview: import("@arcgis/lumina").TargetedEvent<this, PortalGroup | null>;
+  readonly arcgisGroupBrowserCardPreview: import("@arcgis/lumina").TargetedEvent<this, PortalGroupCardPreviewDetail>;
   /** Fires on internal component interaction for telemetry. */
   readonly arcgisGroupBrowserInternalUIAction: import("@arcgis/lumina").TargetedEvent<this, InternalUIAction>;
   /** Emitted when the group is selected or deselected. */
-  readonly arcgisGroupCardSelect: import("@arcgis/lumina").TargetedEvent<this, {
-      group: PortalGroup;
-      selected: boolean;
-  }>;
+  readonly arcgisGroupCardSelect: import("@arcgis/lumina").TargetedEvent<this, PortalGroupCardSelectDetail>;
   readonly "@eventTypes": {
     arcgisGroupBrowserCardPreview: ArcgisPortalGroupCard["arcgisGroupBrowserCardPreview"]["detail"];
     arcgisGroupBrowserInternalUIAction: ArcgisPortalGroupCard["arcgisGroupBrowserInternalUIAction"]["detail"];