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

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

@@ -2,7 +2,6 @@
 import type Collection from "@arcgis/core/core/Collection.js";
 import type Point from "@arcgis/core/geometry/Point.js";
 import type Graphic from "@arcgis/core/Graphic.js";
-import type GraphicsLayer from "@arcgis/core/layers/GraphicsLayer.js";
 import type Layer from "@arcgis/core/layers/Layer.js";
 import type TerminalConfiguration from "@arcgis/core/networks/support/TerminalConfiguration.js";
 import type UtilityNetwork from "@arcgis/core/networks/UtilityNetwork.js";
@@ -22,15 +21,23 @@ import type { T9nMeta } from "@arcgis/lumina/controllers";
  * @internal
  */
 export abstract class ArcgisUtilityNetworkTraceLocation extends LitElement {
+  /**
+   * A function to run after a hit test is performed to select a trace location. If left empty, the first graphic from the hit test results will be used as the trace location.
+   * This function allows for modification of the selected graphic before it is added as a trace location, such as changing its attributes or geometry.
+   * If the promise is rejected, the selection process will be cancelled.
+   *
+   * @internal
+   */
   accessor afterHitTest: ((graphics: Graphic[]) => Promise<Graphic>) | undefined;
+  /** @default false */
+  accessor autoDestroyDisabled: boolean;
   /**
    * A function to run before trace location selection starts.
    *
-   * @experimental
+   * @internal
    */
   accessor beforeTraceLocationSelectStart: (() => Promise<void>) | undefined;
   accessor filterLayers: Collection<Layer> | undefined;
-  accessor flagLayer: GraphicsLayer | undefined;
   /** @internal */
   protected messages: {
       buttons: { clear: string; };
@@ -99,18 +106,20 @@ export abstract class ArcgisUtilityNetworkTraceLocation extends LitElement {
   accessor utilityNetwork: UtilityNetwork | undefined;
   /** @required */
   accessor view: MapView | undefined;
+  /** Permanently destroy the component. */
+  destroy(): Promise<void>;
   readonly arcgisTraceLocationChange: import("@arcgis/lumina").TargetedEvent<this, void>;
   /**
    * Fires when the user completes the selection of a trace location.
    *
-   * @experimental
+   * @internal
    */
   readonly arcgisTraceLocationSelectEnd: import("@arcgis/lumina").TargetedEvent<this, void>;
   /**
    * Fires when the user begins selection of a trace location.
    * Can be prevented to stop the selection.
    *
-   * @experimental
+   * @internal
    */
   readonly arcgisTraceLocationSelectStart: import("@arcgis/lumina").TargetedEvent<this, SelectStartPayload>;
   readonly "@eventTypes": {
@@ -120,6 +129,7 @@ export abstract class ArcgisUtilityNetworkTraceLocation extends LitElement {
   };
 }
 
+/** @internal */
 export interface FlagInfo {
   traceLocation: TraceLocation;
   flagProperties: {
@@ -135,8 +145,10 @@ export interface FlagInfo {
   };
 }
 
+/** @internal */
 export type TraceLocationType = "barrier" | "starting-point" | "stopping-point";
 
+/** @internal */
 export interface SelectStartPayload {
   cancelSelect: () => void;
 }

package/dist/components/arcgis-utility-network-trace-location/customElement.js

@@ -1,285 +1,296 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as L } from "../../chunks/runtime.js";
-import { css as k, html as f } from "lit";
-import * as v from "@arcgis/core/geometry/operators/cutOperator.js";
-import * as g from "@arcgis/core/geometry/operators/lengthOperator.js";
-import * as y from "@arcgis/core/geometry/operators/projectOperator.js";
-import _ from "@arcgis/core/geometry/Polyline.js";
-import S from "@arcgis/core/geometry/SpatialReference.js";
-import x from "@arcgis/core/Graphic.js";
-import m from "@arcgis/core/rest/networks/support/TraceLocation.js";
-import b from "@arcgis/core/symbols/SimpleMarkerSymbol.js";
-import { LitElement as A, createEvent as w } from "@arcgis/lumina";
-import { log as l } from "@arcgis/toolkit/log";
-import { u as I } from "../../chunks/useT9n.js";
-const F = k`.root calcite-block{--calcite-block-content-space: 0;--calcite-block-border-color: transparent;margin:0}.root calcite-notice{padding:var(--calcite-spacing-xs)}.add-location-button{--calcite-button-border-color: var(--calcite-color-border-1);--calcite-button-icon-color: var(--calcite-color-text-1);--calcite-button-text-color: var(--calcite-color-text-1)}.button-container{justify-content:center;display:grid}.clear-button{--calcite-button-border-color: transparent}`;
-class C extends A {
+import { c as _ } from "../../chunks/runtime.js";
+import { css as x, html as y } from "lit";
+import * as C from "@arcgis/core/geometry/operators/cutOperator.js";
+import * as m from "@arcgis/core/geometry/operators/lengthOperator.js";
+import * as b from "@arcgis/core/geometry/operators/projectOperator.js";
+import I from "@arcgis/core/geometry/Polyline.js";
+import F from "@arcgis/core/geometry/SpatialReference.js";
+import v from "@arcgis/core/Graphic.js";
+import T from "@arcgis/core/rest/networks/support/TraceLocation.js";
+import w from "@arcgis/core/symbols/SimpleMarkerSymbol.js";
+import { LitElement as G, createEvent as L } from "@arcgis/lumina";
+import { log as u, composeMissingPropertyMessage as f } from "@arcgis/toolkit/log";
+import { u as A } from "../../chunks/useT9n.js";
+import { d as S, i as P } from "../../chunks/layer-utils.js";
+const N = x`calcite-block{--calcite-block-content-space: 0;--calcite-block-border-color: transparent;margin:0}.add-location-button{--calcite-button-border-color: var(--calcite-color-border-1);--calcite-button-icon-color: var(--calcite-color-text-1);--calcite-button-text-color: var(--calcite-color-text-1)}.button-container{justify-content:center;display:grid}.clear-button{--calcite-button-border-color: transparent}`;
+class R extends G {
   constructor() {
-    super(...arguments), this.messages = I({ blocking: !0 }), this.isSelectWaiting = !1, this.traceLocationType = "starting-point", this.spatialTolerance = 0.05, this.arcgisTraceLocationChange = w(), this.arcgisTraceLocationSelectEnd = w(), this.arcgisTraceLocationSelectStart = w();
+    super(...arguments), this.messages = A({ blocking: !0 }), this.isSelectWaiting = !1, this.traceLocationType = "starting-point", this.spatialTolerance = 0.05, this.autoDestroyDisabled = !1, this.arcgisTraceLocationChange = L(), this.arcgisTraceLocationSelectEnd = L(), this.arcgisTraceLocationSelectStart = L();
   }
   static {
-    this.properties = { isSelectWaiting: 16, beforeTraceLocationSelectStart: 0, afterHitTest: 0, view: 0, traceLocationType: 1, traceLocations: 0, filterLayers: 0, sketchViewModel: 0, flagLayer: 0, spatialTolerance: 9, utilityNetwork: 0 };
+    this.properties = { isSelectWaiting: 16, beforeTraceLocationSelectStart: 0, afterHitTest: 0, view: 0, traceLocationType: 1, traceLocations: 0, filterLayers: 0, sketchViewModel: 0, spatialTolerance: 9, autoDestroyDisabled: 5, utilityNetwork: 0 };
   }
   static {
-    this.styles = F;
+    this.styles = N;
+  }
+  async destroy() {
+    this._resetCursor(), await this.manager.destroy();
   }
   async load() {
-    y.isLoaded() || await y.load();
+    b.isLoaded() || await b.load();
   }
   _createPolyline(e, t) {
-    return new _({
+    return new I({
       hasZ: !1,
       hasM: !0,
       paths: e,
-      spatialReference: new S({ wkid: t })
+      spatialReference: new F({ wkid: t })
     });
   }
   _calculatePercentAlong(e, t) {
-    const r = e.spatialReference, a = this._createPolyline(e.paths, r.wkid), n = t.x - 0.5, s = t.x + 0.5, o = t.y - 0.5, i = t.y + 0.5, c = [
+    const r = e.spatialReference, s = this._createPolyline(e.paths, r.wkid), n = t.x - 0.5, a = t.x + 0.5, c = t.y - 0.5, i = t.y + 0.5, o = [
       [
-        [n, o],
-        [s, i]
+        [n, c],
+        [a, i]
       ]
-    ], u = this._createPolyline(c, t.spatialReference.wkid), h = y.execute(u, r);
-    if (!h)
-      return l("error", this, "Unable to project flag geometry to source geometry spatial reference."), 0.5;
-    const p = v.execute(a, h);
+    ], l = this._createPolyline(o, t.spatialReference.wkid), d = b.execute(l, r);
+    if (!d)
+      return u("error", this, "Unable to project flag geometry to source geometry spatial reference."), 0.5;
+    const p = C.execute(s, d);
     if (p.length > 0) {
-      const T = g.execute(a, { unit: "feet" });
-      let d;
-      return p[0].paths[0][0][0] === a.paths[0][0][0] ? d = g.execute(p[0], { unit: "feet" }) : d = g.execute(p[1], { unit: "feet" }), d / T;
+      const g = m.execute(s, { unit: "feet" });
+      let h;
+      return p[0].paths[0][0][0] === s.paths[0][0][0] ? h = m.execute(p[0], { unit: "feet" }) : p.length > 1 ? h = m.execute(p[1], { unit: "feet" }) : h = 0, h / g;
     }
-    return l("warn", this, "Unable to cut the source geometry with the flag geometry."), 0.5;
+    return u("warn", this, "Unable to cut the source geometry with the flag geometry."), 0.5;
   }
-  async _ensureNecessaryAttributes(e) {
-    const t = (e.layer?.type === "feature", e.layer), r = t.fieldsIndex?.get("assetgroup") ?? !1, a = t.fieldsIndex?.get("assetgroup")?.name ?? "assetgroup", n = t.fieldsIndex?.get("assettype") ?? !1, s = t.fieldsIndex?.get("assettype")?.name ?? "assettype", o = e.getGlobalId(), i = e.getObjectId(), c = r ? !!e.getAttribute(a) : !0, u = n ? !!e.getAttribute(s) : !0;
-    if (o && i && c && u)
-      return e;
-    const h = t.createQuery();
-    return h.objectIds = [i], (await t.queryFeatures(h))?.features[0] || null;
+  get _edgeSourceLayerIds() {
+    const e = this.utilityNetwork?.dataElement?.domainNetworks;
+    return e ? e.flatMap((t) => t.edgeSources).map((t) => t.layerId).filter(Boolean) : [];
+  }
+  async _handleAddButtonClick() {
+    const { view: e, sketchViewModel: t } = this;
+    if (!(e && t)) {
+      u("error", this, "Cannot add trace location."), t || u("error", this, f("sketchViewModel")), e || u("error", this, f("view"));
+      return;
+    }
+    if (this.beforeTraceLocationSelectStart) {
+      this.isSelectWaiting = !0;
+      try {
+        await this.beforeTraceLocationSelectStart();
+      } finally {
+        this.isSelectWaiting = !1;
+      }
+    }
+    this.arcgisTraceLocationSelectStart.emit({ cancelSelect: () => t.cancel() }).defaultPrevented || await this._startSketch(e, t);
+  }
+  async _startSketch(e, t) {
+    this._clickHandler?.remove(), this._clickHandler = t.on("create", (r) => this._handleSketchComplete(r, e, t)), "acquireCursor" in e && e.acquireCursor("crosshair"), this.sketchViewModel?.create("point");
   }
-  async _ensureNecessaryAttributesAndGenerateTraceLocation(e, t) {
-    const { view: r } = this;
-    if (!r || e.length === 0) {
-      l("error", this, "`view` is unavailable or there are no results to process.");
+  _handleSketchComplete(e, t, r) {
+    if (e.state === "complete" && e.graphic) {
+      r.layer.remove(e.graphic), this._performHitTest(e, t, r);
       return;
     }
-    const a = e[0], n = e.map((i) => {
-      const c = i, u = c.graphic;
-      return u.origin = c.layer, u;
-    }), s = this.afterHitTest ? await this.afterHitTest(n).catch(() => (this._resetAfterSketch(!0), null)) : a.graphic;
+    e.state === "cancel" && (this._resetCursor(), this.arcgisTraceLocationSelectEnd.emit());
+  }
+  async _performHitTest(e, t, r) {
+    const { utilityNetwork: s } = this;
     if (!s) {
-      l("error", this, "No graphic available from hit test results.");
+      u("error", this, f("utilityNetwork")), this._resetCursor(), this.arcgisTraceLocationSelectEnd.emit();
       return;
     }
-    const o = await this._ensureNecessaryAttributes(s);
-    if (!o) {
-      l("error", this, "Unable to ensure necessary attributes on the selected graphic.");
+    const n = e.graphic?.geometry, a = t.toScreen(n);
+    if (!a) {
+      u("warn", this, "No screen point available for hit test."), this._startSketch(t, r);
       return;
     }
-    await this._generateTraceLocation(o, t);
+    const i = (await t.hitTest(a, {
+      include: this.filterLayers
+    })).results.filter((o) => o.type === "graphic" && o?.layer && o.graphic);
+    if (i.length === 0) {
+      u("info", this, "No usable hit test results found."), this._startSketch(t, r);
+      return;
+    }
+    this._resetCursor(), await this._processHitTestResults(i, n, t), this.arcgisTraceLocationSelectEnd.emit();
   }
-  _createFlagSymbol() {
-    const { traceLocationType: e } = this, t = [244, 21, 21, 0.6], r = [21, 244, 21, 0.6];
-    return e === "stopping-point" ? new b({
-      color: t,
-      style: "x",
-      size: 12,
-      outline: {
-        color: t,
-        width: 2
-      }
-    }) : e === "barrier" ? new b({
-      color: t,
-      style: "square",
-      size: 12,
-      outline: {
-        color: t,
-        width: 0
-      }
-    }) : new b({
-      color: r,
-      style: "circle",
-      size: 12,
-      outline: {
-        color: r,
-        width: 0
-      }
-    });
+  _resetCursor() {
+    const { view: e } = this;
+    if (!e) {
+      u("error", this, f("view"));
+      return;
+    }
+    this._clickHandler?.remove(), this._clickHandler = void 0, "acquireCursor" in e && e.acquireCursor("default");
   }
-  _addFlagGraphic(e, t, r) {
-    const { flagLayer: a, view: n } = this;
-    if (!a || !n)
-      return l("error", this, "The properties `flagLayer` and `view` are required but either one or both are missing."), null;
-    const s = t.geometry?.type;
-    if (this.traceLocations?.some((c) => c.traceLocation.globalId === e) && s !== "polyline")
-      return l("warn", this, "A flag with the same globalId already exists."), null;
-    const o = this._createFlagSymbol(), i = new x({
-      geometry: r,
-      symbol: o,
-      attributes: t.attributes
+  async _processHitTestResults(e, t, r) {
+    if (e.length === 0) {
+      u("error", this, "There are no hit test results to process.");
+      return;
+    }
+    const s = e[0], n = e.map((i) => {
+      const o = i, l = o.graphic;
+      return l.origin = o.layer, l.sourceLayer = o.layer, l;
     });
-    return a.add(i), i;
+    let a = s.graphic;
+    if (this.afterHitTest)
+      try {
+        a = await this.afterHitTest(n);
+      } catch {
+        a = null;
+      }
+    if (!a) {
+      u("error", this, "No graphic available from hit test results."), this.arcgisTraceLocationSelectEnd.emit();
+      return;
+    }
+    const c = await this._ensureNecessaryAttributes(a);
+    if (!c) {
+      u("error", this, "Unable to ensure necessary attributes on the selected graphic."), this.arcgisTraceLocationSelectEnd.emit();
+      return;
+    }
+    await this._generateTraceLocation(c, t, r);
   }
-  async _generateItemTitle(e) {
-    const { messages: t } = this, r = (e.layer?.type === "feature", e.layer);
-    return ("getFeatureTitle" in r ? await r.getFeatureTitle(e) : null) || e?.getObjectId()?.toString() || t.labels.unknown;
+  async _ensureNecessaryAttributes(e) {
+    const t = (S(e.layer), e.layer), r = t.geometryType === null, s = t.fieldsIndex?.get("assetgroup") ?? !1, n = t.fieldsIndex?.get("assetgroup")?.name ?? "assetgroup", a = t.fieldsIndex?.get("assettype") ?? !1, c = t.fieldsIndex?.get("assettype")?.name ?? "assettype", i = e.getGlobalId(), o = e.getObjectId(), l = s ? !!e.getAttribute(n) : !0, d = a ? !!e.getAttribute(c) : !0, p = !!e.geometry;
+    if (i && o && l && d && (p || r))
+      return e;
+    const g = t.createQuery();
+    return g.objectIds = [o], (await t.queryFeatures(g))?.features[0] || null;
+  }
+  async _generateTraceLocation(e, t, r) {
+    const { traceLocations: s } = this, n = e.getGlobalId() ?? "", a = e.geometry?.type, c = await this._generateFlagInfo(e, t);
+    if (!c) {
+      u("error", this, "Unable to generate flag info for trace location.");
+      return;
+    }
+    const i = s?.filter((l) => l.spatialProperties.mapGraphic?.getGlobalId() === n) ?? [];
+    if (i.length > 0) {
+      if (a !== "polyline") {
+        u("warn", this, "A flag with the same globalId already exists.");
+        return;
+      } else if (i.some((l) => Math.abs(l.traceLocation.percentAlong - c.traceLocation.percentAlong) <= this.spatialTolerance)) {
+        u("warn", this, "A flag with the same globalId already exists within tolerance.");
+        return;
+      }
+    }
+    const o = this._addFlagGraphic(e, t, r);
+    if (!o) {
+      u("warn", this, "Unable to add flag graphic.");
+      return;
+    }
+    c.spatialProperties.flagGraphic = o, s?.add(c);
   }
   async _generateFlagInfo(e, t) {
-    const { traceLocationType: r, utilityNetwork: a } = this, n = e.getGlobalId() ?? "", s = e.geometry?.type, o = await this._generateItemTitle(e);
-    if (s === "point" || s === "polygon") {
-      const i = a?.getTerminalConfiguration(e), c = i ? i.terminals[0].id : 1;
+    const { traceLocationType: r, utilityNetwork: s } = this, n = e.getGlobalId() ?? "", a = e.geometry?.type, c = await this._generateItemTitle(e);
+    if (a === "point" || a === "polygon") {
+      const i = s?.getTerminalConfiguration(e), o = i ? i.terminals[0].id : 1;
       return {
-        traceLocation: new m({
+        traceLocation: new T({
           type: r,
           isFilterBarrier: !1,
           globalId: n,
-          terminalId: c
+          terminalId: o
         }),
         flagProperties: {
-          title: o,
+          title: c,
           expanded: !1,
           terminalConfiguration: i ?? void 0,
-          selectedTerminals: i ? /* @__PURE__ */ new Set([c]) : void 0
+          selectedTerminals: i ? /* @__PURE__ */ new Set([o]) : void 0
         },
         spatialProperties: {
           mapPoint: t,
           mapGraphic: e
         }
       };
-    } else if (s === "polyline") {
+    } else if (a === "polyline") {
       const i = this._calculatePercentAlong(e.geometry, t);
       return {
-        traceLocation: new m({
+        traceLocation: new T({
           type: r,
           isFilterBarrier: !1,
           globalId: n,
           percentAlong: i
         }),
         flagProperties: {
-          title: o,
-          expanded: !1
+          title: c,
+          expanded: !1,
+          terminalConfiguration: void 0,
+          selectedTerminals: void 0
         },
         spatialProperties: {
           mapPoint: t,
           mapGraphic: e
         }
       };
-    } else if (!s) {
-      const i = a?.getTerminalConfiguration(e), c = i ? i.terminals[0].id : 1;
+    } else if (!a) {
+      const i = P(e.layer) ? e.layer.parent : e.layer, o = i && this._edgeSourceLayerIds.includes(i.layerId), l = s?.getTerminalConfiguration(e), d = l ? l.terminals[0].id : o ? -1 : 1, p = o ? 0.5 : -1;
       return {
-        traceLocation: new m({
+        traceLocation: new T({
           type: r,
           isFilterBarrier: !1,
           globalId: n,
-          terminalId: c
+          terminalId: d,
+          percentAlong: p
         }),
         flagProperties: {
-          title: o,
+          title: c,
           expanded: !1,
-          terminalConfiguration: i ?? void 0,
-          selectedTerminals: i ? /* @__PURE__ */ new Set([c]) : void 0
+          terminalConfiguration: l ?? void 0,
+          selectedTerminals: l ? /* @__PURE__ */ new Set([d]) : void 0
         },
         spatialProperties: {
-          mapPoint: t
+          mapPoint: t,
+          mapGraphic: e
         }
       };
     }
     return null;
   }
-  async _generateTraceLocation(e, t) {
-    const { traceLocations: r } = this, a = e.getGlobalId() ?? "", n = e.geometry?.type, s = await this._generateFlagInfo(e, t);
-    if (!s) {
-      l("error", this, "Unable to generate flag info for trace location.");
-      return;
-    }
-    const o = r?.filter((i) => i.spatialProperties.mapGraphic?.getGlobalId() === a) ?? [];
-    if (o.length === 0 || n === "polyline") {
-      if (n === "polyline" && o.length > 0 && o.some((c) => Math.abs(c.traceLocation.percentAlong - s.traceLocation.percentAlong) <= this.spatialTolerance)) {
-        l("warn", this, "A flag with the same globalId already exists within tolerance.");
-        return;
-      }
-      const i = this._addFlagGraphic(a, e, t);
-      if (!i) {
-        l("warn", this, "Unable to add flag graphic.");
-        return;
-      }
-      s.spatialProperties.flagGraphic = i, r?.add(s);
-      return;
-    }
-    l("warn", this, "A flag with the same globalId already exists.");
-  }
-  async _hitTest(e) {
-    const { view: t, utilityNetwork: r } = this;
-    if (!t || !r) {
-      l("error", this, "Either `utilityNetwork` or `view` is unavailable for hit test.");
-      return;
-    }
-    const a = e.graphic?.geometry, n = this.view?.toScreen(a);
-    if (!n) {
-      l("warn", this, "No screen point available for hit test.");
-      return;
-    }
-    const o = (await t.hitTest(n, {
-      include: this.filterLayers
-    })).results.filter((i) => i.type === "graphic" && i?.layer && i.graphic);
-    if (o.length === 0) {
-      l("info", this, "No usable hit test results found.");
-      return;
-    }
-    await this._ensureNecessaryAttributesAndGenerateTraceLocation(o, a), this._resetAfterSketch(!0);
-  }
-  _resetAfterSketch(e = !1) {
-    const { view: t } = this;
-    if (!t) {
-      l("error", this, "View is not available to reset after sketch.");
-      return;
-    }
-    this._clickHandler?.remove(), this._clickHandler = void 0, "acquireCursor" in t && t.acquireCursor("default"), e && this.arcgisTraceLocationSelectEnd.emit();
+  async _generateItemTitle(e) {
+    const { messages: t } = this, r = (S(e.layer), e.layer);
+    return ("getFeatureTitle" in r ? await r.getFeatureTitle(e) : null) || e?.getObjectId()?.toString() || t.labels.unknown;
   }
-  _handleSketchComplete(e) {
-    const { sketchViewModel: t, view: r } = this;
-    if (!t || !r) {
-      l("error", this, "Either `sketchViewModel` or `view` is not available in sketch complete handler.");
-      return;
-    }
-    if (e.state === "complete" && e.graphic) {
-      t.layer.remove(e.graphic), this._hitTest(e), this._resetAfterSketch();
-      return;
-    }
-    e.state === "cancel" && this._resetAfterSketch(!0);
+  _addFlagGraphic(e, t, r) {
+    const s = e.geometry ? e.geometry.type === "point" ? e.geometry : t : null, n = this._createFlagSymbol(), a = new v({
+      geometry: s,
+      symbol: n,
+      attributes: e.attributes
+    });
+    return r.graphics.add(a), a;
   }
-  async _handleAddButtonClick() {
-    const { view: e, sketchViewModel: t } = this;
-    if (!(e && t)) {
-      l("error", this, "Cannot add trace location; `view` not found.");
-      return;
-    }
-    if (this.beforeTraceLocationSelectStart) {
-      this.isSelectWaiting = !0;
-      try {
-        await this.beforeTraceLocationSelectStart();
-      } finally {
-        this.isSelectWaiting = !1;
+  _createFlagSymbol() {
+    const { traceLocationType: e } = this, t = [244, 21, 21, 0.6], r = [21, 244, 21, 0.6];
+    return e === "stopping-point" ? new w({
+      color: t,
+      style: "x",
+      size: 12,
+      outline: {
+        color: t,
+        width: 2
       }
-    }
-    this.arcgisTraceLocationSelectStart.emit({ cancelSelect: () => t.cancel() }).defaultPrevented || (this._clickHandler?.remove(), this._clickHandler = t.on("create", this._handleSketchComplete.bind(this)), "acquireCursor" in e && e.acquireCursor("crosshair"), this.sketchViewModel?.create("point"));
+    }) : e === "barrier" ? new w({
+      color: t,
+      style: "square",
+      size: 12,
+      outline: {
+        color: t,
+        width: 0
+      }
+    }) : new w({
+      color: r,
+      style: "circle",
+      size: 12,
+      outline: {
+        color: r,
+        width: 0
+      }
+    });
   }
   _handleClearButtonClick() {
-    const { flagLayer: e, traceLocations: t } = this;
+    const { view: e, traceLocations: t } = this;
     t?.forEach((r) => {
-      r.spatialProperties.flagGraphic && e && e.remove(r.spatialProperties.flagGraphic);
+      r.spatialProperties.flagGraphic && e && e.graphics.remove(r.spatialProperties.flagGraphic);
     }), t?.removeAll();
   }
   renderAddLocationBlock() {
-    const { traceLocationType: e, messages: t, traceLocations: r } = this, a = e === "starting-point" ? t.types.startingPoint : e === "barrier" ? t.types.barrier : t.types.stoppingPoint, n = a.heading, s = a.description, o = a.buttonText;
-    return f`<calcite-block .heading=${n} .label=${n} expanded .description=${s}>${r?.length ? f`<calcite-button class="clear-button" slot=actions-end appearance=transparent .label=${t.buttons.clear} @click=${() => this._handleClearButtonClick()}>${t.buttons.clear}</calcite-button>` : null}<arcgis-utility-network-trace-location-list .traceLocations=${r} .traceLocationType=${e}></arcgis-utility-network-trace-location-list><div class="button-container"><calcite-button .loading=${this.isSelectWaiting} class="add-location-button" icon-start=select appearance=outline .label=${o} @click=${() => this._handleAddButtonClick()}>${o}</calcite-button></div></calcite-block>`;
+    const { traceLocationType: e, messages: t, traceLocations: r, view: s } = this, n = e === "starting-point" ? t.types.startingPoint : e === "barrier" ? t.types.barrier : t.types.stoppingPoint, a = n.heading, c = n.description, i = n.buttonText;
+    return y`<calcite-block .heading=${a} .label=${a} expanded .description=${c}>${r?.length ? y`<calcite-button class="clear-button" slot=actions-end appearance=transparent .label=${t.buttons.clear} @click=${() => this._handleClearButtonClick()}>${t.buttons.clear}</calcite-button><arcgis-utility-network-trace-location-list .traceLocations=${r} .traceLocationType=${e} .view=${s}></arcgis-utility-network-trace-location-list>` : null}<div class="button-container"><calcite-button .loading=${this.isSelectWaiting} class="add-location-button" icon-start=select appearance=outline .label=${i} @click=${() => this._handleAddButtonClick()}>${i}</calcite-button></div></calcite-block>`;
   }
   render() {
-    return f`<div class="root">${this.renderAddLocationBlock()}</div>`;
+    return y`<div class="root">${this.renderAddLocationBlock()}</div>`;
   }
 }
-L("arcgis-utility-network-trace-location", C);
+_("arcgis-utility-network-trace-location", R);
 export {
-  C as ArcgisUtilityNetworkTraceLocation
+  R as ArcgisUtilityNetworkTraceLocation
 };

package/dist/components/arcgis-utility-network-trace-location-list/customElement.d.ts

@@ -1,5 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type Collection from "@arcgis/core/core/Collection.js";
+import type MapView from "@arcgis/core/views/MapView.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { FlagInfo, TraceLocationType } from "../arcgis-utility-network-trace-location/customElement.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
@@ -35,4 +36,6 @@ export abstract class ArcgisUtilityNetworkTraceLocationList extends LitElement {
   accessor traceLocations: Collection<FlagInfo>;
   /** @default "starting-point" */
   accessor traceLocationType: TraceLocationType;
+  /** @required */
+  accessor view: MapView | undefined;
 }