@arcgis/portal-components 6.0.0-next.2 → 6.0.0-next.3

package/dist/components/arcgis-portal-ai-assistant/data/capability-registries/types.d.ts

@@ -1,4 +1,4 @@
-import type { PortalContentNavigationHash, PortalGroupNavigationHash, PortalGroupsNavigationHash, PortalOrgNavigationHash } from "../../agents/types.js";
+import type { PortalContentNavigationHash, PortalGroupNavigationHash, PortalGroupsNavigationHash, PortalOrgNavigationHash } from "../../types/navigation.js";
 
 /** Shape exported by a TypeScript module under data/capability-registries/. */
 export interface CapabilityRegistry {

package/dist/components/arcgis-portal-ai-assistant/types/assistantTools.d.ts

@@ -0,0 +1,44 @@
+import type { FunctionTool, FunctionToolConstructProperties, FunctionToolLike } from "@arcgis/ai-components/agent-utils/tools/FunctionTool.js";
+import type { RunnableConfig } from "@langchain/core/runnables";
+
+/**
+ * Factory that creates tools made available to the Portal assistant.
+ *
+ * The Portal-provided `tool` and `requestPortalAssistantUiAction` helpers
+ * avoid consumer imports for those capabilities.
+ *
+ * @param context
+ */
+export type PortalAssistantTools = (context: PortalAssistantToolsContext) => readonly FunctionToolLike[];
+
+export interface PortalAssistantToolsContext {
+  /** Requests a constrained UI action without exposing its callback to the model. */
+  requestPortalAssistantUiAction: (action: PortalAssistantUiAction, config?: RunnableConfig) => Promise<boolean>;
+  /** Creates a native function tool for use by the Portal assistant. */
+  tool: <TInput extends Record<string, unknown>, TOutput = unknown>(properties: FunctionToolConstructProperties<TInput, TOutput>) => FunctionTool<TInput, TOutput>;
+}
+
+/** UI slot that helps with user actions */
+export type PortalAssistantUiAction = InlineButtonUiAction | SelectionUiAction;
+
+/** A user-clickable inline button rendered by the assistant. */
+export interface InlineButtonUiAction {
+  /** Runs only after the user clicks the rendered button. */
+  callback: UiActionCallback;
+  /** Optional supporting text shown below the button. */
+  description?: string;
+  /** Selects the component-owned renderer for this action. */
+  kind: "inline-button";
+  /** User-visible button text. */
+  label: string;
+  /** When true, re-enables the button after a successful callback. */
+  repeatable?: boolean;
+}
+
+/** ! NOT YET SUPPORTED */
+export interface SelectionUiAction {
+  kind: "selection";
+}
+
+/** @param request */
+export type UiActionCallback = (request: { signal: AbortSignal; }) => Promise<void> | void;

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

@@ -2,6 +2,7 @@
 import type Portal from "@arcgis/core/portal/Portal.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { PortalEntityPickerEntityType, PortalEntityPickerMode, PortalEntityPickerSelection } from "../../types/portalEntityPicker.js";
+import type { ArcgisPortalItemCard } from "../arcgis-portal-item-card/customElement.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 import type { Icon as Icon } from "@esri/calcite-components/components/calcite-icon";
 
@@ -71,6 +72,12 @@ export abstract class ArcgisPortalEntityPicker extends LitElement {
   accessor query: string | undefined;
   /** The currently selected entity. The component does not mutate this property. */
   accessor selected: PortalEntityPickerSelection | null;
+  /**
+   * Controls selection indicators for inline results. `none` keeps click and keyboard selection without controls.
+   *
+   * @default "single"
+   */
+  accessor selectionMode: Exclude<ArcgisPortalItemCard["selection"], "multiple">;
   /** Sets focus on the search input. */
   setFocus(): Promise<void>;
   /**

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

@@ -5,15 +5,15 @@ import { keyed as h } from "lit/directives/keyed.js";
 import { LitElement as f, createEvent as v, safeStyleMap as g } from "@arcgis/lumina";
 import { createRef as u, ref as d } from "lit/directives/ref.js";
 import { u as $ } from "../../chunks/useT9n.js";
-import { c as b } from "../../chunks/string.js";
-import { s as R } from "../../chunks/dom.js";
-import { a as T } from "../../chunks/portal.js";
-import { r as S } from "../../chunks/request.js";
+import { c as T } from "../../chunks/string.js";
+import { s as b } from "../../chunks/dom.js";
+import { a as S } from "../../chunks/portal.js";
+import { r as w } from "../../chunks/request.js";
 import "../arcgis-portal-group-card/customElement.js";
 import "../arcgis-portal-item-card/customElement.js";
-import { S as k } from "../../chunks/utils.js";
+import { S as R } from "../../chunks/utils.js";
 import "../arcgis-portal-user-avatar/customElement.js";
-const w = [
+const k = [
   "esri_livingatlas",
   "esri_boundaries",
   "esri_demographics",
@@ -21,7 +21,7 @@ const w = [
   "esri_webstyles"
 ];
 function I(o) {
-  return R(o.trim()).replace(/[!*+\-&|()[\]{}^~?:"\\]/gu, "\\$&");
+  return b(o.trim()).replace(/[!*+\-&|()[\]{}^~?:"\\]/gu, "\\$&");
 }
 async function _({
   portal: o,
@@ -29,10 +29,10 @@ async function _({
   num: t = 100,
   query: s
 }) {
-  const i = I(e), l = `${T(o)}portals/self/users/search`, r = [i ? `(${i})` : void 0, s?.trim() ? `(${s.trim()})` : void 0];
-  o.isPortal && r.push(...w.map((p) => `-username:${p}`));
+  const i = I(e), l = `${S(o)}portals/self/users/search`, r = [i ? `(${i})` : void 0, s?.trim() ? `(${s.trim()})` : void 0];
+  o.isPortal && r.push(...k.map((p) => `-username:${p}`));
   const a = l.includes("www.arcgis.com") && o.isPortal ? { disableIdentityLookup: !0, addTokenManually: !1 } : {};
-  return await S({
+  return await w({
     url: l,
     portal: o,
     params: {
@@ -43,10 +43,10 @@ async function _({
     options: a
   });
 }
-function A(...o) {
+function P(...o) {
   return o.map((e) => e?.trim()).filter((e) => !!e).map((e) => `(${e})`).join(" AND ");
 }
-async function P(o, e, t, s = {}) {
+async function A(o, e, t, s = {}) {
   const i = Math.min(Math.max(s.num ?? 10, 1), 100);
   if (e === "user")
     try {
@@ -59,12 +59,12 @@ async function P(o, e, t, s = {}) {
     } catch (c) {
       return console.error(c), { error: { code: "unhandledError" } };
     }
-  const l = b(t);
+  const l = T(t);
   if (!l)
     return {};
   const r = {
     num: i,
-    query: A(l, s.query)
+    query: P(l, s.query)
   };
   try {
     return e === "group" ? { result: { entityType: e, result: await o.queryGroups(r) } } : { result: { entityType: e, result: await o.queryItems(r) } };
@@ -72,16 +72,16 @@ async function P(o, e, t, s = {}) {
     return console.error(c), { error: { code: "unhandledError" } };
   }
 }
-const O = y`:host{display:block;inline-size:100%}.entity-picker{display:flex;flex-direction:column;gap:.5rem;min-inline-size:16rem}.entity-picker__results{max-block-size:22rem;overflow-y:auto}.entity-picker__cards{display:flex;flex-direction:column;gap:.5rem}.entity-picker__status{color:var(--calcite-color-text-3);font-size:.875rem;margin:0;padding:.75rem}.entity-picker__selection{align-items:center;display:flex;gap:.5rem}.entity-picker__selection-label{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.entity-picker__input{inline-size:100%}`;
-class F extends f {
+const C = y`:host{display:block;inline-size:100%}.entity-picker{display:flex;flex-direction:column;gap:.5rem;min-inline-size:16rem}.entity-picker__results{max-block-size:var(--arcgis-portal-entity-picker-results-max-block-size, 22rem);overflow-y:auto}.entity-picker__cards{display:flex;flex-direction:column;gap:.5rem}.entity-picker__status{color:var(--calcite-color-text-3);font-size:.875rem;margin:0;padding:.75rem}.entity-picker__selection{align-items:center;display:var(--arcgis-portal-entity-picker-selection-display, flex);gap:.5rem}.entity-picker__selection-label{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.entity-picker__input{inline-size:100%}`;
+class O extends f {
   constructor() {
-    super(...arguments), this._messages = $({ blocking: !0, name: "portal-entity-picker" }), this.inputRef = u(), this.inputContainerRef = u(), this.resizeObserver = null, this.searchId = 0, this.searchTerm = "", this.isSearching = !1, this.searchFailed = !1, this.popoverOpen = !1, this.popoverWidth = 0, this.entityType = "group", this.mode = "inline", this.selected = null, this.num = 10, this.arcgisSelectionChange = v();
+    super(...arguments), this._messages = $({ blocking: !0, name: "portal-entity-picker" }), this.inputRef = u(), this.inputContainerRef = u(), this.resizeObserver = null, this.searchId = 0, this.searchTerm = "", this.isSearching = !1, this.searchFailed = !1, this.popoverOpen = !1, this.popoverWidth = 0, this.entityType = "group", this.mode = "inline", this.selectionMode = "single", this.selected = null, this.num = 10, this.arcgisSelectionChange = v();
   }
   static {
-    this.properties = { searchTerm: 16, isSearching: 16, searchFailed: 16, searchResult: 16, popoverOpen: 16, popoverWidth: 16, portal: 0, entityType: 1, mode: 1, selected: 0, query: 1, num: 9, icon: 1, messageOverrides: 0 };
+    this.properties = { searchTerm: 16, isSearching: 16, searchFailed: 16, searchResult: 16, popoverOpen: 16, popoverWidth: 16, portal: 0, entityType: 1, mode: 1, selectionMode: 1, selected: 0, query: 1, num: 9, icon: 1, messageOverrides: 0 };
   }
   static {
-    this.styles = O;
+    this.styles = C;
   }
   get searchLabel() {
     const { entityType: e, _messages: t } = this;
@@ -126,12 +126,12 @@ class F extends f {
     }
     this.isSearching = !0, this.mode === "popover" && (this.popoverOpen = !0), this.debounceId = window.setTimeout(() => {
       this.debounceId = void 0, this.search(t, s);
-    }, k);
+    }, R);
   }
   async search(e, t) {
     const { entityType: s, num: i, portal: l, query: r } = this;
     try {
-      const { error: c, result: a } = await P(l, s, e, { num: i, query: r });
+      const { error: c, result: a } = await A(l, s, e, { num: i, query: r });
       if (t !== this.searchId)
         return;
       this.searchFailed = !!c, this.searchResult = a;
@@ -173,6 +173,8 @@ class F extends f {
     await this.focusResult(t[s]);
   }
   handleResultsKeyDown(e) {
+    if (e.defaultPrevented)
+      return;
     const t = this.getFocusableResults(), s = e.composedPath(), i = t.findIndex((r) => s.includes(r));
     if (i === -1)
       return;
@@ -197,13 +199,17 @@ class F extends f {
     return h(e.id, n`<calcite-list-item .label=${e.title || e.id || ""} .description=${[e.owner, e.access].filter(Boolean).join(" · ")} .selected=${this.selected?.entityType === "group" && this.selected.entity.id === e.id} @calciteListItemSelect=${() => this.emitSelection({ entityType: "group", entity: e })}><calcite-avatar slot=content-start .fullName=${e.title ?? void 0} .thumbnail=${e.thumbnailUrl ?? void 0} scale=m></calcite-avatar></calcite-list-item>`);
   }
   renderInlineGroup(e) {
-    return h(e.id, n`<arcgis-portal-group-card .group=${e} .portal=${this.portal} .selected=${this.selected?.entityType === "group" && this.selected.entity.id === e.id} selection=none show-summary .user=${this.portal.user ?? void 0} view=compact></arcgis-portal-group-card>`);
+    return h(e.id, n`<arcgis-portal-group-card .group=${e} .portal=${this.portal} .preview=${this.selectionMode === "none" ? "top" : void 0} .selected=${this.selected?.entityType === "group" && this.selected.entity.id === e.id} .selection=${this.selectionMode} @arcgisGroupBrowserCardPreview=${() => this.emitSelection({ entityType: "group", entity: e })} @arcgisGroupCardSelect=${({ detail: t }) => {
+      t.selected && this.emitSelection({ entityType: "group", entity: t.group });
+    }} .user=${this.portal.user ?? void 0} view=compact></arcgis-portal-group-card>`);
   }
   renderItem(e) {
     return h(e.id, n`<calcite-list-item .label=${e.title || e.id || ""} .description=${[e.type, e.owner].filter(Boolean).join(" · ")} .selected=${this.selected?.entityType === "item" && this.selected.entity.id === e.id} @calciteListItemSelect=${() => this.emitSelection({ entityType: "item", entity: e })}><calcite-avatar slot=content-start .fullName=${e.title ?? void 0} .thumbnail=${e.thumbnailUrl ?? void 0} scale=m></calcite-avatar></calcite-list-item>`);
   }
   renderInlineItem(e) {
-    return h(e.id, n`<arcgis-portal-item-card .item=${e} .portal=${this.portal} .selected=${this.selected?.entityType === "item" && this.selected.entity.id === e.id} selection=none show-summary .user=${this.portal.user ?? void 0} view=list></arcgis-portal-item-card>`);
+    return h(e.id, n`<arcgis-portal-item-card .item=${e} .portal=${this.portal} .preview=${this.selectionMode === "none" ? "top" : void 0} .selected=${this.selected?.entityType === "item" && this.selected.entity.id === e.id} .selection=${this.selectionMode} @arcgisItemBrowserCardPreview=${() => this.emitSelection({ entityType: "item", entity: e })} @arcgisItemCardSelect=${({ detail: t }) => {
+      t.selected && this.emitSelection({ entityType: "item", entity: t.item });
+    }} .user=${this.portal.user ?? void 0} view=list></arcgis-portal-item-card>`);
   }
   renderUser(e) {
     return h(e.username, n`<calcite-list-item .label=${e.fullName || e.username} .description=${e.username} .selected=${this.selected?.entityType === "user" && this.selected.entity.username === e.username} @calciteListItemSelect=${() => this.emitSelection({ entityType: "user", entity: e })}><arcgis-portal-user-avatar slot=content-start .portal=${this.portal} .user=${e} scale=m></arcgis-portal-user-avatar></calcite-list-item>`);
@@ -220,10 +226,10 @@ class F extends f {
       const a = e === "group" ? r.noGroupsFound : e === "item" ? r.noItemsFound : r.noUsersFound;
       return n`<p class="entity-picker__status" role=status>${a}</p>`;
     }
-    return this.mode === "inline" && i?.entityType === "group" ? n`<div class="entity-picker__cards"><slot name=list-start></slot>${i.result.results.map((a) => this.renderInlineGroup(a))}</div>` : this.mode === "inline" && i?.entityType === "item" ? n`<div class="entity-picker__cards"><slot name=list-start></slot>${i.result.results.map((a) => this.renderInlineItem(a))}</div>` : n`<calcite-list interaction-mode=interactive .label=${this.searchLabel} selection-mode=none><slot name=list-start></slot>${i?.entityType === "group" ? i.result.results.map((a) => this.renderGroup(a)) : i?.entityType === "item" ? i.result.results.map((a) => this.renderItem(a)) : i?.result.results.map((a) => this.renderUser(a))}</calcite-list>`;
+    return this.mode === "inline" && i?.entityType === "group" ? n`<div class="entity-picker__cards"><slot name=list-start></slot>${i.result.results.map((a) => this.renderInlineGroup(a))}</div>` : this.mode === "inline" && i?.entityType === "item" ? n`<div class="entity-picker__cards"><slot name=list-start></slot>${i.result.results.map((a) => this.renderInlineItem(a))}</div>` : n`<calcite-list interaction-mode=interactive .label=${this.searchLabel} .selectionMode=${this.mode === "inline" && this.selectionMode === "single" ? "single-persist" : "none"}><slot name=list-start></slot>${i?.entityType === "group" ? i.result.results.map((a) => this.renderGroup(a)) : i?.entityType === "item" ? i.result.results.map((a) => this.renderItem(a)) : i?.result.results.map((a) => this.renderUser(a))}</calcite-list>`;
   }
   renderPicker(e = !0) {
-    return n`<div class="entity-picker">${this.selectedLabel && n`<div class="entity-picker__selection"><span class="entity-picker__selection-label">${this.selectedLabel}</span><calcite-button appearance=transparent icon-start=x kind=neutral .label=${this._messages.clearSelection} @click=${() => this.arcgisSelectionChange.emit(null)} scale=s></calcite-button></div>` || ""}<div class="entity-picker__input" ${d(this.inputContainerRef)}><calcite-input .icon=${this.icon} .label=${this.searchLabel} .placeholder=${this.searchLabel} .value=${this.searchTerm} @click=${() => {
+    return n`<div class="entity-picker">${this.selectedLabel && n`<div class="entity-picker__selection"><span class="entity-picker__selection-label">${this.selectedLabel}</span><calcite-button appearance=transparent icon-start=x kind=neutral .label=${this._messages.clearSelection} @click=${() => this.arcgisSelectionChange.emit(null)} scale=s></calcite-button></div>` || ""}<div class="entity-picker__input" ${d(this.inputContainerRef)}><calcite-input .icon=${this.icon} .clearable=${this.mode === "inline"} .label=${this.searchLabel} .placeholder=${this.searchLabel} .value=${this.searchTerm} @click=${() => {
       this.mode === "popover" && this.searchTerm.trim() && (this.popoverOpen = !0);
     }} @keydown=${(t) => {
       (t.key === "ArrowDown" || t.key === "ArrowUp") && this.searchResult?.result.results.length && (t.preventDefault(), this.focusResultAt(t.key === "ArrowDown" ? 0 : -1));
@@ -241,7 +247,7 @@ class F extends f {
     }}><div class="entity-picker__results" style=${g({ inlineSize: this.popoverWidth ? `${this.popoverWidth}px` : void 0 })}>${this.renderSearchResults()}</div></calcite-popover>`;
   }
 }
-m("arcgis-portal-entity-picker", F);
+m("arcgis-portal-entity-picker", O);
 export {
-  F as ArcgisPortalEntityPicker
+  O as ArcgisPortalEntityPicker
 };

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

@@ -1,7 +1,7 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 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 p } from "@arcgis/lumina";
+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";
@@ -67,7 +67,7 @@ class S extends v {
     const d = Array.from(e.children), o = d.indexOf(r);
     if (o < 0)
       return e.clientWidth;
-    const n = Number.parseFloat(i.columnGap || i.gap || "0") || 0, l = d.slice(0, o).reduce((s, u) => s + u.getBoundingClientRect().width, 0);
+    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) {
@@ -136,19 +136,19 @@ class S extends v {
     }
   }
   renderCompactView() {
-    const { group: e, selection: r, isLoaded: i, disabled: d, link: o, newTab: n, linkHandler: l, handleCardClick: s, selected: u } = this, a = this.getThumbnailGroup(e);
+    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": r !== "none",
-      "group-card--selected": u,
+      "group-card--selected": p,
       "group-card--disabled": d,
       "group-card--loaded": i
     })} tabindex=-1 @click=${o ? void 0 : s} @mouseover=${() => {
       this.hover = !0;
     }} @mouseout=${() => {
       this.hover = !1;
-    }} ${f(this.sectionEl)}>${o ? t`<a class="group-card__upper group-card__upper--compact group-card__upper--link" href=${o ?? p} target=${(n ? "_blank" : void 0) ?? p} rel=${(n ? "noopener noreferrer" : void 0) ?? p} @click=${(c) => {
-      l && !c.ctrlKey && !c.metaKey && (c.preventDefault(), l(this.group));
+    }} ${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() {
@@ -157,17 +157,17 @@ class S extends v {
       return;
     if (this.view === "compact")
       return this.renderCompactView();
-    const n = this.getAccessInfo(e.access ?? "private"), l = this.getThumbnailGroup(e), s = this.preview === "top" && !o, u = this.previewed;
+    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": r !== "none",
       "group-card--selected": this.selected,
       "group-card--disabled": d,
       "group-card--loaded": i,
-      "group-card--previewed": u
-    })} @click=${o ? void 0 : this.handleCardClick} tabindex=${(s ? 0 : void 0) ?? p} .role=${s ? "button" : void 0} aria-haspopup=${(s ? "dialog" : void 0) ?? p} @keydown=${(a) => {
+      "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 ?? p} target=${(this.newTab ? "_blank" : void 0) ?? p} rel=${(this.newTab ? "noopener noreferrer" : void 0) ?? p} @mouseover=${() => {
+    }} ${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;
@@ -176,17 +176,17 @@ class S extends v {
         a.preventDefault(), this.linkHandler(this.group);
         return;
       }
-      const c = a.target;
-      c instanceof HTMLElement && c.closest(".group-card__footer") && a.preventDefault();
+      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;
-    }}>${this.renderListContent(e, l, n)}</div>`}<div class="group-card__footer"><div class="group-card__footer__start"><slot name=actions-start></slot>${!this.hideOwner && t`<div class="group-card__profile-wrap"><arcgis-portal-user-popup .baseUrl=${this.getResolvedBaseUrl()} class="group-card__owner" .portal=${this.portal} .username=${e.owner ?? void 0} underline @arcgisUserPopupInternalUIAction=${({ detail: a, stopPropagation: c }) => {
-      c(), this.arcgisGroupBrowserInternalUIAction.emit(a);
-    }}></arcgis-portal-user-popup></div>` || ""}</div><div class="group-card__footer__end">${this.preview === "action" && t`<calcite-button scale=s .appearance=${u ? "solid" : "outline-fill"} kind=neutral @click=${() => {
+    }}>${this.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);
-    }}>${u ? this.messages.hidePreview : this.messages.preview}</calcite-button>` || ""}<div @click=${(a) => {
+    }}>${p ? this.messages.hidePreview : this.messages.preview}</calcite-button>` || ""}<div @click=${(a) => {
       a.stopPropagation();
     }}><slot name=actions-end></slot></div></div></div></section>`;
   }

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

@@ -1,17 +1,17 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as S } from "../../chunks/runtime.js";
-import { css as B, html as t } from "lit";
-import { formatDate as y, substitute as w } from "@arcgis/core/intl.js";
-import { LitElement as U, createEvent as u, safeClassMap as l, nothing as g } from "@arcgis/lumina";
+import { css as B, html as i } from "lit";
+import { formatDate as y, substitute as v } from "@arcgis/core/intl.js";
+import { LitElement as U, createEvent as _, safeClassMap as n, nothing as u } from "@arcgis/lumina";
 import { createRef as k, ref as I } from "lit/directives/ref.js";
-import { u as F } from "../../chunks/useT9n.js";
-import { a as z } from "../../chunks/functionalities.js";
-import { g as D } from "../../chunks/items.js";
-import { g as P } from "../../chunks/url.js";
+import { u as P } from "../../chunks/useT9n.js";
+import { a as F } from "../../chunks/functionalities.js";
+import { g as z } from "../../chunks/items.js";
+import { g as D } from "../../chunks/url.js";
 const E = B`: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-media{display:block;width:100%;height:100%}.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 O extends U {
   constructor() {
-    super(...arguments), this.messages = F({ blocking: !0 }), this.sectionEl = k(), this.linkEl = k(), this.handleCardClick = (e) => {
+    super(...arguments), this.messages = P({ 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);
@@ -23,7 +23,7 @@ class O extends U {
         }
         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 = u(), this.arcgisItemCardActionsOpen = u(), this.arcgisItemCardInternalUIAction = u(), this.arcgisItemCardSelect = u();
+    }, 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 = _(), this.arcgisItemCardActionsOpen = _(), this.arcgisItemCardInternalUIAction = _(), this.arcgisItemCardSelect = _();
   }
   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 };
@@ -32,7 +32,7 @@ class O extends U {
     this.styles = E;
   }
   get sourceJSON() {
-    return D(this.item);
+    return z(this.item);
   }
   async restoreFocus() {
     if (await this.updateComplete, this.link && this.linkEl.value) {
@@ -71,109 +71,109 @@ class O extends U {
     return typeof s == "string" ? s : a;
   }
   getResolvedBaseUrl() {
-    return this.portal ? `${P({ portal: this.portal, usePortalHostname: !this.portal.user })}/home` : "";
+    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 ?? "", {
+    return i`<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">${v(this.messages.lastUpdated ?? "", {
       date: y(e, { dateStyle: "medium" })
     })}</span>`;
   }
   renderSelectionInput(e, a = !1) {
-    const { selection: s, disableSelection: h, name: f, messages: v, item: c } = this, d = {
+    const { selection: s, disableSelection: p, name: g, messages: f, item: c } = this, l = {
       "item-card__input": !0,
       "item-card__input--compact": a
     };
     switch (s) {
       case "single":
-        return t`<calcite-radio-button class=${l(d)} .checked=${e} .disabled=${h} .value=${c.title ?? ""} .name=${f} @click=${(i) => {
-          i.stopPropagation();
+        return i`<calcite-radio-button class=${n(l)} .checked=${e} .disabled=${p} .value=${c.title ?? ""} .name=${g} @click=${(r) => {
+          r.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>`;
+        }}><span class="screen-readers-only">${v(f.select ?? "", { title: c.title ?? "" })}</span></calcite-radio-button>`;
       case "multiple":
-        return t`<calcite-checkbox class=${l(d)} .checked=${e} .disabled=${h} @click=${(i) => {
-          i.stopPropagation(), i.preventDefault();
+        return i`<calcite-checkbox class=${n(l)} .checked=${e} .disabled=${p} @click=${(r) => {
+          r.stopPropagation(), r.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 z(s);
+        return F(s);
     }
   }
   renderThumbnail(e, a) {
-    return this.showThumbnail ? a ? t`<figure class="item-card__thumbnail item-card__thumbnail--grid"><arcgis-portal-item-thumbnail class="item-card__thumbnail-media" .item=${e} .portal=${this.portal}></arcgis-portal-item-thumbnail>${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"><arcgis-portal-item-thumbnail class="item-card__thumbnail-media" .item=${e} .portal=${this.portal}></arcgis-portal-item-thumbnail></figure>` : null;
+    return this.showThumbnail ? a ? i`<figure class="item-card__thumbnail item-card__thumbnail--grid"><arcgis-portal-item-thumbnail class="item-card__thumbnail-media" .item=${e} .portal=${this.portal}></arcgis-portal-item-thumbnail>${this.preview === "top" && !this.link && i`<div class="item-card__hover-text">${this.previewed ? this.messages.closePreview : this.messages.preview}</div>` || ""}${this.link?.includes(`item.html?id=${e.id}`) && i`<div class="item-card__hover-text">${this.messages.viewItemDetails}</div>` || ""}</figure>` : i`<figure class="item-card__thumbnail"><arcgis-portal-item-thumbnail class="item-card__thumbnail-media" .item=${e} .portal=${this.portal}></arcgis-portal-item-thumbnail></figure>` : null;
   }
   renderAccess(e) {
-    return this.showAccess ? t`<div class="item-card__access-wrap" @click=${(a) => {
+    return this.showAccess ? i`<div class="item-card__access-wrap" @click=${(a) => {
       a.preventDefault(), a.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>`;
+    return !this.showBadges || !this.item || !this.portal ? null : this.view === "grid" ? i`<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>` : i`<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: a, user: s, selection: h, isLoaded: f, disabled: v, link: c, newTab: d } = this;
+    const { item: e, portal: a, user: s, selection: p, isLoaded: g, disabled: f, link: c, newTab: l } = this;
     if (!e || !a || !this.messages._lang)
       return;
-    const i = this.sourceJSON, _ = i.modified || e.modified, C = this.getAccessInfo(i.access), o = this.view === "grid", m = this.selected, b = this.preview === "action" && !this.recycleBin, $ = this.actions.length > 0 || this.showFavoriteInActionsMenu, x = this.showFavorite && !this.showFavoriteInActionsMenu && !!s, T = $ || x || b, A = (this.showAccess || o && this.showOwner) && T, p = this.preview === "top" && !c;
-    return t`<section class=${l({
+    const r = this.sourceJSON, h = r.modified || e.modified, C = this.getAccessInfo(r.access), o = this.view === "grid", d = this.selected, w = this.preview === "action" && !this.recycleBin, b = this.actions.length > 0 || this.showFavoriteInActionsMenu, $ = this.showFavorite && !this.showFavoriteInActionsMenu && !!s, T = b || $ || w, A = (this.showAccess || o && this.showOwner) && T, m = this.preview === "top" && !c;
+    return i`<section class=${n({
       "item-card": !0,
       "item-card--grid": o,
-      "item-card--hoverable": h !== "none",
-      "item-card--selected": m,
-      "item-card--disabled": v,
-      "item-card--loaded": f,
-      "item-card--previewed": this.previewed && p
-    })} @click=${c ? void 0 : this.handleCardClick} .tabIndex=${p ? 0 : -1} .role=${p ? "button" : void 0} aria-haspopup=${(p ? "dialog" : void 0) ?? g} @keydown=${(r) => {
-      p && (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 ?? g} target=${(d ? "_blank" : void 0) ?? g} rel=${(d ? "noopener noreferrer" : void 0) ?? g} @click=${(r) => {
-      if (this.linkHandler && !r.ctrlKey && !r.metaKey) {
-        r.preventDefault(), this.linkHandler(this.item);
+      "item-card--hoverable": p !== "none",
+      "item-card--selected": d,
+      "item-card--disabled": f,
+      "item-card--loaded": g,
+      "item-card--previewed": this.previewed && m
+    })} @click=${c ? void 0 : this.handleCardClick} .tabIndex=${m ? 0 : -1} .role=${m ? "button" : void 0} aria-haspopup=${(m ? "dialog" : void 0) ?? u} @keydown=${(t) => {
+      m && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.handleCardClick());
+    }} ${I(this.sectionEl)}><slot name=content-top></slot>${c ? i`<a class="item-card__upper item-card__upper--link" href=${c ?? u} target=${(l ? "_blank" : void 0) ?? u} rel=${(l ? "noopener noreferrer" : void 0) ?? u} @click=${(t) => {
+      if (this.linkHandler && !t.ctrlKey && !t.metaKey) {
+        t.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(m, !0) || ""}<div class="item-card-flex-1"><div class="item-card-flex"><div class="item-card__content"><div class="item-card-flex"><h3 class=${l({
+      const x = t.target;
+      x instanceof HTMLElement && x.closest(".item-card__footer") && t.preventDefault();
+    }} ${I(this.linkEl)}>${i`${o && this.renderThumbnail(e, !0) || ""}<div class="item-card-flex item-card__top">${!o && this.renderSelectionInput(d, !0) || ""}<div class="item-card-flex-1"><div class="item-card-flex"><div class="item-card__content"><div class="item-card-flex"><h3 class=${n({
       "item-card__title": !0,
       "item-card__title--grid": o,
-      "item-card__title--padded": this.showItemType || this.showSummary && !!i.snippet,
+      "item-card__title--padded": this.showItemType || this.showSummary && !!r.snippet,
       "item-card-flex-1": !0
-    })}><span class="item-card__title__span">${i.title ?? e.title ?? ""}</span></h3>${o && this.renderSelectionInput(m) || ""}</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=${s} .showHosted=${this.showItemTypeHosted} scale=s .item=${e} .portal=${a}></arcgis-portal-item-type>` || ""}${this.showDateUpdated && !!_ && this.renderUpdatedDetails(_) || ""}${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(m, !0) || ""}<div class="item-card-flex-1"><div class="item-card-flex"><div class="item-card__content"><div class="item-card-flex"><h3 class=${l({
+    })}><span class="item-card__title__span">${r.title ?? e.title ?? ""}</span></h3>${o && this.renderSelectionInput(d) || ""}</div>${this.showSummary && !!r.snippet && i`<p class="item-card__summary">${r.snippet.length > 250 ? `${r.snippet.substring(0, 250)}...` : r.snippet}</p>` || ""}<div class="item-card__details">${this.showItemType && i`<arcgis-portal-item-type class="item-card__divider item-card-item-type" ellipsis .user=${s} .showHosted=${this.showItemTypeHosted} scale=s .item=${e} .portal=${a}></arcgis-portal-item-type>` || ""}${this.showDateUpdated && !!h && this.renderUpdatedDetails(h) || ""}${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>` : i`<div class="item-card__upper">${o && this.renderThumbnail(e, !0) || ""}<div class="item-card-flex item-card__top">${!o && this.renderSelectionInput(d, !0) || ""}<div class="item-card-flex-1"><div class="item-card-flex"><div class="item-card__content"><div class="item-card-flex"><h3 class=${n({
       "item-card__title": !0,
       "item-card__title--grid": o,
-      "item-card__title--padded": this.showItemType || this.showSummary && !!i.snippet,
+      "item-card__title--padded": this.showItemType || this.showSummary && !!r.snippet,
       "item-card-flex-1": !0
-    })}><span class="item-card__title__span">${i.title ?? e.title ?? ""}</span></h3>${o && this.renderSelectionInput(m) || ""}</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=${s} .showHosted=${this.showItemTypeHosted} scale=s .item=${e} .portal=${a}></arcgis-portal-item-type>` || ""}${this.showDateUpdated && !!_ && this.renderUpdatedDetails(_) || ""}${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=${l({ "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=${a} .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(C)}${A && t`<span class="item-card__footer-divider"></span>` || ""}${x && t`<slot name=favorite-action><arcgis-portal-item-favorite .item=${e} .portal=${a} .user=${s} icon-only scale=s show-tooltip @arcgisItemFavoriteUpdate=${() => {
+    })}><span class="item-card__title__span">${r.title ?? e.title ?? ""}</span></h3>${o && this.renderSelectionInput(d) || ""}</div>${this.showSummary && !!r.snippet && i`<p class="item-card__summary">${r.snippet.length > 250 ? `${r.snippet.substring(0, 250)}...` : r.snippet}</p>` || ""}<div class="item-card__details">${this.showItemType && i`<arcgis-portal-item-type class="item-card__divider item-card-item-type" ellipsis .user=${s} .showHosted=${this.showItemTypeHosted} scale=s .item=${e} .portal=${a}></arcgis-portal-item-type>` || ""}${this.showDateUpdated && !!h && this.renderUpdatedDetails(h) || ""}${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=${n({ "item-card__footer__start": !0, "item-card__footer__start--owner": this.showOwner })}>${!this.hideActionsStart && i`<slot name=actions-start></slot>` || ""}${this.showOwner && !!r.owner && i`<div class="item-card__profile-wrap"><arcgis-portal-user-popup class="item-card__owner" .portal=${a} .username=${r.owner} .baseUrl=${this.getResolvedBaseUrl()} underline .zIndex=${this.userPopupZIndex} @arcgisUserPopupInternalUIAction=${(t) => {
+      t.stopPropagation(), this.arcgisItemCardInternalUIAction.emit(t.detail);
+    }}></arcgis-portal-user-popup></div>` || ""}</div>${this.renderAccess(C)}${A && i`<span class="item-card__footer-divider"></span>` || ""}${$ && i`<slot name=favorite-action><arcgis-portal-item-favorite .item=${e} .portal=${a} .user=${s} 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=${a} .user=${s} .actions=${this.actions} .label=${w(this.getMessage("itemActions", "Item actions for {title}"), {
-      title: i.title ?? e.title ?? ""
-    })} .showFavorite=${this.showFavoriteInActionsMenu && !!s} @arcgisItemActionsOpen=${({ detail: r, stopPropagation: n }) => {
-      n(), this.arcgisItemCardActionsOpen.emit({
+    }}></arcgis-portal-item-favorite></slot>` || ""}${w && i`<calcite-button scale=s class="item-card__preview-button" .appearance=${this.previewed ? "solid" : "outline"} kind=neutral @click=${(t) => {
+      t.preventDefault(), t.stopPropagation(), this.arcgisItemBrowserCardPreview.emit(this.item);
+    }}>${this.messages.preview}</calcite-button>` || ""}${b && i`<arcgis-portal-item-actions .item=${e} .portal=${a} .user=${s} .actions=${this.actions} .label=${v(this.getMessage("itemActions", "Item actions for {title}"), {
+      title: r.title ?? e.title ?? ""
+    })} .showFavorite=${this.showFavoriteInActionsMenu && !!s} @arcgisItemActionsOpen=${(t) => {
+      t.stopPropagation(), this.arcgisItemCardActionsOpen.emit({
         actions: this.actions,
-        el: r.el
+        el: t.detail.el
       });
-    }} @arcgisItemActionClick=${({ detail: r, stopPropagation: n }) => {
-      n(), this.arcgisItemCardInternalUIAction.emit({
+    }} @arcgisItemActionClick=${(t) => {
+      t.stopPropagation(), this.arcgisItemCardInternalUIAction.emit({
         category: "card action",
         action: "more options",
-        attribute: r
+        attribute: t.detail
       });
-    }} @arcgisItemFavoriteUpdate=${({ stopPropagation: r }) => {
-      r(), this.arcgisItemCardInternalUIAction.emit({
+    }} @arcgisItemFavoriteUpdate=${(t) => {
+      t.stopPropagation(), this.arcgisItemCardInternalUIAction.emit({
         category: "card action",
         action: "favorite"
       });
-    }}></arcgis-portal-item-actions>` || ""}<div @click=${(r) => {
-      r.stopPropagation();
+    }}></arcgis-portal-item-actions>` || ""}<div @click=${(t) => {
+      t.stopPropagation();
     }}><slot name=actions-end></slot></div></div></section>`;
   }
 }

package/dist/components/arcgis-portal-navigation/index.js

@@ -2,13 +2,13 @@ import "@esri/calcite-components/components/calcite-chip";
 import "@esri/calcite-components/components/calcite-tooltip";
 import "@esri/calcite-components/components/calcite-list-item";
 import "@esri/calcite-components/components/calcite-action";
-import "@esri/calcite-components/components/calcite-dropdown-item";
 import "@esri/calcite-components/components/calcite-icon";
 import "@esri/calcite-components/components/calcite-popover";
 import "@esri/calcite-components/components/calcite-list";
 import "../arcgis-portal-item-type/index.js";
 import "@esri/calcite-components/components/calcite-loader";
 import "@esri/calcite-components/components/calcite-button";
+import "@esri/calcite-components/components/calcite-dropdown-item";
 import "@esri/calcite-components/components/calcite-input";
 import "@esri/calcite-components/components/calcite-dropdown";
 import "../arcgis-portal-user-avatar/index.js";