@arcgis/map-components 5.2.0-next.1 → 5.2.0-next.100

package/dist/components/arcgis-utility-network-aggregated-geometry/customElement.js

@@ -1,106 +1,109 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as m } from "../../chunks/runtime.js";
-import p from "@arcgis/core/Color.js";
-import l from "@arcgis/core/Graphic.js";
-import g from "@arcgis/core/layers/GraphicsLayer.js";
-import y from "@arcgis/core/symbols/SimpleFillSymbol.js";
-import n from "@arcgis/core/symbols/SimpleLineSymbol.js";
-import d from "@arcgis/core/symbols/SimpleMarkerSymbol.js";
-import { LitElement as w, createEvent as _, nothing as f } from "@arcgis/lumina";
-import { log as s, composeMissingPropertyMessage as a } from "@arcgis/toolkit/log";
-import { css as G, html as u } from "lit";
-import { u as L } from "../../chunks/useT9n.js";
-import { a as v, b as o } from "../../chunks/layer-utils.js";
-const b = G`.loader-container{display:flex;justify-content:center;padding-bottom:var(--calcite-spacing-md)}`, h = 12;
-class S extends w {
+import { c as l } from "../../chunks/runtime.js";
+import c from "@arcgis/core/Color.js";
+import p from "@arcgis/core/Graphic.js";
+import n from "@arcgis/core/layers/GraphicsLayer.js";
+import g from "@arcgis/core/symbols/SimpleFillSymbol.js";
+import d from "@arcgis/core/symbols/SimpleLineSymbol.js";
+import y from "@arcgis/core/symbols/SimpleMarkerSymbol.js";
+import { LitElement as w, createEvent as f, nothing as u } from "@arcgis/lumina";
+import { log as r, composeMissingPropertyMessage as o } from "@arcgis/toolkit/log";
+import { html as G } from "lit";
+import { u as v } from "../../chunks/useT9n.js";
+import { a as h, i as b } from "../../chunks/layer-utils.js";
+const a = 12;
+class C extends w {
   constructor() {
-    super(...arguments), this._graphicsLayerName = "arcgis-utility-network-aggregated-geometry-graphics", this._messages = L({ blocking: !0 }), this._graphics = [], this._addAggregatedGeometryToView = () => {
-      const e = this.geometry, { line: i, multipoint: r, polygon: c } = e;
-      this._graphics = [i, r, c].filter((t) => t != null).map((t) => this._makeGraphicFromGeometry(t)), this._graphicsLayer.addMany(this._graphics);
-    }, this._createGraphicsLayer = () => {
-      const e = this.view.map, i = this._graphicsLayerName, r = e.findLayerById(i);
-      if (r && v(r)) {
-        this._graphicsLayer = r;
-        return;
-      }
-      this._graphicsLayer = new g({
-        id: i,
-        listMode: "hide",
-        title: i
-      }), o(this.view, this._graphicsLayer);
-    }, this.hideGraphics = !1, this.graphicsColor = new p([255, 255, 0, 0.6]), this.autoDestroyDisabled = !1, this.arcgisHideGraphicsChange = _();
+    super(...arguments), this._messages = v({ blocking: !0 }), this.#t = "arcgis-utility-network-aggregated-geometry-graphics", this.#i = [], this.hideGraphics = !1, this.graphicsColor = new c([255, 255, 0, 0.6]), this.autoDestroyDisabled = !1, this.arcgisHideGraphicsChange = f();
   }
   static {
     this.properties = { geometry: 0, hideGraphics: 5, graphicsColor: 0, view: 0, autoDestroyDisabled: 5 };
   }
-  static {
-    this.styles = b;
-  }
+  #e;
+  #t;
+  #i;
   async destroy() {
-    this.view?.map && this._graphicsLayer && this.view.map.remove(this._graphicsLayer), await this.manager.destroy();
+    this.view?.map && this.#e && this.view.map.remove(this.#e), await this.manager.destroy();
   }
   connectedCallback() {
-    super.connectedCallback(), this.view && this._graphicsLayer && o(this.view, this._graphicsLayer);
+    super.connectedCallback(), this.view && this.#e && h(this.view, this.#e);
   }
   load() {
-    !this.geometry || !this.view?.map || this._createGraphicsLayer();
+    !this.geometry || !this.view?.map || this.#r();
   }
   willUpdate(e) {
-    if (e.has("graphicsColor") && this._updateGraphicSymbols(), e.has("geometry") && (this._graphicsLayer?.removeAll(), this._addAggregatedGeometryToView()), e.has("view")) {
+    if (e.has("graphicsColor") && this.#m(), e.has("geometry") && (this.#e?.removeAll(), this.#s()), e.has("view")) {
       const i = e.get("view");
-      i?.map && this._graphicsLayer && (i.map.remove(this._graphicsLayer), this._createGraphicsLayer(), this._addAggregatedGeometryToView());
+      i?.map && this.#e && (i.map.remove(this.#e), this.#r(), this.#s());
     }
   }
   loaded() {
-    this.geometry || s("error", this, a("geometry")), this.view ? this.view.map || s("error", this, a("The property `view` was provided, but `view.map` is null. Cannot draw aggregated geometry.")) : s("error", this, a("view"));
+    this.geometry || r("error", this, o("geometry")), this.view ? this.view.map || r("error", this, o("The property `view` was provided, but `view.map` is null. Cannot draw aggregated geometry.")) : r("error", this, o("view"));
+  }
+  #s() {
+    const e = this.geometry, { line: i, multipoint: t, polygon: m } = e;
+    this.#i = [i, t, m].filter((s) => s != null).map((s) => this.#h(s)), this.#e.addMany(this.#i);
+  }
+  #r() {
+    const e = this.view.map, i = this.#t, t = e.findLayerById(i);
+    if (t && b(t)) {
+      this.#e = t;
+      return;
+    }
+    this.#e = new n({
+      id: i,
+      listMode: "hide",
+      title: i
+    }), h(this.view, this.#e);
   }
-  _handleShowGraphicsChange() {
-    this.hideGraphics = !this.hideGraphics, this.hideGraphics ? this._graphicsLayer?.removeAll() : this._graphicsLayer?.addMany(this._graphics), this.arcgisHideGraphicsChange.emit(this.hideGraphics);
+  #a() {
+    this.hideGraphics = !this.hideGraphics, this.hideGraphics ? this.#e?.removeAll() : this.#e?.addMany(this.#i), this.arcgisHideGraphicsChange.emit(this.hideGraphics);
   }
-  _makeGraphicFromGeometry(e) {
-    return new l({
+  #h(e) {
+    return new p({
       geometry: e,
-      symbol: this._makeSymbolForGeometry(e)
+      symbol: this.#o(e)
     });
   }
-  _makeSymbolForGeometry(e) {
+  #o(e) {
     const i = this.graphicsColor;
     switch (e.type) {
       case "multipoint":
-        return new d({
+        return new y({
           color: i,
-          size: h,
+          size: a,
           outline: {
             color: i,
             width: 0
           }
         });
       case "polygon":
-        return new y({
+        return new g({
           color: i,
           outline: {
             color: i,
-            width: h
+            width: a
           }
         });
       case "polyline":
-        return new n({
+        return new d({
           color: i,
-          width: h
+          width: a
         });
     }
   }
-  _updateGraphicSymbols() {
-    this._graphicsLayer?.graphics.forEach((e) => {
+  #m() {
+    this.#e?.graphics.forEach((e) => {
       const i = e.geometry;
-      e.symbol = this._makeSymbolForGeometry(i);
+      e.symbol = this.#o(i);
     });
   }
   render() {
-    return u`<calcite-switch .checked=${!this.hideGraphics} .label=${this._messages.labels.showGraphicsToggle} label-text-end=${this._messages.showGraphics ?? f} @calciteSwitchChange=${this._handleShowGraphicsChange}></calcite-switch>`;
+    const { _messages: e } = this;
+    return G`<calcite-switch .checked=${!this.hideGraphics} .label=${e.labels.showGraphicsToggle} label-text-end=${e.showGraphics ?? u} @calciteSwitchChange=${this.#a}></calcite-switch>`;
   }
 }
-m("arcgis-utility-network-aggregated-geometry", S);
+l("arcgis-utility-network-aggregated-geometry", C);
 export {
-  S as ArcgisUtilityNetworkAggregatedGeometry
+  C as ArcgisUtilityNetworkAggregatedGeometry
 };

package/dist/components/arcgis-utility-network-aggregated-geometry-result-item/customElement.d.ts

@@ -0,0 +1,115 @@
+/// <reference path="../../index.d.ts" />
+import type Color from "@arcgis/core/Color.js";
+import type Graphic from "@arcgis/core/Graphic.js";
+import type GraphicsLayer from "@arcgis/core/layers/GraphicsLayer.js";
+import type TraceResult from "@arcgis/core/rest/networks/support/TraceResult.js";
+import type MapView from "@arcgis/core/views/MapView.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+
+/**
+ * Trace result item for displaying [aggregated geometry](https://developers.arcgis.com/javascript/latest/references/core/rest/networks/support/TraceResult/#aggregatedGeometry) results from a trace.
+ *
+ * @internal
+ * @since 5.2
+ * @see [Result types](https://doc.esri.com/en/arcgis-pro/latest/help/data/utility-network/configure-a-trace.html#DA5)
+ */
+export abstract class ArcgisUtilityNetworkAggregatedGeometryResultItem extends LitElement {
+  /** @internal */
+  protected _messages: {
+      headings: { setColor: string; };
+      labels: {
+          aggregatedGeometryGraphicsColor: string;
+          showGraphicsToggle: string;
+      };
+      showGraphics: string;
+  } & T9nMeta<{
+      headings: { setColor: string; };
+      labels: {
+          aggregatedGeometryGraphicsColor: string;
+          showGraphicsToggle: string;
+      };
+      showGraphics: string;
+  }>;
+  /**
+   * 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-utility-network-aggregated-geometry-result-item/#destroy) method when you are done to
+   * prevent memory leaks.
+   *
+   * @default false
+   * @example
+   * ```html
+   * <arcgis-utility-network-aggregated-geometry-result-item auto-destroy-disabled></arcgis-utility-network-aggregated-geometry-result-item>
+   * ```
+   *
+   * ```js
+   * utilityNetworkAggregatedGeometryResultItemElement.autoDestroyDisabled = true;
+   * ```
+   * 
+   */
+  accessor autoDestroyDisabled: boolean;
+  /**
+   * The size of the aggregated geometry graphics to render, in points.
+   *
+   * @default 12
+   */
+  accessor defaultSelectionSize: number;
+  /** The graphics which represent the aggregated geometry results from the trace. */
+  get geometryGraphics(): Graphic[];
+  /**
+   * The color used for the aggregated geometry graphics.
+   * Default value is #FFFF00.
+   */
+  accessor graphicsColor: Color;
+  /**
+   * The layer used to render the graphics which represent the aggregated geometry result.
+   * If this property is not specified, a new layer will be created on the map.
+   */
+  accessor graphicsLayer: GraphicsLayer | undefined;
+  /** The heading of the result item. */
+  accessor heading: string | undefined;
+  /**
+   * Whether to hide the aggregated geometry [graphics](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-utility-network-aggregated-geometry-result-item/#geometryGraphics)
+   * from the map when the trace result contains aggregated geometry results.
+   *
+   * @default false
+   */
+  accessor hideGraphics: boolean;
+  /**
+   * The trace result containing the aggregated geometry result to render graphics for.
+   *
+   * @required
+   */
+  accessor traceResult: TraceResult | 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-utility-network-aggregated-geometry-result-item component will be associated with a map or scene component rather than using the `view` property.
+   *
+   * @required
+   */
+  accessor view: MapView | undefined;
+  /**
+   * Removes the [layer](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-utility-network-aggregated-geometry-result-item/#graphicsLayer)
+   * containing the aggregated geometry graphics from the map.
+   */
+  clearResult(): void;
+  /** Permanently destroy the component. */
+  destroy(): Promise<void>;
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "defaultSelectionSize" | "geometryGraphics" | "hideGraphics" | "graphicsColor"; }>;
+  /**
+   * Fires when the component finishes processing the aggregated geometry results.
+   *
+   * If the component has a valid trace result with aggregated geometry results, this fires
+   * when the aggregated geometry graphics have been added to the map.
+   *
+   * If the component does not have a valid map or trace result, this fires when the
+   * component has finished loading.
+   */
+  readonly arcgisResultReady: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    arcgisPropertyChange: ArcgisUtilityNetworkAggregatedGeometryResultItem["arcgisPropertyChange"]["detail"];
+    arcgisResultReady: ArcgisUtilityNetworkAggregatedGeometryResultItem["arcgisResultReady"]["detail"];
+  };
+}

package/dist/components/arcgis-utility-network-aggregated-geometry-result-item/customElement.js

@@ -0,0 +1,125 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as p } from "../../chunks/runtime.js";
+import l from "@arcgis/core/Color.js";
+import m from "@arcgis/core/Graphic.js";
+import d from "@arcgis/core/layers/GraphicsLayer.js";
+import n from "@arcgis/core/symbols/SimpleFillSymbol.js";
+import y from "@arcgis/core/symbols/SimpleLineSymbol.js";
+import u from "@arcgis/core/symbols/SimpleMarkerSymbol.js";
+import { LitElement as f, createEvent as w, nothing as v } from "@arcgis/lumina";
+import { usePropertyChange as G, bypassReadOnly as b } from "@arcgis/lumina/controllers";
+import { log as s, composeMissingPropertyMessage as o } from "@arcgis/toolkit/log";
+import { css as R, html as g } from "lit";
+import { createRef as L, ref as C } from "lit/directives/ref.js";
+import { u as S } from "../../chunks/useT9n.js";
+import { a as h, i as $ } from "../../chunks/layer-utils.js";
+const k = R`.aggregated-geometry-container{display:flex;justify-content:space-between;margin:0 var(--calcite-space-md) var(--calcite-space-md)}.geometry-heading{margin:var(--calcite-space-md);font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size);color:var(--calcite-color-text-1)}`;
+class z extends f {
+  constructor() {
+    super(...arguments), this._messages = S({ blocking: !0 }), this.#t = "arcgis-utility-network-aggregated-geometry-result-item-graphics", this.#e = L(), this.defaultSelectionSize = 12, this.geometryGraphics = [], this.hideGraphics = !1, this.graphicsColor = new l([255, 255, 0, 0.6]), this.autoDestroyDisabled = !1, this.arcgisPropertyChange = G()("defaultSelectionSize", "geometryGraphics", "hideGraphics", "graphicsColor"), this.arcgisResultReady = w();
+  }
+  static {
+    this.properties = { defaultSelectionSize: 9, heading: 1, traceResult: 0, geometryGraphics: 32, hideGraphics: 5, graphicsColor: 0, graphicsLayer: 0, view: 0, autoDestroyDisabled: 5 };
+  }
+  static {
+    this.styles = k;
+  }
+  #t;
+  #e;
+  clearResult() {
+    this.view?.map && this.graphicsLayer && this.view.map.remove(this.graphicsLayer);
+  }
+  async destroy() {
+    this.clearResult(), await this.manager.destroy();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.view && this.graphicsLayer && (h(this.view, this.graphicsLayer), this.arcgisResultReady.emit());
+  }
+  load() {
+    if (!this.traceResult?.aggregatedGeometry || !this.view?.map) {
+      this.arcgisResultReady.emit();
+      return;
+    }
+    this.graphicsLayer || this.#a(this.view);
+  }
+  willUpdate(e) {
+    if (e.has("hideGraphics") && this.#s(), e.has("graphicsColor") && this.#h(), e.has("traceResult") && (this.graphicsLayer?.removeAll(), this.traceResult?.aggregatedGeometry && this.view && (this.#i(this.traceResult.aggregatedGeometry), this.arcgisResultReady.emit())), e.has("view")) {
+      const t = e.get("view");
+      t?.map && this.graphicsLayer && (t.map.remove(this.graphicsLayer), this.traceResult?.aggregatedGeometry && this.view && (h(this.view, this.graphicsLayer), this.#i(this.traceResult.aggregatedGeometry), this.arcgisResultReady.emit()));
+    }
+  }
+  loaded() {
+    this.traceResult ? this.traceResult.aggregatedGeometry || s("error", this, o("The property `traceResult` was provided, but `traceResult.aggregatedGeometry` is null. Cannot draw aggregated geometry.")) : s("error", this, o("traceResult")), this.view ? this.view.map || s("error", this, o("The property `view` was provided, but `view.map` is null. Cannot draw aggregated geometry.")) : s("error", this, o("view"));
+  }
+  #i(e) {
+    const { line: t, multipoint: i, polygon: r } = e;
+    b(() => {
+      this.geometryGraphics = [t, i, r].filter((a) => a != null).map((a) => this.#o(a));
+    }), this.graphicsLayer?.addMany(this.geometryGraphics);
+  }
+  #a(e) {
+    const t = this.#t, i = e.map?.findLayerById(t);
+    if (i && $(i)) {
+      this.graphicsLayer = i;
+      return;
+    }
+    this.graphicsLayer = new d({
+      id: t,
+      listMode: "hide",
+      title: t
+    }), h(e, this.graphicsLayer);
+  }
+  #s() {
+    this.hideGraphics ? (this.graphicsLayer?.removeAll(), this.#e.value?.open && (this.#e.value.open = !1)) : this.graphicsLayer?.addMany(this.geometryGraphics);
+  }
+  #o(e) {
+    return new m({
+      geometry: e,
+      symbol: this.#r(e)
+    });
+  }
+  #r(e) {
+    const { defaultSelectionSize: t, graphicsColor: i } = this;
+    switch (e.type) {
+      case "multipoint":
+        return new u({
+          color: i,
+          size: t,
+          outline: {
+            color: i,
+            width: 0
+          }
+        });
+      case "polygon":
+        return new n({
+          color: i,
+          outline: {
+            color: i,
+            width: t
+          }
+        });
+      case "polyline":
+        return new y({
+          color: i,
+          width: t
+        });
+    }
+  }
+  #h() {
+    this.graphicsLayer?.graphics.forEach((e) => {
+      const t = e.geometry;
+      e.symbol = this.#r(t);
+    });
+  }
+  render() {
+    const { graphicsColor: e, heading: t, hideGraphics: i, _messages: r } = this;
+    return g`${t && g`<div class="geometry-heading">${t}</div>` || ""}<div class="aggregated-geometry-container"><calcite-switch .checked=${!i} .label=${r.labels.showGraphicsToggle} label-text-end=${r.showGraphics ?? v} @calciteSwitchChange=${() => this.hideGraphics = !this.hideGraphics}></calcite-switch><calcite-swatch .color=${e.toCss()} .disabled=${i} id=geometry-color-swatch .label=${r.labels.aggregatedGeometryGraphicsColor}></calcite-swatch><calcite-popover closable .heading=${r.headings.setColor} .label=${r.headings.setColor} reference-element=geometry-color-swatch ${C(this.#e)}><calcite-color-picker alpha-channel channels-disabled clearable .disabled=${i} hex-disabled saved-disabled .value=${e.toCss(!0)} @calciteColorPickerChange=${(a) => {
+      const c = a.target.value;
+      c && (this.graphicsColor = new l(c));
+    }}></calcite-color-picker></calcite-popover></div>`;
+  }
+}
+p("arcgis-utility-network-aggregated-geometry-result-item", z);
+export {
+  z as ArcgisUtilityNetworkAggregatedGeometryResultItem
+};

package/dist/components/arcgis-utility-network-aggregated-geometry-result-item/index.d.ts

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

package/dist/components/arcgis-utility-network-aggregated-geometry-result-item/index.js

@@ -0,0 +1,5 @@
+import "@esri/calcite-components/components/calcite-switch";
+import "@esri/calcite-components/components/calcite-swatch";
+import "@esri/calcite-components/components/calcite-popover";
+import "@esri/calcite-components/components/calcite-color-picker";
+export * from "./customElement.js";

package/dist/components/arcgis-utility-network-associations/customElement.d.ts

@@ -22,6 +22,15 @@ export abstract class ArcgisUtilityNetworkAssociations extends LitElement {
    * prevent memory leaks.
    *
    * @default false
+   * @example
+   * ```html
+   * <arcgis-utility-network-associations auto-destroy-disabled></arcgis-utility-network-associations>
+   * ```
+   *
+   * ```js
+   * utilityNetworkAssociationsElement.autoDestroyDisabled = true;
+   * ```
+   * 
    */
   accessor autoDestroyDisabled: boolean;
   /**
@@ -219,8 +228,8 @@ export abstract class ArcgisUtilityNetworkAssociations extends LitElement {
    */
   accessor utilityNetwork: UtilityNetwork | 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-utility-network-associations 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-utility-network-associations component will be associated with a map or scene component rather than using the `view` property.
    *
    * @since 4.26
    */

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

@@ -0,0 +1,193 @@
+/// <reference path="../../index.d.ts" />
+import type Graphic from "@arcgis/core/Graphic.js";
+import type Layer from "@arcgis/core/layers/Layer.js";
+import type UtilityNetwork from "@arcgis/core/networks/UtilityNetwork.js";
+import type TraceResult from "@arcgis/core/rest/networks/support/TraceResult.js";
+import type MapView from "@arcgis/core/views/MapView.js";
+import type { ActionEvent } from "@arcgis/core/widgets/Popup/types.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { ArcgisFeaturesNext } from "../arcgis-features-next/customElement.js";
+import type { ArcgisReferenceElement } from "../types.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+
+/**
+ * Trace result item for displaying [element](https://developers.arcgis.com/javascript/latest/references/core/rest/networks/support/TraceResult/#elements) results from a trace.
+ *
+ * @internal
+ * @since 5.2
+ * @see [Result types](https://doc.esri.com/en/arcgis-pro/latest/help/data/utility-network/configure-a-trace.html#DA5)
+ */
+export abstract class ArcgisUtilityNetworkElementsResultItem extends LitElement {
+  /** @internal */
+  protected _messages: {
+      headings: { features: string; };
+      labels: { numFeatures: string; };
+      resultFeaturesAreHidden: string;
+  } & T9nMeta<{
+      headings: { features: string; };
+      labels: { numFeatures: string; };
+      resultFeaturesAreHidden: string;
+  }>;
+  /**
+   * A [collection](https://developers.arcgis.com/javascript/latest/references/core/core/Collection/) of [action button](https://developers.arcgis.com/javascript/latest/references/core/support/actions/ActionButton/) or [action toggle](https://developers.arcgis.com/javascript/latest/references/core/support/actions/ActionToggle/) objects. Each action may be executed by clicking the icon or image symbolizing them.
+   * There is a default `Zoom To` action styled with a magnifying glass icon to zoom in four LODs and center the map on the selected feature. This default action can be removed by setting [includeDefaultActionsDisabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-utility-network-elements-result-item/#includeDefaultActionsDisabled) to `true`, or by setting the [`overwriteActions`](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#overwriteActions) property to `true` in a [PopupTemplate](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/).
+   *
+   * The order of each action is the order in which they appear in the actions [Collection](https://developers.arcgis.com/javascript/latest/references/core/core/Collection/). The [@arcgisTriggerAction](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-utility-network-elements-result-item/#event-arcgisTriggerAction) event fires each time an action is clicked.
+   *
+   * @see [@arcgisTriggerAction](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-utility-network-elements-result-item/#event-arcgisTriggerAction)
+   * @see [Popup actions sample](https://developers.arcgis.com/javascript/latest/sample-code/popup-actions/)
+   */
+  accessor actions: ArcgisFeaturesNext["actions"] | undefined;
+  /**
+   * 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-utility-network-elements-result-item/#destroy) method when you are done to
+   * prevent memory leaks.
+   *
+   * @default false
+   * @example
+   * ```html
+   * <arcgis-utility-network-elements-result-item auto-destroy-disabled></arcgis-utility-network-elements-result-item>
+   * ```
+   *
+   * ```js
+   * utilityNetworkElementsResultItemElement.autoDestroyDisabled = true;
+   * ```
+   * 
+   */
+  accessor autoDestroyDisabled: boolean;
+  /**
+   * Whether to disable highlighting trace result features on the map.
+   * If true, the features returned by a trace will not be highlighted on the map.
+   *
+   * @default false
+   */
+  accessor disableHighlightFeatureResults: boolean;
+  /** The features corresponding to the trace result elements. */
+  get features(): Graphic[];
+  /** The heading of the result item. */
+  accessor heading: string | undefined;
+  /**
+   * Indicates whether to hide the action bar that holds the feature's
+   * [actions](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-features/#actions)
+   * when selecting trace locations and viewing trace result features.
+   *
+   * @default false
+   */
+  accessor hideActionBar: boolean;
+  /**
+   * Whether to hide feature results.
+   * If true, the component renders a placeholder string instead of a button to view features.
+   * When true, features are still queried and are available through [features](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-utility-network-elements-result-item/#features).
+   *
+   * @default false
+   */
+  accessor hideFeatureResults: boolean;
+  /**
+   * Whether to hide the placeholder string when feature results are hidden.
+   *
+   * When this property and [hideFeatureResults](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-utility-network-elements-result-item/#hideFeatureResults) are both set to `true`,
+   * nothing is rendered for trace result elements. However, features are still queried and are available through
+   * [features](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-utility-network-elements-result-item/#features).
+   *
+   * @default false
+   */
+  accessor hidePlaceholder: boolean;
+  /**
+   * Indicates whether default actions are disabled (hidden) when viewing trace result features.
+   * This property must be set to `true` to disable default actions.
+   *
+   * @default false
+   */
+  accessor includeDefaultActionsDisabled: boolean;
+  /**
+   * Whether the list of feature results is being viewed.
+   * When true, the component renders the trace result features as a list in the [arcgis-features-next](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-features-next/) component.
+   *
+   * This property is always false when [hideFeatureResults](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-utility-network-elements-result-item/#hideFeatureResults) is true.
+   *
+   * If [hideFeatureResults](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-utility-network-elements-result-item/#hideFeatureResults) is not set, then this property is true when
+   * the trace result only includes [elements](https://developers.arcgis.com/javascript/latest/references/core/rest/networks/support/TraceResult/#elements)
+   * or when the user has chosen to view Feature results in the trace component results tab.
+   *
+   * @default false
+   */
+  get isFeaturesListShown(): boolean;
+  /**
+   * The map layers to derive utility network layers from.
+   *
+   * These layers are filtered by those belonging to the specified utility network.
+   * The utility network layers are used for querying the trace result features.
+   */
+  accessor layers: Layer[];
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: NonNullable<ArcgisFeaturesNext["messageOverrides"]> & {
+      headings?: { features?: string | undefined; } | undefined;
+      labels?: { numFeatures?: string | undefined; } | undefined;
+      resultFeaturesAreHidden?: string | undefined;
+  };
+  /**
+   * The number of unique network element results,
+   * including elements that did not match any layer in the map.
+   */
+  get numResults(): 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;
+  /**
+   * The currently selected trace result feature.
+   *
+   * This property also returns associated features that have been selected via
+   * [association content](https://developers.arcgis.com/javascript/latest/references/core/popup/content/UtilityNetworkAssociationsContent/)
+   * in a [PopupTemplate](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/).
+   */
+  get selectedResultFeature(): Graphic | undefined;
+  /**
+   * Whether the component has finished querying trace result features.
+   *
+   * @default "loading"
+   */
+  accessor state: State;
+  /**
+   * The trace result containing the element results to render features for.
+   *
+   * @required
+   */
+  accessor traceResult: TraceResult | undefined;
+  /**
+   * The utility network used to query the trace result features.
+   *
+   * @required
+   */
+  accessor utilityNetwork: UtilityNetwork | 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-utility-network-elements-result-item component will be associated with a map or scene component rather than using the `view` property.
+   */
+  accessor view: MapView | undefined;
+  /** Destroys the `arcgis-features-next` component used to render the trace result features. */
+  clearResult(): void;
+  /** Permanently destroy the component. */
+  destroy(): Promise<void>;
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "isFeaturesListShown" | "selectedResultFeature" | "state"; }>;
+  /** Fires when the component finishes querying all features for the trace result elements. */
+  readonly arcgisResultReady: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Emitted when an action is triggered on the component. */
+  readonly arcgisTriggerAction: import("@arcgis/lumina").TargetedEvent<this, ActionEvent>;
+  readonly "@eventTypes": {
+    arcgisPropertyChange: ArcgisUtilityNetworkElementsResultItem["arcgisPropertyChange"]["detail"];
+    arcgisResultReady: ArcgisUtilityNetworkElementsResultItem["arcgisResultReady"]["detail"];
+    arcgisTriggerAction: ArcgisUtilityNetworkElementsResultItem["arcgisTriggerAction"]["detail"];
+  };
+}
+
+/** @internal */
+export type State = "loading" | "ready";