@arcgis/map-components 6.0.0-next.2 → 6.0.0-next.20

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

@@ -1,13 +1,13 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as F } from "../../chunks/runtime.js";
-import { css as H, noChange as x, html as v } from "lit";
+import { css as H, noChange as x, html as m } 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 I } from "@arcgis/lumina";
-import { watch as m, on as Y, whenOnce as Z } from "@arcgis/core/core/reactiveUtils.js";
+import { watch as v, 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";
@@ -17,11 +17,11 @@ import { S as oe } from "../../chunks/resources.js";
 import { getOrCreateMapValue as W, createReactiveMap as se } from "@arcgis/core/applications/Components/featureUtils.js";
 import { LayoutPriorities as y } from "@arcgis/common-components";
 import ne from "@arcgis/core/core/Accessor.js";
-import { property as c, subclass as le } from "@arcgis/core/core/accessorSupport/decorators.js";
+import { property as a, subclass as le } from "@arcgis/core/core/accessorSupport/decorators.js";
 import { ignoreAbortErrors as C } from "@arcgis/core/core/promiseUtils.js";
 import ae from "@arcgis/core/widgets/Sketch/VisibleElements.js";
 import re from "@arcgis/core/widgets/support/SelectionToolbar/SelectionToolbarViewModel.js";
-import { m as ce } from "../../chunks/handle.js";
+import { c as ce } from "../../chunks/loader-utils.js";
 import { AsyncDirective as de } from "lit/async-directive.js";
 import { directive as he, PartType as pe } from "lit/directive.js";
 import { r as ue } from "../../chunks/async-utils.js";
@@ -84,45 +84,13 @@ const ve = H`.editing-controls-panel{min-inline-size:100px;max-inline-size:400px
     defaultPriority: y.Default,
     groupKind: "actions"
   }
-}, Ce = 500, be = 1e3;
-function Te({
-  getLoading: i,
-  setEffectiveLoading: e
-}) {
-  let t, o;
-  function s() {
-    clearTimeout(o), o = void 0;
-  }
-  function r(n) {
-    t = n ? Date.now() : void 0, e(n);
-  }
-  function h(n, p) {
-    if (n <= 0) {
-      r(p);
-      return;
-    }
-    o = setTimeout(() => {
-      s(), r(p);
-    }, n);
-  }
-  r(i());
-  const u = m(
-    i,
-    (n) => {
-      s(), n ? h(Ce, !0) : h(t == null ? 0 : be - (Date.now() - t), !1);
-    },
-    { sync: !0 }
-  );
-  return ce(() => {
-    u.remove(), s();
-  });
-}
-var we = Object.defineProperty, Se = Object.getOwnPropertyDescriptor, a = (i, e, t, o) => {
-  for (var s = o > 1 ? void 0 : o ? Se(e, t) : e, r = i.length - 1, h; r >= 0; r--)
-    (h = i[r]) && (s = (o ? h(e, t, s) : h(s)) || s);
-  return o && s && we(e, t, s), s;
 };
-let l = class extends ne {
+var Ce = Object.defineProperty, be = Object.getOwnPropertyDescriptor, l = (i, e, t, o) => {
+  for (var s = o > 1 ? void 0 : o ? be(e, t) : e, d = i.length - 1, h; d >= 0; d--)
+    (h = i[d]) && (s = (o ? h(e, t, s) : h(s)) || s);
+  return o && s && Ce(e, t, s), s;
+};
+let n = class extends ne {
   //#region Lifecycle
   constructor(i) {
     super(i), this._effectiveRenderStateCache = /* @__PURE__ */ new Map(), this._effectiveGeometrySimplificationInProgress = !1, this.visibleElements = new ae(), this.settingsPopoverOpen = !1, this.availableCreateTools = [
@@ -137,20 +105,20 @@ let l = class extends ne {
   }
   initialize() {
     this.selectionViewModel ??= new re({ persistSelection: !1 }), this.addHandles([
-      m(
+      v(
         () => this.sketchViewModel,
         (i, e) => {
           i !== e && this._effectiveRenderStateCache.clear();
         },
         { sync: !0 }
       ),
-      Te({
+      ce({
         getLoading: () => this.sketchViewModel?.geometrySimplificationInProgress ?? !1,
         setEffectiveLoading: (i) => {
           this._effectiveGeometrySimplificationInProgress = i;
         }
       }),
-      m(
+      v(
         () => this.view,
         (i) => {
           this.selectionViewModel.view = i;
@@ -158,7 +126,7 @@ let l = class extends ne {
         { initial: !0, sync: !0 }
       ),
       // Ensure the SelectionViewModel always has the latest layer
-      m(
+      v(
         () => this.sketchViewModel?.layer,
         (i) => this.selectionViewModel.sources = i ? [i] : [],
         { initial: !0, sync: !0 }
@@ -167,7 +135,7 @@ let l = class extends ne {
         i.length && this.update(i);
       }),
       // Cancel active tool when selection activates
-      m(
+      v(
         () => this.selectionViewModel.activeOperation,
         (i) => {
           i && (this.sketchViewModel?.cancel(), this._activeCustomToolOptions = void 0);
@@ -181,7 +149,7 @@ let l = class extends ne {
           i.state === "complete" && this.sketchViewModel?.creationMode !== "continuous" && (this._activeCustomToolOptions = void 0);
         }
       ),
-      m(
+      v(
         () => this.visibleElements.settingsMenu,
         (i) => {
           i || (this.settingsPopoverOpen = !1);
@@ -237,27 +205,27 @@ let l = class extends ne {
     const { sketchViewModel: i } = this;
     if (!i)
       return [];
-    const e = i.effectiveAvailablePlugins, t = this.state === "disabled", o = this.visibleElements.createTools, s = this.activeTool, r = this._activeCustomToolOptions, h = r || !i.firstPluginWithSwappableLeaf ? this._customToolOptions : [], u = i.rootPlugins, n = h?.map((d) => ({
-      active: d === r,
+    const e = i.effectiveAvailablePlugins, t = this.state === "disabled", o = this.visibleElements.createTools, s = this.activeTool, d = this._activeCustomToolOptions, h = d || !i.firstPluginWithSwappableLeaf ? this._customToolOptions : [], u = i.rootPlugins, r = h?.map((c) => ({
+      active: c === d,
       disabled: t,
-      icon: d.icon,
-      labelKey: d.label,
-      onClick: d === r ? () => this._cancelActiveOperation() : () => this._activateLegacyDrawTool(d.toolName, d.createOptions, d)
+      icon: c.icon,
+      labelKey: c.label,
+      onClick: c === d ? () => this._cancelActiveOperation() : () => this._activateLegacyDrawTool(c.toolName, c.createOptions, c)
     })) ?? [];
-    if (r && u)
-      return [...this._pluginsToActions(u), ...n];
+    if (d && u)
+      return [...this._pluginsToActions(u), ...r];
     if (e?.length && this.view?.type !== "3d")
-      return [...this._pluginsToActions(e), ...n];
-    const p = this.view?.type === "3d";
+      return [...this._pluginsToActions(e), ...r];
+    const g = this.view?.type === "3d";
     return [
-      ...this.availableCreateTools?.filter((d) => p && d === "multipoint" ? !1 : d === "mesh" ? !0 : o[d])?.map((d) => ({
-        active: d === s,
+      ...this.availableCreateTools?.filter((c) => g && c === "multipoint" ? !1 : c === "mesh" ? !0 : o[c])?.map((c) => ({
+        active: c === s,
         disabled: t,
-        icon: fe[d],
-        labelKey: `draw.${d}`,
-        onClick: d === s ? () => this._cancelActiveOperation() : () => this._activateLegacyDrawTool(d)
+        icon: fe[c],
+        labelKey: `draw.${c}`,
+        onClick: c === s ? () => this._cancelActiveOperation() : () => this._activateLegacyDrawTool(c)
       })) ?? [],
-      ...n
+      ...r
     ];
   }
   get _shouldShowBackButton() {
@@ -305,8 +273,8 @@ let l = class extends ne {
     return t === "polygon" && o === "freehand" && e?.includes("freehandPolygon") ? "freehandPolygon" : t === "polyline" && o === "freehand" && e?.includes("freehandPolyline") ? "freehandPolyline" : t ?? void 0;
   }
   get _selectionCommands() {
-    const { state: i, visibleElements: e, _activeSelectionTool: t, _customActions: o } = this, s = this.state === "disabled", r = [];
-    this.sketchViewModel?.updateOnGraphicClick !== !1 && r.push({
+    const { state: i, visibleElements: e, _activeSelectionTool: t, _customActions: o } = this, s = this.state === "disabled", d = [];
+    this.sketchViewModel?.updateOnGraphicClick !== !1 && d.push({
       active: i === "ready" && this._activeSelectionTool == null,
       disabled: s,
       icon: "cursor",
@@ -314,13 +282,13 @@ let l = class extends ne {
       onClick: () => this._activateDefaultSelectionTool()
     });
     const h = e.selectionTools;
-    h["rectangle-selection"] && r.push({
+    h["rectangle-selection"] && d.push({
       active: t === "rectangle-selection",
       disabled: s,
       icon: "cursor-marquee",
       labelKey: "rectangleSelection",
       onClick: () => this._activateSelectionTool("rectangle-selection")
-    }), h["lasso-selection"] && r.push({
+    }), h["lasso-selection"] && d.push({
       active: t === "lasso-selection",
       disabled: s,
       icon: "lasso-select",
@@ -328,7 +296,7 @@ let l = class extends ne {
       onClick: () => this._activateSelectionTool("lasso-selection")
     });
     const u = o?.get("selection-toolbar");
-    return u && r.push(...this._customActionsToSketchActions(u)), r;
+    return u && d.push(...this._customActionsToSketchActions(u)), d;
   }
   get _selectionSetActions() {
     const i = this.sketchViewModel?.updateGraphics.length ?? 0;
@@ -601,88 +569,88 @@ let l = class extends ne {
   }
   // #endregion
 };
-a([
-  c()
-], l.prototype, "_isEffectiveRenderStateFrozen", 1);
-a([
-  c()
-], l.prototype, "_effectiveGeometrySimplificationInProgress", 2);
-a([
-  c()
-], l.prototype, "_state", 1);
-a([
-  c()
-], l.prototype, "_customToolOptions", 2);
-a([
-  c()
-], l.prototype, "_activeCustomToolOptions", 2);
-a([
-  c()
-], l.prototype, "_customActions", 2);
-a([
-  c()
-], l.prototype, "selectionViewModel", 2);
-a([
-  c()
-], l.prototype, "_activeSelectionTool", 1);
-a([
-  c()
-], l.prototype, "_activePluginUniqueIds", 1);
-a([
-  c()
-], l.prototype, "_createToolActions", 1);
-a([
-  c()
-], l.prototype, "_shouldShowBackButton", 1);
-a([
-  c()
-], l.prototype, "_selectionToolActions", 1);
-a([
-  c()
-], l.prototype, "_settingsActions", 1);
-a([
-  c()
-], l.prototype, "_activeTool", 1);
-a([
-  c()
-], l.prototype, "_selectionCommands", 1);
-a([
-  c()
-], l.prototype, "_selectionSetActions", 1);
-a([
-  c()
-], l.prototype, "_undoRedoActions", 1);
-a([
-  c()
-], l.prototype, "sketchViewModel", 2);
-a([
-  c()
-], l.prototype, "visibleElements", 2);
-a([
-  c()
-], l.prototype, "view", 2);
-a([
-  c()
-], l.prototype, "settingsPopoverOpen", 2);
-a([
-  c()
-], l.prototype, "availableCreateTools", 2);
-a([
-  c()
-], l.prototype, "state", 1);
-a([
-  c()
-], l.prototype, "activeTool", 1);
-a([
-  c()
-], l.prototype, "activePluginIds", 1);
-a([
-  c()
-], l.prototype, "groupedActions", 1);
-l = a([
+l([
+  a()
+], n.prototype, "_isEffectiveRenderStateFrozen", 1);
+l([
+  a()
+], n.prototype, "_effectiveGeometrySimplificationInProgress", 2);
+l([
+  a()
+], n.prototype, "_state", 1);
+l([
+  a()
+], n.prototype, "_customToolOptions", 2);
+l([
+  a()
+], n.prototype, "_activeCustomToolOptions", 2);
+l([
+  a()
+], n.prototype, "_customActions", 2);
+l([
+  a()
+], n.prototype, "selectionViewModel", 2);
+l([
+  a()
+], n.prototype, "_activeSelectionTool", 1);
+l([
+  a()
+], n.prototype, "_activePluginUniqueIds", 1);
+l([
+  a()
+], n.prototype, "_createToolActions", 1);
+l([
+  a()
+], n.prototype, "_shouldShowBackButton", 1);
+l([
+  a()
+], n.prototype, "_selectionToolActions", 1);
+l([
+  a()
+], n.prototype, "_settingsActions", 1);
+l([
+  a()
+], n.prototype, "_activeTool", 1);
+l([
+  a()
+], n.prototype, "_selectionCommands", 1);
+l([
+  a()
+], n.prototype, "_selectionSetActions", 1);
+l([
+  a()
+], n.prototype, "_undoRedoActions", 1);
+l([
+  a()
+], n.prototype, "sketchViewModel", 2);
+l([
+  a()
+], n.prototype, "visibleElements", 2);
+l([
+  a()
+], n.prototype, "view", 2);
+l([
+  a()
+], n.prototype, "settingsPopoverOpen", 2);
+l([
+  a()
+], n.prototype, "availableCreateTools", 2);
+l([
+  a()
+], n.prototype, "state", 1);
+l([
+  a()
+], n.prototype, "activeTool", 1);
+l([
+  a()
+], n.prototype, "activePluginIds", 1);
+l([
+  a()
+], n.prototype, "groupedActions", 1);
+n = l([
   le("components.sketch.SketchComponentViewModel")
-], l);
-class _e extends de {
+], n);
+class Te extends de {
   #t;
   #e = !1;
   #i;
@@ -709,34 +677,34 @@ class _e extends de {
     });
   }
 }
-const B = he(_e), Ee = te((i) => new ie({
+const B = he(Te), we = te((i) => new ie({
   ...i,
   cancelUpdateOnClickAway: !0,
   creationMode: "continuous",
   textSymbol: new J({ text: "hello world" }),
   useLegacyCreateTools: !1
 }));
-class Me extends Q {
+class Se extends Q {
   constructor() {
-    super(), this.#t = new l(), this.#o = E(), this.#s = E(), this._defaultGraphicsLayer = null, this._messages = ee(), this.test = {
+    super(), this.#t = new n(), this.#o = E(), this.#s = E(), 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.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.useViewOptions = this.viewModel.useViewOptions, 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 = we(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.useViewOptions = this.viewModel.useViewOptions, 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(() => [
-      m(() => this.el.view?.map, (e, t) => {
+      v(() => 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));
       }),
-      m(() => this.el.view, (e) => {
+      v(() => this.el.view, (e) => {
         this.viewModel.view = e, this.#t.view = e ?? void 0;
       }, { initial: !0 }),
-      m(() => this.viewModel, (e) => {
+      v(() => this.viewModel, (e) => {
         this.#t.sketchViewModel = e, this.viewModel.pluginManager.sketch = this;
       }, { initial: !0 }),
-      m(() => this.#t.state, (e, t) => {
+      v(() => this.#t.state, (e, t) => {
         this.requestUpdate("state", t);
       }, { initial: !0 }),
-      m(() => this.#t.activeTool, () => this.arcgisPropertyChange.emit({ name: "activeTool" }), { sync: !0 })
+      v(() => 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();
     });
@@ -1047,46 +1015,46 @@ class Me extends Q {
     this._defaultGraphicsLayer && this.view?.map?.allLayers.includes(this._defaultGraphicsLayer) && this.view?.map?.remove(this._defaultGraphicsLayer), super.disconnectedCallback();
   }
   render() {
-    const e = this._refMap.get("settings")?.value?.actionElement, t = this.#t.groupedActions, { visualScale: o, layout: s, toolbarKind: r, relativePosition: h, _contextualToolLocation: u } = this, n = t.find(({ name: g }) => g === "selectionSet"), p = t.filter(({ name: g }) => g !== "selectionSet");
-    return v`<div class="toolbar-container"><arcgis-toolbar-stack .layout=${s} .toolbarKind=${r} .relativePosition=${h} .scale=${o} tooltip-appearance=calcite><arcgis-toolbar ${M(this.#o)}>${T({ hidden: !n?.visible || u !== "inline", children: this._renderActionGroup(n) })}${p.map((g) => this._renderActionGroup(g))}${T({ hidden: !n?.visible || u !== "inline-end", children: this._renderActionGroup(n) })}</arcgis-toolbar>${T({ hidden: !n?.visible || u !== "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=${(g) => this.#t.settingsPopoverOpen = g.target.open ?? !1} .view=${this.view ?? void 0}>${this._renderSettings()}</arcgis-view-popover>` })}`;
+    const e = this._refMap.get("settings")?.value?.actionElement, t = this.#t.groupedActions, { visualScale: o, layout: s, toolbarKind: d, relativePosition: h, _contextualToolLocation: u } = this, r = t.find(({ name: p }) => p === "selectionSet"), g = t.filter(({ name: p }) => p !== "selectionSet");
+    return m`<div class="toolbar-container"><arcgis-toolbar-stack .layout=${s} .toolbarKind=${d} .relativePosition=${h} .scale=${o} tooltip-appearance=calcite><arcgis-toolbar ${M(this.#o)}>${T({ hidden: !r?.visible || u !== "inline", children: this._renderActionGroup(r) })}${g.map((p) => this._renderActionGroup(p))}${T({ hidden: !r?.visible || u !== "inline-end", children: this._renderActionGroup(r) })}</arcgis-toolbar>${T({ hidden: !r?.visible || u !== "separate", children: m`<arcgis-toolbar>${this._renderActionGroup(r)}</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=${(p) => this.#t.settingsPopoverOpen = p.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, useViewOptions: h, view: u, viewModel: n } = this;
-    return v`<div class="editing-controls-panel"><arcgis-sketch-tooltip-controls .hideLabelsToggle=${t} .hideTooltipsToggle=${h || s} .directionMode=${n.valueOptions.directionMode} .labelsEnabled=${n.labelOptions.enabled} .tooltipsEnabled=${n.tooltipOptions.enabled} @arcgisPropertyChange=${(p) => {
-      p.stopPropagation();
-      const { labelsEnabled: g, tooltipsEnabled: d, directionMode: w } = p.currentTarget, b = this.viewModel;
-      switch (p.detail.name) {
+    const { autoDestroyDisabled: e, hideLabelsToggle: t, hideSnappingControls: o, hideTooltipsToggle: s, showSnappingControlsElementsHeader: d, useViewOptions: h, view: u, viewModel: r } = this;
+    return m`<div class="editing-controls-panel"><arcgis-sketch-tooltip-controls .hideLabelsToggle=${t} .hideTooltipsToggle=${h || s} .directionMode=${r.valueOptions.directionMode} .labelsEnabled=${r.labelOptions.enabled} .tooltipsEnabled=${r.tooltipOptions.enabled} @arcgisPropertyChange=${(g) => {
+      g.stopPropagation();
+      const { labelsEnabled: p, tooltipsEnabled: c, directionMode: w } = g.currentTarget, b = this.viewModel;
+      switch (g.detail.name) {
         case "labelsEnabled":
-          b.labelOptions.enabled = g;
+          b.labelOptions.enabled = p;
           break;
         case "directionMode":
           b.valueOptions.directionMode = w;
           break;
         case "tooltipsEnabled":
-          b.tooltipOptions.enabled = d;
+          b.tooltipOptions.enabled = c;
           break;
       }
-    }}></arcgis-sketch-tooltip-controls>${!h && !o ? v`<arcgis-snapping-controls .autoDestroyDisabled=${e} .view=${u} .visibleElements=${this.#e.snappingControlsElements} .snappingOptions=${n.snappingOptions} .showHeader=${r} @arcgisPropertyChange=${(p) => p.stopPropagation()}></arcgis-snapping-controls>` : void 0}</div>`;
+    }}></arcgis-sketch-tooltip-controls>${!h && !o ? m`<arcgis-snapping-controls .autoDestroyDisabled=${e} .view=${u} .visibleElements=${this.#e.snappingControlsElements} .snappingOptions=${r.snappingOptions} .showHeader=${d} @arcgisPropertyChange=${(g) => g.stopPropagation()}></arcgis-snapping-controls>` : void 0}</div>`;
   }
   _renderActionGroup({ visible: e, commands: t, name: o }) {
     if (!e || !t.length)
       return;
-    const { defaultPriority: s, groupKind: r, overflowLabel: h } = ye[o], n = (o === "geometrySimplification" ? void 0 : this._groupLayoutPriorityOverrides.get(o)) ?? s, p = t.map((d) => this._renderCommand(d)), g = D(`more.${h}`, this._messages);
-    switch (r) {
+    const { defaultPriority: s, groupKind: d, overflowLabel: h } = ye[o], r = (o === "geometrySimplification" ? void 0 : this._groupLayoutPriorityOverrides.get(o)) ?? s, g = t.map((c) => this._renderCommand(c)), p = D(`more.${h}`, this._messages);
+    switch (d) {
       case "more-button":
-        return v`<arcgis-toolbar-group .priority=${n}><arcgis-toolbar-more-button .overflowActionLabel=${g} .priority=${n}>${p}</arcgis-toolbar-more-button></arcgis-toolbar-group>`;
+        return m`<arcgis-toolbar-group .priority=${r}><arcgis-toolbar-more-button .overflowActionLabel=${p} .priority=${r}>${g}</arcgis-toolbar-more-button></arcgis-toolbar-group>`;
       case "split-button":
-        return v`<arcgis-toolbar-group .priority=${n}><arcgis-toolbar-split-button .overflowActionLabel=${g} .priority=${n}>${p}</arcgis-toolbar-split-button></arcgis-toolbar-group>`;
+        return m`<arcgis-toolbar-group .priority=${r}><arcgis-toolbar-split-button .overflowActionLabel=${p} .priority=${r}>${g}</arcgis-toolbar-split-button></arcgis-toolbar-group>`;
       case "actions":
-        return v`<arcgis-toolbar-group .priority=${n}>${p}</arcgis-toolbar-group>`;
+        return m`<arcgis-toolbar-group .priority=${r}>${g}</arcgis-toolbar-group>`;
     }
   }
-  _renderCommand({ active: e, afterCreate: t, afterRemoved: o, afterUpdate: s, appearance: r, icon: h, disabled: u, id: n, kind: p, labelKey: g, labelParameters: d, loading: w, tooltipKey: b, iconFlipRTL: P, onClick: k, refKey: A, textEnabled: O, renderAsAction: K }) {
-    const { _messages: L, _refMap: U, layout: G } = this, S = D(g, L), _ = S === void 0 ? g : d ? q(S, d) : S, V = L?.[b] ?? _, $ = A ? W(U, A, E) : this.#s, R = { afterCreate: t, afterRemoved: o, afterUpdate: s };
-    return K ? v`<arcgis-toolbar-action .active=${e} .appearance=${r} .disabled=${u} .icon=${h} .iconFlipRtl=${P} id=${n ?? I} .kind=${p} .loading=${w} .labelText=${G === "horizontal" ? _ : ""} .textEnabled=${O} .tooltipText=${G === "horizontal" && O ? "" : V} @arcgisToolbarItemSelected=${k} ${B(R)} ${M($)}></arcgis-toolbar-action>` : v`<arcgis-toolbar-item .active=${e} .disabled=${u} .icon=${h} id=${n ?? I} .iconFlipRtl=${P} .labelText=${_} .tooltipText=${V} @arcgisItemSelected=${k} ${B(R)} ${M($)}></arcgis-toolbar-item>`;
+  _renderCommand({ active: e, afterCreate: t, afterRemoved: o, afterUpdate: s, appearance: d, icon: h, disabled: u, id: r, kind: g, labelKey: p, labelParameters: c, loading: w, tooltipKey: b, iconFlipRTL: P, onClick: k, refKey: A, textEnabled: O, renderAsAction: K }) {
+    const { _messages: L, _refMap: U, layout: G } = this, S = D(p, L), _ = S === void 0 ? p : c ? q(S, c) : S, V = L?.[b] ?? _, $ = A ? W(U, A, E) : this.#s, R = { afterCreate: t, afterRemoved: o, afterUpdate: s };
+    return K ? m`<arcgis-toolbar-action .active=${e} .appearance=${d} .disabled=${u} .icon=${h} .iconFlipRtl=${P} id=${r ?? I} .kind=${g} .loading=${w} .labelText=${G === "horizontal" ? _ : ""} .textEnabled=${O} .tooltipText=${G === "horizontal" && O ? "" : V} @arcgisToolbarItemSelected=${k} ${B(R)} ${M($)}></arcgis-toolbar-action>` : m`<arcgis-toolbar-item .active=${e} .disabled=${u} .icon=${h} id=${r ?? I} .iconFlipRtl=${P} .labelText=${_} .tooltipText=${V} @arcgisItemSelected=${k} ${B(R)} ${M($)}></arcgis-toolbar-item>`;
   }
 }
-F("arcgis-sketch", Me);
+F("arcgis-sketch", Se);
 export {
-  Me as ArcgisSketch
+  Se as ArcgisSketch
 };