@arcgis/map-components 5.2.0-next.5 → 5.2.0-next.50

package/dist/components/arcgis-table-list-next/customElement.d.ts

@@ -0,0 +1,244 @@
+/// <reference path="../../index.d.ts" />
+import type Collection from "@arcgis/core/core/Collection.js";
+import type Layer from "@arcgis/core/layers/Layer.js";
+import type LinkChartView from "@arcgis/core/views/LinkChartView.js";
+import type MapView from "@arcgis/core/views/MapView.js";
+import type SceneView from "@arcgis/core/views/SceneView.js";
+import type TableListViewModel from "@arcgis/core/widgets/TableList/TableListViewModel.js";
+import type TableListListItem from "@arcgis/core/widgets/TableList/ListItem.js";
+import type WebMap from "@arcgis/core/WebMap.js";
+import type WebScene from "@arcgis/core/WebScene.js";
+import type Sublayer from "@arcgis/core/layers/support/Sublayer.js";
+import type { TableListViewModelEvents } from "@arcgis/core/widgets/TableList/TableListViewModel.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { ArcgisReferenceElement, HeadingLevel, IconName } from "../types.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+import type { ListItemModifier } from "@arcgis/core/widgets/TableList/types.js";
+import type { List as List } from "@esri/calcite-components/components/calcite-list";
+import type { ReadonlyCollection } from "@arcgis/core/core/Collection.js";
+
+/**
+ * The Table List (next) component provides a way to display a list of tables associated with a map or table collection.
+ * It is the direct component migration of the TableList widget and is provided early for testing and feedback.
+ *
+ * @since 5.2
+ * @beta
+ */
+export abstract class ArcgisTableListNext extends LitElement {
+  /**
+   * If true, the component will not be destroyed automatically when it is
+   * disconnected from the document. This is useful when you want to move the
+   * component to a different place on the page, or temporarily hide it. If this
+   * is set, make sure to call the [destroy()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-table-list-next/#destroy) method when you are done to
+   * prevent memory leaks.
+   *
+   * @default false
+   */
+  accessor autoDestroyDisabled: boolean;
+  /**
+   * Indicates whether a component is closed. When `true`, the component will be hidden.
+   *
+   * @default false
+   */
+  accessor closed: boolean;
+  /**
+   * Indicates whether the component is collapsed.
+   *
+   * @default false
+   */
+  accessor collapsed: boolean;
+  /**
+   * Indicates whether list items may be reordered by dragging and dropping.
+   *
+   * @default false
+   */
+  accessor dragEnabled: boolean;
+  /**
+   * Placeholder text used in the filter input if showFilter is true.
+   *
+   * @default ""
+   */
+  accessor filterPlaceholder: string;
+  /** Specifies a function to handle filtering list items. */
+  accessor filterPredicate: FilterPredicate | undefined;
+  /**
+   * The value of the filter input text string if showFilter is true.
+   *
+   * @default ""
+   */
+  accessor filterText: string;
+  /**
+   * Indicates the heading level to use for the heading of the component.
+   *
+   * @default 2
+   */
+  accessor headingLevel: HeadingLevel;
+  /**
+   * Indicates whether the status indicators will be hidden.
+   *
+   * @default false
+   */
+  accessor hideStatusIndicators: boolean;
+  /**
+   * Icon which represents the component.
+   * Typically used when the component is controlled by another component (e.g. by the Expand component).
+   *
+   * @default "table"
+   * @see [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)
+   */
+  accessor icon: IconName;
+  /** The component's default label. */
+  accessor label: string | undefined;
+  /** @internal */
+  accessor listItemCanGiveFunction: CanSortFunction | undefined;
+  /** @internal */
+  accessor listItemCanReceiveFunction: CanSortFunction | undefined;
+  /** Specifies a function that accesses each list item as it is created. */
+  accessor listItemCreatedFunction: ListItemModifier | null | undefined;
+  /** A reference to a map containing the tables. */
+  accessor map: WebMap | WebScene | null | undefined;
+  /** Overwrite localized strings for this component. */
+  accessor messageOverrides: {
+      componentLabel?: string | undefined;
+      back?: string | undefined;
+      noItemsToDisplay?: string | undefined;
+      menu?: string | undefined;
+      options?: string | undefined;
+      tableError?: string | undefined;
+      temporary?: string | undefined;
+      untitledTable?: string | undefined;
+      publishing?: string | undefined;
+  };
+  /** @internal */
+  protected messages: Partial<{
+      componentLabel: string;
+      back: string;
+      noItemsToDisplay: string;
+      menu: string;
+      options: string;
+      tableError: string;
+      temporary: string;
+      untitledTable: string;
+      publishing: string;
+  }> & T9nMeta<{
+      componentLabel: string;
+      back: string;
+      noItemsToDisplay: string;
+      menu: string;
+      options: string;
+      tableError: string;
+      temporary: string;
+      untitledTable: string;
+      publishing: string;
+  }>;
+  /**
+   * The minimum number of list items required to enable drag and drop reordering.
+   *
+   * @default 2
+   */
+  accessor minDragEnabledItems: number;
+  /**
+   * The minimum number of list items required to display the filter input box.
+   *
+   * @default 10
+   */
+  accessor minFilterItems: number;
+  /**
+   * By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
+   *
+   * @see [Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)
+   */
+  accessor referenceElement: ArcgisReferenceElement | string | undefined;
+  /** A collection of selected table list items. */
+  accessor selectedItems: Collection<TableListListItem>;
+  /**
+   * Specifies the selection mode.
+   *
+   * @default "none"
+   */
+  accessor selectionMode: List["selectionMode"];
+  /**
+   * Indicates whether to display a close button in the header.
+   *
+   * @default false
+   */
+  accessor showCloseButton: boolean;
+  /**
+   * Indicates whether to display a collapse button in the header.
+   *
+   * @default false
+   */
+  accessor showCollapseButton: boolean;
+  /**
+   * Indicates whether to display tables with load errors.
+   *
+   * @default false
+   */
+  accessor showErrors: boolean;
+  /**
+   * Indicates whether to display a filter input box.
+   *
+   * @default false
+   */
+  accessor showFilter: boolean;
+  /**
+   * Indicates whether to display the table list heading.
+   *
+   * @default false
+   */
+  accessor showHeading: boolean;
+  /**
+   * Indicates whether temporary table indicators will be displayed.
+   *
+   * @default false
+   */
+  accessor showTemporaryTableIndicators: boolean;
+  /** The current state of the component. */
+  get state(): TableListViewModel["state"];
+  /** The collection of table ListItems displayed within the component. */
+  get tableItems(): Collection<TableListListItem>;
+  /** A collection of tables to display in the component. */
+  accessor tables: ReadonlyCollection<Layer | Sublayer> | null | undefined;
+  /**
+   * The view associated with the component. 
+   *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-table-list-next component will be associated with a map or scene component rather than using the `view` property.
+   */
+  accessor view: LinkChartView | MapView | SceneView | undefined;
+  /** Permanently destroy the component. */
+  destroy(): Promise<void>;
+  /** Emitted when the component's close button is clicked. */
+  readonly arcgisClose: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Emits when the list filter input value changes. */
+  readonly arcgisFilterChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "state"; }>;
+  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Emits when selected items state changes. */
+  readonly arcgisSelectedItemsChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Emits when table items state changes. */
+  readonly arcgisTableItemsChanged: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Emitted when an action is triggered on the component. */
+  readonly arcgisTriggerAction: import("@arcgis/lumina").TargetedEvent<this, TableListViewModelEvents["trigger-action"]>;
+  readonly "@eventTypes": {
+    arcgisClose: ArcgisTableListNext["arcgisClose"]["detail"];
+    arcgisFilterChange: ArcgisTableListNext["arcgisFilterChange"]["detail"];
+    arcgisPropertyChange: ArcgisTableListNext["arcgisPropertyChange"]["detail"];
+    arcgisReady: ArcgisTableListNext["arcgisReady"]["detail"];
+    arcgisSelectedItemsChange: ArcgisTableListNext["arcgisSelectedItemsChange"]["detail"];
+    arcgisTableItemsChanged: ArcgisTableListNext["arcgisTableItemsChanged"]["detail"];
+    arcgisTriggerAction: ArcgisTableListNext["arcgisTriggerAction"]["detail"];
+  };
+}
+
+/** @param event */
+export type CanSortFunction = (event: CanSortEvent) => boolean;
+
+/** @param item */
+export type FilterPredicate = (item: TableListListItem) => boolean;
+
+export interface CanSortEvent {
+  selected: null | undefined | TableListListItem;
+  from: null | undefined | TableListListItem;
+  to: null | undefined | TableListListItem;
+}

package/dist/components/arcgis-table-list-next/customElement.js

@@ -0,0 +1,182 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as C } from "../../chunks/runtime.js";
+import { repeat as $ } from "lit/directives/repeat.js";
+import { keyed as _ } from "lit/directives/keyed.js";
+import L from "@arcgis/core/core/Collection.js";
+import { watch as I, on as v } from "@arcgis/core/core/reactiveUtils.js";
+import M from "@arcgis/core/widgets/TableList/TableListViewModel.js";
+import { LitElement as E, createEvent as c, safeClassMap as w, nothing as T } from "@arcgis/lumina";
+import { usePropertyChange as F } from "@arcgis/lumina/controllers";
+import { reEmitEvent as D } from "@arcgis/lumina/controllers/accessor";
+import { classes as P } from "@arcgis/toolkit/dom";
+import "@arcgis/toolkit/function";
+import { generateGuid as U } from "@arcgis/toolkit/string";
+import { createRef as x, ref as A } from "lit/directives/ref.js";
+import { html as o } from "lit";
+import { u as B } from "../../chunks/useT9n.js";
+import { g as u } from "../../chunks/globalCss.js";
+import { m as k, b as S, r as G, e as N } from "../../chunks/layer-list-utils.js";
+import { ArcgisLayerListItem as O } from "../arcgis-layer-list-next/layer-list-item/customElement.js";
+import { s as R, a as q } from "../../chunks/layer-list-next.js";
+import { c as H } from "../../chunks/css.js";
+import { m as V } from "../../chunks/useViewModel.js";
+const b = H, y = "nested", j = V(M);
+class z extends E {
+  constructor() {
+    super(...arguments), this._lastDragDetail = null, this._rootGroupUid = `table-${U()}`, this._rootListRef = x(), this._selectedDragItemLayerUid = null, this.messages = B(), this.viewModel = j(this), this._canMove = ({ dragEl: e, fromEl: t, toEl: i }, s) => {
+      const l = s === "pull" ? this.listItemCanGiveFunction : this.listItemCanReceiveFunction, a = this._getItem(e);
+      if (!a || !("sortable" in a) || !a.sortable)
+        return !1;
+      const h = this._getItem(t), d = this._getLayerType(t), n = this._getItem(i), m = this._getLayerType(i), f = !!d && !!m && d === m, g = { selected: a, from: h, to: n }, p = t?.group, r = i?.group;
+      return p && r && typeof l == "function" ? l(g) : f;
+    }, this._onPanelOpen = () => {
+      this.requestUpdate();
+    }, this._onSelectedDragItemLayerUidChange = (e) => {
+      this._selectedDragItemLayerUid = e;
+    }, this._onTriggerAction = (e, t) => {
+      this.triggerAction(e, t);
+    }, this.autoDestroyDisabled = !1, this.closed = !1, this.collapsed = !1, this.dragEnabled = !1, this.filterPlaceholder = "", this.filterText = "", this.headingLevel = 2, this.icon = "table", this.listItemCreatedFunction = this.viewModel.listItemCreatedFunction, this.map = this.viewModel.map, this.minDragEnabledItems = k, this.minFilterItems = S, this.selectedItems = new L(), this.selectionMode = "none", this.tables = this.viewModel.tables, this.showCloseButton = !1, this.showCollapseButton = !1, this.showErrors = !1, this.showFilter = !1, this.showHeading = !1, this.hideStatusIndicators = !1, this.showTemporaryTableIndicators = !1, this.arcgisClose = c(), this.arcgisPropertyChange = F()("state"), this.arcgisReady = c(), this.arcgisFilterChange = c(), this.arcgisSelectedItemsChange = c(), this.arcgisTableItemsChanged = c(), this.arcgisTriggerAction = D(() => this.viewModel, "trigger-action");
+  }
+  static {
+    this.properties = { _visibleItems: 16, _openedPanelItems: 16, _dragEnabled: 16, _filterEnabled: 16, view: 0, autoDestroyDisabled: 5, closed: 5, referenceElement: 1, collapsed: 7, dragEnabled: 5, filterPlaceholder: 1, filterPredicate: 0, filterText: 1, headingLevel: 9, icon: 1, label: 1, listItemCanGiveFunction: 0, listItemCanReceiveFunction: 0, listItemCreatedFunction: 0, map: 0, minDragEnabledItems: 9, minFilterItems: 9, selectedItems: 0, selectionMode: 1, state: 32, tableItems: 32, tables: 0, showCloseButton: 5, showCollapseButton: 5, showErrors: 5, showFilter: 5, showHeading: 5, hideStatusIndicators: 5, showTemporaryTableIndicators: 5, messageOverrides: 0 };
+  }
+  static {
+    this.styles = [R, q];
+  }
+  get _visibleItems() {
+    return this.tableItems?.filter((e) => !e.hidden && (this.showErrors || !e.error));
+  }
+  get _openedPanelItems() {
+    return this._visibleItems.filter(({ hidden: e, panel: t }) => !e && t?.open && !t.disabled && t.flowEnabled);
+  }
+  get _dragEnabled() {
+    return this.viewModel.totalItems >= this.minDragEnabledItems && this.dragEnabled;
+  }
+  get _filterEnabled() {
+    return this.viewModel.totalItems >= this.minFilterItems && this.showFilter;
+  }
+  get state() {
+    return this.viewModel.state;
+  }
+  get tableItems() {
+    return this.viewModel.tableItems;
+  }
+  async destroy() {
+    await this.manager.destroy();
+  }
+  willUpdate(e) {
+    e.has("map") && (this.viewModel.map = this.map), e.has("tables") && (this.viewModel.tables = this.tables), e.has("listItemCreatedFunction") && (this.viewModel.listItemCreatedFunction = this.listItemCreatedFunction);
+  }
+  loaded() {
+    this.manager.onLifecycle(() => [
+      I(() => this.view?.map, (e) => {
+        this.map || (this.viewModel.map = e);
+      }, { initial: !0 }),
+      v(() => this.viewModel.tableItems, "change", () => {
+        G(this.selectedItems), this.arcgisTableItemsChanged.emit(), this.requestUpdate();
+      }, { initial: !0 }),
+      v(() => this.selectedItems, "change", () => this.arcgisSelectedItemsChange.emit()),
+      I(() => [this.viewModel.state, this.viewModel.totalItems], () => this.requestUpdate(), { initial: !0 }),
+      I(() => [this.filterPredicate, this._rootListRef.value], () => this._setFilterPredicate())
+    ]);
+  }
+  triggerAction(e, t) {
+    return this.viewModel.triggerAction(e, t);
+  }
+  _getItem(e) {
+    if (e?.tagName.toLowerCase() === "calcite-list-item")
+      return e.value;
+    const t = e?.getAttribute("data-item");
+    return t ? this._findItemByUid(t) : null;
+  }
+  _findItemByUid(e) {
+    const t = this.tableItems?.toArray() ?? [];
+    for (; t.length; ) {
+      const i = t.shift();
+      if (i) {
+        if (i.uid === e)
+          return i;
+        t.push(...i.children?.toArray() ?? []);
+      }
+    }
+    return null;
+  }
+  _getLayerType(e) {
+    return e?.getAttribute("data-layer-type") ?? null;
+  }
+  _setFilterPredicate() {
+    const e = this._rootListRef.value;
+    e && (e.filterPredicate = this.filterPredicate ? (t) => {
+      const i = this._getItem(t);
+      return i ? this.filterPredicate(i) : !1;
+    } : void 0);
+  }
+  _handlePanelFlowItemBack(e) {
+    e.open = !1;
+  }
+  _sortTablesToIds(e, t) {
+    e?.sort((i, s) => {
+      const l = i.uid != null ? t.indexOf(i.uid) : -1, a = s.uid != null ? t.indexOf(s.uid) : -1;
+      return l > a ? -1 : l < a ? 1 : 0;
+    });
+  }
+  _handleCalciteListDragEnd(e) {
+    const { fromEl: t, dragEl: i, oldIndex: s } = e;
+    s == null || !t || !i || t.insertBefore(i, t.children[s]);
+  }
+  _onCalciteListOrderChange(e) {
+    const { _lastDragDetail: t } = this, { toEl: i, fromEl: s, dragEl: l, newIndex: a } = e, h = t?.newIndex === a && t?.dragEl === l && t?.toEl === i && t?.fromEl === s;
+    if (!s || !i || h)
+      return;
+    this._lastDragDetail = e, this._selectedDragItemLayerUid = l.value;
+    const d = Array.from(s.children).filter((n) => n?.matches("calcite-list-item")).map((n) => n.value.layer?.uid ?? "");
+    this._sortTablesToIds(this.viewModel.tables, d);
+  }
+  _handleCalciteListChange(e) {
+    const { selectionMode: t, selectedItems: i } = this;
+    if (t === "none")
+      return;
+    const s = e.target.selectedItems.map((l) => this._getItem(l)).filter(Boolean);
+    i.removeAll(), i.addMany(s);
+  }
+  _handleFlowItemClose() {
+    this.closed = !0, this.arcgisClose.emit(), this.autoDestroyDisabled || this.destroy();
+  }
+  render() {
+    const { state: e } = this, t = {
+      [u.hidden]: e === "loading",
+      [u.disabled]: e === "disabled"
+    };
+    return o`<div class=${w(P(u.widget, u.panel, t))}>${this._renderItems()}</div>`;
+  }
+  _renderNoItemsMessage() {
+    return o`<div slot=message>${this.messages.noItemsToDisplay}</div>`;
+  }
+  _renderNoItems() {
+    return o`<div class=${w(b.itemMessage)}><calcite-notice icon=information kind=info open width=full>${this._renderNoItemsMessage()}</calcite-notice></div>`;
+  }
+  _renderPanelFlowItems() {
+    return $(this._openedPanelItems.toArray(), (e) => e.uid, (e, t) => {
+      const { panel: i, title: s } = e, l = () => this._handlePanelFlowItemBack(i);
+      return o`<calcite-flow-item .description=${s} .heading=${i.title} .headingLevel=${this.headingLevel} .selected=${t === this._openedPanelItems.length - 1} @calciteFlowItemBack=${(a) => {
+        a.preventDefault(), l();
+      }}><arcgis-layer-list-item-panel .item=${e} .view=${this.view}></arcgis-layer-list-item-panel><calcite-button appearance=transparent @click=${l} slot=footer-actions width=full>${this.messages.back}</calcite-button></calcite-flow-item>`;
+    });
+  }
+  _renderItems() {
+    const { collapsed: e, _visibleItems: t, _filterEnabled: i, _rootGroupUid: s, showCloseButton: l, showCollapseButton: a, showHeading: h, _dragEnabled: d, selectionMode: n, filterText: m, filterPlaceholder: f, messages: g } = this, p = [
+      o`<calcite-flow-item .closable=${l} .closed=${this.closed} .collapsed=${e} .collapsible=${a} .heading=${h ? this.label ?? g.componentLabel : void 0} .headingLevel=${this.headingLevel} .selected=${!this._openedPanelItems.length} @calciteFlowItemClose=${() => this._handleFlowItemClose()}>${t?.length ? o`<calcite-list .canPull=${(r) => this._canMove(r, "pull")} .canPut=${(r) => this._canMove(r, "put")} data-layer-type=${s ?? T} .displayMode=${y} .dragEnabled=${d} .filterEnabled=${i} .filterPlaceholder=${f} .filterProps=${N} .filterText=${i ? m : ""} .group=${s} .label=${this.label ?? g.componentLabel} selection-appearance=border .selectionMode=${n} @calciteListChange=${this._handleCalciteListChange} @calciteListDragEnd=${(r) => this._handleCalciteListDragEnd(r.detail)} @calciteListFilter=${(r) => {
+        this.filterText = r.currentTarget?.filterText ?? "", this.arcgisFilterChange.emit();
+      }} @calciteListOrderChange=${(r) => this._onCalciteListOrderChange(r.detail)} ${A(this._rootListRef)}>${t.toArray().map((r) => this._renderItem(r))}${i ? o`<div class=${w(b.filterNoResults)} slot=filter-no-results><calcite-notice kind=info open width=full>${this._renderNoItemsMessage()}</calcite-notice></div>` : null}</calcite-list>` : this._renderNoItems()}</calcite-flow-item>`,
+      this._renderPanelFlowItems()
+    ];
+    return this.closed ? null : _("root-flow", o`<calcite-flow>${p}</calcite-flow>`);
+  }
+  _renderItem(e) {
+    return _(e.uid, O({ canMove: this._canMove, css: b, displayMode: y, dragEnabled: this.dragEnabled, hideStatusIndicators: this.hideStatusIndicators, item: e, listModeDisabled: this.viewModel.listModeDisabled, messages: this.messages, rootGroupUid: this._rootGroupUid, selectedDragItemLayerUid: this._selectedDragItemLayerUid, selectedItems: this.selectedItems, selectionMode: this.selectionMode, showErrors: this.showErrors, showFilter: this.showFilter, showTemporaryTableIndicators: this.showTemporaryTableIndicators, handleAction: (t, i) => this._onTriggerAction(t, i), handlePanelOpen: this._onPanelOpen, handleSelectedDragItemLayerUidChange: this._onSelectedDragItemLayerUidChange, view: this.view }));
+  }
+}
+C("arcgis-table-list-next", z);
+export {
+  z as ArcgisTableListNext
+};

package/dist/components/arcgis-table-list-next/index.js

@@ -0,0 +1,7 @@
+import "@esri/calcite-components/components/calcite-notice";
+import "@esri/calcite-components/components/calcite-flow-item";
+import "../arcgis-layer-list-item-panel/index.js";
+import "@esri/calcite-components/components/calcite-button";
+import "@esri/calcite-components/components/calcite-list";
+import "@esri/calcite-components/components/calcite-flow";
+export * from "./customElement.js";

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

@@ -0,0 +1,14 @@
+/// <reference path="../../index.d.ts" />
+import type TemplateListItem from "@arcgis/core/editing/templates/TemplateListItem.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+
+/**
+ * The Template Image component generates a feature swatch representing a
+ * Feature Template.
+ *
+ * @since 5.1
+ * @internal
+ */
+export abstract class ArcgisTemplateImage extends LitElement {
+  accessor template: TemplateListItem | undefined;
+}

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

@@ -0,0 +1,122 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as h } from "../../chunks/runtime.js";
+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 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 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";
+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>`;
+  }
+  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 };
+  v(e) && "renderer" in t && t.renderer?.type === "dictionary" && (n.fieldMap = t.renderer.fieldMap ?? void 0, n.feature = {
+    attributes: e.prototype.attributes ?? {}
+  });
+  const o = await w(r, n);
+  return o ? s`${b(o.outerHTML)}` : null;
+}
+async function T(e, t) {
+  if (c(t))
+    return await m(e);
+  if ("renderer" in e && e.renderer) {
+    const { renderer: i } = e, r = new p({ attributes: t.prototype.attributes });
+    if ("getSymbolAsync" in i) {
+      const a = await i.getSymbolAsync(r);
+      if (a)
+        return a;
+    }
+  }
+  return await m(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 C(e.geometryType) : null;
+}
+class L extends _ {
+  constructor() {
+    super(...arguments), this._lastRun = 0, this._attempted = !1, this._isCurrentlyInView = !1, this._intersectionObserver = null, this._imageContainerDiv = d(), this._generatedImageData = null;
+  }
+  static {
+    this.properties = { _generatedImageData: 16, template: 0 };
+  }
+  static {
+    this.styles = D;
+  }
+  get rootLayer() {
+    return this.template?.layer?.type === "subtype-sublayer" ? this.template.layer.parent : this.template?.layer;
+  }
+  willUpdate(t) {
+    t.has("template") && (this.hasUpdated || this.template !== null) && this._resetData();
+  }
+  updated() {
+    !this._attempted && this._isCurrentlyInView && (this._attempted = !0, this._handleImage().catch((t) => {
+      l.log("warn", this, "Failed processing image");
+    }));
+  }
+  loaded() {
+    this.manager.onLifecycle(() => (this._addIntersectionObserver(), () => {
+      this._removeIntersectionObserver();
+    }));
+  }
+  _resetData() {
+    this._generatedImageData = null, this._attempted = !1;
+  }
+  async _generateImage() {
+    return this.template ? await x(this.template.template, this.template.layer) : "";
+  }
+  async _handleImage() {
+    const t = ++this._lastRun;
+    if (!this._generatedImageData || this._generatedImageData === "")
+      try {
+        const i = await this._generateImage();
+        if (this._lastRun !== t || this._generatedImageData === i)
+          return;
+        this._generatedImageData = i;
+      } finally {
+        this._attempted = !0;
+      }
+  }
+  _addIntersectionObserver() {
+    const t = {
+      // If the image gets within 50px in the Y axis, start the download.
+      rootMargin: "50px 0px",
+      threshold: 0.01
+    };
+    this._imageContainerDiv.value && requestAnimationFrame(() => {
+      this.isConnected && (this._intersectionObserver = new IntersectionObserver((i) => {
+        let r = !1;
+        i.forEach((a) => {
+          a.intersectionRatio > 0 && !r ? (r = !0, this._isCurrentlyInView = !0, this._handleImage().catch((n) => {
+            l.log("warn", this, "Failed processing image");
+          })) : this._isCurrentlyInView = !1;
+        });
+      }, t), this._intersectionObserver?.observe(this._imageContainerDiv.value));
+    });
+  }
+  _removeIntersectionObserver() {
+    this._intersectionObserver?.disconnect(), this._intersectionObserver = null;
+  }
+  render() {
+    return s`<div class="template-image-container" ${f(this._imageContainerDiv)}>${this._generatedImageData ?? ""}</div>`;
+  }
+}
+h("arcgis-template-image", L);
+export {
+  L as ArcgisTemplateImage
+};

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

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

package/dist/components/arcgis-time-of-day-slider/customElement.js

@@ -86,7 +86,7 @@ class j extends T {
   }
   render() {
     const e = this.mode === "single" && !this.disabled;
-    return f(this.messages._lang, m`<arcgis-slider .ariaLabel=${this.label} class=${_({ "wrap-labels": this._shouldWrapLabels })} .disabled=${this.disabled} fill-placement=none .labelFormatter=${this._sliderLabelFormatter} layout=horizontal min=0 .max=${c} .steps=${this.steps ?? 1} .valueLabelsDisplay=${this.mode === "range" ? "hidden" : "always"} value-labels-placement=start .values=${this._values} @arcgisInput=${({ currentTarget: { values: t } }) => {
+    return f(this.messages._lang, m`<arcgis-slider .ariaLabel=${this.label} class=${_({ "wrap-labels": this._shouldWrapLabels })} .disabled=${this.disabled} .fillPlacement=${this.mode === "range" ? "between" : "none"} .labelFormatter=${this._sliderLabelFormatter} layout=horizontal min=0 .max=${c} .steps=${this.steps ?? 1} .valueLabelsDisplay=${this.mode === "range" ? "hidden" : "always"} value-labels-placement=start .values=${this._values} @arcgisInput=${({ currentTarget: { values: t } }) => {
       this.mode === "single" ? this._setStartTime(t[0]) : this._setRange(t[0], t[1]);
     }}>${this.mode === "range" ? this._renderTimeRange() : void 0}<div class="ticks-container" slot=content-end><arcgis-ticks class="main-ticks" .interactive=${e} .labelFormatter=${this._tickLabelFormatter} layout=horizontal min=0 .max=${c} mode=value show-labels .values=${p} @arcgisTickClick=${(t) => this._setStartTime(t.detail.value)}></arcgis-ticks><arcgis-ticks class="secondary-ticks" layout=horizontal min=0 .max=${c} mode=value .values=${I} @arcgisTickClick=${(t) => this._setStartTime(t.detail.value)}></arcgis-ticks></div></arcgis-slider>`);
   }

package/dist/components/arcgis-time-slider/customElement.d.ts

@@ -19,7 +19,7 @@ import type { TickConfig } from "@arcgis/core/widgets/Slider/types.js";
 export abstract class ArcgisTimeSlider extends LitElement {
   /**
    * Defines actions that will appear in a menu when the user clicks the ellipsis button
-   * ![timeSlider-actions-menu](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/ellipsis.png) in the component. The
+   * ![timeSlider-actions-menu](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/ellipsis.avif) in the component. The
    * ellipsis button will not display if this property is `null` or if the collection is empty.
    * Each [Action](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/types/#Action) is defined with a unique id, a title,
    * and an icon.
@@ -28,7 +28,7 @@ export abstract class ArcgisTimeSlider extends LitElement {
    * can be used to execute custom code such as setting the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) to a specific date or copying the
    * timeExtent to the browser's clipboard.
    *
-   * [![widgets-timeSlider-actions](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/widgets-timeslider-actions.png)](https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-timeslider-offset)
+   * [![widgets-timeSlider-actions](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/widgets-timeslider-actions.avif)](https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-timeslider-offset)
    *
    * @since 4.21
    * @see [Sample - TimeSlider with offset](https://developers.arcgis.com/javascript/latest/sample-code/widgets-timeslider-offset/)
@@ -188,10 +188,10 @@ export abstract class ArcgisTimeSlider extends LitElement {
    *
    * Possible Values       | Description   | Example |
    * ----------------------|-------------- | ------- |
-   * instant               | The slider will show temporal data that falls on a single instance in time. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` and `end` dates to same date: `{start: sameDate, end: sameDate}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-instance.png"> |
-   * time-window           | The slider will show temporal data that falls within a given time range. This is the default. Set [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` and `date` properties to desired dates. | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-time-window.png"> |
-   * cumulative-from-start | Similar to `time-window` with the start time is always pinned to the start of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` date to `null` and set `end` date to a desired date: `{start: null, end: date}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-start.png"> |
-   * cumulative-from-end   | Also, similar to the `time-window` with the end time pinned to the end of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` date to a desired date and set `end` date to `null`: `{start: date, end: null}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-end.png"> |
+   * instant               | The slider will show temporal data that falls on a single instance in time. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` and `end` dates to same date: `{start: sameDate, end: sameDate}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-instance.avif"> |
+   * time-window           | The slider will show temporal data that falls within a given time range. This is the default. Set [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` and `date` properties to desired dates. | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-time-window.avif"> |
+   * cumulative-from-start | Similar to `time-window` with the start time is always pinned to the start of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` date to `null` and set `end` date to a desired date: `{start: null, end: date}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-start.avif"> |
+   * cumulative-from-end   | Also, similar to the `time-window` with the end time pinned to the end of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` date to a desired date and set `end` date to `null`: `{start: date, end: null}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-end.avif"> |
    *
    * @default "time-window"
    * @see [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent)

package/dist/components/arcgis-track/customElement.d.ts

@@ -15,7 +15,7 @@ import type { Button as Button } from "@esri/calcite-components/components/calci
  * The view rotates based on device heading, and the default heading symbol will display
  * when speed is greater than zero and the browser provides heading information.
  *
- * This component uses the browser's [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) which is only available in [secure contexts](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts), such as HTTPS.
+ * This component uses the browser's [Geolocation API](https://developer.mozilla.org/docs/Web/API/Geolocation_API) which is only available in [secure contexts](https://developer.mozilla.org/docs/Web/Security/Defenses/Secure_Contexts), such as HTTPS.
  * `localhost` is considered "potentially secure" and can be used for testing.
  *
  * > [!WARNING]
@@ -186,7 +186,7 @@ export abstract class ArcgisTrack extends LitElement {
   accessor referenceElement: ArcgisReferenceElement | string | undefined;
   /**
    * Indicates whether the component will automatically rotate to the device heading based on
-   * the Geolocation APIs [`GeolocationCoordinates.heading`](https://developer.mozilla.org/en-US/docs/Web/API/GeolocationCoordinates/heading)
+   * the Geolocation APIs [`GeolocationCoordinates.heading`](https://developer.mozilla.org/docs/Web/API/GeolocationCoordinates/heading)
    * property. The map will not rotate if the speed is `0`,
    * or if the device is unable to provide heading information.
    *