@arcgis/map-components 5.2.0-next.7 → 5.2.0-next.71

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

@@ -0,0 +1,150 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as u } from "../../chunks/runtime.js";
+import { css as h, html as a } from "lit";
+import c from "@arcgis/core/time/TimeExtent.js";
+import { LitElement as v, nothing as f, safeClassMap as g } from "@arcgis/lumina";
+import { createRef as o, ref as d } from "lit/directives/ref.js";
+import { m as w } from "../../chunks/handle.js";
+import { watch as x } from "@arcgis/core/core/reactiveUtils.js";
+const p = h`:host{background-color:var(--calcite-color-surface-2);block-size:var(--calcite-size-fixed-xxxl);color:var(--calcite-color-text-1);display:flex;flex:1 0 auto;font-family:var(--calcite-font-family);font-size:var(--calcite-font-size-sm);inline-size:auto}.root{align-items:center;block-size:100%;display:flex;inline-size:100%}slot[name=max],slot[name=min]{display:flex}.slider{--labels-container-width: 100%;flex:1 1 auto;min-inline-size:calc(var(--calcite-spacing-md) * 15)}.slider--has-ticks{margin-top:calc(var(--calcite-spacing-md) * -1)}.hidden,.max-date,.min-date{flex:0 0 auto}.hidden{inline-size:0}.max-date,.min-date{inline-size:calc(var(--calcite-size-md) * 3.125)}.popover{padding:var(--calcite-spacing-xxs) var(--calcite-spacing-xs) var(--calcite-spacing-xs)}.ticks-container{flex:1;position:relative;width:100%}.major-ticks,.minor-ticks{inset:0;position:absolute}.major-ticks,.minor-ticks{--arcgis-ticks-tick-transform: unset;--arcgis-ticks-tick-width: var(--calcite-size-px)}.minor-ticks{--arcgis-ticks-tick-length: var(--calcite-size-fixed-xxs)}.major-ticks{--arcgis-ticks-font-weight: var(--calcite-font-weight-normal)}.slider.slider--out-of-range{--arcgis-internal-slider-handle-color: var(--calcite-color-status-danger);--arcgis-internal-slider-track-range-background-color: var(--calcite-color-status-danger)}`;
+class T extends v {
+  constructor() {
+    super(...arguments), this.#e = new ResizeObserver(() => {
+      const e = this.#r.value?.clientWidth;
+      e && (this._sliderWidth = e);
+    }), this.#n = 3, this.#a = o(), this.#r = o(), this._sliderWidth = 100, this.autoDestroyDisabled = !1, this.showMax = !1, this.showMin = !1, this.showTicks = !1, this.showTimeExtentPopover = !1;
+  }
+  static {
+    this.properties = { _activeValue: 16, _sliderFillPlacement: 16, _sliderWidth: 16, _timeExtentEpochValues: 16, activeValue: 32, autoDestroyDisabled: 5, showMax: 5, showMin: 5, showTicks: 5, showTimeExtentPopover: 5, viewModel: 0 };
+  }
+  static {
+    this.styles = p;
+  }
+  #e;
+  #t;
+  #i;
+  #s;
+  #n;
+  #a;
+  #r;
+  get _sliderFillPlacement() {
+    switch (this.viewModel?.mode) {
+      case "cumulative-from-end":
+        return "end";
+      case "cumulative-from-start":
+        return "start";
+      case "instant":
+        return "none";
+      default:
+        return;
+    }
+  }
+  get _timeExtentEpochValues() {
+    const { viewModel: e } = this;
+    if (!e)
+      return;
+    const { timeExtent: t, fullTimeExtent: i } = e;
+    if (!t || !i)
+      return;
+    const { start: s, end: r } = t, { start: l, end: n } = i;
+    if (!(!l || !n))
+      switch (e.mode) {
+        case "cumulative-from-end":
+        case "instant":
+          return s ? s.getTime() < l.getTime() ? [l.getTime()] : s.getTime() > n.getTime() ? [n.getTime()] : [s.getTime()] : void 0;
+        case "cumulative-from-start":
+          return r ? r.getTime() < l.getTime() ? [l.getTime()] : r.getTime() > n.getTime() ? [n.getTime()] : [r.getTime()] : void 0;
+        case "time-window":
+          return s && r ? [s.getTime(), r.getTime()] : void 0;
+      }
+  }
+  get activeValue() {
+    switch (this._activeValue) {
+      case void 0:
+        return;
+      case "all":
+        return this.viewModel?.timeExtent;
+      default:
+        return new Date(this._activeValue);
+    }
+  }
+  async destroy() {
+    await this.manager.destroy();
+  }
+  async loaded() {
+    this.manager.onLifecycle(() => [
+      x(() => this.#a.value, (e) => {
+        this.#e.disconnect(), e && this.#e.observe(e);
+      }, { initial: !0 }),
+      w(() => {
+        this.#e.disconnect();
+      })
+    ]);
+  }
+  #l(e, t) {
+    const { viewModel: i } = this;
+    if (!i)
+      return;
+    const { start: s, end: r } = e;
+    if (!s || !r)
+      return;
+    const n = (r.getTime() - s.getTime()) / t;
+    return i.tickFormats.find(({ duration: m }) => m > this.#n * n) ?? i.tickFormats.at(-1);
+  }
+  #c(e) {
+    this._activeValue = e.target.activeValue;
+  }
+  #o(e) {
+    const { viewModel: t } = this, i = t?.mode;
+    i && (t.timeExtent = this.#d(e.target.values, i), this._activeValue = e.target.activeValue);
+  }
+  #d([e, t], i) {
+    switch (i) {
+      case "cumulative-from-end":
+        return new c({ start: new Date(e), end: null });
+      case "cumulative-from-start":
+        return new c({ start: null, end: new Date(e) });
+      case "instant":
+        return new c({ start: new Date(e), end: new Date(e) });
+      case "time-window":
+        return new c({ start: new Date(e), end: new Date(t ?? e) });
+    }
+  }
+  render() {
+    return a`<div class="root" ${d(this.#a)}>${this.#u()}${this.#f()}${this.#m()}</div>`;
+  }
+  #m() {
+    return this.showMax ? a`<slot name=max><arcgis-time-bar-date class="max-date" .date=${this.viewModel?.fullTimeExtent?.end} .viewModel=${this.viewModel}></arcgis-time-bar-date></slot>` : a`<div class="hidden"></div>`;
+  }
+  #u() {
+    return this.showMin ? a`<slot name=min><arcgis-time-bar-date class="min-date" .date=${this.viewModel?.fullTimeExtent?.start} .viewModel=${this.viewModel}></arcgis-time-bar-date></slot>` : a`<div class="hidden"></div>`;
+  }
+  #h() {
+    return this.showTimeExtentPopover ? a`<div class="popover" slot=popover><slot name=popover>${this.#v()}</slot></div>` : null;
+  }
+  #v() {
+    return this.activeValue ? this.activeValue instanceof Date ? a`<arcgis-time-bar-date .date=${this.activeValue} .viewModel=${this.viewModel}></arcgis-time-bar-date>` : a`<arcgis-time-bar-extent .viewModel=${this.viewModel}></arcgis-time-bar-extent>` : null;
+  }
+  #f() {
+    const { viewModel: e } = this;
+    if (!e?.fullTimeExtent?.start || !e?.fullTimeExtent?.end || !this._sliderWidth)
+      return null;
+    const t = this.#l(e.fullTimeExtent, this._sliderWidth);
+    if (!t)
+      return null;
+    (!this.#t || !this.#s || !this.#i || this.#t !== t) && (this.#t = t, this.#s = e.getTickValues(t.minor), this.#i = e.getTickValues(t.major), e.majorTickFormat = t.format);
+    const i = e.fullTimeExtent.start.getTime(), s = e.fullTimeExtent.end.getTime();
+    return a`<arcgis-slider allow-values-overlap class=${g({
+      slider: !0,
+      "slider--has-ticks": this.showTicks,
+      "slider--out-of-range": e.isOutOfRange
+    })} .disabled=${!e.interactive} fill-placement=${this._sliderFillPlacement ?? f} .max=${s} .min=${i} @arcgisActiveValueChange=${this.#c} @arcgisInput=${this.#o} precision=0 .steps=${e.effectiveStopsEpoch} .values=${this._timeExtentEpochValues} ${d(this.#r)}>${this.#h()}${this.#g(e, i, s)}</arcgis-slider>`;
+  }
+  #g(e, t, i) {
+    return this.showTicks ? a`<div slot=content-end class="ticks-container"><arcgis-ticks class="minor-ticks" .max=${i} .min=${t} mode=value .values=${this.#s}></arcgis-ticks><arcgis-ticks class="major-ticks" .labelFormatter=${e.majorTickFormatter} .max=${i} .min=${t} mode=value show-labels .values=${this.#i}></arcgis-ticks></div>` : null;
+  }
+}
+u("arcgis-time-bar-slider", T);
+export {
+  T as ArcgisTimeBarSlider
+};

package/dist/components/arcgis-time-bar-slider/index.d.ts

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

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

@@ -0,0 +1,5 @@
+import "../arcgis-time-bar-date/index.js";
+import "../arcgis-time-bar-extent/index.js";
+import "@arcgis/common-components/components/arcgis-slider";
+import "@arcgis/common-components/components/arcgis-ticks";
+export * from "./customElement.js";

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

@@ -86,7 +86,7 @@ class j extends T {
   }
   render() {
     const e = this.mode === "single" && !this.disabled;
-    return f(this.messages._lang, m`<arcgis-slider .ariaLabel=${this.label} class=${_({ "wrap-labels": this._shouldWrapLabels })} .disabled=${this.disabled} fill-placement=none .labelFormatter=${this._sliderLabelFormatter} layout=horizontal min=0 .max=${c} .steps=${this.steps ?? 1} .valueLabelsDisplay=${this.mode === "range" ? "hidden" : "always"} value-labels-placement=start .values=${this._values} @arcgisInput=${({ currentTarget: { values: t } }) => {
+    return f(this.messages._lang, m`<arcgis-slider .ariaLabel=${this.label} class=${_({ "wrap-labels": this._shouldWrapLabels })} .disabled=${this.disabled} .fillPlacement=${this.mode === "range" ? "between" : "none"} .labelFormatter=${this._sliderLabelFormatter} layout=horizontal min=0 .max=${c} .steps=${this.steps ?? 1} .valueLabelsDisplay=${this.mode === "range" ? "hidden" : "always"} value-labels-placement=start .values=${this._values} @arcgisInput=${({ currentTarget: { values: t } }) => {
       this.mode === "single" ? this._setStartTime(t[0]) : this._setRange(t[0], t[1]);
     }}>${this.mode === "range" ? this._renderTimeRange() : void 0}<div class="ticks-container" slot=content-end><arcgis-ticks class="main-ticks" .interactive=${e} .labelFormatter=${this._tickLabelFormatter} layout=horizontal min=0 .max=${c} mode=value show-labels .values=${p} @arcgisTickClick=${(t) => this._setStartTime(t.detail.value)}></arcgis-ticks><arcgis-ticks class="secondary-ticks" layout=horizontal min=0 .max=${c} mode=value .values=${I} @arcgisTickClick=${(t) => this._setStartTime(t.detail.value)}></arcgis-ticks></div></arcgis-slider>`);
   }

package/dist/components/arcgis-time-slider/customElement.d.ts

@@ -19,7 +19,7 @@ import type { TickConfig } from "@arcgis/core/widgets/Slider/types.js";
 export abstract class ArcgisTimeSlider extends LitElement {
   /**
    * Defines actions that will appear in a menu when the user clicks the ellipsis button
-   * ![timeSlider-actions-menu](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/ellipsis.png) in the component. The
+   * ![timeSlider-actions-menu](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/ellipsis.avif) in the component. The
    * ellipsis button will not display if this property is `null` or if the collection is empty.
    * Each [Action](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/types/#Action) is defined with a unique id, a title,
    * and an icon.
@@ -28,7 +28,7 @@ export abstract class ArcgisTimeSlider extends LitElement {
    * can be used to execute custom code such as setting the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) to a specific date or copying the
    * timeExtent to the browser's clipboard.
    *
-   * [![widgets-timeSlider-actions](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/widgets-timeslider-actions.png)](https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-timeslider-offset)
+   * [![widgets-timeSlider-actions](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/widgets-timeslider-actions.avif)](https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-timeslider-offset)
    *
    * @since 4.21
    * @see [Sample - TimeSlider with offset](https://developers.arcgis.com/javascript/latest/sample-code/widgets-timeslider-offset/)
@@ -188,10 +188,10 @@ export abstract class ArcgisTimeSlider extends LitElement {
    *
    * Possible Values       | Description   | Example |
    * ----------------------|-------------- | ------- |
-   * instant               | The slider will show temporal data that falls on a single instance in time. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` and `end` dates to same date: `{start: sameDate, end: sameDate}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-instance.png"> |
-   * time-window           | The slider will show temporal data that falls within a given time range. This is the default. Set [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` and `date` properties to desired dates. | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-time-window.png"> |
-   * cumulative-from-start | Similar to `time-window` with the start time is always pinned to the start of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` date to `null` and set `end` date to a desired date: `{start: null, end: date}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-start.png"> |
-   * cumulative-from-end   | Also, similar to the `time-window` with the end time pinned to the end of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` date to a desired date and set `end` date to `null`: `{start: date, end: null}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-end.png"> |
+   * instant               | The slider will show temporal data that falls on a single instance in time. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` and `end` dates to same date: `{start: sameDate, end: sameDate}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-instance.avif"> |
+   * time-window           | The slider will show temporal data that falls within a given time range. This is the default. Set [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` and `date` properties to desired dates. | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-time-window.avif"> |
+   * cumulative-from-start | Similar to `time-window` with the start time is always pinned to the start of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` date to `null` and set `end` date to a desired date: `{start: null, end: date}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-start.avif"> |
+   * cumulative-from-end   | Also, similar to the `time-window` with the end time pinned to the end of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` date to a desired date and set `end` date to `null`: `{start: date, end: null}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-end.avif"> |
    *
    * @default "time-window"
    * @see [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent)
@@ -448,8 +448,8 @@ export abstract class ArcgisTimeSlider extends LitElement {
    */
   accessor timeZone: string;
   /**
-   * 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-slider 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-slider component will be associated with a map or scene component rather than using the `view` property.
    *
    * @example
    * ```js

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

@@ -61,8 +61,8 @@ 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. */

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

@@ -15,7 +15,7 @@ import type { Button as Button } from "@esri/calcite-components/components/calci
  * The view rotates based on device heading, and the default heading symbol will display
  * when speed is greater than zero and the browser provides heading information.
  *
- * This component uses the browser's [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) which is only available in [secure contexts](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts), such as HTTPS.
+ * This component uses the browser's [Geolocation API](https://developer.mozilla.org/docs/Web/API/Geolocation_API) which is only available in [secure contexts](https://developer.mozilla.org/docs/Web/Security/Defenses/Secure_Contexts), such as HTTPS.
  * `localhost` is considered "potentially secure" and can be used for testing.
  *
  * > [!WARNING]
@@ -186,7 +186,7 @@ export abstract class ArcgisTrack extends LitElement {
   accessor referenceElement: ArcgisReferenceElement | string | undefined;
   /**
    * Indicates whether the component will automatically rotate to the device heading based on
-   * the Geolocation APIs [`GeolocationCoordinates.heading`](https://developer.mozilla.org/en-US/docs/Web/API/GeolocationCoordinates/heading)
+   * the Geolocation APIs [`GeolocationCoordinates.heading`](https://developer.mozilla.org/docs/Web/API/GeolocationCoordinates/heading)
    * property. The map will not rotate if the speed is `0`,
    * or if the device is unable to provide heading information.
    *
@@ -219,8 +219,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;
   /**

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();
@@ -29,11 +29,11 @@ class p extends m {
       arcgisUnitSelectChange: c
     } = 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>`;
+      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>`)}${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

@@ -22,15 +22,15 @@ class y extends m {
   render() {
     const {
       messages: t,
-      options: l = [],
+      options: i = [],
       // when running in the CI, sometimes this ends up being `undefined`, for unclear reasons.
       selectLabel: s,
-      value: i,
+      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(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>`;
+    }} .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>`;
   }
 }
 r("arcgis-unit-select", y);

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

@@ -9,9 +9,7 @@ import type { T9nMeta } from "@arcgis/lumina/controllers";
  * This is a sub-component used by the **ArcgisUtilityNetworkTraceAnalysis** component.
  *
  * This sub-component renders the aggregated geometry from a `TraceResult` on a view.
- * The component does not project the geometry on the client.
  * This sub-component also renders a "Show graphics" toggle which shows or hides the aggregated geometry graphics.
- *
  * The user can specify a color to render the aggregated geometry graphics in.
  *
  * The map layer with the aggregated geometry graphics is removed on component disconnect.

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

@@ -1,106 +1,109 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as m } from "../../chunks/runtime.js";
-import p from "@arcgis/core/Color.js";
-import l from "@arcgis/core/Graphic.js";
-import g from "@arcgis/core/layers/GraphicsLayer.js";
-import y from "@arcgis/core/symbols/SimpleFillSymbol.js";
-import n from "@arcgis/core/symbols/SimpleLineSymbol.js";
-import d from "@arcgis/core/symbols/SimpleMarkerSymbol.js";
-import { LitElement as w, createEvent as _, nothing as f } from "@arcgis/lumina";
-import { log as s, composeMissingPropertyMessage as a } from "@arcgis/toolkit/log";
-import { css as G, html as u } from "lit";
-import { u as L } from "../../chunks/useT9n.js";
-import { a as v, b as o } from "../../chunks/layer-utils.js";
-const b = G`.loader-container{display:flex;justify-content:center;padding-bottom:var(--calcite-spacing-md)}`, h = 12;
-class S extends w {
+import { c as l } from "../../chunks/runtime.js";
+import c from "@arcgis/core/Color.js";
+import p from "@arcgis/core/Graphic.js";
+import n from "@arcgis/core/layers/GraphicsLayer.js";
+import g from "@arcgis/core/symbols/SimpleFillSymbol.js";
+import d from "@arcgis/core/symbols/SimpleLineSymbol.js";
+import y from "@arcgis/core/symbols/SimpleMarkerSymbol.js";
+import { LitElement as w, createEvent as f, nothing as u } from "@arcgis/lumina";
+import { log as r, composeMissingPropertyMessage as o } from "@arcgis/toolkit/log";
+import { html as G } from "lit";
+import { u as v } from "../../chunks/useT9n.js";
+import { a as h, i as b } from "../../chunks/layer-utils.js";
+const a = 12;
+class C extends w {
   constructor() {
-    super(...arguments), this._graphicsLayerName = "arcgis-utility-network-aggregated-geometry-graphics", this._messages = L({ blocking: !0 }), this._graphics = [], this._addAggregatedGeometryToView = () => {
-      const e = this.geometry, { line: i, multipoint: r, polygon: c } = e;
-      this._graphics = [i, r, c].filter((t) => t != null).map((t) => this._makeGraphicFromGeometry(t)), this._graphicsLayer.addMany(this._graphics);
-    }, this._createGraphicsLayer = () => {
-      const e = this.view.map, i = this._graphicsLayerName, r = e.findLayerById(i);
-      if (r && v(r)) {
-        this._graphicsLayer = r;
-        return;
-      }
-      this._graphicsLayer = new g({
-        id: i,
-        listMode: "hide",
-        title: i
-      }), o(this.view, this._graphicsLayer);
-    }, this.hideGraphics = !1, this.graphicsColor = new p([255, 255, 0, 0.6]), this.autoDestroyDisabled = !1, this.arcgisHideGraphicsChange = _();
+    super(...arguments), this._messages = v({ blocking: !0 }), this.#t = "arcgis-utility-network-aggregated-geometry-graphics", this.#i = [], this.hideGraphics = !1, this.graphicsColor = new c([255, 255, 0, 0.6]), this.autoDestroyDisabled = !1, this.arcgisHideGraphicsChange = f();
   }
   static {
     this.properties = { geometry: 0, hideGraphics: 5, graphicsColor: 0, view: 0, autoDestroyDisabled: 5 };
   }
-  static {
-    this.styles = b;
-  }
+  #e;
+  #t;
+  #i;
   async destroy() {
-    this.view?.map && this._graphicsLayer && this.view.map.remove(this._graphicsLayer), await this.manager.destroy();
+    this.view?.map && this.#e && this.view.map.remove(this.#e), await this.manager.destroy();
   }
   connectedCallback() {
-    super.connectedCallback(), this.view && this._graphicsLayer && o(this.view, this._graphicsLayer);
+    super.connectedCallback(), this.view && this.#e && h(this.view, this.#e);
   }
   load() {
-    !this.geometry || !this.view?.map || this._createGraphicsLayer();
+    !this.geometry || !this.view?.map || this.#r();
   }
   willUpdate(e) {
-    if (e.has("graphicsColor") && this._updateGraphicSymbols(), e.has("geometry") && (this._graphicsLayer?.removeAll(), this._addAggregatedGeometryToView()), e.has("view")) {
+    if (e.has("graphicsColor") && this.#m(), e.has("geometry") && (this.#e?.removeAll(), this.#s()), e.has("view")) {
       const i = e.get("view");
-      i?.map && this._graphicsLayer && (i.map.remove(this._graphicsLayer), this._createGraphicsLayer(), this._addAggregatedGeometryToView());
+      i?.map && this.#e && (i.map.remove(this.#e), this.#r(), this.#s());
     }
   }
   loaded() {
-    this.geometry || s("error", this, a("geometry")), this.view ? this.view.map || s("error", this, a("The property `view` was provided, but `view.map` is null. Cannot draw aggregated geometry.")) : s("error", this, a("view"));
+    this.geometry || r("error", this, o("geometry")), this.view ? this.view.map || r("error", this, o("The property `view` was provided, but `view.map` is null. Cannot draw aggregated geometry.")) : r("error", this, o("view"));
+  }
+  #s() {
+    const e = this.geometry, { line: i, multipoint: t, polygon: m } = e;
+    this.#i = [i, t, m].filter((s) => s != null).map((s) => this.#h(s)), this.#e.addMany(this.#i);
+  }
+  #r() {
+    const e = this.view.map, i = this.#t, t = e.findLayerById(i);
+    if (t && b(t)) {
+      this.#e = t;
+      return;
+    }
+    this.#e = new n({
+      id: i,
+      listMode: "hide",
+      title: i
+    }), h(this.view, this.#e);
   }
-  _handleShowGraphicsChange() {
-    this.hideGraphics = !this.hideGraphics, this.hideGraphics ? this._graphicsLayer?.removeAll() : this._graphicsLayer?.addMany(this._graphics), this.arcgisHideGraphicsChange.emit(this.hideGraphics);
+  #a() {
+    this.hideGraphics = !this.hideGraphics, this.hideGraphics ? this.#e?.removeAll() : this.#e?.addMany(this.#i), this.arcgisHideGraphicsChange.emit(this.hideGraphics);
   }
-  _makeGraphicFromGeometry(e) {
-    return new l({
+  #h(e) {
+    return new p({
       geometry: e,
-      symbol: this._makeSymbolForGeometry(e)
+      symbol: this.#o(e)
     });
   }
-  _makeSymbolForGeometry(e) {
+  #o(e) {
     const i = this.graphicsColor;
     switch (e.type) {
       case "multipoint":
-        return new d({
+        return new y({
           color: i,
-          size: h,
+          size: a,
           outline: {
             color: i,
             width: 0
           }
         });
       case "polygon":
-        return new y({
+        return new g({
           color: i,
           outline: {
             color: i,
-            width: h
+            width: a
           }
         });
       case "polyline":
-        return new n({
+        return new d({
           color: i,
-          width: h
+          width: a
         });
     }
   }
-  _updateGraphicSymbols() {
-    this._graphicsLayer?.graphics.forEach((e) => {
+  #m() {
+    this.#e?.graphics.forEach((e) => {
       const i = e.geometry;
-      e.symbol = this._makeSymbolForGeometry(i);
+      e.symbol = this.#o(i);
     });
   }
   render() {
-    return u`<calcite-switch .checked=${!this.hideGraphics} .label=${this._messages.labels.showGraphicsToggle} label-text-end=${this._messages.showGraphics ?? f} @calciteSwitchChange=${this._handleShowGraphicsChange}></calcite-switch>`;
+    const { _messages: e } = this;
+    return G`<calcite-switch .checked=${!this.hideGraphics} .label=${e.labels.showGraphicsToggle} label-text-end=${e.showGraphics ?? u} @calciteSwitchChange=${this.#a}></calcite-switch>`;
   }
 }
-m("arcgis-utility-network-aggregated-geometry", S);
+l("arcgis-utility-network-aggregated-geometry", C);
 export {
-  S as ArcgisUtilityNetworkAggregatedGeometry
+  C as ArcgisUtilityNetworkAggregatedGeometry
 };

package/dist/components/arcgis-utility-network-aggregated-geometry-next/customElement.d.ts

@@ -0,0 +1,63 @@
+/// <reference path="../../index.d.ts" />
+import type Color from "@arcgis/core/Color.js";
+import type AggregatedGeometry from "@arcgis/core/rest/networks/support/AggregatedGeometry.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.
+ *
+ * This sub-component renders the aggregated geometry from a `TraceResult` on a view.
+ * This sub-component also renders a "Show graphics" toggle which shows or hides the aggregated geometry graphics.
+ * The user can specify a color to render the aggregated geometry graphics in.
+ *
+ * The map layer with the aggregated geometry graphics is removed on component disconnect.
+ * The graphics layer is added to the map again when reconnected.
+ *
+ * @since 5.0
+ * @internal
+ */
+export abstract class ArcgisUtilityNetworkAggregatedGeometryNext extends LitElement {
+  /** @internal */
+  protected _messages: {
+      labels: {
+          loadingDependencies: string;
+          showGraphicsToggle: string;
+      };
+      showGraphics: string;
+  } & T9nMeta<{
+      labels: {
+          loadingDependencies: string;
+          showGraphicsToggle: string;
+      };
+      showGraphics: string;
+  }>;
+  /**
+   * If true, the component will not be destroyed automatically when it is
+   * disconnected from the document. This is useful when you want to move the
+   * component to a different place on the page, or temporarily hide it. If this
+   * is set, make sure to call the [destroy()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-utility-network-aggregated-geometry-next/#destroy) method when you are done to
+   * prevent memory leaks.
+   *
+   * @default false
+   */
+  accessor autoDestroyDisabled: boolean;
+  /** @required */
+  accessor geometry: AggregatedGeometry | undefined;
+  /**
+   * The color used for the aggregated geometry graphics.
+   * Default value is #FFFF00.
+   */
+  accessor graphicsColor: Color;
+  /** @default false */
+  accessor hideGraphics: boolean;
+  /** @required */
+  accessor view: MapView | undefined;
+  /** Permanently destroy the component. */
+  destroy(): Promise<void>;
+  readonly arcgisHideGraphicsChange: import("@arcgis/lumina").TargetedEvent<this, boolean>;
+  readonly "@eventTypes": {
+    arcgisHideGraphicsChange: ArcgisUtilityNetworkAggregatedGeometryNext["arcgisHideGraphicsChange"]["detail"];
+  };
+}