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

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

@@ -1,16 +1,15 @@
 /* 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 { css as B, 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 { LitElement as U, createEvent as u, safeClassMap as l, nothing as g } 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 {
+import { a as z } from "../../chunks/functionalities.js";
+import { g as D } from "../../chunks/items.js";
+import { g as P } 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) => {
       if (!(this.link || this.disabled || e?.target?.closest(".item-card__footer"))) {
@@ -24,32 +23,29 @@ class H extends B {
         }
         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();
+    }, 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();
   }
   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;
+    this.styles = E;
   }
   get sourceJSON() {
-    return z(this.item);
+    return D(this.item);
   }
   async restoreFocus() {
-    if (this.link && this.linkEl.value) {
+    if (await this.updateComplete, this.link && this.linkEl.value) {
       this.linkEl.value.focus();
       return;
     }
-    this.preview === "top" && this.sectionEl.value && this.sectionEl.value.focus();
+    this.sectionEl.value?.focus();
   }
   firstUpdated() {
     requestAnimationFrame(() => {
       this.isLoaded = !0;
     });
   }
-  getThumbnailUri(e) {
-    return e.thumbnailUrl ?? P(this.portal, e);
-  }
   getAccessInfo(e) {
     return {
       public: {
@@ -70,32 +66,32 @@ class H extends B {
       }
     }[e];
   }
-  getMessage(e, s = "") {
-    const a = this.messages[e];
-    return typeof a == "string" ? a : s;
+  getMessage(e, a = "") {
+    const s = this.messages[e];
+    return typeof s == "string" ? s : a;
   }
   getResolvedBaseUrl() {
-    return this.portal ? `${D({ portal: this.portal, usePortalHostname: !this.portal.user })}/home` : "";
+    return this.portal ? `${P({ 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 = {
+  renderSelectionInput(e, a = !1) {
+    const { selection: s, disableSelection: h, name: f, messages: v, item: c } = this, d = {
       "item-card__input": !0,
-      "item-card__input--compact": s
+      "item-card__input--compact": a
     };
-    switch (a) {
+    switch (s) {
       case "single":
-        return t`<calcite-radio-button class=${d(m)} .checked=${e} .disabled=${_} .value=${c.title ?? ""} .name=${f} @click=${(i) => {
+        return t`<calcite-radio-button class=${l(d)} .checked=${e} .disabled=${h} .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) => {
+        return t`<calcite-checkbox class=${l(d)} .checked=${e} .disabled=${h} @click=${(i) => {
           i.stopPropagation(), i.preventDefault();
         }} @calciteCheckboxChange=${() => {
           this.selected = !e, this.arcgisItemCardSelect.emit({ item: c, selected: !e });
@@ -103,67 +99,64 @@ class H extends B {
       case "none":
         return null;
       default:
-        return E(a);
+        return z(s);
     }
   }
-  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>`;
+  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;
   }
   renderAccess(e) {
-    return this.showAccess ? t`<div class="item-card__access-wrap" @click=${(s) => {
-      s.preventDefault(), s.stopPropagation();
+    return this.showAccess ? t`<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>`;
   }
   render() {
-    const { item: e, portal: s, user: a, selection: _, isLoaded: f, disabled: v, link: c, newTab: m } = this;
-    if (!e || !s || !this.messages._lang)
+    const { item: e, portal: a, user: s, selection: h, isLoaded: f, disabled: v, link: c, newTab: d } = this;
+    if (!e || !a || !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({
+    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({
       "item-card": !0,
       "item-card--grid": o,
-      "item-card--hoverable": _ !== "none",
-      "item-card--selected": p,
+      "item-card--hoverable": h !== "none",
+      "item-card--selected": m,
       "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) => {
+      "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);
         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({
+    }} ${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({
       "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({
+    })}><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({
       "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 }) => {
+    })}><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(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=${() => {
+    }}></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=${() => {
       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}"), {
+    }}>${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 && !!a} @arcgisItemActionsOpen=${({ detail: r, stopPropagation: n }) => {
+    })} .showFavorite=${this.showFavoriteInActionsMenu && !!s} @arcgisItemActionsOpen=${({ detail: r, stopPropagation: n }) => {
       n(), this.arcgisItemCardActionsOpen.emit({
         actions: this.actions,
         el: r.el
@@ -184,7 +177,7 @@ class H extends B {
     }}><slot name=actions-end></slot></div></div></section>`;
   }
 }
-S("arcgis-portal-item-card", H);
+S("arcgis-portal-item-card", O);
 export {
-  H as ArcgisPortalItemCard
+  O as ArcgisPortalItemCard
 };

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

@@ -1,5 +1,6 @@
 import "@esri/calcite-components/components/calcite-radio-button";
 import "@esri/calcite-components/components/calcite-checkbox";
+import "../arcgis-portal-item-thumbnail/index.js";
 import "@esri/calcite-components/components/calcite-icon";
 import "../arcgis-portal-item-badges/index.js";
 import "../arcgis-portal-item-type/index.js";

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

@@ -4,7 +4,7 @@ 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";
+import { g as m, t as p, i as F } from "../../chunks/utils2.js";
 class g extends c {
   constructor() {
     super(), this.messages = f({ blocking: !0 }), this.buttonRef = v(), this.favoriteRequestId = 0, this.handleFavoriteUpdate = (t) => {

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,43 @@
+/// <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 { ThumbnailServiceInfo } from "../../services/thumbnail/ags.js";
+
+export abstract class ArcgisPortalItemThumbnail extends LitElement {
+  /** A string used to cache-bust the thumbnail URL. */
+  accessor cacheString: string | undefined;
+  /**
+   * Set to true to generate a thumbnail if none is present.
+   * Only works for certain item types.
+   *
+   * @default false
+   */
+  accessor generate: boolean;
+  /** The item whose thumbnail you want to display. */
+  accessor item: PortalItem;
+  /** Current Portal instance. */
+  accessor portal: Portal | undefined;
+  /** When using generate, certain item types require service information to create a new thumbnail. */
+  accessor serviceInfo: ThumbnailServiceInfo | undefined;
+  /**
+   * Set to true to force loading thumbnails from the production ArcGIS Online endpoint.
+   * This is only useful in Enterprise when viewing ArcGIS Online content.
+   *
+   * @default false
+   */
+  accessor useProduction: boolean;
+  /** Currently signed in user. */
+  accessor user: PortalUser | undefined;
+  /** @param useDefault */
+  generateThumbnail(useDefault?: boolean): Promise<string>;
+  /**
+   * Fires with the URL of the new thumbnail once generation is complete.
+   * Useful for saving it to the item.
+   */
+  readonly arcgisItemThumbnailGenerated: import("@arcgis/lumina").TargetedEvent<this, string>;
+  readonly "@eventTypes": {
+    arcgisItemThumbnailGenerated: ArcgisPortalItemThumbnail["arcgisItemThumbnailGenerated"]["detail"];
+  };
+}