@arcgis/map-components 5.2.0-next.16 → 5.2.0-next.161

package/dist/components/arcgis-time-zone-chip/index.js

@@ -0,0 +1,4 @@
+import "@esri/calcite-components/components/calcite-chip";
+import "@esri/calcite-components/components/calcite-popover";
+import "../arcgis-time-zone-selector/index.js";
+export * from "./customElement.js";

package/dist/components/arcgis-time-zone-label/customElement.d.ts

@@ -27,7 +27,7 @@ export abstract class ArcgisTimeZoneLabel extends LitElement {
    */
   accessor actionIcon: Icon["icon"] | undefined;
   /**
-   * When true, the component is visually withdrawn and cannot receive user interaction.
+   * When true, the component is visually de-emphasized and does not accept user interaction.
    *
    * @default false
    */
@@ -61,13 +61,13 @@ export abstract class ArcgisTimeZoneLabel extends LitElement {
   /** The state of the component. */
   get state(): State;
   /**
-   * The view associated with the component. 
-   *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-time-zone-label component will be associated with a map or scene component rather than using the `view` property.
+   * The view associated with the component.
+   * > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-time-zone-label component will be associated with a map or scene component rather than using the `view` property.
    */
   accessor view: MapView | undefined;
   /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
   readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "state"; }>;
-  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  /** Emitted when the component associated with a map or scene view is ready for user interaction. */
   readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     arcgisPropertyChange: ArcgisTimeZoneLabel["arcgisPropertyChange"]["detail"];

package/dist/components/arcgis-time-zone-selector/customElement.js

@@ -0,0 +1,56 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as o } from "../../chunks/runtime.js";
+import { LitElement as l, createEvent as r } from "@arcgis/lumina";
+import { css as m, html as n } from "lit";
+import { u as d } from "../../chunks/useT9n.js";
+import { s as t, u as s, a as u } from "../../chunks/time-utils.js";
+const h = m`:host{--calcite-label-margin-bottom: initial;display:block;inline-size:100%}.time-zone-options{display:flex;flex-direction:column}.time-zone-indent{margin-inline-start:calc(var(--calcite-spacing-lg) * 1.5)}.time-zone-input{inline-size:100%;max-inline-size:100%;&:not([calcite-hydrated]){visibility:hidden}}.status{display:grid;grid-template-columns:min-content 1fr;align-items:start;gap:var(--calcite-spacing-sm);box-sizing:border-box;padding:var(--calcite-spacing-sm);border-radius:var(--calcite-corner-radius-sm);background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-2)}.status-text{margin:0}`, p = ["device", "data", "specific"];
+class g extends l {
+  constructor() {
+    super(...arguments), this._messages = d({ blocking: !0 }), this.disabled = !1, this.timeZone = t, this.visualScale = "m", this.arcgisInternalTimeZoneChange = r({ bubbles: !1, composed: !1 });
+  }
+  static {
+    this.properties = { disabled: 5, timeZone: 1, visualScale: 1 };
+  }
+  static {
+    this.styles = h;
+  }
+  #i;
+  get #s() {
+    return this.timeZone === t ? "device" : this.timeZone === s ? "data" : "specific";
+  }
+  get #t() {
+    return this.timeZone !== t && this.timeZone !== s ? this.timeZone : this.#i ?? u;
+  }
+  willUpdate(e) {
+    e.has("timeZone") && this.timeZone !== t && this.timeZone !== s && (this.#i = this.timeZone);
+  }
+  #e(e) {
+    e !== this.timeZone && (this.timeZone = e, this.arcgisInternalTimeZoneChange.emit(e));
+  }
+  #a(e) {
+    switch (e.currentTarget.selectedItem?.value) {
+      case "device":
+        this.#e(t);
+        break;
+      case "specific":
+        this.#e(this.#t);
+        break;
+      case "data":
+        this.#e(s);
+        break;
+    }
+  }
+  #n(e) {
+    const i = e.currentTarget.value;
+    i && this.#e(i);
+  }
+  render() {
+    const { _messages: e } = this, i = this.#s, c = i === "data" ? e.dataStatus : i === "device" ? e.deviceStatus : void 0;
+    return n`<div class="time-zone-options"><calcite-radio-button-group .ariaLabel=${e.timeZone} .disabled=${this.disabled} layout=vertical name=time-zone-mode .scale=${this.visualScale} @calciteRadioButtonGroupChange=${this.#a}>${p.map((a) => n`<calcite-label layout=inline .scale=${this.visualScale}><calcite-radio-button .checked=${i === a} .disabled=${this.disabled} .value=${a}></calcite-radio-button>${e[a]}</calcite-label>`)}</calcite-radio-button-group><div class="time-zone-indent" .hidden=${i !== "specific"}><calcite-input-time-zone .ariaLabel=${e.specificTimeZone} class="time-zone-input" data-testid=time-zone-input .disabled=${this.disabled} mode=region overlay-positioning=fixed .scale=${this.visualScale} .value=${this.#t} @calciteInputTimeZoneChange=${this.#n}></calcite-input-time-zone></div>${c ? n`<div class="status" aria-live=polite><calcite-icon aria-hidden icon=time-zone scale=s></calcite-icon><p class="status-text">${c}</p></div>` : void 0}</div>`;
+  }
+}
+o("arcgis-time-zone-selector", g);
+export {
+  g as ArcgisTimeZoneSelector
+};

package/dist/components/arcgis-time-zone-selector/index.js

@@ -0,0 +1,6 @@
+import "@esri/calcite-components/components/calcite-radio-button-group";
+import "@esri/calcite-components/components/calcite-label";
+import "@esri/calcite-components/components/calcite-radio-button";
+import "@esri/calcite-components/components/calcite-input-time-zone";
+import "@esri/calcite-components/components/calcite-icon";
+export * from "./customElement.js";

package/dist/components/arcgis-track/customElement.d.ts

@@ -42,6 +42,15 @@ export abstract class ArcgisTrack extends LitElement {
    * prevent memory leaks.
    *
    * @default false
+   * @example
+   * ```html
+   * <arcgis-track auto-destroy-disabled></arcgis-track>
+   * ```
+   *
+   * ```js
+   * trackElement.autoDestroyDisabled = true;
+   * ```
+   * 
    */
   accessor autoDestroyDisabled: boolean;
   /**
@@ -219,8 +228,8 @@ export abstract class ArcgisTrack extends LitElement {
    */
   get tracking(): boolean;
   /**
-   * The view associated with the component. 
-   *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-track component will be associated with a map or scene component rather than using the `view` property.
+   * The view associated with the component.
+   * > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-track component will be associated with a map or scene component rather than using the `view` property.
    */
   accessor view: MapView | SceneView | undefined;
   /**
@@ -240,7 +249,7 @@ export abstract class ArcgisTrack extends LitElement {
   readonly arcgisError: import("@arcgis/lumina").TargetedEvent<this, { error: GeolocationPositionError; }>;
   /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
   readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "state"; }>;
-  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  /** Emitted when the component associated with a map or scene view is ready for user interaction. */
   readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     arcgisComplete: ArcgisTrack["arcgisComplete"]["detail"];

package/dist/components/arcgis-track/customElement.js

@@ -9,8 +9,8 @@ import { u as y } from "../../chunks/useT9n.js";
 import { m as M } from "../../chunks/useViewModel.js";
 import { g as P } from "../../chunks/globalCss.js";
 import { property as a, subclass as E } from "@arcgis/core/core/accessorSupport/decorators.js";
-import { i as I, b as O } from "../../chunks/async-utils.js";
-import { debounce as C } from "lodash-es";
+import { i as I, a as O } from "../../chunks/async-utils.js";
+import { debounce as C } from "es-toolkit/compat";
 import { G as S } from "../../chunks/GeolocationPositioning.js";
 const D = f`.arcgis-button{--calcite-icon-color: var(--calcite-color-text-3);--calcite-button-background-color: var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);line-height:var(--calcite-font-line-height-relative-tight);calcite-button{--calcite-offset-invert-focus: 1}display:flex;flex-flow:column;cursor:pointer;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size);:hover{--calcite-icon-color: var(--calcite-color-text-1);--calcite-button-background-color: var(--calcite-color-transparent-hover)}}:host{width:fit-content;height:fit-content}`;
 var F = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, r = (e, t, s, c) => {

package/dist/components/arcgis-unit-radio-button-group/customElement.js

@@ -1,11 +1,11 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as l } from "../../chunks/runtime.js";
-import { css as o, html as e } from "lit";
+import { c as o } from "../../chunks/runtime.js";
+import { css as l, html as e } from "lit";
 import { keyed as n } from "lit/directives/keyed.js";
 import { LitElement as m, createEvent as u } from "@arcgis/lumina";
 import { u as g } from "../../chunks/useT9n.js";
-import { i as d } from "../../chunks/measurementUtils.js";
-const h = o`:host{width:100%}.root{--calcite-label-margin-bottom: 0;width:100%}calcite-radio-button-group{padding:var(--calcite-spacing-sm)}`;
+import { i as h } from "../../chunks/measurementUtils.js";
+const d = l`:host{width:100%}.root{--calcite-label-margin-bottom: 0;width:100%}calcite-radio-button-group{padding:var(--calcite-spacing-sm)}`;
 class p extends m {
   constructor() {
     super(...arguments), this.messages = g({}), this.options = [], this.scale = "m", this.layout = "block", this.arcgisUnitSelectChange = u();
@@ -14,7 +14,7 @@ class p extends m {
     this.properties = { options: [1, { type: Array }], scale: 1, name: 1, value: 0, messageOverrides: 0, label: 1, layout: 1 };
   }
   static {
-    this.styles = h;
+    this.styles = d;
   }
   async destroy() {
     await this.manager.destroy();
@@ -30,10 +30,10 @@ class p extends m {
     } = this;
     return e`<calcite-radio-button-group layout=vertical .name=${i} @calciteRadioButtonGroupChange=${(t) => {
       c.emit(t.target.selectedItem?.value);
-    }} .scale=${this.scale}>${s.map((t) => e`<calcite-label layout=inline .scale=${this.scale}>${n(t, e`<calcite-radio-button .checked=${t === r} .scale=${this.scale} .value=${t}></calcite-radio-button>`)}${d(t) ? a.systems?.[t] : a.units?.[t]?.pluralCapitalized}</calcite-label>`)}</calcite-radio-button-group>`;
+    }} .scale=${this.scale}>${s.map((t) => e`<calcite-label layout=inline .scale=${this.scale}>${n(t, e`<calcite-radio-button .checked=${t === r} .scale=${this.scale} .value=${t}></calcite-radio-button>`)}${h(t) ? a.systems?.[t] : a.units?.[t]}</calcite-label>`)}</calcite-radio-button-group>`;
   }
 }
-l("arcgis-unit-radio-button-group", p);
+o("arcgis-unit-radio-button-group", p);
 export {
   p as ArcgisUnitRadioButtonGroup
 };

package/dist/components/arcgis-unit-select/customElement.js

@@ -1,39 +1,43 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as r } from "../../chunks/runtime.js";
-import { repeat as o } from "lit/directives/repeat.js";
-import { css as n, html as a } from "lit";
-import { LitElement as m, createEvent as h } from "@arcgis/lumina";
-import { u } from "../../chunks/useT9n.js";
-import { i as g } from "../../chunks/measurementUtils.js";
-const p = n`:host{width:100%}.root{--calcite-label-margin-bottom: 0;width:100%}.root[layout=inline-space-between] calcite-select{width:var(--arcgis-unit-select-inline-size, 180px)}`;
-class y extends m {
+import { c as o } from "../../chunks/runtime.js";
+import { css as m, html as i } from "lit";
+import { repeat as h } from "lit/directives/repeat.js";
+import { LitElement as p, createEvent as l, nothing as g } from "@arcgis/lumina";
+import { createRef as u, ref as d } from "lit/directives/ref.js";
+import { u as b } from "../../chunks/useT9n.js";
+import { i as f } from "../../chunks/measurementUtils.js";
+const $ = m`:host{--calcite-label-margin-bottom: 0;width:100%}.root{display:flex;flex-direction:column;gap:var(--calcite-spacing-xxs);width:100%}.heading{display:grid;grid-template-columns:minmax(0,1fr) 1.5rem;align-items:center;gap:var(--calcite-spacing-xs);min-block-size:1.5rem}.label{min-inline-size:0;overflow-wrap:anywhere}.reset{--calcite-button-text-color: var(--calcite-color-text-3);inline-size:100%}calcite-select{inline-size:100%;min-inline-size:0}`;
+class v extends p {
   constructor() {
-    super(...arguments), this.messages = u({}), this.options = [], this.scale = "m", this.layout = "block", this.arcgisUnitSelectChange = h();
+    super(...arguments), this.messages = b({}), this._selectRef = u(), this.options = [], this.scale = "m", this.canReset = !1, this.arcgisInternalUnitReset = l({ bubbles: !1, composed: !1 }), this.arcgisUnitSelectChange = l();
   }
   static {
-    this.properties = { options: [1, { type: Array }], scale: 1, selectLabel: 1, value: 0, messageOverrides: 0, label: 1, layout: 1 };
+    this.properties = { options: [1, { type: Array }], scale: 1, selectLabel: 1, value: 0, canReset: 5, resetLabel: 1, messageOverrides: 0, label: 1 };
   }
   static {
-    this.styles = p;
+    this.styles = $;
   }
   async destroy() {
     await this.manager.destroy();
   }
+  async _resetUnit() {
+    this.arcgisInternalUnitReset.emit(), await this.updateComplete, await this._selectRef.value?.setFocus();
+  }
   render() {
     const {
       messages: t,
-      options: l = [],
+      options: c = [],
       // when running in the CI, sometimes this ends up being `undefined`, for unclear reasons.
       selectLabel: s,
-      value: i,
-      arcgisUnitSelectChange: c
-    } = this;
-    return a`<calcite-label class="root" .layout=${this.layout} .scale=${this.scale}>${s}<calcite-select .label=${s} @calciteSelectChange=${(e) => {
-      c.emit(e.target.value);
-    }} .scale=${this.scale}>${o(l, (e) => e, (e) => a`<calcite-option .selected=${e === i} .value=${e}>${g(e) ? t.systems?.[e] : t.units?.[e]?.pluralCapitalized}</calcite-option>`)}</calcite-select></calcite-label>`;
+      value: r,
+      arcgisUnitSelectChange: n
+    } = this, a = this.resetLabel ?? t.reset;
+    return i`<calcite-label .scale=${this.scale}><div class="root"><div class="heading"><span class="label">${s}</span>${this.canReset && a && i`<calcite-button class="reset" appearance=transparent icon-start=reset kind=neutral .label=${`${a}: ${s}`} title=${a ?? g} scale=s @click=${this._resetUnit}></calcite-button>` || ""}</div><calcite-select .label=${s} @calciteSelectChange=${(e) => {
+      n.emit(e.target.value);
+    }} .scale=${this.scale} ${d(this._selectRef)}>${h(c, (e) => e, (e) => i`<calcite-option .selected=${e === r} .value=${e}>${f(e) ? t.systems?.[e] : t.units?.[e]}</calcite-option>`)}</calcite-select></div></calcite-label>`;
   }
 }
-r("arcgis-unit-select", y);
+o("arcgis-unit-select", v);
 export {
-  y as ArcgisUnitSelect
+  v as ArcgisUnitSelect
 };

package/dist/components/arcgis-unit-select/index.js

@@ -1,4 +1,5 @@
 import "@esri/calcite-components/components/calcite-label";
+import "@esri/calcite-components/components/calcite-button";
 import "@esri/calcite-components/components/calcite-select";
 import "@esri/calcite-components/components/calcite-option";
 export * from "./customElement.js";

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

@@ -1,74 +1,85 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as r } from "../../chunks/runtime.js";
+import { c as u } from "../../chunks/runtime.js";
 import { html as o } from "lit";
-import { keyed as c } from "lit/directives/keyed.js";
-import { createReactiveMap as u } from "@arcgis/core/applications/Components/featureUtils.js";
-import { watch as l } from "@arcgis/core/core/reactiveUtils.js";
-import { substitute as d } from "@arcgis/core/intl.js";
-import { LitElement as h, safeClassMap as g } from "@arcgis/lumina";
-import { createRef as v, ref as m } from "lit/directives/ref.js";
-class F extends h {
+import { keyed as l } from "lit/directives/keyed.js";
+import { u as a } from "../../chunks/useT9n.js";
+import { createReactiveMap as d } from "@arcgis/core/applications/Components/featureUtils.js";
+import { watch as h } from "@arcgis/core/core/reactiveUtils.js";
+import { substitute as g } from "@arcgis/core/intl.js";
+import { LitElement as m, safeClassMap as f } from "@arcgis/lumina";
+import { createRef as v, ref as r } from "lit/directives/ref.js";
+class p extends m {
   constructor() {
-    super(...arguments), this._associationFeaturesIntersectionObserver = new IntersectionObserver(([t]) => {
-      t?.isIntersecting && this._increaseFeaturePage();
+    super(...arguments), this._associationFeaturesIntersectionObserver = new IntersectionObserver(([e]) => {
+      e?.isIntersecting && this._increaseFeaturePage();
     }, {
       root: window.document
     }), this._associationFeaturesIntersectionObserverNode = v(), this._currentFeaturePage = 1, this._increaseFeaturePage = () => {
-      const { state: t, showAllEnabled: e, associatedFeatureCount: i, featuresPerPage: s, currentFeaturePage: n } = this;
-      t === "ready" && e && i >= s * n && this.currentFeaturePage++;
-    }, this._isFeatureCountNoticeOpen = !0, this.associationViewModels = /* @__PURE__ */ new Map(), this.featuresPerPage = 50, this.maxFeatureCount = 1e3, this.showAllEnabled = !1, this.state = "ready", this.tooltipReferenceMap = u();
+      const { state: e, showAllEnabled: t, associatedFeatureCount: s, featuresPerPage: i, currentFeaturePage: n } = this;
+      e === "ready" && t && s >= i * n && this.currentFeaturePage++;
+    }, this._isFeatureCountNoticeOpen = !0, this._messages = a({ name: "utility-network-associations", blocking: !0 }), this._messagesCommon = a({ name: "common", blocking: !0 }), this._tooltipReferenceCallbacks = /* @__PURE__ */ new Map(), this.associationViewModels = /* @__PURE__ */ new Map(), this.featuresPerPage = 50, this.maxFeatureCount = 1e3, this.showAllEnabled = !1, this.state = "ready", this.tooltipReferenceMap = d();
   }
   static {
-    this.properties = { associatedFeatureCount: 32, associationViewModels: 0, currentFeaturePage: 9, featuresPerPage: 9, maxFeatureCount: 9, messages: 0, parentFeatureViewModel: 0, selectedLayer: 0, showAllEnabled: 5, state: 1, tooltipReferenceMap: 0 };
+    this.properties = { associatedFeatureCount: 32, associationViewModels: 0, currentFeaturePage: 9, endIndex: 32, featuresPerPage: 9, maxFeatureCount: 9, parentFeatureViewModel: 0, selectedLayer: 0, showAllEnabled: 5, state: 1, tooltipReferenceMap: 0 };
   }
   get associatedFeatureCount() {
-    const t = this.associationViewModels, e = this.selectedLayer ? t.get(this.selectedLayer) : null;
-    return e ? e.length : 0;
+    const e = this.associationViewModels, t = this.selectedLayer ? e.get(this.selectedLayer) : null;
+    return t ? t.length : 0;
   }
   get currentFeaturePage() {
     return this._currentFeaturePage;
   }
-  set currentFeaturePage(t) {
-    const { featuresPerPage: e, associatedFeatureCount: i } = this, s = Math.ceil(i / e) || 1, n = Math.max(Math.min(t, s), 1);
+  set currentFeaturePage(e) {
+    const { featuresPerPage: t, associatedFeatureCount: s } = this, i = Math.ceil(s / t) || 1, n = Math.max(Math.min(e, i), 1);
     this._currentFeaturePage = n;
   }
+  get endIndex() {
+    const { currentFeaturePage: e, featuresPerPage: t, maxFeatureCount: s } = this;
+    return Math.min(e * t, s);
+  }
+  disconnectedCallback() {
+    this._associationFeaturesIntersectionObserver.disconnect(), this._tooltipReferenceCallbacks.clear(), this.tooltipReferenceMap.clear(), super.disconnectedCallback();
+  }
   loaded() {
     this.manager.onLifecycle(() => [
-      l(() => [this.state, this.showAllEnabled, this._associationFeaturesIntersectionObserverNode], () => {
+      h(() => [this.state, this.showAllEnabled, this._associationFeaturesIntersectionObserverNode], () => {
         this._handleAssociationFeaturesObserverChange();
       }, { initial: !0 })
     ]);
   }
-  getConnectivityTooltip(t) {
-    const { messages: e } = this;
-    if (!e)
-      return "";
-    switch (t) {
+  getConnectivityTooltip(e) {
+    const { _messages: t } = this;
+    switch (e) {
       case "connectivity":
       case "junction-junction-connectivity":
-        return e.associationsJunctionJunction;
+        return t.associationsJunctionJunction;
       case "junction-edge-from-connectivity":
-        return e.associationsJunctionEdgeFrom;
+        return t.associationsJunctionEdgeFrom;
       case "junction-edge-midspan-connectivity":
-        return e.associationsJunctionEdgeMidspan;
+        return t.associationsJunctionEdgeMidspan;
       case "junction-edge-to-connectivity":
-        return e.associationsJunctionEdgeTo;
+        return t.associationsJunctionEdgeTo;
       default:
         return "";
     }
   }
+  _getTooltipReferenceCallback(e) {
+    let t = this._tooltipReferenceCallbacks.get(e);
+    return t || (t = (s) => {
+      s ? this.tooltipReferenceMap.set(e, s) : (this.tooltipReferenceMap.delete(e), this._tooltipReferenceCallbacks.delete(e));
+    }, this._tooltipReferenceCallbacks.set(e, t)), t;
+  }
   _handleAssociationFeaturesObserverChange() {
     this._unobserveAssociationFeaturesObserver();
-    const { state: t, showAllEnabled: e } = this;
-    this._associationFeaturesIntersectionObserverNode.value && t === "ready" && e && this._associationFeaturesIntersectionObserver.observe(this._associationFeaturesIntersectionObserverNode.value);
+    const { state: e, showAllEnabled: t } = this;
+    this._associationFeaturesIntersectionObserverNode.value && e === "ready" && t && this._associationFeaturesIntersectionObserver.observe(this._associationFeaturesIntersectionObserverNode.value);
   }
   _unobserveAssociationFeaturesObserver() {
     this._associationFeaturesIntersectionObserverNode.value && this._associationFeaturesIntersectionObserver.unobserve(this._associationFeaturesIntersectionObserverNode.value);
   }
-  _renderConnectivityIcon(t, e) {
-    const { tooltipReferenceMap: i } = this;
+  _renderConnectivityIcon(e, t) {
     let s;
-    switch (t) {
+    switch (e) {
       case "junction-edge-from-connectivity":
         s = "connection-end-left";
         break;
@@ -81,26 +92,24 @@ class F extends h {
       default:
         s = "connection-to-connection";
     }
-    return o`<calcite-icon .icon=${s} @pointerover=${(n) => {
-      i.set(e, n.currentTarget);
-    }} scale=s slot=content-start></calcite-icon>`;
+    return o`<calcite-icon .icon=${s} scale=s slot=content-start ${r(this._getTooltipReferenceCallback(t))}></calcite-icon>`;
   }
   _renderFeatureCountWarning() {
-    const { associatedFeatureCount: t, maxFeatureCount: e, messages: i } = this, s = d(i?.associationsLimitNoticeMessage ?? "", { number: e }), n = t > e, a = i?.associationsLimitNoticeTitle ?? "";
-    return n ? o`<calcite-notice class=${g(this._isFeatureCountNoticeOpen ? "notice-container" : "")} closable icon=information kind=info open scale=s width=full @calciteNoticeBeforeOpen=${() => this._isFeatureCountNoticeOpen = !0} @calciteNoticeClose=${() => this._isFeatureCountNoticeOpen = !1}><div slot=title>${a}</div><div slot=message>${s}</div></calcite-notice>` : null;
+    const { _messages: e, associatedFeatureCount: t, maxFeatureCount: s } = this, i = g(e.associationsLimitNoticeMessage ?? "", { number: s }), n = t > s, c = e.associationsLimitNoticeTitle ?? "";
+    return n ? o`<calcite-notice class=${f(this._isFeatureCountNoticeOpen ? "notice-container" : "")} closable icon=information kind=info open scale=s width=full @calciteNoticeBeforeOpen=${() => this._isFeatureCountNoticeOpen = !0} @calciteNoticeClose=${() => this._isFeatureCountNoticeOpen = !1}><div slot=title>${c}</div><div slot=message>${i}</div></calcite-notice>` : null;
   }
   _renderFeatureObserver() {
-    return o`<div class="feature-observer" ${m(this._associationFeaturesIntersectionObserverNode)}></div>`;
+    return o`<div class="feature-observer" ${r(this._associationFeaturesIntersectionObserverNode)}></div>`;
   }
   _renderLoading() {
-    return c("loading-container", o`<div class="loading-container">${this._renderLoadingIcon()}</div>`);
+    return l("loading-container", o`<div class="loading-container">${this._renderLoadingIcon()}</div>`);
   }
   _renderLoadingIcon() {
-    const t = this.messages?.loading ?? "";
-    return o`<calcite-loader inline .label=${t}></calcite-loader>`;
+    const e = this._messagesCommon.loading ?? "";
+    return o`<calcite-loader inline .label=${e}></calcite-loader>`;
   }
 }
-r("arcgis-utility-network-association-list", F);
+u("arcgis-utility-network-association-list", p);
 export {
-  F as ArcgisUtilityNetworkAssociationList
+  p as ArcgisUtilityNetworkAssociationList
 };

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

@@ -22,6 +22,15 @@ export abstract class ArcgisUtilityNetworkAssociations extends LitElement {
    * prevent memory leaks.
    *
    * @default false
+   * @example
+   * ```html
+   * <arcgis-utility-network-associations auto-destroy-disabled></arcgis-utility-network-associations>
+   * ```
+   *
+   * ```js
+   * utilityNetworkAssociationsElement.autoDestroyDisabled = true;
+   * ```
+   * 
    */
   accessor autoDestroyDisabled: boolean;
   /**
@@ -219,8 +228,8 @@ export abstract class ArcgisUtilityNetworkAssociations extends LitElement {
    */
   accessor utilityNetwork: UtilityNetwork | null | undefined;
   /**
-   * The view associated with the component. 
-   *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-utility-network-associations component will be associated with a map or scene component rather than using the `view` property.
+   * The view associated with the component.
+   * > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-utility-network-associations component will be associated with a map or scene component rather than using the `view` property.
    *
    * @since 4.26
    */
@@ -230,7 +239,7 @@ export abstract class ArcgisUtilityNetworkAssociations extends LitElement {
   "@setterTypes": {
     icon?: IconName;
   };
-  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  /** Emitted when the component associated with a map or scene view is ready for user interaction. */
   readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     arcgisReady: ArcgisUtilityNetworkAssociations["arcgisReady"]["detail"];

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

@@ -0,0 +1,70 @@
+/// <reference path="../../index.d.ts" />
+import type UtilityNetwork from "@arcgis/core/networks/UtilityNetwork.js";
+import type MapView from "@arcgis/core/views/MapView.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+
+/**
+ * This is a sub-component used by the **ArcgisUtilityNetworkTraceAnalysis** component.
+ * It allows users to select utility networks from the map.
+ *
+ * @since 5.2
+ */
+export abstract class ArcgisUtilityNetworkPicker extends LitElement {
+  /** @internal */
+  protected _messages: {
+      componentLabel: string;
+      errors: {
+          mapLoadFailed: string;
+          noUtilityNetwork: string;
+          noView: string;
+          utilityNetworkLoadFailed: string;
+      };
+      labels: { utilityNetwork: string; };
+  } & T9nMeta<{
+      componentLabel: string;
+      errors: {
+          mapLoadFailed: string;
+          noUtilityNetwork: string;
+          noView: string;
+          utilityNetworkLoadFailed: string;
+      };
+      labels: { utilityNetwork: string; };
+  }>;
+  accessor error: string | undefined;
+  accessor heading: string | undefined;
+  /** @default false */
+  accessor hideErrors: boolean;
+  /** @default false */
+  accessor hideLoader: boolean;
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: {
+      componentLabel?: string | undefined;
+      errors?: {
+          mapLoadFailed?: string | undefined;
+          noUtilityNetwork?: string | undefined;
+          noView?: string | undefined;
+          utilityNetworkLoadFailed?: string | undefined;
+      } | undefined;
+      labels?: { utilityNetwork?: string | undefined; } | undefined;
+  };
+  accessor selectedUtilityNetwork: UtilityNetwork | undefined;
+  /** @default "loading" */
+  accessor state: "error" | "loading" | "ready";
+  /**
+   * The view associated with the component.
+   * > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-utility-network-picker component will be associated with a map or scene component rather than using the `view` property.
+   */
+  accessor view: MapView | undefined;
+  /** Fires when an error occurs while loading the utility networks from the map. */
+  readonly arcgisError: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "selectedUtilityNetwork" | "state"; }>;
+  readonly "@eventTypes": {
+    arcgisError: ArcgisUtilityNetworkPicker["arcgisError"]["detail"];
+    arcgisPropertyChange: ArcgisUtilityNetworkPicker["arcgisPropertyChange"]["detail"];
+  };
+}

package/dist/components/arcgis-utility-network-picker/customElement.js

@@ -0,0 +1,94 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c } from "../../chunks/runtime.js";
+import h from "@arcgis/core/core/Collection.js";
+import { watch as d } from "@arcgis/core/core/reactiveUtils.js";
+import { LitElement as n, createEvent as m } from "@arcgis/lumina";
+import { usePropertyChange as g } from "@arcgis/lumina/controllers";
+import { log as o } from "@arcgis/toolkit/log";
+import { css as w, html as s } from "lit";
+import { l } from "../../chunks/async-utils.js";
+import { u as y } from "../../chunks/useT9n.js";
+const k = w`:host{height:100%;flex-grow:1}calcite-block{--calcite-block-content-space: 0;--calcite-block-border-color: transparent;margin:0}calcite-block :is(calcite-combobox,calcite-label,calcite-notice){margin:0 var(--calcite-space-md) var(--calcite-space-md)}calcite-block :last-child{margin-bottom:0}calcite-notice{margin:var(--calcite-space-md)}`;
+class u extends n {
+  constructor() {
+    super(...arguments), this._messages = y({ blocking: !0 }), this.hideErrors = !1, this.hideLoader = !1, this.state = "loading", this.arcgisPropertyChange = g()("selectedUtilityNetwork", "state"), this.arcgisError = m();
+  }
+  static {
+    this.properties = { _utilityNetworks: 16, view: 0, messageOverrides: 0, hideErrors: 5, hideLoader: 5, state: 1, error: 1, selectedUtilityNetwork: 0, heading: 1 };
+  }
+  static {
+    this.styles = k;
+  }
+  load() {
+    this.#e(), this.manager.onLifecycle(() => [
+      d(() => this.view?.map, () => this.#e())
+    ]);
+  }
+  willUpdate(t) {
+    t.has("_utilityNetworks") && this.#s(), t.has("selectedUtilityNetwork") && this.#o();
+  }
+  #t(t) {
+    this.error = t, this.state = "error", this.arcgisError.emit();
+  }
+  #i() {
+    this.error = void 0, this.state = "ready";
+  }
+  #e() {
+    if (this.error = void 0, this.state = "loading", !this.view?.map) {
+      o("error", this, this._messages.errors.noView), this._utilityNetworks = void 0, this.#t(this._messages.errors.noView);
+      return;
+    }
+    const t = this.view.map;
+    this.#r(t);
+  }
+  async #r(t) {
+    try {
+      t.loaded || await t.load();
+    } catch (e) {
+      this.#t(this._messages.errors.mapLoadFailed), l(e, this, this._messages.errors.mapLoadFailed);
+    } finally {
+      this._utilityNetworks = t.utilityNetworks || new h();
+    }
+  }
+  #s() {
+    const { selectedUtilityNetwork: t, _utilityNetworks: e } = this;
+    e?.length ? (!t || !e.includes(t)) && (this.selectedUtilityNetwork = e.at(0), this.arcgisPropertyChange.emit({ name: "selectedUtilityNetwork" })) : (this.#t(this._messages.errors.noUtilityNetwork), o("error", this, this._messages.errors.noUtilityNetwork), this.selectedUtilityNetwork = void 0);
+  }
+  async #o() {
+    const { selectedUtilityNetwork: t } = this;
+    try {
+      t && !t.loaded && await t.load(), this.#i();
+    } catch (e) {
+      l(e, this, this._messages.errors.utilityNetworkLoadFailed), this.#t(this._messages.errors.utilityNetworkLoadFailed);
+    }
+  }
+  #l() {
+    return this.hideLoader ? null : s`<calcite-loader label=loading></calcite-loader>`;
+  }
+  #a(t, e = !1, i) {
+    return this.hideErrors ? null : s`<calcite-notice .closable=${e} kind=danger open scale=s width=auto .icon=${i}><div slot=message>${t}</div></calcite-notice>`;
+  }
+  #c() {
+    const t = this._messages.labels.utilityNetwork, e = this._utilityNetworks?.map((i) => s`<calcite-combobox-item .value=${i.id} .heading=${i.title || i.id} .selected=${i.id === this.selectedUtilityNetwork?.id}></calcite-combobox-item>`);
+    return s`<calcite-combobox .label=${t} selection-mode=single-persist @calciteComboboxChange=${({ currentTarget: i }) => {
+      const r = i.selectedItems[0]?.value;
+      this.selectedUtilityNetwork?.id !== r && (this.selectedUtilityNetwork = this._utilityNetworks?.find((a) => a.id === r));
+    }}>${e}</calcite-combobox>`;
+  }
+  #h() {
+    const { selectedUtilityNetwork: t } = this;
+    return s`<calcite-label>${t?.title}</calcite-label>`;
+  }
+  #d(t) {
+    const e = this._messages.labels.utilityNetwork, i = this.heading || e, r = this._utilityNetworks?.length ? this._utilityNetworks?.length === 1 ? this.#h() : this.#c() : void 0;
+    return s`<calcite-block .heading=${i} .label=${e} expanded>${r}${t}</calcite-block>`;
+  }
+  render() {
+    const { error: t, state: e, selectedUtilityNetwork: i } = this, r = e === "error" && t ? this.#a(t, !1, "exclamation-mark-triangle") : void 0;
+    return !r && !i?.loaded && !i?.loadError ? this.#l() : e === "error" && r && !this._utilityNetworks?.length ? r : this.#d(r);
+  }
+}
+c("arcgis-utility-network-picker", u);
+export {
+  u as ArcgisUtilityNetworkPicker
+};

package/dist/components/arcgis-utility-network-picker/index.d.ts

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