@arcgis/map-components 5.2.0-next.137 → 5.2.0-next.138

package/dist/components/arcgis-table-list/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as e } from "../../chunks/runtime.js";
 import t from "@arcgis/core/widgets/TableList.js";
 import { LitElement as i, createEvent as r } from "@arcgis/lumina";

package/dist/components/arcgis-table-list-next/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as C } from "../../chunks/runtime.js";
 import { repeat as $ } from "lit/directives/repeat.js";
 import { keyed as _ } from "lit/directives/keyed.js";

package/dist/components/arcgis-template-image/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as h } from "../../chunks/runtime.js";
 import p from "@arcgis/core/Graphic.js";
 import { css as g, html as s } from "lit";

package/dist/components/arcgis-time-bar/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as q } from "../../chunks/runtime.js";
 import { css as H, html as p, nothing as _ } from "lit";
 import j from "@arcgis/core/core/Accessor.js";

package/dist/components/arcgis-time-bar-date/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as l } from "../../chunks/runtime.js";
 import { css as n, html as i } from "lit";
 import { LitElement as c, safeClassMap as r } from "@arcgis/lumina";

package/dist/components/arcgis-time-bar-extent/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as n } from "../../chunks/runtime.js";
 import { css as o, html as a } from "lit";
 import { LitElement as d, safeClassMap as l } from "@arcgis/lumina";

package/dist/components/arcgis-time-bar-settings/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as _ } from "../../chunks/runtime.js";
 import { css as I, html as n } from "lit";
 import h from "@arcgis/core/time/TimeExtent.js";

package/dist/components/arcgis-time-bar-slider/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as d } from "../../chunks/runtime.js";
 import { css as m, html as r } from "lit";
 import { ref as u } from "lit/directives/ref.js";

package/dist/components/arcgis-time-of-day-slider/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as k } from "../../chunks/runtime.js";
 import { keyed as f } from "lit/directives/keyed.js";
 import { substitute as v } from "@arcgis/core/intl.js";

package/dist/components/arcgis-time-slider/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as i } from "../../chunks/runtime.js";
 import { usePropertyChange as r } from "@arcgis/lumina/controllers";
 import { reEmitEvent as t } from "@arcgis/lumina-toolkit/reEmitEvent";

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

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c } from "../../chunks/runtime.js";
 import { substitute as r } from "@arcgis/core/intl.js";
 import { LitElement as p, createEvent as d, nothing as i } from "@arcgis/lumina";

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

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as i } from "../../chunks/runtime.js";
 import { css as o, html as t } from "lit";
 import { usePropertyChange as c } from "@arcgis/lumina/controllers";

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

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/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";

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

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as m } from "../../chunks/runtime.js";
 import { css as f, html as d } from "lit";
 import { watch as p } from "@arcgis/core/core/reactiveUtils.js";

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

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 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";

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 {
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
+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: i = [],
+      options: c = [],
       // when running in the CI, sometimes this ends up being `undefined`, for unclear reasons.
       selectLabel: s,
-      value: l,
-      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(i, (e) => e, (e) => a`<calcite-option .selected=${e === l} .value=${e}>${g(e) ? t.systems?.[e] : t.units?.[e]}</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,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as u } from "../../chunks/runtime.js";
 import { html as o } from "lit";
 import { keyed as l } from "lit/directives/keyed.js";

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

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as a } from "../../chunks/runtime.js";
 import n from "@arcgis/core/widgets/UtilityNetworkAssociations.js";
 import { LitElement as c, createEvent as l } from "@arcgis/lumina";

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

@@ -9,7 +9,6 @@ import type { T9nMeta } from "@arcgis/lumina/controllers";
  * It allows users to select utility networks from the map.
  *
  * @since 5.2
- * @internal
  */
 export abstract class ArcgisUtilityNetworkPicker extends LitElement {
   /** @internal */
@@ -38,6 +37,21 @@ export abstract class ArcgisUtilityNetworkPicker extends LitElement {
   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";

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

@@ -1,20 +1,20 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/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 w } from "@arcgis/lumina/controllers";
+import { usePropertyChange as g } from "@arcgis/lumina/controllers";
 import { log as o } from "@arcgis/toolkit/log";
-import { css as y, html as s } from "lit";
+import { css as w, html as s } from "lit";
 import { l } from "../../chunks/async-utils.js";
-import { u as g } from "../../chunks/useT9n.js";
-const k = y`: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)}`;
+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 = g({ blocking: !0 }), this.hideErrors = !1, this.hideLoader = !1, this.state = "loading", this.arcgisPropertyChange = w()("selectedUtilityNetwork", "state"), this.arcgisError = m();
+    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, hideErrors: 5, hideLoader: 5, state: 1, error: 1, selectedUtilityNetwork: 0, heading: 1 };
+    this.properties = { _utilityNetworks: 16, view: 0, messageOverrides: 0, hideErrors: 5, hideLoader: 5, state: 1, error: 1, selectedUtilityNetwork: 0, heading: 1 };
   }
   static {
     this.styles = k;

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

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as t } from "../../chunks/runtime.js";
 import { usePropertyChange as i } from "@arcgis/lumina/controllers";
 import { reEmitEvent as e } from "@arcgis/lumina-toolkit/reEmitEvent";

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

@@ -11,7 +11,6 @@ import type { T9nMeta } from "@arcgis/lumina/controllers";
 /**
  * Trace result item for displaying [aggregated geometry](https://developers.arcgis.com/javascript/latest/references/core/rest/networks/support/TraceResult/#aggregatedGeometry) results from a trace.
  *
- * @internal
  * @since 5.2
  * @see [Result types](https://doc.esri.com/en/arcgis-pro/latest/help/data/utility-network/configure-a-trace.html#DA5)
  */
@@ -51,12 +50,6 @@ export abstract class ArcgisUtilityNetworkTraceAggregatedGeometryResultItem exte
    * 
    */
   accessor autoDestroyDisabled: boolean;
-  /**
-   * The size of the aggregated geometry graphics to render, in points.
-   *
-   * @default 12
-   */
-  accessor defaultSelectionSize: number;
   /**
    * Whether the component emits event [@arcgisResultReady](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-utility-network-trace-aggregated-geometry-result-item/#event-arcgisResultReady).
    * This property is always `true` for [arcgis-utility-network-trace-aggregated-geometry-result-item](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-utility-network-trace-aggregated-geometry-result-item/).
@@ -86,24 +79,37 @@ export abstract class ArcgisUtilityNetworkTraceAggregatedGeometryResultItem exte
    */
   accessor hideGraphics: boolean;
   /**
-   * Whether the component has finished adding aggregated geometry graphics to the map.
+   * Replace localized message strings with your own strings.
    *
-   * @default "ready"
+   * _**Note**: Individual message keys may change between releases._
    */
-  get state(): UtilityNetworkTraceResultItemState;
+  accessor messageOverrides: {
+      headings?: { setColor?: string | undefined; } | undefined;
+      labels?: {
+          aggregatedGeometryGraphicsColor?: string | undefined;
+          showGraphicsToggle?: string | undefined;
+      } | undefined;
+      showGraphics?: string | undefined;
+  };
   /**
-   * The trace result containing the aggregated geometry result to render graphics for.
+   * The size of the aggregated geometry graphics to render, in points.
    *
-   * @required
+   * @default 12
    */
-  accessor traceResult: TraceResult | undefined;
+  accessor selectionSize: number;
+  /**
+   * Whether the component has finished adding aggregated geometry graphics to the map.
+   *
+   * @default "ready"
+   */
+  get state(): UtilityNetworkTraceResultItemState;
+  /** The trace result containing the aggregated geometry result to render graphics for. */
+  get traceResult(): TraceResult | undefined;
   /**
    * The view associated with the component.
    * > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-utility-network-trace-aggregated-geometry-result-item component will be associated with a map or scene component rather than using the `view` property.
-   *
-   * @required
    */
-  accessor view: MapView | undefined;
+  get view(): MapView | undefined;
   /**
    * Removes the aggregated geometry graphics from the
    * [graphicsLayer](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-utility-network-trace-aggregated-geometry-result-item/#graphicsLayer).
@@ -112,7 +118,8 @@ export abstract class ArcgisUtilityNetworkTraceAggregatedGeometryResultItem exte
   clearResult(): void;
   /** Permanently destroy the component. */
   destroy(): Promise<void>;
-  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "defaultSelectionSize" | "hideGraphics" | "geometryGraphics" | "graphicsColor" | "state"; }>;
+  /** 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: "hideGraphics" | "geometryGraphics" | "graphicsColor" | "selectionSize" | "state"; }>;
   /**
    * Fires when the component finishes processing the aggregated geometry results.
    *

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

@@ -1,82 +1,129 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as n } from "../../chunks/runtime.js";
-import l from "@arcgis/core/Color.js";
-import m from "@arcgis/core/Graphic.js";
-import d from "@arcgis/core/layers/GraphicsLayer.js";
-import y from "@arcgis/core/symbols/SimpleFillSymbol.js";
-import u from "@arcgis/core/symbols/SimpleLineSymbol.js";
-import f from "@arcgis/core/symbols/SimpleMarkerSymbol.js";
-import { LitElement as w, createEvent as G, nothing as v } from "@arcgis/lumina";
-import { usePropertyChange as b, bypassReadOnly as a } from "@arcgis/lumina/controllers";
-import { log as o, composeMissingPropertyMessage as h } from "@arcgis/toolkit/log";
-import { generateGuid as R } from "@arcgis/toolkit/string";
-import { css as L, html as g } from "lit";
-import { createRef as C, ref as S } from "lit/directives/ref.js";
-import { u as $ } from "../../chunks/useT9n.js";
-import { a as p, b as k } from "../../chunks/layer-utils.js";
-const x = L`.aggregated-geometry-container{display:flex;align-items:center;justify-content:space-between}.geometry-heading{margin:0 0 var(--calcite-spacing-xxs);font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size);color:var(--calcite-color-text-1)}`;
-class z extends w {
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
+import { c as d } from "../../chunks/runtime.js";
+import o from "@arcgis/core/Color.js";
+import y from "@arcgis/core/Graphic.js";
+import u from "@arcgis/core/layers/GraphicsLayer.js";
+import f from "@arcgis/core/symbols/SimpleFillSymbol.js";
+import w from "@arcgis/core/symbols/SimpleLineSymbol.js";
+import v from "@arcgis/core/symbols/SimpleMarkerSymbol.js";
+import { LitElement as G, createEvent as R, nothing as b } from "@arcgis/lumina";
+import { usePropertyChange as L, bypassReadOnly as r } from "@arcgis/lumina/controllers";
+import { log as h, composeMissingPropertyMessage as c } from "@arcgis/toolkit/log";
+import { generateGuid as C } from "@arcgis/toolkit/string";
+import { css as S, html as n } from "lit";
+import { createRef as $, ref as k } from "lit/directives/ref.js";
+import { u as T } from "../../chunks/useT9n.js";
+import { a as g, b as x } from "../../chunks/layer-utils.js";
+import { a as p } from "../../chunks/types.js";
+import { i as m } from "../../chunks/utils5.js";
+const E = S`.aggregated-geometry-container{display:flex;align-items:center;justify-content:space-between}.geometry-heading{margin:0 0 var(--calcite-spacing-xxs);font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size);color:var(--calcite-color-text-1)}`;
+class M extends G {
   constructor() {
-    super(...arguments), this._messages = $({ blocking: !0 }), this.#r = `aggregated-geometry-graphics-${R()}`, this.#e = C(), this.defaultSelectionSize = 12, this.emitsArcgisResultReady = !0, this.geometryGraphics = [], this.hideGraphics = !1, this.state = "ready", this.graphicsColor = new l([255, 255, 0, 0.6]), this.autoDestroyDisabled = !1, this.arcgisPropertyChange = b()("defaultSelectionSize", "hideGraphics", "geometryGraphics", "graphicsColor", "state"), this.arcgisResultReady = G();
+    super(...arguments), this._messages = T({ blocking: !0 }), this.#s = `aggregated-geometry-graphics-${C()}`, this.#e = $(), this.autoDestroyDisabled = !1, this.emitsArcgisResultReady = !0, this.geometryGraphics = [], this.graphicsColor = new o(p), this.hideGraphics = !1, this.selectionSize = 12, this.state = "ready", this.arcgisPropertyChange = L()("hideGraphics", "geometryGraphics", "graphicsColor", "selectionSize", "state"), this.arcgisResultReady = R();
   }
   static {
-    this.properties = { defaultSelectionSize: 9, emitsArcgisResultReady: 32, heading: 1, traceResult: 0, geometryGraphics: 32, hideGraphics: 5, state: 32, graphicsColor: 0, graphicsLayer: 0, view: 0, autoDestroyDisabled: 5 };
+    this.properties = { autoDestroyDisabled: 5, emitsArcgisResultReady: 32, geometryGraphics: 32, graphicsColor: [1, { converter: {
+      fromAttribute: (e) => o.fromString(e) ?? new o(p)
+    } }], graphicsLayer: 0, heading: 1, hideGraphics: 5, messageOverrides: 0, selectionSize: 9, state: 32, traceResult: 32, view: 32 };
   }
   static {
-    this.styles = x;
+    this.styles = E;
   }
-  #r;
+  #s;
   #t;
   #e;
+  get #a() {
+    const { parentElement: e } = this.el;
+    if (e && m(e))
+      return e;
+    const t = this.el.getRootNode();
+    if (t instanceof ShadowRoot && m(t.host))
+      return t.host;
+  }
   clearResult() {
     this.#e.value && (this.#e.value.open = !1);
     const { graphicsLayer: e } = this;
-    e && (e.removeMany(this.geometryGraphics), e === this.#t && (this.view?.map?.remove(e), this.graphicsLayer = void 0, this.#t = void 0)), a(() => this.geometryGraphics = []), a(() => this.state = "ready");
+    e && (e.removeMany(this.geometryGraphics), e === this.#t && (this.view?.map?.remove(e), this.graphicsLayer = void 0, this.#t = void 0)), r(() => this.geometryGraphics = []), r(() => this.state = "ready");
   }
   async destroy() {
-    this.clearResult(), await this.manager.destroy();
+    try {
+      this.clearResult();
+    } finally {
+      await this.manager.destroy();
+    }
   }
   connectedCallback() {
-    super.connectedCallback(), this.view && this.graphicsLayer && (p(this.view, this.graphicsLayer), this.arcgisResultReady.emit());
+    super.connectedCallback(), this.view && this.graphicsLayer && g(this.view, this.graphicsLayer);
   }
   load() {
-    this.traceResult && this.#i();
+    this.manager.onLifecycle(() => {
+      const e = this.#a;
+      if (!e) {
+        h("warn", this, "This component must be used as a child of `arcgis-utility-network-trace-results`.");
+        return;
+      }
+      const t = (i) => this.#h(i);
+      return e.addEventListener("arcgisPropertyChange", t), r(() => {
+        this.traceResult = e.traceResult, this.view = e.view;
+      }), () => {
+        e.removeEventListener("arcgisPropertyChange", t);
+      };
+    }), this.traceResult && this.#r();
   }
   willUpdate(e) {
-    if (e.has("traceResult") && this.#i(), e.has("view")) {
+    if (e.has("traceResult") && this.#r(), e.has("view")) {
       const t = e.get("view");
-      t?.map && this.graphicsLayer && t.map.remove(this.graphicsLayer), this.#i();
+      t?.map && this.graphicsLayer && t.map.remove(this.graphicsLayer), this.#r();
     }
-    e.has("hideGraphics") && this.#c(), e.has("graphicsColor") && this.#l();
+    e.has("graphicsLayer") && this.#p(e.get("graphicsLayer")), e.has("hideGraphics") && this.#g(), (e.has("graphicsColor") || e.has("selectionSize")) && this.#m();
   }
   loaded() {
-    this.traceResult && (this.traceResult.aggregatedGeometry || o("warn", this, h("traceResult.aggregatedGeometry")), this.view ? this.view.map || o("error", this, h("The property `view` was provided, but `view.map` is null. Cannot draw aggregated geometry.")) : o("error", this, h("view")));
+    this.traceResult && (this.traceResult.aggregatedGeometry || h("warn", this, c("traceResult.aggregatedGeometry")), this.view ? this.view.map || h("error", this, c("The property `view` was provided, but `view.map` is null. Cannot draw aggregated geometry.")) : h("error", this, c("view")));
+  }
+  #i() {
+    if (!this.graphicsLayer)
+      return;
+    const e = this.geometryGraphics.filter((t) => !this.graphicsLayer.graphics.includes(t));
+    this.graphicsLayer.addMany(e);
+  }
+  #h(e) {
+    if (e.target !== this.#a)
+      return;
+    const { target: t } = e;
+    switch (e.detail.name) {
+      case "traceResult":
+        r(() => this.traceResult = t.traceResult);
+        break;
+      case "view":
+        r(() => this.view = t.view);
+        break;
+    }
   }
-  #a(e) {
-    const { line: t, multipoint: i, polygon: r } = e;
-    a(() => {
-      this.geometryGraphics = [t, i, r].filter((s) => s != null).map((s) => this.#h(s));
+  #c(e) {
+    const { line: t, multipoint: i, polygon: s } = e;
+    r(() => {
+      this.geometryGraphics = [t, i, s].filter((a) => a != null).map((a) => this.#n(a));
     });
   }
-  #o(e) {
-    const t = this.#r, i = e.map?.findLayerById(t);
-    return i && k(i) ? i : new d({
+  #l(e) {
+    const t = this.#s, i = e.map?.findLayerById(t);
+    return i && x(i) ? i : new u({
       id: t,
       listMode: "hide",
       title: t
     });
   }
-  #h(e) {
-    return new m({
+  #n(e) {
+    return new y({
       geometry: e,
-      symbol: this.#s(e)
+      symbol: this.#o(e)
     });
   }
-  #s(e) {
-    const { defaultSelectionSize: t, graphicsColor: i } = this;
+  #o(e) {
+    const { selectionSize: t, graphicsColor: i } = this;
     switch (e.type) {
       case "multipoint":
-        return new f({
+        return new v({
           color: i,
           size: t,
           outline: {
@@ -85,7 +132,7 @@ class z extends w {
           }
         });
       case "polygon":
-        return new y({
+        return new f({
           color: i,
           outline: {
             color: i,
@@ -93,43 +140,46 @@ class z extends w {
           }
         });
       case "polyline":
-        return new u({
+        return new w({
           color: i,
           width: t
         });
     }
   }
-  #c() {
-    this.hideGraphics ? (this.graphicsLayer?.removeAll(), this.#e.value?.open && (this.#e.value.open = !1)) : this.graphicsLayer?.addMany(this.geometryGraphics);
+  #g() {
+    this.hideGraphics ? (this.graphicsLayer?.removeMany(this.geometryGraphics), this.#e.value?.open && (this.#e.value.open = !1)) : this.#i();
   }
-  #i() {
+  #p(e) {
+    e?.removeMany(this.geometryGraphics), this.hideGraphics || this.#i();
+  }
+  #r() {
     this.clearResult();
     const e = () => {
-      a(() => this.state = "ready"), this.arcgisResultReady.emit();
+      r(() => this.state = "ready"), this.arcgisResultReady.emit();
     };
     if (!this.traceResult?.aggregatedGeometry || !this.view?.map) {
       e();
       return;
     }
-    a(() => this.state = "loading"), this.graphicsLayer || (this.graphicsLayer = this.#o(this.view), this.#t = this.graphicsLayer, p(this.view, this.graphicsLayer)), this.#a(this.traceResult.aggregatedGeometry), this.hideGraphics || this.graphicsLayer.addMany(this.geometryGraphics), e();
+    r(() => this.state = "loading"), this.#c(this.traceResult.aggregatedGeometry), this.graphicsLayer || (this.graphicsLayer = this.#l(this.view), this.#t = this.graphicsLayer, g(this.view, this.graphicsLayer)), this.hideGraphics || this.#i(), e();
   }
-  #l() {
+  #m() {
     this.geometryGraphics.forEach((e) => {
       const t = e.geometry;
-      e.symbol = this.#s(t);
+      e.symbol = this.#o(t);
     });
   }
   render() {
     if (!this.traceResult?.aggregatedGeometry)
       return null;
-    const { graphicsColor: e, heading: t, hideGraphics: i, _messages: r } = this;
-    return g`${t && g`<div class="geometry-heading">${t}</div>` || ""}<div class="aggregated-geometry-container"><calcite-switch .checked=${!i} .label=${r.labels.showGraphicsToggle} label-text-end=${r.showGraphics ?? v} @calciteSwitchChange=${() => this.hideGraphics = !this.hideGraphics}></calcite-switch><calcite-swatch .color=${e.toCss()} .disabled=${i} id=geometry-color-swatch .label=${r.labels.aggregatedGeometryGraphicsColor}></calcite-swatch><calcite-popover closable .heading=${r.headings.setColor} .label=${r.headings.setColor} reference-element=geometry-color-swatch ${S(this.#e)}><calcite-color-picker alpha-channel channels-disabled clearable .disabled=${i} hex-disabled saved-disabled .value=${e.toCss(!0)} @calciteColorPickerChange=${(s) => {
-      const c = s.target.value;
-      c && (this.graphicsColor = new l(c));
+    const { graphicsColor: e, heading: t, hideGraphics: i, _messages: s } = this;
+    return n`${t && n`<div class="geometry-heading">${t}</div>` || ""}<div class="aggregated-geometry-container"><calcite-switch .checked=${!i} .label=${s.labels.showGraphicsToggle} label-text-end=${s.showGraphics ?? b} @calciteSwitchChange=${() => this.hideGraphics = !this.hideGraphics}></calcite-switch><calcite-swatch .color=${e.toCss()} .disabled=${i} id=geometry-color-swatch .label=${s.labels.aggregatedGeometryGraphicsColor}></calcite-swatch><calcite-popover closable .heading=${s.headings.setColor} .label=${s.headings.setColor} reference-element=geometry-color-swatch ${k(this.#e)}><calcite-color-picker alpha-channel channels-disabled clearable .disabled=${i} hex-disabled saved-disabled .value=${e.toCss(!0)} @calciteColorPickerChange=${(a) => {
+      const l = a.target.value;
+      l && (this.graphicsColor = new o(l));
     }}></calcite-color-picker></calcite-popover></div>`;
   }
 }
-n("arcgis-utility-network-trace-aggregated-geometry-result-item", z);
+d("arcgis-utility-network-trace-aggregated-geometry-result-item", M);
 export {
-  z as ArcgisUtilityNetworkTraceAggregatedGeometryResultItem
+  M as ArcgisUtilityNetworkTraceAggregatedGeometryResultItem
 };