@arcgis/map-components 5.2.0-next.76 → 5.2.0-next.78

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

@@ -1,10 +1,10 @@
 /// <reference path="../../index.d.ts" />
-import type ListItem from "@arcgis/core/widgets/LayerList/ListItem.js";
 import type Collection from "@arcgis/core/core/Collection.js";
-import type TableListListItem from "@arcgis/core/widgets/TableList/ListItem.js";
+import type Item from "@arcgis/core/layers/list/Item.js";
+import type TableItem from "@arcgis/core/layers/list/TableItem.js";
 import type { VisibilityAppearance } from "../../utils/action-utils.js";
 import type { CanSortFunction, TableSupportedLayers } from "../../utils/layer-list-utils.js";
-import type { LayerListViewModelEvents } from "@arcgis/core/widgets/LayerList/LayerListViewModel.js";
+import type { LayerItemCollectionEvents } from "@arcgis/core/layers/list/LayerItemCollection.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { ArcgisTableListNext } from "../arcgis-table-list-next/customElement.js";
 import type { ArcgisReferenceElement, HeadingLevel, IconName } from "../types.js";
@@ -12,7 +12,7 @@ import type { CatalogLayerListParams, FlowLayer, TableListParams } from "./types
 import type { ArcgisCatalogLayerListNext } from "../arcgis-catalog-layer-list-next/customElement.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 import type { MapViewOrSceneView } from "@arcgis/core/views/MapViewOrSceneView.js";
-import type { ListItemModifier, State } from "@arcgis/core/widgets/LayerList/types.js";
+import type { ItemModifier, State } from "@arcgis/core/layers/list/types.js";
 import type { List as List } from "@esri/calcite-components/components/calcite-list";
 
 /**
@@ -171,7 +171,7 @@ export abstract class ArcgisLayerListNext extends LitElement {
    * layerListElement.filterPredicate = (item) => item.title.toLowerCase().includes("streets");
    * ```
    */
-  accessor filterPredicate: ((item: ListItem | TableListListItem) => boolean) | undefined;
+  accessor filterPredicate: ((item: Item | TableItem) => boolean) | undefined;
   /**
    * The value of the filter input if [showFilter](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-layer-list-next/#showFilter) is true.
    *
@@ -329,7 +329,7 @@ export abstract class ArcgisLayerListNext extends LitElement {
    * }
    * ```
    */
-  accessor listItemCreatedFunction: ListItemModifier | null | undefined;
+  accessor listItemCreatedFunction: ItemModifier | 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.
    *
@@ -465,7 +465,7 @@ export abstract class ArcgisLayerListNext extends LitElement {
    */
   get openedLayers(): Collection<FlowLayer>;
   /** A collection of [ListItem](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/ListItem/)s representing the operational layers in the layer list. */
-  get operationalItems(): Collection<ListItem>;
+  get operationalItems(): Collection<Item>;
   /**
    * 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.
    *
@@ -478,7 +478,7 @@ export abstract class ArcgisLayerListNext extends LitElement {
    *
    * @see [selectionMode](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-layer-list-next/#selectionMode)
    */
-  accessor selectedItems: Collection<ListItem>;
+  accessor selectedItems: Collection<Item>;
   /**
    * Specifies the selection mode.
    * Selected items are available in the [selectedItems](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-layer-list-next/#selectedItems) property.
@@ -610,7 +610,7 @@ export abstract class ArcgisLayerListNext extends LitElement {
   /** Emits when selected items state changes. */
   readonly arcgisSelectedItemsChange: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Emitted when an action is triggered on the component. */
-  readonly arcgisTriggerAction: import("@arcgis/lumina").TargetedEvent<this, LayerListViewModelEvents["trigger-action"]>;
+  readonly arcgisTriggerAction: import("@arcgis/lumina").TargetedEvent<this, LayerItemCollectionEvents["trigger-action"]>;
   readonly "@eventTypes": {
     arcgisClose: ArcgisLayerListNext["arcgisClose"]["detail"];
     arcgisFilterChange: ArcgisLayerListNext["arcgisFilterChange"]["detail"];

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

@@ -3,7 +3,7 @@ import { c as R } from "../../chunks/runtime.js";
 import { html as h } from "lit";
 import { keyed as v } from "lit/directives/keyed.js";
 import { repeat as N } from "lit/directives/repeat.js";
-import x from "@arcgis/core/widgets/LayerList/LayerListViewModel.js";
+import x from "@arcgis/core/layers/list/LayerItemCollection.js";
 import { classes as B } from "@arcgis/toolkit/dom";
 import { generateGuid as k } from "@arcgis/toolkit/string";
 import { createRef as w, ref as b } from "lit/directives/ref.js";
@@ -11,10 +11,10 @@ import { u as S } from "../../chunks/useT9n.js";
 import { m as U } from "../../chunks/useViewModel.js";
 import { g as $ } from "../../chunks/globalCss.js";
 import { c as y } from "../../chunks/css.js";
-import { g as m, a as T, m as G, b as H, r as V, s as j, c as q, d as z, e as J } from "../../chunks/layer-list-utils.js";
+import { g as m, a as F, m as G, b as H, r as V, s as j, c as q, d as z, e as J } from "../../chunks/layer-list-utils.js";
 import p from "@arcgis/core/core/Collection.js";
 import { on as C, watch as K } from "@arcgis/core/core/reactiveUtils.js";
-import { LitElement as Q, createEvent as L, renderElement as F, safeClassMap as E, nothing as A } from "@arcgis/lumina";
+import { LitElement as Q, createEvent as I, renderElement as M, safeClassMap as E, nothing as A } from "@arcgis/lumina";
 import { usePropertyChange as W } from "@arcgis/lumina/controllers";
 import { reEmitEvent as X } from "@arcgis/lumina/controllers/accessor";
 import "@arcgis/toolkit/function";
@@ -29,12 +29,12 @@ class ae extends Q {
       const i = a === "pull" ? this.listItemCanGiveFunction : this.listItemCanReceiveFunction, r = m(e, this.operationalItems);
       if (!r?.sortable)
         return !1;
-      const o = this._resolveListContainer(t), l = this._resolveListContainer(s), n = this._getContainerItem(o), d = T(o), g = this._getContainerItem(l), u = T(l), I = !!d && !!u && d === u, f = {
+      const o = this._resolveListContainer(t), l = this._resolveListContainer(s), n = this._getContainerItem(o), d = F(o), g = this._getContainerItem(l), u = F(l), L = !!d && !!u && d === u, f = {
         selected: r,
         from: n,
         to: g
-      }, _ = o?.group, c = l?.group, D = n?.layer?.type ?? "", P = g?.layer?.type ?? "", M = /* @__PURE__ */ new Set(["map-image", "catalog", "knowledge-graph"]);
-      return _ && c && typeof i == "function" ? i(f) : I && !M.has(D) && !M.has(P) && r?.layer?.type !== "sublayer";
+      }, _ = o?.group, c = l?.group, D = n?.layer?.type ?? "", P = g?.layer?.type ?? "", T = /* @__PURE__ */ new Set(["map-image", "catalog", "knowledge-graph"]);
+      return _ && c && typeof i == "function" ? i(f) : L && !T.has(D) && !T.has(P) && r?.layer?.type !== "sublayer";
     }, this._onCatalogOpen = (e) => {
       this.openedLayers.push(e.layer?.parent);
     }, this._onTablesOpen = (e) => {
@@ -54,7 +54,7 @@ class ae extends Q {
       this._selectedDragItemLayerUid = e;
     }, this._onTriggerAction = (e, t) => {
       this.triggerAction(e, t);
-    }, this._tooltipReferenceMap = /* @__PURE__ */ new Map(), this._layerListMap = /* @__PURE__ */ new Map(), this.layerTablesEnabled = new p(["knowledge-graph"]), this.mapImageOptions = null, this.openedLayerLists = new p(), this.tileOptions = null, this.view = this.viewModel.view, this.autoDestroyDisabled = !1, this.closed = !1, this.icon = "layers", this.collapsed = !1, this.dragEnabled = !1, this.filterPlaceholder = "", this.filterText = "", this.headingLevel = 2, this.layerTablesAvailable = new p(["knowledge-graph"]), this.listItemCreatedFunction = this.viewModel.listItemCreatedFunction, this.listModeDisabled = this.viewModel.listModeDisabled, this.minDragEnabledItems = G, this.minFilterItems = H, this.openedLayers = new p(), this.operationalItems = this.viewModel.operationalItems, this.selectedItems = new p(), this.selectionMode = "none", this.visibilityAppearance = "default", this.hideCatalogLayerList = !1, 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.showTemporaryLayerIndicators = !1, this.state = this.viewModel.state, this.arcgisPropertyChange = W()("state"), this.arcgisReady = L(), this.arcgisFilterChange = L(), this.arcgisSelectedItemsChange = L(), this.arcgisOpenedLayersChange = L(), this.arcgisTriggerAction = X(() => this.viewModel, "trigger-action");
+    }, this._tooltipReferenceMap = /* @__PURE__ */ new Map(), this._layerListMap = /* @__PURE__ */ new Map(), this.layerTablesEnabled = new p(["knowledge-graph"]), this.mapImageOptions = null, this.openedLayerLists = new p(), this.tileOptions = null, this.view = this.viewModel.view, this.autoDestroyDisabled = !1, this.closed = !1, this.icon = "layers", this.collapsed = !1, this.dragEnabled = !1, this.filterPlaceholder = "", this.filterText = "", this.headingLevel = 2, this.layerTablesAvailable = new p(["knowledge-graph"]), this.listItemCreatedFunction = this.viewModel.listItemCreatedFunction, this.listModeDisabled = this.viewModel.listModeDisabled, this.minDragEnabledItems = G, this.minFilterItems = H, this.openedLayers = new p(), this.operationalItems = this.viewModel.operationalItems, this.selectedItems = new p(), this.selectionMode = "none", this.visibilityAppearance = "default", this.hideCatalogLayerList = !1, 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.showTemporaryLayerIndicators = !1, this.state = this.viewModel.state, this.arcgisPropertyChange = W()("state"), this.arcgisReady = I(), this.arcgisFilterChange = I(), this.arcgisSelectedItemsChange = I(), this.arcgisOpenedLayersChange = I(), this.arcgisTriggerAction = X(() => this.viewModel, "trigger-action");
   }
   static {
     this.properties = { _catalogLayerList: 16, _tableList: 16, _tooltipReferenceMap: 16, _layerListMap: 16, _totalItems: 16, _visibleItems: 16, _openedPanelItems: 16, _dragEnabled: 16, _filterEnabled: 16, layerTablesEnabled: 16, mapImageOptions: 16, openedLayerLists: 16, tileOptions: 16, _renderedOpenLayerFlowItems: 16, view: 0, autoDestroyDisabled: 5, closed: 5, referenceElement: 1, icon: 1, catalogLayerList: 32, catalogOptions: 0, collapsed: 5, dragEnabled: 5, filterPlaceholder: 1, filterPredicate: 0, filterText: 1, headingLevel: 9, knowledgeGraphOptions: 0, layerTablesAvailable: 0, listItemCanGiveFunction: 0, listItemCanReceiveFunction: 0, listItemCreatedFunction: 0, listModeDisabled: 5, minDragEnabledItems: 9, minFilterItems: 9, openedLayers: 32, operationalItems: 0, selectedItems: 0, selectionMode: 1, tableList: 32, visibilityAppearance: 1, hideCatalogLayerList: 5, showCloseButton: 5, showCollapseButton: 5, showErrors: 5, hideNoFilterResultsNotice: 5, hideNoItemsNotice: 5, showFilter: 5, showHeading: 5, hideStatusIndicators: 5, showTemporaryLayerIndicators: 5, messageOverrides: 0, label: 1, state: 32 };
@@ -154,7 +154,7 @@ class ae extends Q {
   }
   async _createCatalogLayerList(e) {
     const { headingLevel: t, catalogOptions: s, filterPlaceholder: a, listItemCreatedFunction: i, minFilterItems: r, selectionMode: o, visibilityAppearance: l } = this;
-    return F(h`<arcgis-catalog-layer-list-next .headingLevel=${t} .filterPlaceholder=${s?.filterPlaceholder ?? a} .listItemCreatedFunction=${s?.listItemCreatedFunction ?? i} .minFilterItems=${s?.minFilterItems ?? r} .selectionMode=${s?.selectionMode ?? o} .visibilityAppearance=${s?.visibilityAppearance ?? l} .showErrors=${s?.visibleElements?.errors ?? this.showErrors} .showFilter=${s?.visibleElements?.filter ?? this.showFilter} .hideStatusIndicators=${s?.visibleElements?.statusIndicators ?? this.hideStatusIndicators} .showTemporaryLayerIndicators=${s?.visibleElements?.temporaryLayerIndicators ?? this.showTemporaryLayerIndicators} .messageOverrides=${this.messageOverrides} @arcgisReady=${(n) => n.stopPropagation()} .catalogLayer=${e} .view=${this.view} .referenceElement=${this.referenceElement} @catalogOpen=${this._onCatalogOpen} @tablesOpen=${this._onTablesOpen}></arcgis-catalog-layer-list-next>`);
+    return M(h`<arcgis-catalog-layer-list-next .headingLevel=${t} .filterPlaceholder=${s?.filterPlaceholder ?? a} .listItemCreatedFunction=${s?.listItemCreatedFunction ?? i} .minFilterItems=${s?.minFilterItems ?? r} .selectionMode=${s?.selectionMode ?? o} .visibilityAppearance=${s?.visibilityAppearance ?? l} .showErrors=${s?.showErrors ?? this.showErrors} .showFilter=${s?.showFilter ?? this.showFilter} .hideStatusIndicators=${s?.hideStatusIndicators ?? this.hideStatusIndicators} .showTemporaryLayerIndicators=${s?.showTemporaryLayerIndicators ?? this.showTemporaryLayerIndicators} .messageOverrides=${this.messageOverrides} @arcgisReady=${(n) => n.stopPropagation()} .catalogLayer=${e} .view=${this.view} .referenceElement=${this.referenceElement} @catalogOpen=${this._onCatalogOpen} @tablesOpen=${this._onTablesOpen}></arcgis-catalog-layer-list-next>`);
   }
   _getTableListParams(e) {
     switch (e.type) {
@@ -176,14 +176,14 @@ class ae extends Q {
   }
   async _createTableList(e) {
     const { headingLevel: t, selectionMode: s, dragEnabled: a } = this, i = this._getTableListParams(e);
-    return F(h`<arcgis-table-list-next .headingLevel=${i?.headingLevel ?? t} .selectionMode=${i?.selectionMode ?? s} .dragEnabled=${i?.dragEnabled ?? a} .collapsed=${i?.collapsed} .filterPlaceholder=${i?.filterPlaceholder} .filterText=${i?.filterText} .icon=${i?.icon ?? void 0} .label=${i?.label ?? void 0} .listItemCreatedFunction=${i?.listItemCreatedFunction} .messageOverrides=${this.messageOverrides} .tables=${i?.tables} .referenceElement=${this.referenceElement} @arcgisReady=${(r) => r.stopPropagation()}></arcgis-table-list-next>`);
+    return M(h`<arcgis-table-list-next .headingLevel=${i?.headingLevel ?? t} .selectionMode=${i?.selectionMode ?? s} .dragEnabled=${i?.dragEnabled ?? a} .collapsed=${i?.collapsed} .filterPlaceholder=${i?.filterPlaceholder} .filterText=${i?.filterText} .icon=${i?.icon ?? void 0} .label=${i?.label ?? void 0} .listItemCreatedFunction=${i?.listItemCreatedFunction} .messageOverrides=${this.messageOverrides} .tables=${i?.tables} .referenceElement=${this.referenceElement} @arcgisReady=${(r) => r.stopPropagation()}></arcgis-table-list-next>`);
   }
   _handlePanelFlowItemBack(e) {
     e.open = !1;
   }
   _moveLayerFromChildList({ toEl: e, fromEl: t, dragEl: s, newIndex: a }) {
     const i = this._resolveListContainer(e), r = this._resolveListContainer(t), o = m(s, this.operationalItems), l = this._getContainerItem(i), n = this._getContainerItem(r);
-    a == null || !o || (this.viewModel.moveListItem(o, n, l, a), Z(this, o.uid, (d) => this._resolveListContainer(d.parentElement) === i));
+    a == null || !o || (this.viewModel.moveItem(o, n, l, a), Z(this, o.uid, (d) => this._resolveListContainer(d.parentElement) === i));
   }
   _onCalciteListDragEnd(e) {
     const { fromEl: t, toEl: s, dragEl: a, oldIndex: i } = e;
@@ -273,8 +273,8 @@ class ae extends Q {
     });
   }
   _renderItems() {
-    const { collapsed: e, _visibleItems: t, _openedPanelItems: s, _filterEnabled: a, _rootGroupUid: i, showCloseButton: r, showCollapseButton: o, showHeading: l, _dragEnabled: n, selectionMode: d, filterText: g, openedLayers: u, filterPlaceholder: I, messages: f } = this, _ = [
-      h`<calcite-flow-item .closable=${r} .closed=${this.closed} .collapsed=${e} .collapsible=${o} .heading=${l ? f.componentLabel : void 0} .headingLevel=${this.headingLevel} .selected=${!u.length && !s.length} @calciteFlowItemClose=${() => this.closed = !1}>${t?.length ? h`<calcite-list @focusin=${this._setActiveItem} @focusout=${this._clearActiveItem} .canPull=${(c) => this._canMove(c, "pull")} .canPut=${(c) => this._canMove(c, "put")} data-layer-type=${i ?? A} .displayMode=${O} .dragEnabled=${n} .filterEnabled=${a} .filterPlaceholder=${I} .filterProps=${J} .filterText=${a ? g : ""} .group=${i} .label=${f.componentLabel} @mouseleave=${this._clearActiveItem} @mouseover=${this._setActiveItem} selection-appearance=highlight .selectionMode=${d} @calciteListChange=${this._handleCalciteListChange} @calciteListFilter=${(c) => {
+    const { collapsed: e, _visibleItems: t, _openedPanelItems: s, _filterEnabled: a, _rootGroupUid: i, showCloseButton: r, showCollapseButton: o, showHeading: l, _dragEnabled: n, selectionMode: d, filterText: g, openedLayers: u, filterPlaceholder: L, messages: f } = this, _ = [
+      h`<calcite-flow-item .closable=${r} .closed=${this.closed} .collapsed=${e} .collapsible=${o} .heading=${l ? f.componentLabel : void 0} .headingLevel=${this.headingLevel} .selected=${!u.length && !s.length} @calciteFlowItemClose=${() => this.closed = !1}>${t?.length ? h`<calcite-list @focusin=${this._setActiveItem} @focusout=${this._clearActiveItem} .canPull=${(c) => this._canMove(c, "pull")} .canPut=${(c) => this._canMove(c, "put")} data-layer-type=${i ?? A} .displayMode=${O} .dragEnabled=${n} .filterEnabled=${a} .filterPlaceholder=${L} .filterProps=${J} .filterText=${a ? g : ""} .group=${i} .label=${f.componentLabel} @mouseleave=${this._clearActiveItem} @mouseover=${this._setActiveItem} selection-appearance=highlight .selectionMode=${d} @calciteListChange=${this._handleCalciteListChange} @calciteListFilter=${(c) => {
         this.filterText = c.currentTarget?.filterText ?? "", this.arcgisFilterChange.emit();
       }} @calciteListOrderChange=${(c) => this._onCalciteListOrderChange(c.detail)} @calciteListDragEnd=${(c) => this._onCalciteListDragEnd(c.detail)} ${b(this._rootListRef)}>${t.toArray().map((c) => this._renderItem(c))}${a && !this.hideNoFilterResultsNotice ? h`<div class=${E(y.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(),

package/dist/components/arcgis-layer-list-next/types.d.ts

@@ -2,14 +2,14 @@ import type CatalogLayer from "@arcgis/core/layers/CatalogLayer.js";
 import type KnowledgeGraphLayer from "@arcgis/core/layers/KnowledgeGraphLayer.js";
 import type MapImageLayer from "@arcgis/core/layers/MapImageLayer.js";
 import type TileLayer from "@arcgis/core/layers/TileLayer.js";
-import type { CatalogLayerListProperties } from "@arcgis/core/widgets/CatalogLayerList.js";
-import type { TableListProperties } from "@arcgis/core/widgets/TableList.js";
+import type { CatalogLayerListOptions } from "../arcgis-catalog-layer-list-next/customElement.js";
+import type { TableListOptions } from "../arcgis-table-list-next/customElement.js";
 
 /** Catalog layer list configuration passed through Layer List (next). */
-export type CatalogLayerListParams = CatalogLayerListProperties;
+export type CatalogLayerListParams = CatalogLayerListOptions;
 
 /** Table list configuration passed through Layer List (next). */
-export type TableListParams = TableListProperties;
+export type TableListParams = TableListOptions;
 
 /** Layer types that can open a nested flow list from Layer List (next). */
 export type FlowLayer = CatalogLayer | SubtablesLayer;

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

@@ -4,19 +4,23 @@ 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 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 { TableListViewModelEvents } from "@arcgis/core/widgets/TableList/TableListViewModel.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 { 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";
 
+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.
@@ -108,7 +112,7 @@ export abstract class ArcgisTableListNext extends LitElement {
   /** @internal */
   accessor listItemCanReceiveFunction: CanSortFunction | undefined;
   /** Specifies a function that accesses each list item as it is created. */
-  accessor listItemCreatedFunction: ListItemModifier | null | undefined;
+  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.
    *
@@ -172,7 +176,7 @@ export abstract class ArcgisTableListNext extends LitElement {
    */
   accessor referenceElement: ArcgisReferenceElement | string | undefined;
   /** A collection of selected table list items. */
-  accessor selectedItems: Collection<TableListListItem>;
+  accessor selectedItems: Collection<TableItem>;
   /**
    * Specifies the selection mode.
    *
@@ -216,9 +220,9 @@ export abstract class ArcgisTableListNext extends LitElement {
    */
   accessor showTemporaryTableIndicators: boolean;
   /** The current state of the component. */
-  get state(): TableListViewModel["state"];
+  get state(): TableItemCollection["state"];
   /** The collection of table ListItems displayed within the component. */
-  get tableItems(): Collection<TableListListItem>;
+  get tableItems(): Collection<TableItem>;
   /** A collection of tables to display in the component. */
   accessor tables: ReadonlyCollection<Layer | Sublayer> | null | undefined;
   /**
@@ -241,7 +245,7 @@ export abstract class ArcgisTableListNext extends LitElement {
   /** 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 arcgisTriggerAction: import("@arcgis/lumina").TargetedEvent<this, TableItemCollectionEvents["trigger-action"]>;
   readonly "@eventTypes": {
     arcgisClose: ArcgisTableListNext["arcgisClose"]["detail"];
     arcgisFilterChange: ArcgisTableListNext["arcgisFilterChange"]["detail"];
@@ -257,10 +261,10 @@ export abstract class ArcgisTableListNext extends LitElement {
 export type CanSortFunction = (event: CanSortEvent) => boolean;
 
 /** @param item */
-export type FilterPredicate = (item: TableListListItem) => boolean;
+export type FilterPredicate = (item: TableItem) => boolean;
 
 export interface CanSortEvent {
-  selected: null | undefined | TableListListItem;
-  from: null | undefined | TableListListItem;
-  to: null | undefined | TableListListItem;
+  selected: null | undefined | TableItem;
+  from: null | undefined | TableItem;
+  to: null | undefined | TableItem;
 }

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

@@ -1,11 +1,11 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as C } from "../../chunks/runtime.js";
-import { repeat as M } from "lit/directives/repeat.js";
+import { repeat as $ } from "lit/directives/repeat.js";
 import { keyed as _ } from "lit/directives/keyed.js";
-import $ from "@arcgis/core/core/Collection.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/widgets/TableList/TableListViewModel.js";
-import { LitElement as E, createEvent as c, safeClassMap as w, nothing as F } from "@arcgis/lumina";
+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";
@@ -20,7 +20,7 @@ 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 b = H, y = "nested", j = V(L);
+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) => {
@@ -35,7 +35,7 @@ class z extends 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 $(), 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");
+    }, 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 };
@@ -147,16 +147,16 @@ class z extends E {
       [u.hidden]: e === "loading",
       [u.disabled]: e === "disabled"
     };
-    return o`<div class=${w(P(u.widget, u.panel, t))}>${this._renderItems()}</div>`;
+    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=${w(b.itemMessage)}><calcite-notice icon=information kind=info open width=full>${this._renderNoItemsMessage()}</calcite-notice></div>`;
+    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 M(this._openedPanelItems.toArray(), (e) => e.uid, (e, t) => {
+    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();
@@ -167,13 +167,13 @@ class z extends E {
     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=${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>`,
+      }} @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: b, 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 }));
+    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);

package/dist/components/arcgis-utility-network-trace-functions-result-item/customElement.d.ts

@@ -0,0 +1,30 @@
+/// <reference path="../../index.d.ts" />
+import type TraceResult from "@arcgis/core/rest/networks/support/TraceResult.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+
+/**
+ * Trace result item for displaying [function](https://developers.arcgis.com/javascript/latest/references/core/rest/networks/support/TraceResult/#globalFunctionResults) results from a trace.
+ *
+ * @internal
+ * @since 5.2
+ * @see [Set up functions](https://doc.esri.com/en/arcgis-pro/latest/help/data/utility-network/configure-a-trace.html#CBB)
+ */
+export abstract class ArcgisUtilityNetworkTraceFunctionsResultItem extends LitElement {
+  /** @internal */
+  protected _messages: {
+      componentLabel: string;
+      labels: { functionResults: string; };
+  } & T9nMeta<{
+      componentLabel: string;
+      labels: { functionResults: string; };
+  }>;
+  /** The heading displayed above the result item. */
+  accessor heading: string | undefined;
+  /**
+   * The trace result containing the function results to render.
+   *
+   * @required
+   */
+  accessor traceResult: TraceResult | undefined;
+}

package/dist/components/arcgis-utility-network-trace-functions-result-item/customElement.js

@@ -0,0 +1,34 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as m } from "../../chunks/runtime.js";
+import { css as g, html as e } from "lit";
+import { LitElement as b } from "@arcgis/lumina";
+import { log as l, composeMissingPropertyMessage as p, composeEmptyPropertyMessage as h } from "@arcgis/toolkit/log";
+import { u as f } from "../../chunks/useT9n.js";
+const d = g`calcite-table{--calcite-table-border-color: none}calcite-table-row{--calcite-table-row-border-color: var(--calcite-color-border-3)}.functions-heading{margin:var(--calcite-spacing-md) var(--calcite-spacing-md) var(--calcite-spacing-xxs);font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size);color:var(--calcite-color-text-1)}`;
+class w extends b {
+  constructor() {
+    super(...arguments), this._messages = f({ blocking: !0 });
+  }
+  static {
+    this.properties = { heading: 1, traceResult: 0 };
+  }
+  static {
+    this.styles = d;
+  }
+  loaded() {
+    this.traceResult ? this.traceResult.globalFunctionResults.length || l("warn", this, h("traceResult")) : l("warn", this, p("traceResult"));
+  }
+  render() {
+    if (!this.traceResult?.globalFunctionResults.length)
+      return;
+    const { heading: c, _messages: s } = this, { globalFunctionResults: i } = this.traceResult;
+    return e`${c && e`<div class="functions-heading">${c}</div>` || ""}<calcite-table .caption=${s.labels.functionResults}>${i.filter((t) => t.networkAttributeName != null && t.result != null && t.functionType != null).map((t) => {
+      const { functionName: a, networkAttributeName: r, functionType: o, result: n } = t, u = a || `${r} ${o}`;
+      return e`<calcite-table-row><calcite-table-cell>${u}</calcite-table-cell><calcite-table-cell>${n}</calcite-table-cell></calcite-table-row>`;
+    })}</calcite-table>`;
+  }
+}
+m("arcgis-utility-network-trace-functions-result-item", w);
+export {
+  w as ArcgisUtilityNetworkTraceFunctionsResultItem
+};

package/dist/components/arcgis-utility-network-trace-functions-result-item/index.d.ts

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

package/dist/components/arcgis-utility-network-trace-functions-result-item/index.js

@@ -0,0 +1,4 @@
+import "@esri/calcite-components/components/calcite-table";
+import "@esri/calcite-components/components/calcite-table-row";
+import "@esri/calcite-components/components/calcite-table-cell";
+export * from "./customElement.js";