@arcgis/map-components 5.1.0-next.82 → 5.1.0-next.84

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

@@ -1 +1,8 @@
+import "@esri/calcite-components/components/calcite-action-menu";
+import "@esri/calcite-components/components/calcite-action";
+import "@arcgis/common-components/components/arcgis-ticks";
+import "@esri/calcite-components/components/calcite-label";
+import "@esri/calcite-components/components/calcite-button";
+import "@arcgis/common-components/components/arcgis-slider";
+import "@esri/calcite-components/components/calcite-icon";
 export * from "./customElement.js";

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

@@ -0,0 +1,147 @@
+import type TimeExtent from "@arcgis/core/time/TimeExtent.js";
+import type TimeInterval from "@arcgis/core/time/TimeInterval.js";
+import type { IconName } from "../types.js";
+
+/** Defines the layout options for the time slider component. */
+export type Layout = "auto" | "compact" | "wide";
+
+/** Defines the different modes of the time slider component. */
+export type Mode = "cumulative-from-end" | "cumulative-from-start" | "instant" | "time-window";
+
+/** Defines the different states of the time slider component. */
+export type State = "disabled" | "playing" | "ready";
+
+/** Stops are positioned at specific dates. */
+export interface StopsByDates {
+  dates: Date[];
+}
+
+/** Stops are positioned at regular intervals defined by a [time interval](https://developers.arcgis.com/javascript/latest/references/core/time/TimeInterval). */
+export interface StopsByInterval {
+  /** The interval at which stops will be created. */
+  interval: TimeInterval;
+  /** The time extent over which the stops will be distributed. */
+  timeExtent?: TimeExtent;
+}
+
+/**
+ * Stops are positioned at a specific number of evenly spaced locations along the time slider.
+ * The exact positions of the stops will be calculated based on the provided count and the time extent of the slider.
+ */
+export interface StopsByCount {
+  /** The number of stops to create along the time slider. */
+  count: number;
+  /** The time extent over which the stops will be distributed. */
+  timeExtent?: TimeExtent;
+}
+
+export type Stops = StopsByCount | StopsByDates | StopsByInterval;
+
+/**
+ * An action that can be performed by the user in the time slider component.
+ * Actions are displayed in a menu that appears when the user clicks the ellipsis button in the component.
+ */
+export interface Action {
+  /** Unique identifier of the action. */
+  id: string;
+  /**
+   * The name of the icon to display.
+   * The value of this property must match the icon name from
+   * [Calcite UI Icons](https://developers.arcgis.com/calcite-design-system/icons/).
+   */
+  icon: IconName;
+  /** The title of the action that will be displayed in the menu. */
+  title: string;
+}
+
+/**
+ * Time slider settings derived from a
+ * [timeSlider widget](https://developers.arcgis.com/javascript/latest/references/core/webdoc/Widgets/#timeSlider) in a
+ * [web map](https://developers.arcgis.com/javascript/latest/references/core/WebMap) or
+ * [web scene](https://developers.arcgis.com/javascript/latest/references/core/WebScene).
+ */
+export interface TimeSliderSettings {
+  /**
+   * The temporal extent of the entire slider.
+   *
+   * @see [arcgis-time-slider.fullTimeExtent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-slider/#fullTimeExtent)
+   */
+  fullTimeExtent?: TimeExtent | null;
+  /**
+   * When `true`, the time slider will play its animation in a loop.
+   *
+   * @see [arcgis-time-slider.loop](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-slider/#loop)
+   */
+  loop: boolean;
+  /**
+   * The time slider mode.
+   *
+   * @see [arcgis-time-slider.mode](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-slider/#mode)
+   */
+  mode?: Mode;
+  /**
+   * The time (in milliseconds) between animation steps.
+   *
+   * @see [arcgis-time-slider.playRate](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-slider/#playRate)
+   */
+  playRate?: number;
+  /**
+   * Defines specific locations on the time slider where thumbs will snap to when manipulated.
+   *
+   * @see [arcgis-time-slider.stops](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-slider/#stops)
+   */
+  stops?: Stops | null;
+  /**
+   * The current time extent of the time slider.
+   *
+   * @see [arcgis-time-slider.timeExtent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-slider/#timeExtent)
+   */
+  timeExtent?: TimeExtent | null;
+}
+
+/** Event payload for the trigger-action event. */
+export interface TriggerActionEvent {
+  /** The action that was clicked. */
+  action: Action;
+}
+
+/** Describes the type of date label that is being formatted by the date label formatter function. */
+export type DateLabelType = "extent" | "max" | "min";
+
+/**
+ * A function that formats the date labels displayed on the time slider.
+ *
+ * @param value
+ * @param type
+ * @param element
+ * @param layout
+ */
+export type DateLabelFormatter = (value: Date | [Date | null | undefined, Date | null | undefined] | null | undefined, type: DateLabelType, element: HTMLElement, layout: Exclude<Layout, "auto">) => void;
+
+/**
+ * Given a tick value, this function returns the label to display for that tick.
+ *
+ * @param value
+ */
+export type TickLabelFormatter = (value: number) => string;
+
+/** This type defines how tick values are interpreted and positioned along the time slider component. */
+export type TickMode = "count" | "percent" | "position";
+
+/**
+ * Tick mark and label configuration for the time slider component.
+ * Each tick configuration includes a `mode` that determines how the tick values are calculated, and a `labelFormatFunction` that formats the tick labels.
+ */
+export interface TickConfig {
+  /** If `labelsVisible` is `true`, this function will be used to format the labels for the ticks based on their values. */
+  labelFormatFunction?: TickLabelFormatter;
+  /**
+   * If `true`, labels will be rendered for the ticks based on their values and the provided `labelFormatFunction`.
+   * If `false`, only tick marks will be rendered without labels.
+   */
+  labelsVisible?: boolean;
+  /** The mode or method of positioning ticks. */
+  mode: TickMode;
+  /** The value or values for the ticks. */
+  values: number[] | number;
+}

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

@@ -1,28 +1,27 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as m } from "../../chunks/runtime.js";
 import { css as y, html as s } from "lit";
-import { ref as o } from "lit/directives/ref.js";
-import { keyed as h } from "lit/directives/keyed.js";
-import g from "@arcgis/core/Color.js";
+import { ref as h } from "lit/directives/ref.js";
+import { keyed as g } from "lit/directives/keyed.js";
+import u from "@arcgis/core/Color.js";
 import "@arcgis/core/core/Error.js";
 import { when as f } from "@arcgis/core/core/reactiveUtils.js";
 import w from "@arcgis/core/networks/UtilityNetworkTraceAnalysis.js";
-import { LitElement as b, createEvent as l } from "@arcgis/lumina";
-import { log as T } from "@arcgis/toolkit/log";
+import { LitElement as T, createEvent as c } from "@arcgis/lumina";
+import { log as b } from "@arcgis/toolkit/log";
 import { u as v } from "../../chunks/useT9n.js";
 import { m as _ } from "../../chunks/useViewModel.js";
 import { l as R } from "../../chunks/async-utils.js";
 const $ = y`:host{--arcgis-internal-color-black-30: color-mix(in srgb, #000000 30.2%, transparent);--arcgis-internal-box-shadow: var(--calcite-spacing-none) var(--calcite-spacing-px) var(--calcite-spacing-base) var(--arcgis-internal-color-black-30);--arcgis-internal-top-max-width: calc(min(100cqw, 100vw) - var(--calcite-spacing-xxxl));--arcgis-internal-panel-width: 300px;--arcgis-internal-panel-height: 100%;--arcgis-internal-panel-height-sm: 240px;--arcgis-internal-panel-height-md: 420px;--arcgis-internal-panel-height-lg: 540px;--arcgis-internal-panel-height-xl: 680px;--arcgis-internal-panel-gap: var(--calcite-spacing-lg);--arcgis-internal-panel-actions-gap: var(--calcite-spacing-sm);--arcgis-internal-basemap-gallery-width-lg: 450px;--arcgis-internal-collapse-icon-flip: scaleX(1);--arcgis-internal-row-direction: row;--arcgis-internal-legend-width: 300px;--arcgis-internal-layout-overlay-space-top: var(--arcgis-layout-overlay-space-top, 0px);--arcgis-internal-layout-overlay-space-bottom: var(--arcgis-layout-overlay-space-bottom, 0px);--arcgis-internal-layout-overlay-space-left: var(--arcgis-layout-overlay-space-left, 0px);--arcgis-internal-layout-overlay-space-right: var(--arcgis-layout-overlay-space-right, 0px);--arcgis-internal-view-color-focus: var(--arcgis-view-color-focus, var(--calcite-color-brand));--arcgis-internal-attribution-space-bottom: var(--arcgis-internal-layout-overlay-space-bottom);--arcgis-internal-attribution-space-left: var(--arcgis-internal-layout-overlay-space-left);--arcgis-internal-attribution-space-right: var(--arcgis-internal-layout-overlay-space-right);--arcgis-internal-attribution-font-size: var(--calcite-font-size-sm);--arcgis-internal-attribution-font-size-sm: var(--calcite-font-size-xs);--arcgis-internal-sketch-justify-content: flex-start}:host{display:flex;flex-direction:column;height:var(--arcgis-internal-panel-height, 100%)}.inputs-tab-container{display:flex;flex-direction:column;height:100%}.trace-inputs-warning{flex:none;height:fit-content;--calcite-panel-background-color: var(--calcite-color-foreground-1);calcite-notice{margin:var(--calcite-spacing-md) var(--calcite-spacing-md) 0 var(--calcite-spacing-md)}}arcgis-utility-network-trace-inputs[mode=default]{height:auto}calcite-tabs{display:flex;flex-direction:column;height:100%}calcite-tab{--calcite-tab-content-space-y: 0}calcite-tab:not([selected]){flex:0}calcite-panel{--calcite-panel-background-color: var(--calcite-color-foreground-1)}calcite-notice{margin:var(--calcite-spacing-md)}`, C = _(w);
-class k extends b {
+class k extends T {
   constructor() {
     super(...arguments), this._messages = v({ blocking: !0 }), this._viewModel = C(this), this._highlightHandles = [], this._handleRunTraceButtonClick = () => {
-      const e = this._traceInputsElement?.traceLocations, t = this._traceInputsElement?.traceLocationFlagInfos, a = e?.some((i) => i.type === "starting-point"), r = t?.some((i) => !!i.flagProperties.terminalConfiguration && !i.flagProperties.selectedTerminals?.size) ?? !1;
-      this.traceError = void 0, this.showNoStartingPointsWarning = !this._isSubnetworkNameTraceSelected && !a, this.showMissingTerminalWarning = r, !(this.showNoStartingPointsWarning || this.showMissingTerminalWarning) && (this.showNoStartingPointsWarning = !1, this.showMissingTerminalWarning = !1, this._clearTraceResult(), this._switchTab("results"), this._runTrace());
+      this._setTraceWarnings(), !(this.showNoStartingPointsWarning || this.showMissingTerminalWarning) && (this.showNoStartingPointsWarning = !1, this.showMissingTerminalWarning = !1, this._clearTraceResult(), this._switchTab("results"), this._runTrace());
     }, this._handleTraceInputsRefChange = (e) => {
       e && (this._traceInputsElement = e);
     }, this._handleTraceResultsRefChange = (e) => {
       e && (this._traceResultsElement = e);
-    }, this.activeTab = "input", this.showMissingTerminalWarning = !1, this.showNoStartingPointsWarning = !1, this.mode = "default", this.autoDestroyDisabled = !1, this.aggregatedGeometryGraphicsColor = new g([255, 255, 0, 0.6]), this.disableHighlightFeatureResults = !1, this.hideActionBar = !1, this.hideFeatureResults = !1, this.state = this._viewModel.state, this.view = this._viewModel.view, this.arcgisHideGraphicsChange = l(), this.arcgisReady = l(), this.arcgisTraceLocationSelectEnd = l(), this.arcgisTraceLocationSelectStart = l(), this.arcgisTraceResultClear = l(), this.arcgisTraceResultFeaturesReady = l();
+    }, this.activeTab = "input", this.showMissingTerminalWarning = !1, this.showNoStartingPointsWarning = !1, this.mode = "default", this.autoDestroyDisabled = !1, this.aggregatedGeometryGraphicsColor = new u([255, 255, 0, 0.6]), this.disableHighlightFeatureResults = !1, this.hideActionBar = !1, this.hideFeatureResults = !1, this.state = this._viewModel.state, this.view = this._viewModel.view, this.arcgisHideGraphicsChange = c(), this.arcgisReady = c(), this.arcgisTraceLocationSelectEnd = c(), this.arcgisTraceLocationSelectStart = c(), this.arcgisTraceResultClear = c(), this.arcgisTraceResultFeaturesReady = c();
   }
   static {
     this.properties = { activeTab: 16, traceError: 16, traceResult: 16, showMissingTerminalWarning: 16, showNoStartingPointsWarning: 16, mode: 16, autoDestroyDisabled: 5, beforeTraceLocationSelectStart: 0, aggregatedGeometryGraphicsColor: 0, disableHighlightFeatureResults: 5, hideActionBar: 5, hideFeatureResults: 5, label: 3, messageOverrides: 0, traceResultFeatures: 32, referenceElement: 1, state: 32, view: 0 };
@@ -52,6 +51,10 @@ class k extends b {
   _clearTraceResult() {
     this.traceResult = void 0, this._clearHighlights(), this._clearAggregatedGeometryGraphics();
   }
+  _setTraceWarnings() {
+    const e = this._traceInputsElement?.traceLocations, t = this._traceInputsElement?.traceLocationFlagInfos, r = !!this._traceInputsElement?.unTraceConfiguration?.subnetworkName, i = e?.some((l) => l.type === "starting-point"), n = t?.some((l) => !!l.flagProperties.terminalConfiguration && !l.flagProperties.selectedTerminals?.size) ?? !1;
+    this.traceError = void 0, this.showNoStartingPointsWarning = !this._isSubnetworkNameTraceSelected && !i || this._isSubnetworkNameTraceSelected && !r, this.showMissingTerminalWarning = n;
+  }
   _switchTab(e) {
     this.activeTab = e;
   }
@@ -82,23 +85,23 @@ class k extends b {
       return;
     a.getObjectIdsFromElements(e.elements).forEach((i) => {
       const n = t.allLayerViews.find((d) => {
-        const c = d.layer;
-        if (a.isUtilityLayer(c)) {
+        const o = d.layer;
+        if (a.isUtilityLayer(o)) {
           const p = Number(i.layerUrl.split("/").pop());
-          return c.layerId === p;
+          return o.layerId === p;
         }
         return !1;
       });
       if (!n)
         return;
-      const u = n.highlight(i.objectIds);
-      this._highlightHandles.push(u);
+      const l = n.highlight(i.objectIds);
+      this._highlightHandles.push(l);
     });
   }
   async _runTrace() {
     const e = this._traceInputsElement?.selectedNamedTraceConfiguration, t = this._traceInputsElement?.unTraceConfiguration;
     if (!(e?.traceType && t)) {
-      T("error", this, "Trace configuration not found");
+      b("error", this, "Trace configuration not found");
       return;
     }
     const a = this._traceInputsElement?.traceLocations;
@@ -128,7 +131,7 @@ class k extends b {
   }
   _handleAggregatedGeometryGraphicsColorChange(e) {
     const t = e.detail;
-    this.aggregatedGeometryGraphicsColor = new g(t);
+    this.aggregatedGeometryGraphicsColor = new u(t);
   }
   _handleSelectedNamedTraceConfigurationChange() {
     this.showNoStartingPointsWarning = !1, this.showMissingTerminalWarning = !1;
@@ -143,21 +146,18 @@ class k extends b {
     return s`<calcite-panel class="trace-inputs-warning"><calcite-notice open icon=exclamation-mark-triangle closable kind=danger scale=s @calciteNoticeClose=${() => this.showNoStartingPointsWarning = !1}><div slot=title>${this._messages.errors.noStartingPointsTitle}</div><div slot=message>${this._messages.errors.noStartingPointsBody}</div></calcite-notice></calcite-panel>`;
   }
   renderResultsTab() {
-    return h(`${this.el.id}__results-tab-item`, s`<calcite-tab .selected=${this.activeTab === "results"}>${this._viewModel.state === "executing" ? s`<calcite-panel><calcite-loader .label=${this._messages.runningTrace} .text=${this._messages.runningTrace}></calcite-loader></calcite-panel>` : s`<arcgis-utility-network-trace-results .aggregatedGeometryGraphicsColor=${this.aggregatedGeometryGraphicsColor} .hideFeatureResults=${this.hideFeatureResults} .referenceElement=${this.referenceElement} .hideActionBar=${this.hideActionBar} .layers=${this._allLayers} .traceConfigTitle=${this._selectedTraceConfig?.title} .traceError=${this.traceError} .traceResult=${this.traceResult} .utilityNetwork=${this._viewModel.utilityNetwork ?? void 0} .view=${this.view ?? void 0} .messageOverrides=${{ resultFeaturesAreHidden: this.messageOverrides?.resultFeaturesAreHidden }} @arcgisHideGraphicsChange=${this._handleHideGraphicsChange} @arcgisTraceResultFeaturesReady=${this._handleTraceResultFeaturesReady} @arcgisAggregatedGeometryGraphicsColorChange=${this._handleAggregatedGeometryGraphicsColorChange} .autoDestroyDisabled=${this.autoDestroyDisabled} ${o(this._handleTraceResultsRefChange)}></arcgis-utility-network-trace-results>`}</calcite-tab>`);
+    return g(`${this.el.id}__results-tab-item`, s`<calcite-tab .selected=${this.activeTab === "results"}>${this._viewModel.state === "executing" ? s`<calcite-panel><calcite-loader .label=${this._messages.runningTrace} .text=${this._messages.runningTrace}></calcite-loader></calcite-panel>` : s`<arcgis-utility-network-trace-results .aggregatedGeometryGraphicsColor=${this.aggregatedGeometryGraphicsColor} .hideFeatureResults=${this.hideFeatureResults} .referenceElement=${this.referenceElement} .hideActionBar=${this.hideActionBar} .layers=${this._allLayers} .traceConfigTitle=${this._selectedTraceConfig?.title} .traceError=${this.traceError} .traceResult=${this.traceResult} .utilityNetwork=${this._viewModel.utilityNetwork ?? void 0} .view=${this.view ?? void 0} .messageOverrides=${{ resultFeaturesAreHidden: this.messageOverrides?.resultFeaturesAreHidden }} @arcgisHideGraphicsChange=${this._handleHideGraphicsChange} @arcgisTraceResultFeaturesReady=${this._handleTraceResultFeaturesReady} @arcgisAggregatedGeometryGraphicsColorChange=${this._handleAggregatedGeometryGraphicsColorChange} .autoDestroyDisabled=${this.autoDestroyDisabled} ${h(this._handleTraceResultsRefChange)}></arcgis-utility-network-trace-results>`}</calcite-tab>`);
   }
   renderResultsFooter() {
-    const { mode: e, state: t } = this;
-    if (e !== "default")
-      return null;
-    const { traceResult: a } = this, i = !!(a?.elements.length || a?.globalFunctionResults.length || a?.aggregatedGeometry) && this._traceResultsElement?.state === "ready", n = this._traceResultsElement?.numResults ?? 0;
+    const { state: e } = this, { traceResult: t } = this, r = !!(t?.elements.length || t?.globalFunctionResults.length || t?.aggregatedGeometry) && this._traceResultsElement?.state === "ready", i = this._traceResultsElement?.numResults ?? 0;
     return s`<calcite-button appearance=outline width=full @click=${() => {
       this._switchTab("input"), this._clearTraceResult(), this.arcgisTraceResultClear.emit();
-    }} .disabled=${!i} slot=footer>${n > 0 && !this.hideFeatureResults && t !== "executing" ? this._messages.buttons.clearResultsCustom.replace("{number}", n.toString()) : this._messages.buttons.clearResultsGeneric}</calcite-button>`;
+    }} .disabled=${!r} slot=footer>${i > 0 && !this.hideFeatureResults && e !== "executing" ? this._messages.buttons.clearResultsCustom.replace("{number}", i.toString()) : this._messages.buttons.clearResultsGeneric}</calcite-button>`;
   }
   renderInputTab() {
-    return h(`${this.el.id}__inputs-tab-item`, s`<calcite-tab .selected=${this.activeTab === "input"}><div class="inputs-tab-container">${this.showNoStartingPointsWarning && this.mode === "default" && this.renderNoStartingPointsWarning() || ""}${this.showMissingTerminalWarning && this.mode === "default" && this.renderMissingTerminalWarning() || ""}<arcgis-utility-network-trace-inputs .view=${this.view || void 0} .referenceElement=${this.referenceElement} .beforeTraceLocationSelectStart=${this.beforeTraceLocationSelectStart} .hideActionBar=${this.hideActionBar} @arcgisSelectedNamedTraceConfigurationChange=${this._handleSelectedNamedTraceConfigurationChange} @arcgisUtilityNetworkChange=${this._handleUtilityNetworkChange} @arcgisTraceLocationSelectStart=${this._handleTraceLocationSelectStart} @arcgisTraceLocationSelectEnd=${this._handleTraceLocationSelectEnd} @arcgisPropertyChange=${(e) => {
+    return g(`${this.el.id}__inputs-tab-item`, s`<calcite-tab .selected=${this.activeTab === "input"}><div class="inputs-tab-container">${this.showNoStartingPointsWarning && this.mode === "default" && this.renderNoStartingPointsWarning() || ""}${this.showMissingTerminalWarning && this.mode === "default" && this.renderMissingTerminalWarning() || ""}<arcgis-utility-network-trace-inputs .view=${this.view || void 0} .referenceElement=${this.referenceElement} .beforeTraceLocationSelectStart=${this.beforeTraceLocationSelectStart} .hideActionBar=${this.hideActionBar} @arcgisSelectedNamedTraceConfigurationChange=${this._handleSelectedNamedTraceConfigurationChange} @arcgisUtilityNetworkChange=${this._handleUtilityNetworkChange} @arcgisTraceLocationSelectStart=${this._handleTraceLocationSelectStart} @arcgisTraceLocationSelectEnd=${this._handleTraceLocationSelectEnd} @arcgisPropertyChange=${(e) => {
       e.stopPropagation(), e.detail.name === "mode" && (this.mode = e.target.mode);
-    }} .autoDestroyDisabled=${this.autoDestroyDisabled} ${o(this._handleTraceInputsRefChange)}></arcgis-utility-network-trace-inputs></div></calcite-tab>`);
+    }} .autoDestroyDisabled=${this.autoDestroyDisabled} ${h(this._handleTraceInputsRefChange)}></arcgis-utility-network-trace-inputs></div></calcite-tab>`);
   }
   renderInputFooter() {
     const { mode: e, state: t } = this;

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

@@ -351,7 +351,7 @@ class A extends T {
     return r`<arcgis-utility-network-trace-location .view=${this.view} trace-location-type=barrier .beforeTraceLocationSelectStart=${this.beforeTraceLocationSelectStart} @arcgisTraceLocationSelectStart=${this._handleTraceLocationSelectStart} @arcgisTraceLocationSelectEnd=${this._handleTraceLocationSelectEnd} @arcgisTraceLocationChange=${() => this.arcgisTraceInputsChange.emit()} .sketchViewModel=${this._sketchViewModel} .utilityNetwork=${this.selectedUtilityNetwork} .filterLayers=${this._unLayers} .traceLocations=${this._barriers} .afterHitTest=${this._handleHitTestComplete.bind(this)} .autoDestroyDisabled=${this.autoDestroyDisabled} ${h(this._traceLocationBarrierRefChange)}></arcgis-utility-network-trace-location>`;
   }
   renderSubnetworkNameInput() {
-    return r`<calcite-input clearable type=text .placeholder=${this._messages.instructions.enterSubnetworkName} max-length=64 .value=${this.selectedSubnetworkName} @calciteInputInput=${(e) => this.selectedSubnetworkName = e.target.value}></calcite-input><calcite-input-message icon=exclamation-mark-triangle status=idle>${this._messages.labels.tooManySubnetworks}</calcite-input-message>`;
+    return r`<calcite-input clearable type=text .placeholder=${this._messages.instructions.enterSubnetworkName} max-length=64 .status=${this.selectedSubnetworkName ? "valid" : "invalid"} .value=${this.selectedSubnetworkName} @calciteInputInput=${(e) => this.selectedSubnetworkName = e.target.value}></calcite-input><calcite-input-message icon=exclamation-mark-triangle status=idle>${this._messages.labels.tooManySubnetworks}</calcite-input-message>`;
   }
   renderSubnetworkSelectList() {
     return r`<calcite-combobox .label=${this._messages.labels.subnetworkName} selection-mode=single-persist @calciteComboboxChange=${({ currentTarget: e }) => {

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

@@ -0,0 +1,173 @@
+/// <reference path="../../index.d.ts" />
+import type UtilityNetwork from "@arcgis/core/networks/UtilityNetwork.js";
+import type ValidateNetworkTopologyResult from "@arcgis/core/rest/networks/support/ValidateNetworkTopologyResult.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 { T9nMeta } from "@arcgis/lumina/controllers";
+
+export abstract class ArcgisUtilityNetworkValidateNetworkTopology extends LitElement {
+  /** @internal */
+  protected _messages: {
+      componentLabel: string;
+      actions: { validateTopology: string; };
+      errors: {
+          cannotAcquireVersionLock: string;
+          noAdvancedEditingUserTypeExtension: string;
+          noDirtyAreasInExtent: string;
+          noDirtyAreasLayer: string;
+          noUtilityNetwork: string;
+          noUtilityNetworks: string;
+          noUtilityNetworkServiceUserTypeExtension: string;
+          noView: string;
+          operationOnlyAllowedByOwner: string;
+          sceneViewNotSupported: string;
+          setup: string;
+      };
+      info: { validateCanceled: string; };
+      input: {
+          selectExtent: {
+              label: string;
+              options: {
+                  currentExtent: string;
+                  entireExtent: string;
+              };
+          };
+          selectUtilityNetwork: { label: string; };
+      };
+      status: {
+          executing: string;
+          success: string;
+      };
+  } & T9nMeta<{
+      componentLabel: string;
+      actions: { validateTopology: string; };
+      errors: {
+          cannotAcquireVersionLock: string;
+          noAdvancedEditingUserTypeExtension: string;
+          noDirtyAreasInExtent: string;
+          noDirtyAreasLayer: string;
+          noUtilityNetwork: string;
+          noUtilityNetworks: string;
+          noUtilityNetworkServiceUserTypeExtension: string;
+          noView: string;
+          operationOnlyAllowedByOwner: string;
+          sceneViewNotSupported: string;
+          setup: string;
+      };
+      info: { validateCanceled: string; };
+      input: {
+          selectExtent: {
+              label: string;
+              options: {
+                  currentExtent: string;
+                  entireExtent: string;
+              };
+          };
+          selectUtilityNetwork: { label: string; };
+      };
+      status: {
+          executing: string;
+          success: string;
+      };
+  }>;
+  /**
+   * A function to run before validate utility network topology starts.
+   *
+   * @internal
+   */
+  accessor beforeValidateNetworkTopologyStart: (() => Promise<void>) | undefined;
+  /** @default false */
+  accessor disabled: boolean;
+  /** @default "current" */
+  accessor extentToValidate: ExtentOption;
+  /** @default false */
+  accessor hideUtilityNetworkSelect: boolean;
+  /** The component's default label. */
+  accessor label: string | undefined;
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: {
+      componentLabel?: string | undefined;
+      actions?: { validateTopology?: string | undefined; } | undefined;
+      errors?: {
+          cannotAcquireVersionLock?: string | undefined;
+          noAdvancedEditingUserTypeExtension?: string | undefined;
+          noDirtyAreasInExtent?: string | undefined;
+          noDirtyAreasLayer?: string | undefined;
+          noUtilityNetwork?: string | undefined;
+          noUtilityNetworks?: string | undefined;
+          noUtilityNetworkServiceUserTypeExtension?: string | undefined;
+          noView?: string | undefined;
+          operationOnlyAllowedByOwner?: string | undefined;
+          sceneViewNotSupported?: string | undefined;
+          setup?: string | undefined;
+      } | undefined;
+      info?: { validateCanceled?: string | undefined; } | undefined;
+      input?: {
+          selectExtent?: {
+              label?: string | undefined;
+              options?: {
+                  currentExtent?: string | undefined;
+                  entireExtent?: string | undefined;
+              } | undefined;
+          } | undefined;
+          selectUtilityNetwork?: { label?: string | undefined; } | undefined;
+      } | undefined;
+      status?: {
+          executing?: string | undefined;
+          success?: string | undefined;
+      } | undefined;
+  };
+  /**
+   * By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
+   *
+   * @see [Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)
+   */
+  accessor referenceElement: ArcgisReferenceElement | string | undefined;
+  accessor result: ValidateNetworkTopologyResult | undefined;
+  accessor state: State;
+  accessor utilityNetwork: UtilityNetwork | undefined;
+  accessor view: MapView | undefined;
+  readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly arcgisValidateNetworkTopologyEnd: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly arcgisValidateNetworkTopologyStart: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    arcgisReady: ArcgisUtilityNetworkValidateNetworkTopology["arcgisReady"]["detail"];
+    arcgisValidateNetworkTopologyEnd: ArcgisUtilityNetworkValidateNetworkTopology["arcgisValidateNetworkTopologyEnd"]["detail"];
+    arcgisValidateNetworkTopologyStart: ArcgisUtilityNetworkValidateNetworkTopology["arcgisValidateNetworkTopologyStart"]["detail"];
+  };
+}
+
+export type ExtentOption = "current" | "entire";
+
+export type State = Disabled | Executing | Loading | Ready | Success | ValidateNetworkTopologyError;
+
+export interface Disabled {
+  type: "disabled";
+}
+
+export interface Executing {
+  type: "executing";
+}
+
+export interface Loading {
+  type: "loading";
+}
+
+export interface Ready {
+  type: "ready";
+}
+
+export interface Success {
+  type: "success";
+  message: string;
+}
+
+export interface ValidateNetworkTopologyError {
+  type: "error-disable-component" | "error-disable-execute" | "error-info";
+  message: string;
+}