@arcgis/map-components 5.1.0-next.87 → 5.1.0-next.89

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

@@ -1,25 +1,25 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as f } from "../../chunks/runtime.js";
+import { c as y } from "../../chunks/runtime.js";
 import { ref as h } from "lit/directives/ref.js";
 import n from "@arcgis/core/core/Collection.js";
-import { watch as b } from "@arcgis/core/core/reactiveUtils.js";
-import { substitute as y } from "@arcgis/core/intl.js";
-import w from "@arcgis/core/layers/GraphicsLayer.js";
-import _ from "@arcgis/core/networks/support/UNTraceConfiguration.js";
-import k from "@arcgis/core/rest/networks/support/TraceLocation.js";
+import { watch as w } from "@arcgis/core/core/reactiveUtils.js";
+import { substitute as _ } from "@arcgis/core/intl.js";
+import k from "@arcgis/core/layers/GraphicsLayer.js";
+import S from "@arcgis/core/networks/support/UNTraceConfiguration.js";
+import T from "@arcgis/core/rest/networks/support/TraceLocation.js";
 import p from "@arcgis/core/views/interactive/snapping/FeatureSnappingLayerSource.js";
-import S from "@arcgis/core/widgets/Sketch/SketchViewModel.js";
-import { LitElement as T, createEvent as c } from "@arcgis/lumina";
-import { usePropertyChange as C } from "@arcgis/lumina/controllers";
-import { log as l, composeMissingPropertyMessage as L, composeEmptyPropertyMessage as N } from "@arcgis/toolkit/log";
-import { css as $, html as r } from "lit";
-import { u as v } from "../../chunks/useT9n.js";
-import { b as E, a as g, c as P, q as m, i as I } from "../../chunks/layer-utils.js";
-import { l as F } from "../../chunks/async-utils.js";
-const U = $`:host{height:100%;flex-grow:1}calcite-flow{min-height:var(--arcgis-internal-panel-height-sm, 240px)}calcite-block-group{flex-grow:1;padding-bottom:var(--calcite-spacing-md);background-color:var(--calcite-color-foreground-1)}calcite-block{--calcite-block-content-space: 0;--calcite-block-border-color: transparent;margin:0}calcite-block calcite-combobox,calcite-block calcite-input{margin:0 var(--calcite-spacing-md)}calcite-block calcite-input-message{padding:var(--calcite-spacing-sm) var(--calcite-spacing-md) 0 var(--calcite-spacing-md)}calcite-notice{margin:var(--calcite-spacing-md)}#subnetwork-info-block{margin:var(--calcite-spacing-md) var(--calcite-spacing-md) 0 var(--calcite-spacing-md)}#results-limited-message{padding:var(--calcite-spacing-sm)}.inline-loader{--calcite-loader-spacing: var(--calcite-spacing-md)}.add-spatial-mode{display:flex;flex-direction:column;gap:var(--calcite-spacing-md);margin:var(--calcite-spacing-md)}.heading{color:var(--calcite-color-text-1);margin:0 0 var(--calcite-spacing-md) 0;font-size:var(--calcite-font-size);font-style:normal;font-weight:var(--calcite-font-weight-medium)}`, u = `utility-network-trace-inputs-sketch-${Date.now()}`, x = 20;
-class A extends T {
+import C from "@arcgis/core/widgets/Sketch/SketchViewModel.js";
+import { LitElement as L, createEvent as l } from "@arcgis/lumina";
+import { usePropertyChange as N } from "@arcgis/lumina/controllers";
+import { log as d, composeMissingPropertyMessage as $, composeEmptyPropertyMessage as v } from "@arcgis/toolkit/log";
+import { css as E, html as r } from "lit";
+import { u as P } from "../../chunks/useT9n.js";
+import { b as I, a as g, c as F, q as m, i as U } from "../../chunks/layer-utils.js";
+import { l as f } from "../../chunks/async-utils.js";
+const x = E`:host{height:100%;flex-grow:1}calcite-flow{min-height:var(--arcgis-internal-panel-height-sm, 240px)}calcite-block-group{flex-grow:1;padding-bottom:var(--calcite-spacing-md);background-color:var(--calcite-color-foreground-1)}calcite-block{--calcite-block-content-space: 0;--calcite-block-border-color: transparent;margin:0}calcite-block calcite-combobox,calcite-block calcite-input{margin:0 var(--calcite-spacing-md)}calcite-block calcite-input-message{padding:var(--calcite-spacing-sm) var(--calcite-spacing-md) 0 var(--calcite-spacing-md)}calcite-notice{margin:var(--calcite-spacing-md)}#subnetwork-info-block{margin:var(--calcite-spacing-md) var(--calcite-spacing-md) 0 var(--calcite-spacing-md)}#results-limited-message{padding:var(--calcite-spacing-sm)}.inline-loader{--calcite-loader-spacing: var(--calcite-spacing-md)}.add-spatial-mode{display:flex;flex-direction:column;gap:var(--calcite-spacing-md);margin:var(--calcite-spacing-md)}.heading{color:var(--calcite-color-text-1);margin:0 0 var(--calcite-spacing-md) 0;font-size:var(--calcite-font-size);font-style:normal;font-weight:var(--calcite-font-weight-medium)}`, u = `utility-network-trace-inputs-sketch-${Date.now()}`, A = 20;
+class M extends L {
   constructor() {
-    super(...arguments), this._defaultPopupTemplateEnabled = !0, this._messages = v({ blocking: !0 }), this._layerIdToLayer = /* @__PURE__ */ new Map(), this._startingPoints = new n(), this._barriers = new n(), this._stoppingPoints = new n(), this._subnetworkTraceTypes = /* @__PURE__ */ new Set([
+    super(...arguments), this._defaultPopupTemplateEnabled = !0, this._messages = P({ blocking: !0 }), this._layerIdToLayer = /* @__PURE__ */ new Map(), this._startingPoints = new n(), this._barriers = new n(), this._stoppingPoints = new n(), this._subnetworkTraceTypes = /* @__PURE__ */ new Set([
       "subnetwork",
       "subnetwork-controller",
       "upstream",
@@ -35,13 +35,13 @@ class A extends T {
       e && (this._featuresComponentElement = e);
     }, this._handleFeaturesPropertyChange = ({ detail: e, target: t }) => {
       (e.name === "selectedDrillInFeature" || e.name === "selectedFeature") && (this.selectedFeature = t.selectedDrillInFeature ?? t.selectedFeature ?? void 0);
-    }, this.candidateFeatures = [], this.compatibleSubnetworkNames = [], this.traceConfigurations = [], this._subnetworkNamesState = "ready", this._exceedDisplayLimit = !1, this.autoDestroyDisabled = !1, this.hideActionBar = !1, this.mode = "default", this.arcgisPropertyChange = C()("mode"), this.arcgisSelectedNamedTraceConfigurationChange = c(), this.arcgisTraceInputsChange = c(), this.arcgisTraceLocationSelectEnd = c(), this.arcgisTraceLocationSelectStart = c(), this.arcgisUtilityNetworkChange = c();
+    }, this.candidateFeatures = [], this.compatibleSubnetworkNames = [], this.traceConfigurations = [], this._subnetworkNamesState = "ready", this._exceedDisplayLimit = !1, this.autoDestroyDisabled = !1, this.hideActionBar = !1, this.mode = "default", this.arcgisPropertyChange = N()("mode"), this.arcgisSelectedNamedTraceConfigurationChange = l(), this.arcgisTraceInputsChange = l(), this.arcgisTraceLocationSelectEnd = l(), this.arcgisTraceLocationSelectStart = l(), this.arcgisUtilityNetworkChange = l();
   }
   static {
     this.properties = { selectedFeature: 16, candidateFeatures: 16, compatibleSubnetworkNames: 16, subnetworksTable: 16, traceConfigurations: 16, utilityNetworks: 16, _unTraceConfiguration: 16, _error: 16, _subnetworkNamesState: 16, _activeTraceLocationType: 16, _exceedDisplayLimit: 16, beforeTraceLocationSelectStart: 0, view: 0, selectedUtilityNetwork: 0, selectedNamedTraceConfiguration: 0, autoDestroyDisabled: 5, hideActionBar: 5, unTraceConfiguration: 32, referenceElement: 1, mode: 3, traceLocationFlagInfos: 32, traceLocations: 32 };
   }
   static {
-    this.styles = U;
+    this.styles = x;
   }
   get isSubnetworkNameTraceSelected() {
     const e = this.selectedNamedTraceConfiguration?.traceType;
@@ -83,7 +83,7 @@ class A extends T {
   }
   load() {
     this.manager.onLifecycle(() => [
-      b(() => this.view?.map, () => {
+      w(() => this.view?.map, () => {
         this._error = void 0, this._setupUtilityNetworks(), this._setupSketchViewModel();
       }, { initial: !0 })
     ]);
@@ -96,7 +96,7 @@ class A extends T {
   }
   _createTraceLocations(e) {
     const t = e.flagProperties.selectedTerminals;
-    return e.flagProperties.terminalConfiguration && t?.size ? Array.from(t, (i) => new k({
+    return e.flagProperties.terminalConfiguration && t?.size ? Array.from(t, (i) => new T({
       type: e.traceLocation.type,
       isFilterBarrier: e.traceLocation.isFilterBarrier,
       globalId: e.traceLocation.globalId,
@@ -116,12 +116,12 @@ class A extends T {
   _createGraphicLayer(e) {
     const { map: t } = this.view;
     if (!t?.findLayerById(e)) {
-      const a = new w({
+      const a = new k({
         id: e,
         listMode: "hide",
         title: e
       });
-      E(this.view, a);
+      I(this.view, a);
     }
   }
   _getGraphicLayer(e) {
@@ -142,7 +142,7 @@ class A extends T {
     if (e && t && t.length > 0) {
       const i = new n();
       t.forEach((a) => {
-        P(a) ? a.sublayers.forEach((s) => {
+        F(a) ? a.sublayers.forEach((s) => {
           i.add(new p({
             layer: s,
             enabled: !0
@@ -160,7 +160,7 @@ class A extends T {
   }
   _initializeSketchViewModel() {
     const { view: e } = this, t = this._getGraphicLayer(u);
-    return new S({
+    return new C({
       layer: t,
       view: e
     });
@@ -195,24 +195,30 @@ class A extends T {
   _selectTraceConfigurationByGuid(e) {
     const t = this.selectedUtilityNetwork?.sharedNamedTraceConfigurations.find((i) => i.globalId === e);
     if (!t) {
-      l("error", this, "`traceConfig` not found in `selectedUtilityNetwork.sharedNamedTraceConfigurations`");
+      d("error", this, "`traceConfig` not found in `selectedUtilityNetwork.sharedNamedTraceConfigurations`");
       return;
     }
     this.selectedNamedTraceConfiguration = t;
   }
-  _handleTraceConfigChange() {
+  async _handleTraceConfigChange() {
     const { selectedNamedTraceConfiguration: e } = this;
-    if (!(e?.traceConfiguration instanceof _)) {
-      l("error", this, L("selectedNamedTraceConfiguration.traceConfiguration")), this._unTraceConfiguration = void 0;
+    if (!(e?.traceConfiguration instanceof S)) {
+      d("error", this, $("selectedNamedTraceConfiguration.traceConfiguration")), this._unTraceConfiguration = void 0;
       return;
     }
-    this._unTraceConfiguration = e.traceConfiguration.clone(), e.traceType === "subnetwork" && (this._subnetworkNamesState = "loading", this._handleSubnetworkTraceConfigChange(this._unTraceConfiguration).finally(() => this._subnetworkNamesState = "ready"));
+    this._unTraceConfiguration = e.traceConfiguration.clone(), e.traceType === "subnetwork" && (this._subnetworkNamesState = "loading", await this._handleSubnetworkTraceConfigChange(this._unTraceConfiguration), this._subnetworkNamesState = "ready");
   }
   async _handleSelectedUtilityNetworkChange() {
-    await this.selectedUtilityNetwork?.load(), this._clearSubnetworks(), this._setupTraceConfigurations(), this._filterUnLayers(), this._clearTraceLocations();
+    const { selectedUtilityNetwork: e } = this;
+    try {
+      e && !e.loaded && await e.load();
+    } catch (t) {
+      f(t, this, "Error while loading the selected utility network");
+    }
+    this._clearSubnetworks(), this._setupTraceConfigurations(), this._filterUnLayers(), this._clearTraceLocations();
   }
   _setupTraceConfigurations() {
-    this._unTraceConfiguration = void 0, this.selectedNamedTraceConfiguration = void 0, this.traceConfigurations = this.selectedUtilityNetwork?.sharedNamedTraceConfigurations.filter(Boolean).filter((e) => e.traceType !== "path" && e.traceType !== "circuit").sort((e, t) => e.title.localeCompare(t.title)) || [], this.traceConfigurations.length ? this.selectedNamedTraceConfiguration = this.traceConfigurations.at(0) : l("error", this, "The selected utility network has no compatible named trace configurations.");
+    this._unTraceConfiguration = void 0, this.selectedNamedTraceConfiguration = void 0, this.traceConfigurations = this.selectedUtilityNetwork?.sharedNamedTraceConfigurations.filter(Boolean).filter((e) => e.traceType !== "path" && e.traceType !== "circuit").sort((e, t) => e.title.localeCompare(t.title)) || [], this.traceConfigurations.length ? this.selectedNamedTraceConfiguration = this.traceConfigurations.at(0) : d("error", this, "The selected utility network has no compatible named trace configurations.");
   }
   _filterUnLayers() {
     const { selectedUtilityNetwork: e } = this;
@@ -220,18 +226,18 @@ class A extends T {
   }
   _handleUtilityNetworksChange() {
     const { utilityNetworks: e, selectedUtilityNetwork: t } = this;
-    e?.length ? (!t || !e.includes(t)) && (this.selectedUtilityNetwork = e.at(0)) : (l("error", this, N("utilityNetworks")), this.selectedUtilityNetwork = void 0, this._error = this._messages.errors.noUtilityNetworkError);
+    e?.length ? (!t || !e.includes(t)) && (this.selectedUtilityNetwork = e.at(0)) : (d("error", this, v("utilityNetworks")), this.selectedUtilityNetwork = void 0, this._error = this._messages.errors.noUtilityNetworkError);
   }
   async _setupUtilityNetworks() {
     if (!this.view?.map) {
-      l("error", this, "The property `view.map` is required to load utility networks but is missing."), this._error = this._messages.errors.noMapError, this.utilityNetworks = void 0;
+      d("error", this, "The property `view.map` is required to load utility networks but is missing."), this._error = this._messages.errors.noMapError, this.utilityNetworks = void 0;
       return;
     }
     const e = this.view.map;
     try {
       e.loaded || await e.load();
     } catch (t) {
-      F(t, this, "Error while loading `view.map`");
+      f(t, this, "Error while loading `view.map`");
     } finally {
       this.utilityNetworks = e.utilityNetworks || new n();
     }
@@ -268,12 +274,12 @@ class A extends T {
   async _queryFeatures(e) {
     const t = /* @__PURE__ */ new Map(), i = [];
     return e.forEach((a) => {
-      const s = I(a.layer) ? a.layer.parent : a.layer;
+      const s = U(a.layer) ? a.layer.parent : a.layer;
       if (s) {
         const o = this._getLayerByLayerId(s.layerId);
         if (o) {
-          const d = t.get(o) || [];
-          d.push(a), t.set(o, d);
+          const c = t.get(o) || [];
+          c.push(a), t.set(o, c);
         }
       }
     }), await Promise.all(Array.from(t.keys()).map(async (a) => {
@@ -314,15 +320,16 @@ class A extends T {
     }}>${e}</calcite-combobox></calcite-block>`;
   }
   renderUtilityNetworkSelection() {
-    const { _messages: e } = this, t = e.labels.utilityNetwork, i = this.utilityNetworks?.map((a) => r`<calcite-combobox-item .value=${a.id} .heading=${a.title} .selected=${a.id === this.selectedUtilityNetwork?.id}></calcite-combobox-item>`);
+    const { _messages: e } = this, t = e.labels.utilityNetwork, i = this.utilityNetworks?.map((a) => r`<calcite-combobox-item .value=${a.id} .heading=${a.title || a.id} .selected=${a.id === this.selectedUtilityNetwork?.id}></calcite-combobox-item>`);
     return r`<calcite-block .heading=${t} .label=${t} expanded><calcite-combobox .label=${t} selection-mode=single-persist @calciteComboboxChange=${({ currentTarget: a }) => {
       const s = a.selectedItems[0]?.value;
       this.selectedUtilityNetwork?.id !== s && (this.selectedUtilityNetwork = this.utilityNetworks?.find((o) => o.id === s));
     }}>${i}</calcite-combobox></calcite-block>`;
   }
   renderDefaultMode() {
-    let e;
-    return this._error ? e = this.renderError(this._error, !1, "exclamation-mark-triangle") : this.selectedUtilityNetwork?.loaded ? e = this.renderContent() : e = this.renderLoader(), r`<calcite-flow-item .selected=${this.mode === "default"}>${e}</calcite-flow-item>`;
+    const { selectedUtilityNetwork: e } = this, { noMapError: t, noUtilityNetworkError: i } = this._messages.errors;
+    let a;
+    return this._error === t || this._error === i ? a = this.renderError(this._error, !1, "exclamation-mark-triangle") : !e?.loaded && !e?.loadError ? a = this.renderLoader() : a = this.renderContent(), r`<calcite-flow-item .selected=${this.mode === "default"}>${a}</calcite-flow-item>`;
   }
   renderSpatialSelectInstructions() {
     const { _messages: e, _activeTraceLocationType: t, mode: i } = this, a = t === "starting-point" ? e.labels.addSpatial.startingPoint : t === "barrier" ? e.labels.addSpatial.barrier : e.labels.addSpatial.stoppingPoint;
@@ -336,10 +343,10 @@ class A extends T {
     return r`<arcgis-features .autoDestroyDisabled=${this.autoDestroyDisabled} .defaultPopupTemplateEnabled=${this._defaultPopupTemplateEnabled} .features=${e} .featureMenuTitle=${t} .hideActionBar=${this.hideActionBar} hide-select-feature .initialDisplayMode=${i} @arcgisClose=${() => this._handleFeaturesClose()} @arcgisPropertyChange=${this._handleFeaturesPropertyChange} open .referenceElement=${this.referenceElement} .view=${this.view} ${h(this._featuresComponentRefChange)}></arcgis-features>`;
   }
   renderAddSpatialFooter() {
-    const { mode: e, _messages: t, selectedFeature: i, selectedUtilityNetwork: a } = this, s = e === "add-spatial-feature" && this._exceedDisplayLimit && !i, o = y(t.warnings.exceededDisplayLimit, {
+    const { mode: e, _messages: t, selectedFeature: i, selectedUtilityNetwork: a } = this, s = e === "add-spatial-feature" && this._exceedDisplayLimit && !i, o = _(t.warnings.exceededDisplayLimit, {
       limit: this._displayLimit.toString()
-    }), d = i ? !(a?.isUtilityLayer(i.layer) ?? !0) : !0;
-    return r`${s && r`<calcite-input-message id=results-limited-message icon=exclamation-mark-circle status=idle>${o}</calcite-input-message>` || ""}<calcite-button appearance=outline width=full @click=${() => this._handleAddSpatialCancelClick()} slot=footer>${t.buttons.cancel}</calcite-button>${e === "add-spatial-feature" && r`<calcite-button width=full slot=footer appearance=solid @click=${() => this._handleAddSpatialAddClick()} .disabled=${d}>${t.buttons.add}</calcite-button>` || ""}`;
+    }), c = i ? !(a?.isUtilityLayer(i.layer) ?? !0) : !0;
+    return r`${s && r`<calcite-input-message id=results-limited-message icon=exclamation-mark-circle status=idle>${o}</calcite-input-message>` || ""}<calcite-button appearance=outline width=full @click=${() => this._handleAddSpatialCancelClick()} slot=footer>${t.buttons.cancel}</calcite-button>${e === "add-spatial-feature" && r`<calcite-button width=full slot=footer appearance=solid @click=${() => this._handleAddSpatialAddClick()} .disabled=${c}>${t.buttons.add}</calcite-button>` || ""}`;
   }
   renderStartingPointSelection() {
     return r`<arcgis-utility-network-trace-location .view=${this.view} trace-location-type=starting-point .beforeTraceLocationSelectStart=${this.beforeTraceLocationSelectStart} @arcgisTraceLocationSelectStart=${this._handleTraceLocationSelectStart} @arcgisTraceLocationSelectEnd=${this._handleTraceLocationSelectEnd} @arcgisTraceLocationChange=${() => this.arcgisTraceInputsChange.emit()} .sketchViewModel=${this._sketchViewModel} .utilityNetwork=${this.selectedUtilityNetwork} .filterLayers=${this._unLayers} .traceLocations=${this._startingPoints} .afterHitTest=${this._handleHitTestComplete.bind(this)} .autoDestroyDisabled=${this.autoDestroyDisabled} ${h(this._traceLocationStartingRefChange)}></arcgis-utility-network-trace-location>`;
@@ -360,22 +367,25 @@ class A extends T {
   }
   renderSubnetworkSelection() {
     const { compatibleSubnetworkNames: e } = this, t = this._messages.labels.subnetworkName;
-    return this.isSubnetworkNameTraceSelected ? this._subnetworkNamesState === "loading" ? r`<calcite-loader class="inline-loader" label=loading scale=s></calcite-loader>` : e.length ? r`<calcite-block .heading=${t} .label=${t} expanded>${e.length > x ? this.renderSubnetworkNameInput() : this.renderSubnetworkSelectList()}</calcite-block>` : this.renderError(this._messages.errors.noCompatibleSubnetworks, !1, "exclamation-mark-triangle") : null;
+    return this.isSubnetworkNameTraceSelected ? this._subnetworkNamesState === "loading" ? r`<calcite-loader class="inline-loader" label=loading scale=s></calcite-loader>` : e.length ? r`<calcite-block .heading=${t} .label=${t} expanded>${e.length > A ? this.renderSubnetworkNameInput() : this.renderSubnetworkSelectList()}</calcite-block>` : this.renderError(this._messages.errors.noCompatibleSubnetworks, !1, "exclamation-mark-triangle") : null;
   }
   renderSubnetworkInfo() {
     const { _messages: e, selectedNamedTraceConfiguration: t, _unTraceConfiguration: i } = this;
     return i && t?.traceType && this._subnetworkTraceTypes.has(t.traceType) ? r`<calcite-block id=subnetwork-info-block expanded .label=${e.labels.subnetworkInfo}><arcgis-utility-network-subnetwork-info .namedTraceConfig=${t}></arcgis-utility-network-subnetwork-info></calcite-block>` : null;
   }
   renderContent() {
-    const { utilityNetworks: e } = this, t = this.selectedNamedTraceConfiguration?.traceConfiguration, i = e && e.length > 1 ? this.renderUtilityNetworkSelection() : null, a = r`${this.renderTraceSelection()}${this.renderSubnetworkInfo()}${this.renderSubnetworkSelection()}`, s = t ? r`${this.showStartingPoints ? this.renderStartingPointSelection() : null}${this.showStoppingPoints ? this.renderStoppingPointSelection() : null}${this.renderBarrierSelection()}` : null;
-    return r`<calcite-block-group .label=${this._messages.labels.traceInputs}>${i}${this.traceConfigurations.length ? r`${a}${s}` : this.renderError(this._messages.errors.noTraceConfigurationError, !1, "exclamation-mark-triangle")}</calcite-block-group>`;
+    const { utilityNetworks: e } = this, { noTraceConfigurationError: t, utilityNetworkLoadFailed: i } = this._messages.errors, a = this.selectedNamedTraceConfiguration?.traceConfiguration, s = e && e.length > 1 ? this.renderUtilityNetworkSelection() : null;
+    let o;
+    this.selectedUtilityNetwork?.loadError ? o = this.renderError(i, !1, "exclamation-mark-triangle") : this.traceConfigurations.length || (o = this.renderError(t, !1, "exclamation-mark-triangle"));
+    const c = r`${this.renderTraceSelection()}${this.renderSubnetworkInfo()}${this.renderSubnetworkSelection()}`, b = a ? r`${this.showStartingPoints ? this.renderStartingPointSelection() : null}${this.showStoppingPoints ? this.renderStoppingPointSelection() : null}${this.renderBarrierSelection()}` : null;
+    return r`<calcite-block-group .label=${this._messages.labels.traceInputs}>${s}${o ?? r`${c}${b}`}</calcite-block-group>`;
   }
   render() {
     const { mode: e } = this;
-    return r`<calcite-panel>${e === "add-spatial-feature" ? this.renderCandidateFeatures() : r`<calcite-flow>${this.renderDefaultMode()}${this.renderSpatialSelectInstructions()}</calcite-flow>`}${e !== "default" ? this.renderAddSpatialFooter() : null}</calcite-panel>`;
+    return r`<calcite-panel>${e === "add-spatial-feature" ? this.renderCandidateFeatures() : null}<calcite-flow .hidden=${e === "add-spatial-feature"}>${this.renderDefaultMode()}${this.renderSpatialSelectInstructions()}</calcite-flow>${e !== "default" ? this.renderAddSpatialFooter() : null}</calcite-panel>`;
   }
 }
-f("arcgis-utility-network-trace-inputs", A);
+y("arcgis-utility-network-trace-inputs", M);
 export {
-  A as ArcgisUtilityNetworkTraceInputs
+  M as ArcgisUtilityNetworkTraceInputs
 };

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

@@ -5,29 +5,30 @@ import "@arcgis/core/core/Error.js";
 import "@arcgis/core/Graphic.js";
 import { LitElement as f, createEvent as o } from "@arcgis/lumina";
 import { log as d, composeMissingPropertyMessage as g, composeEmptyPropertyMessage as _ } from "@arcgis/toolkit/log";
-import { css as v, html as r } from "lit";
+import { css as v, html as l } from "lit";
 import { createRef as b, ref as u } from "lit/directives/ref.js";
-import { u as C } from "../../chunks/useT9n.js";
-import { q as R, c as $ } from "../../chunks/layer-utils.js";
-const w = v`:host{min-height:var(--arcgis-internal-panel-height-sm, 240px);height:100%}arcgis-features{height:100%}calcite-table{--calcite-table-border-color: none}calcite-table-row{--calcite-table-row-border-color: var(--calcite-color-border-3)}.white-panel-background{--calcite-panel-background-color: var(--calcite-color-foreground-1)}.aggregated-geometry-container{display:flex;justify-content:space-between;padding:0 var(--calcite-spacing-md) var(--calcite-spacing-md) var(--calcite-spacing-md)}#elements-list-item{border:solid 1px var(--calcite-color-border-3);border-radius:var(--calcite-corner-radius-sm);margin:0 var(--calcite-spacing-sm)}.no-selectable-results{padding:0 var(--calcite-spacing-md);color:var(--calcite-color-text-3);font-size:var(--calcite-font-size)}.results-heading{display:flex;flex-direction:column;margin:var(--calcite-spacing-md);gap:var(--calcite-spacing-xs)}.results-heading .results-heading-title{font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size);color:var(--calcite-color-text-1)}.results-heading .results-heading-subtitle{font-size:var(--calcite-font-size--1);color:var(--calcite-color-text-3)}.functions-heading{padding:var(--calcite-spacing-md) var(--calcite-spacing-md) var(--calcite-spacing-xxs) var(--calcite-spacing-md);font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size);color:var(--calcite-color-text-1)}.no-results-landing{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;margin:var(--calcite-spacing-sm) var(--calcite-spacing-xl) var(--calcite-spacing-xl) var(--calcite-spacing-xl);gap:var(--calcite-spacing-md)}.no-results-landing calcite-icon{margin-bottom:var(--calcite-spacing-sm);--calcite-icon-color: var(--calcite-color-text-3)}.no-results-landing .no-results-heading{font-size:var(--calcite-font-size-2)}.no-results-landing .no-results-description{color:var(--calcite-color-text-3)}`, h = {
+import { u as R } from "../../chunks/useT9n.js";
+import { q as C, c as w } from "../../chunks/layer-utils.js";
+import { l as $ } from "../../chunks/async-utils.js";
+const E = v`:host{min-height:var(--arcgis-internal-panel-height-sm, 240px);height:100%}arcgis-features{height:100%}calcite-table{--calcite-table-border-color: none}calcite-table-row{--calcite-table-row-border-color: var(--calcite-color-border-3)}.white-panel-background{--calcite-panel-background-color: var(--calcite-color-foreground-1)}.aggregated-geometry-container{display:flex;justify-content:space-between;padding:0 var(--calcite-spacing-md) var(--calcite-spacing-md) var(--calcite-spacing-md)}#elements-list-item{border:solid 1px var(--calcite-color-border-3);border-radius:var(--calcite-corner-radius-sm);margin:0 var(--calcite-spacing-sm)}.no-selectable-results{padding:0 var(--calcite-spacing-md);color:var(--calcite-color-text-3);font-size:var(--calcite-font-size)}.results-heading{display:flex;flex-direction:column;margin:var(--calcite-spacing-md);gap:var(--calcite-spacing-xs)}.results-heading .results-heading-title{font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size);color:var(--calcite-color-text-1)}.results-heading .results-heading-subtitle{font-size:var(--calcite-font-size--1);color:var(--calcite-color-text-3)}.functions-heading{padding:var(--calcite-spacing-md) var(--calcite-spacing-md) var(--calcite-spacing-xxs) var(--calcite-spacing-md);font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size);color:var(--calcite-color-text-1)}.no-results-landing{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;margin:var(--calcite-spacing-sm) var(--calcite-spacing-xl) var(--calcite-spacing-xl) var(--calcite-spacing-xl);gap:var(--calcite-spacing-md)}.no-results-landing calcite-icon{margin-bottom:var(--calcite-spacing-sm);--calcite-icon-color: var(--calcite-color-text-3)}.no-results-landing .no-results-heading{font-size:var(--calcite-font-size-2)}.no-results-landing .no-results-description{color:var(--calcite-color-text-3)}`, h = {
   dirtyAreasDiscovered: -2147208511,
   noValidControllers: -2147208935
 };
-class E extends f {
+class T extends f {
   constructor() {
-    super(...arguments), this._defaultPopupTemplateEnabled = !0, this._messages = C({ blocking: !0 }), this._elementsWithoutLayer = [], this._popoverRef = b(), this._layerIdToFeatures = /* @__PURE__ */ new Map(), this._layerIdToLayer = /* @__PURE__ */ new Map(), this._subtypeCodeToFeatures = /* @__PURE__ */ new Map(), this._sourceIdToElements = /* @__PURE__ */ new Map(), this._unLayers = [], this._queryFeaturesOnLayer = async ([e, t]) => {
-      const a = this.utilityNetwork?.getLayerIdBySourceId(e), s = this._getLayerByLayerId(a), i = this._getElementsUniqueByGlobalId(t);
+    super(...arguments), this._defaultPopupTemplateEnabled = !0, this._messages = R({ blocking: !0 }), this._elementsWithoutLayer = [], this._popoverRef = b(), this._layerIdToFeatures = /* @__PURE__ */ new Map(), this._layerIdToLayer = /* @__PURE__ */ new Map(), this._subtypeCodeToFeatures = /* @__PURE__ */ new Map(), this._sourceIdToElements = /* @__PURE__ */ new Map(), this._unLayers = [], this._queryFeaturesOnLayer = async ([e, t]) => {
+      const a = this.utilityNetwork?.getLayerIdBySourceId(e), s = this._getLayerByLayerId(a), r = this._getElementsUniqueByGlobalId(t);
       if (a == null || !s) {
-        this._elementsWithoutLayer.push(...i);
+        this._elementsWithoutLayer.push(...r);
         return;
       }
-      const l = s.createQuery();
-      l.gdbVersion = this.utilityNetwork?.gdbVersion, l.objectIds = i.map((c) => c.objectId), l.outFields = ["*"];
-      const { features: n } = await R(s, l);
+      const i = s.createQuery();
+      i.gdbVersion = this.utilityNetwork?.gdbVersion, i.objectIds = r.map((c) => c.objectId), i.outFields = ["*"];
+      const { features: n } = await C(s, i);
       n.forEach((c) => {
         const m = c.layer;
         c.getEffectivePopupTemplate(this._defaultPopupTemplateEnabled) || (c.popupTemplate = m.createPopupTemplate());
-      }), $(s) ? n.forEach((c) => this._addOrCreateMapValue(this._subtypeCodeToFeatures, c.layer.subtypeCode, c)) : this._layerIdToFeatures.set(a, n);
+      }), w(s) ? n.forEach((c) => this._addOrCreateMapValue(this._subtypeCodeToFeatures, c.layer.subtypeCode, c)) : this._layerIdToFeatures.set(a, n);
     }, this._aggregateGeometryRefChange = (e) => {
       e && (this._aggregatedGeometryComponentElement = e);
     }, this._featuresRefChange = (e) => {
@@ -38,7 +39,7 @@ class E extends f {
     this.properties = { _aggregatedGeometryDisabled: 16, _featuresComponentElement: 16, aggregatedGeometryGraphicsColor: 0, hideActionBar: 5, hideFeatureResults: 5, featuresFromSelectedLayer: 0, isElementsSelected: 5, layers: 0, messageOverrides: 0, numResults: 32, referenceElement: 1, selectedLayer: 0, state: 1, traceConfigTitle: 1, traceError: 0, traceResult: 0, traceResultFeatures: 0, utilityNetwork: 0, view: 0, autoDestroyDisabled: 5 };
   }
   static {
-    this.styles = w;
+    this.styles = E;
   }
   get numResults() {
     return this.traceResultFeatures.length + this._elementsWithoutLayer.length;
@@ -73,7 +74,7 @@ class E extends f {
     const { _layerIdToLayer: t, _unLayers: a } = this;
     if (t.get(e))
       return t.get(e);
-    const s = a.find((i) => "layerId" in i && i.layerId === e);
+    const s = a.find((r) => "layerId" in r && r.layerId === e);
     return s && t.set(e, s), s;
   }
   _getElementsUniqueByGlobalId(e) {
@@ -88,9 +89,16 @@ class E extends f {
     const { layers: e, utilityNetwork: t } = this;
     if (!t)
       return;
-    t.loaded || (this.state = "loading", await t.load()), this._unLayers = e.filter((s) => t.isUtilityLayer(s));
-    const a = this._unLayers.filter((s) => !s.loaded).map((s) => s.load());
-    a.length > 0 && (this.state = "loading", await Promise.allSettled(a));
+    try {
+      t.loaded || (this.state = "loading", await t.load());
+    } catch (r) {
+      $(r, this, "Error while loading the selected utility network");
+    }
+    this._unLayers = e.filter((r) => t.isUtilityLayer(r));
+    const s = this._unLayers.filter((r) => !r.loaded).map((r) => r.load());
+    s.length > 0 && (this.state = "loading", (await Promise.allSettled(s)).forEach((i) => {
+      i.status === "rejected" && d("error", this, `Failed to load layer. Reason: ${i.reason}`);
+    }));
   }
   async _queryTraceResultsFeatures() {
     const e = Array.from(this._sourceIdToElements.entries());
@@ -98,14 +106,14 @@ class E extends f {
       return;
     this.state = "loading";
     const t = e.map(this._queryFeaturesOnLayer);
-    (await Promise.allSettled(t)).forEach((l, n) => {
-      if (l.status === "rejected") {
+    (await Promise.allSettled(t)).forEach((i, n) => {
+      if (i.status === "rejected") {
         const [c] = e[n];
-        d("error", this, `Failed to query features for source ${c}. Reason: ${l.reason}`);
+        d("error", this, `Failed to query features for source ${c}. Reason: ${i.reason}`);
       }
     });
-    const s = Array.from(this._layerIdToFeatures.values()), i = Array.from(this._subtypeCodeToFeatures.values());
-    this.traceResultFeatures = s.concat(i).flat();
+    const s = Array.from(this._layerIdToFeatures.values()), r = Array.from(this._subtypeCodeToFeatures.values());
+    this.traceResultFeatures = s.concat(r).flat();
   }
   _setSourceIdToElements() {
     this.traceResult.elements?.forEach((e) => this._addOrCreateMapValue(this._sourceIdToElements, e.networkSourceId, e));
@@ -116,39 +124,39 @@ class E extends f {
       return this._renderErrorLanding(e);
     if (!t)
       return this._renderNoTraceLanding();
-    const { elements: a, globalFunctionResults: s, aggregatedGeometry: i } = t, l = !a.length && !s.length && !i, n = a.length > 0 && !s.length && !i;
-    return l ? this._renderNoResultsLanding() : this.state === "loading" ? this._renderGettingResults() : this.hideFeatureResults && n ? this._renderFeaturesAreHidden() : this.isElementsSelected || n ? r`<arcgis-features .autoDestroyDisabled=${this.autoDestroyDisabled} .defaultPopupTemplateEnabled=${this._defaultPopupTemplateEnabled} .features=${this.traceResultFeatures} .hideActionBar=${this.hideActionBar} .hideCloseButton=${n} hide-select-feature initial-display-mode=list @arcgisClose=${() => this.isElementsSelected = !1} open .referenceElement=${this.referenceElement} .view=${this.view} ${u(this._featuresRefChange)}></arcgis-features>` : this._renderLanding(t);
+    const { elements: a, globalFunctionResults: s, aggregatedGeometry: r } = t, i = !a.length && !s.length && !r, n = a.length > 0 && !s.length && !r;
+    return i ? this._renderNoResultsLanding() : this.state === "loading" ? this._renderGettingResults() : this.hideFeatureResults && n ? this._renderFeaturesAreHidden() : this.isElementsSelected || n ? l`<arcgis-features .autoDestroyDisabled=${this.autoDestroyDisabled} .defaultPopupTemplateEnabled=${this._defaultPopupTemplateEnabled} .features=${this.traceResultFeatures} .hideActionBar=${this.hideActionBar} .hideCloseButton=${n} hide-select-feature initial-display-mode=list @arcgisClose=${() => this.isElementsSelected = !1} open .referenceElement=${this.referenceElement} .view=${this.view} ${u(this._featuresRefChange)}></arcgis-features>` : this._renderLanding(t);
   }
   _renderGettingResults() {
-    return r`<calcite-panel class="white-panel-background"><calcite-loader .label=${this._messages.gettingResults} .text=${this._messages.gettingResults}></calcite-loader></calcite-panel>`;
+    return l`<calcite-panel class="white-panel-background"><calcite-loader .label=${this._messages.gettingResults} .text=${this._messages.gettingResults}></calcite-loader></calcite-panel>`;
   }
   _renderLanding(e) {
     const { elements: t, globalFunctionResults: a, aggregatedGeometry: s } = e;
-    return r`<calcite-panel class="white-panel-background">${this._renderTraceResultsHeading()}${s != null ? this._renderAggregatedGeometry(s) : null}${s != null && !t.length ? this._renderNoSelectableResults() : null}${t.length > 0 ? this.hideFeatureResults ? this._renderFeaturesAreHidden() : this._renderElementsResults() : null}${a.length > 0 ? this._renderFunctionsResults(a) : null}</calcite-panel>`;
+    return l`<calcite-panel class="white-panel-background">${this._renderTraceResultsHeading()}${s != null ? this._renderAggregatedGeometry(s) : null}${s != null && !t.length ? this._renderNoSelectableResults() : null}${t.length > 0 ? this.hideFeatureResults ? this._renderFeaturesAreHidden() : this._renderElementsResults() : null}${a.length > 0 ? this._renderFunctionsResults(a) : null}</calcite-panel>`;
   }
   _renderAggregatedGeometry(e) {
-    return r`<div class="aggregated-geometry-container"><arcgis-utility-network-aggregated-geometry .graphicsColor=${this.aggregatedGeometryGraphicsColor} .geometry=${e} .view=${this.view} @arcgisHideGraphicsChange=${this._handleHideGraphicsChange} auto-destroy-disabled ${u(this._aggregateGeometryRefChange)}></arcgis-utility-network-aggregated-geometry><calcite-swatch id=geometry-color-swatch .label=${this._messages.labels.aggregatedGeometryGraphicsColor} .color=${this.aggregatedGeometryGraphicsColor.toCss()} .disabled=${this._aggregatedGeometryDisabled}></calcite-swatch><calcite-popover .heading=${this._messages.headings.setColor} .label=${this._messages.headings.setColor} reference-element=geometry-color-swatch closable ${u(this._popoverRef)}><calcite-color-picker alpha-channel channels-disabled clearable hex-disabled saved-disabled .value=${this.aggregatedGeometryGraphicsColor} @calciteColorPickerChange=${(t) => {
+    return l`<div class="aggregated-geometry-container"><arcgis-utility-network-aggregated-geometry .graphicsColor=${this.aggregatedGeometryGraphicsColor} .geometry=${e} .view=${this.view} @arcgisHideGraphicsChange=${this._handleHideGraphicsChange} auto-destroy-disabled ${u(this._aggregateGeometryRefChange)}></arcgis-utility-network-aggregated-geometry><calcite-swatch id=geometry-color-swatch .label=${this._messages.labels.aggregatedGeometryGraphicsColor} .color=${this.aggregatedGeometryGraphicsColor.toCss()} .disabled=${this._aggregatedGeometryDisabled}></calcite-swatch><calcite-popover .heading=${this._messages.headings.setColor} .label=${this._messages.headings.setColor} reference-element=geometry-color-swatch closable ${u(this._popoverRef)}><calcite-color-picker alpha-channel channels-disabled clearable hex-disabled saved-disabled .value=${this.aggregatedGeometryGraphicsColor} @calciteColorPickerChange=${(t) => {
       const a = t.target.value;
       this.arcgisAggregatedGeometryGraphicsColorChange.emit(a);
     }} .disabled=${this._aggregatedGeometryDisabled}></calcite-color-picker></calcite-popover></div>`;
   }
   _renderFeaturesAreHidden() {
-    return r`<div class="no-selectable-results">${this._messages.resultFeaturesAreHidden}</div>`;
+    return l`<div class="no-selectable-results">${this._messages.resultFeaturesAreHidden}</div>`;
   }
   _renderNoSelectableResults() {
-    return r`<div class="no-selectable-results">${this._messages.noSelectableFeatures}</div>`;
+    return l`<div class="no-selectable-results">${this._messages.noSelectableFeatures}</div>`;
   }
   _renderElementsResults() {
-    return r`<calcite-list .label=${this._messages.headings.traceResultsGeneric}><calcite-list-item id=elements-list-item .label=${this._messages.headings.features} @calciteListItemSelect=${() => this.isElementsSelected = !0}><calcite-chip .label=${this._messages.labels.numFeatures} scale=s slot=content-end>${this.numResults}</calcite-chip><calcite-icon icon=chevron-right slot=content-end></calcite-icon></calcite-list-item></calcite-list>`;
+    return l`<calcite-list .label=${this._messages.headings.traceResultsGeneric}><calcite-list-item id=elements-list-item .label=${this._messages.headings.features} @calciteListItemSelect=${() => this.isElementsSelected = !0}><calcite-chip .label=${this._messages.labels.numFeatures} scale=s slot=content-end>${this.numResults}</calcite-chip><calcite-icon icon=chevron-right slot=content-end></calcite-icon></calcite-list-item></calcite-list>`;
   }
   _renderFunctionsResults(e) {
-    return r`<div class="functions-heading">${this._messages.headings.functions}</div><calcite-table .caption=${this._messages.labels.functionResults}>${e.filter((t) => t.networkAttributeName != null && t.result != null && t.functionType != null).map((t) => {
-      const { functionName: a, networkAttributeName: s, functionType: i, result: l } = t, n = a || `${s} ${i}`;
-      return r`<calcite-table-row><calcite-table-cell>${n}</calcite-table-cell><calcite-table-cell>${l}</calcite-table-cell></calcite-table-row>`;
+    return l`<div class="functions-heading">${this._messages.headings.functions}</div><calcite-table .caption=${this._messages.labels.functionResults}>${e.filter((t) => t.networkAttributeName != null && t.result != null && t.functionType != null).map((t) => {
+      const { functionName: a, networkAttributeName: s, functionType: r, result: i } = t, n = a || `${s} ${r}`;
+      return l`<calcite-table-row><calcite-table-cell>${n}</calcite-table-cell><calcite-table-cell>${i}</calcite-table-cell></calcite-table-row>`;
     })}</calcite-table>`;
   }
   _renderTraceResultsHeading() {
-    return r`<div class="results-heading"><div class="results-heading-title">${this._messages.headings.traceResultsGeneric}</div>${this.traceConfigTitle ? r`<div class="results-heading-subtitle">${this.traceConfigTitle}</div>` : null}</div>`;
+    return l`<div class="results-heading"><div class="results-heading-title">${this._messages.headings.traceResultsGeneric}</div>${this.traceConfigTitle ? l`<div class="results-heading-subtitle">${this.traceConfigTitle}</div>` : null}</div>`;
   }
   _renderErrorLanding(e) {
     let t = e.message;
@@ -160,16 +168,16 @@ class E extends f {
         t = this._messages.traceErrors.noValidControllers;
         break;
     }
-    return r`<calcite-panel class="white-panel-background">${this._renderTraceResultsHeading()}<div class="no-results-landing"><calcite-icon icon=exclamation-mark-triangle scale=l></calcite-icon><div class="no-results-heading">${this._messages.traceFailedHeading}</div><div class="no-results-description">${this._messages.traceFailedDescription}</div><div class="no-results-description">${t}</div></div></calcite-panel>`;
+    return l`<calcite-panel class="white-panel-background">${this._renderTraceResultsHeading()}<div class="no-results-landing"><calcite-icon icon=exclamation-mark-triangle scale=l></calcite-icon><div class="no-results-heading">${this._messages.traceFailedHeading}</div><div class="no-results-description">${this._messages.traceFailedDescription}</div><div class="no-results-description">${t}</div></div></calcite-panel>`;
   }
   _renderNoResultsLanding() {
-    return r`<calcite-panel class="white-panel-background">${this._renderTraceResultsHeading()}<div class="no-results-landing"><calcite-icon icon=exclamation-mark-triangle scale=l></calcite-icon><div class="no-results-heading">${this._messages.noResultsHeading}</div><div class="no-results-description">${this._messages.noResultsDescription}</div></div></calcite-panel>`;
+    return l`<calcite-panel class="white-panel-background">${this._renderTraceResultsHeading()}<div class="no-results-landing"><calcite-icon icon=exclamation-mark-triangle scale=l></calcite-icon><div class="no-results-heading">${this._messages.noResultsHeading}</div><div class="no-results-description">${this._messages.noResultsDescription}</div></div></calcite-panel>`;
   }
   _renderNoTraceLanding() {
-    return r`<calcite-panel class="white-panel-background">${this._renderTraceResultsHeading()}<div class="no-results-landing"><calcite-icon icon=utility-network-trace scale=l></calcite-icon><div class="no-results-heading">${this._messages.noTraceConfigHeading}</div><div class="no-results-description">${this._messages.noTraceConfigDescription}</div></div></calcite-panel>`;
+    return l`<calcite-panel class="white-panel-background">${this._renderTraceResultsHeading()}<div class="no-results-landing"><calcite-icon icon=utility-network-trace scale=l></calcite-icon><div class="no-results-heading">${this._messages.noTraceConfigHeading}</div><div class="no-results-description">${this._messages.noTraceConfigDescription}</div></div></calcite-panel>`;
   }
 }
-p("arcgis-utility-network-trace-results", E);
+p("arcgis-utility-network-trace-results", T);
 export {
-  E as ArcgisUtilityNetworkTraceResults
+  T as ArcgisUtilityNetworkTraceResults
 };