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

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);