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

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

@@ -0,0 +1,187 @@
+/* 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 { a as E } from "../../chunks/functionalities.js";
+const o = {
+  md: 840,
+  sm: 580,
+  xs: 480,
+  xxs: 360
+}, 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;
+};

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";

package/dist/components/arcgis-portal-replacement-item-redirect/customElement.js

@@ -438,8 +438,8 @@ class H extends g {
     await n?.load(), this.replacementItem = n, this.hasInaccessibleReplacementItem = this.replacementItemInRecycleBin || !n && s.data?.aggregations?.total?.count > 0 && s.data?.relatedItems?.length === 0, this.arcgisPortalReplacementItemFetch.emit({
       replacementItem: this.hasInaccessibleReplacementItem ? {} : n || null
     }), this.replacementItem = n;
-    const p = !!a.owner && await M(a.owner, t);
-    this.itemOwnerName = p ? T(p, this.messages?._t9nLocale || "en") : a.owner || "", this.replacementItemSupportsOpenActions = j(n), this.thumbnailUrl = F(t, n ?? this.item), this.supportsReplacement = !!n && this.isItemRetired(a), this.canRedirect = this.supportsReplacement && this.replacementItemSupportsOpenActions, this.replacementId = n?.id || null, this.canRedirect && this.setupTimer({
+    const p = this.replacementItem?.owner ?? (a?.owner || null);
+    this.itemOwnerName = p ? T(await M(p, t), this.messages?._t9nLocale || "en") : "", this.replacementItemSupportsOpenActions = j(n), this.thumbnailUrl = F(t, n ?? this.item), this.supportsReplacement = !!n && this.isItemRetired(a), this.canRedirect = this.supportsReplacement && this.replacementItemSupportsOpenActions, this.replacementId = n?.id || null, this.canRedirect && this.setupTimer({
       onComplete: () => r()
     }), this.open = !0;
   }
@@ -466,7 +466,7 @@ class H extends g {
         this.cancelRedirect();
       }}>${t.cancelRedirection}</calcite-button>` || ""}<calcite-button slot=footer-end @click=${() => {
         this.cancelTimer(), o ? this.performRedirectAction() : this.viewItemDetailsPage();
-      }} .iconEnd=${o ? void 0 : "launch"} icon-flip-rtl=end ${R(this.primaryActionRef)}>${this.getRedirectActionMessage()}</calcite-button></calcite-dialog>`;
+      }} .iconEnd=${o ? void 0 : "launch"} ${R(this.primaryActionRef)}>${this.getRedirectActionMessage()}</calcite-button></calcite-dialog>`;
   }
 }
 f("arcgis-portal-replacement-item-redirect", H);