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

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

@@ -0,0 +1,215 @@
+/// <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";
+import type { PortalItemAction } from "../arcgis-portal-item-actions/customElement.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+
+/**
+ * A card for displaying portal item information.
+ *
+ * @slot [content-top] - Inserted content appears above the card body.
+ * @slot [content-end] - Inserted content appears beneath the card details.
+ * @slot [sharing-summary] - Custom sharing summary content.
+ * @slot [share-summary] - Legacy alias for sharing-summary.
+ * @slot [actions-start] - Inserted content appears in the footer before owner information.
+ * @slot [actions-end] - Inserted content appears in the footer end area.
+ */
+export abstract class ArcgisPortalItemCard extends LitElement {
+  /** Pass a set of actions to appear inside an ellipsis menu. */
+  accessor actions: PortalItemAction[];
+  /**
+   * Disable interaction when true.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * Disable selection controls.
+   *
+   * @default false
+   */
+  accessor disableSelection: boolean;
+  /**
+   * @default false
+   * @internal
+   */
+  accessor hideActionsStart: boolean | undefined;
+  /** Item data from search results or a loaded PortalItem instance. */
+  accessor item: PortalItem;
+  /** Making this non-empty turns the top section into a link. */
+  accessor link: string | undefined;
+  /** Optional callback that runs when the link is activated. */
+  accessor linkHandler: ((item: PortalItem) => void) | undefined;
+  /** @internal */
+  protected messages: {
+      select: string;
+      lastUpdated: string;
+      viewItemDetails: string;
+      preview: string;
+      closePreview: string;
+      everyone: string;
+      organization: string;
+      group: string;
+      owner: string;
+      favorite: string;
+      deprecated: string;
+      itemActions: string;
+  } & T9nMeta<{
+      select: string;
+      lastUpdated: string;
+      viewItemDetails: string;
+      preview: string;
+      closePreview: string;
+      everyone: string;
+      organization: string;
+      group: string;
+      owner: string;
+      favorite: string;
+      deprecated: string;
+      itemActions: string;
+  }>;
+  /** Name of the radio button control for accessibility. */
+  accessor name: string | undefined;
+  /**
+   * Open link in new tab when true.
+   *
+   * @default false
+   */
+  accessor newTab: boolean;
+  /** Current portal instance. */
+  accessor portal: Portal;
+  /** Optionally emit preview behavior on click of card. */
+  accessor preview: ItemCardPreview | undefined;
+  /**
+   * Whether this card is currently previewed by parent browser state.
+   *
+   * @default false
+   */
+  accessor previewed: boolean;
+  /**
+   * Set to true to disable preview actions for recycle bin contexts.
+   *
+   * @default false
+   */
+  accessor recycleBin: boolean;
+  /**
+   * Set to true to mark item as selected.
+   *
+   * @default false
+   */
+  accessor selected: boolean;
+  /**
+   * Type of selection behavior.
+   *
+   * @default "none"
+   */
+  accessor selection: ItemCardSelection;
+  /**
+   * Show item sharing access detail.
+   *
+   * @default false
+   */
+  accessor showAccess: boolean;
+  /**
+   * Show item status badges.
+   *
+   * @default true
+   */
+  accessor showBadges: boolean;
+  /**
+   * Show tooltip content for item badges.
+   *
+   * @default true
+   */
+  accessor showBadgeTooltips: boolean;
+  /**
+   * Show last-updated detail.
+   *
+   * @default true
+   */
+  accessor showDateUpdated: boolean;
+  /**
+   * Allow user to favorite an item.
+   *
+   * @default false
+   */
+  accessor showFavorite: boolean;
+  /**
+   * Set to true to show favorites within the actions menu, rather than on the card itself.
+   *
+   * @default false
+   */
+  accessor showFavoriteInActionsMenu: boolean;
+  /**
+   * Show item type in card details.
+   *
+   * @default true
+   */
+  accessor showItemType: boolean;
+  /**
+   * Show hosted information in item type text when available.
+   *
+   * @default false
+   */
+  accessor showItemTypeHosted: boolean;
+  /**
+   * Show the owner information in the card footer.
+   *
+   * @default true
+   */
+  accessor showOwner: boolean;
+  /**
+   * Show item summary text in card body.
+   *
+   * @default false
+   */
+  accessor showSummary: boolean;
+  /**
+   * Show item thumbnail.
+   *
+   * @default true
+   */
+  accessor showThumbnail: boolean;
+  /** Current signed-in portal user. */
+  accessor user: PortalUser | undefined;
+  /** The z-index of the owner popup. */
+  accessor userPopupZIndex: number | undefined;
+  /**
+   * Select which view to use for the card.
+   *
+   * @default "list"
+   */
+  accessor view: ItemCardView;
+  restoreFocus(): Promise<void>;
+  /** Emitted when preview is requested from card interaction. */
+  readonly arcgisItemBrowserCardPreview: import("@arcgis/lumina").TargetedEvent<this, PortalItem | null>;
+  /** Emitted when the actions menu is opened. */
+  readonly arcgisItemCardActionsOpen: import("@arcgis/lumina").TargetedEvent<this, PortalItemCardActionsOpenDetail>;
+  /** Fires on internal component interaction for telemetry. */
+  readonly arcgisItemCardInternalUIAction: import("@arcgis/lumina").TargetedEvent<this, InternalUIAction>;
+  /** Emitted when the item is selected or deselected. */
+  readonly arcgisItemCardSelect: import("@arcgis/lumina").TargetedEvent<this, {
+      item: PortalItem;
+      selected: boolean;
+  }>;
+  readonly "@eventTypes": {
+    arcgisItemBrowserCardPreview: ArcgisPortalItemCard["arcgisItemBrowserCardPreview"]["detail"];
+    arcgisItemCardActionsOpen: ArcgisPortalItemCard["arcgisItemCardActionsOpen"]["detail"];
+    arcgisItemCardInternalUIAction: ArcgisPortalItemCard["arcgisItemCardInternalUIAction"]["detail"];
+    arcgisItemCardSelect: ArcgisPortalItemCard["arcgisItemCardSelect"]["detail"];
+  };
+}
+
+export type ItemCardView = "grid" | "list";
+
+export type ItemCardSelection = "multiple" | "none" | "single";
+
+export type ItemCardPreview = "action" | "top";
+
+export interface PortalItemCardActionsOpenDetail {
+  actions: PortalItemAction[];
+  el: Element | HTMLButtonElement;
+}

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

@@ -0,0 +1,190 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as S } from "../../chunks/runtime.js";
+import { css as U, html as t } from "lit";
+import { formatDate as y, substitute as w } from "@arcgis/core/intl.js";
+import { LitElement as B, createEvent as g, safeClassMap as d, nothing as l } from "@arcgis/lumina";
+import { createRef as k, ref as I } from "lit/directives/ref.js";
+import { u as F } from "../../chunks/useT9n.js";
+import { g as z } from "../../chunks/items.js";
+import { g as D } from "../../chunks/url.js";
+import { g as P } from "../../chunks/thumbnail.js";
+import { a as E } from "../../chunks/functionalities.js";
+const O = U`:host{display:block;min-width:0;container-type:inline-size;container-name:portal-item-card}.item-card{position:relative;display:flex;min-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}}.item-card--loaded{opacity:1}.item-card--selected{border-color:var(--calcite-color-brand)}.item-card--previewed{outline:1px solid var(--calcite-color-brand);outline-offset:-2px}.item-card--hoverable{cursor:pointer}.item-card--disabled{opacity:.5;pointer-events:none}.item-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}.item-card__upper:hover{background-color:var(--calcite-color-background)}.item-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}}.item-card__upper:hover .item-card__hover-text,.item-card:focus .item-card__hover-text{opacity:1}.item-card__top{padding:.75rem}.item-card__content{display:flex;min-width:0;flex:1 1 0%;flex-direction:column}.item-card__content-end{min-width:0;margin-block-start:.25rem}.item-card__title{margin:0;overflow-wrap:break-word;padding:0;font-size:.875rem;font-weight:500;line-height:1.375}.item-card__title--grid{font-size:.875rem}.item-card__title--padded{margin-bottom:.25rem}.item-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}.item-card--previewed .item-card__title__span,.item-card__upper--link:hover .item-card__title__span{background-image:linear-gradient(var(--calcite-color-text-3),var(--calcite-color-text-3))}.item-card__summary{margin:0;flex:1 1 0%;color:var(--calcite-color-text-2);display:none;overflow-wrap:break-word;padding:0;font-size:.875rem;line-height:1.25}.item-card__detail--updated-full.item-card__divider{display:none}.item-card__details{margin-block-start:.25rem;display:flex;flex-direction:row}.item-card__detail{font-size:.75rem;line-height:1.35;color:var(--calcite-color-text-2)}.item-card__divider{display:flex;align-items:center;flex:0 0 auto}.item-card__divider:not([empty]):before{content:"";height:1.25rem;width:1px;background-color:var(--calcite-color-border-1);margin-inline:.75rem}.item-card__divider:first-child:before{display:none}.item-card__thumbnail{margin:0;width:5rem;height:3.5rem;margin-inline-start:.5rem;flex:0 0 auto;overflow:hidden;border-radius:.125rem}.item-card__thumbnail--grid{position:relative;width:100%;height:auto;aspect-ratio:16 / 9;margin:0;margin-inline-start:0;border-radius:0;border-bottom:1px solid var(--calcite-color-foreground-2)}.item-card__thumbnail-image{width:100%;height:100%;object-fit:cover;display:block}.item-card__thumbnail-fallback{width:100%;height:100%;background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-3);display:flex;align-items:center;justify-content:center}.item-card__hover-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;color:var(--calcite-color-foreground-1);background-color:var(--calcite-color-transparent-scrim);font-size:.75rem;font-weight:500;text-align:center;transition:opacity var(--calcite-animation-timing) ease-in-out}.item-card__badges{display:flex;flex-wrap:wrap}.item-card__badges--compact{max-width:100%}.item-card__badges--responsive{display:none}.item-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)}.item-card__footer__start{display:flex;min-width:0;flex:1 1 0%;align-items:center;overflow:hidden;width:100%;margin-inline-end:.75rem}.item-card__footer__start--owner{margin-inline-start:-.25rem}.item-card__profile-wrap{max-width:100%;padding:.25rem}.item-card__owner{min-width:0}.item-card__footer-divider{height:1.25rem;width:1px;margin-inline:.75rem;background-color:var(--calcite-color-border-input)}.item-card__preview-button{margin-inline-end:.5rem}.item-card__footer arcgis-portal-item-favorite,.item-card__footer arcgis-portal-item-actions{display:inline-flex;align-items:center}.item-card__access-wrap{display:flex;align-items:center}.item-card__access{display:flex;align-items:center;color:var(--calcite-color-text-2);font-size:.75rem}.item-card__detail__icon{margin-inline-end:.375rem}.item-card-flex{display:flex}.item-card-flex-1{min-width:0;flex:1 1 0%}.item-card__input{margin-inline-end:1rem;margin-top:.125rem}.item-card__title+.item-card__input{margin-inline-start:1rem;margin-inline-end:0}.item-card__input--compact{height:100%;display:flex;align-items:center}.item-card-item-type{min-width: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}@container portal-item-card (max-width: 320px){.item-card__title,.item-card__title--grid{font-size:.75rem}.item-card:not(.item-card--grid) .item-card__thumbnail{width:3.4375rem;margin-inline-start:.75rem}.item-card__footer__start{margin-inline-end:.5rem}.item-card__detail--updated-short{display:none}}@container portal-item-card (min-width: 321px) and (max-width: 480px){.item-card__title{font-size:.875rem}}@container portal-item-card (min-width: 481px){.item-card__top{padding:1rem}.item-card__title{font-size:1.125rem}.item-card__title--padded{margin-bottom:.5rem}.item-card__detail{font-size:.875rem}.item-card__footer{padding:.5rem 1rem}.item-card:not(.item-card--grid) .item-card__thumbnail{width:8rem;margin-inline-start:2rem}.item-card__summary{display:block}}@container portal-item-card (min-width: 641px){.item-card__badges--compact{display:none}.item-card__badges--responsive{display:flex}.item-card__summary{display:block}.item-card__footer{flex-wrap:nowrap;gap:0}.item-card__footer__start{width:auto;margin-inline-end:.75rem}.item-card__detail--updated-short{display:none}.item-card__detail--updated-full.item-card__divider{display:flex}.item-card:not(.item-card--grid) .item-card__thumbnail{height:4rem}}`;
+class H extends B {
+  constructor() {
+    super(...arguments), this.messages = F({ blocking: !0 }), this.sectionEl = k(), this.linkEl = k(), this.handleCardClick = (e) => {
+      if (!(this.link || this.disabled || e?.target?.closest(".item-card__footer"))) {
+        if (this.preview === "top" && !this.recycleBin) {
+          this.arcgisItemBrowserCardPreview.emit(this.item);
+          return;
+        }
+        if (this.selection === "single") {
+          this.selected = !0, this.arcgisItemCardSelect.emit({ item: this.item, selected: !0 });
+          return;
+        }
+        this.selection === "multiple" && (this.selected = !this.selected, this.arcgisItemCardSelect.emit({ item: this.item, selected: this.selected }));
+      }
+    }, this.isLoaded = !1, this.selected = !1, this.selection = "none", this.view = "list", this.previewed = !1, this.showOwner = !0, this.showDateUpdated = !0, this.showItemType = !0, this.showItemTypeHosted = !1, this.showSummary = !1, this.showBadges = !0, this.showBadgeTooltips = !0, this.showFavorite = !1, this.showFavoriteInActionsMenu = !1, this.showAccess = !1, this.showThumbnail = !0, this.newTab = !1, this.disableSelection = !1, this.disabled = !1, this.actions = [], this.recycleBin = !1, this.arcgisItemBrowserCardPreview = g(), this.arcgisItemCardActionsOpen = g(), this.arcgisItemCardInternalUIAction = g(), this.arcgisItemCardSelect = g();
+  }
+  static {
+    this.properties = { isLoaded: 16, item: 0, user: 0, portal: 0, selected: 7, selection: 1, view: 1, preview: 1, previewed: 5, name: 1, showOwner: 5, showDateUpdated: 5, showItemType: 5, showItemTypeHosted: 5, showSummary: 5, showBadges: 5, showBadgeTooltips: 5, showFavorite: 5, showFavoriteInActionsMenu: 5, showAccess: 5, showThumbnail: 5, link: 1, linkHandler: 0, newTab: 5, disableSelection: 5, disabled: 7, userPopupZIndex: 9, actions: 0, recycleBin: 5, hideActionsStart: 5 };
+  }
+  static {
+    this.styles = O;
+  }
+  get sourceJSON() {
+    return z(this.item);
+  }
+  async restoreFocus() {
+    if (this.link && this.linkEl.value) {
+      this.linkEl.value.focus();
+      return;
+    }
+    this.preview === "top" && this.sectionEl.value && this.sectionEl.value.focus();
+  }
+  firstUpdated() {
+    requestAnimationFrame(() => {
+      this.isLoaded = !0;
+    });
+  }
+  getThumbnailUri(e) {
+    return e.thumbnailUrl ?? P(this.portal, e);
+  }
+  getAccessInfo(e) {
+    return {
+      public: {
+        icon: "globe",
+        text: this.messages.everyone
+      },
+      private: {
+        icon: "lock",
+        text: this.messages.owner
+      },
+      org: {
+        icon: "organization",
+        text: this.messages.organization
+      },
+      shared: {
+        icon: "group",
+        text: this.messages.group
+      }
+    }[e];
+  }
+  getMessage(e, s = "") {
+    const a = this.messages[e];
+    return typeof a == "string" ? a : s;
+  }
+  getResolvedBaseUrl() {
+    return this.portal ? `${D({ portal: this.portal, usePortalHostname: !this.portal.user })}/home` : "";
+  }
+  renderUpdatedDetails(e) {
+    return t`<span class="item-card__detail item-card__detail--updated-short item-card__divider">${y(e, { dateStyle: "medium" })}</span><span class="item-card__detail item-card__detail--updated-full item-card__divider">${w(this.messages.lastUpdated ?? "", {
+      date: y(e, { dateStyle: "medium" })
+    })}</span>`;
+  }
+  renderSelectionInput(e, s = !1) {
+    const { selection: a, disableSelection: _, name: f, messages: v, item: c } = this, m = {
+      "item-card__input": !0,
+      "item-card__input--compact": s
+    };
+    switch (a) {
+      case "single":
+        return t`<calcite-radio-button class=${d(m)} .checked=${e} .disabled=${_} .value=${c.title ?? ""} .name=${f} @click=${(i) => {
+          i.stopPropagation();
+        }} @calciteRadioButtonChange=${() => {
+          this.selected = !0, this.arcgisItemCardSelect.emit({ item: c, selected: !0 });
+        }}><span class="screen-readers-only">${w(v.select ?? "", { title: c.title ?? "" })}</span></calcite-radio-button>`;
+      case "multiple":
+        return t`<calcite-checkbox class=${d(m)} .checked=${e} .disabled=${_} @click=${(i) => {
+          i.stopPropagation(), i.preventDefault();
+        }} @calciteCheckboxChange=${() => {
+          this.selected = !e, this.arcgisItemCardSelect.emit({ item: c, selected: !e });
+        }}><span class="screen-readers-only">${c.title ?? ""}</span></calcite-checkbox>`;
+      case "none":
+        return null;
+      default:
+        return E(a);
+    }
+  }
+  renderThumbnail(e, s) {
+    if (!this.showThumbnail)
+      return null;
+    const a = this.getThumbnailUri(e);
+    return s ? t`<figure class="item-card__thumbnail item-card__thumbnail--grid">${a ? t`<img class="item-card__thumbnail-image" src=${a ?? l} alt>` : t`<div class="item-card__thumbnail-fallback" aria-hidden=true><calcite-icon icon=file scale=m></calcite-icon></div>`}${this.preview === "top" && !this.link && t`<div class="item-card__hover-text">${this.previewed ? this.messages.closePreview : this.messages.preview}</div>` || ""}${this.link?.includes(`item.html?id=${e.id}`) && t`<div class="item-card__hover-text">${this.messages.viewItemDetails}</div>` || ""}</figure>` : t`<figure class="item-card__thumbnail">${a ? t`<img class="item-card__thumbnail-image" src=${a ?? l} alt>` : t`<div class="item-card__thumbnail-fallback" aria-hidden=true><calcite-icon icon=file scale=m></calcite-icon></div>`}</figure>`;
+  }
+  renderAccess(e) {
+    return this.showAccess ? t`<div class="item-card__access-wrap" @click=${(s) => {
+      s.preventDefault(), s.stopPropagation();
+    }}><slot name=sharing-summary><slot name=share-summary><span class="item-card__access"><calcite-icon .icon=${e.icon} scale=s class="item-card__detail__icon"></calcite-icon>${e.text}</span></slot></slot></div>` : null;
+  }
+  renderBadges() {
+    return !this.showBadges || !this.item || !this.portal ? null : this.view === "grid" ? t`<arcgis-portal-item-badges class="item-card__badges item-card__divider" .item=${this.item} .portal=${this.portal} .user=${this.user} scale=s appearance=outline-fill .showTooltips=${this.showBadgeTooltips} width=narrow></arcgis-portal-item-badges>` : t`<arcgis-portal-item-badges class="item-card__badges item-card__badges--compact item-card__divider" .item=${this.item} .portal=${this.portal} .user=${this.user} scale=s appearance=outline-fill .showTooltips=${this.showBadgeTooltips} width=narrow></arcgis-portal-item-badges><arcgis-portal-item-badges class="item-card__badges item-card__badges--responsive item-card__divider" .item=${this.item} .portal=${this.portal} .user=${this.user} scale=s appearance=outline-fill .showTooltips=${this.showBadgeTooltips} width=full></arcgis-portal-item-badges>`;
+  }
+  render() {
+    const { item: e, portal: s, user: a, selection: _, isLoaded: f, disabled: v, link: c, newTab: m } = this;
+    if (!e || !s || !this.messages._lang)
+      return;
+    const i = this.sourceJSON, u = i.modified || e.modified, T = this.getAccessInfo(i.access), o = this.view === "grid", p = this.selected, b = this.preview === "action" && !this.recycleBin, $ = this.actions.length > 0 || this.showFavoriteInActionsMenu, x = this.showFavorite && !this.showFavoriteInActionsMenu && !!a, A = $ || x || b, C = (this.showAccess || o && this.showOwner) && A, h = this.preview === "top" && !c;
+    return t`<section class=${d({
+      "item-card": !0,
+      "item-card--grid": o,
+      "item-card--hoverable": _ !== "none",
+      "item-card--selected": p,
+      "item-card--disabled": v,
+      "item-card--loaded": f,
+      "item-card--previewed": this.previewed && h
+    })} @click=${c ? void 0 : this.handleCardClick} tabindex=${(h ? 0 : void 0) ?? l} .role=${h ? "button" : void 0} aria-haspopup=${(h ? "dialog" : void 0) ?? l} @keydown=${(r) => {
+      h && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), this.handleCardClick());
+    }} ${I(this.sectionEl)}><slot name=content-top></slot>${c ? t`<a class="item-card__upper item-card__upper--link" href=${c ?? l} target=${(m ? "_blank" : void 0) ?? l} rel=${(m ? "noopener noreferrer" : void 0) ?? l} @click=${(r) => {
+      if (this.linkHandler && !r.ctrlKey && !r.metaKey) {
+        r.preventDefault(), this.linkHandler(this.item);
+        return;
+      }
+      const n = r.target;
+      n instanceof HTMLElement && n.closest(".item-card__footer") && r.preventDefault();
+    }} ${I(this.linkEl)}>${t`${o && this.renderThumbnail(e, !0) || ""}<div class="item-card-flex item-card__top">${!o && this.renderSelectionInput(p, !0) || ""}<div class="item-card-flex-1"><div class="item-card-flex"><div class="item-card__content"><div class="item-card-flex"><h3 class=${d({
+      "item-card__title": !0,
+      "item-card__title--grid": o,
+      "item-card__title--padded": this.showItemType || this.showSummary && !!i.snippet,
+      "item-card-flex-1": !0
+    })}><span class="item-card__title__span">${i.title ?? e.title ?? ""}</span></h3>${o && this.renderSelectionInput(p) || ""}</div>${this.showSummary && !!i.snippet && t`<p class="item-card__summary">${i.snippet.length > 250 ? `${i.snippet.substring(0, 250)}...` : i.snippet}</p>` || ""}<div class="item-card__details">${this.showItemType && t`<arcgis-portal-item-type class="item-card__divider item-card-item-type" ellipsis .user=${a} .showHosted=${this.showItemTypeHosted} scale=s .item=${e} .portal=${s}></arcgis-portal-item-type>` || ""}${this.showDateUpdated && !!u && this.renderUpdatedDetails(u) || ""}${this.renderBadges()}</div></div>${!o && this.renderThumbnail(e, !1) || ""}</div><div class="item-card__content-end"><slot name=content-end></slot></div></div></div>`}</a>` : t`<div class="item-card__upper">${o && this.renderThumbnail(e, !0) || ""}<div class="item-card-flex item-card__top">${!o && this.renderSelectionInput(p, !0) || ""}<div class="item-card-flex-1"><div class="item-card-flex"><div class="item-card__content"><div class="item-card-flex"><h3 class=${d({
+      "item-card__title": !0,
+      "item-card__title--grid": o,
+      "item-card__title--padded": this.showItemType || this.showSummary && !!i.snippet,
+      "item-card-flex-1": !0
+    })}><span class="item-card__title__span">${i.title ?? e.title ?? ""}</span></h3>${o && this.renderSelectionInput(p) || ""}</div>${this.showSummary && !!i.snippet && t`<p class="item-card__summary">${i.snippet.length > 250 ? `${i.snippet.substring(0, 250)}...` : i.snippet}</p>` || ""}<div class="item-card__details">${this.showItemType && t`<arcgis-portal-item-type class="item-card__divider item-card-item-type" ellipsis .user=${a} .showHosted=${this.showItemTypeHosted} scale=s .item=${e} .portal=${s}></arcgis-portal-item-type>` || ""}${this.showDateUpdated && !!u && this.renderUpdatedDetails(u) || ""}${this.renderBadges()}</div></div>${!o && this.renderThumbnail(e, !1) || ""}</div><div class="item-card__content-end"><slot name=content-end></slot></div></div></div></div>`}<div class="item-card__footer"><div class=${d({ "item-card__footer__start": !0, "item-card__footer__start--owner": this.showOwner })}>${!this.hideActionsStart && t`<slot name=actions-start></slot>` || ""}${this.showOwner && !!i.owner && t`<div class="item-card__profile-wrap"><arcgis-portal-user-popup class="item-card__owner" .portal=${s} .username=${i.owner} .baseUrl=${this.getResolvedBaseUrl()} underline .zIndex=${this.userPopupZIndex} @arcgisUserPopupInternalUIAction=${({ detail: r, stopPropagation: n }) => {
+      n(), this.arcgisItemCardInternalUIAction.emit(r);
+    }}></arcgis-portal-user-popup></div>` || ""}</div>${this.renderAccess(T)}${C && t`<span class="item-card__footer-divider"></span>` || ""}${x && t`<slot name=favorite-action><arcgis-portal-item-favorite .item=${e} .portal=${s} .user=${a} icon-only scale=s show-tooltip @arcgisItemFavoriteUpdate=${() => {
+      this.arcgisItemCardInternalUIAction.emit({
+        category: "card action",
+        action: "favorite"
+      });
+    }}></arcgis-portal-item-favorite></slot>` || ""}${b && t`<calcite-button scale=s class="item-card__preview-button" .appearance=${this.previewed ? "solid" : "outline"} kind=neutral @click=${(r) => {
+      r.preventDefault(), r.stopPropagation(), this.arcgisItemBrowserCardPreview.emit(this.item);
+    }}>${this.messages.preview}</calcite-button>` || ""}${$ && t`<arcgis-portal-item-actions .item=${e} .portal=${s} .user=${a} .actions=${this.actions} .label=${w(this.getMessage("itemActions", "Item actions for {title}"), {
+      title: i.title ?? e.title ?? ""
+    })} .showFavorite=${this.showFavoriteInActionsMenu && !!a} @arcgisItemActionsOpen=${({ detail: r, stopPropagation: n }) => {
+      n(), this.arcgisItemCardActionsOpen.emit({
+        actions: this.actions,
+        el: r.el
+      });
+    }} @arcgisItemActionClick=${({ detail: r, stopPropagation: n }) => {
+      n(), this.arcgisItemCardInternalUIAction.emit({
+        category: "card action",
+        action: "more options",
+        attribute: r
+      });
+    }} @arcgisItemFavoriteUpdate=${({ stopPropagation: r }) => {
+      r(), this.arcgisItemCardInternalUIAction.emit({
+        category: "card action",
+        action: "favorite"
+      });
+    }}></arcgis-portal-item-actions>` || ""}<div @click=${(r) => {
+      r.stopPropagation();
+    }}><slot name=actions-end></slot></div></div></section>`;
+  }
+}
+S("arcgis-portal-item-card", H);
+export {
+  H as ArcgisPortalItemCard
+};

package/dist/components/arcgis-portal-item-card/index.d.ts

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

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

@@ -0,0 +1,10 @@
+import "@esri/calcite-components/components/calcite-radio-button";
+import "@esri/calcite-components/components/calcite-checkbox";
+import "@esri/calcite-components/components/calcite-icon";
+import "../arcgis-portal-item-badges/index.js";
+import "../arcgis-portal-item-type/index.js";
+import "../arcgis-portal-user-popup/index.js";
+import "../arcgis-portal-item-favorite/index.js";
+import "@esri/calcite-components/components/calcite-button";
+import "../arcgis-portal-item-actions/index.js";
+export * from "./customElement.js";

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

@@ -0,0 +1,36 @@
+/// <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 "./utils.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+import type { Button as Button } from "@esri/calcite-components/components/calcite-button";
+
+export abstract class ArcgisPortalItemFavorite extends LitElement {
+  /** @default false */
+  accessor iconOnly: boolean;
+  accessor item: PortalItem;
+  /** @internal */
+  protected messages: {
+      add: string;
+      remove: string;
+  } & T9nMeta<{
+      add: string;
+      remove: string;
+  }>;
+  accessor portal: Portal;
+  /** @default "m" */
+  accessor scale: Button["scale"];
+  /** @default false */
+  accessor showTooltip: boolean;
+  accessor user: PortalUser | undefined;
+  /** @default "full" */
+  accessor width: Button["width"];
+  setFocus(): Promise<void>;
+  /** Fires when user changes the favorite status. */
+  readonly arcgisItemFavoriteUpdate: import("@arcgis/lumina").TargetedEvent<this, FavoriteUpdate>;
+  readonly "@eventTypes": {
+    arcgisItemFavoriteUpdate: ArcgisPortalItemFavorite["arcgisItemFavoriteUpdate"]["detail"];
+  };
+}

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

@@ -0,0 +1,66 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as n } from "../../chunks/runtime.js";
+import { LitElement as c, createEvent as d } from "@arcgis/lumina";
+import { html as r } from "lit";
+import { createRef as v, ref as u } from "lit/directives/ref.js";
+import { u as f } from "../../chunks/useT9n.js";
+import { g as m, t as p, i as F } from "../../chunks/utils.js";
+class g extends c {
+  constructor() {
+    super(), this.messages = f({ blocking: !0 }), this.buttonRef = v(), this.favoriteRequestId = 0, this.handleFavoriteUpdate = (t) => {
+      const i = m(t, this.item?.id ?? void 0);
+      i && (this.isFavorite = i.favorite);
+    }, this.handleToggleFavorite = async (t) => {
+      t.preventDefault(), t.stopPropagation();
+      const { item: i, portal: s, user: a } = this;
+      if (!i.id || !s || !a)
+        return;
+      const h = {
+        id: i.id,
+        access: i.access
+      }, o = this.isFavorite, e = !o;
+      this.isFavorite = e;
+      const { updated: l } = await p({
+        currentFavorite: o,
+        item: h,
+        portal: s,
+        user: a
+      });
+      if (!l) {
+        this.isFavorite = !e;
+        return;
+      }
+      this.arcgisItemFavoriteUpdate.emit({
+        id: i.id,
+        favorite: e
+      });
+    }, this.isFavorite = !1, this.isFavoriteLoaded = !1, this.width = "full", this.iconOnly = !1, this.scale = "m", this.showTooltip = !1, this.arcgisItemFavoriteUpdate = d(), this.listenOn(window, "arcgisItemFavoriteUpdate", this.handleFavoriteUpdate);
+  }
+  static {
+    this.properties = { isFavorite: 16, isFavoriteLoaded: 16, item: 0, portal: 0, user: 0, width: 1, iconOnly: 5, scale: 1, showTooltip: 5 };
+  }
+  async setFocus() {
+    await this.buttonRef.value?.setFocus();
+  }
+  willUpdate(t) {
+    (t.has("item") || t.has("portal") || t.has("user")) && (this.isFavoriteLoaded = !1, this.refreshFavorite());
+  }
+  async refreshFavorite() {
+    if (!this.item.id || !this.portal || !this.user) {
+      this.isFavorite = !1;
+      return;
+    }
+    const t = ++this.favoriteRequestId, i = await F(this.item.id, this.portal, this.user);
+    t === this.favoriteRequestId && (this.isFavorite = i, this.isFavoriteLoaded = !0);
+  }
+  render() {
+    if (!this.isFavoriteLoaded)
+      return null;
+    const t = this.isFavorite ? this.messages.remove : this.messages.add;
+    return r`<calcite-button .width=${this.iconOnly ? "auto" : this.width} .scale=${this.scale} .appearance=${this.iconOnly ? "transparent" : "outline-fill"} kind=neutral .iconStart=${this.isFavorite ? "star-f" : "star"} .ariaLabel=${this.iconOnly ? t : void 0} @click=${this.handleToggleFavorite} ${u(this.buttonRef)}>${this.iconOnly ? null : t}</calcite-button>${this.showTooltip ? r`<calcite-tooltip .referenceElement=${this.buttonRef.value}>${t}</calcite-tooltip>` : null}`;
+  }
+}
+n("arcgis-portal-item-favorite", g);
+export {
+  g as ArcgisPortalItemFavorite
+};

package/dist/components/arcgis-portal-item-favorite/index.d.ts

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

package/dist/components/arcgis-portal-item-favorite/index.js

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

package/dist/components/arcgis-portal-item-favorite/utils.d.ts

@@ -0,0 +1,4 @@
+export type FavoriteUpdate = {
+  id: string;
+  favorite: boolean;
+};

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

@@ -28,6 +28,7 @@ export abstract class ArcgisPortalItemType extends LitElement {
       hostedCollectionMultidimensional: string;
       collectionMultidimensional: string;
       multidimensional: string;
+      query: string;
       collection: string;
       photoLocations: string;
       locatorView: string;
@@ -56,6 +57,7 @@ export abstract class ArcgisPortalItemType extends LitElement {
       hostedCollectionMultidimensional: string;
       collectionMultidimensional: string;
       multidimensional: string;
+      query: string;
       collection: string;
       photoLocations: string;
       locatorView: string;
@@ -87,5 +89,5 @@ export abstract class ArcgisPortalItemType extends LitElement {
    * @default false
    */
   accessor showHosted: boolean | undefined;
-  accessor user: PortalUser | undefined;
+  accessor user: PortalUser | null | undefined;
 }