@arcgis/map-components 5.0.0-next.161 → 5.0.0-next.163

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

@@ -1,7 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type Color from "@arcgis/core/Color.js";
-import type Graphic from "@arcgis/core/Graphic";
-import type MapView2 from "@arcgis/core/views/MapView.js";
+import type Graphic from "@arcgis/core/Graphic.js";
+import type MapView from "@arcgis/core/views/MapView.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { ArcgisReferenceElement } from "../types.js";
 import type { SelectStartPayload } from "../arcgis-utility-network-trace-location/customElement.js";
@@ -92,7 +92,7 @@ export abstract class ArcgisUtilityNetworkTraceAnalysis extends LitElement {
   /**
    * A function to run before trace location selection starts.
    *
-   * @experimental
+   * @internal
    * @example
    * ```js
    * const traceElement = document.querySelector("arcgis-utility-network-trace-analysis");
@@ -191,7 +191,7 @@ export abstract class ArcgisUtilityNetworkTraceAnalysis extends LitElement {
    *
    * @since 5.0
    */
-  accessor view: MapView2 | null | undefined;
+  accessor view: MapView | null | undefined;
   /** Permanently destroy the component. */
   destroy(): Promise<void>;
   /**
@@ -199,7 +199,6 @@ export abstract class ArcgisUtilityNetworkTraceAnalysis extends LitElement {
    * Event payload contains a boolean representing whether the aggregated geometry graphics are hidden.
    * If true, the user has hidden the graphics on the view's map.
    *
-   * @experimental
    * @example
    * ```js
    * const traceElement = document.querySelector("arcgis-utility-network-trace-analysis");
@@ -215,7 +214,7 @@ export abstract class ArcgisUtilityNetworkTraceAnalysis extends LitElement {
   /**
    * Fires when the user completes the selection of a trace location.
    *
-   * @experimental
+   * @internal
    * @example
    * ```js
    * const traceElement = document.querySelector("arcgis-utility-network-trace-analysis");
@@ -230,7 +229,7 @@ export abstract class ArcgisUtilityNetworkTraceAnalysis extends LitElement {
    * Event payload contains a callback method `cancelSelect` to cancel a selection in progress.
    * The event can also be prevented with `event.preventDefault()` to stop the selection.
    *
-   * @experimental
+   * @internal
    * @example
    * ```js
    * const traceElement = document.querySelector("arcgis-utility-network-trace-analysis");
@@ -255,7 +254,6 @@ export abstract class ArcgisUtilityNetworkTraceAnalysis extends LitElement {
   /**
    * Fires when the trace result is cleared from the results tab.
    *
-   * @experimental
    * @example
    * ```js
    * const traceElement = document.querySelector("arcgis-utility-network-trace-analysis");
@@ -269,7 +267,6 @@ export abstract class ArcgisUtilityNetworkTraceAnalysis extends LitElement {
    * Fires when the trace result features are ready.
    * Check property `traceResultFeatures` for the trace result features.
    *
-   * @experimental
    * @example
    * ```js
    * const traceElement = document.querySelector("arcgis-utility-network-trace-analysis");

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

@@ -3,7 +3,7 @@ import type NamedTraceConfiguration from "@arcgis/core/networks/support/NamedTra
 import type UNTraceConfiguration from "@arcgis/core/networks/support/UNTraceConfiguration.js";
 import type UtilityNetwork from "@arcgis/core/networks/UtilityNetwork.js";
 import type TraceLocation from "@arcgis/core/rest/networks/support/TraceLocation.js";
-import type MapView from "@arcgis/core/views/MapView";
+import type MapView from "@arcgis/core/views/MapView.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { ArcgisReferenceElement } from "../types.js";
 import type { UtilityNetworkTraceAnalysisDisplayMode } from "../arcgis-utility-network-trace-analysis/customElement.js";
@@ -107,7 +107,7 @@ export abstract class ArcgisUtilityNetworkTraceInputs extends LitElement {
   /**
    * A function to run before trace location selection starts.
    *
-   * @experimental
+   * @internal
    */
   accessor beforeTraceLocationSelectStart: (() => Promise<void>) | undefined;
   /** @default "default" */
@@ -132,14 +132,14 @@ export abstract class ArcgisUtilityNetworkTraceInputs extends LitElement {
   /**
    * Fires when the user completes the selection of a trace location.
    *
-   * @experimental
+   * @internal
    */
   readonly arcgisTraceLocationSelectEnd: import("@arcgis/lumina").TargetedEvent<this, void>;
   /**
    * Fires when the user begins selection of a trace location.
    * Can be prevented to stop the selection.
    *
-   * @experimental
+   * @internal
    */
   readonly arcgisTraceLocationSelectStart: import("@arcgis/lumina").TargetedEvent<this, SelectStartPayload>;
   /** This will be fired less often than above, only when the utility network changes */

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

@@ -3,32 +3,32 @@ import { c as y } from "../../chunks/runtime.js";
 import { repeat as b } from "lit/directives/repeat.js";
 import { queryAllJSON as g } from "@arcgis/core/applications/Components/featureUtils.js";
 import c from "@arcgis/core/core/Collection.js";
-import { substitute as k } from "@arcgis/core/intl.js";
-import _ from "@arcgis/core/layers/GraphicsLayer.js";
-import S from "@arcgis/core/networks/support/UNTraceConfiguration.js";
-import T from "@arcgis/core/rest/networks/support/TraceLocation.js";
+import { watch as k } from "@arcgis/core/core/reactiveUtils.js";
+import { substitute as _ } from "@arcgis/core/intl.js";
+import S from "@arcgis/core/layers/GraphicsLayer.js";
+import T from "@arcgis/core/networks/support/UNTraceConfiguration.js";
+import L from "@arcgis/core/rest/networks/support/TraceLocation.js";
 import m from "@arcgis/core/rest/support/FeatureSet.js";
 import h from "@arcgis/core/views/interactive/snapping/FeatureSnappingLayerSource.js";
 import C from "@arcgis/core/widgets/Sketch/SketchViewModel.js";
-import { LitElement as L, createEvent as l } from "@arcgis/lumina";
-import { usePropertyChange as N } from "@arcgis/lumina/controllers";
-import { log as u, composeMissingPropertyMessage as $, composeEmptyPropertyMessage as v } from "@arcgis/toolkit/log";
-import { css as F, html as s } from "lit";
-import { createRef as E, ref as U } from "lit/directives/ref.js";
+import { LitElement as N, createEvent as l } from "@arcgis/lumina";
+import { usePropertyChange as $ } from "@arcgis/lumina/controllers";
+import { log as u, composeMissingPropertyMessage as v, composeEmptyPropertyMessage as F } from "@arcgis/toolkit/log";
+import { css as E, html as s } from "lit";
+import { createRef as P, ref as U } from "lit/directives/ref.js";
 import { u as I } from "../../chunks/useT9n.js";
 import { h as f } from "../../chunks/feature-utils.js";
-import { a as P, i as A } from "../../chunks/layer-utils.js";
-import { watch as M } from "@arcgis/core/core/reactiveUtils.js";
-const x = F`:host{flex-grow:1}calcite-flow{min-height:var(--arcgis-internal-panel-height-sm, 240px)}calcite-block-group{flex-grow:1;padding-bottom:var(--calcite-spacing-md);background-color:var(--calcite-color-foreground-1)}calcite-block{--calcite-block-content-space: 0;--calcite-block-border-color: transparent;margin:0}calcite-block calcite-select,calcite-block calcite-input{margin:0 var(--calcite-spacing-md)}calcite-block calcite-input-message{padding:var(--calcite-spacing-sm) var(--calcite-spacing-md) 0 var(--calcite-spacing-md)}calcite-block calcite-label:last-child{--calcite-label-margin-bottom: 0}calcite-notice{margin:var(--calcite-spacing-md)}#subnetwork-info-block{margin:var(--calcite-spacing-md) var(--calcite-spacing-md) 0 var(--calcite-spacing-md)}.inline-loader{--calcite-loader-spacing: var(--calcite-spacing-md)}.add-spatial-mode{display:flex;flex-direction:column;gap:var(--calcite-spacing-md);margin:var(--calcite-spacing-md)}.heading{color:var(--calcite-color-text-1);margin:0 0 var(--calcite-spacing-md) 0;font-size:var(--calcite-font-size);font-style:normal;font-weight:var(--calcite-font-weight-medium)}`, w = `utility-network-trace-inputs-sketch-${Date.now()}`, d = `utility-network-trace-inputs-flags-${Date.now()}`, B = 20;
-class V extends L {
+import { a as A, i as M } from "../../chunks/layer-utils.js";
+const x = E`:host{flex-grow:1}calcite-flow{min-height:var(--arcgis-internal-panel-height-sm, 240px)}calcite-block-group{flex-grow:1;padding-bottom:var(--calcite-spacing-md);background-color:var(--calcite-color-foreground-1)}calcite-block{--calcite-block-content-space: 0;--calcite-block-border-color: transparent;margin:0}calcite-block calcite-select,calcite-block calcite-input{margin:0 var(--calcite-spacing-md)}calcite-block calcite-input-message{padding:var(--calcite-spacing-sm) var(--calcite-spacing-md) 0 var(--calcite-spacing-md)}calcite-block calcite-label:last-child{--calcite-label-margin-bottom: 0}calcite-notice{margin:var(--calcite-spacing-md)}#subnetwork-info-block{margin:var(--calcite-spacing-md) var(--calcite-spacing-md) 0 var(--calcite-spacing-md)}#results-limited-message{padding:var(--calcite-spacing-sm)}.inline-loader{--calcite-loader-spacing: var(--calcite-spacing-md)}.add-spatial-mode{display:flex;flex-direction:column;gap:var(--calcite-spacing-md);margin:var(--calcite-spacing-md)}.heading{color:var(--calcite-color-text-1);margin:0 0 var(--calcite-spacing-md) 0;font-size:var(--calcite-font-size);font-style:normal;font-weight:var(--calcite-font-weight-medium)}`, w = `utility-network-trace-inputs-sketch-${Date.now()}`, d = `utility-network-trace-inputs-flags-${Date.now()}`, B = 20;
+class V extends N {
   constructor() {
-    super(...arguments), this._messages = I({ blocking: !0 }), this._layerIdToLayer = /* @__PURE__ */ new Map(), this._startingPoints = new c(), this._barriers = new c(), this._stoppingPoints = new c(), this._subnetworkTraceTypes = /* @__PURE__ */ new Set([
+    super(...arguments), this._defaultPopupTemplateEnabled = !0, this._messages = I({ blocking: !0 }), this._layerIdToLayer = /* @__PURE__ */ new Map(), this._startingPoints = new c(), this._barriers = new c(), this._stoppingPoints = new c(), this._subnetworkTraceTypes = /* @__PURE__ */ new Set([
       "subnetwork",
       "subnetwork-controller",
       "upstream",
       "downstream",
       "isolation"
-    ]), this._removeDuplicateSubnetworkNames = (e, t, i) => t === 0 || e.getAttribute("SUBNETWORKNAME") !== i[t - 1].getAttribute("SUBNETWORKNAME"), this._hitTestPromise = null, this._featuresFromHitTest = [], this._featuresComponentRef = E(), this._displayLimit = 20, this.compatibleSubnetworkNames = [], this.traceConfigurations = [], this._state = "ready", this._exceedDisplayLimit = !1, this.mode = "default", this.arcgisTraceInputsChange = l(), this.arcgisUtilityNetworkChange = l(), this.arcgisSelectedNamedTraceConfigurationChange = l(), this.arcgisTraceLocationSelectStart = l(), this.arcgisTraceLocationSelectEnd = l(), this.arcgisPropertyChange = N()("mode"), this.renderFeatureListItem = (e) => {
+    ]), this._removeDuplicateSubnetworkNames = (e, t, i) => t === 0 || e.getAttribute("SUBNETWORKNAME") !== i[t - 1].getAttribute("SUBNETWORKNAME"), this._hitTestPromise = null, this._featuresFromHitTest = [], this._featuresComponentRef = P(), this._displayLimit = 20, this.compatibleSubnetworkNames = [], this.traceConfigurations = [], this._state = "ready", this._exceedDisplayLimit = !1, this.mode = "default", this.arcgisTraceInputsChange = l(), this.arcgisUtilityNetworkChange = l(), this.arcgisSelectedNamedTraceConfigurationChange = l(), this.arcgisTraceLocationSelectStart = l(), this.arcgisTraceLocationSelectEnd = l(), this.arcgisPropertyChange = $()("mode"), this.renderFeatureListItem = (e) => {
       const { feature: t, label: i } = e;
       return s`<calcite-list-item .label=${i} @calciteListItemSelect=${() => this._handleFeatureSelectChange(t)}><calcite-icon icon=chevron-right slot=content-end></calcite-icon></calcite-list-item>`;
     };
@@ -59,7 +59,7 @@ class V extends L {
   get traceLocations() {
     const e = [], t = (i) => {
       i.flagProperties.terminalConfiguration && i.flagProperties.selectedTerminals ? i.flagProperties.selectedTerminals.forEach((r) => {
-        e.push(new T({
+        e.push(new L({
           type: i.traceLocation.type,
           isFilterBarrier: i.traceLocation.isFilterBarrier,
           globalId: i.traceLocation.globalId,
@@ -72,7 +72,7 @@ class V extends L {
   }
   load() {
     this.manager.onLifecycle(() => [
-      M(() => this.view?.map, () => {
+      k(() => this.view?.map, () => {
         this._setupUtilityNetwork(), this._setupSketchViewModel();
       }, { initial: !0 })
     ]);
@@ -87,19 +87,19 @@ class V extends L {
   _createGraphicLayer(e) {
     const { map: t } = this.view;
     if (!t?.findLayerById(e)) {
-      const a = new _({
+      const a = new S({
         id: e,
         listMode: "hide",
         title: e
       });
-      P(this.view, a);
+      A(this.view, a);
     }
   }
   _getGraphicLayer(e) {
     const { map: t } = this.view;
     if (t) {
       const i = t.findLayerById(e);
-      if (A(i))
+      if (M(i))
         return t.reorder(i, t.layers.length - 1), i;
     }
     return null;
@@ -172,8 +172,8 @@ class V extends L {
   }
   _handleTraceConfigChange() {
     const { selectedNamedTraceConfiguration: e } = this;
-    if (!(e?.traceConfiguration instanceof S)) {
-      u("error", this, $("selectedNamedTraceConfiguration.traceConfiguration")), this._unTraceConfiguration = void 0;
+    if (!(e?.traceConfiguration instanceof T)) {
+      u("error", this, v("selectedNamedTraceConfiguration.traceConfiguration")), this._unTraceConfiguration = void 0;
       return;
     }
     switch (this._unTraceConfiguration = e.traceConfiguration.clone(), e.traceType) {
@@ -195,7 +195,7 @@ class V extends L {
   _handleUtilityNetworksChange() {
     const { utilityNetworks: e } = this;
     if (!e || e.length === 0) {
-      this._state = "error", u("error", this, v("utilityNetworks"));
+      this._state = "error", u("error", this, F("utilityNetworks"));
       return;
     }
     (!this.selectedUtilityNetwork || !e.includes(this.selectedUtilityNetwork)) && (this.selectedUtilityNetwork = e.at(0));
@@ -231,6 +231,8 @@ class V extends L {
     const { features: a } = m.fromJSON(await g(e, i));
     return a.forEach((r) => {
       r.layer = e.type === "subtype-group" ? e.findSublayerForFeature(r) : e, r.origin = r.layer;
+      const o = r.layer;
+      r.getEffectivePopupTemplate(this._defaultPopupTemplateEnabled) || (r.popupTemplate = o.createPopupTemplate());
     }), a;
   }
   async _populateFeaturesWithLabel(e) {
@@ -325,13 +327,13 @@ class V extends L {
     if (!e)
       return this.mode = "default", null;
     const t = this._featuresComponentRef.value, i = t?.selectedFeature ? [t.selectedFeature] : [e];
-    return s`<arcgis-features .referenceElement=${this.referenceElement} .features=${i} .view=${this.view} open @arcgisClose=${() => this._handleFeaturesClose()} ${U(this._featuresComponentRef)}></arcgis-features>`;
+    return s`<arcgis-features .referenceElement=${this.referenceElement} .features=${i} .view=${this.view} .defaultPopupTemplateEnabled=${this._defaultPopupTemplateEnabled} open @arcgisClose=${() => this._handleFeaturesClose()} ${U(this._featuresComponentRef)}></arcgis-features>`;
   }
   renderAddSpatialFooter() {
-    const { mode: e, _messages: t, selectedUtilityNetwork: i, _selectedFeature: a } = this, r = k(t.warnings.exceededDisplayLimit, {
+    const { mode: e, _messages: t, selectedUtilityNetwork: i, _selectedFeature: a } = this, r = _(t.warnings.exceededDisplayLimit, {
       limit: this._displayLimit.toString()
     }), o = e === "add-spatial-feature-list" && this._exceedDisplayLimit, n = a ? !(i?.isUtilityLayer(a.layer) ?? !0) : !0;
-    return s`${o && s`<calcite-input-message icon=exclamation-mark-circle status=idle>${r}</calcite-input-message>` || ""}<calcite-button appearance=outline width=full @click=${() => {
+    return s`${o && s`<calcite-input-message id=results-limited-message icon=exclamation-mark-circle status=idle>${r}</calcite-input-message>` || ""}<calcite-button appearance=outline width=full @click=${() => {
       this._handleAddSpatialCancelClick();
     }} slot=footer>${t.buttons.cancel}</calcite-button>${e === "add-spatial-feature" && s`<calcite-button width=full slot=footer appearance=solid @click=${() => {
       this._handleAddSpatialAddClick();

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

@@ -26,7 +26,7 @@ export abstract class ArcgisUtilityNetworkTraceLocation extends LitElement {
   /**
    * A function to run before trace location selection starts.
    *
-   * @experimental
+   * @internal
    */
   accessor beforeTraceLocationSelectStart: (() => Promise<void>) | undefined;
   accessor filterLayers: Collection<Layer> | undefined;
@@ -103,14 +103,14 @@ export abstract class ArcgisUtilityNetworkTraceLocation extends LitElement {
   /**
    * Fires when the user completes the selection of a trace location.
    *
-   * @experimental
+   * @internal
    */
   readonly arcgisTraceLocationSelectEnd: import("@arcgis/lumina").TargetedEvent<this, void>;
   /**
    * Fires when the user begins selection of a trace location.
    * Can be prevented to stop the selection.
    *
-   * @experimental
+   * @internal
    */
   readonly arcgisTraceLocationSelectStart: import("@arcgis/lumina").TargetedEvent<this, SelectStartPayload>;
   readonly "@eventTypes": {

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

@@ -7,7 +7,7 @@ import type Layer from "@arcgis/core/layers/Layer.js";
 import type SubtypeSublayer from "@arcgis/core/layers/support/SubtypeSublayer.js";
 import type UtilityNetwork from "@arcgis/core/networks/UtilityNetwork.js";
 import type TraceResult from "@arcgis/core/rest/networks/support/TraceResult.js";
-import type MapView from "@arcgis/core/views/MapView";
+import type MapView from "@arcgis/core/views/MapView.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { ArcgisReferenceElement } from "../types.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";

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

@@ -6,19 +6,19 @@ import "@arcgis/core/core/Error.js";
 import * as h from "@arcgis/core/geometry/operators/shapePreservingProjectOperator.js";
 import "@arcgis/core/Graphic.js";
 import b from "@arcgis/core/rest/support/FeatureSet.js";
-import { LitElement as F, createEvent as o } from "@arcgis/lumina";
-import { log as d, composeMissingPropertyMessage as g, composeEmptyPropertyMessage as $ } from "@arcgis/toolkit/log";
-import { css as w, html as r } from "lit";
-import { createRef as L, ref as C } from "lit/directives/ref.js";
-import { u as R } from "../../chunks/useT9n.js";
+import { LitElement as $, createEvent as o } from "@arcgis/lumina";
+import { log as u, composeMissingPropertyMessage as g, composeEmptyPropertyMessage as F } from "@arcgis/toolkit/log";
+import { css as w, html as i } from "lit";
+import { createRef as L, ref as T } from "lit/directives/ref.js";
+import { u as C } from "../../chunks/useT9n.js";
 import { h as m } from "../../chunks/feature-utils.js";
-const T = w`:host{min-height:var(--arcgis-internal-panel-height-sm, 240px);height:100%}arcgis-features{height:100%}calcite-flow{min-height:var(--arcgis-internal-panel-height-sm, 240px);height:100%}calcite-table{--calcite-table-border-color: none}calcite-table-row{--calcite-table-row-border-color: var(--calcite-color-border-3)}.white-panel-background{--calcite-panel-background-color: var(--calcite-color-foreground-1)}.aggregated-geometry-container{display:flex;justify-content:space-between;padding:0 var(--calcite-spacing-md) var(--calcite-spacing-md) var(--calcite-spacing-md)}#elements-list-item{border:solid 1px var(--calcite-color-border-3);border-radius:var(--calcite-corner-radius-sm);margin:0 var(--calcite-spacing-sm)}.no-selectable-results{padding:0 var(--calcite-spacing-md);color:var(--calcite-color-text-3);font-size:var(--calcite-font-size)}.results-heading{display:flex;flex-direction:column;margin:var(--calcite-spacing-md);gap:var(--calcite-spacing-xs)}.results-heading .results-heading-title{font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size);color:var(--calcite-color-text-1)}.results-heading .results-heading-subtitle{font-size:var(--calcite-font-size--1);color:var(--calcite-color-text-3)}.functions-heading{padding:var(--calcite-spacing-md) var(--calcite-spacing-md) var(--calcite-spacing-xxs) var(--calcite-spacing-md);font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size);color:var(--calcite-color-text-1)}.no-results-landing{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;margin:var(--calcite-spacing-sm) var(--calcite-spacing-xl) var(--calcite-spacing-xl) var(--calcite-spacing-xl);gap:var(--calcite-spacing-md)}.no-results-landing calcite-icon{margin-bottom:var(--calcite-spacing-sm);--calcite-icon-color: var(--calcite-color-text-3)}.no-results-landing .no-results-heading{font-size:var(--calcite-font-size-2)}.no-results-landing .no-results-description{color:var(--calcite-color-text-3)}`, y = {
+const R = w`:host{min-height:var(--arcgis-internal-panel-height-sm, 240px);height:100%}arcgis-features{height:100%}calcite-flow{min-height:var(--arcgis-internal-panel-height-sm, 240px);height:100%}calcite-table{--calcite-table-border-color: none}calcite-table-row{--calcite-table-row-border-color: var(--calcite-color-border-3)}.white-panel-background{--calcite-panel-background-color: var(--calcite-color-foreground-1)}.aggregated-geometry-container{display:flex;justify-content:space-between;padding:0 var(--calcite-spacing-md) var(--calcite-spacing-md) var(--calcite-spacing-md)}#elements-list-item{border:solid 1px var(--calcite-color-border-3);border-radius:var(--calcite-corner-radius-sm);margin:0 var(--calcite-spacing-sm)}.no-selectable-results{padding:0 var(--calcite-spacing-md);color:var(--calcite-color-text-3);font-size:var(--calcite-font-size)}.results-heading{display:flex;flex-direction:column;margin:var(--calcite-spacing-md);gap:var(--calcite-spacing-xs)}.results-heading .results-heading-title{font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size);color:var(--calcite-color-text-1)}.results-heading .results-heading-subtitle{font-size:var(--calcite-font-size--1);color:var(--calcite-color-text-3)}.functions-heading{padding:var(--calcite-spacing-md) var(--calcite-spacing-md) var(--calcite-spacing-xxs) var(--calcite-spacing-md);font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size);color:var(--calcite-color-text-1)}.no-results-landing{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;margin:var(--calcite-spacing-sm) var(--calcite-spacing-xl) var(--calcite-spacing-xl) var(--calcite-spacing-xl);gap:var(--calcite-spacing-md)}.no-results-landing calcite-icon{margin-bottom:var(--calcite-spacing-sm);--calcite-icon-color: var(--calcite-color-text-3)}.no-results-landing .no-results-heading{font-size:var(--calcite-font-size-2)}.no-results-landing .no-results-description{color:var(--calcite-color-text-3)}`, p = {
   dirtyAreasDiscovered: -2147208511,
   noValidControllers: -2147208935
 };
-class S extends F {
+class E extends $ {
   constructor() {
-    super(...arguments), this._messages = R({ blocking: !0 }), this._elementsWithoutLayer = [], this._featuresComponentRef = L(), this._featuresFromSelectedLayer = [], this._layerIdToFeatures = /* @__PURE__ */ new Map(), this._layerIdToLayer = /* @__PURE__ */ new Map(), this._subtypeCodeToFeatures = /* @__PURE__ */ new Map(), this._sourceIdToElements = /* @__PURE__ */ new Map(), this._unLayers = [], this._compareByFeatureTitle = (e, t) => e.label.localeCompare(t.label, void 0, { numeric: !0 }), this._compareByLayerTitle = ([, e], [, t]) => {
+    super(...arguments), this._defaultPopupTemplateEnabled = !0, this._messages = C({ blocking: !0 }), this._elementsWithoutLayer = [], this._featuresComponentRef = L(), this._featuresFromSelectedLayer = [], this._layerIdToFeatures = /* @__PURE__ */ new Map(), this._layerIdToLayer = /* @__PURE__ */ new Map(), this._subtypeCodeToFeatures = /* @__PURE__ */ new Map(), this._sourceIdToElements = /* @__PURE__ */ new Map(), this._unLayers = [], this._compareByFeatureTitle = (e, t) => e.label.localeCompare(t.label, void 0, { numeric: !0 }), this._compareByLayerTitle = ([, e], [, t]) => {
       const a = e[0].feature.layer, s = t[0].feature.layer, l = a?.title ?? "", c = s?.title ?? "";
       return l.localeCompare(c, void 0, { numeric: !0 });
     }, this._queryFeaturesOnLayer = async ([e, t]) => {
@@ -28,32 +28,32 @@ class S extends F {
         return;
       }
       const l = s.createQuery();
-      l.gdbVersion = this.utilityNetwork?.gdbVersion, l.objectIds = t.map((i) => i.objectId), l.outFields = ["*"];
-      const { features: c } = b.fromJSON(await _(s, l)), n = await Promise.all(c.map(async (i) => {
-        i.layer = s.type === "subtype-group" ? s.findSublayerForFeature(i) : s;
-        const u = i.layer;
-        if (u && "getFeatureTitle" in u) {
-          const p = await u.getFeatureTitle(i) || m(i);
-          return { feature: i, label: p };
+      l.gdbVersion = this.utilityNetwork?.gdbVersion, l.objectIds = t.map((r) => r.objectId), l.outFields = ["*"];
+      const { features: c } = b.fromJSON(await _(s, l)), n = await Promise.all(c.map(async (r) => {
+        r.layer = s.type === "subtype-group" ? s.findSublayerForFeature(r) : s, r.origin = r.layer;
+        const d = r.layer;
+        if (r.getEffectivePopupTemplate(this._defaultPopupTemplateEnabled) || (r.popupTemplate = d.createPopupTemplate()), d && "getFeatureTitle" in d) {
+          const y = await d.getFeatureTitle(r) || m(r);
+          return { feature: r, label: y };
         }
-        return { feature: i, label: m(i) };
+        return { feature: r, label: m(r) };
       }));
-      s.type === "subtype-group" ? n.forEach((i) => this._addOrCreateMapValue(this._subtypeCodeToFeatures, i.feature.layer.subtypeCode, i)) : this._layerIdToFeatures.set(a, n);
+      s.type === "subtype-group" ? n.forEach((r) => this._addOrCreateMapValue(this._subtypeCodeToFeatures, r.feature.layer.subtypeCode, r)) : this._layerIdToFeatures.set(a, n);
     }, this.aggregatedGeometryGraphicsColor = new v([255, 255, 0, 0.6]), this.hideFeatureResults = !1, this.isElementsSelected = !1, this.layers = [], this.state = "ready", this.traceResultFeatures = [], this.arcgisAggregatedGeometryGraphicsColorChange = o(), this.arcgisHideGraphicsChange = o(), this.arcgisSelectedLayerChange = o(), this.arcgisSelectedResultTypeChange = o(), this.arcgisTraceResultFeaturesReady = o(), this._renderLayerListItem = ([, e]) => {
       if (!e.length)
         return null;
       const t = e[0].feature.layer, a = t?.title || this._messages.unknown;
-      return r`<calcite-list-item .label=${a} @calciteListItemSelect=${() => this._setSelectedLayerAndFeatures(t)}><calcite-chip .label=${this._messages.labels.numElements} slot=content-end scale=s>${e.length}</calcite-chip><calcite-icon icon=chevron-right slot=content-end></calcite-icon></calcite-list-item>`;
+      return i`<calcite-list-item .label=${a} @calciteListItemSelect=${() => this._setSelectedLayerAndFeatures(t)}><calcite-chip .label=${this._messages.labels.numElements} slot=content-end scale=s>${e.length}</calcite-chip><calcite-icon icon=chevron-right slot=content-end></calcite-icon></calcite-list-item>`;
     }, this._renderFeatureListItem = (e) => {
       const { feature: t, label: a } = e;
-      return r`<calcite-list-item .label=${a} @calciteListItemSelect=${() => this.selectedFeature = t}><calcite-icon icon=chevron-right slot=content-end></calcite-icon></calcite-list-item>`;
+      return i`<calcite-list-item .label=${a} @calciteListItemSelect=${() => this.selectedFeature = t}><calcite-icon icon=chevron-right slot=content-end></calcite-icon></calcite-list-item>`;
     };
   }
   static {
     this.properties = { aggregatedGeometryGraphicsColor: 0, hideFeatureResults: 5, featuresFromSelectedLayer: 32, isElementsSelected: 5, layers: 0, messageOverrides: 0, referenceElement: 1, selectedFeature: 0, selectedLayer: 0, state: 1, traceConfigTitle: 1, traceError: 0, traceResult: 0, traceResultFeatures: 0, utilityNetwork: 0, view: 0 };
   }
   static {
-    this.styles = T;
+    this.styles = R;
   }
   get featuresFromSelectedLayer() {
     return this._featuresFromSelectedLayer.map(({ feature: e }) => e);
@@ -67,7 +67,7 @@ class S extends F {
     e.has("isElementsSelected") && this.arcgisSelectedResultTypeChange.emit(), e.has("selectedLayer") && this.arcgisSelectedLayerChange.emit(), e.has("traceResult") && (this.isElementsSelected = !1), (e.has("layers") || e.has("utilityNetwork")) && this._loadDependencies();
   }
   loaded() {
-    this.utilityNetwork || d("warn", this, g("utilityNetwork")), this.layers.length === 0 && d("warn", this, $("layers")), this.view || d("warn", this, g("view"));
+    this.utilityNetwork || u("warn", this, g("utilityNetwork")), this.layers.length === 0 && u("warn", this, F("layers")), this.view || u("warn", this, g("view"));
   }
   _addOrCreateMapValue(e, t, a) {
     const s = e.get(t);
@@ -105,8 +105,8 @@ class S extends F {
     const t = e.map(this._queryFeaturesOnLayer);
     (await Promise.allSettled(t)).forEach((c, n) => {
       if (c.status === "rejected") {
-        const [i] = e[n];
-        d("error", this, `Failed to query features for source ${i}. Reason: ${c.reason}`);
+        const [r] = e[n];
+        u("error", this, `Failed to query features for source ${r}. Reason: ${c.reason}`);
       }
     });
     const s = Array.from(this._layerIdToFeatures.values()), l = Array.from(this._subtypeCodeToFeatures.values());
@@ -140,70 +140,70 @@ class S extends F {
     if (this.state === "loading")
       return this._renderGettingResults();
     if (this.selectedFeature) {
-      const n = this._featuresComponentRef.value, i = n?.selectedFeature ? [n.selectedFeature] : [this.selectedFeature];
-      return r`<arcgis-features .referenceElement=${this.referenceElement} .features=${i} .view=${this.view} open @arcgisClose=${() => this.selectedFeature = void 0} ${C(this._featuresComponentRef)}></arcgis-features>`;
+      const n = this._featuresComponentRef.value, r = n?.selectedFeature ? [n.selectedFeature] : [this.selectedFeature];
+      return i`<arcgis-features .referenceElement=${this.referenceElement} .features=${r} .view=${this.view} open .defaultPopupTemplateEnabled=${this._defaultPopupTemplateEnabled} @arcgisClose=${() => this.selectedFeature = void 0} ${T(this._featuresComponentRef)}></arcgis-features>`;
     }
     const c = a.length > 0 && !s.length && !l;
-    return this.hideFeatureResults && c ? this._renderFeaturesAreHidden() : r`<calcite-flow>${c ? null : r`<calcite-flow-item .selected=${!this.isElementsSelected}>${this._renderLanding(t)}</calcite-flow-item>`}<calcite-flow-item .heading=${this._messages.headings.features} .description=${this._messages.headings.totalFeatures.replace("{number}", this.traceResultFeatures.length.toString())} .selected=${(c || this.isElementsSelected) && !this.selectedLayer} @calciteFlowItemBack=${() => this.isElementsSelected = !1}>${this._renderLayerList()}</calcite-flow-item><calcite-flow-item .heading=${this.selectedLayer?.title ?? void 0} .description=${this._messages.headings.totalFeatures.replace("{number}", this._featuresFromSelectedLayer.length.toString())} .selected=${!!this.selectedLayer} @calciteFlowItemBack=${() => this.selectedLayer = void 0}>${this._renderFeaturesList()}</calcite-flow-item></calcite-flow>`;
+    return this.hideFeatureResults && c ? this._renderFeaturesAreHidden() : i`<calcite-flow>${c ? null : i`<calcite-flow-item .selected=${!this.isElementsSelected}>${this._renderLanding(t)}</calcite-flow-item>`}<calcite-flow-item .heading=${this._messages.headings.features} .description=${this._messages.headings.totalFeatures.replace("{number}", this.traceResultFeatures.length.toString())} .selected=${(c || this.isElementsSelected) && !this.selectedLayer} @calciteFlowItemBack=${() => this.isElementsSelected = !1}>${this._renderLayerList()}</calcite-flow-item><calcite-flow-item .heading=${this.selectedLayer?.title ?? void 0} .description=${this._messages.headings.totalFeatures.replace("{number}", this._featuresFromSelectedLayer.length.toString())} .selected=${!!this.selectedLayer} @calciteFlowItemBack=${() => this.selectedLayer = void 0}>${this._renderFeaturesList()}</calcite-flow-item></calcite-flow>`;
   }
   _renderGettingResults() {
-    return r`<calcite-panel class="white-panel-background"><calcite-loader .label=${this._messages.gettingResults} .text=${this._messages.gettingResults}></calcite-loader></calcite-panel>`;
+    return i`<calcite-panel class="white-panel-background"><calcite-loader .label=${this._messages.gettingResults} .text=${this._messages.gettingResults}></calcite-loader></calcite-panel>`;
   }
   _renderLanding(e) {
     const { elements: t, globalFunctionResults: a, aggregatedGeometry: s } = e;
-    return r`<calcite-panel class="white-panel-background">${this._renderTraceResultsHeading()}${s != null ? this._renderAggregatedGeometry(s) : null}${s != null && !t.length ? this._renderNoSelectableResults() : null}${t.length > 0 ? this.hideFeatureResults ? this._renderFeaturesAreHidden() : this._renderElementsResults() : null}${a.length > 0 ? this._renderFunctionsResults(a) : null}</calcite-panel>`;
+    return i`<calcite-panel class="white-panel-background">${this._renderTraceResultsHeading()}${s != null ? this._renderAggregatedGeometry(s) : null}${s != null && !t.length ? this._renderNoSelectableResults() : null}${t.length > 0 ? this.hideFeatureResults ? this._renderFeaturesAreHidden() : this._renderElementsResults() : null}${a.length > 0 ? this._renderFunctionsResults(a) : null}</calcite-panel>`;
   }
   _renderAggregatedGeometry(e) {
-    return r`<div class="aggregated-geometry-container"><arcgis-utility-network-aggregated-geometry .graphicsColor=${this.aggregatedGeometryGraphicsColor} .geometry=${e} .view=${this.view} @arcgisHideGraphicsChange=${this._handleHideGraphicsChange}></arcgis-utility-network-aggregated-geometry><calcite-swatch id=geometry-color-swatch .label=${this._messages.labels.aggregatedGeometryGraphicsColor} .color=${this.aggregatedGeometryGraphicsColor.toCss()}></calcite-swatch><calcite-popover .heading=${this._messages.headings.setColor} .label=${this._messages.headings.setColor} reference-element=geometry-color-swatch closable><calcite-color-picker alpha-channel channels-disabled clearable hex-disabled saved-disabled .value=${this.aggregatedGeometryGraphicsColor} @calciteColorPickerChange=${(t) => {
+    return i`<div class="aggregated-geometry-container"><arcgis-utility-network-aggregated-geometry .graphicsColor=${this.aggregatedGeometryGraphicsColor} .geometry=${e} .view=${this.view} @arcgisHideGraphicsChange=${this._handleHideGraphicsChange}></arcgis-utility-network-aggregated-geometry><calcite-swatch id=geometry-color-swatch .label=${this._messages.labels.aggregatedGeometryGraphicsColor} .color=${this.aggregatedGeometryGraphicsColor.toCss()}></calcite-swatch><calcite-popover .heading=${this._messages.headings.setColor} .label=${this._messages.headings.setColor} reference-element=geometry-color-swatch closable><calcite-color-picker alpha-channel channels-disabled clearable hex-disabled saved-disabled .value=${this.aggregatedGeometryGraphicsColor} @calciteColorPickerChange=${(t) => {
       const a = t.target.value;
       this.arcgisAggregatedGeometryGraphicsColorChange.emit(a);
     }}></calcite-color-picker></calcite-popover></div>`;
   }
   _renderFeaturesAreHidden() {
-    return r`<calcite-panel class="white-panel-background">${this._renderTraceResultsHeading()}<div class="no-selectable-results">${this._messages.resultFeaturesAreHidden}</div></calcite-panel>`;
+    return i`<calcite-panel class="white-panel-background">${this._renderTraceResultsHeading()}<div class="no-selectable-results">${this._messages.resultFeaturesAreHidden}</div></calcite-panel>`;
   }
   _renderNoSelectableResults() {
-    return r`<div class="no-selectable-results">${this._messages.noSelectableFeatures}</div>`;
+    return i`<div class="no-selectable-results">${this._messages.noSelectableFeatures}</div>`;
   }
   _renderElementsResults() {
-    return r`<calcite-list .label=${this._messages.headings.traceResultsGeneric}><calcite-list-item id=elements-list-item .label=${this._messages.headings.features} @calciteListItemSelect=${() => this.isElementsSelected = !0}><calcite-chip .label=${this._messages.labels.numFeatures} scale=s slot=content-end>${this.traceResultFeatures.length}</calcite-chip><calcite-icon icon=chevron-right slot=content-end></calcite-icon></calcite-list-item></calcite-list>`;
+    return i`<calcite-list .label=${this._messages.headings.traceResultsGeneric}><calcite-list-item id=elements-list-item .label=${this._messages.headings.features} @calciteListItemSelect=${() => this.isElementsSelected = !0}><calcite-chip .label=${this._messages.labels.numFeatures} scale=s slot=content-end>${this.traceResultFeatures.length}</calcite-chip><calcite-icon icon=chevron-right slot=content-end></calcite-icon></calcite-list-item></calcite-list>`;
   }
   _renderFunctionsResults(e) {
-    return r`<div class="functions-heading">${this._messages.headings.functions}</div><calcite-table .caption=${this._messages.labels.functionResults}>${e.filter((t) => t.networkAttributeName != null && t.result != null).map((t) => r`<calcite-table-row><calcite-table-cell>${t.networkAttributeName}</calcite-table-cell><calcite-table-cell>${t.result}</calcite-table-cell></calcite-table-row>`)}</calcite-table>`;
+    return i`<div class="functions-heading">${this._messages.headings.functions}</div><calcite-table .caption=${this._messages.labels.functionResults}>${e.filter((t) => t.networkAttributeName != null && t.result != null).map((t) => i`<calcite-table-row><calcite-table-cell>${t.networkAttributeName}</calcite-table-cell><calcite-table-cell>${t.result}</calcite-table-cell></calcite-table-row>`)}</calcite-table>`;
   }
   _renderLayerList() {
     const e = Array.from(this._layerIdToFeatures.entries()), t = Array.from(this._subtypeCodeToFeatures.entries()), s = e.concat(t).sort(this._compareByLayerTitle).map(this._renderLayerListItem);
-    return this._elementsWithoutLayer.length > 0 && s.push(this._renderUnknownListItem()), r`<calcite-list .label=${this._messages.labels.traceResultElementsByLayer} .loading=${this.state === "loading"}>${s}</calcite-list>`;
+    return this._elementsWithoutLayer.length > 0 && s.push(this._renderUnknownListItem()), i`<calcite-list .label=${this._messages.labels.traceResultElementsByLayer} .loading=${this.state === "loading"}>${s}</calcite-list>`;
   }
   _renderUnknownListItem() {
-    return r`<calcite-list-item .label=${this._messages.unknown}><calcite-chip .label=${this._messages.labels.numElements} slot=content-end scale=s>${this._elementsWithoutLayer.length}</calcite-chip></calcite-list-item>`;
+    return i`<calcite-list-item .label=${this._messages.unknown}><calcite-chip .label=${this._messages.labels.numElements} slot=content-end scale=s>${this._elementsWithoutLayer.length}</calcite-chip></calcite-list-item>`;
   }
   _renderFeaturesList() {
-    return r`<calcite-list .label=${this._messages.headings.traceResultsGeneric}>${this._featuresFromSelectedLayer.map(this._renderFeatureListItem)}</calcite-list>`;
+    return i`<calcite-list .label=${this._messages.headings.traceResultsGeneric}>${this._featuresFromSelectedLayer.map(this._renderFeatureListItem)}</calcite-list>`;
   }
   _renderTraceResultsHeading() {
-    return r`<div class="results-heading"><div class="results-heading-title">${this._messages.headings.traceResultsGeneric}</div>${this.traceConfigTitle ? r`<div class="results-heading-subtitle">${this.traceConfigTitle}</div>` : null}</div>`;
+    return i`<div class="results-heading"><div class="results-heading-title">${this._messages.headings.traceResultsGeneric}</div>${this.traceConfigTitle ? i`<div class="results-heading-subtitle">${this.traceConfigTitle}</div>` : null}</div>`;
   }
   _renderErrorLanding(e) {
     let t = e.message;
     switch (e.details?.raw?.extendedCode) {
-      case y.dirtyAreasDiscovered:
+      case p.dirtyAreasDiscovered:
         t = this._messages.traceErrors.dirtyAreasDiscovered;
         break;
-      case y.noValidControllers:
+      case p.noValidControllers:
         t = this._messages.traceErrors.noValidControllers;
         break;
     }
-    return r`<calcite-panel class="white-panel-background">${this._renderTraceResultsHeading()}<div class="no-results-landing"><calcite-icon icon=exclamation-mark-triangle scale=l></calcite-icon><div class="no-results-heading">${this._messages.traceFailedHeading}</div><div class="no-results-description">${this._messages.traceFailedDescription}</div><div class="no-results-description">${t}</div></div></calcite-panel>`;
+    return i`<calcite-panel class="white-panel-background">${this._renderTraceResultsHeading()}<div class="no-results-landing"><calcite-icon icon=exclamation-mark-triangle scale=l></calcite-icon><div class="no-results-heading">${this._messages.traceFailedHeading}</div><div class="no-results-description">${this._messages.traceFailedDescription}</div><div class="no-results-description">${t}</div></div></calcite-panel>`;
   }
   _renderNoResultsLanding() {
-    return r`<calcite-panel class="white-panel-background">${this._renderTraceResultsHeading()}<div class="no-results-landing"><calcite-icon icon=exclamation-mark-triangle scale=l></calcite-icon><div class="no-results-heading">${this._messages.noResultsHeading}</div><div class="no-results-description">${this._messages.noResultsDescription}</div></div></calcite-panel>`;
+    return i`<calcite-panel class="white-panel-background">${this._renderTraceResultsHeading()}<div class="no-results-landing"><calcite-icon icon=exclamation-mark-triangle scale=l></calcite-icon><div class="no-results-heading">${this._messages.noResultsHeading}</div><div class="no-results-description">${this._messages.noResultsDescription}</div></div></calcite-panel>`;
   }
   _renderNoTraceLanding() {
-    return r`<calcite-panel class="white-panel-background">${this._renderTraceResultsHeading()}<div class="no-results-landing"><calcite-icon icon=utility-network-trace scale=l></calcite-icon><div class="no-results-heading">${this._messages.noTraceConfigHeading}</div><div class="no-results-description">${this._messages.noTraceConfigDescription}</div></div></calcite-panel>`;
+    return i`<calcite-panel class="white-panel-background">${this._renderTraceResultsHeading()}<div class="no-results-landing"><calcite-icon icon=utility-network-trace scale=l></calcite-icon><div class="no-results-heading">${this._messages.noTraceConfigHeading}</div><div class="no-results-description">${this._messages.noTraceConfigDescription}</div></div></calcite-panel>`;
   }
 }
-f("arcgis-utility-network-trace-results", S);
+f("arcgis-utility-network-trace-results", E);
 export {
-  S as ArcgisUtilityNetworkTraceResults
+  E as ArcgisUtilityNetworkTraceResults
 };

package/dist/components/arcgis-value-picker-legacy/customElement.d.ts

@@ -2,27 +2,26 @@
 import type { ValuePickerEvents, ValuePickerComponent } from "@arcgis/core/widgets/ValuePicker.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { ArcgisReferenceElement, IconName } from "../types.js";
-import type { AnimateEvent } from "@arcgis/core/widgets/ValuePicker/types";
+import type { AnimateEvent, Layout } from "@arcgis/core/widgets/ValuePicker/types.js";
 import type { Icon } from "@esri/calcite-components/components/calcite-icon";
-import type { Layout } from "@arcgis/core/widgets/ValuePicker/types.js";
 
 /**
  * > [!WARNING]
  * >
  * > This is a **legacy component**. It relies on an underlying widget as part of our migration to native web components.
  * >
- * > A fully native replacement for this component is in development. Once it reaches feature parity, the legacy component will be deprecated and no longer maintained. At that point, new development should use the native component.
+ * > A fully native replacement for this component is in development. Once it reaches feature parity, the legacy component will be deprecated and no longer maintained. At that point, development should use the native component.
  *
  * Value Picker is a component that allows users to step or play through a list of values. Value Picker component can be configured
- * with an optional [collection](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/#from-collection),
- * [label](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/#from-labels),
- * [combobox](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/#selectable-items) or
- * [slider](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/#numeric-values)
+ * with an optional [collection](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-legacy/#from-collection),
+ * [label](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-legacy/#from-labels),
+ * [combobox](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-legacy/#selectable-items) or
+ * [slider](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-legacy/#numeric-values)
  * control to help users navigate values.
  *
  * Similar to a media player, values can be interactively stepped through using the `next` and `previous` buttons.
  * Value Picker can also be set to automatically progress (play) through an ordered
- * list of items at a [preset interval](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/#playRate).
+ * list of items at a [playRate](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-legacy/#playRate).
  *
  * ### Configuring Value Picker
  *
@@ -79,7 +78,7 @@ import type { Layout } from "@arcgis/core/widgets/ValuePicker/types.js";
  * valuePicker.values = ["ind"];
  * ```
  *
- * The user's interaction can be handled by monitoring the [values](#values) property.
+ * The user's interaction can be handled by monitoring the [values](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-legacy/#values) property.
  *
  * ```js
  * valuePicker.addEventListener("arcgisPropertyChange", () => {
@@ -121,9 +120,9 @@ import type { Layout } from "@arcgis/core/widgets/ValuePicker/types.js";
  * valuePicker.values = ["topo-vector"];
  * ```
  *
- * As the user clicks the _next_, _previous_, and _play_ buttons, the [values](#values) property updates.
- * Handle this by listening for the [arcgisPropertyChange](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/#arcgisPropertyChange)
- * event when the component’s [values](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/#values)
+ * As the user clicks the _next_, _previous_, and _play_ buttons, the [values](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-legacy/#values) property updates.
+ * Handle this by listening for the [@arcgisPropertyChange](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-legacy/#event-arcgisPropertyChange)
+ * event when the component’s [values](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-legacy/#values)
  * property changes, as shown below.
  *
  * ```js
@@ -160,7 +159,7 @@ import type { Layout } from "@arcgis/core/widgets/ValuePicker/types.js";
  * valuePicker.values = ["res"];
  * ```
  *
- * The user's interaction can be handled by monitoring the [values](#values) property.
+ * The user's interaction can be handled by monitoring the [values](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-legacy/#values) property.
  *
  * ```js
  * valuePicker.addEventListener("arcgisPropertyChange", () => {
@@ -347,8 +346,8 @@ export abstract class ArcgisValuePickerLegacy extends LitElement {
    * [ValuePickerSlider](https://developers.arcgis.com/javascript/latest/references/core/widgets/ValuePicker/ValuePickerSlider/).
    *
    * If this property is not set then the play, next and previous buttons will always be enabled. In this case, listen to the
-   * component events, for example, [@previous](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/#arcgisPrevious) and
-   * [@next](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/#arcgisNext), when the user interacts with the
+   * component events, for example, [@arcgisPrevious](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-legacy/#event-arcgisPrevious) and
+   * [@arcgisNext](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-legacy/#event-arcgisNext), when the user interacts with the
    * component.
    *
    * @example
@@ -482,7 +481,7 @@ export abstract class ArcgisValuePickerLegacy extends LitElement {
    */
   accessor referenceElement: ArcgisReferenceElement | string | undefined;
   /**
-   * The current values of the Value Picker component. The type for this property depends on which [component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/#component) is being used. For example, a
+   * The current values of the Value Picker component. The type for this property depends on which [component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-legacy/#component) is being used. For example, a
    * [slider](https://developers.arcgis.com/javascript/latest/references/core/widgets/ValuePicker/ValuePickerSlider/) component will return an array of numbers.
    *
    * If the `component` is not set then this property will return `null`. Similarly this property can be `null`
@@ -542,7 +541,7 @@ export abstract class ArcgisValuePickerLegacy extends LitElement {
   /** Pause playing. */
   pause(): Promise<void>;
   /**
-   * Start playing. Value Picker will advance at the rate specified by [playRate](#playRate).
+   * Start playing. Value Picker will advance at the rate specified by [playRate](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-legacy/#playRate).
    *
    * @example
    * ```js
@@ -594,7 +593,7 @@ export abstract class ArcgisValuePickerLegacy extends LitElement {
   "@setterTypes": {
     icon?: IconName;
   };
-  /** Fires when the Value Picker is playing at a rate defined by [playRate](#playRate). */
+  /** Fires when the Value Picker is playing at a rate defined by [playRate](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker-legacy/#playRate). */
   readonly arcgisAnimate: import("@arcgis/lumina").TargetedEvent<this, AnimateEvent>;
   /** Fires when the Value Picker's next button is clicked. */
   readonly arcgisNext: import("@arcgis/lumina").TargetedEvent<this, ValuePickerEvents["next"]>;