@arcgis/map-components 5.2.0-next.8 → 5.2.0-next.9

package/dist/components/arcgis-layer-list-next/layer-list-item/customElement.js

@@ -45,11 +45,11 @@ function ne(i, e) {
   return m ? c`<span aria-hidden=true class=${d(P(i.itemActionIcon, { [i.itemActionImage]: !!m }))} style=${Ce(Te(m))}></span>` : null;
 }
 function te(i, e, l) {
-  const { item: m, css: a, handleAction: y } = i, { active: C, disabled: I, title: g, type: S, indicator: f } = e, T = ie(e);
-  return c`<calcite-action .active=${S === "toggle" ? e.value : !1} data-action-id=${e.id ?? r} .disabled=${I} .icon=${T} .indicator=${f} .loading=${C} @click=${() => Re(y, m, e)} scale=s slot=${(l ? void 0 : "actions-end") ?? r} .text=${g ?? ""} .textEnabled=${l} title=${g ?? void 0 ?? r}>${ne(a, e)}</calcite-action>`;
+  const { item: m, css: a, handleAction: v } = i, { active: C, disabled: I, title: g, type: S, indicator: f } = e, T = ie(e);
+  return c`<calcite-action .active=${S === "toggle" ? e.value : !1} data-action-id=${e.id ?? r} .disabled=${I} .icon=${T} .indicator=${f} .loading=${C} @click=${() => Re(v, m, e)} scale=s slot=${(l ? void 0 : "actions-end") ?? r} .text=${g ?? ""} .textEnabled=${l} title=${g ?? void 0 ?? r}>${ne(a, e)}</calcite-action>`;
 }
 function Ge(i) {
-  const { item: e, parent: l, hideStatusIndicators: m, css: a, visibilityAppearance: y, hideCatalogLayerList: C, dragEnabled: I = !1, rootGroupUid: g, listModeDisabled: S = !1, selectionMode: f, displayMode: T, layerTablesEnabled: x, showErrors: ce, parentTitles: F, selectedItems: se, activeItem: oe, handleCatalogOpen: re, handleTablesOpen: de, selectedDragItemLayerUid: ue, handleSelectedDragItemLayerUidChange: me, handlePanelOpen: pe, messages: n, setCurrentActiveItem: O, clearActiveItem: R } = i, $ = X(), M = X(), b = e.title || ("untitledTable" in n ? n.untitledTable : n.untitledLayer ?? "");
+  const { item: e, parent: l, hideStatusIndicators: m, css: a, visibilityAppearance: v, hideCatalogLayerList: C, dragEnabled: I = !1, rootGroupUid: g, listModeDisabled: S = !1, selectionMode: f, displayMode: T, layerTablesEnabled: x, showErrors: ce, parentTitles: F, selectedItems: se, activeItem: oe, handleCatalogOpen: re, handleTablesOpen: de, selectedDragItemLayerUid: ue, handleSelectedDragItemLayerUidChange: me, handlePanelOpen: pe, messages: n, setCurrentActiveItem: O, clearActiveItem: R } = i, $ = X(), M = X(), b = e.title || ("untitledTable" in n ? n.untitledTable : n.untitledLayer ?? "");
   let V = null;
   m || (V = c`<arcgis-layer-list-item-indicator class=${d(a.statusIndicator)} .messages=${n} .item=${e} .parent=${l} slot=content-end></arcgis-layer-list-item-indicator>`);
   let G = null;
@@ -58,16 +58,16 @@ function Ge(i) {
     (i.showTemporaryLayerIndicators || i.showTemporaryTableIndicators) && s && (G = c`<calcite-icon class=${d(a.itemTemporaryIcon)} icon=temporary scale=s slot=content-start title=${n.temporary ?? r}></calcite-icon>`);
   }
   let H = null;
-  if ("visible" in e && "visibleToggle" in a && y) {
+  if ("visible" in e && "visibleToggle" in a && v) {
     const t = D(l);
     if (t !== "inherited") {
       const s = xe({
         visible: e.visible,
         exclusive: t === "exclusive",
-        visibilityAppearance: y
-      }), o = y === "checkbox", p = n.layerVisibility, h = le(e.layer?.id);
-      H = c`<calcite-action .aria=${{ pressed: h }} class=${d(a.visibleToggle)} .icon=${o ? s : void 0} @click=${(v) => {
-        De(v.currentTarget, e.layer?.id), ee(e, l);
+        visibilityAppearance: v
+      }), o = v === "checkbox", p = n.layerVisibility, h = le(e.layer?.id);
+      H = c`<calcite-action .aria=${{ pressed: h }} class=${d(a.visibleToggle)} .icon=${o ? s : void 0} @click=${(y) => {
+        De(y.currentTarget, e.layer?.id), ee(e, l);
       }} .slot=${o ? "actions-start" : "actions-end"} .text=${p ?? ""} title=${p ?? r}>${o ? null : c`<calcite-icon class=${d(P({
         [a.visibleIcon]: t !== "exclusive" && e.visible
       }))} .icon=${s} scale=s></calcite-icon>`}</calcite-action>`;
@@ -82,8 +82,8 @@ function Ge(i) {
   {
     const t = e.panel;
     if (t?.visible) {
-      const { open: s, title: o, disabled: p } = t, h = { icon: t.icon, image: t.image, indicator: !1 }, v = ie(h);
-      q = c`<calcite-action .active=${s} .disabled=${p} .icon=${v} @click=${() => Fe(e, pe)} slot=actions-end .text=${o ?? ""} title=${o ?? void 0 ?? r}>${ne(a, t)}</calcite-action>`;
+      const { open: s, title: o, disabled: p } = t, h = { icon: t.icon, image: t.image, indicator: !1 }, y = ie(h);
+      q = c`<calcite-action .active=${s} .disabled=${p} .icon=${y} @click=${() => Fe(e, pe)} slot=actions-end .text=${o ?? ""} title=${o ?? void 0 ?? r}>${ne(a, t)}</calcite-action>`;
     }
   }
   let j = null;
@@ -118,11 +118,14 @@ function Ge(i) {
   }
   let z = null;
   if ("children" in e) {
-    const t = [...F ?? [], e.title], { children: s, layer: o } = e, p = o?.type !== "catalog-dynamic-group" && Me(e), h = S ? !1 : Le(o), v = o?.type === "group", fe = !h && !p && I && v, he = I && "childrenSortable" in e && e.childrenSortable && Ee(e), Ie = p ? Se(s?.filter((u) => !u.hidden && (ce || !u.error)).toArray() ?? [], (u) => u.uid, (u) => Ge({ ...i, item: u, parent: e, parentTitles: t })) : null;
-    (p || fe) && (z = c`<calcite-list .canPull=${(u) => i.canMove ? i.canMove(u, "pull") : !1} .canPut=${(u) => i.canMove ? i.canMove(u, "put") : !1} data-item=${e.uid ?? r} data-layer-type=${g ?? r} .displayMode=${T} .dragEnabled=${he} .group=${v ? g : `${g}-${o?.uid}`} .label=${e.title} selection-appearance=highlight .selectionMode=${f}>${Ie}${_}</calcite-list>`);
+    const t = [...F ?? [], e.title], { children: s, layer: o } = e, p = o?.type !== "catalog-dynamic-group" && Me(e), h = S ? !1 : Le(o), y = o?.type === "group", fe = !h && !p && I && y, he = I && "childrenSortable" in e && e.childrenSortable && Ee(e), Ie = p ? Se(s?.filter((u) => !u.hidden && (ce || !u.error)).toArray() ?? [], (u) => u.uid, (u) => Ge({ ...i, item: u, parent: e, parentTitles: t })) : null;
+    (p || fe) && (z = c`<calcite-list .canPull=${(u) => i.canMove ? i.canMove(u, "pull") : !1} .canPut=${(u) => i.canMove ? i.canMove(u, "put") : !1} data-item=${e.uid ?? r} data-layer-type=${g ?? r} .displayMode=${T} .dragEnabled=${he} .group=${y ? g : `${g}-${o?.uid}`} .label=${e.title} selection-appearance=highlight .selectionMode=${f}>${Ie}${_}</calcite-list>`);
   }
   let E = null;
-  e.error ? E = c`<div class=${d(a.itemMessage)} slot=content-bottom><calcite-notice icon=exclamation-mark-triangle kind=warning open scale=s width=full><div slot=message>${"tableError" in n ? n.tableError : n.layerError}</div></calcite-notice></div>` : "incompatible" in e && e.incompatible && "layerIncompatible" in n && (E = c`<div class=${d(a.itemMessage)} slot=content-bottom><calcite-notice icon=exclamation-mark-triangle kind=warning open scale=s tabindex=0 width=full ${Y(M)}><div slot=message>${n.layerIncompatible}</div></calcite-notice></div>`);
+  if (e.error) {
+    const t = "layerError" in n ? n.layerError : n.tableError;
+    E = c`<div class=${d(a.itemMessage)} slot=content-bottom><calcite-notice icon=exclamation-mark-triangle kind=warning open scale=s width=full><div slot=message>${t}</div></calcite-notice></div>`;
+  } else "incompatible" in e && e.incompatible && "layerIncompatible" in n && (E = c`<div class=${d(a.itemMessage)} slot=content-bottom><calcite-notice icon=exclamation-mark-triangle kind=warning open scale=s tabindex=0 width=full ${Y(M)}><div slot=message>${n.layerIncompatible}</div></calcite-notice></div>`);
   const J = Ve(e), k = e.actionsSections.reduce((t, s) => t + s.length, 0), K = ke(J), $e = J.toArray().map((t) => c`<calcite-action-group>${t.toArray().map((s) => te(i, s, !0))}</calcite-action-group>`), ge = (t) => {
     e.actionsOpen = t.currentTarget.open;
   };
@@ -133,10 +136,10 @@ function Ge(i) {
   }} icon=ellipsis scale=s slot=trigger .text=${n.options ?? ""} title=${n.options ?? r}></calcite-action>${$e}</calcite-action-menu>`);
   let w = null;
   k === 1 && K ? w = te(i, K, !1) : k > 1 && (w = Q);
-  const be = "visibleAtCurrentTimeExtent" in e && "layerInvisibleAtTime" in n && !e.visibleAtCurrentTimeExtent ? `${b} (${n.layerInvisibleAtTime})` : "visibleAtCurrentScale" in e && "layerInvisibleAtScale" in n && !e.visibleAtCurrentScale ? `${b} (${n.layerInvisibleAtScale})` : b, ve = "parent" in e && e.parent?.layer?.type === "catalog", A = e.layer, ye = "visibleAtCurrentScale" in e && !e.visibleAtCurrentScale || "visibleAtCurrentTimeExtent" in e && !e.visibleAtCurrentTimeExtent;
+  const be = "visibleAtCurrentTimeExtent" in e && "layerInvisibleAtTime" in n && !e.visibleAtCurrentTimeExtent ? `${b} (${n.layerInvisibleAtTime})` : "visibleAtCurrentScale" in e && "layerInvisibleAtScale" in n && !e.visibleAtCurrentScale ? `${b} (${n.layerInvisibleAtScale})` : b, ye = "parent" in e && e.parent?.layer?.type === "catalog", A = e.layer, ve = "visibleAtCurrentScale" in e && !e.visibleAtCurrentScale || "visibleAtCurrentTimeExtent" in e && !e.visibleAtCurrentTimeExtent;
   return queueMicrotask(() => {
     Oe($.value ?? null, e, ue, me), M.value && (i.handleTooltipReferenceChange?.(A?.uid, M.value), queueMicrotask(() => i.handleTooltipReferenceChange?.(A?.uid, null))), e.panel && (e.panel.container = $.value);
-  }), W(e.uid, c`<calcite-list-item class=${d(P(a.item, "itemActive" in a && { [a.itemActive]: oe?.uid === e.uid }))} data-item=${e.uid ?? r} data-layer-id=${A?.id ?? r} .dragDisabled=${!("sortable" in e && e.sortable) || ve} id=${A?.uid ?? r} .label=${b} .metadata=${{ parentTitles: F ?? [], _title: b }} .expanded=${"open" in e && e.open} .selected=${f !== "none" ? se.includes(e) : !1} title=${be ?? r} .unavailable=${ye} .value=${e} @focusin=${() => {
+  }), W(e.uid, c`<calcite-list-item class=${d(P(a.item, "itemActive" in a && { [a.itemActive]: oe?.uid === e.uid }))} data-item=${e.uid ?? r} data-layer-id=${A?.id ?? r} .dragDisabled=${!("sortable" in e && e.sortable) || ye} id=${A?.uid ?? r} .label=${b} .metadata=${{ parentTitles: F ?? [], _title: b }} .expanded=${"open" in e && e.open} .selected=${f !== "none" ? se.includes(e) : !1} title=${be ?? r} .unavailable=${ve} .value=${e} @focusin=${() => {
     O?.(e), $.value?.classList.add(a.itemActive);
   }} @focusout=${() => {
     R?.(), $.value?.classList.remove(a.itemActive);

package/dist/components/arcgis-measurement-content/customElement.js

@@ -6,8 +6,8 @@ import c from "@arcgis/core/applications/Components/QuantityFormatter.js";
 import { LitElement as o, safeClassMap as n } from "@arcgis/lumina";
 import { generateGuid as u } from "@arcgis/toolkit/string";
 import { f as g } from "../../chunks/measurementUtils.js";
-const p = s`:host{--arcgis-internal-color-black-30: color-mix(in srgb, #000000 30.2%, transparent);--arcgis-internal-box-shadow: var(--calcite-spacing-none) var(--calcite-spacing-px) var(--calcite-spacing-base) var(--arcgis-internal-color-black-30);--arcgis-internal-top-max-width: calc(min(100cqw, 100vw) - var(--calcite-spacing-xxxl));--arcgis-internal-panel-width: 300px;--arcgis-internal-panel-height: 100%;--arcgis-internal-panel-height-sm: 240px;--arcgis-internal-panel-height-md: 420px;--arcgis-internal-panel-height-lg: 540px;--arcgis-internal-panel-height-xl: 680px;--arcgis-internal-panel-gap: var(--calcite-spacing-lg);--arcgis-internal-panel-actions-gap: var(--calcite-spacing-sm);--arcgis-internal-basemap-gallery-width-lg: 450px;--arcgis-internal-collapse-icon-flip: scaleX(1);--arcgis-internal-row-direction: row;--arcgis-internal-legend-width: 300px;--arcgis-internal-layout-overlay-space-top: var(--arcgis-layout-overlay-space-top, 0px);--arcgis-internal-layout-overlay-space-bottom: var(--arcgis-layout-overlay-space-bottom, 0px);--arcgis-internal-layout-overlay-space-left: var(--arcgis-layout-overlay-space-left, 0px);--arcgis-internal-layout-overlay-space-right: var(--arcgis-layout-overlay-space-right, 0px);--arcgis-internal-view-color-focus: var(--arcgis-view-color-focus, var(--calcite-color-brand));--arcgis-internal-attribution-space-bottom: var(--arcgis-internal-layout-overlay-space-bottom);--arcgis-internal-attribution-space-left: var(--arcgis-internal-layout-overlay-space-left);--arcgis-internal-attribution-space-right: var(--arcgis-internal-layout-overlay-space-right);--arcgis-internal-attribution-font-size: var(--calcite-font-size-sm);--arcgis-internal-attribution-font-size-sm: var(--calcite-font-size-xs);--arcgis-internal-sketch-justify-content: flex-start}:host,.hint,.error,.section,.actions,.item{display:flex;flex-direction:column;gap:var(--arcgis-internal-panel-gap);animation:esri-fade-in .25s ease-in-out}.error{color:var(--calcite-color-status-danger)}.error,.hint{overflow:hidden;p{margin:0;padding:0}}.results-grid{display:grid;column-gap:var(--calcite-spacing-xxs);row-gap:var(--calcite-spacing-md);grid-template-columns:1fr max-content max-content;&.vertical{display:flex;flex-direction:column;align-items:flex-start;.item{display:block}.title{margin-bottom:var(--calcite-spacing-xxs)}.value{align-self:flex-start}}}.item{display:contents;&.disabled>*{color:var(--calcite-color-text-1);opacity:var(--calcite-opacity-light)}}.title{grid-column:1;word-break:break-word;--calcite-label-margin-bottom: 0}.value{grid-column:2;font-weight:var(--calcite-font-weight-semibold);white-space:nowrap;align-self:center;justify-self:flex-end;font-variant-numeric:tabular-nums;&:has(~:empty){grid-column:span 2}~:empty{display:none}}.unit{font-weight:var(--calcite-font-weight-semibold);text-align:left}.actions{justify-content:center;gap:var(--arcgis-internal-panel-actions-gap);&[hidden]{display:none}}`;
-class m extends o {
+const m = s`:host{--arcgis-internal-color-black-30: color-mix(in srgb, #000000 30.2%, transparent);--arcgis-internal-box-shadow: var(--calcite-spacing-none) var(--calcite-spacing-px) var(--calcite-spacing-base) var(--arcgis-internal-color-black-30);--arcgis-internal-top-max-width: calc(min(100cqw, 100vw) - var(--calcite-spacing-xxxl));--arcgis-internal-panel-width: 300px;--arcgis-internal-panel-height: 100%;--arcgis-internal-panel-height-sm: 240px;--arcgis-internal-panel-height-md: 420px;--arcgis-internal-panel-height-lg: 540px;--arcgis-internal-panel-height-xl: 680px;--arcgis-internal-panel-gap: var(--calcite-spacing-lg);--arcgis-internal-panel-actions-gap: var(--calcite-spacing-sm);--arcgis-internal-basemap-gallery-width-lg: 450px;--arcgis-internal-collapse-icon-flip: scaleX(1);--arcgis-internal-row-direction: row;--arcgis-internal-legend-width: 300px;--arcgis-internal-layout-overlay-space-top: var(--arcgis-layout-overlay-space-top, 0px);--arcgis-internal-layout-overlay-space-bottom: var(--arcgis-layout-overlay-space-bottom, 0px);--arcgis-internal-layout-overlay-space-left: var(--arcgis-layout-overlay-space-left, 0px);--arcgis-internal-layout-overlay-space-right: var(--arcgis-layout-overlay-space-right, 0px);--arcgis-internal-view-color-focus: var(--arcgis-view-color-focus, var(--calcite-color-brand));--arcgis-internal-attribution-space-bottom: var(--arcgis-internal-layout-overlay-space-bottom);--arcgis-internal-attribution-space-left: var(--arcgis-internal-layout-overlay-space-left);--arcgis-internal-attribution-space-right: var(--arcgis-internal-layout-overlay-space-right);--arcgis-internal-attribution-font-size: var(--calcite-font-size-sm);--arcgis-internal-attribution-font-size-sm: var(--calcite-font-size-xs);--arcgis-internal-sketch-justify-content: flex-start}:host,.hint,.error,.section,.actions,.item{display:flex;flex-direction:column;gap:var(--arcgis-internal-panel-gap);animation:esri-fade-in .25s ease-in-out}.error{color:var(--calcite-color-status-danger)}.error,.hint{overflow:hidden;p{margin:0;padding:0}}.results-grid{display:grid;column-gap:var(--calcite-spacing-xxs);row-gap:var(--calcite-spacing-md);grid-template-columns:auto minmax(0,1fr) max-content;&.vertical{display:flex;flex-direction:column;align-items:flex-start;.item{display:block}.title{margin-bottom:var(--calcite-spacing-xxs)}.value{align-self:flex-start}}}.item{display:contents;&.disabled>*{color:var(--calcite-color-text-1);opacity:var(--calcite-opacity-light)}}.title{grid-column:1;--calcite-label-margin-bottom: 0}.value{grid-column:2;font-weight:var(--calcite-font-weight-semibold);white-space:normal;min-width:0;max-width:100%;align-self:center;justify-self:flex-end;text-align:end;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;word-break:normal;text-wrap:pretty;&:has(~:empty){grid-column:span 2}~:empty{display:none}}.unit{font-weight:var(--calcite-font-weight-semibold);text-align:left;grid-column:3;align-self:center}.actions{justify-content:center;gap:var(--arcgis-internal-panel-actions-gap);&[hidden]{display:none}}`;
+class p extends o {
   constructor() {
     super(...arguments), this._formatter = new c(), this._baseId = u(), this._hasActionsContent = !1, this.layout = "horizontal", this.items = [], this.state = "disabled", this.unsupportedLabel = "";
   }
@@ -15,7 +15,7 @@ class m extends o {
     this.properties = { _hasActionsContent: 16, hintLabel: 1, layout: 1, items: 0, state: 1, unsupportedLabel: 1 };
   }
   static {
-    this.styles = p;
+    this.styles = m;
   }
   async load() {
     await this._formatter.when();
@@ -61,7 +61,7 @@ function v(t) {
     disabled: t.measurement.state !== "available"
   })}><calcite-label layout=inline class="title" .for=${t.valueId}>${t.title ?? ""}</calcite-label>${h({ value: a })}</div>`;
 }
-r("arcgis-measurement-content", m);
+r("arcgis-measurement-content", p);
 export {
-  m as ArcgisMeasurementContent
+  p as ArcgisMeasurementContent
 };

package/dist/components/arcgis-paste/PasteViewModel.d.ts

@@ -9,7 +9,7 @@ import type SceneView from "@arcgis/core/views/SceneView.js";
 import type MapView from "@arcgis/core/views/MapView.js";
 import type SubtypeSublayer from "@arcgis/core/layers/support/SubtypeSublayer.js";
 import type BatchAttributeFormViewModel from "@arcgis/core/widgets/BatchAttributeForm/BatchAttributeFormViewModel.js";
-import type TemplateItem from "../arcgis-feature-templates/TemplateItem.js";
+import type TemplateListItem from "@arcgis/core/editing/templates/TemplateListItem.js";
 import type { EsriClipboard, ClipboardItem as EsriClipboardItem } from "@arcgis/core/applications/Components/clipboard.js";
 import type { ApplySet, ApplySetLayerEditResult, ApplySetServiceEditResult } from "@arcgis/core/applications/Components/applySetUtils.js";
 import type { ClipboardMove } from "./ClipboardMove.js";
@@ -127,7 +127,7 @@ export default class PasteViewModel extends Accessor {
       disabled: boolean;
       available: boolean;
   }[];
-  accessor pasteTemplate: TemplateItem | undefined;
+  accessor pasteTemplate: TemplateListItem | undefined;
   get pasteTemplateIsValid(): boolean;
   /** @default true */
   accessor pasteWithAttributes: boolean;

package/dist/components/arcgis-template-image/customElement.d.ts

@@ -1,5 +1,5 @@
 /// <reference path="../../index.d.ts" />
-import type TemplateItem from "../arcgis-feature-templates/TemplateItem.js";
+import type TemplateListItem from "@arcgis/core/editing/templates/TemplateListItem.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
 /**
@@ -10,5 +10,5 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
  * @internal
  */
 export abstract class ArcgisTemplateImage extends LitElement {
-  accessor template: TemplateItem | undefined;
+  accessor template: TemplateListItem | undefined;
 }

package/dist/components/arcgis-template-image/customElement.js

@@ -1,21 +1,24 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as h } from "../../chunks/runtime.js";
-import g from "@arcgis/core/Graphic.js";
-import { css as p, html as s } from "lit";
+import p from "@arcgis/core/Graphic.js";
+import { css as g, html as s } from "lit";
 import { createRef as d, ref as f } from "lit/directives/ref.js";
-import { unsafeHTML as _ } from "lit/directives/unsafe-html.js";
-import { LitElement as b, safeStyleMap as y } from "@arcgis/lumina";
+import { unsafeHTML as b } from "lit/directives/unsafe-html.js";
+import { LitElement as _, safeStyleMap as y } from "@arcgis/lumina";
 import * as l from "@arcgis/toolkit/log";
-import { isSharedTemplateMetadata as u, isStandardFeatureTemplate as v } from "@arcgis/core/applications/Components/templateUtils.js";
+import { isSharedTemplateMetadata as c, isStandardFeatureTemplate as v } from "@arcgis/core/applications/Components/templateUtils.js";
 import "@arcgis/core/editing/sharedTemplates/SharedTemplateMetadata.js";
 import { renderPreviewHTML as w } from "@arcgis/core/symbols/support/symbolUtils.js";
-const I = p`.esri-thumbnail-preview{width:3%;height:32px;background-size:contain;background-position:center}.template-image-container{width:32px;height:32px;display:flex;align-items:center;justify-content:center}`;
-async function D(e, t, i) {
-  if (u(e) && e.thumbnail) {
-    const c = `data:image/png;base64,${e.thumbnail.imageData}`;
-    return s`<div class="esri-thumbnail-preview" style=${y({ backgroundImage: `url(${c})` })}></div>`;
+import { isTable as I } from "@arcgis/core/applications/Components/layerUtils.js";
+const D = g`.esri-thumbnail-preview{width:22px;height:22px;background-position:50% 50%;background-repeat:no-repeat}.template-image-container{width:32px;height:32px;display:flex;align-items:center;justify-content:center}`;
+async function x(e, t, i) {
+  if (c(e) && e.thumbnail) {
+    const u = `data:image/png;base64,${e.thumbnail.imageData}`;
+    return s`<div class="esri-thumbnail-preview" style=${y({ backgroundImage: `url(${u})` })}></div>`;
   }
-  const r = await x(t, e);
+  if (I(t))
+    return s`<calcite-icon icon=table scale=s></calcite-icon>`;
+  const r = await T(t, e);
   if (r == null)
     return null;
   const n = { maxSize: 24, ariaLabel: i?.ariaLabel };
@@ -23,13 +26,13 @@ async function D(e, t, i) {
     attributes: e.prototype.attributes ?? {}
   });
   const o = await w(r, n);
-  return o ? s`${_(o.outerHTML)}` : null;
+  return o ? s`${b(o.outerHTML)}` : null;
 }
-async function x(e, t) {
-  if (u(t))
+async function T(e, t) {
+  if (c(t))
     return await m(e);
   if ("renderer" in e && e.renderer) {
-    const { renderer: i } = e, r = new g({ attributes: t.prototype.attributes });
+    const { renderer: i } = e, r = new p({ attributes: t.prototype.attributes });
     if ("getSymbolAsync" in i) {
       const a = await i.getSymbolAsync(r);
       if (a)
@@ -38,14 +41,14 @@ async function x(e, t) {
   }
   return await m(e);
 }
-async function T(e) {
+async function C(e) {
   const t = e === "point" || e === "multipoint" ? await import("@arcgis/core/symbols/SimpleMarkerSymbol.js") : e === "polyline" ? await import("@arcgis/core/symbols/SimpleLineSymbol.js") : e === "polygon" || e === "mesh" || e === "multipatch" ? await import("@arcgis/core/symbols/SimpleFillSymbol.js") : null;
   return t ? new t.default() : null;
 }
 async function m(e) {
-  return "geometryType" in e && e.geometryType ? await T(e.geometryType) : null;
+  return "geometryType" in e && e.geometryType ? await C(e.geometryType) : null;
 }
-class C extends b {
+class L extends _ {
   constructor() {
     super(...arguments), this._lastRun = 0, this._attempted = !1, this._isCurrentlyInView = !1, this._intersectionObserver = null, this._imageContainerDiv = d(), this._generatedImageData = null;
   }
@@ -53,7 +56,7 @@ class C extends b {
     this.properties = { _generatedImageData: 16, template: 0 };
   }
   static {
-    this.styles = I;
+    this.styles = D;
   }
   get rootLayer() {
     return this.template?.layer?.type === "subtype-sublayer" ? this.template.layer.parent : this.template?.layer;
@@ -75,7 +78,7 @@ class C extends b {
     this._generatedImageData = null, this._attempted = !1;
   }
   async _generateImage() {
-    return this.template ? await D(this.template.template, this.template.layer) : "";
+    return this.template ? await x(this.template.template, this.template.layer) : "";
   }
   async _handleImage() {
     const t = ++this._lastRun;
@@ -113,7 +116,7 @@ class C extends b {
     return s`<div class="template-image-container" ${f(this._imageContainerDiv)}>${this._generatedImageData ?? ""}</div>`;
   }
 }
-h("arcgis-template-image", C);
+h("arcgis-template-image", L);
 export {
-  C as ArcgisTemplateImage
+  L as ArcgisTemplateImage
 };

package/dist/components/arcgis-template-image/index.js

@@ -1 +1,2 @@
+import "@esri/calcite-components/components/calcite-icon";
 export * from "./customElement.js";