@arcgis/portal-components 5.2.0-next.15 → 5.2.0-next.151

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

@@ -1,19 +1,17 @@
 /* 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 {
+import { c as b } from "../../chunks/runtime.js";
+import { substitute as h, formatDate as _ } from "@arcgis/core/intl.js";
+import { LitElement as v, createEvent as m, safeClassMap as g, nothing as c } 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 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 = z({ blocking: !0 }), this.sectionEl = F(), this.resizeObserver = null, this.handleCardClick = (e) => {
+    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);
@@ -25,10 +23,18 @@ class D extends C {
         }
         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;
+    }, 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 = { 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 };
+    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 = B;
@@ -38,150 +44,154 @@ class D extends C {
       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(), !(typeof ResizeObserver > "u") && (this.resizeObserver = new ResizeObserver((e) => {
-      const t = e[0]?.contentRect.width ?? 0;
-      this.updateFormFactor(t);
-    }));
+    super.connectedCallback(), window.addEventListener("resize", this.syncBadgeLayout);
   }
   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;
+      this.isLoaded = !0, this.syncBadgeLayout();
     });
   }
+  updated(e) {
+    (e.has("group") || e.has("hideBadges") || e.has("view")) && this.syncBadgeLayout();
+  }
   disconnectedCallback() {
-    this.resizeObserver?.disconnect(), this.resizeObserver = null, super.disconnectedCallback();
+    window.removeEventListener("resize", this.syncBadgeLayout), 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";
+  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, p) => s + p.getBoundingClientRect().width, 0);
+    return e.clientWidth - l - n * o;
   }
   getAccessInfo(e) {
-    const { messages: t } = this, c = {
+    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 c[e] ?? c.private;
-  }
-  formatDate(e) {
-    return e ? new Intl.DateTimeFormat(void 0, { dateStyle: "medium" }).format(e) : "";
+    return i[e] ?? i.private;
   }
   getThumbnailGroup(e) {
     return {
-      id: e.id ?? void 0,
-      thumbnailUrl: e.thumbnailUrl ?? void 0,
-      title: e.title ?? void 0
+      id: e.id ?? "",
+      title: e.title ?? "",
+      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 : 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 : 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, 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 && t`<span class="group-card__detail group-card__divider">${h(this.messages.lastUpdated ?? "", {
+      date: _(e.modified, { dateStyle: "medium" })
+    })}</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, 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: c, name: h, messages: _, group: a } = this;
+    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="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>`;
+        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="group-card__input" .checked=${t} .disabled=${c} .indeterminate=${this.indeterminate} @click=${(s) => s.stopPropagation()} @calciteCheckboxChange=${() => {
+        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: a, selected: s });
-        }}><span class="screen-readers-only">${a.title}</span></calcite-checkbox>`;
+          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 E(e);
+        return y(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({
+    const { group: e, selection: r, isLoaded: i, disabled: d, link: o, newTab: n, linkHandler: l, handleCardClick: s, selected: p } = 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": p,
-      "group-card--disabled": _,
-      "group-card--loaded": h,
-      [`group-card--${c}`]: !0
-    })} @click=${a ? void 0 : n} @mouseover=${() => {
+      "group-card--disabled": d,
+      "group-card--loaded": i
+    })} tabindex=-1 @click=${o ? void 0 : s} @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>`;
+    }} ${f(this.sectionEl)}>${o ? t`<a class="group-card__upper group-card__upper--compact group-card__upper--link" href=${o ?? c} target=${(n ? "_blank" : void 0) ?? c} rel=${(n ? "noopener noreferrer" : void 0) ?? c} @click=${(u) => {
+      l && !u.ctrlKey && !u.metaKey && (u.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, formFactor: c, loaded: h, disabled: _, link: a, showDateCreated: s, showDateUpdated: m, showSummary: d, showBadges: n } = 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 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({
+    const n = this.getAccessInfo(e.access ?? "private"), l = this.getThumbnailGroup(e), s = this.preview === "top" && !o, p = 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": _,
-      "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=${() => {
+      "group-card--disabled": d,
+      "group-card--loaded": i,
+      "group-card--previewed": p
+    })} @click=${o ? void 0 : this.handleCardClick} tabindex=${(s ? 0 : void 0) ?? c} .role=${s ? "button" : void 0} aria-haspopup=${(s ? "dialog" : void 0) ?? c} @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 ?? c} target=${(this.newTab ? "_blank" : void 0) ?? c} rel=${(this.newTab ? "noopener noreferrer" : void 0) ?? c} @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 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=${() => {
+      const u = a.target;
+      u instanceof HTMLElement && u.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;
-    }}><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.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=${(a) => {
+      a.stopPropagation(), this.arcgisGroupBrowserInternalUIAction.emit(a.detail);
+    }}></arcgis-portal-user-popup></div>` || ""}</div><div class="group-card__footer__end">${this.preview === "action" && t`<calcite-button scale=s .appearance=${p ? "solid" : "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();
+    }}>${p ? this.messages.hidePreview : this.messages.preview}</calcite-button>` || ""}<div @click=${(a) => {
+      a.stopPropagation();
     }}><slot name=actions-end></slot></div></div></div></section>`;
   }
 }
-k("arcgis-portal-group-card", D);
+b("arcgis-portal-group-card", S);
 export {
-  D as ArcgisPortalGroupCard
+  S as ArcgisPortalGroupCard
 };

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

@@ -1,8 +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-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-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-group-thumbnail/customElement.js

@@ -3,7 +3,7 @@ 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";
+import { g as $, a 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);

package/dist/components/arcgis-portal-info-banner/customElement.d.ts

@@ -0,0 +1,14 @@
+/// <reference path="../../index.d.ts" />
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { PortalInfoBannerConfig } from "../../types/portal.js";
+
+export abstract class ArcgisPortalInfoBanner extends LitElement {
+  /** Banner configuration stored in organization settings */
+  accessor config: PortalInfoBannerConfig | undefined;
+  /**
+   * Informational banner should be displayed on both top and bottom of screen
+   *
+   * @default "top"
+   */
+  accessor position: "bottom" | "top" | undefined;
+}

package/dist/components/arcgis-portal-info-banner/customElement.js

@@ -0,0 +1,31 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as r } from "../../chunks/runtime.js";
+import { css as e, html as n } from "lit";
+import { LitElement as s, safeStyleMap as a, safeClassMap as i } from "@arcgis/lumina";
+import { s as l, h as c } from "../../chunks/dom.js";
+const m = e`:host{display:block}.banner{font-weight:var(--calcite-font-weight-bold);font-size:var(--calcite-font-size-0);line-height:1.25rem;font-family:var(--calcite-sans-family);text-align:center;padding:.75rem 2rem;border-bottom:1px solid var(--calcite-color-border-1)}.banner--bottom{border-bottom:none;border-top:1px solid var(--calcite-color-border-1)}.banner__text{margin:0;padding:0;overflow-wrap:break-word}`;
+class p extends s {
+  constructor() {
+    super(...arguments), this.position = "top";
+  }
+  static {
+    this.properties = { config: 0, position: 1 };
+  }
+  static {
+    this.styles = m;
+  }
+  render() {
+    const { position: o, config: t } = this;
+    return t?.enabled ? n`<div style=${a({
+      backgroundColor: t.bgColor,
+      color: t.fontColor
+    })} class=${i({
+      banner: !0,
+      "banner--bottom": o === "bottom"
+    })}><p class="banner__text">${l(c(t.text))}</p></div>` : null;
+  }
+}
+r("arcgis-portal-info-banner", p);
+export {
+  p as ArcgisPortalInfoBanner
+};

package/dist/components/arcgis-portal-info-banner/index.d.ts

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

package/dist/components/arcgis-portal-info-banner/index.js

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

package/dist/components/arcgis-portal-item-actions/customElement.d.ts

@@ -0,0 +1,74 @@
+/// <reference path="../../index.d.ts" />
+import type Portal from "@arcgis/core/portal/Portal.js";
+import type PortalItem from "@arcgis/core/portal/PortalItem.js";
+import type PortalUser from "@arcgis/core/portal/PortalUser.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { FavoriteUpdate } from "../arcgis-portal-item-favorite/utils.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+import type { Dropdown as Dropdown } from "@esri/calcite-components/components/calcite-dropdown";
+
+/** Configurable overflow menu for an item. */
+export abstract class ArcgisPortalItemActions extends LitElement {
+  /** Optional actions to render in the menu. */
+  accessor actions: PortalItemAction[];
+  /** Partial item JSON from search results or a loaded PortalItem instance. */
+  accessor item: PortalItem;
+  /** Optional keyboard handler for the trigger action. */
+  accessor keyHandler: ((e: KeyboardEvent, dropdown: Dropdown) => void) | undefined;
+  /** The more options text used by assistive technology. */
+  accessor label: string;
+  /** @internal */
+  protected messages: {
+      add: string;
+      remove: string;
+  } & T9nMeta<{
+      add: string;
+      remove: string;
+  }>;
+  /** Current Portal instance. */
+  accessor portal: Portal;
+  /** Text for the preview option. */
+  accessor previewText: string | undefined;
+  /**
+   * Allow the user to add and remove from favorites.
+   *
+   * @default false
+   */
+  accessor showFavorite: boolean;
+  /**
+   * Allow the user to open preview from the actions menu.
+   *
+   * @default false
+   */
+  accessor showPreview: boolean;
+  accessor tabIndexOverride: number | undefined;
+  /** Currently signed-in Portal user. */
+  accessor user: PortalUser | undefined;
+  setFocus(): Promise<void>;
+  /** Fires when user clicks an action. */
+  readonly arcgisItemActionClick: import("@arcgis/lumina").TargetedEvent<this, string>;
+  /** Legacy passthrough event retained for compatibility. */
+  readonly arcgisItemActions: import("@arcgis/lumina").TargetedEvent<this, unknown>;
+  /** Fires when user opens the action menu. */
+  readonly arcgisItemActionsOpen: import("@arcgis/lumina").TargetedEvent<this, PortalItemActionsOpenDetail>;
+  /** Fires when user changes the favorite status. */
+  readonly arcgisItemFavoriteUpdate: import("@arcgis/lumina").TargetedEvent<this, FavoriteUpdate>;
+  readonly "@eventTypes": {
+    arcgisItemActionClick: ArcgisPortalItemActions["arcgisItemActionClick"]["detail"];
+    arcgisItemActions: ArcgisPortalItemActions["arcgisItemActions"]["detail"];
+    arcgisItemActionsOpen: ArcgisPortalItemActions["arcgisItemActionsOpen"]["detail"];
+    arcgisItemFavoriteUpdate: ArcgisPortalItemActions["arcgisItemFavoriteUpdate"]["detail"];
+  };
+}
+
+export interface PortalItemAction {
+  action?: () => void;
+  id?: string;
+  link?: string;
+  newTab?: boolean;
+  text: string;
+}
+
+export interface PortalItemActionsOpenDetail {
+  el: Element | HTMLButtonElement;
+}