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

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

@@ -255,7 +255,7 @@ export abstract class ArcgisTableList extends LitElement {
    * tableListElement.selectionMode = "multiple";
    * ```
    */
-  accessor selectionMode: "multiple" | "single" | "none" | "single-persist";
+  accessor selectionMode: "none" | "single-persist" | "multiple" | "single";
   /**
    * Indicates whether to display a close button in the header.
    *
@@ -309,8 +309,8 @@ export abstract class ArcgisTableList extends LitElement {
   /** @internal */
   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 component will be associated with a map or scene component rather than using the `view` property.
+   * 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 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. */

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

@@ -0,0 +1,270 @@
+/// <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 TableItemCollection from "@arcgis/core/layers/list/TableItemCollection.js";
+import type TableItem from "@arcgis/core/layers/list/TableItem.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 { TableItemCollectionEvents, TableItemModifier } from "@arcgis/core/layers/list/TableItemCollection.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 { List as List } from "@esri/calcite-components/components/calcite-list";
+import type { ReadonlyCollection } from "@arcgis/core/core/Collection.js";
+
+export type TableListOptions = Partial<Pick<ArcgisTableListNext, "collapsed" | "dragEnabled" | "filterPlaceholder" | "filterText" | "headingLevel" | "hideStatusIndicators" | "icon" | "label" | "minFilterItems" | "selectionMode" | "showErrors" | "showFilter" | "showTemporaryTableIndicators">>
+  & {
+  listItemCreatedFunction?: TableItemCollection["listItemCreatedFunction"];
+};
+
+/**
+ * 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;
+  /**
+   * This property provides the ability to show or hide the no items to display notice when there are no filter results.
+   *
+   * @default false
+   * @since 5.2
+   */
+  accessor hideNoFilterResultsNotice: boolean;
+  /**
+   * This property provides the ability to show or hide the no items to display notice.
+   *
+   * @default false
+   * @since 5.2
+   */
+  accessor hideNoItemsNotice: boolean;
+  /**
+   * 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: TableItemModifier | null | undefined;
+  /**
+   * Specifies whether to ignore the [listMode](https://developers.arcgis.com/javascript/latest/references/core/layers/Layer/#listMode) property to display all layers. A common use case for `listModeDisabled` is when you want to use the component to manage and configure a layer's `listMode` value.
+   *
+   * @default false
+   * @see [listMode](https://developers.arcgis.com/javascript/latest/references/core/layers/Layer/#listMode)
+   * @since 5.2
+   */
+  accessor listModeDisabled: boolean;
+  /** 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<TableItem>;
+  /**
+   * 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(): TableItemCollection["state"];
+  /** The collection of table ListItems displayed within the component. */
+  get tableItems(): Collection<TableItem>;
+  /** 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, TableItemCollectionEvents["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: TableItem) => boolean;
+
+export interface CanSortEvent {
+  selected: null | undefined | TableItem;
+  from: null | undefined | TableItem;
+  to: null | undefined | TableItem;
+}

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 M from "@arcgis/core/core/Collection.js";
+import { watch as I, on as v } from "@arcgis/core/core/reactiveUtils.js";
+import L from "@arcgis/core/layers/list/TableItemCollection.js";
+import { LitElement as E, createEvent as c, safeClassMap as b, nothing as F } from "@arcgis/lumina";
+import { usePropertyChange as T } 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 N } from "@arcgis/toolkit/string";
+import { createRef as U, ref as A } from "lit/directives/ref.js";
+import { html as o } from "lit";
+import { u as x } from "../../chunks/useT9n.js";
+import { g as u } from "../../chunks/globalCss.js";
+import { m as B, b as R, r as k, e as S } from "../../chunks/layer-list-utils.js";
+import { A as G } from "../../chunks/layer-list-item.js";
+import { s as O, 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 w = H, y = "nested", j = V(L);
+class z extends E {
+  constructor() {
+    super(...arguments), this._lastDragDetail = null, this._rootGroupUid = `table-${N()}`, this._rootListRef = U(), this._selectedDragItemLayerUid = null, this.messages = x(), 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.listModeDisabled = this.viewModel.listModeDisabled, this.map = this.viewModel.map, this.minDragEnabledItems = B, this.minFilterItems = R, this.selectedItems = new M(), this.selectionMode = "none", this.tables = this.viewModel.tables, this.showCloseButton = !1, this.showCollapseButton = !1, this.showErrors = !1, this.hideNoFilterResultsNotice = !1, this.hideNoItemsNotice = !1, this.showFilter = !1, this.showHeading = !1, this.hideStatusIndicators = !1, this.showTemporaryTableIndicators = !1, this.arcgisClose = c(), this.arcgisPropertyChange = T()("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, listModeDisabled: 5, map: 0, minDragEnabledItems: 9, minFilterItems: 9, selectedItems: 0, selectionMode: 1, state: 32, tableItems: 32, tables: 0, showCloseButton: 5, showCollapseButton: 5, showErrors: 5, hideNoFilterResultsNotice: 5, hideNoItemsNotice: 5, showFilter: 5, showHeading: 5, hideStatusIndicators: 5, showTemporaryTableIndicators: 5, messageOverrides: 0 };
+  }
+  static {
+    this.styles = [O, 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", () => {
+        k(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=${b(P(u.widget, u.panel, t))}>${this._renderItems()}</div>`;
+  }
+  _renderNoItemsMessage() {
+    return o`<div slot=message>${this.messages.noItemsToDisplay}</div>`;
+  }
+  _renderNoItems() {
+    return this.hideNoItemsNotice ? null : o`<div class=${b(w.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 ?? F} .displayMode=${y} .dragEnabled=${d} .filterEnabled=${i} .filterPlaceholder=${f} .filterProps=${S} .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 && !this.hideNoFilterResultsNotice ? o`<div class=${b(w.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, G({ canMove: this._canMove, css: w, displayMode: y, dragEnabled: this.dragEnabled, hideStatusIndicators: this.hideStatusIndicators, item: e, itemType: "table", 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.d.ts

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

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

@@ -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";