@arcgis/portal-components 5.2.0-next.5 → 5.2.0-next.50

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

@@ -0,0 +1,102 @@
+/// <reference path="../../index.d.ts" />
+import type PortalGroup from "@arcgis/core/portal/PortalGroup.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { GroupBadgesPortal } from "./types.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+import type { Chip as Chip } from "@esri/calcite-components/components/calcite-chip";
+
+/** Groups can have special statuses and capabilities. This component derives and renders badges for those states. */
+export abstract class ArcgisPortalGroupBadges extends LitElement {
+  /** @internal */
+  protected _messages: {
+      Collaboration: {
+          title: string;
+          tooltip: string;
+      };
+      FeaturedContent: {
+          title: string;
+          tooltip: string;
+      };
+      Gallery: {
+          title: string;
+          tooltip: string;
+      };
+      OpenData: {
+          title: string;
+          tooltip: string;
+      };
+      SharedUpdate: {
+          title: string;
+          tooltip: string;
+      };
+      Partnered: {
+          title: string;
+          tooltip: string;
+      };
+      AnyOrg: {
+          title: string;
+          tooltip: string;
+      };
+      loading: string;
+  } & T9nMeta<{
+      Collaboration: {
+          title: string;
+          tooltip: string;
+      };
+      FeaturedContent: {
+          title: string;
+          tooltip: string;
+      };
+      Gallery: {
+          title: string;
+          tooltip: string;
+      };
+      OpenData: {
+          title: string;
+          tooltip: string;
+      };
+      SharedUpdate: {
+          title: string;
+          tooltip: string;
+      };
+      Partnered: {
+          title: string;
+          tooltip: string;
+      };
+      AnyOrg: {
+          title: string;
+          tooltip: string;
+      };
+      loading: string;
+  }>;
+  /** Appearance of the chips used for group badges. */
+  accessor appearance: Chip["appearance"] | undefined;
+  /**
+   * Reflected flag that indicates no badges were generated for the current input.
+   *
+   * @default false
+   */
+  accessor empty: boolean;
+  /** PortalGroup instance for deriving badge states from sourceJSON. */
+  accessor group: PortalGroup | undefined;
+  /** Current Portal instance. */
+  accessor portal: GroupBadgesPortal | undefined;
+  /**
+   * Size of each badge chip.
+   *
+   * @default "m"
+   */
+  accessor scale: Chip["scale"];
+  /**
+   * Enables tooltip text for each badge.
+   *
+   * @default false
+   */
+  accessor showTooltips: boolean;
+  /**
+   * Full width shows label text, narrow renders icon only.
+   *
+   * @default "full"
+   */
+  accessor width: "full" | "narrow";
+}

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

@@ -0,0 +1,50 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as g } from "../../chunks/runtime.js";
+import { nothing as m, safeClassMap as h, LitElement as u } from "@arcgis/lumina";
+import { u as b } from "../../chunks/useT9n.js";
+import { html as c, css as f } from "lit";
+import { g as w, a as $, b as x, i as y, c as G, d as v } from "../../chunks/groups.js";
+const O = ({ appearance: a, badgeType: t, class: e, messages: r, scale: i, showTooltip: o, width: n }) => {
+  const s = r[t] ?? { title: t, tooltip: "" }, d = C[t], l = n === "narrow", p = `portal-group-badge-${t}`;
+  return c`<calcite-chip id=${p ?? m} class=${h({
+    badge: !0,
+    "badge--red": t === "SharedUpdate",
+    narrow: l,
+    [`narrow--${i}`]: l,
+    [e]: !0
+  })} .value=${t} tabindex=0 .scale=${i} .appearance=${a} .label=${s.title} .icon=${d}>${l ? null : s.title}</calcite-chip>${o ? c`<calcite-tooltip .referenceElement=${p} close-on-click placement=bottom-start offset-distance=6 offset-skidding=0>${l ? c`<h3 class="tooltip-title">${s.title}</h3>` : null}<p class="tooltip-text">${s.tooltip}</p></calcite-tooltip>` : null}`;
+}, C = {
+  Collaboration: "collaboration",
+  FeaturedContent: "home",
+  Gallery: "images",
+  OpenData: "open-data",
+  SharedUpdate: "configure-editing",
+  Partnered: "partnered-collaboration",
+  AnyOrg: "zoom-to-object"
+}, I = f`:host{display:flex;flex-wrap:wrap}.portal-group-badges__badge{display:inline-block;margin-inline-end:.25rem}.badge{--portal-group-badge-color: var(--calcite-color-brand);border:0}.badge--red{--portal-group-badge-color: var(--calcite-color-status-danger)}.narrow{box-sizing:border-box;width:2rem;--calcite-chip-spacing-unit-l: 0}.image{border-radius:0;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:.5rem}.image svg{color:var(--portal-group-badge-color)}.narrow--s{width:1.5rem;.image{margin-inline-start:0}}.narrow--m{.image{margin-inline-start:0}}.narrow--l{width:2.75rem;.image{margin-inline-start:.25rem}}.tooltip-title{font-size:var(--calcite-font-size--1);color:var(--calcite-color-text-1);margin:0 0 .25rem;padding:0}.tooltip-text{font-size:var(--calcite-font-size--2);color:var(--calcite-color-text-1);margin:0;padding:0}`;
+function S(a, t) {
+  const e = [], r = w(a), i = $(a), o = x(a);
+  return t.id && (r.includes("updateitemcontrol") && e.push("SharedUpdate"), y(a) && i === t.id && e.push("OpenData"), t.featuredItemsGroupQuery === `id:${a.id}` && e.push("Gallery")), (G(a).collaborationInfo?.collaborationId || v(a)) && e.push("Collaboration"), !o && !t.isPortal && i !== "none" && e.push("AnyOrg"), o === "collaboration" && e.push("Partnered"), e.includes("SharedUpdate") && !e.includes("Partnered") && i !== t.id && e.splice(e.indexOf("SharedUpdate"), 1), e;
+}
+class z extends u {
+  constructor() {
+    super(...arguments), this._messages = b({ blocking: !0 }), this.badges = [], this.width = "full", this.scale = "m", this.showTooltips = !1, this.empty = !1;
+  }
+  static {
+    this.properties = { badges: 16, group: 0, portal: 0, width: 1, appearance: 1, scale: 1, showTooltips: 5, empty: 7 };
+  }
+  static {
+    this.styles = I;
+  }
+  willUpdate(t) {
+    (t.has("group") || t.has("portal")) && (this.badges = this.group && this.portal ? S(this.group, this.portal) : [], this.empty = this.badges.length === 0);
+  }
+  render() {
+    const { appearance: t, badges: e, scale: r, showTooltips: i, width: o } = this;
+    return e.map((n) => O({ appearance: t, badgeType: n, class: "portal-group-badges__badge", messages: this._messages, scale: r, showTooltip: i, width: o }));
+  }
+}
+g("arcgis-portal-group-badges", z);
+export {
+  z as ArcgisPortalGroupBadges
+};

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

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

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

@@ -0,0 +1,3 @@
+import "@esri/calcite-components/components/calcite-chip";
+import "@esri/calcite-components/components/calcite-tooltip";
+export * from "./customElement.js";

package/dist/components/arcgis-portal-group-badges/types.d.ts

@@ -0,0 +1,3 @@
+import type Portal from "@arcgis/core/portal/Portal.js";
+
+export type GroupBadgesPortal = Partial<Pick<Portal, "featuredItemsGroupQuery" | "homePageFeaturedContent" | "id" | "isPortal">>;

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

@@ -0,0 +1,167 @@
+/// <reference path="../../index.d.ts" />
+import type Portal from "@arcgis/core/portal/Portal.js";
+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 { T9nMeta } from "@arcgis/lumina/controllers";
+
+/**
+ * A card for displaying portal group information.
+ *
+ * @slot [content-top] - Inserted content appears above the card body.
+ * @slot [content-end] - Inserted content appears beneath the card details.
+ * @slot [actions-start] - Inserted content appears in the footer before owner information.
+ * @slot [actions-end] - Inserted content appears in the footer end area.
+ */
+export abstract class ArcgisPortalGroupCard extends LitElement {
+  /**
+   * Disable interaction when true.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /** Partial group JSON from community/groups. */
+  accessor group: PortalGroup;
+  /**
+   * Show the group as partially selected.
+   *
+   * @default false
+   */
+  accessor indeterminate: boolean;
+  /** Making this non-empty turns the top section into a link. */
+  accessor link: string | undefined;
+  /** Optional callback that runs when the link is activated. */
+  accessor linkHandler: ((group: PortalGroup) => void) | undefined;
+  /** @internal */
+  protected messages: {
+      lastUpdated: string;
+      created: string;
+      viewableBy: string;
+      everyone: string;
+      organization: string;
+      groupMembers: string;
+      select: string;
+      preview: string;
+      hidePreview: string;
+      openInPortal: string;
+      badges: {
+          collaboration: string;
+          viewOnly: string;
+          autoJoin: string;
+          hiddenMembers: string;
+      };
+  } & T9nMeta<{
+      lastUpdated: string;
+      created: string;
+      viewableBy: string;
+      everyone: string;
+      organization: string;
+      groupMembers: string;
+      select: string;
+      preview: string;
+      hidePreview: string;
+      openInPortal: string;
+      badges: {
+          collaboration: string;
+          viewOnly: string;
+          autoJoin: string;
+          hiddenMembers: string;
+      };
+  }>;
+  /** Name of the radio button control for accessibility. */
+  accessor name: string | undefined;
+  /**
+   * Open link in new tab when true.
+   *
+   * @default false
+   */
+  accessor newTab: boolean;
+  /** Current portal instance. */
+  accessor portal: Portal;
+  /** Optionally emit preview behavior on click of card. */
+  accessor preview: GroupCardPreview | undefined;
+  /**
+   * Whether this card is currently previewed by parent browser state.
+   *
+   * @default false
+   */
+  accessor previewed: boolean;
+  /**
+   * Set to true to mark group as selected.
+   *
+   * @default false
+   */
+  accessor selected: boolean;
+  /**
+   * Type of selection behavior.
+   *
+   * @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;
+  /**
+   * Select which view to use for the card.
+   *
+   * @default "list"
+   */
+  accessor view: GroupCardView;
+  restoreFocus(): Promise<void>;
+  /** Emitted when preview is requested from card interaction. */
+  readonly arcgisGroupBrowserCardPreview: import("@arcgis/lumina").TargetedEvent<this, PortalGroup | null>;
+  /** 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 "@eventTypes": {
+    arcgisGroupBrowserCardPreview: ArcgisPortalGroupCard["arcgisGroupBrowserCardPreview"]["detail"];
+    arcgisGroupBrowserInternalUIAction: ArcgisPortalGroupCard["arcgisGroupBrowserInternalUIAction"]["detail"];
+    arcgisGroupCardSelect: ArcgisPortalGroupCard["arcgisGroupCardSelect"]["detail"];
+  };
+}
+
+export type GroupCardView = "compact" | "list";
+
+export type GroupCardSelection = "multiple" | "none" | "single";
+
+export type GroupCardPreview = "action" | "top";

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

@@ -0,0 +1,183 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as k } from "../../chunks/runtime.js";
+import { css as y, html as r } from "lit";
+import { LitElement as C, createEvent as w, safeClassMap as g, nothing as l } from "@arcgis/lumina";
+import { createRef as F, ref as $ } from "lit/directives/ref.js";
+import { u as z } from "../../chunks/useT9n.js";
+import { b as o } from "../../chunks/ui.js";
+import { a as E } from "../../chunks/functionalities.js";
+const B = y`:host{display:block;min-width:0}.group-card{position:relative;display:flex;height:100%;flex-direction:column;color:var(--calcite-color-text-1);opacity:0;box-shadow:none;transition-duration:.15s;outline-color:transparent;background-color:var(--calcite-color-foreground-1);transition-property:background-color,outline,outline-offset,opacity;border:1px solid var(--calcite-color-border-3);&:focus{z-index:10;outline:2px solid var(--calcite-color-brand);outline-offset:-2px}}.group-card--loaded{opacity:1}.group-card--selected{border-color:var(--calcite-color-brand)}.group-card--hoverable{cursor:pointer}.group-card--disabled{opacity:.5}.group-card__top{padding:1rem}.group-card__upper{flex:1 1 0%;background-color:var(--calcite-color-foreground-1);transition:all var(--calcite-animation-timing) ease-in-out 0s,outline 0s,outline-offset 0s}.group-card__upper:hover{background-color:var(--calcite-color-background)}.group-card__upper--compact{display:flex;align-items:center;padding:.5rem .75rem}.group-card__upper--link{color:var(--calcite-color-text-1);text-decoration-line:none;outline-color:transparent;&:focus{z-index:10;outline:2px solid var(--calcite-color-brand);outline-offset:2px}}.group-card__title__span{position:relative;display:inline;border-style:none;background-color:transparent;padding:0;transition:all var(--calcite-animation-timing) ease-in-out 0s,outline 0s,outline-offset 0s;background-image:linear-gradient(transparent,transparent);background-position-x:0%,100%;background-position-y:min(1.25em,100%);background-repeat:no-repeat,no-repeat;background-size:100% 1px,100% 1px}.group-card--previewed .group-card__title__span{background-image:linear-gradient(var(--calcite-color-text-3),var(--calcite-color-text-3))}.group-card__content{display:flex;min-width:0;flex:1 1 0%;flex-direction:column}.group-card__details{display:flex;flex-direction:row;flex-wrap:wrap}.group-card__details--stacked{flex-direction:column}.group-card__detail{font-size:.875rem;color:var(--calcite-color-text-2)}.group-card__detail__icon{margin-inline-end:.5rem}.group-card__footer{margin-top:auto;display:flex;align-items:center;background-color:var(--calcite-color-foreground-1);padding:.5rem 1rem;border-top:1px solid var(--calcite-color-border-3)}.group-card__footer__start{display:flex;min-width:0;flex:1 1 0%;flex-direction:row;align-items:center;overflow:hidden;margin-inline-end:.75rem}.group-card__profile-wrap{max-width:100%;padding:.25rem}.group-card__divider{display:flex;align-items:center;flex:0 0 auto}.group-card__divider:not([empty]):before{content:"";height:1.25rem;width:1px;background-color:var(--calcite-color-border-1);margin-inline:.75rem}.group-card__details--stacked .group-card__divider:before{display:none}.group-card__divider:first-child:before{display:none}.group-card-flex{display:flex}.group-card-flex-1{min-width:0;flex:1 1 0%}.screen-readers-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.group-card__input{margin-inline-end:1rem;margin-top:.125rem}.group-card__title{margin:0;overflow-wrap:break-word;padding:0;font-size:1rem;font-weight:500;line-height:1.375}.group-card__title--compact{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline-end:1rem}.group-card__summary{margin:.25rem 0;flex:1 1 0%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;font-size:.875rem;line-height:1.25}.group-card__thumbnail{margin-inline-end:1rem}.group-card__thumbnail--compact{width:2.75rem;height:2.75rem}.group-card__badges{margin-top:.25rem}.group-card__owner{min-width:0}.group-card--xs,.group-card--xxs{.group-card__top{padding:.75rem}.group-card__title--padded{margin-bottom:.25rem}.group-card__footer{padding:.25rem .75rem}.group-card__detail{margin:.25rem 0;font-size:.75rem;line-height:1.35}.group-card__title{font-size:.875rem}}.group-card--xxs{.group-card__thumbnail{padding-inline-start:.75rem;width:4.25rem}}.group-card--xs{.group-card__thumbnail{padding-inline-start:.5rem;width:5rem}}`;
+class D extends C {
+  constructor() {
+    super(...arguments), this.messages = z({ blocking: !0 }), this.sectionEl = F(), this.resizeObserver = null, this.handleCardClick = (e) => {
+      if (!(this.link || this.disabled || e?.target?.closest(".group-card__footer"))) {
+        if (this.preview === "top") {
+          this.arcgisGroupBrowserCardPreview.emit(this.group);
+          return;
+        }
+        if (this.selection === "single") {
+          this.selected = !0, this.arcgisGroupCardSelect.emit({ group: this.group, selected: !0 });
+          return;
+        }
+        this.selection === "multiple" && (this.selected = !this.selected, this.arcgisGroupCardSelect.emit({ group: this.group, selected: this.selected }));
+      }
+    }, this.formFactor = "lg", this.width = 0, this.hover = !1, this.selected = !1, this.indeterminate = !1, this.view = "list", this.selection = "none", this.previewed = !1, this.showOwner = !0, this.showDateUpdated = !0, this.showDateCreated = !1, this.showViewableBy = !0, this.showSummary = !1, this.showBadges = !0, this.newTab = !1, this.disabled = !1, this.arcgisGroupBrowserCardPreview = w(), this.arcgisGroupCardSelect = w(), this.arcgisGroupBrowserInternalUIAction = w(), this.loaded = !1;
+  }
+  static {
+    this.properties = { formFactor: 16, width: 16, hover: 16, group: 0, user: 0, portal: 0, selected: 7, indeterminate: 7, view: 1, selection: 1, preview: 1, previewed: 5, name: 1, showOwner: 5, showDateUpdated: 5, showDateCreated: 5, showViewableBy: 5, showSummary: 5, showBadges: 5, link: 1, linkHandler: 0, newTab: 5, disabled: 7, loaded: 16 };
+  }
+  static {
+    this.styles = B;
+  }
+  async restoreFocus() {
+    if (this.link) {
+      this.renderRoot.querySelector(".group-card__upper")?.focus();
+      return;
+    }
+    this.preview === "top" && this.sectionEl.value && this.sectionEl.value.focus();
+  }
+  connectedCallback() {
+    super.connectedCallback(), !(typeof ResizeObserver > "u") && (this.resizeObserver = new ResizeObserver((e) => {
+      const t = e[0]?.contentRect.width ?? 0;
+      this.updateFormFactor(t);
+    }));
+  }
+  firstUpdated() {
+    if (this.sectionEl.value && this.resizeObserver) {
+      this.resizeObserver.observe(this.sectionEl.value);
+      const e = this.sectionEl.value.getBoundingClientRect().width;
+      this.updateFormFactor(e);
+    }
+    requestAnimationFrame(() => {
+      this.loaded = !0;
+    });
+  }
+  disconnectedCallback() {
+    this.resizeObserver?.disconnect(), this.resizeObserver = null, super.disconnectedCallback();
+  }
+  updateFormFactor(e) {
+    if (this.width = e, e > o.md) {
+      this.formFactor = "lg";
+      return;
+    }
+    if (e > o.sm) {
+      this.formFactor = "md";
+      return;
+    }
+    if (e > o.xs) {
+      this.formFactor = "sm";
+      return;
+    }
+    if (e > o.xxs) {
+      this.formFactor = "xs";
+      return;
+    }
+    this.formFactor = "xxs";
+  }
+  getAccessInfo(e) {
+    const { messages: t } = this, c = {
+      public: {
+        icon: "globe",
+        text: t.everyone
+      },
+      private: {
+        icon: "lock",
+        text: t.groupMembers
+      },
+      org: {
+        icon: "organization",
+        text: t.organization
+      }
+    };
+    return c[e] ?? c.private;
+  }
+  formatDate(e) {
+    return e ? new Intl.DateTimeFormat(void 0, { dateStyle: "medium" }).format(e) : "";
+  }
+  getThumbnailGroup(e) {
+    return {
+      id: e.id ?? void 0,
+      thumbnailUrl: e.thumbnailUrl ?? void 0,
+      title: e.title ?? void 0
+    };
+  }
+  renderSelectionInput() {
+    const { selection: e, selected: t, disabled: c, name: h, messages: _, group: a } = this;
+    switch (e) {
+      case "single":
+        return r`<calcite-radio-button class="group-card__input" .checked=${t} .disabled=${c} .value=${a.title ?? ""} .name=${h} @click=${(s) => s.stopPropagation()} @calciteRadioButtonChange=${() => {
+          this.arcgisGroupCardSelect.emit({ group: a, selected: !t });
+        }}><span class="screen-readers-only">${(_.select ?? "").replace("${title}", a.title ?? "")}</span></calcite-radio-button>`;
+      case "multiple":
+        return r`<calcite-checkbox class="group-card__input" .checked=${t} .disabled=${c} .indeterminate=${this.indeterminate} @click=${(s) => s.stopPropagation()} @calciteCheckboxChange=${() => {
+          const s = !this.selected;
+          this.selected = s, this.arcgisGroupCardSelect.emit({ group: a, selected: s });
+        }}><span class="screen-readers-only">${a.title}</span></calcite-checkbox>`;
+      case "none":
+        return null;
+      default:
+        return E(e);
+    }
+  }
+  renderCompactView() {
+    const { group: e, selection: t, formFactor: c, loaded: h, disabled: _, link: a, showBadges: s, newTab: m, linkHandler: d, handleCardClick: n, selected: p } = this, f = this.getThumbnailGroup(e);
+    return r`<section class=${g({
+      "group-card": !0,
+      "group-card--hoverable": t !== "none",
+      "group-card--selected": p,
+      "group-card--disabled": _,
+      "group-card--loaded": h,
+      [`group-card--${c}`]: !0
+    })} @click=${a ? void 0 : n} @mouseover=${() => {
+      this.hover = !0;
+    }} @mouseout=${() => {
+      this.hover = !1;
+    }} ${$(this.sectionEl)}>${a ? r`<a class="group-card__upper group-card__upper--compact group-card__upper--link" href=${a ?? l} target=${(m ? "_blank" : void 0) ?? l} rel=${(m ? "noopener noreferrer" : void 0) ?? l} @click=${(u) => {
+      d && !u.ctrlKey && !u.metaKey && (u.preventDefault(), d(this.group));
+    }}>${r`${this.renderSelectionInput()}<div class="group-card__thumbnail group-card__thumbnail--compact"><arcgis-portal-group-thumbnail .group=${f} .portal=${this.portal} scale=l></arcgis-portal-group-thumbnail></div><div class="group-card-flex-1"><h3 class="group-card__title group-card__title--compact"><span class="group-card__title__span">${e.title}</span></h3>${s && r`<arcgis-portal-group-badges .group=${e} .portal=${this.portal} class="group-card__badges--compact" scale=s show-tooltips width=narrow></arcgis-portal-group-badges>` || ""}</div><slot name=content-end></slot>`}</a>` : r`<div class="group-card__upper group-card__upper--compact">${this.renderSelectionInput()}<div class="group-card__thumbnail group-card__thumbnail--compact"><arcgis-portal-group-thumbnail .group=${f} .portal=${this.portal} scale=l></arcgis-portal-group-thumbnail></div><div class="group-card-flex-1"><h3 class="group-card__title group-card__title--compact"><span class="group-card__title__span">${e.title}</span></h3>${s && r`<arcgis-portal-group-badges .group=${e} .portal=${this.portal} class="group-card__badges--compact" scale=s show-tooltips width=narrow></arcgis-portal-group-badges>` || ""}</div><slot name=content-end></slot></div>`}</section>`;
+  }
+  render() {
+    const { group: e, selection: t, formFactor: c, loaded: h, disabled: _, link: a, showDateCreated: s, showDateUpdated: m, showSummary: d, showBadges: n } = this;
+    if (!e || !this.messages._lang)
+      return;
+    if (this.view === "compact")
+      return this.renderCompactView();
+    const p = this.getAccessInfo(e.access ?? "private"), f = this.getThumbnailGroup(e), u = this.width < o.sm, v = this.preview === "top" && !a, { previewed: x } = this;
+    return r`<section class=${g({
+      "group-card": !0,
+      "group-card--hoverable": t !== "none",
+      "group-card--selected": this.selected,
+      "group-card--disabled": _,
+      "group-card--loaded": h,
+      [`group-card--${c}`]: !0,
+      "group-card--previewed": x
+    })} @click=${a ? void 0 : this.handleCardClick} tabindex=${(v ? 0 : void 0) ?? l} .role=${v ? "button" : void 0} aria-haspopup=${(v ? "dialog" : void 0) ?? l} @keydown=${(i) => {
+      v && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), this.handleCardClick());
+    }} ${$(this.sectionEl)}><slot name=content-top></slot>${a ? r`<a class="group-card__upper group-card__upper--link" href=${this.link ?? l} target=${(this.newTab ? "_blank" : void 0) ?? l} rel=${(this.newTab ? "noopener noreferrer" : void 0) ?? l} @mouseover=${() => {
+      this.hover = !0;
+    }} @mouseout=${() => {
+      this.hover = !1;
+    }} @click=${(i) => {
+      if (this.linkHandler && !i.ctrlKey && !i.metaKey) {
+        i.preventDefault(), this.linkHandler(this.group);
+        return;
+      }
+      const b = i.target;
+      b instanceof HTMLElement && b.closest(".group-card__footer") && i.preventDefault();
+    }}>${r`<div class="group-card-flex group-card__top">${this.renderSelectionInput()}<div class="group-card__thumbnail"><arcgis-portal-group-thumbnail .group=${f} .portal=${this.portal} scale=xl></arcgis-portal-group-thumbnail></div><div class="group-card-flex-1"><div class="group-card-flex"><div class="group-card__content"><h3 class=${g({ "group-card__title": !0, "group-card__title--padded": d && !!e.snippet })}><span class="group-card__title__span">${e.title}</span></h3>${d && !!e.snippet && r`<p class="group-card__summary">${e.snippet.length > 250 ? `${e.snippet.substring(0, 250)}...` : e.snippet}</p>` || ""}<div class=${g({ "group-card__details": !0, "group-card__details--stacked": u })}>${s && !!e.created && r`<span class="group-card__detail group-card__divider">${(this.messages.created ?? "").replace("${date}", this.formatDate(e.created))}</span>` || ""}${m && !!e.modified && r`<span class="group-card__detail group-card__divider">${(this.messages.lastUpdated ?? "").replace("${date}", this.formatDate(e.modified))}</span>` || ""}${this.showViewableBy && r`<span class="group-card__detail group-card__divider"><calcite-icon class="group-card__detail__icon" .icon=${p.icon} scale=s></calcite-icon>${(this.messages.viewableBy ?? "").replace("${level}", p.text)}</span>` || ""}${n && this.width >= o.sm && r`<arcgis-portal-group-badges .appearance=${this.hover ? "outline-fill" : "solid"} .group=${e} .portal=${this.portal} .width=${this.width < o.md ? "narrow" : "full"} class="group-card__badges group-card__detail group-card__divider" scale=s show-tooltips></arcgis-portal-group-badges>` || ""}</div>${n && this.width < o.sm && r`<arcgis-portal-group-badges .appearance=${this.hover ? "outline-fill" : "solid"} .group=${e} .portal=${this.portal} .width=${this.width < o.xxs ? "narrow" : "full"} class="group-card__badges" scale=s show-tooltips></arcgis-portal-group-badges>` || ""}<slot name=content-end></slot></div></div></div></div>`}</a>` : r`<div class="group-card__upper" @mouseover=${() => {
+      this.hover = !0;
+    }} @mouseout=${() => {
+      this.hover = !1;
+    }}><div class="group-card-flex group-card__top">${this.renderSelectionInput()}<div class="group-card__thumbnail"><arcgis-portal-group-thumbnail .group=${f} .portal=${this.portal} scale=xl></arcgis-portal-group-thumbnail></div><div class="group-card-flex-1"><div class="group-card-flex"><div class="group-card__content"><h3 class=${g({ "group-card__title": !0, "group-card__title--padded": d && !!e.snippet })}><span class="group-card__title__span">${e.title}</span></h3>${d && !!e.snippet && r`<p class="group-card__summary">${e.snippet.length > 250 ? `${e.snippet.substring(0, 250)}...` : e.snippet}</p>` || ""}<div class=${g({ "group-card__details": !0, "group-card__details--stacked": u })}>${s && !!e.created && r`<span class="group-card__detail group-card__divider">${(this.messages.created ?? "").replace("${date}", this.formatDate(e.created))}</span>` || ""}${m && !!e.modified && r`<span class="group-card__detail group-card__divider">${(this.messages.lastUpdated ?? "").replace("${date}", this.formatDate(e.modified))}</span>` || ""}${this.showViewableBy && r`<span class="group-card__detail group-card__divider"><calcite-icon class="group-card__detail__icon" .icon=${p.icon} scale=s></calcite-icon>${(this.messages.viewableBy ?? "").replace("${level}", p.text)}</span>` || ""}${n && this.width >= o.sm && r`<arcgis-portal-group-badges .appearance=${this.hover ? "outline-fill" : "solid"} .group=${e} .portal=${this.portal} .width=${this.width < o.md ? "narrow" : "full"} class="group-card__badges group-card__detail group-card__divider" scale=s show-tooltips></arcgis-portal-group-badges>` || ""}</div>${n && this.width < o.sm && r`<arcgis-portal-group-badges .appearance=${this.hover ? "outline-fill" : "solid"} .group=${e} .portal=${this.portal} .width=${this.width < o.xxs ? "narrow" : "full"} class="group-card__badges" scale=s show-tooltips></arcgis-portal-group-badges>` || ""}<slot name=content-end></slot></div></div></div></div></div>`}<div class="group-card__footer"><div class="group-card__footer__start"><slot name=actions-start></slot>${this.showOwner && r`<div class="group-card__profile-wrap"><arcgis-portal-user-popup class="group-card__owner" .portal=${this.portal} .username=${e.owner ?? void 0} underline @arcgisUserPopupInternalUIAction=${({ detail: i, stopPropagation: b }) => {
+      b(), this.arcgisGroupBrowserInternalUIAction.emit(i);
+    }}></arcgis-portal-user-popup></div>` || ""}</div><div>${this.preview === "action" && r`<calcite-button scale=s appearance=outline-fill kind=neutral @click=${() => {
+      this.arcgisGroupBrowserCardPreview.emit(this.group);
+    }}>${this.previewed ? this.messages.hidePreview : this.messages.preview}</calcite-button>` || ""}<div @click=${(i) => {
+      i.stopPropagation();
+    }}><slot name=actions-end></slot></div></div></div></section>`;
+  }
+}
+k("arcgis-portal-group-card", D);
+export {
+  D as ArcgisPortalGroupCard
+};

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

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

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

@@ -0,0 +1,8 @@
+import "@esri/calcite-components/components/calcite-radio-button";
+import "@esri/calcite-components/components/calcite-checkbox";
+import "../arcgis-portal-group-thumbnail/index.js";
+import "../arcgis-portal-group-badges/index.js";
+import "@esri/calcite-components/components/calcite-icon";
+import "../arcgis-portal-user-popup/index.js";
+import "@esri/calcite-components/components/calcite-button";
+export * from "./customElement.js";

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

@@ -0,0 +1,32 @@
+/// <reference path="../../index.d.ts" />
+import type Portal from "@arcgis/core/portal/Portal.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Scale } from "../../types/ui.js";
+
+export abstract class ArcgisPortalGroupThumbnail extends LitElement {
+  /** Group data used to render thumbnail image or fallback initials. */
+  accessor group: GroupThumbnail | undefined;
+  /** Current portal instance used for tokenized thumbnail URL generation. */
+  accessor portal: Portal | undefined;
+  /**
+   * Component scale.
+   *
+   * @default "m"
+   */
+  accessor scale: GroupThumbnailScale;
+  /**
+   * Whether to show tooltip on hover/focus.
+   *
+   * @default false
+   */
+  accessor tooltip: boolean;
+}
+
+export type GroupThumbnailScale = Scale | "xl";
+
+export type GroupThumbnail = {
+  id?: string;
+  thumbnail?: string;
+  thumbnailUrl?: string;
+  title?: string;
+};