@arcgis/portal-components 5.2.0-next.99 → 6.0.0-next.0

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

@@ -1,14 +1,15 @@
 /* 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 { c as b } from "../../chunks/runtime.js";
 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 { LitElement as v, createEvent as m, safeClassMap as g, nothing as p } from "@arcgis/lumina";
+import { css as w, html as t } from "lit";
 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/groups.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 {
+import { a as y } from "../../chunks/functionalities.js";
+import { g as k } from "../../chunks/groups2.js";
+import { g as C } from "../../chunks/url.js";
+const B = w`: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;margin-top:.25rem;position:relative}.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__footer__end{display:flex}.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__badges-measurement{inset:0;position:absolute;visibility:hidden;pointer-events:none}.group-card__badges--measurement{width:max-content}.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 S extends v {
   constructor() {
     super(...arguments), this.messages = x({ blocking: !0 }), this.sectionEl = $(), this.handleCardClick = (e) => {
       if (!(this.link || this.disabled || e?.target?.closest(".group-card__footer"))) {
@@ -22,142 +23,175 @@ class B extends w {
         }
         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.hideOwner = !1, this.hideDateUpdated = !1, this.showDateCreated = !1, this.hideViewableBy = !1, this.showSummary = !1, this.hideBadges = !1, this.newTab = !1, this.disabled = !1, this.arcgisGroupBrowserCardPreview = m(), this.arcgisGroupBrowserInternalUIAction = m(), this.arcgisGroupCardSelect = m();
+    }, this.syncBadgeLayout = () => {
+      const e = this.renderRoot.querySelector(".group-card__details"), r = e?.querySelector(".group-card__badges--responsive"), i = e?.querySelector(".group-card__badges--measurement");
+      if (!e || !r || !i) {
+        this.badgesFitSingleLine = !0;
+        return;
+      }
+      const d = i.getBoundingClientRect().width, o = this.getAvailableBadgeWidth(e, r);
+      this.badgesFitSingleLine = d <= o;
+    }, this.hover = !1, this.isLoaded = !1, this.badgesFitSingleLine = !1, this.selected = !1, this.indeterminate = !1, this.view = "list", this.selection = "none", this.previewed = !1, this.hideOwner = !1, this.hideDateUpdated = !1, this.showDateCreated = !1, this.hideViewableBy = !1, this.showSummary = !1, this.hideBadges = !1, 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, hideOwner: 5, hideDateUpdated: 5, showDateCreated: 5, hideViewableBy: 5, showSummary: 5, hideBadges: 5, link: 1, linkHandler: 0, newTab: 5, disabled: 7 };
+    this.properties = { hover: 16, isLoaded: 16, badgesFitSingleLine: 16, group: 0, user: 0, portal: 0, selected: 7, indeterminate: 7, view: 1, selection: 1, preview: 1, previewed: 5, name: 1, hideOwner: 5, hideDateUpdated: 5, showDateCreated: 5, hideViewableBy: 5, showSummary: 5, hideBadges: 5, link: 1, linkHandler: 0, newTab: 5, disabled: 7 };
   }
   static {
-    this.styles = C;
+    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();
+    this.sectionEl.value?.focus();
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("resize", this.syncBadgeLayout);
   }
   firstUpdated() {
     requestAnimationFrame(() => {
-      this.isLoaded = !0;
+      this.isLoaded = !0, this.syncBadgeLayout();
     });
   }
+  updated(e) {
+    (e.has("group") || e.has("hideBadges") || e.has("view")) && this.syncBadgeLayout();
+  }
+  disconnectedCallback() {
+    window.removeEventListener("resize", this.syncBadgeLayout), super.disconnectedCallback();
+  }
+  getAvailableBadgeWidth(e, r) {
+    const i = getComputedStyle(e);
+    if (i.flexDirection !== "row")
+      return e.clientWidth;
+    const d = Array.from(e.children), o = d.indexOf(r);
+    if (o < 0)
+      return e.clientWidth;
+    const n = Number.parseFloat(i.columnGap || i.gap || "0") || 0, l = d.slice(0, o).reduce((s, u) => s + u.getBoundingClientRect().width, 0);
+    return e.clientWidth - l - n * o;
+  }
   getAccessInfo(e) {
-    const { messages: t } = this, o = {
+    const { messages: r } = this, i = {
       public: {
         icon: "globe",
-        text: t.everyone
+        text: r.everyone
       },
       private: {
         icon: "lock",
-        text: t.groupMembers
+        text: r.groupMembers
       },
       org: {
         icon: "organization",
-        text: t.organization
+        text: r.organization
       }
     };
-    return o[e] ?? o.private;
+    return i[e] ?? i.private;
   }
   getThumbnailGroup(e) {
     return {
       id: e.id ?? "",
       title: e.title ?? "",
-      thumbnail: y(e).thumbnail,
+      thumbnail: k(e)?.thumbnail,
       thumbnailUrl: e.thumbnailUrl ?? void 0
     };
   }
+  getResolvedBaseUrl() {
+    return this.portal ? `${C({ portal: this.portal, usePortalHostname: !this.portal.user })}/home` : "";
+  }
   renderCompactBadges(e) {
-    return this.hideBadges ? null : 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>`;
+    return this.hideBadges ? null : t`<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>`;
   }
   renderBadges(e) {
-    return this.hideBadges ? null : 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>`;
+    return this.hideBadges ? null : t`<arcgis-portal-group-badges .appearance=${this.hover ? "outline-fill" : "solid"} .group=${e} .portal=${this.portal} .width=${this.badgesFitSingleLine ? "full" : "narrow"} class="group-card__badges group-card__badges--responsive group-card__detail group-card__divider" scale=s show-tooltips></arcgis-portal-group-badges>`;
+  }
+  renderBadgeMeasurement(e) {
+    return this.hideBadges ? null : t`<div aria-hidden=true class="group-card__badges-measurement"><arcgis-portal-group-badges .appearance=${this.hover ? "outline-fill" : "solid"} .group=${e} .portal=${this.portal} width=full class="group-card__badges group-card__badges--measurement" scale=s></arcgis-portal-group-badges></div>`;
   }
-  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 ?? "", {
+  renderDetails(e, r) {
+    return t`<div class="group-card__details">${this.showDateCreated && !!e.created && t`<span class="group-card__detail group-card__divider">${h(this.messages.created ?? "", {
       date: _(e.created, { dateStyle: "medium" })
-    })}</span>` || ""}${!this.hideDateUpdated && !!e.modified && r`<span class="group-card__detail group-card__divider">${h(this.messages.lastUpdated ?? "", {
+    })}</span>` || ""}${!this.hideDateUpdated && !!e.modified && t`<span class="group-card__detail group-card__divider">${h(this.messages.lastUpdated ?? "", {
       date: _(e.modified, { dateStyle: "medium" })
-    })}</span>` || ""}${!this.hideViewableBy && 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>`;
+    })}</span>` || ""}${!this.hideViewableBy && t`<span class="group-card__detail group-card__divider"><calcite-icon class="group-card__detail__icon" .icon=${r.icon} scale=s></calcite-icon>${h(this.messages.viewableBy ?? "", { level: r.text })}</span>` || ""}${this.renderBadges(e)}${this.renderBadgeMeasurement(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>`;
+  renderListContent(e, r, i) {
+    return t`<div class="group-card-flex group-card__top">${this.renderSelectionInput()}<div class="group-card__thumbnail"><arcgis-portal-group-thumbnail .group=${r} .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 && t`<p class="group-card__summary">${e.snippet.length > 250 ? `${e.snippet.substring(0, 250)}...` : e.snippet}</p>` || ""}${this.renderDetails(e, i)}<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";
+    const { selection: e, selected: r, disabled: i, name: d, messages: o, group: n } = this, l = 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>`;
+        return t`<calcite-radio-button class=${g({ "group-card__input": !0, "group-card__input--compact": l })} .checked=${r} .disabled=${i} .value=${n.title ?? ""} .name=${d} @click=${(s) => s.stopPropagation()} @calciteRadioButtonChange=${() => {
+          this.arcgisGroupCardSelect.emit({ group: n, selected: !r });
+        }}><span class="screen-readers-only">${h(o.select ?? "", { title: n.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>`;
+        return t`<calcite-checkbox class=${g({ "group-card__input": !0, "group-card__input--compact": l })} .checked=${r} .disabled=${i} .indeterminate=${this.indeterminate} @click=${(s) => s.stopPropagation()} @calciteCheckboxChange=${() => {
+          const s = !this.selected;
+          this.selected = s, this.arcgisGroupCardSelect.emit({ group: n, selected: s });
+        }}><span class="screen-readers-only">${n.title}</span></calcite-checkbox>`;
       case "none":
         return null;
       default:
-        return k(e);
+        return y(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({
+    const { group: e, selection: r, isLoaded: i, disabled: d, link: o, newTab: n, linkHandler: l, handleCardClick: s, selected: u } = this, a = this.getThumbnailGroup(e);
+    return t`<section class=${g({
       "group-card": !0,
-      "group-card--hoverable": t !== "none",
+      "group-card--hoverable": r !== "none",
       "group-card--selected": u,
-      "group-card--disabled": p,
-      "group-card--loaded": o
-    })} @click=${c ? void 0 : a} @mouseover=${() => {
+      "group-card--disabled": d,
+      "group-card--loaded": i
+    })} tabindex=-1 @click=${o ? void 0 : s} @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>`;
+    }} ${f(this.sectionEl)}>${o ? t`<a class="group-card__upper group-card__upper--compact group-card__upper--link" href=${o ?? p} target=${(n ? "_blank" : void 0) ?? p} rel=${(n ? "noopener noreferrer" : void 0) ?? p} @click=${(c) => {
+      l && !c.ctrlKey && !c.metaKey && (c.preventDefault(), l(this.group));
+    }}>${t`${this.renderSelectionInput()}<div class="group-card__thumbnail group-card__thumbnail--compact"><arcgis-portal-group-thumbnail .group=${a} .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>` : t`<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=${a} .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;
+    const { group: e, selection: r, isLoaded: i, disabled: d, link: o } = 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({
+    const n = this.getAccessInfo(e.access ?? "private"), l = this.getThumbnailGroup(e), s = this.preview === "top" && !o, u = this.previewed;
+    return t`<section class=${g({
       "group-card": !0,
-      "group-card--hoverable": t !== "none",
+      "group-card--hoverable": r !== "none",
       "group-card--selected": this.selected,
-      "group-card--disabled": p,
-      "group-card--loaded": o,
+      "group-card--disabled": d,
+      "group-card--loaded": i,
       "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=${() => {
+    })} @click=${o ? void 0 : this.handleCardClick} tabindex=${(s ? 0 : void 0) ?? p} .role=${s ? "button" : void 0} aria-haspopup=${(s ? "dialog" : void 0) ?? p} @keydown=${(a) => {
+      s && (a.key === "Enter" || a.key === " ") && (a.preventDefault(), this.handleCardClick());
+    }} ${f(this.sectionEl)}><slot name=content-top></slot>${o ? t`<a class="group-card__upper group-card__upper--link" href=${this.link ?? p} target=${(this.newTab ? "_blank" : void 0) ?? p} rel=${(this.newTab ? "noopener noreferrer" : void 0) ?? p} @mouseover=${() => {
       this.hover = !0;
     }} @mouseout=${() => {
       this.hover = !1;
-    }} @click=${(i) => {
-      if (this.linkHandler && !i.ctrlKey && !i.metaKey) {
-        i.preventDefault(), this.linkHandler(this.group);
+    }} @click=${(a) => {
+      if (this.linkHandler && !a.ctrlKey && !a.metaKey) {
+        a.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=${() => {
+      const c = a.target;
+      c instanceof HTMLElement && c.closest(".group-card__footer") && a.preventDefault();
+    }}>${this.renderListContent(e, l, n)}</a>` : t`<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.hideOwner && 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.renderListContent(e, l, n)}</div>`}<div class="group-card__footer"><div class="group-card__footer__start"><slot name=actions-start></slot>${!this.hideOwner && t`<div class="group-card__profile-wrap"><arcgis-portal-user-popup .baseUrl=${this.getResolvedBaseUrl()} class="group-card__owner" .portal=${this.portal} .username=${e.owner ?? void 0} underline @arcgisUserPopupInternalUIAction=${({ detail: a, stopPropagation: c }) => {
+      c(), this.arcgisGroupBrowserInternalUIAction.emit(a);
+    }}></arcgis-portal-user-popup></div>` || ""}</div><div class="group-card__footer__end">${this.preview === "action" && t`<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();
+    }}>${u ? this.messages.hidePreview : this.messages.preview}</calcite-button>` || ""}<div @click=${(a) => {
+      a.stopPropagation();
     }}><slot name=actions-end></slot></div></div></div></section>`;
   }
 }
-v("arcgis-portal-group-card", B);
+b("arcgis-portal-group-card", S);
 export {
-  B as ArcgisPortalGroupCard
+  S as ArcgisPortalGroupCard
 };

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

@@ -0,0 +1,8 @@
+import type PortalGroup from "@arcgis/core/portal/PortalGroup.js";
+
+export type PortalGroupCardSelectDetail = {
+  group: PortalGroup;
+  selected: boolean;
+};
+
+export type PortalGroupCardPreviewDetail = PortalGroup | null;

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

@@ -0,0 +1,20 @@
+/// <reference path="../../index.d.ts" />
+import type { PortalEntityPickerSelection } from "../../types/portalEntityPicker.js";
+import type { ArcgisPortalEntityPicker } from "../arcgis-portal-entity-picker/customElement.js";
+
+/**
+ * Search for and select a group from a portal.
+ *
+ * @slot [list-start] - Content displayed before the search results.
+ */
+export abstract class ArcgisPortalGroupPicker extends ArcgisPortalEntityPicker {
+  /** The type of entity to search for. */
+  get entityType(): "group";
+  /** The currently selected group. The component does not mutate this property. */
+  accessor selected: PortalGroupPickerSelection | null;
+  readonly "@eventTypes": {
+    arcgisSelectionChange: ArcgisPortalGroupPicker["arcgisSelectionChange"]["detail"];
+  };
+}
+
+export type PortalGroupPickerSelection = Extract<PortalEntityPickerSelection, { entityType: "group"; }>;

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

@@ -0,0 +1,15 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as t } from "../../chunks/runtime.js";
+import { ArcgisPortalEntityPicker as r } from "../arcgis-portal-entity-picker/customElement.js";
+class e extends r {
+  constructor() {
+    super(...arguments), this.entityType = "group", this.selected = null;
+  }
+  static {
+    this.properties = { entityType: 32, selected: 0 };
+  }
+}
+t("arcgis-portal-group-picker", e);
+export {
+  e as ArcgisPortalGroupPicker
+};

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

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

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

@@ -0,0 +1,2 @@
+import "../arcgis-portal-entity-picker/index.js";
+export * from "./customElement.js";

package/dist/components/arcgis-portal-item-actions/customElement.js

@@ -7,7 +7,7 @@ import { css as g, html as h } from "lit";
 import { createRef as m, ref as v } from "lit/directives/ref.js";
 import { u as F } from "../../chunks/useT9n.js";
 import { t as $ } from "../../chunks/functionalities.js";
-import { g as I, i as b, t as y } from "../../chunks/utils.js";
+import { g as I, i as b, t as y } from "../../chunks/utils2.js";
 const k = g`:host{display:inline-flex}.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}`;
 class x extends u {
   constructor() {