@arcgis/map-components 5.2.0-next.120 → 5.2.0-next.122

package/dist/components/arcgis-selection-toolbar/customElement.js

@@ -1,28 +1,28 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as g } from "../../chunks/runtime.js";
-import { css as v, html as a } from "lit";
-import { keyed as h } from "lit/directives/keyed.js";
-import { substitute as p, formatNumber as m } from "@arcgis/core/intl.js";
-import T from "@arcgis/core/widgets/support/SelectionToolbar/SelectionToolbarViewModel.js";
-import { LitElement as b, createEvent as y, nothing as r } from "@arcgis/lumina";
+import { c as v } from "../../chunks/runtime.js";
+import { css as T, html as s } from "lit";
+import { keyed as p } from "lit/directives/keyed.js";
+import { substitute as h, formatNumber as y } from "@arcgis/core/intl.js";
+import m from "@arcgis/core/widgets/support/SelectionToolbar/SelectionToolbarViewModel.js";
+import { LitElement as b, createEvent as u, nothing as a } from "@arcgis/lumina";
 import { usePropertyChange as w } from "@arcgis/lumina/controllers";
 import { reEmitEvent as d } from "@arcgis/lumina-toolkit/reEmitEvent";
 import { u as M } from "../../chunks/useT9n.js";
 import { m as O } from "../../chunks/useViewModel.js";
-const S = v`:host{width:100%;display:flex;>*{align-items:center;align-self:center;height:100%;width:100%}}.root{display:flex;flex-direction:column}calcite-action-bar[layout=horizontal]{width:100%;calcite-chip{margin-inline-start:auto}}calcite-action-bar[layout=vertical]{height:100%;calcite-chip{margin-block-start:auto}}calcite-action-bar slot{align-items:center}calcite-dropdown:has(calcite-action:not([text-enabled])){align-self:center}calcite-action:not([text-enabled]){align-self:center}calcite-chip{display:flex;align-self:center;line-height:initial}calcite-dropdown{calcite-icon{margin-inline-start:var(--calcite-space-2xs)}}calcite-chip[closed]{display:inline-flex}calcite-progress{--calcite-progress-background-color: transparent}`, u = {
+const C = T`:host{width:100%;display:flex;>*{align-items:center;align-self:center;height:100%;width:100%}}.root{display:flex;flex-direction:column}calcite-action-bar[layout=horizontal]{width:100%;calcite-chip{margin-inline-start:auto}}calcite-action-bar[layout=vertical]{height:100%;calcite-chip{margin-block-start:auto}}calcite-action-bar slot{align-items:center}calcite-dropdown:has(calcite-action:not([text-enabled])){align-self:center}calcite-action:not([text-enabled]){align-self:center}calcite-chip{display:flex;align-self:center;line-height:initial}calcite-dropdown{calcite-icon{margin-inline-start:var(--calcite-space-2xs)}}calcite-chip[closed]{display:inline-flex}calcite-progress{--calcite-progress-background-color: transparent}`, g = {
   replace: "overwrite-features",
   add: "cursor-plus",
   remove: "cursor-minus"
-}, $ = O(T);
-class D extends b {
+}, S = O(m);
+class $ extends b {
   constructor() {
-    super(...arguments), this.viewModel = $(this), this.messages = M(), this.autoDestroyDisabled = !1, this.disabled = !1, this.icon = "selection-set", this.view = this.viewModel.view, this.activeOperation = this.viewModel.activeOperation, this.availableOperationTypes = ["replace", "add", "remove"], this.continuousSelectionEnabled = this.viewModel.continuousSelectionEnabled, this.defaultLassoToolOptions = this.viewModel.defaultLassoToolOptions, this.defaultOperationType = this.viewModel.defaultOperationType, this.defaultPointToolOptions = this.viewModel.defaultPointToolOptions, this.defaultRectangleToolOptions = this.viewModel.defaultRectangleToolOptions, this.effectiveSelectionManager = this.viewModel.effectiveSelectionManager, this.effectiveSources = this.viewModel.effectiveSources, this.hideChip = !1, this.hideLassoTool = !1, this.hideOperationTypeControls = !1, this.hidePanTool = !1, this.hidePointTool = !1, this.hideProgress = !1, this.hideRectangleTool = !1, this.layout = "horizontal", this.returnFeatureTitleFields = this.viewModel.returnFeatureTitleFields, this.selectionManager = this.viewModel.selectionManager, this.showTextLabels = !1, this.sources = this.viewModel.sources, this.toolConfigs = this.viewModel.toolConfigs, this.visualScale = "m", this.arcgisBeforeActivate = d(() => this.viewModel, "before-activate"), this.arcgisComplete = d(() => this.viewModel, "complete"), this.arcgisPropertyChange = w()("activeOperation", "state"), this.arcgisReady = y(), this.arcgisSelectionChange = d(() => this.viewModel, "selection-change");
+    super(...arguments), this.viewModel = S(this), this.messages = M(), this.autoDestroyDisabled = !1, this.disabled = !1, this.icon = "selection-set", this.view = this.viewModel.view, this.activeOperation = this.viewModel.activeOperation, this.availableOperationTypes = ["replace", "add", "remove"], this.continuousSelectionEnabled = this.viewModel.continuousSelectionEnabled, this.defaultLassoToolOptions = this.viewModel.defaultLassoToolOptions, this.defaultOperationType = this.viewModel.defaultOperationType, this.defaultPolygonToolOptions = this.viewModel.defaultPolygonToolOptions, this.defaultPointToolOptions = this.viewModel.defaultPointToolOptions, this.defaultRectangleToolOptions = this.viewModel.defaultRectangleToolOptions, this.effectiveSelectionManager = this.viewModel.effectiveSelectionManager, this.effectiveSources = this.viewModel.effectiveSources, this.hideChip = !1, this.hideChipCloseButton = !1, this.hideLassoTool = !1, this.hideOperationTypeControls = !1, this.hidePanTool = !1, this.hidePolygonTool = !1, this.hidePointTool = !1, this.hideProgress = !1, this.hideRectangleTool = !1, this.layout = "horizontal", this.returnFeatureTitleFields = this.viewModel.returnFeatureTitleFields, this.selectionManager = this.viewModel.selectionManager, this.showTextLabels = !1, this.sources = this.viewModel.sources, this.toolConfigs = this.viewModel.toolConfigs, this.visualScale = "m", this.arcgisBeforeActivate = d(() => this.viewModel, "before-activate"), this.arcgisClear = u(), this.arcgisComplete = d(() => this.viewModel, "complete"), this.arcgisPropertyChange = w()("activeOperation", "state"), this.arcgisReady = u(), this.arcgisSelectionChange = d(() => this.viewModel, "selection-change");
   }
   static {
-    this.properties = { _effectiveDisabled: 16, _effectiveOperationType: 16, _processing: 16, autoDestroyDisabled: 5, disabled: 7, icon: 1, label: 1, referenceElement: 1, view: 0, activeOperation: 32, availableOperationTypes: 0, continuousSelectionEnabled: 5, defaultLassoToolOptions: 0, defaultOperationType: 1, defaultPointToolOptions: 0, defaultRectangleToolOptions: 0, effectiveSelectionManager: 32, effectiveSources: 32, hideChip: 5, hideLassoTool: 5, hideOperationTypeControls: 5, hidePanTool: 5, hidePointTool: 5, hideProgress: 5, hideRectangleTool: 5, layerViewPreferenceDisabled: 5, layout: 1, returnFeatureTitleFields: 5, returnGeometryDisabled: 5, selectionManager: 0, showTextLabels: 5, sources: 0, state: 32, syncResultsDisabled: 5, syncWhileDrawing: 5, toolConfigs: 0, visualScale: 1 };
+    this.properties = { _effectiveDisabled: 16, _effectiveOperationType: 16, _processing: 16, autoDestroyDisabled: 5, disabled: 7, icon: 1, label: 1, referenceElement: 1, view: 0, activeOperation: 32, availableOperationTypes: 0, continuousSelectionEnabled: 5, defaultLassoToolOptions: 0, defaultOperationType: 1, defaultPolygonToolOptions: 0, defaultPointToolOptions: 0, defaultRectangleToolOptions: 0, effectiveSelectionManager: 32, effectiveSources: 32, hideChip: 5, hideChipCloseButton: 5, hideLassoTool: 5, hideOperationTypeControls: 5, hidePanTool: 5, hidePolygonTool: 5, hidePointTool: 5, hideProgress: 5, hideRectangleTool: 5, layerViewPreferenceDisabled: 5, layout: 1, returnFeatureTitleFields: 5, returnGeometryDisabled: 5, selectionManager: 0, showTextLabels: 5, sources: 0, state: 32, syncResultsDisabled: 5, syncWhileDrawing: 5, toolConfigs: 0, visualScale: 1 };
   }
   static {
-    this.styles = S;
+    this.styles = C;
   }
   get _effectiveDisabled() {
     return this.disabled || this.state === "disabled";
@@ -81,6 +81,9 @@ class D extends b {
     if (!this._effectiveDisabled)
       return this.viewModel.toggleTool(e);
   }
+  _handleClearSelection() {
+    this.effectiveSelectionManager?.clear(), this.arcgisClear.emit();
+  }
   _getLabelForSelectionOperationType(e) {
     const { messages: t } = this;
     switch (e) {
@@ -103,28 +106,38 @@ class D extends b {
         return t?.remove;
     }
   }
-  _getTextForChip() {
-    const { effectiveSelectionManager: e, layout: t, messages: i, visualScale: o } = this, s = e?.count ?? 0, l = o === "l" ? 999 : 99;
-    return i.countTruncated && s > l && t === "vertical" ? p(i.countTruncated, {
+  _getTextForChip(e) {
+    const { layout: t, messages: i, visualScale: o } = this, l = o === "l" ? 999 : 99;
+    return i.countTruncated && e > l && t === "vertical" ? h(i.countTruncated, {
       count: l
-    }) : m(s);
+    }) : y(e);
+  }
+  _getTooltipForChip(e) {
+    const { messages: t } = this;
+    return !t?.selectionCount || !t?.clearSelectionCount ? "" : this.hideChipCloseButton || e === 0 ? h(t.selectionCount, { count: e }) : h(t.clearSelectionCount, { count: e });
   }
   #i() {
     if (this.hideProgress)
       return;
     const e = this.messages.processing;
-    return a`<calcite-progress aria-label=${e ?? r} .label=${e} .type=${this._processing ? "indeterminate" : "determinate"}></calcite-progress>`;
+    return s`<calcite-progress aria-label=${e ?? a} .label=${e} .type=${this._processing ? "indeterminate" : "determinate"}></calcite-progress>`;
   }
   #o() {
-    return h("tools-group", a`<calcite-action-group>${this.#s()}${this.#a()}</calcite-action-group>`);
+    return p("tools-group", s`<calcite-action-group>${this.#s()}${this.#l()}</calcite-action-group>`);
   }
   #s() {
-    return [this.#l(), this.#n(), this.#d(), this.#c()];
+    return [
+      this.#a(),
+      this.#r(),
+      this.#c(),
+      this.#d(),
+      this.#h()
+    ];
   }
-  #a() {
+  #l() {
     return this.toolConfigs.map(({ toolName: e, icon: t }) => this.#e(e, t));
   }
-  #l() {
+  #a() {
     if (this.hidePanTool)
       return;
     const e = this.messages.pan ?? "";
@@ -132,24 +145,32 @@ class D extends b {
       active: !this.activeOperation,
       disabled: this._effectiveDisabled,
       icon: "pan",
-      onclick: () => this.cancel(),
+      onclick: () => {
+        this.cancel();
+      },
       text: e,
       title: e
     });
   }
-  #r() {
+  #n() {
     if (this.hideChip)
       return;
-    const { effectiveSelectionManager: e, messages: t } = this, i = e?.count ?? 0, o = this._getTextForChip(), s = t.clearSelectionCount ? p(t.clearSelectionCount, { count: i }) : void 0;
-    return a`<calcite-chip appearance=outline .closable=${i > 0} .disabled=${this._effectiveDisabled || i === 0} .label=${o} .scale=${this.visualScale} title=${s ?? r} @calciteChipClose=${() => e?.clear()}>${o}</calcite-chip>`;
+    const { effectiveSelectionManager: e } = this, t = e?.count ?? 0, i = this._getTextForChip(t), o = !this.hideChipCloseButton && t > 0;
+    return s`<calcite-chip appearance=outline .closable=${o} .disabled=${this._effectiveDisabled || t === 0} .label=${i} .scale=${this.visualScale} title=${this._getTooltipForChip(t) ?? a} @calciteChipClose=${this._handleClearSelection}>${i}</calcite-chip>`;
   }
-  #n() {
+  #r() {
     if (this.hidePointTool)
       return;
     const { messages: e } = this;
     return this.#e("point", "selection-set", e.point, e.selectByPoint);
   }
   #c() {
+    if (this.hidePolygonTool)
+      return;
+    const { messages: e } = this;
+    return this.#e("polygon", "polygon-select", e.polygon, e.selectByPolygon);
+  }
+  #h() {
     if (this.hideLassoTool)
       return;
     const { messages: e } = this;
@@ -161,35 +182,37 @@ class D extends b {
     const { messages: e } = this;
     return this.#e("rectangle", "cursor-marquee", e.rectangle, e.selectByRectangle);
   }
-  #h() {
+  #p() {
     const { availableOperationTypes: e } = this;
     if (this.hideOperationTypeControls || !e.length)
       return;
-    const { _effectiveOperationType: t, showTextLabels: i, visualScale: o } = this, s = u[t], l = this._getTextForSelectionOperationType(t), n = this._getLabelForSelectionOperationType(t);
-    return h("toggle-group", a`<calcite-action-group><calcite-dropdown overlay-positioning=fixed placement=bottom-start .scale=${o}><calcite-action class=tool-button .disabled=${this._effectiveDisabled} .icon=${s} .scale=${o} slot=trigger .text=${l ?? ""} .textEnabled=${i} title=${n ?? r}><calcite-icon icon=chevron-down scale=s></calcite-icon></calcite-action><calcite-dropdown-group>${e.map((c) => this.#p(c))}</calcite-dropdown-group></calcite-dropdown></calcite-action-group>`);
+    const { _effectiveOperationType: t, showTextLabels: i, visualScale: o } = this, l = g[t], n = this._getTextForSelectionOperationType(t), r = this._getLabelForSelectionOperationType(t);
+    return p("toggle-group", s`<calcite-action-group><calcite-dropdown overlay-positioning=fixed placement=bottom-start .scale=${o}><calcite-action class=tool-button .disabled=${this._effectiveDisabled} .icon=${l} .scale=${o} slot=trigger .text=${n ?? ""} .textEnabled=${i} title=${r ?? a}><calcite-icon icon=chevron-down scale=s></calcite-icon></calcite-action><calcite-dropdown-group>${e.map((c) => this.#u(c))}</calcite-dropdown-group></calcite-dropdown></calcite-action-group>`);
   }
-  #p(e) {
-    return a`<calcite-dropdown-item .iconStart=${u[e]} .selected=${this.defaultOperationType === e} @calciteDropdownItemSelect=${() => this.defaultOperationType = e}>${this._getLabelForSelectionOperationType(e)}</calcite-dropdown-item>`;
+  #u(e) {
+    return s`<calcite-dropdown-item .iconStart=${g[e]} .selected=${this.defaultOperationType === e} @calciteDropdownItemSelect=${() => this.defaultOperationType = e}>${this._getLabelForSelectionOperationType(e)}</calcite-dropdown-item>`;
   }
   #e(e, t = "selection", i = e, o = i) {
     return this.#t({
       active: this.activeOperation?.toolName === e,
       disabled: this._effectiveDisabled,
       icon: t,
-      onclick: () => this.toggleTool(e),
+      onclick: () => {
+        this.toggleTool(e);
+      },
       text: i,
       title: o
     });
   }
   #t(e) {
-    const { active: t, disabled: i, icon: o, onclick: s, text: l, title: n } = e, { showTextLabels: c, visualScale: f } = this;
-    return a`<calcite-action .active=${t} class=tool-button .disabled=${i} .icon=${o} @click=${s} .text=${l} .textEnabled=${c} title=${n ?? r} .scale=${f}></calcite-action>`;
+    const { active: t, disabled: i, icon: o, onclick: l, text: n, title: r } = e, { showTextLabels: c, visualScale: f } = this;
+    return s`<calcite-action .active=${t} class=tool-button .disabled=${i} .icon=${o} @click=${l} .text=${n} .textEnabled=${c} title=${r ?? a} .scale=${f}></calcite-action>`;
   }
   render() {
-    return a`<div><calcite-action-bar expand-toggle-disabled .layout=${this.layout} overflow-mode=none .scale=${this.visualScale}>${this.#h()}${this.#o()}${this.#r()}</calcite-action-bar>${this.#i()}</div>`;
+    return s`<div><calcite-action-bar expand-toggle-disabled .layout=${this.layout} overflow-mode=none .scale=${this.visualScale}>${this.#p()}${this.#o()}${this.#n()}</calcite-action-bar>${this.#i()}</div>`;
   }
 }
-g("arcgis-selection-toolbar", D);
+v("arcgis-selection-toolbar", $);
 export {
-  D as ArcgisSelectionToolbar
+  $ as ArcgisSelectionToolbar
 };

package/dist/components/arcgis-sketch/SketchComponentViewModel.d.ts

@@ -0,0 +1,84 @@
+import type Accessor from "@arcgis/core/core/Accessor.js";
+import type VisibleElements from "@arcgis/core/widgets/Sketch/VisibleElements.js";
+import type SelectionToolbarViewModel from "@arcgis/core/widgets/support/SelectionToolbar/SelectionToolbarViewModel.js";
+import type Graphic from "@arcgis/core/Graphic.js";
+import type SelectionOperation from "@arcgis/core/views/selection/SelectionOperation.js";
+import type { EventedAccessor } from "@arcgis/core/core/Evented.js";
+import type { default as SketchViewModel } from "@arcgis/core/widgets/Sketch/SketchViewModel.js";
+import type { CreateOptions, CreateTool, CustomActionProperties, CustomToolOptions, SelectionTool, SketchTool } from "@arcgis/core/widgets/Sketch/types.js";
+import type { PluginConfiguration } from "@arcgis/core/views/draw/support/types.js";
+import type { SelectionToolOptions } from "@arcgis/core/widgets/support/SelectionToolbar/types.js";
+import type { KnownActionGroup } from "./configuration.js";
+import type { MapViewOrSceneView } from "@arcgis/core/views/MapViewOrSceneView.js";
+
+export interface SketchComponentViewModelProperties extends Partial<Pick<SketchComponentViewModel, "availableCreateTools" | "selectionViewModel" | "settingsPopoverOpen" | "sketchViewModel" | "view" | "visibleElements">> {}
+
+/**
+ * Internal ViewModel to support rendering and separation of concerns for the Sketch component.
+ * Traditionally this would be called `SketchViewModel`, but that has taken on a life of its own
+ * and needs to maintain a stable public API; it is unfortunately lower level than we'd like
+ * for optimal use in our UI.
+ *
+ * This component encompasses all transformations from the state of SketchViewModel and
+ * SelectionToolbarViewModel and VisibleElements to state that can be trivially rendered by the view layer.
+ */
+export class SketchComponentViewModel extends Accessor {
+  constructor(properties?: SketchComponentViewModelProperties);
+  get _activeSelectionTool(): "lasso-selection" | "rectangle-selection" | undefined;
+  get activePluginIds(): Set<PluginConfiguration["uniqueId"]> | undefined;
+  get activeTool(): SelectionTool | SketchTool | undefined;
+  accessor availableCreateTools: CreateTool[] | undefined;
+  get groupedActions(): KnownActionGroup[];
+  accessor selectionViewModel: SelectionViewModelLike;
+  /** @default false */
+  accessor settingsPopoverOpen: boolean;
+  accessor sketchViewModel: SketchViewModelLike | undefined;
+  get state(): SketchViewModelLike["state"];
+  get test(): {
+      activeCustomToolOptions: CustomToolOptions | undefined;
+      activeSelectionTool: "lasso-selection" | "rectangle-selection" | undefined;
+      selectionViewModel: SelectionViewModelLike;
+  };
+  accessor view: ViewLike | undefined;
+  accessor visibleElements: VisibleElements;
+  /**
+   * Guards against taking certain actions while geometry simplification is in progress.
+   *
+   * @param command
+   */
+  _executeWhenReady(command: () => Promise<void> | void): Promise<void>;
+  /** Cancels all operations, restoring a neutral, ready state. */
+  cancelAll(): void;
+  /**
+   * Initiates interactive creation of a sketch/drawing using the provided tool and options.
+   *
+   * @param tool - Tool to use for the drawing
+   * @param createOptions - Optional configuration of the drawling experience.
+   */
+  create(tool: CreateTool, createOptions?: CreateOptions): Promise<void>;
+  destroy(): void;
+  initialize(): void;
+  /**
+   * @param createToolOptions
+   * @param customActionOptions
+   */
+  setCustomTools(createToolOptions?: CustomToolOptions[] | null, customActionOptions?: CustomActionProperties[] | null): void;
+  toggleSettingsPopover(): void;
+  /**
+   * @param graphic
+   * @param updateOptions
+   */
+  update(graphic: Graphic | Graphic[], updateOptions?: Parameters<SketchViewModelLike["update"]>[1]): Promise<void>;
+}
+
+export type ViewLike = Pick<MapViewOrSceneView, "focus" | "type">;
+
+export type SketchViewModelLike = EventedAccessor
+  & Pick<SketchViewModel, "@eventTypes" | "activeCreateToolDrawMode" | "activePluginConfigurations" | "activeTool" | "cancel" | "canRedo" | "canUndo" | "complete" | "create" | "creationMode" | "delete" | "duplicate" | "effectiveAvailablePlugins" | "firstPluginWithSwappableLeaf" | "geometrySimplificationInProgress" | "layer" | "multiplePluginsActive" | "redo" | "replaceLeaf" | "rootPlugins" | "state" | "toolTransitionInProgress" | "undo" | "update" | "updateGraphics" | "updateOnGraphicClick">;
+
+export type SelectionViewModelLike = EventedAccessor
+  & Pick<SelectionToolbarViewModel, "@eventTypes" | "cancel" | "sources" | "view">
+  & {
+  activeOperation?: Pick<SelectionOperation, "toolName"> | null;
+  activate?: (options: SelectionToolOptions) => Pick<SelectionOperation, "toolName" | "type">;
+};

package/dist/components/arcgis-sketch/configuration.d.ts

@@ -0,0 +1,33 @@
+import type { SketchGroupName } from "@arcgis/core/applications/ExperienceBuilder/sketchUtils.js";
+import type { CustomActionProperties } from "@arcgis/core/widgets/Sketch/types.js";
+import type { IconName } from "../types.js";
+import type { ArcgisToolbarAction as ArcgisToolbarAction } from "@arcgis/common-components/components/arcgis-toolbar-action";
+
+export interface KnownActionGroup {
+  name: SketchComponentGroupName;
+  commands: SketchAction[];
+  visible: boolean;
+}
+
+export type SketchComponentGroupName = SketchGroupName | "geometrySimplification";
+
+export interface SketchAction {
+  active: boolean;
+  afterCreate?: CustomActionProperties["afterCreate"];
+  afterRemoved?: CustomActionProperties["afterRemoved"];
+  afterUpdate?: CustomActionProperties["afterUpdate"];
+  appearance?: ArcgisToolbarAction["appearance"];
+  disabled: boolean;
+  icon?: IconName;
+  id?: string;
+  kind?: ArcgisToolbarAction["kind"];
+  labelKey: string;
+  labelParameters?: Record<string, number | string>;
+  loading?: boolean;
+  tooltipKey?: string;
+  iconFlipRTL?: boolean;
+  refKey?: string;
+  textEnabled?: boolean;
+  renderAsAction?: boolean;
+  onClick: () => void;
+}

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

@@ -13,8 +13,9 @@ import type Collection from "@arcgis/core/core/Collection.js";
 import type { SketchGroupName } from "@arcgis/core/applications/ExperienceBuilder/sketchUtils.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { ArcgisReferenceElement, IconName } from "../types.js";
-import type { CreateOptions, CreateTool, UpdateEvent, UndoEvent, DuplicateEvent, RedoEvent, DeleteEvent, CreateEvent, CustomToolOptions, CustomActionProperties, SelectionTool, SketchTool, CreationMode, UpdateOptions, SketchPointSymbol, SketchPolygonSymbol, SketchPolylineSymbol } from "@arcgis/core/widgets/Sketch/types.js";
+import type { CreateOptions, CreateTool, UpdateEvent, UndoEvent, DuplicateEvent, RedoEvent, DeleteEvent, CreateEvent, CustomToolOptions, CustomActionProperties, CreationMode, UpdateOptions, SketchPointSymbol, SketchPolygonSymbol, SketchPolylineSymbol } from "@arcgis/core/widgets/Sketch/types.js";
 import type { RelativePosition } from "./support.js";
+import type { SketchComponentViewModel } from "./SketchComponentViewModel.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 import type { MapViewOrSceneView } from "@arcgis/core/views/MapViewOrSceneView.js";
 import type { Button as Button } from "@esri/calcite-components/components/calcite-button";
@@ -182,7 +183,7 @@ export abstract class ArcgisSketch extends LitElement {
    * To opt in to freehandPolyline and freehandPolygon tools, include them when setting availableCreateTools,
    * and hideCreateTools* properties.
    */
-  get activeTool(): SelectionTool | SketchTool | undefined;
+  get activeTool(): SketchComponentViewModel["activeTool"];
   /**
    * 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

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

@@ -1,13 +1,13 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as F } from "../../chunks/runtime.js";
-import { css as H, noChange as R, html as m } from "lit";
+import { css as H, noChange as R, html as v } from "lit";
 import { substitute as q } from "@arcgis/core/intl.js";
 import { usePropertyChange as z, useWatchAttributes as N } from "@arcgis/lumina/controllers";
 import { reEmitEvent as f } from "@arcgis/lumina-toolkit/reEmitEvent";
 import j from "@arcgis/core/layers/GraphicsLayer.js";
 import J from "@arcgis/core/symbols/TextSymbol.js";
 import { LitElement as Q, createEvent as X, nothing as x } from "@arcgis/lumina";
-import { watch as v, on as Y, whenOnce as Z } from "@arcgis/core/core/reactiveUtils.js";
+import { watch as m, on as Y, whenOnce as Z } from "@arcgis/core/core/reactiveUtils.js";
 import { u as ee } from "../../chunks/useT9n.js";
 import { m as te } from "../../chunks/useViewModel.js";
 import { V as T } from "../../chunks/visible-element.js";
@@ -106,7 +106,7 @@ function Te({
     }, n);
   }
   r(i());
-  const p = v(
+  const p = m(
     i,
     (n) => {
       s(), n ? h(Ce, !0) : h(t == null ? 0 : be - (Date.now() - t), !1);
@@ -137,7 +137,7 @@ let l = class extends ne {
   }
   initialize() {
     this.selectionViewModel ??= new re({ persistSelection: !1 }), this.addHandles([
-      v(
+      m(
         () => this.sketchViewModel,
         (i, e) => {
           i !== e && this._effectiveRenderStateCache.clear();
@@ -150,7 +150,7 @@ let l = class extends ne {
           this._effectiveGeometrySimplificationInProgress = i;
         }
       }),
-      v(
+      m(
         () => this.view,
         (i) => {
           this.selectionViewModel.view = i;
@@ -158,7 +158,7 @@ let l = class extends ne {
         { initial: !0, sync: !0 }
       ),
       // Ensure the SelectionViewModel always has the latest layer
-      v(
+      m(
         () => this.sketchViewModel?.layer,
         (i) => this.selectionViewModel.sources = i ? [i] : [],
         { initial: !0, sync: !0 }
@@ -167,7 +167,7 @@ let l = class extends ne {
         i.length && this.update(i);
       }),
       // Cancel active tool when selection activates
-      v(
+      m(
         () => this.selectionViewModel.activeOperation,
         (i) => {
           i && (this.sketchViewModel?.cancel(), this._activeCustomToolOptions = void 0);
@@ -181,7 +181,7 @@ let l = class extends ne {
           i.state === "complete" && this.sketchViewModel?.creationMode !== "continuous" && (this._activeCustomToolOptions = void 0);
         }
       ),
-      v(
+      m(
         () => this.visibleElements.settingsMenu,
         (i) => {
           i || (this.settingsPopoverOpen = !1);
@@ -720,22 +720,23 @@ class Me extends Q {
   constructor() {
     super(), this.#t = new l(), this.#o = _(), this.#s = _(), this._defaultGraphicsLayer = null, this._messages = ee(), this.test = {
       componentViewModel: this.#t
-    }, this._groupLayoutPriorityOverrides = /* @__PURE__ */ new Map(), this._contextualToolLocation = "separate", this._refMap = se(), this.viewModel = Ee(this), this.view = this.viewModel.view, this.activeTool = this.#t.activeTool, this.autoDestroyDisabled = !1, this.createGraphic = this.viewModel.createGraphic, this.creationMode = this.viewModel.creationMode, this.defaultCreateOptions = this.viewModel.defaultCreateOptions, this.defaultGraphicsLayerDisabled = !1, this.defaultUpdateOptions = this.viewModel.defaultUpdateOptions, this.geometrySimplificationInProgress = this.viewModel.geometrySimplificationInProgress, this.icon = "pencil", this.label = this._messages?.componentLabel, this.labelOptions = this.viewModel.labelOptions, this.layer = this.viewModel.layer, this.layout = "horizontal", this.pointSymbol = this.viewModel.pointSymbol, this.polygonSymbol = this.viewModel.polygonSymbol, this.polylineSymbol = this.viewModel.polylineSymbol, this.visualScale = "m", this.snappingOptions = this.viewModel.snappingOptions, this.textSymbol = this.viewModel.textSymbol, this.toolbarKind = "floating", this.tooltipOptions = this.viewModel.tooltipOptions, this.valueOptions = this.viewModel.valueOptions, this.useLegacyCreateTools = this.viewModel.useLegacyCreateTools, this.updateOnGraphicClickDisabled = this.viewModel.updateOnGraphicClick, this.updateGraphics = this.viewModel.updateGraphics, this.arcgisCreate = f(() => this.viewModel, "create"), this.arcgisDelete = f(() => this.viewModel, "delete"), this.arcgisDuplicate = f(() => this.viewModel, "duplicate"), this.arcgisPropertyChange = z()("activeTool", "geometrySimplificationInProgress", "state"), this.arcgisReady = X(), this.arcgisRedo = f(() => this.viewModel, "redo"), this.arcgisUndo = f(() => this.viewModel, "undo"), this.arcgisUpdate = f(() => this.viewModel, "update"), N(["slot"], () => {
+    }, this._groupLayoutPriorityOverrides = /* @__PURE__ */ new Map(), this._contextualToolLocation = "separate", this._refMap = se(), this.viewModel = Ee(this), this.view = this.viewModel.view, this.autoDestroyDisabled = !1, this.createGraphic = this.viewModel.createGraphic, this.creationMode = this.viewModel.creationMode, this.defaultCreateOptions = this.viewModel.defaultCreateOptions, this.defaultGraphicsLayerDisabled = !1, this.defaultUpdateOptions = this.viewModel.defaultUpdateOptions, this.geometrySimplificationInProgress = this.viewModel.geometrySimplificationInProgress, this.icon = "pencil", this.label = this._messages?.componentLabel, this.labelOptions = this.viewModel.labelOptions, this.layer = this.viewModel.layer, this.layout = "horizontal", this.pointSymbol = this.viewModel.pointSymbol, this.polygonSymbol = this.viewModel.polygonSymbol, this.polylineSymbol = this.viewModel.polylineSymbol, this.visualScale = "m", this.snappingOptions = this.viewModel.snappingOptions, this.textSymbol = this.viewModel.textSymbol, this.toolbarKind = "floating", this.tooltipOptions = this.viewModel.tooltipOptions, this.valueOptions = this.viewModel.valueOptions, this.useLegacyCreateTools = this.viewModel.useLegacyCreateTools, this.updateOnGraphicClickDisabled = this.viewModel.updateOnGraphicClick, this.updateGraphics = this.viewModel.updateGraphics, this.arcgisCreate = f(() => this.viewModel, "create"), this.arcgisDelete = f(() => this.viewModel, "delete"), this.arcgisDuplicate = f(() => this.viewModel, "duplicate"), this.arcgisPropertyChange = z()("activeTool", "geometrySimplificationInProgress", "state"), this.arcgisReady = X(), this.arcgisRedo = f(() => this.viewModel, "redo"), this.arcgisUndo = f(() => this.viewModel, "undo"), this.arcgisUpdate = f(() => this.viewModel, "update"), N(["slot"], () => {
       this.requestUpdate();
     }), this.manager.onLifecycle(() => [
-      v(() => this.el.view?.map, (e, t) => {
+      m(() => this.el.view?.map, (e, t) => {
         const o = this._defaultGraphicsLayer;
         o && (t?.allLayers.includes(o) && t.remove(o), o && !e?.allLayers.includes(o) && e?.add(o));
       }),
-      v(() => this.el.view, (e) => {
+      m(() => this.el.view, (e) => {
         this.viewModel.view = e, this.#t.view = e ?? void 0;
       }, { initial: !0 }),
-      v(() => this.viewModel, (e) => {
+      m(() => this.viewModel, (e) => {
         this.#t.sketchViewModel = e, this.viewModel.pluginManager.sketch = this;
       }, { initial: !0 }),
-      v(() => this.#t.state, (e, t) => {
+      m(() => this.#t.state, (e, t) => {
         this.requestUpdate("state", t);
-      }, { initial: !0 })
+      }, { initial: !0 }),
+      m(() => this.#t.activeTool, () => this.arcgisPropertyChange.emit({ name: "activeTool" }), { sync: !0 })
     ]), this.manager.onDestroy(() => {
       this._defaultGraphicsLayer && this.el.view?.map?.allLayers.includes(this._defaultGraphicsLayer) && this.el.view?.map?.remove(this._defaultGraphicsLayer), this._defaultGraphicsLayer?.destroy(), this._defaultGraphicsLayer = null, this.#t.destroy();
     });
@@ -753,6 +754,9 @@ class Me extends Q {
   #i;
   #o;
   #s;
+  get activeTool() {
+    return this.#t.activeTool;
+  }
   get visibleElements() {
     return this.#t.visibleElements;
   }
@@ -1044,11 +1048,11 @@ class Me extends Q {
   }
   render() {
     const e = this._refMap.get("settings")?.value?.actionElement, t = this.#t.groupedActions, { visualScale: o, layout: s, toolbarKind: r, relativePosition: h, _contextualToolLocation: p } = this, n = t.find(({ name: u }) => u === "selectionSet"), g = t.filter(({ name: u }) => u !== "selectionSet");
-    return m`<div class="toolbar-container"><arcgis-toolbar-stack .layout=${s} .toolbarKind=${r} .relativePosition=${h} .scale=${o} tooltip-appearance=calcite><arcgis-toolbar ${E(this.#o)}>${T({ hidden: !n?.visible || p !== "inline", children: this._renderActionGroup(n) })}${g.map((u) => this._renderActionGroup(u))}${T({ hidden: !n?.visible || p !== "inline-end", children: this._renderActionGroup(n) })}</arcgis-toolbar>${T({ hidden: !n?.visible || p !== "separate", children: m`<arcgis-toolbar>${this._renderActionGroup(n)}</arcgis-toolbar>` })}</arcgis-toolbar-stack></div>${T({ hidden: this.hideSettingsMenu, children: m`<arcgis-view-popover .open=${this.#t.settingsPopoverOpen} closable .heading=${this._messages.settings?.heading} .label=${this._messages.settings?.heading} .anchorElement=${e} .visualScale=${o} .actionBarElement=${this.#o.value?.barElement} @arcgisPropertyChange=${(u) => this.#t.settingsPopoverOpen = u.target.open ?? !1} .view=${this.view ?? void 0}>${this._renderSettings()}</arcgis-view-popover>` })}`;
+    return v`<div class="toolbar-container"><arcgis-toolbar-stack .layout=${s} .toolbarKind=${r} .relativePosition=${h} .scale=${o} tooltip-appearance=calcite><arcgis-toolbar ${E(this.#o)}>${T({ hidden: !n?.visible || p !== "inline", children: this._renderActionGroup(n) })}${g.map((u) => this._renderActionGroup(u))}${T({ hidden: !n?.visible || p !== "inline-end", children: this._renderActionGroup(n) })}</arcgis-toolbar>${T({ hidden: !n?.visible || p !== "separate", children: v`<arcgis-toolbar>${this._renderActionGroup(n)}</arcgis-toolbar>` })}</arcgis-toolbar-stack></div>${T({ hidden: this.hideSettingsMenu, children: v`<arcgis-view-popover .open=${this.#t.settingsPopoverOpen} closable .heading=${this._messages.settings?.heading} .label=${this._messages.settings?.heading} .anchorElement=${e} .visualScale=${o} .actionBarElement=${this.#o.value?.barElement} @arcgisPropertyChange=${(u) => this.#t.settingsPopoverOpen = u.target.open ?? !1} .view=${this.view ?? void 0}>${this._renderSettings()}</arcgis-view-popover>` })}`;
   }
   _renderSettings() {
     const { autoDestroyDisabled: e, hideLabelsToggle: t, hideSnappingControls: o, hideTooltipsToggle: s, showSnappingControlsElementsHeader: r, view: h, viewModel: p } = this;
-    return m`<div class="editing-controls-panel"><arcgis-sketch-tooltip-controls .hideLabelsToggle=${t} .hideTooltipsToggle=${s} .directionMode=${p.valueOptions.directionMode} .labelsEnabled=${p.labelOptions.enabled} .tooltipsEnabled=${p.tooltipOptions.enabled} @arcgisPropertyChange=${(n) => {
+    return v`<div class="editing-controls-panel"><arcgis-sketch-tooltip-controls .hideLabelsToggle=${t} .hideTooltipsToggle=${s} .directionMode=${p.valueOptions.directionMode} .labelsEnabled=${p.labelOptions.enabled} .tooltipsEnabled=${p.tooltipOptions.enabled} @arcgisPropertyChange=${(n) => {
       n.stopPropagation();
       const { labelsEnabled: g, tooltipsEnabled: u, directionMode: d } = n.currentTarget, b = this.viewModel;
       switch (n.detail.name) {
@@ -1062,7 +1066,7 @@ class Me extends Q {
           b.tooltipOptions.enabled = u;
           break;
       }
-    }}></arcgis-sketch-tooltip-controls>${o ? void 0 : m`<arcgis-snapping-controls .autoDestroyDisabled=${e} .view=${h} .visibleElements=${this.#e.snappingControlsElements} .snappingOptions=${p.snappingOptions} .showHeader=${r} @arcgisPropertyChange=${(n) => n.stopPropagation()}></arcgis-snapping-controls>`}</div>`;
+    }}></arcgis-sketch-tooltip-controls>${o ? void 0 : v`<arcgis-snapping-controls .autoDestroyDisabled=${e} .view=${h} .visibleElements=${this.#e.snappingControlsElements} .snappingOptions=${p.snappingOptions} .showHeader=${r} @arcgisPropertyChange=${(n) => n.stopPropagation()}></arcgis-snapping-controls>`}</div>`;
   }
   _renderActionGroup({ visible: e, commands: t, name: o }) {
     if (!e || !t.length)
@@ -1070,16 +1074,16 @@ class Me extends Q {
     const { defaultPriority: s, groupKind: r, overflowLabel: h } = ye[o], n = (o === "geometrySimplification" ? void 0 : this._groupLayoutPriorityOverrides.get(o)) ?? s, g = t.map((d) => this._renderCommand(d)), u = I(`more.${h}`, this._messages);
     switch (r) {
       case "more-button":
-        return m`<arcgis-toolbar-group .priority=${n}><arcgis-toolbar-more-button .overflowActionLabel=${u} .priority=${n}>${g}</arcgis-toolbar-more-button></arcgis-toolbar-group>`;
+        return v`<arcgis-toolbar-group .priority=${n}><arcgis-toolbar-more-button .overflowActionLabel=${u} .priority=${n}>${g}</arcgis-toolbar-more-button></arcgis-toolbar-group>`;
       case "split-button":
-        return m`<arcgis-toolbar-group .priority=${n}><arcgis-toolbar-split-button .overflowActionLabel=${u} .priority=${n}>${g}</arcgis-toolbar-split-button></arcgis-toolbar-group>`;
+        return v`<arcgis-toolbar-group .priority=${n}><arcgis-toolbar-split-button .overflowActionLabel=${u} .priority=${n}>${g}</arcgis-toolbar-split-button></arcgis-toolbar-group>`;
       case "actions":
-        return m`<arcgis-toolbar-group .priority=${n}>${g}</arcgis-toolbar-group>`;
+        return v`<arcgis-toolbar-group .priority=${n}>${g}</arcgis-toolbar-group>`;
     }
   }
   _renderCommand({ active: e, afterCreate: t, afterRemoved: o, afterUpdate: s, appearance: r, icon: h, disabled: p, id: n, kind: g, labelKey: u, labelParameters: d, loading: b, tooltipKey: W, iconFlipRTL: M, onClick: P, refKey: k, textEnabled: A, renderAsAction: K }) {
     const { _messages: O, _refMap: U, layout: L } = this, w = I(u, O), S = w === void 0 ? u : d ? q(w, d) : w, G = O?.[W] ?? S, $ = k ? B(U, k, _) : this.#s, V = { afterCreate: t, afterRemoved: o, afterUpdate: s };
-    return K ? m`<arcgis-toolbar-action .active=${e} .appearance=${r} .disabled=${p} .icon=${h} .iconFlipRtl=${M} id=${n ?? x} .kind=${g} .loading=${b} .labelText=${L === "horizontal" ? S : ""} .textEnabled=${A} .tooltipText=${L === "horizontal" && A ? "" : G} @arcgisToolbarItemSelected=${P} ${D(V)} ${E($)}></arcgis-toolbar-action>` : m`<arcgis-toolbar-item .active=${e} .disabled=${p} .icon=${h} id=${n ?? x} .iconFlipRtl=${M} .labelText=${S} .tooltipText=${G} @arcgisItemSelected=${P} ${D(V)} ${E($)}></arcgis-toolbar-item>`;
+    return K ? v`<arcgis-toolbar-action .active=${e} .appearance=${r} .disabled=${p} .icon=${h} .iconFlipRtl=${M} id=${n ?? x} .kind=${g} .loading=${b} .labelText=${L === "horizontal" ? S : ""} .textEnabled=${A} .tooltipText=${L === "horizontal" && A ? "" : G} @arcgisToolbarItemSelected=${P} ${D(V)} ${E($)}></arcgis-toolbar-action>` : v`<arcgis-toolbar-item .active=${e} .disabled=${p} .icon=${h} id=${n ?? x} .iconFlipRtl=${M} .labelText=${S} .tooltipText=${G} @arcgisItemSelected=${P} ${D(V)} ${E($)}></arcgis-toolbar-item>`;
   }
 }
 F("arcgis-sketch", Me);

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

@@ -5,6 +5,7 @@ import type GraphicsLayer from "@arcgis/core/layers/GraphicsLayer.js";
 import type TraceResult from "@arcgis/core/rest/networks/support/TraceResult.js";
 import type MapView from "@arcgis/core/views/MapView.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { UtilityNetworkTraceResultItemState } from "../arcgis-utility-network-trace-analysis/types.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
 /**
@@ -56,6 +57,13 @@ export abstract class ArcgisUtilityNetworkTraceAggregatedGeometryResultItem exte
    * @default 12
    */
   accessor defaultSelectionSize: number;
+  /**
+   * Whether the component emits event [@arcgisResultReady](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-utility-network-trace-aggregated-geometry-result-item/#event-arcgisResultReady).
+   * This property is always `true` for [arcgis-utility-network-trace-aggregated-geometry-result-item](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-utility-network-trace-aggregated-geometry-result-item/).
+   *
+   * @default false
+   */
+  get emitsArcgisResultReady(): true;
   /** The graphics which represent the aggregated geometry results from the trace. */
   get geometryGraphics(): Graphic[];
   /**
@@ -77,6 +85,12 @@ export abstract class ArcgisUtilityNetworkTraceAggregatedGeometryResultItem exte
    * @default false
    */
   accessor hideGraphics: boolean;
+  /**
+   * Whether the component has finished adding aggregated geometry graphics to the map.
+   *
+   * @default "ready"
+   */
+  get state(): UtilityNetworkTraceResultItemState;
   /**
    * The trace result containing the aggregated geometry result to render graphics for.
    *
@@ -91,13 +105,14 @@ export abstract class ArcgisUtilityNetworkTraceAggregatedGeometryResultItem exte
    */
   accessor view: MapView | undefined;
   /**
-   * Removes the [layer](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-utility-network-trace-aggregated-geometry-result-item/#graphicsLayer)
-   * containing the aggregated geometry graphics from the map.
+   * Removes the aggregated geometry graphics from the
+   * [graphicsLayer](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-utility-network-trace-aggregated-geometry-result-item/#graphicsLayer).
+   * If the layer was created by the component, it is also removed from the map.
    */
   clearResult(): void;
   /** Permanently destroy the component. */
   destroy(): Promise<void>;
-  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "defaultSelectionSize" | "geometryGraphics" | "hideGraphics" | "graphicsColor"; }>;
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "defaultSelectionSize" | "hideGraphics" | "geometryGraphics" | "graphicsColor" | "state"; }>;
   /**
    * Fires when the component finishes processing the aggregated geometry results.
    *