@arcgis/map-components 5.1.0-next.47 → 5.1.0-next.49

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,6 +21,13 @@ 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;
@@ -32,7 +38,6 @@ export abstract class ArcgisUtilityNetworkTraceLocation extends LitElement {
    */
   accessor beforeTraceLocationSelectStart: (() => Promise<void>) | undefined;
   accessor filterLayers: Collection<Layer> | undefined;
-  accessor flagLayer: GraphicsLayer | undefined;
   /** @internal */
   protected messages: {
       buttons: { clear: string; };

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

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

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

@@ -4,22 +4,22 @@ import { css as h, html as n } from "lit";
 import u from "@arcgis/core/core/Collection.js";
 import { substitute as g } from "@arcgis/core/intl.js";
 import { LitElement as b } from "@arcgis/lumina";
-import { u as f } from "../../chunks/useT9n.js";
-import { log as s, composeEmptyPropertyMessage as v } from "@arcgis/toolkit/log";
-const y = h`:host{margin-block-start:0;padding:0 var(--calcite-spacing-sm) var(--calcite-spacing-sm) var(--calcite-spacing-sm);background-color:var(--calcite-color-foreground-1)}calcite-list{border:solid 1px var(--calcite-color-border-3);border-radius:var(--calcite-corner-radius-sm);overflow:hidden}calcite-list-item [slot=content-bottom]{background-color:transparent;display:none}calcite-list-item[expanded] [slot=content-bottom]{display:unset}.warning{color:var(--calcite-color-status-danger)}.terminals{padding-block:var(--calcite-spacing-sm);padding-inline-start:var(--calcite-spacing-xl);padding-inline-end:var(--calcite-spacing-sm);display:flex;flex-direction:column}.filter-barrier-container{display:flex;width:100%;calcite-label{width:100%}}.filter-barrier{display:flex;justify-content:space-between;align-items:center;width:100%}`;
-class $ extends b {
+import { u as v } from "../../chunks/useT9n.js";
+import { log as s, composeEmptyPropertyMessage as f } from "@arcgis/toolkit/log";
+const w = h`:host{margin-block-start:0;padding:0 var(--calcite-spacing-sm) var(--calcite-spacing-sm) var(--calcite-spacing-sm);background-color:var(--calcite-color-foreground-1)}calcite-list{border:solid 1px var(--calcite-color-border-3);border-radius:var(--calcite-corner-radius-sm);overflow:hidden}calcite-list-item [slot=content-bottom]{background-color:transparent;display:none}calcite-list-item[expanded] [slot=content-bottom]{display:unset}.warning{color:var(--calcite-color-status-danger)}.terminals{padding-block:var(--calcite-spacing-sm);padding-inline-start:var(--calcite-spacing-xl);padding-inline-end:var(--calcite-spacing-sm);display:flex;flex-direction:column}.filter-barrier-container{display:flex;width:100%;calcite-label{width:100%}}.filter-barrier{display:flex;justify-content:space-between;align-items:center;width:100%}`;
+class y extends b {
   constructor() {
-    super(...arguments), this._messages = f({ blocking: !0 }), this.traceLocations = new u(), this.traceLocationType = "starting-point";
+    super(...arguments), this._messages = v({ blocking: !0 }), this.traceLocations = new u(), this.traceLocationType = "starting-point";
   }
   static {
-    this.properties = { traceLocations: 0, traceLocationType: 1 };
+    this.properties = { traceLocations: 0, traceLocationType: 1, view: 0 };
   }
   static {
-    this.styles = y;
+    this.styles = w;
   }
   _handleTraceLocationItemRemoved(e) {
-    const i = e.spatialProperties.flagGraphic?.layer, { traceLocations: t } = this;
-    e.spatialProperties.flagGraphic && i && i.remove(e.spatialProperties.flagGraphic), t?.remove(e);
+    const { traceLocations: i, view: t } = this;
+    e.spatialProperties.flagGraphic && t && t.graphics.remove(e.spatialProperties.flagGraphic), i?.remove(e);
   }
   _renderTerminal(e, i) {
     const { flagProperties: t } = e, { selectedTerminals: r } = t;
@@ -59,10 +59,10 @@ class $ extends b {
   }
   render() {
     const { _messages: e, traceLocationType: i } = this, t = g(e.labels.list, { traceLocationType: i }), r = this.traceLocations?.map((c) => this._renderListItem(c)).toArray() ?? [];
-    return r.length === 0 ? (s("warn", this, v("traceLocations")), null) : n`<div><calcite-list interaction-mode=static selection-mode=none .label=${t}>${r}</calcite-list></div>`;
+    return r.length === 0 ? (s("warn", this, f("traceLocations")), null) : n`<div><calcite-list interaction-mode=static selection-mode=none .label=${t}>${r}</calcite-list></div>`;
   }
 }
-p("arcgis-utility-network-trace-location-list", $);
+p("arcgis-utility-network-trace-location-list", y);
 export {
-  $ as ArcgisUtilityNetworkTraceLocationList
+  y as ArcgisUtilityNetworkTraceLocationList
 };