@arcgis/map-components 5.2.0-next.118 → 5.2.0-next.119

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

@@ -1,97 +1,1088 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as o } from "../../chunks/runtime.js";
-import { dismissFloatingElements as l, setCustomTools as n, setGroupAllowCollapse as r, setContextualToolLocation as a, setGroupCollapsePriorities as c } from "@arcgis/core/applications/ExperienceBuilder/sketchUtils.js";
-import { usePropertyChange as p } from "@arcgis/lumina/controllers";
-import { reEmitEvent as i } from "@arcgis/lumina/controllers/accessor";
-import d from "@arcgis/core/layers/GraphicsLayer.js";
-import h from "@arcgis/core/widgets/Sketch.js";
-import { LitElement as g, createEvent as m } from "@arcgis/lumina";
-import { m as b } from "../../chunks/useWidget.js";
-import { css as u } from "lit";
-import { watch as w } from "@arcgis/core/core/reactiveUtils.js";
-const v = u`calcite-block>.esri-grid-controls{background:0 0;padding:0}.esri-grid-controls{-webkit-user-select:none;user-select:none;padding:var(--arcgis-internal-padding);flex-flow:column wrap;display:flex;calcite-label.esri-labeled-switch__label{margin-block-end:var(--calcite-spacing-sm, .5rem)}}.esri-grid-controls__switch--bordered{border-width:0 0 var(--calcite-spacing-px) 0;border-style:solid;border-color:var(--calcite-color-border-1)}.esri-grid-controls__container{gap:var(--calcite-spacing-sm);flex-direction:column;flex:auto;display:flex}.esri-grid-controls__tilegroup{column-gap:var(--calcite-spacing-sm);align-items:start;display:flex;flex-wrap:wrap}.esri-grid-controls__tile__content{row-gap:var(--calcite-spacing-md);padding:var(--calcite-spacing-md);color:var(--calcite-color-text-2);flex-direction:column;align-items:center;display:flex}.esri-grid-controls__tile__content calcite-label{margin-bottom:calc(0px - var(--calcite-label-margin-bottom, .75rem));font-weight:var(--calcite-font-weight-medium)}.esri-grid-controls__tile{position:relative}.esri-grid-controls__tile:focus-within{outline:2px solid var(--calcite-color-brand);outline-offset:2px}.esri-grid-controls__tile--disabled{opacity:var(--calcite-opacity-disabled)}.esri-grid-controls__tile input[type=radio]{appearance:none;opacity:.001;border:var(--calcite-spacing-px) solid transparent;cursor:pointer;position:absolute;inset:0}.esri-grid-controls__tile input[type=radio]:checked+.esri-grid-controls__tile__content{border:var(--calcite-spacing-px) solid var(--calcite-color-brand)}.esri-grid-controls__tile input[type=radio]+.esri-grid-controls__tile__content{border:var(--calcite-spacing-px) solid transparent}.esri-grid-controls__numeric-inputs__container{gap:var(--calcite-spacing-sm);grid-auto-columns:1fr;grid-auto-flow:column;display:grid}.esri-grid-controls__inline-icon{margin-left:var(--calcite-spacing-xs);vertical-align:top;color:var(--calcite-color-status-warning)}:host{--response-toolbar-vert-width: 0;--response-toolbar-vert-height: 100%;--response-toolbar-horiz-width: 100%;--response-toolbar-horiz-height: 0}.esri-responsive-toolbar__ruler{opacity:0;pointer-events:none;position:absolute}.esri-responsive-toolbar__ruler--bar{visibility:hidden;height:0;display:block;position:absolute;top:0;left:0;right:0}.esri-responsive-toolbar__ruler--bar--vertical,.esri-responsive-toolbar__ruler--pad--vertical{width:var(--response-toolbar-vert-width);height:var(--response-toolbar-vert-height)}.esri-responsive-toolbar__ruler--pad--horizontal{width:var(--response-toolbar-horiz-width);height:var(--response-toolbar-horiz-height)}.esri-responsive-toolbar__bar>div{display:contents}.esri-responsive-toolbar__bar--horizontal{min-width:100%}.esri-responsive-toolbar__bar--vertical{min-height:100%}.esri-responsive-toolbar__pad{width:min-content;display:contents}.esri-responsive-toolbar__pad>div{display:contents}.esri-responsive-toolbar__ruler--pad--vertical{width:0;height:min(100vh - 120px,100cqh - 120px)}.esri-responsive-toolbar__ruler--pad--horizontal{width:min(100vw - 60px,100cqw - 60px);height:0}.esri-split-button--split-part--vertical--s{--calcite-size-sm: 16px;max-height:16px}.esri-split-button--split-part--vertical--m{--calcite-size-md: 24px;max-height:24px}.esri-split-button--split-part--vertical--l{--calcite-size-l: 40px;max-height:40px}.esri-split-button--split-part--horizontal--s,.esri-split-button--split-part--horizontal--m{max-width:16px}.esri-split-button--split-part--horizontal--l{max-width:24px}.esri-snapping-controls__toggle-block{min-width:100%;margin:0}.esri-snapping-controls__layer-list-block{border-bottom:none;min-width:225px}.esri-snapping-controls__layer-list-block[open]{margin-block:0}.esri-snapping-controls__layer-list{overflow:auto}.esri-snapping-controls__layer-list__filter{margin-bottom:10px}.esri-snapping-controls__layer-list__button{margin-bottom:6px}.esri-snapping-controls__layer-list__item calcite-accordion-item calcite-icon,.esri-snapping-controls__layer-list__item calcite-action calcite-icon{margin-inline-start:0}.esri-snapping-controls__layer-list__item calcite-icon{color:var(--calcite-color-brand);margin-inline-start:var(--calcite-list-item-spacing-indent, 1em)}.esri-snapping-controls{flex-flow:column wrap;display:flex}.esri-snapping-controls__container{flex-direction:column;flex:auto;display:flex}.esri-snapping-controls__container :only-child{border-block-end:none}.esri-snapping-controls__panel{width:320px}.esri-snapping-controls__item{border:1px solid #adadad4d;cursor:pointer;background-color:var(--calcite-color-foreground-2);border-color:var(--calcite-color-border-1);border-radius:2px;justify-content:space-between;margin:3px 0;padding:3px;transition:border-color .125s ease-in-out;display:flex;box-shadow:0 1px #adadad4d}.esri-snapping-controls__item-action-icon{flex:0 0 16px;width:16px;height:16px;margin-top:.1em;font-size:var(--calcite-font-size-md);display:inline-block}.esri-snapping-controls__action-toggle{opacity:1;cursor:pointer;border:1px solid var(--calcite-color-border-1);flex-flow:row-reverse;justify-content:space-between;align-items:flex-start;width:100%;margin:0;padding:6px 15px;font-size:var(--calcite-font-size-sm);transition:opacity .25s ease-in-out .25s,background-color .25s ease-in-out;display:flex}.esri-snapping-controls__action-toggle .esri-snapping-controls__item-action-title{margin-left:0}.esri-snapping-controls__action-toggle .esri-snapping-controls__item-action-icon{background-color:var(--calcite-color-foreground-1);border-radius:16px;flex:0 0 28px;width:16px;height:16px;padding:0;transition:background-color .125s ease-in-out;position:relative;overflow:hidden;box-shadow:0 0 0 1px #adadad}.esri-snapping-controls__action-toggle .esri-snapping-controls__item-action-icon:before{content:"";background-color:var(--calcite-color-foreground-2);border-radius:100%;width:12px;height:12px;margin:2px;transition:background-color .125s ease-in-out,left .125s ease-in-out;display:block;position:absolute;top:0;left:0;box-shadow:0 0 0 1px #242424}.esri-snapping-controls__action-toggle--on .esri-snapping-controls__item-action-icon{background-color:var(--calcite-color-foreground-1);box-shadow:0 0 0 1px #adadad}.esri-snapping-controls__action-toggle--on .esri-snapping-controls__item-action-icon:before{background-color:var(--calcite-color-foreground-3);left:12px}.esri-snapping-controls__nested-container{flex-direction:column;gap:6px;display:flex}.esri-snapping-controls__nested-container:not(:empty){padding-top:6px;padding-inline-start:1em}.esri-labeled-switch__label{--calcite-label-margin-bottom: 0}.esri-labeled-switch__label-content{text-wrap:balance;flex:1;align-items:center;gap:7px;display:flex}.esri-labeled-switch__label-content>div{flex-grow:1}.esri-labeled-switch__icon{margin-top:-1px}.esri-labeled-switch__icon_info{color:var(--calcite-color-status-info)}.esri-labeled-switch__icon_warning{color:var(--calcite-color-status-warning)}.esri-labeled-switch__tooltip{text-wrap:wrap}:host{display:flex;max-width:100%;justify-content:flex-end;pointer-events:none;--sketch-pad-flex-flow: wrap;--sketch-view-height-offset: 63px ;--sketch-view-margin-offset: 30px;--sketch-popover-header-offset: 49px}:host([scale="s"]){--sketch-view-height-offset: 47px ;--sketch-view-margin-offset: 30px;--sketch-popover-header-offset: 33px}:host([scale="l"]){--sketch-view-height-offset: 79px ;--sketch-view-margin-offset: 30px;--sketch-popover-header-offset: 65px}div:has(>.esri-sketch){display:contents}.esri-sketch{-webkit-user-select:none;user-select:none;pointer-events:none;display:flex}.esri-sketch-pad{gap:var(--arcgis-internal-sketch-gap, var(--calcite-spacing-sm));flex-flow:var(--sketch-pad-flex-flow);justify-content:var(--arcgis-internal-sketch-justify-content, flex-start)}.esri-sketch-pad:dir(rtl){flex-flow:row-reverse wrap}.esri-sketch-pad.esri-sketch--vertical{flex-flow:var(--sketch-pad-flex-flow, column wrap);justify-content:flex-start;--sketch-view-height-offset: 30px;--sketch-view-margin-offset: 15px}.esri-sketch-pad.esri-sketch--vertical:dir(rtl){flex-flow:var(--sketch-pad-flex-flow, column wrap-reverse)}.esri-sketch-pad.esri-sketch--vertical .esri-selection-toolbar__container{flex-direction:column}.esri-sketch>*{pointer-events:initial;display:flex}.esri-sketch-bar{flex-direction:column;gap:0;margin:0;flex-basis:100%}.esri-sketch-bar.esri-sketch--vertical{flex-flow:row}.esri-sketch__popover-wrapper{inline-size:max-content;min-inline-size:300px;max-height:calc(100cqh - (var(--sketch-view-height-offset, 90px)) - var(--sketch-view-margin-offset, 15px) - var(--sketch-popover-header-offset, 1000px));-webkit-user-select:none;user-select:none;max-inline-size:400px;overflow-y:auto}.esri-sketch__popover-wrapper .esri-sketch-tooltip-controls:not(:only-child) calcite-block{border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-border-3)}.esri-sketch__selection-count-chip--horizontal{margin-block:var(--calcite-spacing-xxs);margin-inline:var(--calcite-spacing-xs);align-self:center}.esri-sketch__selection-count-chip--vertical{margin-block:calc(var(--calcite-spacing-md) * var(--sketch-chip-margin-scale-factor, 1));scale:var(--sketch-chip-rescale, 1);align-self:center;margin-inline:0}.esri-sketch__selection-count-chip--vertical--s{--sketch-chip-rescale: .8;--sketch-chip-margin-scale-factor: .5}.esri-sketch--vertical{max-height:min(100vh - 120px,100cqh - 120px)}.esri-expand__popover-content .esri-sketch{gap:0}.esri-sketch-tooltip-controls{flex-flow:column wrap;min-width:100%;display:flex}.esri-sketch-tooltip-controls__block{border-block-end:none;margin:0}.esri-sketch-tooltip-controls__block-content{flex-direction:column;gap:6px;display:flex}.esri-sketch-tooltip-controls__radio-button-label-wrapper{align-items:center;gap:2px;display:flex}.esri-sketch-tooltip-controls calcite-label:last-child{--calcite-label-margin-bottom: 0}`, _ = b(h);
-class f extends g {
+import { c as F } from "../../chunks/runtime.js";
+import { css as H, noChange as R, 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/controllers/accessor";
+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 { u as ee } from "../../chunks/useT9n.js";
+import { m as te } from "../../chunks/useViewModel.js";
+import { V as T } from "../../chunks/visible-element.js";
+import { createRef as _, ref as E } from "lit/directives/ref.js";
+import ie from "@arcgis/core/widgets/Sketch/SketchViewModel.js";
+import { S as oe } from "../../chunks/resources.js";
+import { getOrCreateMapValue as B, 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 { 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 { 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";
+const ge = [
+  "bottom-end",
+  "bottom-start",
+  "bottom-left",
+  "bottom-right",
+  "top-end",
+  "top-start",
+  "top-left",
+  "top-right"
+], me = new Set(ge);
+function I(i, e) {
+  let t = e;
+  for (const o of i.split(".")) {
+    if (typeof t != "object" || t === null)
+      return;
+    t = Reflect.get(t, o);
+  }
+  return typeof t == "string" ? t : void 0;
+}
+const ve = H`.editing-controls-panel{min-inline-size:100px;max-inline-size:400px;-webkit-user-select:none;user-select:none;pointer-events:initial;padding:var(--calcite-space-sm);arcgis-sketch-tooltip-controls+arcgis-snapping-controls{border-block-start:1px solid var(--calcite-color-border-3)}}:host{pointer-events:none}`, fe = {
+  point: "pin",
+  polyline: "line",
+  polygon: "polygon",
+  rectangle: "rectangle",
+  circle: "circle",
+  multipoint: "pins",
+  mesh: "i3d-building",
+  freehandPolygon: "freehand-area",
+  freehandPolyline: "freehand",
+  text: "text"
+}, ye = {
+  selectionTools: {
+    defaultPriority: y.Default,
+    groupKind: "split-button",
+    overflowLabel: "selection"
+  },
+  selectionSet: {
+    defaultPriority: y.High,
+    groupKind: "actions"
+  },
+  createTools: {
+    defaultPriority: y.High,
+    groupKind: "more-button",
+    overflowLabel: "drawing"
+  },
+  undoRedo: {
+    defaultPriority: y.Medium,
+    groupKind: "split-button",
+    overflowLabel: "action"
+  },
+  settings: {
+    defaultPriority: y.Max,
+    groupKind: "more-button",
+    overflowLabel: "action"
+  },
+  geometrySimplification: {
+    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, g) {
+    if (n <= 0) {
+      r(g);
+      return;
+    }
+    o = setTimeout(() => {
+      s(), r(g);
+    }, n);
+  }
+  r(i());
+  const p = v(
+    i,
+    (n) => {
+      s(), n ? h(Ce, !0) : h(t == null ? 0 : be - (Date.now() - t), !1);
+    },
+    { sync: !0 }
+  );
+  return ce(() => {
+    p.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 {
+  //#region Lifecycle
+  constructor(i) {
+    super(i), this._effectiveRenderStateCache = /* @__PURE__ */ new Map(), this._effectiveGeometrySimplificationInProgress = !1, this.visibleElements = new ae(), this.settingsPopoverOpen = !1, this.availableCreateTools = [
+      "point",
+      "polyline",
+      "freehandPolyline",
+      "polygon",
+      "freehandPolygon",
+      "rectangle",
+      "circle"
+    ];
+  }
+  initialize() {
+    this.selectionViewModel ??= new re({ persistSelection: !1 }), this.addHandles([
+      v(
+        () => this.sketchViewModel,
+        (i, e) => {
+          i !== e && this._effectiveRenderStateCache.clear();
+        },
+        { sync: !0 }
+      ),
+      Te({
+        getLoading: () => this.sketchViewModel?.geometrySimplificationInProgress ?? !1,
+        setEffectiveLoading: (i) => {
+          this._effectiveGeometrySimplificationInProgress = i;
+        }
+      }),
+      v(
+        () => this.view,
+        (i) => {
+          this.selectionViewModel.view = i;
+        },
+        { initial: !0, sync: !0 }
+      ),
+      // Ensure the SelectionViewModel always has the latest layer
+      v(
+        () => this.sketchViewModel?.layer,
+        (i) => this.selectionViewModel.sources = i ? [i] : [],
+        { initial: !0, sync: !0 }
+      ),
+      this.selectionViewModel.on("complete", ({ selection: i }) => {
+        i.length && this.update(i);
+      }),
+      // Cancel active tool when selection activates
+      v(
+        () => this.selectionViewModel.activeOperation,
+        (i) => {
+          i && (this.sketchViewModel?.cancel(), this._activeCustomToolOptions = void 0);
+        },
+        { sync: !0 }
+      ),
+      Y(
+        () => this.sketchViewModel,
+        "create",
+        (i) => {
+          i.state === "complete" && this.sketchViewModel?.creationMode !== "continuous" && (this._activeCustomToolOptions = void 0);
+        }
+      ),
+      v(
+        () => this.visibleElements.settingsMenu,
+        (i) => {
+          i || (this.settingsPopoverOpen = !1);
+        },
+        { sync: !0 }
+      )
+    ]);
+  }
+  destroy() {
+    this._pendingCommandAbortController?.abort(), this.selectionViewModel.destroy(), this.sketchViewModel = void 0;
+  }
+  get _isEffectiveRenderStateFrozen() {
+    const { sketchViewModel: i } = this;
+    return !!(i?.toolTransitionInProgress || i?.geometrySimplificationInProgress);
+  }
+  /**
+   * Updates and returns the current values of a property, if rendering can proceed as normal,
+   * otherwise retrieves the last-seen value from a cache; this is key to avoiding render
+   * 'flickers' during transitions.
+   */
+  _getEffectiveValue(i, e) {
+    if (!this._isEffectiveRenderStateFrozen || !this._effectiveRenderStateCache.has(i)) {
+      const t = e();
+      return this._effectiveRenderStateCache.set(i, t), t;
+    }
+    return this._effectiveRenderStateCache.get(i);
+  }
+  get _state() {
+    return this.sketchViewModel?.state ?? "disabled";
+  }
+  get test() {
+    return {
+      activeCustomToolOptions: this._activeCustomToolOptions,
+      activeSelectionTool: this._activeSelectionTool,
+      selectionViewModel: this.selectionViewModel
+    };
+  }
+  get _activeSelectionTool() {
+    switch (this.selectionViewModel.activeOperation?.toolName) {
+      case "lasso":
+        return "lasso-selection";
+      case "rectangle":
+        return "rectangle-selection";
+      default:
+        return;
+    }
+  }
+  get _activePluginUniqueIds() {
+    const i = this.sketchViewModel?.activePluginConfigurations.filter((e) => !e.hidden).map((e) => e.uniqueId);
+    return new Set(i ?? []);
+  }
+  get _createToolActions() {
+    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 : [], p = i.rootPlugins, n = h?.map((d) => ({
+      active: d === r,
+      disabled: t,
+      icon: d.icon,
+      labelKey: d.label,
+      onClick: d === r ? () => this._cancelActiveOperation() : () => this._activateLegacyDrawTool(d.toolName, d.createOptions, d)
+    })) ?? [];
+    if (r && p)
+      return [...this._pluginsToActions(p), ...n];
+    if (e?.length && this.view?.type !== "3d")
+      return [...this._pluginsToActions(e), ...n];
+    const g = this.view?.type === "3d";
+    return [
+      ...this.availableCreateTools?.filter((d) => g && d === "multipoint" ? !1 : d === "mesh" ? !0 : o[d])?.map((d) => ({
+        active: d === s,
+        disabled: t,
+        icon: fe[d],
+        labelKey: `draw.${d}`,
+        onClick: d === s ? () => this._cancelActiveOperation() : () => this._activateLegacyDrawTool(d)
+      })) ?? [],
+      ...n
+    ];
+  }
+  get _shouldShowBackButton() {
+    const i = this.sketchViewModel?.firstPluginWithSwappableLeaf, e = this.sketchViewModel?.rootPlugins, t = this._activeCustomToolOptions;
+    return !!(this.sketchViewModel?.multiplePluginsActive && i && e && !(e.length < 2 && e.includes(i) && !this.visibleElements.singlePluginBackButton) && !t);
+  }
+  get _selectionToolActions() {
+    return this._shouldShowBackButton ? [
+      {
+        active: !1,
+        disabled: this.state === "disabled",
+        icon: "chevron-left",
+        iconFlipRTL: !0,
+        labelKey: "back",
+        onClick: () => this._cancelActiveOperation()
+      }
+    ] : this._selectionCommands;
+  }
+  get _settingsActions() {
+    const i = this._customActions?.get("settings-before"), e = this._customActions?.get("settings-after"), t = this.visibleElements.settingsMenu, o = [];
+    return !i?.length && !e?.length && !t || (i && o.push(...this._customActionsToSketchActions(i)), t && o.push({
+      icon: "gear",
+      active: this.settingsPopoverOpen,
+      disabled: this.state === "disabled",
+      labelKey: "settings.heading",
+      tooltipKey: "settings.heading",
+      refKey: "settings",
+      onClick: () => this.toggleSettingsPopover()
+    }), e && o.push(...this._customActionsToSketchActions(e))), o;
+  }
+  get _activeTool() {
+    const i = this.selectionViewModel.activeOperation;
+    if (i)
+      switch (i.toolName) {
+        case "lasso":
+          return "lasso-selection";
+        case "rectangle":
+          return "rectangle-selection";
+        case "default":
+          return "custom-selection";
+      }
+    if (!this.sketchViewModel)
+      return;
+    const { availableCreateTools: e } = this, { activeTool: t, activeCreateToolDrawMode: o } = this.sketchViewModel;
+    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({
+      active: i === "ready" && this._activeSelectionTool == null,
+      disabled: s,
+      icon: "cursor",
+      labelKey: "selectFeature",
+      onClick: () => this._activateDefaultSelectionTool()
+    });
+    const h = e.selectionTools;
+    h["rectangle-selection"] && r.push({
+      active: t === "rectangle-selection",
+      disabled: s,
+      icon: "cursor-marquee",
+      labelKey: "rectangleSelection",
+      onClick: () => this._activateSelectionTool("rectangle-selection")
+    }), h["lasso-selection"] && r.push({
+      active: t === "lasso-selection",
+      disabled: s,
+      icon: "lasso-select",
+      labelKey: "lassoSelection",
+      onClick: () => this._activateSelectionTool("lasso-selection")
+    });
+    const p = o?.get("selection-toolbar");
+    return p && r.push(...this._customActionsToSketchActions(p)), r;
+  }
+  get _selectionSetActions() {
+    const i = this.sketchViewModel?.updateGraphics.length ?? 0;
+    if (!i)
+      return [];
+    const e = this.state === "disabled", t = [], o = this._customActions?.get("before-selection-set"), s = this._customActions?.get("after-selection-set");
+    return this.visibleElements.selectionCountLabel && t.push({
+      active: !1,
+      appearance: "outline",
+      disabled: e,
+      icon: "selection-x",
+      kind: "brand",
+      labelKey: "deselectCount",
+      labelParameters: { count: i },
+      textEnabled: !0,
+      renderAsAction: !0,
+      onClick: () => this._cancelSketchOperation()
+    }), o && t.push(...this._customActionsToSketchActions(o)), this.visibleElements.duplicateButton && t.push({
+      active: !1,
+      disabled: e,
+      icon: "copy",
+      renderAsAction: !0,
+      labelKey: i > 1 ? "duplicateFeatures" : "duplicateFeature",
+      onClick: () => this._duplicate()
+    }), this.visibleElements.deleteButton && t.push({
+      active: !1,
+      disabled: e,
+      icon: "trash",
+      kind: "danger",
+      renderAsAction: !0,
+      labelKey: i > 1 ? "deleteFeatures" : "deleteFeature",
+      onClick: () => this._delete()
+    }), s && t.push(...this._customActionsToSketchActions(s)), t;
+  }
+  get _undoRedoActions() {
+    return this.visibleElements.undoRedoMenu ? [
+      {
+        active: !1,
+        disabled: this.state === "disabled" || !this.sketchViewModel?.canUndo(),
+        icon: "undo",
+        labelKey: "undo",
+        iconFlipRTL: !0,
+        onClick: () => this._undo()
+      },
+      {
+        active: !1,
+        disabled: this.state === "disabled" || !this.sketchViewModel?.canRedo(),
+        icon: "redo",
+        labelKey: "redo",
+        iconFlipRTL: !0,
+        onClick: () => this._redo()
+      }
+    ] : [];
+  }
+  get state() {
+    return this._getEffectiveValue("state", () => this._state);
+  }
+  get activeTool() {
+    return this._getEffectiveValue("activeTool", () => this._activeTool);
+  }
+  get activePluginIds() {
+    return this._getEffectiveValue("activePluginId", () => this._activePluginUniqueIds);
+  }
+  get groupedActions() {
+    const i = this._getEffectiveValue("availableCommandGroups", () => [
+      ["selectionTools", this._selectionToolActions],
+      ["createTools", this._createToolActions],
+      ["undoRedo", this._undoRedoActions],
+      ["settings", this._settingsActions],
+      ["selectionSet", this._selectionSetActions]
+    ].map(([o, s]) => ({
+      name: o,
+      commands: s,
+      visible: s.length > 0
+    }))), e = this._effectiveGeometrySimplificationInProgress ? i.map((t) => ({
+      ...t,
+      commands: t.commands.map((o) => ({ ...o, disabled: !0 }))
+    })) : i;
+    return !this.visibleElements.geometrySimplificationActivityIndicator || !this._effectiveGeometrySimplificationInProgress ? e : [
+      ...e,
+      {
+        name: "geometrySimplification",
+        commands: [
+          {
+            active: !1,
+            appearance: "transparent",
+            disabled: !0,
+            kind: "warning",
+            labelKey: "processing",
+            loading: !0,
+            onClick: () => {
+            },
+            renderAsAction: !0
+          }
+        ],
+        visible: !0
+      }
+    ];
+  }
+  // #endregion
+  // #region Public Methods
+  /**
+   * 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.
+   */
+  async create(i, e) {
+    await this._executeWhenReady(async () => {
+      this.cancelAll();
+      const t = this.sketchViewModel;
+      t && await C(t.create(i, e));
+    });
+  }
+  /**
+   * Guards against taking certain actions while geometry simplification is in progress.
+   */
+  async _executeWhenReady(i) {
+    this._pendingCommandAbortController?.abort();
+    const e = new AbortController();
+    this._pendingCommandAbortController = e;
+    try {
+      await C(
+        (async () => {
+          this.sketchViewModel?.geometrySimplificationInProgress && await Z(() => !this.sketchViewModel?.geometrySimplificationInProgress, e.signal), e.signal.aborted || await i();
+        })()
+      );
+    } finally {
+      this._pendingCommandAbortController === e && (this._pendingCommandAbortController = void 0);
+    }
+  }
+  toggleSettingsPopover() {
+    this.settingsPopoverOpen = !this.settingsPopoverOpen;
+  }
+  setCustomTools(i, e) {
+    this._customToolOptions = i ?? void 0;
+    const t = this._activeCustomToolOptions;
+    if (t) {
+      const o = this._customToolOptions?.find(
+        (s) => s.toolKey === t.toolKey
+      );
+      o ? this._activeCustomToolOptions = o : this.cancelAll();
+    }
+    if (e?.length) {
+      const o = /* @__PURE__ */ new Map();
+      for (const s of e)
+        B(o, s.position, () => []).push(s);
+      this._customActions = o;
+    } else
+      this._customActions = void 0;
+  }
+  /**
+   * Cancels all operations, restoring a neutral, ready state.
+   */
+  cancelAll() {
+    this._pendingCommandAbortController?.abort(), this._cancelSupportingOperations(), this.sketchViewModel?.cancel();
+  }
+  /**
+   * @privateRemarks Deliberately maintains parity with Sketch by passing empty graphics array to SketchViewModel, which will log a console error.
+   */
+  async update(i, e) {
+    await this._executeWhenReady(async () => {
+      const t = this.sketchViewModel;
+      t && await C(t.update(i, e));
+    });
+  }
+  // #endregion
+  // #region Private methods
+  /**
+   * SketchViewModel implements a default click-to-select experience. When this is active, the 'cursor' select
+   * action is active. This experience is active whenever there isn't some other active tool, so
+   * canceling the active tools is activating the default selection tool.
+   */
+  _activateDefaultSelectionTool() {
+    this._executeWhenReady(() => {
+      this.cancelAll(), this.view?.focus();
+    });
+  }
+  _cancelActiveOperation() {
+    this._executeWhenReady(() => this.cancelAll());
+  }
+  _cancelSketchOperation() {
+    this._executeWhenReady(() => this.sketchViewModel?.cancel());
+  }
+  _cancelSupportingOperations() {
+    this.selectionViewModel.cancel(), this._activeCustomToolOptions = void 0;
+  }
+  _activatePlugin(i) {
+    this._executeWhenReady(() => {
+      const e = this._activeCustomToolOptions != null;
+      this._cancelSupportingOperations();
+      const t = this.sketchViewModel;
+      if (t) {
+        if (e) {
+          t.cancel(), C(t.create(i));
+          return;
+        }
+        t.firstPluginWithSwappableLeaf ? (t.replaceLeaf(i), this.view?.focus()) : C(t.create(i));
+      }
+    });
+  }
+  _activateLegacyDrawTool(i, e, t) {
+    this._executeWhenReady(() => {
+      this._cancelSupportingOperations();
+      const o = this.sketchViewModel;
+      o && (this._activeCustomToolOptions = t, C(o.create(i, e)));
+    });
+  }
+  _activateSelectionTool(i) {
+    this._executeWhenReady(() => {
+      if (this._activeSelectionTool === i) {
+        this.selectionViewModel.cancel();
+        return;
+      }
+      this.cancelAll();
+      const e = {
+        createTool: i === "lasso-selection" ? "polygon" : "rectangle",
+        ...i === "lasso-selection" ? { mode: "freehand", toolName: "lasso" } : { toolName: "rectangle" },
+        type: "replace",
+        selectOnComplete: !0
+      };
+      this.selectionViewModel.activate(e) && this.view?.focus();
+    });
+  }
+  _delete() {
+    this._executeWhenReady(() => this.sketchViewModel?.delete());
+  }
+  _duplicate() {
+    this._executeWhenReady(() => {
+      this.sketchViewModel?.duplicate();
+    });
+  }
+  _executeCustomAction(i) {
+    this._executeWhenReady(() => i.onclick?.());
+  }
+  _redo() {
+    this._executeWhenReady(() => {
+      this.sketchViewModel?.redo();
+    });
+  }
+  _undo() {
+    this._executeWhenReady(() => {
+      this.sketchViewModel?.undo();
+    });
+  }
+  _customActionsToSketchActions(i) {
+    const e = this.state === "disabled";
+    return i.map((t) => ({
+      active: t.active ?? !1,
+      afterCreate: t.afterCreate,
+      afterRemoved: t.afterRemoved,
+      afterUpdate: t.afterUpdate,
+      disabled: e || (t.disabled ?? !1),
+      icon: t.icon,
+      iconFlipRTL: t.flipRTL,
+      id: t.id,
+      labelKey: t.text,
+      onClick: () => this._executeCustomAction(t)
+    }));
+  }
+  _pluginsToActions(i) {
+    const e = this.activePluginIds, t = this._activeCustomToolOptions, o = this.state === "disabled";
+    return i.map((s) => ({
+      active: (e?.has(s.uniqueId) ?? !1) && !t,
+      icon: s.icon,
+      disabled: o,
+      labelKey: `digitizers.${s.localizationKey}`,
+      onClick: () => this._activatePlugin([s])
+    }));
+  }
+  // #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([
+  le("components.sketch.SketchComponentViewModel")
+], l);
+class _e extends de {
+  #t;
+  #e = !1;
+  #i;
+  constructor(e) {
+    if (super(e), e.type !== pe.ELEMENT)
+      throw new Error("nodeHooks() can only be used on elements");
+  }
+  render(e) {
+    return R;
+  }
+  update(e, [t]) {
+    const o = e.element;
+    if (!(o instanceof HTMLElement))
+      throw new TypeError("nodeHooks() can only be used on HTMLElements");
+    const s = this.#e ? t.afterUpdate : t.afterCreate;
+    return this.#t = o, this.#e = !0, this.#i = t, queueMicrotask(() => {
+      o.isConnected && s?.(o);
+    }), R;
+  }
+  disconnected() {
+    const e = this.#t, t = this.#i?.afterRemoved;
+    !e || !t || queueMicrotask(() => {
+      e.isConnected || ue(() => t(e), { timeout: 16 });
+    });
+  }
+}
+const D = he(_e), Ee = te((i) => new ie({
+  ...i,
+  cancelUpdateOnClickAway: !0,
+  creationMode: "continuous",
+  textSymbol: new J({ text: "hello world" }),
+  useLegacyCreateTools: !1
+}));
+class Me extends Q {
   constructor() {
-    super(), this._visualScale = "m", this.widget = _(this), this.viewModel = this.widget.viewModel, this._defaultGraphicsLayer = null, this.view = this.widget.view, this.activeTool = this.widget.activeTool, this.autoDestroyDisabled = !1, this.availableCreateTools = this.widget.availableCreateTools, this.createGraphic = this.widget.createGraphic, this.creationMode = this.widget.creationMode, this.defaultCreateOptions = this.widget.defaultCreateOptions, this.defaultGraphicsLayerDisabled = !1, this.defaultUpdateOptions = this.widget.defaultUpdateOptions, this.hideCreateToolsCircle = this.widget.visibleElements.createTools.circle, this.hideCreateToolsMultipoint = this.widget.visibleElements.createTools.multipoint, this.hideCreateToolsPoint = this.widget.visibleElements.createTools.point, this.hideCreateToolsPolygon = this.widget.visibleElements.createTools.polygon, this.hideCreateToolsPolyline = this.widget.visibleElements.createTools.polyline, this.hideCreateToolsRectangle = this.widget.visibleElements.createTools.rectangle, this.hideDuplicateButton = this.widget.visibleElements.duplicateButton, this.hideDeleteButton = this.widget.visibleElements.deleteButton, this.hideSelectionCountLabel = this.widget.visibleElements.selectionCountLabel, this.hideLabelsToggle = this.widget.visibleElements.labelsToggle, this.hideSelectionToolsLassoSelection = this.widget.visibleElements.selectionTools["lasso-selection"], this.hideSelectionToolsRectangleSelection = this.widget.visibleElements.selectionTools["rectangle-selection"], this.hideSettingsMenu = this.widget.visibleElements.settingsMenu, this.hideSnappingControls = this.widget.visibleElements.snappingControls, this.hideSnappingControlsElementsEnabledToggle = this.widget.visibleElements.snappingControlsElements.enabledToggle, this.hideSnappingControlsElementsFeatureEnabledToggle = this.widget.visibleElements.snappingControlsElements.featureEnabledToggle, this.hideSnappingControlsElementsLayerList = this.widget.visibleElements.snappingControlsElements.layerList, this.hideSnappingControlsElementsSelfEnabledToggle = this.widget.visibleElements.snappingControlsElements.selfEnabledToggle, this.hideSnappingControlsElementsGridEnabledToggle = this.widget.visibleElements.snappingControlsElements.gridEnabledToggle, this.hideSnappingControlsElementsGridControls = this.widget.visibleElements.snappingControlsElements.gridControls, this.hideSnappingControlsElementsGridControlsElementsColorSelection = this.widget.visibleElements.snappingControlsElements.gridControlsElements.colorSelection, this.hideSnappingControlsElementsGridControlsElementsDynamicScaleToggle = this.widget.visibleElements.snappingControlsElements.gridControlsElements.dynamicScaleToggle, this.hideSnappingControlsElementsGridControlsElementsLineIntervalInput = this.widget.visibleElements.snappingControlsElements.gridControlsElements.lineIntervalInput, this.hideSnappingControlsElementsGridControlsElementsNumericInputs = this.widget.visibleElements.snappingControlsElements.gridControlsElements.numericInputs, this.hideSnappingControlsElementsGridControlsElementsOutOfScaleWarning = this.widget.visibleElements.snappingControlsElements.gridControlsElements.outOfScaleWarning, this.hideSnappingControlsElementsGridControlsElementsPlacementButtons = this.widget.visibleElements.snappingControlsElements.gridControlsElements.placementButtons, this.hideSnappingControlsElementsGridControlsElementsRotateWithMapToggle = this.widget.visibleElements.snappingControlsElements.gridControlsElements.rotateWithMapToggle, this.hideTooltipsToggle = this.widget.visibleElements.tooltipsToggle, this.hideUndoRedoMenu = this.widget.visibleElements.undoRedoMenu, this.icon = this.widget.icon, this.label = this.widget.label, this.labelOptions = this.widget.labelOptions, this.layer = this.widget.layer, this.layout = this.widget.layout, this.pointSymbol = this.viewModel.pointSymbol, this.polygonSymbol = this.viewModel.polygonSymbol, this.polylineSymbol = this.viewModel.polylineSymbol, this.showSnappingControlsElementsHeader = this.widget.visibleElements.snappingControlsElements.header, this.showCreateToolsFreehandPolygon = this.widget.visibleElements.createTools.freehandPolygon, this.showCreateToolsFreehandPolyline = this.widget.visibleElements.createTools.freehandPolyline, this.showCreateToolsText = this.widget.visibleElements.createTools.text, this.snappingOptions = this.widget.snappingOptions, this.state = this.widget.state, this.textSymbol = this.viewModel.textSymbol, this.toolbarKind = this.widget.toolbarKind, this.tooltipOptions = this.widget.tooltipOptions, this.useLegacyCreateTools = this.viewModel.useLegacyCreateTools, this.updateOnGraphicClickDisabled = this.viewModel.updateOnGraphicClick, this.updateGraphics = this.widget.updateGraphics, this.arcgisCreate = i(() => this.widget, "create"), this.arcgisDelete = i(() => this.widget, "delete"), this.arcgisPropertyChange = p()("state"), this.arcgisReady = m(), this.arcgisRedo = i(() => this.widget, "redo"), this.arcgisUndo = i(() => this.widget, "undo"), this.arcgisUpdate = i(() => this.widget, "update"), this.arcgisDuplicate = i(() => this.widget, "duplicate"), this.listen("arcgisReady", this._arcgisReadyHandler);
+    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.requestUpdate();
+    }), this.manager.onLifecycle(() => [
+      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));
+      }),
+      v(() => this.el.view, (e) => {
+        this.viewModel.view = e, this.#t.view = e ?? void 0;
+      }, { initial: !0 }),
+      v(() => this.viewModel, (e) => {
+        this.#t.sketchViewModel = e, this.viewModel.pluginManager.sketch = this;
+      }, { initial: !0 }),
+      v(() => this.#t.state, (e, t) => {
+        this.requestUpdate("state", t);
+      }, { initial: !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();
+    });
   }
   static {
-    this.properties = { view: 0, activeTool: 35, autoDestroyDisabled: 5, availableCreateTools: 0, createGraphic: 32, creationMode: 1, defaultCreateOptions: 0, defaultGraphicsLayerDisabled: 5, defaultUpdateOptions: 0, hideCreateToolsCircle: 5, hideCreateToolsMultipoint: 5, hideCreateToolsPoint: 5, hideCreateToolsPolygon: 5, hideCreateToolsPolyline: 5, hideCreateToolsRectangle: 5, hideDuplicateButton: 5, hideDeleteButton: 5, hideSelectionCountLabel: 5, hideLabelsToggle: 5, hideSelectionToolsLassoSelection: 5, hideSelectionToolsRectangleSelection: 5, hideSettingsMenu: 5, hideSnappingControls: 5, hideSnappingControlsElementsEnabledToggle: 5, hideSnappingControlsElementsFeatureEnabledToggle: 5, hideSnappingControlsElementsLayerList: 5, hideSnappingControlsElementsSelfEnabledToggle: 5, hideSnappingControlsElementsGridEnabledToggle: 5, hideSnappingControlsElementsGridControls: 5, hideSnappingControlsElementsGridControlsElementsColorSelection: 5, hideSnappingControlsElementsGridControlsElementsDynamicScaleToggle: 5, hideSnappingControlsElementsGridControlsElementsLineIntervalInput: 5, hideSnappingControlsElementsGridControlsElementsNumericInputs: 5, hideSnappingControlsElementsGridControlsElementsOutOfScaleWarning: 5, hideSnappingControlsElementsGridControlsElementsPlacementButtons: 5, hideSnappingControlsElementsGridControlsElementsRotateWithMapToggle: 5, hideTooltipsToggle: 5, hideUndoRedoMenu: 5, icon: 1, label: 1, labelOptions: 0, layer: 0, layout: 1, pointSymbol: 0, polygonSymbol: 0, polylineSymbol: 0, referenceElement: 1, scale: 1, visualScale: 1, showSnappingControlsElementsHeader: 5, showCreateToolsFreehandPolygon: 5, showCreateToolsFreehandPolyline: 5, showCreateToolsText: 5, snappingOptions: 0, state: 32, textSymbol: 0, toolbarKind: 1, tooltipOptions: 0, useLegacyCreateTools: 5, updateOnGraphicClickDisabled: 5, updateGraphics: 32 };
+    this.properties = { _groupLayoutPriorityOverrides: 16, _contextualToolLocation: 16, _refMap: 16, viewModel: 0, view: 0, activeTool: 32, autoDestroyDisabled: 5, visibleElements: 0, availableCreateTools: 0, createGraphic: 32, creationMode: 1, defaultCreateOptions: 0, defaultGraphicsLayerDisabled: 5, defaultUpdateOptions: 0, geometrySimplificationInProgress: 36, hideCreateToolsCircle: 5, hideCreateToolsMultipoint: 5, hideCreateToolsPoint: 5, hideCreateToolsPolygon: 5, hideCreateToolsPolyline: 5, hideCreateToolsRectangle: 5, hideDuplicateButton: 5, hideDeleteButton: 5, hideSelectionCountLabel: 5, hideLabelsToggle: 5, hideSelectionToolsLassoSelection: 5, hideSelectionToolsRectangleSelection: 5, hideSettingsMenu: 5, hideSinglePluginBackButton: 5, hideSnappingControls: 5, hideSnappingControlsElementsEnabledToggle: 5, hideSnappingControlsElementsFeatureEnabledToggle: 5, hideSnappingControlsElementsLayerList: 5, hideSnappingControlsElementsSelfEnabledToggle: 5, hideSnappingControlsElementsGridEnabledToggle: 5, hideSnappingControlsElementsGridControls: 5, hideSnappingControlsElementsGridControlsElementsColorSelection: 5, hideSnappingControlsElementsGridControlsElementsDynamicScaleToggle: 5, hideSnappingControlsElementsGridControlsElementsLineIntervalInput: 5, hideSnappingControlsElementsGridControlsElementsNumericInputs: 5, hideSnappingControlsElementsGridControlsElementsOutOfScaleWarning: 5, hideSnappingControlsElementsGridControlsElementsPlacementButtons: 5, hideSnappingControlsElementsGridControlsElementsRotateWithMapToggle: 5, hideTooltipsToggle: 5, hideUndoRedoMenu: 5, icon: 1, label: 1, labelOptions: 0, layer: 0, layout: 1, pointSymbol: 0, polygonSymbol: 0, polylineSymbol: 0, referenceElement: 1, relativePosition: 1, scale: 1, visualScale: 1, showSnappingControlsElementsHeader: 5, showCreateToolsFreehandPolygon: 5, showCreateToolsFreehandPolyline: 5, showCreateToolsText: 5, hideGeometrySimplificationActivityIndicator: 5, snappingOptions: 0, state: 32, textSymbol: 0, toolbarKind: 1, tooltipOptions: 0, valueOptions: 0, useLegacyCreateTools: 5, updateOnGraphicClickDisabled: 5, cancelUpdateOnClickAwayDisabled: 5, updateGraphics: 32 };
   }
   static {
-    this.styles = v;
+    this.styles = ve;
+  }
+  #t;
+  get #e() {
+    return this.#t.visibleElements;
+  }
+  #i;
+  #o;
+  #s;
+  get visibleElements() {
+    return this.#t.visibleElements;
+  }
+  set visibleElements(e) {
+    this.#t.visibleElements = e;
+  }
+  get availableCreateTools() {
+    return this.#t.availableCreateTools;
+  }
+  set availableCreateTools(e) {
+    this.#t.availableCreateTools = e;
+  }
+  get hideCreateToolsCircle() {
+    return !this.#e.createTools.circle;
+  }
+  set hideCreateToolsCircle(e) {
+    this.#e.createTools.circle = !e;
+  }
+  get hideCreateToolsMultipoint() {
+    return !this.#e.createTools.multipoint;
+  }
+  set hideCreateToolsMultipoint(e) {
+    this.#e.createTools.multipoint = !e;
+  }
+  get hideCreateToolsPoint() {
+    return !this.#e.createTools.point;
+  }
+  set hideCreateToolsPoint(e) {
+    this.#e.createTools.point = !e;
+  }
+  get hideCreateToolsPolygon() {
+    return !this.#e.createTools.polygon;
+  }
+  set hideCreateToolsPolygon(e) {
+    this.#e.createTools.polygon = !e;
+  }
+  get hideCreateToolsPolyline() {
+    return !this.#e.createTools.polyline;
+  }
+  set hideCreateToolsPolyline(e) {
+    this.#e.createTools.polyline = !e;
+  }
+  get hideCreateToolsRectangle() {
+    return !this.#e.createTools.rectangle;
+  }
+  set hideCreateToolsRectangle(e) {
+    this.#e.createTools.rectangle = !e;
+  }
+  get hideDuplicateButton() {
+    return !this.#e.duplicateButton;
+  }
+  set hideDuplicateButton(e) {
+    this.#e.duplicateButton = !e;
+  }
+  get hideDeleteButton() {
+    return !this.#e.deleteButton;
+  }
+  set hideDeleteButton(e) {
+    this.#e.deleteButton = !e;
+  }
+  get hideSelectionCountLabel() {
+    return !this.#e.selectionCountLabel;
+  }
+  set hideSelectionCountLabel(e) {
+    this.#e.selectionCountLabel = !e;
+  }
+  get hideLabelsToggle() {
+    return !this.#e.labelsToggle;
+  }
+  set hideLabelsToggle(e) {
+    this.#e.labelsToggle = !e;
+  }
+  get hideSelectionToolsLassoSelection() {
+    return !this.#e.selectionTools["lasso-selection"];
+  }
+  set hideSelectionToolsLassoSelection(e) {
+    this.#e.selectionTools["lasso-selection"] = !e;
+  }
+  get hideSelectionToolsRectangleSelection() {
+    return !this.#e.selectionTools["rectangle-selection"];
+  }
+  set hideSelectionToolsRectangleSelection(e) {
+    this.#e.selectionTools["rectangle-selection"] = !e;
+  }
+  get hideSettingsMenu() {
+    return !this.#e.settingsMenu;
+  }
+  set hideSettingsMenu(e) {
+    this.#e.settingsMenu = !e;
+  }
+  get hideSinglePluginBackButton() {
+    return !this.#e.singlePluginBackButton;
+  }
+  set hideSinglePluginBackButton(e) {
+    this.#e.singlePluginBackButton = !e;
+  }
+  get hideSnappingControls() {
+    return !this.#e.snappingControls;
+  }
+  set hideSnappingControls(e) {
+    this.#e.snappingControls = !e;
+  }
+  get hideSnappingControlsElementsEnabledToggle() {
+    return !this.#e.snappingControlsElements.enabledToggle;
+  }
+  set hideSnappingControlsElementsEnabledToggle(e) {
+    this.#e.snappingControlsElements.enabledToggle = !e;
+  }
+  get hideSnappingControlsElementsFeatureEnabledToggle() {
+    return !this.#e.snappingControlsElements.featureEnabledToggle;
+  }
+  set hideSnappingControlsElementsFeatureEnabledToggle(e) {
+    this.#e.snappingControlsElements.featureEnabledToggle = !e;
+  }
+  get hideSnappingControlsElementsLayerList() {
+    return !this.#e.snappingControlsElements.layerList;
+  }
+  set hideSnappingControlsElementsLayerList(e) {
+    this.#e.snappingControlsElements.layerList = !e;
+  }
+  get hideSnappingControlsElementsSelfEnabledToggle() {
+    return !this.#e.snappingControlsElements.selfEnabledToggle;
+  }
+  set hideSnappingControlsElementsSelfEnabledToggle(e) {
+    this.#e.snappingControlsElements.selfEnabledToggle = !e;
+  }
+  get hideSnappingControlsElementsGridEnabledToggle() {
+    return !this.#e.snappingControlsElements.gridEnabledToggle;
+  }
+  set hideSnappingControlsElementsGridEnabledToggle(e) {
+    this.#e.snappingControlsElements.gridEnabledToggle = !e;
+  }
+  get hideSnappingControlsElementsGridControls() {
+    return !this.#e.snappingControlsElements.gridControls;
+  }
+  set hideSnappingControlsElementsGridControls(e) {
+    this.#e.snappingControlsElements.gridControls = !e;
+  }
+  get hideSnappingControlsElementsGridControlsElementsColorSelection() {
+    return !this.#e.snappingControlsElements.gridControlsElements.colorSelection;
+  }
+  set hideSnappingControlsElementsGridControlsElementsColorSelection(e) {
+    this.#e.snappingControlsElements.gridControlsElements.colorSelection = !e;
+  }
+  get hideSnappingControlsElementsGridControlsElementsDynamicScaleToggle() {
+    return !this.#e.snappingControlsElements.gridControlsElements.dynamicScaleToggle;
+  }
+  set hideSnappingControlsElementsGridControlsElementsDynamicScaleToggle(e) {
+    this.#e.snappingControlsElements.gridControlsElements.dynamicScaleToggle = !e;
+  }
+  get hideSnappingControlsElementsGridControlsElementsLineIntervalInput() {
+    return !this.#e.snappingControlsElements.gridControlsElements.lineIntervalInput;
+  }
+  set hideSnappingControlsElementsGridControlsElementsLineIntervalInput(e) {
+    this.#e.snappingControlsElements.gridControlsElements.lineIntervalInput = !e;
+  }
+  get hideSnappingControlsElementsGridControlsElementsNumericInputs() {
+    return !this.#e.snappingControlsElements.gridControlsElements.numericInputs;
+  }
+  set hideSnappingControlsElementsGridControlsElementsNumericInputs(e) {
+    this.#e.snappingControlsElements.gridControlsElements.numericInputs = !e;
+  }
+  get hideSnappingControlsElementsGridControlsElementsOutOfScaleWarning() {
+    return !this.#e.snappingControlsElements.gridControlsElements.outOfScaleWarning;
+  }
+  set hideSnappingControlsElementsGridControlsElementsOutOfScaleWarning(e) {
+    this.#e.snappingControlsElements.gridControlsElements.outOfScaleWarning = !e;
+  }
+  get hideSnappingControlsElementsGridControlsElementsPlacementButtons() {
+    return !this.#e.snappingControlsElements.gridControlsElements.placementButtons;
+  }
+  set hideSnappingControlsElementsGridControlsElementsPlacementButtons(e) {
+    this.#e.snappingControlsElements.gridControlsElements.placementButtons = !e;
+  }
+  get hideSnappingControlsElementsGridControlsElementsRotateWithMapToggle() {
+    return !this.#e.snappingControlsElements.gridControlsElements.rotateWithMapToggle;
+  }
+  set hideSnappingControlsElementsGridControlsElementsRotateWithMapToggle(e) {
+    this.#e.snappingControlsElements.gridControlsElements.rotateWithMapToggle = !e;
+  }
+  get hideTooltipsToggle() {
+    return !this.#e.tooltipsToggle;
+  }
+  set hideTooltipsToggle(e) {
+    this.#e.tooltipsToggle = !e;
+  }
+  get hideUndoRedoMenu() {
+    return !this.#e.undoRedoMenu;
+  }
+  set hideUndoRedoMenu(e) {
+    this.#e.undoRedoMenu = !e;
+  }
+  get relativePosition() {
+    const e = this.el.slot;
+    return this.#i ?? (me.has(e) ? e : oe.topRight);
+  }
+  set relativePosition(e) {
+    this.#i = e;
   }
   get scale() {
-    return this._visualScale;
+    return this.visualScale;
   }
   set scale(e) {
-    this._visualScale = e, this.widget.scale = e;
+    this.visualScale = e;
+  }
+  get showSnappingControlsElementsHeader() {
+    return this.#e.snappingControlsElements.header;
+  }
+  set showSnappingControlsElementsHeader(e) {
+    this.#e.snappingControlsElements.header = e;
+  }
+  get showCreateToolsFreehandPolygon() {
+    return this.#e.createTools.freehandPolygon;
+  }
+  set showCreateToolsFreehandPolygon(e) {
+    this.#e.createTools.freehandPolygon = e;
+  }
+  get showCreateToolsFreehandPolyline() {
+    return this.#e.createTools.freehandPolyline;
+  }
+  set showCreateToolsFreehandPolyline(e) {
+    this.#e.createTools.freehandPolyline = e;
+  }
+  get showCreateToolsText() {
+    return this.#e.createTools.text;
+  }
+  set showCreateToolsText(e) {
+    this.#e.createTools.text = e;
+  }
+  get hideGeometrySimplificationActivityIndicator() {
+    return !this.#e.geometrySimplificationActivityIndicator;
+  }
+  set hideGeometrySimplificationActivityIndicator(e) {
+    this.#e.geometrySimplificationActivityIndicator = !e;
+  }
+  get state() {
+    return this.#t.state;
   }
-  get visualScale() {
-    return this._visualScale;
+  get cancelUpdateOnClickAwayDisabled() {
+    return !this.viewModel.cancelUpdateOnClickAway;
   }
-  set visualScale(e) {
-    this._visualScale = e, this.widget.scale = e;
+  set cancelUpdateOnClickAwayDisabled(e) {
+    this.viewModel.cancelUpdateOnClickAway = !e;
   }
   async cancel() {
-    this.requestUpdate(), this.widget?.cancel();
+    this.#t.cancelAll();
   }
   async complete() {
-    this.widget?.complete();
+    this.viewModel.complete();
   }
   async create(e, t) {
-    await this.widget?.create(e, t);
+    await this.#t.create(e, t);
   }
   async delete() {
-    this.widget?.delete();
+    this.viewModel.delete();
   }
   async destroy() {
     await this.manager.destroy();
   }
+  async dismissFloatingElements() {
+    this.#t.settingsPopoverOpen = !1;
+  }
   async duplicate() {
-    this.widget?.duplicate();
+    this.viewModel.duplicate();
   }
   async redo() {
-    this.widget?.redo();
+    this.viewModel.redo();
   }
-  async dismissFloatingElements() {
-    l(this.widget);
+  async setContextualToolLocation(e) {
+    this._contextualToolLocation = e;
   }
   async setCustomTools(e, t) {
-    n(this.widget, e, t);
-  }
-  async setGroupAllowCollapseOptions(e) {
-    r(this.widget, e);
-  }
-  async setContextualToolLocation(e) {
-    a(this.widget, e);
+    this.#t.setCustomTools(e, t);
   }
   async setGroupCollapsePriorities(e) {
-    c(this.widget, e);
+    this._groupLayoutPriorityOverrides = e || /* @__PURE__ */ new Map();
   }
   async triggerUpdate(e, t) {
-    this.widget?.update(e, t);
+    await this.#t.update(e, t);
   }
   async undo() {
-    this.widget?.undo();
+    this.#t.sketchViewModel?.undo();
   }
-  _arcgisReadyHandler() {
-    this.defaultGraphicsLayerDisabled || (this._defaultGraphicsLayer = new d({ title: "Sketch Layer" }), this.widget.availableCreateTools = [
-      "point",
-      "polyline",
-      "freehandPolyline",
-      "polygon",
-      "freehandPolygon",
-      "rectangle",
-      "circle"
-    ], this.widget.layer = this._defaultGraphicsLayer, this.el.view?.map?.add(this.widget.layer), this.manager.onLifecycle(() => w(() => this.el.view?.map, (e, t) => {
-      const s = this._defaultGraphicsLayer;
-      !s || this.widget.layer !== s || (t?.allLayers.includes(s) && t.remove(s), e?.add(s));
-    })), 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;
-    }));
+  connectedCallback() {
+    super.connectedCallback(), this.defaultGraphicsLayerDisabled || (this._defaultGraphicsLayer?.destroyed && (this._defaultGraphicsLayer = null), this._defaultGraphicsLayer ??= new j({ title: "Sketch Layer" }), this.layer = this._defaultGraphicsLayer, this.view?.map?.add(this.layer), this.viewModel.layer = this._defaultGraphicsLayer);
+  }
+  disconnectedCallback() {
+    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: 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>` })}`;
+  }
+  _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) => {
+      n.stopPropagation();
+      const { labelsEnabled: g, tooltipsEnabled: u, directionMode: d } = n.currentTarget, b = this.viewModel;
+      switch (n.detail.name) {
+        case "labelsEnabled":
+          b.labelOptions.enabled = g;
+          break;
+        case "directionMode":
+          b.valueOptions.directionMode = d;
+          break;
+        case "tooltipsEnabled":
+          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>`;
+  }
+  _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, 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>`;
+      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>`;
+      case "actions":
+        return m`<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>`;
   }
 }
-o("arcgis-sketch", f);
+F("arcgis-sketch", Me);
 export {
-  f as ArcgisSketch
+  Me as ArcgisSketch
 };