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

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

@@ -0,0 +1,82 @@
+/// <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 { InternalUIAction } from "../../types/tracking.js";
+
+export abstract class ArcgisPortalGroupBrowserPreviewCard extends LitElement {
+  /** Optional fully qualified path to the portal home root. */
+  accessor baseUrl: string | undefined;
+  /**
+   * Hide item type in the card body.
+   *
+   * @default false
+   */
+  accessor hideItemType: boolean;
+  /**
+   * Hide owner information in the footer.
+   *
+   * @default false
+   */
+  accessor hideOwner: boolean;
+  /**
+   * Hide the item thumbnail area.
+   *
+   * @default false
+   */
+  accessor hideThumbnail: boolean;
+  /**
+   * Allow hover styles and click interaction on the card.
+   *
+   * @default false
+   */
+  accessor interactive: boolean;
+  /** Item shown in the group preview content list. */
+  accessor item: PortalItem;
+  /** Optional link destination; when provided, upper card section becomes an anchor. */
+  accessor link: string | undefined;
+  /**
+   * Open card link in a new tab.
+   *
+   * @default false
+   */
+  accessor newTab: boolean;
+  /** Current portal instance used for links and thumbnail resolution. */
+  accessor portal: Portal | undefined;
+  /**
+   * Show simple content status badge when available.
+   *
+   * @default false
+   */
+  accessor showBadges: boolean;
+  /**
+   * Show the item modified date in the card details row.
+   *
+   * @default false
+   */
+  accessor showDateUpdated: boolean;
+  /**
+   * Show popup-enabled owner link in footer instead of plain avatar lockup.
+   *
+   * @default false
+   */
+  accessor showOwnerPopup: boolean;
+  /**
+   * Show a short item summary if available.
+   *
+   * @default false
+   */
+  accessor showSummary: boolean;
+  /** Current signed in user for owner and item context. */
+  accessor user: PortalUser | undefined;
+  restoreFocus(): Promise<void>;
+  /** Fires on internal component interaction for telemetry. */
+  readonly arcgisGroupBrowserInternalUIAction: import("@arcgis/lumina").TargetedEvent<this, InternalUIAction>;
+  /** Emitted when this card is selected via interaction. */
+  readonly arcgisGroupBrowserPreviewCardSelect: import("@arcgis/lumina").TargetedEvent<this, PortalItem>;
+  readonly "@eventTypes": {
+    arcgisGroupBrowserInternalUIAction: ArcgisPortalGroupBrowserPreviewCard["arcgisGroupBrowserInternalUIAction"]["detail"];
+    arcgisGroupBrowserPreviewCardSelect: ArcgisPortalGroupBrowserPreviewCard["arcgisGroupBrowserPreviewCardSelect"]["detail"];
+  };
+}

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

@@ -0,0 +1,93 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as u } from "../../chunks/runtime.js";
+import { formatDate as w } from "@arcgis/core/intl.js";
+import { LitElement as v, createEvent as d, nothing as o, safeClassMap as n } from "@arcgis/lumina";
+import { css as _, html as r } from "lit";
+import { createRef as p, ref as h } from "lit/directives/ref.js";
+import { g as f } from "../../chunks/items.js";
+import { g } from "../../chunks/url.js";
+import { g as b } from "../../chunks/thumbnail.js";
+const y = _`:host{display:block;min-width:0;container-type:inline-size}.preview-card{position:relative;display:flex;width:100%;height:100%;flex-direction:column;color:var(--calcite-color-text-1);opacity:0;background-color:var(--calcite-color-foreground-1);border:1px solid var(--calcite-color-border-3);transition:background-color .15s ease-in-out,opacity .15s ease-in-out}.preview-card--loaded{opacity:1}.preview-card--hoverable{cursor:pointer}.preview-card--hoverable .preview-card__upper:hover{background-color:var(--calcite-color-background)}.preview-card__upper{display:flex;align-items:stretch;min-width:0;flex:1 1 auto;padding:.75rem;background-color:var(--calcite-color-foreground-1)}.preview-card__upper--link{color:var(--calcite-color-text-1);text-decoration:none}.preview-card__top{display:flex;align-self:stretch;flex:0 0 auto}.preview-card__thumbnail{box-sizing:border-box;display:grid;place-items:center;width:4rem;height:100%;margin:0;margin-inline-start:.75rem;border-radius:2px;overflow:hidden;background-color:var(--calcite-color-foreground-2)}.preview-card__thumbnail-image{width:100%;height:100%;object-fit:cover}.preview-card__thumbnail--fallback{color:var(--calcite-color-text-3)}.preview-card__content{min-width:0;flex:1 1 auto}.preview-card__body{display:grid;min-width:0;gap:.25rem}.preview-card__title{margin:0;height:2rem;font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-medium);line-height:1.15;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}.preview-card__title--padded{margin-bottom:.125rem}.preview-card__title-span{position:relative}.preview-card__summary{color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--2);line-height:1.35;margin:0;overflow:hidden;text-overflow:ellipsis}.preview-card__details{align-items:center;display:flex;flex-wrap:wrap;gap:.25rem}.preview-card__detail,.preview-card__meta{color:var(--calcite-color-text-1);font-size:var(--calcite-font-size--2);margin:0}.preview-card__meta{color:var(--calcite-color-text-2)}.preview-card__status{--calcite-chip-background-color: var(--calcite-color-foreground-2);text-transform:capitalize}.preview-card__divider{align-items:center;display:flex;flex:0 0 auto}.preview-card__divider:before{content:"";height:1rem;width:1px;margin-inline-end:.5rem;background-color:var(--calcite-color-border-2)}.preview-card__details :first-child.preview-card__divider:before{display:none}.preview-card__footer{align-items:center;border-top:1px solid var(--calcite-color-border-2);display:flex;margin-top:auto;min-height:2.25rem;padding:.375rem .75rem}.preview-card__footer-start{align-items:center;display:flex;flex:1 1 auto;min-width:0}.preview-card__owner{min-width:0}@container (max-width: 480px){.preview-card__upper{padding:.625rem}.preview-card__thumbnail{width:3.5rem;margin-inline-start:.5rem}.preview-card__footer{padding:.25rem .625rem}}`;
+class $ extends v {
+  constructor() {
+    super(...arguments), this.sectionEl = p(), this.linkEl = p(), this.cachedOwner = "", this.cachedStatus = "", this.cachedTitle = "-", this.cachedType = "-", this.cachedSummary = "", this.cachedUpdatedText = "", this.cachedThumbnailUri = null, this.handleCardClick = () => {
+      const { link: e, item: t } = this;
+      e || this.arcgisGroupBrowserPreviewCardSelect.emit(t);
+    }, this.isLoaded = !1, this.imageError = !1, this.newTab = !1, this.hideThumbnail = !1, this.hideOwner = !1, this.hideItemType = !1, this.showDateUpdated = !1, this.showSummary = !1, this.showBadges = !1, this.showOwnerPopup = !1, this.interactive = !1, this.arcgisGroupBrowserInternalUIAction = d(), this.arcgisGroupBrowserPreviewCardSelect = d();
+  }
+  static {
+    this.properties = { isLoaded: 16, imageError: 16, item: 0, portal: 0, user: 0, baseUrl: 1, link: 1, newTab: 5, hideThumbnail: 5, hideOwner: 5, hideItemType: 5, showDateUpdated: 5, showSummary: 5, showBadges: 5, showOwnerPopup: 5, interactive: 5 };
+  }
+  static {
+    this.styles = y;
+  }
+  async restoreFocus() {
+    if (this.link && this.linkEl.value) {
+      this.linkEl.value.focus();
+      return;
+    }
+    this.sectionEl.value?.focus();
+  }
+  connectedCallback() {
+    super.connectedCallback(), requestAnimationFrame(() => {
+      this.isLoaded = !0;
+    });
+  }
+  willUpdate(e) {
+    (e.has("item") || e.has("portal") || e.has("showSummary") || e.has("showDateUpdated")) && (this.imageError = !1, this.updateCachedItemData());
+  }
+  get resolvedBaseUrl() {
+    if (!this.portal)
+      return "";
+    const e = g({ portal: this.portal });
+    return this.baseUrl || `${e}/home`;
+  }
+  getItemThumbnailUri(e) {
+    return e.thumbnailUrl ? e.thumbnailUrl : this.portal ? b(this.portal, e) : null;
+  }
+  updateCachedItemData() {
+    const { item: e, showSummary: t, showDateUpdated: s } = this, i = f(e), a = i.snippet?.trim() || "";
+    this.cachedOwner = i.owner || "", this.cachedStatus = i.contentStatus || "", this.cachedTitle = i.title?.trim() || e.title?.trim() || "-", this.cachedType = i.type?.trim() || "-", this.cachedSummary = t ? a.length > 250 ? `${a.slice(0, 250)}...` : a : "", this.cachedUpdatedText = s ? w(i.modified ?? e.modified, { dateStyle: "medium" }) : "", this.cachedThumbnailUri = this.getItemThumbnailUri(e);
+  }
+  renderStatusBadge() {
+    const e = this.cachedStatus;
+    return !this.showBadges || !e ? null : r`<calcite-chip class="preview-card__status" scale=s .value=${e} .label=${e}>${e}</calcite-chip>`;
+  }
+  renderThumbnail() {
+    if (this.hideThumbnail)
+      return null;
+    const e = this.cachedThumbnailUri;
+    return e && !this.imageError ? r`<figure class="preview-card__thumbnail"><img class="preview-card__thumbnail-image" src=${e ?? o} alt @error=${() => {
+      this.imageError = !0;
+    }}></figure>` : r`<figure class="preview-card__thumbnail preview-card__thumbnail--fallback" aria-hidden=true><calcite-icon icon=file scale=m></calcite-icon></figure>`;
+  }
+  renderOwner() {
+    const e = this.cachedOwner;
+    return this.hideOwner || !e || !this.portal ? null : this.showOwnerPopup ? r`<arcgis-portal-user-popup underline .username=${e} .portal=${this.portal} .baseUrl=${this.resolvedBaseUrl} class="preview-card__owner" scale=s @arcgisUserPopupInternalUIAction=${(t) => {
+      t.stopPropagation(), this.arcgisGroupBrowserInternalUIAction.emit(t.detail);
+    }}></arcgis-portal-user-popup>` : r`<arcgis-portal-user-avatar scale=s show-name hide-avatar .username=${e} .portal=${this.portal} class="preview-card__owner"></arcgis-portal-user-avatar>`;
+  }
+  renderBody(e) {
+    const { showSummary: t, showDateUpdated: s } = this, i = !this.hideItemType, a = this.cachedTitle, m = this.cachedType, c = this.cachedSummary, l = this.cachedUpdatedText;
+    return r`<div class="preview-card__body"><h3 class=${n({
+      "preview-card__title": !0,
+      "preview-card__title--padded": i || t && !!c
+    })}><span class="preview-card__title-span">${a}</span></h3>${t && c ? r`<p class="preview-card__summary">${c}</p>` : null}${i ? r`<arcgis-portal-item-type scale=s .item=${e} .portal=${this.portal} .user=${this.user}></arcgis-portal-item-type>` : null}<div class="preview-card__details">${s && l ? r`<span class="preview-card__detail preview-card__divider">${l}</span>` : null}${this.renderStatusBadge()}${i ? null : r`<p class="preview-card__meta">${m}</p>`}</div></div>`;
+  }
+  render() {
+    const { item: e, interactive: t, link: s, newTab: i } = this;
+    return r`<section class=${n({
+      "preview-card": !0,
+      "preview-card--hoverable": t,
+      "preview-card--loaded": this.isLoaded
+    })} .part=${"card"} tabindex=${(t ? 0 : void 0) ?? o} @click=${s ? void 0 : this.handleCardClick} ${h(this.sectionEl)}><slot name=content-top></slot>${s ? r`<a class="preview-card__upper preview-card__upper--link" href=${s ?? o} target=${(i ? "_blank" : void 0) ?? o} rel=${(i ? "noopener noreferrer" : void 0) ?? o} ${h(this.linkEl)}>${r`<div class="preview-card__content">${this.renderBody(e)}</div><div class="preview-card__top">${this.renderThumbnail()}</div>`}</a>` : r`<div class="preview-card__upper"><div class="preview-card__content">${this.renderBody(e)}</div><div class="preview-card__top">${this.renderThumbnail()}</div></div>`}<div class="preview-card__footer" @click=${(a) => {
+      a.stopPropagation();
+    }} @keydown=${(a) => {
+      (a.key === "Enter" || a.key === " ") && a.stopPropagation();
+    }}><div class="preview-card__footer-start">${this.renderOwner()}</div><slot name=actions-end></slot></div></section>`;
+  }
+}
+u("arcgis-portal-group-browser-preview-card", $);
+export {
+  $ as ArcgisPortalGroupBrowserPreviewCard
+};

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

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

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

@@ -0,0 +1,6 @@
+import "@esri/calcite-components/components/calcite-chip";
+import "@esri/calcite-components/components/calcite-icon";
+import "../arcgis-portal-user-popup/index.js";
+import "../arcgis-portal-user-avatar/index.js";
+import "../arcgis-portal-item-type/index.js";
+export * from "./customElement.js";

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

@@ -2,10 +2,14 @@
 import type Portal from "@arcgis/core/portal/Portal.js";
 import type PortalGroup from "@arcgis/core/portal/PortalGroup.js";
 import type PortalUser from "@arcgis/core/portal/PortalUser.js";
-import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { JsxNode, PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { InternalUIAction } from "../../types/tracking.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
+export type PortalGroupCardProps = Partial<Pick<ArcgisPortalGroupCard, "disabled" | "hideBadges" | "hideDateUpdated" | "hideOwner" | "hideViewableBy" | "indeterminate" | "link" | "linkHandler" | "name" | "newTab" | "preview" | "previewed" | "selected" | "selection" | "showDateCreated" | "showSummary" | "user" | "view">>;
+
+export type PortalGroupCardSlotType = JsxNode;
+
 /**
  * A card for displaying portal group information.
  *
@@ -21,8 +25,32 @@ export abstract class ArcgisPortalGroupCard extends LitElement {
    * @default false
    */
   accessor disabled: boolean;
-  /** Partial group JSON from community/groups. */
+  /** Group data from search results or a loaded PortalGroup instance. */
   accessor group: PortalGroup;
+  /**
+   * Hide group badges.
+   *
+   * @default false
+   */
+  accessor hideBadges: boolean;
+  /**
+   * Hide last-updated detail.
+   *
+   * @default false
+   */
+  accessor hideDateUpdated: boolean;
+  /**
+   * Hide the owner information in the card footer.
+   *
+   * @default false
+   */
+  accessor hideOwner: boolean;
+  /**
+   * Hide information on who can view this group.
+   *
+   * @default false
+   */
+  accessor hideViewableBy: boolean;
   /**
    * Show the group as partially selected.
    *
@@ -99,42 +127,18 @@ export abstract class ArcgisPortalGroupCard extends LitElement {
    * @default "none"
    */
   accessor selection: GroupCardSelection;
-  /**
-   * Show group badges.
-   *
-   * @default true
-   */
-  accessor showBadges: boolean;
   /**
    * Show created date detail.
    *
    * @default false
    */
   accessor showDateCreated: boolean;
-  /**
-   * Show last-updated detail.
-   *
-   * @default true
-   */
-  accessor showDateUpdated: boolean;
-  /**
-   * Show the owner information in the card footer.
-   *
-   * @default true
-   */
-  accessor showOwner: boolean;
   /**
    * Show group summary text in card body.
    *
    * @default false
    */
   accessor showSummary: boolean;
-  /**
-   * Show information on who can view this group.
-   *
-   * @default true
-   */
-  accessor showViewableBy: boolean;
   /** Current signed-in portal user. */
   accessor user: PortalUser | undefined;
   /**

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

@@ -1,19 +1,16 @@
 /* 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 v } from "../../chunks/runtime.js";
+import { css as b, html as r } from "lit";
+import { substitute as h, formatDate as _ } from "@arcgis/core/intl.js";
+import { LitElement as w, createEvent as m, safeClassMap as g, nothing as d } from "@arcgis/lumina";
+import { createRef as $, ref as f } from "lit/directives/ref.js";
+import { u as x } from "../../chunks/useT9n.js";
+import { a as k } from "../../chunks/functionalities.js";
+import { g as y } from "../../chunks/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 {
   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,13 +22,13 @@ 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.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();
   }
   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, 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;
+    this.styles = C;
   }
   async restoreFocus() {
     if (this.link) {
@@ -40,46 +37,13 @@ class D extends C {
     }
     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;
+      this.isLoaded = !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 = {
+    const { messages: t } = this, o = {
       public: {
         icon: "globe",
         text: t.everyone
@@ -93,71 +57,83 @@ class D extends C {
         text: t.organization
       }
     };
-    return c[e] ?? c.private;
-  }
-  formatDate(e) {
-    return e ? new Intl.DateTimeFormat(void 0, { dateStyle: "medium" }).format(e) : "";
+    return o[e] ?? o.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: y(e).thumbnail,
+      thumbnailUrl: e.thumbnailUrl ?? void 0
     };
   }
+  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>`;
+  }
+  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>`;
+  }
+  renderDetails(e, t) {
+    return r`<div class="group-card__details">${this.showDateCreated && !!e.created && r`<span class="group-card__detail group-card__divider">${h(this.messages.created ?? "", {
+      date: _(e.created, { dateStyle: "medium" })
+    })}</span>` || ""}${!this.hideDateUpdated && !!e.modified && r`<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>`;
+  }
+  renderListContent(e, t, o) {
+    return r`<div class="group-card-flex group-card__top">${this.renderSelectionInput()}<div class="group-card__thumbnail"><arcgis-portal-group-thumbnail .group=${t} .portal=${this.portal} scale=xl></arcgis-portal-group-thumbnail></div><div class="group-card-flex-1"><div class="group-card-flex"><div class="group-card__content"><h3 class=${g({ "group-card__title": !0, "group-card__title--padded": this.showSummary && !!e.snippet })}><span class="group-card__title__span">${e.title}</span></h3>${this.showSummary && !!e.snippet && r`<p class="group-card__summary">${e.snippet.length > 250 ? `${e.snippet.substring(0, 250)}...` : e.snippet}</p>` || ""}${this.renderDetails(e, o)}<slot name=content-end></slot></div></div></div></div>`;
+  }
   renderSelectionInput() {
-    const { selection: e, selected: t, disabled: c, name: h, messages: _, group: a } = this;
+    const { selection: e, selected: t, disabled: o, name: p, messages: c, group: s } = this, n = this.view === "compact";
     switch (e) {
       case "single":
-        return r`<calcite-radio-button class="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 r`<calcite-radio-button class=${g({ "group-card__input": !0, "group-card__input--compact": n })} .checked=${t} .disabled=${o} .value=${s.title ?? ""} .name=${p} @click=${(a) => a.stopPropagation()} @calciteRadioButtonChange=${() => {
+          this.arcgisGroupCardSelect.emit({ group: s, selected: !t });
+        }}><span class="screen-readers-only">${h(c.select ?? "", { title: s.title ?? "" })}</span></calcite-radio-button>`;
       case "multiple":
-        return r`<calcite-checkbox class="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>`;
+        return r`<calcite-checkbox class=${g({ "group-card__input": !0, "group-card__input--compact": n })} .checked=${t} .disabled=${o} .indeterminate=${this.indeterminate} @click=${(a) => a.stopPropagation()} @calciteCheckboxChange=${() => {
+          const a = !this.selected;
+          this.selected = a, this.arcgisGroupCardSelect.emit({ group: s, selected: a });
+        }}><span class="screen-readers-only">${s.title}</span></calcite-checkbox>`;
       case "none":
         return null;
       default:
-        return E(e);
+        return k(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);
+    const { group: e, selection: t, isLoaded: o, disabled: p, link: c, newTab: s, linkHandler: n, handleCardClick: a, selected: u } = this, i = this.getThumbnailGroup(e);
     return r`<section class=${g({
       "group-card": !0,
       "group-card--hoverable": t !== "none",
-      "group-card--selected": p,
-      "group-card--disabled": _,
-      "group-card--loaded": h,
-      [`group-card--${c}`]: !0
-    })} @click=${a ? void 0 : n} @mouseover=${() => {
+      "group-card--selected": u,
+      "group-card--disabled": p,
+      "group-card--loaded": o
+    })} @click=${c ? void 0 : a} @mouseover=${() => {
       this.hover = !0;
     }} @mouseout=${() => {
       this.hover = !1;
-    }} ${$(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)}>${c ? r`<a class="group-card__upper group-card__upper--compact group-card__upper--link" href=${c ?? d} target=${(s ? "_blank" : void 0) ?? d} rel=${(s ? "noopener noreferrer" : void 0) ?? d} @click=${(l) => {
+      n && !l.ctrlKey && !l.metaKey && (l.preventDefault(), n(this.group));
+    }}>${r`${this.renderSelectionInput()}<div class="group-card__thumbnail group-card__thumbnail--compact"><arcgis-portal-group-thumbnail .group=${i} .portal=${this.portal} scale=l></arcgis-portal-group-thumbnail></div><div class="group-card-flex-1"><h3 class="group-card__title group-card__title--compact"><span class="group-card__title__span">${e.title}</span></h3>${this.renderCompactBadges(e)}</div><slot name=content-end></slot>`}</a>` : r`<div class="group-card__upper group-card__upper--compact">${this.renderSelectionInput()}<div class="group-card__thumbnail group-card__thumbnail--compact"><arcgis-portal-group-thumbnail .group=${i} .portal=${this.portal} scale=l></arcgis-portal-group-thumbnail></div><div class="group-card-flex-1"><h3 class="group-card__title group-card__title--compact"><span class="group-card__title__span">${e.title}</span></h3>${this.renderCompactBadges(e)}</div><slot name=content-end></slot></div>`}</section>`;
   }
   render() {
-    const { group: e, selection: t, formFactor: c, loaded: h, disabled: _, link: a, showDateCreated: s, showDateUpdated: m, showSummary: d, showBadges: n } = this;
+    const { group: e, selection: t, isLoaded: o, disabled: p, link: c } = this;
     if (!e || !this.messages._lang)
       return;
     if (this.view === "compact")
       return this.renderCompactView();
-    const p = this.getAccessInfo(e.access ?? "private"), f = this.getThumbnailGroup(e), u = this.width < o.sm, v = this.preview === "top" && !a, { previewed: x } = this;
+    const s = this.getAccessInfo(e.access ?? "private"), n = this.getThumbnailGroup(e), a = this.preview === "top" && !c, u = this.previewed;
     return r`<section class=${g({
       "group-card": !0,
       "group-card--hoverable": t !== "none",
       "group-card--selected": this.selected,
-      "group-card--disabled": _,
-      "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": p,
+      "group-card--loaded": o,
+      "group-card--previewed": u
+    })} @click=${c ? void 0 : this.handleCardClick} tabindex=${(a ? 0 : void 0) ?? d} .role=${a ? "button" : void 0} aria-haspopup=${(a ? "dialog" : void 0) ?? d} @keydown=${(i) => {
+      a && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), this.handleCardClick());
+    }} ${f(this.sectionEl)}><slot name=content-top></slot>${c ? r`<a class="group-card__upper group-card__upper--link" href=${this.link ?? d} target=${(this.newTab ? "_blank" : void 0) ?? d} rel=${(this.newTab ? "noopener noreferrer" : void 0) ?? d} @mouseover=${() => {
       this.hover = !0;
     }} @mouseout=${() => {
       this.hover = !1;
@@ -166,22 +142,22 @@ class D extends C {
         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=${() => {
+      const l = i.target;
+      l instanceof HTMLElement && l.closest(".group-card__footer") && i.preventDefault();
+    }}>${this.renderListContent(e, n, s)}</a>` : r`<div class="group-card__upper" @mouseover=${() => {
       this.hover = !0;
     }} @mouseout=${() => {
       this.hover = !1;
-    }}><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, 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.arcgisGroupBrowserCardPreview.emit(this.group);
-    }}>${this.previewed ? this.messages.hidePreview : this.messages.preview}</calcite-button>` || ""}<div @click=${(i) => {
+    }}>${u ? 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);
+v("arcgis-portal-group-card", B);
 export {
-  D as ArcgisPortalGroupCard
+  B 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-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;
+}