@arcgis/portal-components 5.2.0-next.6 → 5.2.0-next.60

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

@@ -0,0 +1,92 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as w } from "../../chunks/runtime.js";
+import { formatDate as v } from "@arcgis/core/intl.js";
+import { LitElement as _, createEvent as n, nothing as o, safeClassMap as p } from "@arcgis/lumina";
+import { css as g, html as r } from "lit";
+import { createRef as h, ref as m } from "lit/directives/ref.js";
+import { g as f } from "../../chunks/url.js";
+import { g as b } from "../../chunks/thumbnail.js";
+const y = (c) => c.sourceJSON ?? c, $ = g`: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 x extends _ {
+  constructor() {
+    super(...arguments), this.sectionEl = h(), this.linkEl = h(), this.cachedOwner = "", this.cachedStatus = "", this.cachedTitle = "-", this.cachedType = "-", this.cachedSummary = "", this.cachedUpdatedText = "", this.cachedThumbnailUri = null, this.handleCardClick = () => {
+      const { link: e, item: i } = this;
+      e || this.arcgisGroupBrowserPreviewCardSelect.emit(i);
+    }, this.isLoaded = !1, this.imageError = !1, this.newTab = !1, this.showThumbnail = !0, this.showOwner = !0, this.showItemType = !0, this.showDateUpdated = !1, this.showSummary = !1, this.showBadges = !1, this.showOwnerPopup = !1, this.interactive = !1, this.arcgisGroupBrowserInternalUIAction = n(), this.arcgisGroupBrowserPreviewCardSelect = n();
+  }
+  static {
+    this.properties = { isLoaded: 16, imageError: 16, item: 0, portal: 0, user: 0, baseUrl: 1, link: 1, newTab: 5, showThumbnail: 5, showOwner: 5, showItemType: 5, showDateUpdated: 5, showSummary: 5, showBadges: 5, showOwnerPopup: 5, interactive: 5 };
+  }
+  static {
+    this.styles = $;
+  }
+  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 = f({ portal: this.portal });
+    return this.baseUrl || `${e}/home`;
+  }
+  getItemThumbnailUri(e) {
+    return e.thumbnailUrl ? e.thumbnailUrl : this.portal ? b(this.portal, e) : null;
+  }
+  updateCachedItemData() {
+    const { item: e, showSummary: i, showDateUpdated: s } = this, t = y(e), a = t.snippet?.trim() || "";
+    this.cachedOwner = t.owner || "", this.cachedStatus = t.contentStatus || "", this.cachedTitle = t.title?.trim() || e.title?.trim() || "-", this.cachedType = t.type?.trim() || "-", this.cachedSummary = i ? a.length > 250 ? `${a.slice(0, 250)}...` : a : "", this.cachedUpdatedText = s ? v(t.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.showThumbnail)
+      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.showOwner || !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=${(i) => {
+      i.stopPropagation(), this.arcgisGroupBrowserInternalUIAction.emit(i.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: i, showItemType: s, showDateUpdated: t } = this, a = this.cachedTitle, u = this.cachedType, l = this.cachedSummary, d = this.cachedUpdatedText;
+    return r`<div class="preview-card__body"><h3 class=${p({
+      "preview-card__title": !0,
+      "preview-card__title--padded": s || i && !!l
+    })}><span class="preview-card__title-span">${a}</span></h3>${i && l ? r`<p class="preview-card__summary">${l}</p>` : null}${s ? 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">${t && d ? r`<span class="preview-card__detail preview-card__divider">${d}</span>` : null}${this.renderStatusBadge()}${s ? null : r`<p class="preview-card__meta">${u}</p>`}</div></div>`;
+  }
+  render() {
+    const { item: e, interactive: i, link: s, newTab: t } = this;
+    return r`<section class=${p({
+      "preview-card": !0,
+      "preview-card--hoverable": i,
+      "preview-card--loaded": this.isLoaded
+    })} .part=${"card"} tabindex=${(i ? 0 : void 0) ?? o} @click=${s ? void 0 : this.handleCardClick} ${m(this.sectionEl)}><slot name=content-top></slot>${s ? r`<a class="preview-card__upper preview-card__upper--link" href=${s ?? o} target=${(t ? "_blank" : void 0) ?? o} rel=${(t ? "noopener noreferrer" : void 0) ?? o} ${m(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>`;
+  }
+}
+w("arcgis-portal-group-browser-preview-card", x);
+export {
+  x 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

@@ -0,0 +1,169 @@
+/// <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";
+
+export type PortalGroupCardProps = Partial<Pick<ArcgisPortalGroupCard, "disabled" | "indeterminate" | "link" | "linkHandler" | "name" | "newTab" | "preview" | "previewed" | "selected" | "selection" | "showBadges" | "showDateCreated" | "showDateUpdated" | "showOwner" | "showSummary" | "showViewableBy" | "user" | "view">>;
+
+/**
+ * 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;
+  /** Group data from search results or a loaded PortalGroup instance. */
+  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,163 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as v } from "../../chunks/runtime.js";
+import { css as b, html as r } from "lit";
+import { substitute as h, formatDate as _ } from "@arcgis/core/intl.js";
+import { LitElement as w, createEvent as m, safeClassMap as g, nothing as d } from "@arcgis/lumina";
+import { createRef as $, ref as f } from "lit/directives/ref.js";
+import { u as x } from "../../chunks/useT9n.js";
+import { a as k } from "../../chunks/functionalities.js";
+import { g as y } from "../../chunks/groups2.js";
+const C = b`:host{display:block;min-width:0;container-type:inline-size;container-name:portal-group-card}.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:.75rem}.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:flex-start;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:column;flex-wrap:wrap}.group-card__details .group-card__divider:before{display:none}.group-card__detail{font-size:.75rem;line-height:1.35;color:var(--calcite-color-text-2);margin:.25rem 0}.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:.25rem .75rem;border-top:1px solid var(--calcite-color-border-3)}.group-card__footer__start{display:flex;min-width:0;flex:1 1 0%;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;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__input--compact{height:100%;display:flex;align-items:center}.group-card__title{margin:0;overflow-wrap:break-word;padding:0;font-size:.875rem;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__title--padded{margin-bottom:.25rem}.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;padding-inline-start:.75rem;width:4.25rem}.group-card__thumbnail--compact{width:2.75rem;height:2.75rem;flex-shrink:0}.group-card__upper--compact .group-card-flex-1{display:flex;justify-content:space-between;align-items:center;gap:.25rem;height:100%}.group-card__badges--compact{margin-top:.125rem;max-width:100%}.group-card__badges{margin-top:.25rem}.group-card__owner{min-width:0}@container portal-group-card (min-width: 321px){.group-card__thumbnail{padding-inline-start:.5rem;width:5rem}}@container portal-group-card (min-width: 641px){.group-card__top{padding:1rem}.group-card__title{font-size:1rem}.group-card__title--padded{margin-bottom:0}.group-card__detail{font-size:.875rem;line-height:normal;margin:0}.group-card__footer{padding:.5rem 1rem}.group-card__thumbnail{padding-inline-start:0;width:auto}}@container portal-group-card (min-width: 769px){.group-card__details{flex-direction:row}.group-card__details .group-card__divider:not([empty])+.group-card__divider:not([empty]):before{display:block}}`;
+class B extends w {
+  constructor() {
+    super(...arguments), this.messages = x({ blocking: !0 }), this.sectionEl = $(), 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.hover = !1, this.isLoaded = !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 = m(), this.arcgisGroupBrowserInternalUIAction = m(), this.arcgisGroupCardSelect = m();
+  }
+  static {
+    this.properties = { hover: 16, isLoaded: 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 };
+  }
+  static {
+    this.styles = C;
+  }
+  async restoreFocus() {
+    if (this.link) {
+      this.renderRoot.querySelector(".group-card__upper")?.focus();
+      return;
+    }
+    this.preview === "top" && this.sectionEl.value && this.sectionEl.value.focus();
+  }
+  firstUpdated() {
+    requestAnimationFrame(() => {
+      this.isLoaded = !0;
+    });
+  }
+  getAccessInfo(e) {
+    const { messages: t } = this, o = {
+      public: {
+        icon: "globe",
+        text: t.everyone
+      },
+      private: {
+        icon: "lock",
+        text: t.groupMembers
+      },
+      org: {
+        icon: "organization",
+        text: t.organization
+      }
+    };
+    return o[e] ?? o.private;
+  }
+  getThumbnailGroup(e) {
+    return {
+      id: e.id ?? "",
+      title: e.title ?? "",
+      thumbnail: y(e).thumbnail,
+      thumbnailUrl: e.thumbnailUrl ?? void 0
+    };
+  }
+  renderCompactBadges(e) {
+    return this.showBadges ? r`<arcgis-portal-group-badges appearance=solid .group=${e} .portal=${this.portal} class="group-card__badges--compact" scale=s show-tooltips width=narrow></arcgis-portal-group-badges>` : null;
+  }
+  renderBadges(e) {
+    return this.showBadges ? r`<arcgis-portal-group-badges .appearance=${this.hover ? "outline-fill" : "solid"} .group=${e} .portal=${this.portal} width=full class="group-card__badges group-card__badges--responsive group-card__detail group-card__divider" scale=s show-tooltips></arcgis-portal-group-badges>` : null;
+  }
+  renderDetails(e, t) {
+    return r`<div class="group-card__details">${this.showDateCreated && !!e.created && r`<span class="group-card__detail group-card__divider">${h(this.messages.created ?? "", {
+      date: _(e.created, { dateStyle: "medium" })
+    })}</span>` || ""}${this.showDateUpdated && !!e.modified && r`<span class="group-card__detail group-card__divider">${h(this.messages.lastUpdated ?? "", {
+      date: _(e.modified, { dateStyle: "medium" })
+    })}</span>` || ""}${this.showViewableBy && r`<span class="group-card__detail group-card__divider"><calcite-icon class="group-card__detail__icon" .icon=${t.icon} scale=s></calcite-icon>${h(this.messages.viewableBy ?? "", { level: t.text })}</span>` || ""}${this.renderBadges(e)}</div>`;
+  }
+  renderListContent(e, t, o) {
+    return r`<div class="group-card-flex group-card__top">${this.renderSelectionInput()}<div class="group-card__thumbnail"><arcgis-portal-group-thumbnail .group=${t} .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": this.showSummary && !!e.snippet })}><span class="group-card__title__span">${e.title}</span></h3>${this.showSummary && !!e.snippet && r`<p class="group-card__summary">${e.snippet.length > 250 ? `${e.snippet.substring(0, 250)}...` : e.snippet}</p>` || ""}${this.renderDetails(e, o)}<slot name=content-end></slot></div></div></div></div>`;
+  }
+  renderSelectionInput() {
+    const { selection: e, selected: t, disabled: o, name: p, messages: c, group: s } = this, n = this.view === "compact";
+    switch (e) {
+      case "single":
+        return r`<calcite-radio-button class=${g({ "group-card__input": !0, "group-card__input--compact": n })} .checked=${t} .disabled=${o} .value=${s.title ?? ""} .name=${p} @click=${(a) => a.stopPropagation()} @calciteRadioButtonChange=${() => {
+          this.arcgisGroupCardSelect.emit({ group: s, selected: !t });
+        }}><span class="screen-readers-only">${h(c.select ?? "", { title: s.title ?? "" })}</span></calcite-radio-button>`;
+      case "multiple":
+        return r`<calcite-checkbox class=${g({ "group-card__input": !0, "group-card__input--compact": n })} .checked=${t} .disabled=${o} .indeterminate=${this.indeterminate} @click=${(a) => a.stopPropagation()} @calciteCheckboxChange=${() => {
+          const a = !this.selected;
+          this.selected = a, this.arcgisGroupCardSelect.emit({ group: s, selected: a });
+        }}><span class="screen-readers-only">${s.title}</span></calcite-checkbox>`;
+      case "none":
+        return null;
+      default:
+        return k(e);
+    }
+  }
+  renderCompactView() {
+    const { group: e, selection: t, isLoaded: o, disabled: p, link: c, newTab: s, linkHandler: n, handleCardClick: a, selected: u } = this, i = this.getThumbnailGroup(e);
+    return r`<section class=${g({
+      "group-card": !0,
+      "group-card--hoverable": t !== "none",
+      "group-card--selected": u,
+      "group-card--disabled": p,
+      "group-card--loaded": o
+    })} @click=${c ? void 0 : a} @mouseover=${() => {
+      this.hover = !0;
+    }} @mouseout=${() => {
+      this.hover = !1;
+    }} ${f(this.sectionEl)}>${c ? r`<a class="group-card__upper group-card__upper--compact group-card__upper--link" href=${c ?? d} target=${(s ? "_blank" : void 0) ?? d} rel=${(s ? "noopener noreferrer" : void 0) ?? d} @click=${(l) => {
+      n && !l.ctrlKey && !l.metaKey && (l.preventDefault(), n(this.group));
+    }}>${r`${this.renderSelectionInput()}<div class="group-card__thumbnail group-card__thumbnail--compact"><arcgis-portal-group-thumbnail .group=${i} .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>${this.renderCompactBadges(e)}</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=${i} .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>${this.renderCompactBadges(e)}</div><slot name=content-end></slot></div>`}</section>`;
+  }
+  render() {
+    const { group: e, selection: t, isLoaded: o, disabled: p, link: c } = this;
+    if (!e || !this.messages._lang)
+      return;
+    if (this.view === "compact")
+      return this.renderCompactView();
+    const s = this.getAccessInfo(e.access ?? "private"), n = this.getThumbnailGroup(e), a = this.preview === "top" && !c, u = this.previewed;
+    return r`<section class=${g({
+      "group-card": !0,
+      "group-card--hoverable": t !== "none",
+      "group-card--selected": this.selected,
+      "group-card--disabled": p,
+      "group-card--loaded": o,
+      "group-card--previewed": u
+    })} @click=${c ? void 0 : this.handleCardClick} tabindex=${(a ? 0 : void 0) ?? d} .role=${a ? "button" : void 0} aria-haspopup=${(a ? "dialog" : void 0) ?? d} @keydown=${(i) => {
+      a && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), this.handleCardClick());
+    }} ${f(this.sectionEl)}><slot name=content-top></slot>${c ? r`<a class="group-card__upper group-card__upper--link" href=${this.link ?? d} target=${(this.newTab ? "_blank" : void 0) ?? d} rel=${(this.newTab ? "noopener noreferrer" : void 0) ?? d} @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 l = i.target;
+      l instanceof HTMLElement && l.closest(".group-card__footer") && i.preventDefault();
+    }}>${this.renderListContent(e, n, s)}</a>` : r`<div class="group-card__upper" @mouseover=${() => {
+      this.hover = !0;
+    }} @mouseout=${() => {
+      this.hover = !1;
+    }}>${this.renderListContent(e, n, s)}</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: l }) => {
+      l(), this.arcgisGroupBrowserInternalUIAction.emit(i);
+    }}></arcgis-portal-user-popup></div>` || ""}</div><div>${this.preview === "action" && r`<calcite-button scale=s .appearance=${u ? "solid" : "outline-fill"} kind=neutral @click=${() => {
+      this.arcgisGroupBrowserCardPreview.emit(this.group);
+    }}>${u ? this.messages.hidePreview : this.messages.preview}</calcite-button>` || ""}<div @click=${(i) => {
+      i.stopPropagation();
+    }}><slot name=actions-end></slot></div></div></div></section>`;
+  }
+}
+v("arcgis-portal-group-card", B);
+export {
+  B 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 "../arcgis-portal-group-badges/index.js";
+import "@esri/calcite-components/components/calcite-icon";
+import "../arcgis-portal-group-thumbnail/index.js";
+import "@esri/calcite-components/components/calcite-radio-button";
+import "@esri/calcite-components/components/calcite-checkbox";
+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;
+};

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

@@ -0,0 +1,153 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as p } from "../../chunks/runtime.js";
+import { LitElement as m, nothing as f, safeStyleMap as g } from "@arcgis/lumina";
+import { css as d, html as l } from "lit";
+import { createRef as c, ref as h } from "lit/directives/ref.js";
+import { a as $, g as b } from "../../chunks/portal.js";
+const x = /^#[0-9a-f]{3}$/iu, k = /^#[0-9a-f]{6}$/iu;
+function u(r) {
+  return E(r) || I(r);
+}
+function E(r) {
+  return r?.length === 4 && x.test(r);
+}
+function I(r) {
+  return r?.length === 7 && k.test(r);
+}
+function O(r) {
+  if (!u(r))
+    return null;
+  const t = r.replace("#", "");
+  if (t.length === 3) {
+    const [e, i, o] = t.split("");
+    return {
+      r: Number.parseInt(`${e}${e}`, 16),
+      g: Number.parseInt(`${i}${i}`, 16),
+      b: Number.parseInt(`${o}${o}`, 16)
+    };
+  }
+  return {
+    r: Number.parseInt(t.slice(0, 2), 16),
+    g: Number.parseInt(t.slice(2, 4), 16),
+    b: Number.parseInt(t.slice(4, 6), 16)
+  };
+}
+function T(r) {
+  let t = 0;
+  for (let i = 0; i < r.length; i++)
+    t = r.charCodeAt(i) + ((t << 5) - t);
+  let e = "#";
+  for (let i = 0; i < 3; i++) {
+    const o = t >> i * 8 & 255;
+    e += `00${o.toString(16)}`.slice(-2);
+  }
+  return e;
+}
+function v(r) {
+  let { r: t, g: e, b: i } = r;
+  t /= 255, e /= 255, i /= 255;
+  const o = Math.max(t, e, i), n = Math.min(t, e, i), s = o - n;
+  if (s === 0)
+    return 0;
+  let a = 0;
+  switch (o) {
+    case t:
+      a = (e - i) / s + (e < i ? 6 : 0);
+      break;
+    case e:
+      a = (i - t) / s + 2;
+      break;
+    default:
+      a = (t - e) / s + 4;
+      break;
+  }
+  return Math.round(a * 60);
+}
+function w(r) {
+  const t = O(r);
+  return t ? v(t) : 0;
+}
+const H = d`:host{display:inline-block}:host([scale="s"]){height:1.5rem;width:1.5rem;font-size:.625rem}:host([scale="m"]){height:2rem;width:2rem;font-size:.75rem}:host([scale="l"]){font-size:1rem;height:2.75rem;width:2.75rem}:host([scale="xl"]){font-size:1.25rem;height:4rem;width:4rem}.icon{display:flex;color:var(--calcite-color-text-3)}.background{position:relative;display:flex;height:100%;width:100%;align-items:center;justify-content:center}.initials{position:absolute;font-weight:700;text-transform:uppercase;color:var(--calcite-color-text-2)}.thumbnail{height:100%;width:100%}.tooltip-text{margin:0;padding:0;font-size:.75rem;color:var(--calcite-color-text-2)}calcite-tooltip{pointer-events:none}`;
+class y extends m {
+  constructor() {
+    super(...arguments), this.imageEl = c(), this.fallbackEl = c(), this.tooltipEl = c(), this.imageError = !1, this.tooltipOpen = !1, this.tooltip = !1, this.scale = "m";
+  }
+  static {
+    this.properties = { imageError: 16, tooltipOpen: 16, group: 0, portal: 0, tooltip: 5, scale: 3 };
+  }
+  static {
+    this.styles = H;
+  }
+  willUpdate(t) {
+    t.has("group") && (this.imageError = !1);
+  }
+  updated() {
+    const t = this.tooltipEl.value, e = this.imageEl.value || this.fallbackEl.value;
+    t && e && (t.referenceElement = e);
+  }
+  isDarkMode() {
+    return !!this.el.closest(".calcite-mode-dark");
+  }
+  getThumbnailURI() {
+    const { group: t, portal: e } = this;
+    if (!t)
+      return null;
+    if (t.thumbnailUrl)
+      return t.thumbnailUrl;
+    const i = t.thumbnail;
+    if (!i)
+      return null;
+    if (i.startsWith("http"))
+      return i;
+    if (!e || !t.id)
+      return null;
+    const o = $(e), n = o ? `?token=${o}` : "";
+    return `${b(e)}community/groups/${t.id}/info/${i}${n}`;
+  }
+  generateFillColor() {
+    const { id: t, title: e } = this.group || {}, i = t ? `#${t.slice(Math.max(0, t.length - 6))}` : "", o = t && u(i) ? i : T(e || "");
+    if (!t && !e || !u(o))
+      return "var(--calcite-color-foreground-2)";
+    const n = w(o), s = this.isDarkMode() ? 20 : 90;
+    return `hsl(${n}, 60%, ${s}%)`;
+  }
+  generateInitials() {
+    const t = this.group?.title?.trim().charAt(0);
+    return t?.match(/^\w+$/u) ? t : null;
+  }
+  getIconScale() {
+    return this.scale === "xl" ? "l" : this.scale === "xs" ? "s" : this.scale;
+  }
+  renderTooltip() {
+    return !this.tooltip || !this.group?.title ? null : l`<calcite-tooltip .open=${this.tooltipOpen} close-on-click placement=bottom-start offset-distance=6 offset-skidding=0 ${h(this.tooltipEl)}><p class="tooltip-text">${this.group.title}</p></calcite-tooltip>`;
+  }
+  render() {
+    const t = this.getThumbnailURI();
+    if (t && !this.imageError)
+      return l`<img class="thumbnail" src=${t ?? f} alt @error=${() => {
+        this.imageError = !0;
+      }} @mouseenter=${() => {
+        this.tooltipOpen = !0;
+      }} @mouseleave=${() => {
+        this.tooltipOpen = !1;
+      }} @focusin=${() => {
+        this.tooltipOpen = !0;
+      }} @focusout=${() => {
+        this.tooltipOpen = !1;
+      }} ${h(this.imageEl)}>${this.renderTooltip()}`;
+    const e = this.generateInitials();
+    return l`<span class="background" style=${g({ backgroundColor: this.generateFillColor() })} @mouseenter=${() => {
+      this.tooltipOpen = !0;
+    }} @mouseleave=${() => {
+      this.tooltipOpen = !1;
+    }} @focusin=${() => {
+      this.tooltipOpen = !0;
+    }} @focusout=${() => {
+      this.tooltipOpen = !1;
+    }} ${h(this.fallbackEl)}>${e ? l`<span aria-hidden=true class="initials">${e}</span>` : l`<calcite-icon class="icon" icon=users .scale=${this.getIconScale()}></calcite-icon>`}</span>${this.renderTooltip()}`;
+  }
+}
+p("arcgis-portal-group-thumbnail", y);
+export {
+  y as ArcgisPortalGroupThumbnail
+};

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

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

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

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