@esri/solutions-components 1.0.0-next.20250415 → 1.0.0-next.20250421

package/dist/components/map-card/customElement.js

@@ -5,12 +5,13 @@ import { g, b as w } from "../../chunks/mapViewUtils.js";
 import { u as y } from "../../chunks/useT9n.js";
 import { html as h, nothing as c } from "lit";
 import { createRef as d, ref as r } from "lit-html/directives/ref.js";
-import { LitElement as I, createEvent as p, noShadowRoot as v, safeClassMap as f } from "@arcgis/lumina";
-import { css as S } from "@lit/reactive-element/css-tag.js";
+import { LitElement as I, createEvent as p, noShadowRoot as S, safeClassMap as f } from "@arcgis/lumina";
+import { css as v } from "@lit/reactive-element/css-tag.js";
+import { defineCustomElements as $ } from "@arcgis/instant-apps-components/loader";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.0/esri/copyright.txt for details.
-v1.0.0-next.20250415 */
-const $ = S`@layer{/** @license
+v1.0.0-next.20250421 */
+const L = v`@layer{/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -25,18 +26,23 @@ const $ = S`@layer{/** @license
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */:host{display:block;--calcite-label-margin-bottom: 0;--calcite-block-padding: 0}.map-height{height:calc(100% - 53px)}.height-full{height:100%}.height-49-px{height:49px}.box-shadow{box-shadow:none!important}.visibility-hidden-1{visibility:hidden;height:1px}.display-none{display:none}.display-block{display:block}}`;
-class L extends I {
+class T extends I {
+  //--------------------------------------------------------------------------
+  //
+  //  Overrides (internal)
+  //
+  //--------------------------------------------------------------------------
   constructor() {
-    super(), this.defaultWebmapId = "", this.enableShare = !1, this.homeZoomIndex = 3, this.homeZoomPosition = "top-left", this.homeZoomToolsSize = "m", this.mapInfos = [], this.mapWidgetsIndex = 0, this.mapWidgetsPosition = "top-right", this.mapWidgetsSize = "m", this._translations = y({ name: "map-card" }), this._showHideOpen = !1, this._defaultWebmapHonored = !1, this._loadedId = "", this._mapDiv = d(), this._mapPicker = d(), this._mapTools = d(), this._moreDropdown = d(), this._mapListExpanded = !1, this._filterActive = !1, this._mapLayerPicker = d(), this._toolbar = d(), this._observerSet = !1, this.mapChanged = p(), this.beforeMapChanged = p(), this.toggleFilter = p(), this.clearSelection = p(), this.listenOn(window, "mapInfoChange", this.mapInfoChange), this.listenOn(window, "noLayersFound", this.noLayersFound), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.enableSingleExpand = !0, this.stackTools = !0;
+    super(), this.defaultWebmapId = "", this.defaultLayerId = "", this.enableHome = !1, this.enableLegend = !1, this.enableFloorFilter = !1, this.enableFullscreen = !1, this.enableShare = !1, this.enableSingleExpand = !1, this.enableSearch = !1, this.enableBasemap = !1, this.hide = !1, this.homeZoomIndex = 3, this.homeZoomPosition = "top-left", this.homeZoomToolsSize = "m", this.locale = "", this.mapInfos = [], this.mapWidgetsIndex = 0, this.mapWidgetsPosition = "top-right", this.mapWidgetsSize = "m", this.stackTools = !1, this.toolOrder = [], this.isMapLayout = !1, this.shareIncludeEmbed = !1, this.shareIncludeSocial = !1, this.selectedFeaturesIds = [], this.onlyShowUpdatableLayers = !1, this.isMobile = !1, this._translations = y({ name: "map-card" }), this._showHideOpen = !1, this._toolInfos = [], this._controlsThatFit = [], this._defaultWebmapHonored = !1, this._loadedId = "", this._mapDiv = d(), this._mapPicker = d(), this._mapTools = d(), this._moreDropdown = d(), this._mapListExpanded = !1, this._filterActive = !1, this._definitionExpression = "", this._mapLayerPicker = d(), this._toolbar = d(), this._toolbarSizeInfos = [], this._defaultVisibleToolSizeInfos = [], this._observerSet = !1, this.mapChanged = p(), this.beforeMapChanged = p(), this.toggleFilter = p(), this.clearSelection = p(), this.listenOn(window, "mapInfoChange", this.mapInfoChange), this.listenOn(window, "noLayersFound", this.noLayersFound), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.enableSingleExpand = !0, this.stackTools = !0, $(window);
   }
   static {
     this.properties = { appLayout: 1, appProxies: 1, defaultWebmapId: 1, defaultLayerId: 1, enableHome: 5, enableLegend: 5, enableFloorFilter: 5, enableFullscreen: 5, enableShare: 5, enableSingleExpand: 5, enableSearch: 5, enableBasemap: 5, basemapConfig: 0, hide: 5, homeZoomIndex: 9, homeZoomPosition: 1, homeZoomToolsSize: 1, locale: 1, mapInfos: 0, mapWidgetsIndex: 9, mapWidgetsPosition: 1, mapWidgetsSize: 1, mapView: 0, stackTools: 5, theme: 1, toolOrder: 0, isMapLayout: 5, shareIncludeEmbed: 5, shareIncludeSocial: 5, selectedFeaturesIds: 0, selectedLayer: 0, zoomToScale: 9, onlyShowUpdatableLayers: 5, isMobile: 5, mapInfo: 0, _translations: 16, _searchConfiguration: 16, _webMapInfo: 16, _showHideOpen: 16, _toolInfos: 16, _controlsThatFit: 16 };
   }
   static {
-    this.styles = $;
+    this.styles = L;
   }
   static {
-    this.shadowRootOptions = v;
+    this.shadowRootOptions = S;
   }
   /** TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code */
   willUpdate(i) {
@@ -70,7 +76,7 @@ class L extends I {
   /** watch for changes in layer view and verify if it has editing enabled */
   async selectedLayerWatchHandler() {
     await this.selectedLayer?.when(async () => {
-      this._definitionExpression = this.selectedLayer?.definitionExpression;
+      this._definitionExpression = this.selectedLayer?.definitionExpression || "";
     });
   }
   /** watch for features ids changes */
@@ -133,7 +139,7 @@ class L extends I {
   }
   /** Called once after the component is loaded */
   loaded() {
-    !this.isMobile && !this._observerSet && this._toolbar.value && (this._resizeObserver.observe(this._toolbar.value), this._observerSet = !0), this._updateShareUrl();
+    !this.isMobile && !this._observerSet && this._toolbar.value && (this._resizeObserver?.observe(this._toolbar.value), this._observerSet = !0), this._updateShareUrl();
   }
   //--------------------------------------------------------------------------
   //
@@ -165,20 +171,20 @@ class L extends I {
     this._webMapInfo = e && t ? t[0] : !i?.id && this.mapInfos.length > 0 ? this.mapInfos[0] : i;
     const a = this._webMapInfo.id, l = e && i?.id === this.defaultWebmapId;
     if (this._loadedId !== a && !e || l) {
-      const o = new this.WebMap({
+      const o = this.WebMap && new this.WebMap({
         portalItem: { id: a }
       });
-      this.appProxies && (await o.load(), await b(o, this.esriConfig, this.appProxies)), this.mapView = new this.MapView({
+      this.appProxies && o && this.esriConfig && (await o.load(), await b(o, this.esriConfig, this.appProxies)), this.mapView = this.MapView && new this.MapView({
         container: this._mapDiv.value,
         map: o,
         resizeAlign: "center"
-      }), this._loadedId = a, this._searchConfiguration = this._webMapInfo.searchConfiguration, this.beforeMapChanged.emit(), await this.mapView.when(() => {
-        this._initHome(), this._mapTools.value && this.mapView.ui.add(this._mapTools.value, { position: this.mapWidgetsPosition, index: this.mapWidgetsIndex }), this._defaultWebmapHonored = l ? !0 : this._defaultWebmapHonored, this.mapChanged.emit({
+      }), this._loadedId = a, this._searchConfiguration = this._webMapInfo.searchConfiguration, this.beforeMapChanged.emit(), this.mapView && await this.mapView.when(() => {
+        this._initHome(), this.mapView && (this._mapTools.value && this.mapView.ui.add(this._mapTools.value, { position: this.mapWidgetsPosition, index: this.mapWidgetsIndex }), this._defaultWebmapHonored = l ? !0 : this._defaultWebmapHonored, this.mapChanged.emit({
           id: a,
           mapView: this.mapView
-        });
+        }));
       });
-    } else e ? (this._defaultWebmapHonored = !0, this._mapPicker.value && this._mapPicker.value.setMapByID(a)) : s && (this._searchConfiguration = this._webMapInfo.searchConfiguration, this.beforeMapChanged.emit(), this.mapChanged.emit({
+    } else e ? (this._defaultWebmapHonored = !0, this._mapPicker.value && this._mapPicker.value.setMapByID(a)) : s && this.mapView && (this._searchConfiguration = this._webMapInfo.searchConfiguration, this.beforeMapChanged.emit(), this.mapChanged.emit({
       id: a,
       mapView: this.mapView
     }));
@@ -269,9 +275,9 @@ class L extends I {
    * @returns VNode The node representing the DOM element that will contain the action
    */
   _getShare(i) {
-    return h`<div class="share-action" id=${this._getId(i) ?? c}><instant-apps-social-share class="instant-app-share" .embed=${this.shareIncludeEmbed} flip-rtl popover-button-icon-scale=s scale=m share-button-color=neutral share-button-type=action .socialMedia=${this.shareIncludeSocial} .view=${this.mapView} ${r((e) => {
+    return h`<div class="share-action" id=${this._getId(i) ?? c}>${this.mapView && h`<instant-apps-social-share class="instant-app-share" .embed=${this.shareIncludeEmbed} flip-rtl popover-button-icon-scale=s scale=m share-button-color=neutral share-button-type=action .socialMedia=${this.shareIncludeSocial} .view=${this.mapView} ${r((e) => {
       e && (this._shareNode = e, this._updateShareUrl());
-    })}></instant-apps-social-share>${this._getToolTip("bottom", i, this._translations.share)}</div>`;
+    })}></instant-apps-social-share>` || ""}${this._getToolTip("bottom", i, this._translations?.share || "")}</div>`;
   }
   /** Called each time the values that are used for custom url params change */
   _updateShareUrl() {
@@ -279,7 +285,7 @@ class L extends I {
     if (!i)
       return;
     const e = new URL(i);
-    this._loadedId ? e.searchParams.set("webmap", this._loadedId) : e.searchParams.delete("webmap"), this.selectedLayer?.id ? e.searchParams.set("layer", this.selectedLayer.id) : e.searchParams.delete("layer"), this.selectedFeaturesIds?.length > 0 ? e.searchParams.set("oid", this.selectedFeaturesIds.join(",")) : e.searchParams.delete("oid"), e.searchParams.set("applayout", this.appLayout), this._shareNode.shareUrl = e.href;
+    this._loadedId ? e.searchParams.set("webmap", this._loadedId) : e.searchParams.delete("webmap"), this.selectedLayer?.id ? e.searchParams.set("layer", this.selectedLayer.id) : e.searchParams.delete("layer"), this.selectedFeaturesIds?.length > 0 ? e.searchParams.set("oid", this.selectedFeaturesIds.join(",")) : e.searchParams.delete("oid"), this.appLayout && e.searchParams.set("applayout", this.appLayout), this._shareNode && (this._shareNode.shareUrl = e.href);
   }
   /**
    * Open show/hide dropdown
@@ -341,7 +347,7 @@ class L extends I {
         func: () => this.clearSelection.emit(),
         disabled: !i,
         isOverflow: !1
-      }), this._toolInfos = e, this._defaultVisibleToolSizeInfos = void 0;
+      }), this._toolInfos = e, this._defaultVisibleToolSizeInfos = [];
     }
   }
   /**
@@ -373,12 +379,14 @@ class L extends I {
    */
   _initHome() {
     if (this.enableHome) {
-      this._homeWidget = new this.Home({
+      if (this._homeWidget = this.Home && new this.Home({
         view: this.mapView
-      }), this.mapView.ui.add(this._homeWidget, { position: this.homeZoomPosition, index: this.homeZoomIndex });
-      const i = this.homeZoomToolsSize === "s" ? "32px" : this.homeZoomToolsSize === "m" ? "40px" : "48px";
-      this._homeWidget.domNode.style.height = i, this._homeWidget.domNode.style.width = i;
-    } else this._homeWidget && this.mapView.ui.remove(this._homeWidget);
+      }), this._homeWidget && this.mapView) {
+        this.mapView.ui.add(this._homeWidget, { position: this.homeZoomPosition, index: this.homeZoomIndex });
+        const i = this.homeZoomToolsSize === "s" ? "32px" : this.homeZoomToolsSize === "m" ? "40px" : "48px";
+        this._homeWidget.domNode.style.height = i, this._homeWidget.domNode.style.width = i;
+      }
+    } else this._homeWidget && this.mapView && this.mapView.ui.remove(this._homeWidget);
   }
   /** Toggle show/hide dropdown */
   _toggleShowHide() {
@@ -399,7 +407,7 @@ class L extends I {
    * @returns a promise that will resolve when the operation is complete
    */
   async _zoom() {
-    if (this.selectedLayer) {
+    if (this.selectedLayer && this.mapView) {
       const i = await g(this.mapView, this.selectedLayer.id);
       i && await w(this.selectedFeaturesIds, i, this.mapView, !0, void 0, this.zoomToScale);
     }
@@ -475,7 +483,7 @@ class L extends I {
     return `solutions-action-${i}`;
   }
 }
-u("map-card", L);
+u("map-card", T);
 export {
-  L as MapCard
+  T as MapCard
 };

package/dist/components/map-draw-tools/customElement.d.ts

@@ -21,13 +21,13 @@ export declare class MapDrawTools extends LitElement {
     /** string: Locale to use for translation of stings in the UI */
     locale: string;
     /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-    mapView: __esri.MapView;
+    mapView: __esri.MapView | undefined;
     /** esri/symbols/SimpleMarkerSymbol: https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleMarkerSymbol.html */
-    pointSymbol: __esri.SimpleMarkerSymbol;
+    pointSymbol: __esri.SimpleMarkerSymbol | undefined;
     /** esri/symbols/SimpleLineSymbol: https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleLineSymbol.html */
-    polylineSymbol: __esri.SimpleLineSymbol;
+    polylineSymbol: __esri.SimpleLineSymbol | undefined;
     /** esri/symbols/SimpleFillSymbol: https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleFillSymbol.html */
-    polygonSymbol: __esri.SimpleFillSymbol;
+    polygonSymbol: __esri.SimpleFillSymbol | undefined;
     /** boolean: when eanbled the user can redo the previous operation */
     redoEnabled: boolean;
     /** boolean: when eanbled the user can undo the previous operation */

package/dist/components/map-draw-tools/customElement.js

@@ -5,12 +5,12 @@ import { s as d } from "../../chunks/publicNotificationStore.js";
 import { u as n } from "../../chunks/useT9n.js";
 import { html as p } from "lit";
 import { createRef as g, ref as m } from "lit-html/directives/ref.js";
-import { LitElement as f, createEvent as o, noShadowRoot as y, safeClassMap as h } from "@arcgis/lumina";
-import { css as w } from "@lit/reactive-element/css-tag.js";
+import { LitElement as f, createEvent as h, noShadowRoot as y, safeClassMap as o } from "@arcgis/lumina";
+import { css as k } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.0/esri/copyright.txt for details.
-v1.0.0-next.20250415 */
-const k = w`@layer{/** @license
+v1.0.0-next.20250421 */
+const w = k`@layer{/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -27,20 +27,20 @@ const k = w`@layer{/** @license
  */:host{display:block}.border{outline:1px solid var(--calcite-color-border-input)}.div-visible{display:inherit}.div-not-visible{display:none!important}.padding-top-1-2{padding-top:.5rem}.main-label{display:flex;float:left}html[dir=rtl] .main-label{display:flex;float:right}.margin-top-1{margin-top:1rem}.border-left{border-left:1px solid rgba(110,110,110,.3)}.border-left[dir=rtl]{border-right:1px solid rgba(110,110,110,.3)}.esri-widget{box-sizing:border-box;color:#323232;font-size:14px;font-family:Avenir Next,Helvetica Neue,Helvetica,Arial,sans-serif;line-height:1.3em;background-color:#fff;--esri-widget-padding-v: 12px;--esri-widget-padding-h: 15px;--esri-widget-padding: var(--esri-widget-padding-v) var(--esri-widget-padding-h)}.esri-sketch__panel{align-items:center;display:flex;flex-flow:row wrap;padding:0;justify-content:flex-start!important}.esri-sketch__section{align-items:center;display:flex;flex-flow:row wrap;padding:0 7px;margin:6px 0}.esri-responsive-toolbar__bar--horizontal{--calcite-action-group-border-color: var(--calcite-color-border-3) !important}}`;
 class _ extends f {
   constructor() {
-    super(...arguments), this.active = !1, this.drawMode = s.SKETCH, this.editGraphicsEnabled = !0, this.redoEnabled = !1, this.undoEnabled = !1, this._translations = n({ name: "map-draw-tools" }), this._sketchElement = g(), this.selectionLoadingChange = o(), this.sketchGraphicsChange = o(), this.drawUndo = o(), this.drawRedo = o();
+    super(...arguments), this.active = !1, this.drawMode = s.SKETCH, this.editGraphicsEnabled = !0, this.graphics = [], this.locale = "", this.redoEnabled = !1, this.undoEnabled = !1, this._translations = n({ name: "map-draw-tools" }), this._sketchElement = g(), this.selectionLoadingChange = h(), this.sketchGraphicsChange = h(), this.drawUndo = h(), this.drawRedo = h();
   }
   static {
     this.properties = { active: 5, drawMode: 0, editGraphicsEnabled: 5, graphics: 0, locale: 1, mapView: 0, pointSymbol: 0, polylineSymbol: 0, polygonSymbol: 0, redoEnabled: 5, undoEnabled: 5, _translations: 16, _selectionMode: 16 };
   }
   static {
-    this.styles = k;
+    this.styles = w;
   }
   static {
     this.shadowRootOptions = y;
   }
   /** TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code */
   willUpdate(e) {
-    e.has("graphics") && this.graphicsWatchHandler(this.graphics, e.get("graphics")), e.has("locale") && this.localeWatchHandler(), e.has("mapView") && this.mapViewWatchHandler(this.mapView, e.get("mapView"));
+    e.has("graphics") && this.graphicsWatchHandler(this.graphics, e.get("graphics")), e.has("locale") && this.localeWatchHandler(), e.has("mapView") && this.mapView && this.mapViewWatchHandler(this.mapView, e.get("mapView"));
   }
   //--------------------------------------------------------------------------
   //
@@ -98,12 +98,12 @@ class _ extends f {
   }
   /** Called every time the component is disconnected from the DOM */
   disconnectedCallback() {
-    super.disconnectedCallback(), this._sketchWidget.cancel(), this._clearSketch();
+    super.disconnectedCallback(), this._sketchWidget?.cancel(), this._clearSketch();
   }
   /** Renders the component. */
   render() {
     const e = this.drawMode === s.SKETCH ? "border" : "border esri-widget esri-sketch__panel", t = this.drawMode === s.SKETCH ? "display-none" : "esri-widget esri-sketch__panel border-left esri-sketch__section";
-    return p`<div class=${h(e)}><div ${m(this._sketchElement)}></div><div class=${h(t)}><calcite-action .disabled=${!this.undoEnabled} icon=undo @click=${() => this._undo()} scale=s .text=${this._translations.undo || ""}></calcite-action><calcite-action .disabled=${!this.redoEnabled} icon=redo @click=${() => this._redo()} scale=s .text=${this._translations.redo || ""}></calcite-action></div></div>`;
+    return p`<div class=${o(e)}><div ${m(this._sketchElement)}></div><div class=${o(t)}><calcite-action .disabled=${!this.undoEnabled} icon=undo @click=${() => this._undo()} scale=s .text=${this._translations.undo || ""}></calcite-action><calcite-action .disabled=${!this.redoEnabled} icon=redo @click=${() => this._redo()} scale=s .text=${this._translations.redo || ""}></calcite-action></div></div>`;
   }
   //--------------------------------------------------------------------------
   //
@@ -139,8 +139,11 @@ class _ extends f {
    * @protected
    */
   _initGraphicsLayer() {
-    const e = this._translations.sketchLayer || "", t = this.mapView.map.layers.findIndex((i) => i.title === e);
-    t > -1 ? this._sketchGraphicsLayer = this.mapView.map.layers.getItemAt(t) : (this._sketchGraphicsLayer = new this.GraphicsLayer({ title: e, listMode: "hide" }), d.managedLayers[e] = "sketch", this.mapView.map.layers.add(this._sketchGraphicsLayer)), this.graphics && this.graphics.length > 0 && this._sketchGraphicsLayer.addMany(this.graphics);
+    const e = this._translations.sketchLayer || "";
+    if (this.mapView) {
+      const t = this.mapView.map.layers.findIndex((i) => i.title === e);
+      t > -1 ? this._sketchGraphicsLayer = this.mapView.map.layers.getItemAt(t) : (this._sketchGraphicsLayer = this.GraphicsLayer && new this.GraphicsLayer({ title: e, listMode: "hide" }), this._sketchGraphicsLayer && (d.managedLayers[e] = "sketch", this.mapView.map.layers.add(this._sketchGraphicsLayer))), this.graphics && this.graphics.length > 0 && this._sketchGraphicsLayer && this._sketchGraphicsLayer.addMany(this.graphics);
+    }
   }
   /**
    * Initialize the skecth widget
@@ -162,7 +165,7 @@ class _ extends f {
         toggleToolOnClick: !1
       }
     };
-    this._sketchWidget = new this.Sketch({
+    if (this._sketchWidget = this.Sketch && new this.Sketch({
       ...e,
       container: this._sketchElement.value,
       creationMode: "single",
@@ -179,41 +182,43 @@ class _ extends f {
         undoRedoMenu: !1,
         settingsMenu: this.drawMode === s.SKETCH
       }
-    }), this._sketchViewModel = new this.SketchViewModel({
-      ...e
-    }), this._sketchWidget.viewModel.polylineSymbol = this.polylineSymbol, this._sketchWidget.viewModel.pointSymbol = this.pointSymbol, this._sketchWidget.viewModel.polygonSymbol = this.polygonSymbol;
-    let t = !1;
-    this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("create", (i) => {
-      i.state === "complete" && (this.graphics = [i.graphic], this.sketchGraphicsChange.emit({
-        graphics: this.graphics,
-        useOIDs: !1
-      }), this.drawMode === s.REFINE && (t = !0, this._sketchWidget.viewModel.create(i.tool))), i.state === "cancel" && this.drawMode === s.REFINE && t && (t = !t, this._sketchWidget.viewModel.create(i.tool));
-    })), this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("update", (i) => {
-      if (!this.editGraphicsEnabled)
-        this._sketchWidget.viewModel.cancel(), this._sketchViewModel.cancel();
-      else {
-        const a = i?.toolEventInfo?.type;
-        (a === "reshape-stop" || a === "move-stop") && (this.graphics = i.graphics, this.sketchGraphicsChange.emit({
+    }), this._sketchWidget && this._sketchWidget.viewModel) {
+      this._sketchViewModel = this.SketchViewModel && new this.SketchViewModel({
+        ...e
+      }), this.polylineSymbol && (this._sketchWidget.viewModel.polylineSymbol = this.polylineSymbol), this.pointSymbol && (this._sketchWidget.viewModel.pointSymbol = this.pointSymbol), this.polygonSymbol && (this._sketchWidget.viewModel.polygonSymbol = this.polygonSymbol);
+      let t = !1;
+      this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("create", (i) => {
+        i.state === "complete" && (this.graphics = [i.graphic], this.sketchGraphicsChange.emit({
           graphics: this.graphics,
           useOIDs: !1
-        }));
-      }
-    })), this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("delete", () => {
-      this.graphics = [], this.sketchGraphicsChange.emit({
-        graphics: this.graphics,
-        useOIDs: !1
-      });
-    })), this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("undo", (i) => {
-      this.graphics = i.graphics, this.sketchGraphicsChange.emit({
-        graphics: this.graphics,
-        useOIDs: !1
-      });
-    })), this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("redo", (i) => {
-      this.graphics = i.graphics, this.sketchGraphicsChange.emit({
-        graphics: this.graphics,
-        useOIDs: !1
-      });
-    }));
+        }), this.drawMode === s.REFINE && (t = !0, this._sketchWidget?.viewModel.create(i.tool))), i.state === "cancel" && this.drawMode === s.REFINE && t && (t = !t, this._sketchWidget?.viewModel.create(i.tool));
+      })), this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("update", (i) => {
+        if (!this.editGraphicsEnabled)
+          this._sketchWidget?.viewModel.cancel(), this._sketchViewModel?.cancel();
+        else {
+          const a = i?.toolEventInfo?.type;
+          (a === "reshape-stop" || a === "move-stop") && (this.graphics = i.graphics, this.sketchGraphicsChange.emit({
+            graphics: this.graphics,
+            useOIDs: !1
+          }));
+        }
+      })), this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("delete", () => {
+        this.graphics = [], this.sketchGraphicsChange.emit({
+          graphics: this.graphics,
+          useOIDs: !1
+        });
+      })), this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("undo", (i) => {
+        this.graphics = i.graphics, this.sketchGraphicsChange.emit({
+          graphics: this.graphics,
+          useOIDs: !1
+        });
+      })), this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("redo", (i) => {
+        this.graphics = i.graphics, this.sketchGraphicsChange.emit({
+          graphics: this.graphics,
+          useOIDs: !1
+        });
+      }));
+    }
   }
   /**
    * Clear any stored graphics and remove all graphics from the graphics layer

package/dist/components/map-fullscreen/customElement.d.ts

@@ -5,9 +5,9 @@ import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/
 
 export declare class MapFullscreen extends LitElement {
     /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-    mapView: __esri.MapView;
+    mapView: __esri.MapView | undefined;
     /** esri/widgets/Fullscreen: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Fullscreen.html */
-    fullscreenWidget: __esri.Fullscreen;
+    fullscreenWidget: __esri.Fullscreen | undefined;
     /** Emitted on demand when the fullscreen widget state has changed */
     readonly fullscreenStateChange: TargetedEvent<this, string>;
 }

package/dist/components/map-fullscreen/customElement.js

@@ -6,7 +6,7 @@ import { LitElement as r, createEvent as c } from "@arcgis/lumina";
 import { css as h } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.0/esri/copyright.txt for details.
-v1.0.0-next.20250415 */
+v1.0.0-next.20250421 */
 const o = h`/** @license
  * Copyright 2025 Esri
  *
@@ -29,6 +29,13 @@ class d extends r {
   static {
     this.properties = { mapView: 0, fullscreenWidget: 0 };
   }
+  static {
+    this.styles = o;
+  }
+  /** TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code */
+  willUpdate(e) {
+    e.has("mapView") && this.mapViewWatchHandler();
+  }
   //--------------------------------------------------------------------------
   //
   //  Watch handlers
@@ -40,7 +47,7 @@ class d extends r {
    * @returns Promise when complete
    */
   async mapViewWatchHandler() {
-    await this.mapView.when(async () => {
+    await this.mapView?.when(async () => {
       await this._initFullscreenWidget();
     });
   }
@@ -86,19 +93,12 @@ class d extends r {
    * @protected
    */
   async _initFullscreenWidget() {
-    this.mapView && this._fullscreenElement.value && !this.fullscreenWidget ? (this.fullscreenWidget = new this.Fullscreen({
+    this.mapView && this._fullscreenElement.value && !this.fullscreenWidget ? (this.fullscreenWidget = this.Fullscreen && new this.Fullscreen({
       view: this.mapView
-    }), await this.fullscreenWidget.when(() => {
-      this._fullscreenStateChangeHandle && this._fullscreenStateChangeHandle.remove(), this._fullscreenStateChangeHandle = this.reactiveUtils.watch(() => this.fullscreenWidget.viewModel.state, (e) => this.fullscreenStateChange.emit(e));
+    }), await this.fullscreenWidget?.when(() => {
+      this._fullscreenStateChangeHandle && this._fullscreenStateChangeHandle.remove(), this._fullscreenStateChangeHandle = this.reactiveUtils?.watch(() => this.fullscreenWidget?.viewModel.state, (e) => e && this.fullscreenStateChange.emit(e));
     })) : this.fullscreenWidget && (this.fullscreenWidget.view = this.mapView);
   }
-  static {
-    this.styles = o;
-  }
-  /** TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code */
-  willUpdate(e) {
-    e.has("mapView") && this.mapViewWatchHandler();
-  }
 }
 t("map-fullscreen", d);
 export {

package/dist/components/map-layer-picker/customElement.d.ts

@@ -25,13 +25,13 @@ export declare class MapLayerPicker extends LitElement {
      * number: optional fixed height value for the control.
      * Specified as pixel height.
      */
-    height: number;
+    height: number | undefined;
     /** When true the component will render an optimized view for mobile devices */
     isMobile: boolean;
     /** string: Locale to use for translation of stings in the UI */
     locale: string;
     /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-    mapView: __esri.MapView;
+    mapView: __esri.MapView | undefined;
     /** boolean: When true only editable layers that support the update capability will be available */
     onlyShowUpdatableLayers: boolean;
     /** string: optional placeholder icon used with "combobox" type */

package/dist/components/map-layer-picker/customElement.js

@@ -1,14 +1,14 @@
 import { c as m } from "../../chunks/runtime.js";
-import { d as b, e as u, f as g } from "../../chunks/mapViewUtils.js";
-import { s as h } from "../../chunks/publicNotificationStore.js";
-import { u as _ } from "../../chunks/useT9n.js";
+import { d as b, e as _, f as u } from "../../chunks/mapViewUtils.js";
+import { s as o } from "../../chunks/publicNotificationStore.js";
+import { u as g } from "../../chunks/useT9n.js";
 import { html as a, nothing as n } from "lit";
 import { createRef as d, ref as c } from "lit-html/directives/ref.js";
 import { LitElement as f, createEvent as r, noShadowRoot as L, safeStyleMap as y, safeClassMap as p } from "@arcgis/lumina";
 import { css as w } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.0/esri/copyright.txt for details.
-v1.0.0-next.20250415 */
+v1.0.0-next.20250421 */
 const I = w`@layer{/** @license
  * Copyright 2025 Esri
  *
@@ -26,7 +26,7 @@ const I = w`@layer{/** @license
  */:host{display:block}.map-layer-picker-container{width:100%;align-items:center}.map-layer-picker{position:relative;width:100%;display:inline-block}.padding-bottom-1{padding-bottom:1rem}.layer-picker-dropdown{height:100%;width:100%}.max-width-350{max-width:350px}.height-100{height:100%}.disabled{cursor:default!important;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.no-bottom-margin{--calcite-label-margin-bottom: 0px}.layer-picker-label-container{align-items:center;display:inline-flex;height:100%;padding-inline-start:1rem;padding-inline-end:1rem}.padding-start-1{padding-inline-start:1rem}.cursor-default{cursor:default}}`;
 class v extends f {
   constructor() {
-    super(...arguments), this.appearance = "transparent", this.defaultLayerId = "", this.display = "inline-block", this.enabledLayerIds = [], this.enabledTableIds = [], this.placeholderIcon = "", this.selectedIds = [], this.scale = "m", this.showSingleLayerAsLabel = !1, this.type = "select", this.force = !1, this._hasMultipleLayers = !0, this._hasValidLayers = !0, this.ids = [], this.selectedName = "", this._translations = _({ name: "map-layer-picker" }), this.defaultLayerHonored = !1, this._layerSelectElement = d(), this._layerComboboxElement = d(), this._skipEditCheck = !1, this.beforeLayerSelectionChange = r(), this.idsFound = r(), this.noLayersFound = r(), this.layerSelectionChange = r();
+    super(...arguments), this.appearance = "transparent", this.defaultLayerId = "", this.display = "inline-block", this.enabledLayerIds = [], this.enabledTableIds = [], this.isMobile = !1, this.locale = "", this.onlyShowUpdatableLayers = !1, this.placeholderIcon = "", this.selectedIds = [], this.scale = "m", this.showTables = !1, this.showTablesDisabled = !1, this.showSingleLayerAsLabel = !1, this.type = "select", this.force = !1, this._hasMultipleLayers = !0, this._hasValidLayers = !0, this._isDropdownOpen = !1, this.ids = [], this.selectedName = "", this._translations = g({ name: "map-layer-picker" }), this.defaultLayerHonored = !1, this._layerSelectElement = d(), this._layerComboboxElement = d(), this._skipEditCheck = !1, this.beforeLayerSelectionChange = r(), this.idsFound = r(), this.noLayersFound = r(), this.layerSelectionChange = r();
   }
   static {
     this.properties = { appearance: 1, defaultLayerId: 1, display: 1, enabledLayerIds: 0, enabledTableIds: 0, height: 9, isMobile: 5, locale: 1, mapView: 0, onlyShowUpdatableLayers: 5, placeholderIcon: 1, selectedIds: 0, scale: 1, showTables: 5, showTablesDisabled: 5, showSingleLayerAsLabel: 5, type: 1, force: 16, _hasMultipleLayers: 16, _hasValidLayers: 16, _isDropdownOpen: 16, ids: 16, selectedName: 16, _translations: 16 };
@@ -80,14 +80,14 @@ class v extends f {
   /** Renders the component. */
   render() {
     const e = "map-layer-picker";
-    let t = this.height > 0 ? { height: `${this.height.toString()}px` } : {};
+    let t = this.height && this.height > 0 ? { height: `${this.height.toString()}px` } : {};
     return t = { ...t, display: this.display }, a`<div class="map-layer-picker-container" style=${y(t)}><div class="map-layer-picker" style=${y(t)}>${this._hasValidLayers ? !this._hasMultipleLayers && this.showSingleLayerAsLabel ? this._getSingleLayerPlaceholder() : this.type === "combobox" ? this._getCombobox(e) : this.type === "select" ? this._getSelect(e) : this._getDropdown(e) : this._getInvalidPlaceholder()}</div></div>`;
   }
   /** Called once just after the component is fully loaded and the first render() occurs. */
   loaded() {
     if (this.ids?.length > 0 || this.selectedIds?.length === 1) {
       const e = this.selectedIds.length === 1 ? this.selectedIds[0] : this.ids[0];
-      this.type === "select" ? this._layerElement.value && (this._layerElement.value.value = e) : this.type === "dropdown" && (this.selectedName = Object.keys(this._layerNameHash).indexOf(e) > -1 ? this._layerNameHash[e].name : Object.keys(this._tableNameHash).indexOf(e) > -1 ? this._tableNameHash[e].name : "");
+      this.type === "select" ? this._layerElement.value && (this._layerElement.value.value = e) : this.type === "dropdown" && (this.selectedName = this._layerNameHash && Object.keys(this._layerNameHash).indexOf(e) > -1 ? this._layerNameHash[e].name : this._tableNameHash && Object.keys(this._tableNameHash).indexOf(e) > -1 ? this._tableNameHash[e].name : "");
     }
   }
   //--------------------------------------------------------------------------
@@ -185,8 +185,8 @@ class v extends f {
    * @returns A dom node with the name of the layer or table
    */
   _getItem(e, t) {
-    const s = t === "layer" ? this._layerNameHash[e] : this._tableNameHash[e], i = this.onlyShowUpdatableLayers ? !s.supportsUpdate : !1, o = s.name, l = this.selectedIds.indexOf(e) > -1;
-    return this.type === "combobox" ? a`<calcite-combobox-item .disabled=${i} .selected=${l} .textLabel=${o} .value=${e}></calcite-combobox-item>` : this.type === "select" ? a`<calcite-option .disabled=${i} .label=${o} .selected=${l} .value=${e}></calcite-option>` : this.force && l || !this.force ? a`<calcite-dropdown-group class=${p(i ? "disabled" : "")} .selectionMode=${i ? "none" : "single"}><calcite-dropdown-item .disabled=${t === "table" && this.showTablesDisabled} .iconStart=${t} @click=${i ? void 0 : () => void this._setSelectedLayer(e)} .selected=${l}>${o}</calcite-dropdown-item></calcite-dropdown-group>` : null;
+    const s = t === "layer" && this._layerNameHash ? this._layerNameHash[e] : this._tableNameHash ? this._tableNameHash[e] : void 0, i = this.onlyShowUpdatableLayers ? s && !s.supportsUpdate : !1, h = s?.name, l = this.selectedIds.indexOf(e) > -1;
+    return this.type === "combobox" ? a`<calcite-combobox-item .disabled=${i} .selected=${l} .textLabel=${h} .value=${e}></calcite-combobox-item>` : this.type === "select" ? a`<calcite-option .disabled=${i} .label=${h} .selected=${l} .value=${e}></calcite-option>` : this.force && l || !this.force ? a`<calcite-dropdown-group class=${p(i ? "disabled" : "")} .selectionMode=${i ? "none" : "single"}><calcite-dropdown-item .disabled=${!!(t === "table" && this.showTablesDisabled)} .iconStart=${t} @click=${i ? void 0 : () => void this._setSelectedLayer(e)} .selected=${l}>${h}</calcite-dropdown-item></calcite-dropdown-group>` : null;
   }
   /** Store the layer name based on the user selection */
   async _setSelectedLayer(e) {
@@ -200,8 +200,8 @@ class v extends f {
         return;
       this.selectedName = t?.name, this.selectedIds = [e], this.layerSelectionChange.emit(this.selectedIds);
     } else {
-      const t = await b(this.mapView, this.selectedIds[0]);
-      this.selectedName = t?.title;
+      const t = this.mapView && await b(this.mapView, this.selectedIds[0]);
+      this.selectedName = t?.title || "";
     }
   }
   /**
@@ -210,7 +210,7 @@ class v extends f {
    * @returns ILayerHashInfo for the id
    */
   _getLayerFromHash(e) {
-    return Object.keys(this._layerNameHash).indexOf(e) > -1 ? this._layerNameHash[e] : Object.keys(this._tableNameHash).indexOf(e) > -1 ? this._tableNameHash[e] : void 0;
+    return this._layerNameHash && Object.keys(this._layerNameHash).indexOf(e) > -1 ? this._layerNameHash[e] : this._tableNameHash && Object.keys(this._tableNameHash).indexOf(e) > -1 ? this._tableNameHash[e] : void 0;
   }
   /**
    * Fetch the ids of the layers from the map
@@ -220,8 +220,10 @@ class v extends f {
   async _setLayers() {
     if (this.mapView) {
       await this._initLayerTableHash();
-      const e = this.onlyShowUpdatableLayers ? this._getEditableIds(this._layerNameHash) : Object.keys(this._layerNameHash), t = this.showTables ? this.onlyShowUpdatableLayers ? this._getEditableIds(this._tableNameHash) : Object.keys(this._tableNameHash) : [];
-      this.ids = [
+      let e = [];
+      this._layerNameHash && (e = this.onlyShowUpdatableLayers ? this._getEditableIds(this._layerNameHash) : Object.keys(this._layerNameHash));
+      let t = [];
+      this._tableNameHash && (t = this.showTables ? this.onlyShowUpdatableLayers ? this._getEditableIds(this._tableNameHash) : Object.keys(this._tableNameHash) : []), this.ids = [
         ...e.reverse().filter((s) => this.enabledLayerIds?.length > 0 ? this.enabledLayerIds.reverse().indexOf(s) > -1 : !0),
         ...t.reverse().filter((s) => this.enabledTableIds?.length > 0 ? this.enabledTableIds.reverse().indexOf(s) > -1 : !0)
       ], this.idsFound.emit({
@@ -244,7 +246,7 @@ class v extends f {
    * @returns Promise when the operation has completed
    */
   async _initLayerTableHash() {
-    this._layerNameHash = await u(this.mapView, this.onlyShowUpdatableLayers), this._tableNameHash = this.showTables ? await g(this.mapView, this.onlyShowUpdatableLayers) : {};
+    this._layerNameHash = this.mapView && await _(this.mapView, this.onlyShowUpdatableLayers), this._tableNameHash = this.showTables && this.mapView ? await u(this.mapView, this.onlyShowUpdatableLayers) : {};
   }
   /**
    * Evaluate if the id exists in the current hash and verify if it should be excluded
@@ -252,8 +254,8 @@ class v extends f {
    * @returns boolean when true the layer will be used in the current layer picker type
    */
   _validLayer(e) {
-    const t = this._layerNameHash[e]?.name;
-    return t !== void 0 && Object.keys(h.managedLayers).indexOf(t) < 0 && (this.enabledLayerIds.length > 0 ? this.enabledLayerIds.indexOf(e) > -1 : !0);
+    const t = this._layerNameHash && this._layerNameHash[e]?.name;
+    return t !== void 0 && Object.keys(o.managedLayers).indexOf(t) < 0 && (this.enabledLayerIds.length > 0 ? this.enabledLayerIds.indexOf(e) > -1 : !0);
   }
   /**
    * Evaluate if the id exists in the current hash and verify if it should be excluded
@@ -261,8 +263,8 @@ class v extends f {
    * @returns boolean when true the table will be used in the current layer picker type
    */
   _validTable(e) {
-    const t = this._tableNameHash[e]?.name, s = t && this.showTables;
-    return s ? h.managedTables.indexOf(t) < 0 && (this.enabledTableIds.length > 0 ? this.enabledTableIds.indexOf(e) > -1 : !0) : s !== void 0;
+    const t = this._tableNameHash && this._tableNameHash[e]?.name, s = t && this.showTables;
+    return s ? o.managedTables.indexOf(t) < 0 && (this.enabledTableIds.length > 0 ? this.enabledTableIds.indexOf(e) > -1 : !0) : s !== void 0;
   }
   /**
    * Fetch the ids of the layers from the map

package/dist/components/map-legend/customElement.d.ts

@@ -5,11 +5,11 @@ import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/
 
 export declare class MapLegend extends LitElement {
     /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-    mapView: __esri.MapView;
+    mapView: __esri.MapView | undefined;
     /**
      * esri/widgets/Legend: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Legend.html
      *
      * Legend instance
      */
-    legendWidget: __esri.Legend;
+    legendWidget: __esri.Legend | undefined;
 }

package/dist/components/map-legend/customElement.js

@@ -6,7 +6,7 @@ import { LitElement as r } from "@arcgis/lumina";
 import { css as d } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.0/esri/copyright.txt for details.
-v1.0.0-next.20250415 */
+v1.0.0-next.20250421 */
 const o = d`/**
  * @license
  * Copyright 2025 Esri
@@ -30,6 +30,13 @@ class l extends r {
   static {
     this.properties = { mapView: 0, legendWidget: 0 };
   }
+  static {
+    this.styles = o;
+  }
+  /** TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code */
+  willUpdate(e) {
+    e.has("mapView") && this.mapViewWatchHandler();
+  }
   //--------------------------------------------------------------------------
   //
   //  Watch handlers
@@ -37,8 +44,8 @@ class l extends r {
   //--------------------------------------------------------------------------
   // TODO add doc
   async mapViewWatchHandler() {
-    await this.mapView.when(() => {
-      this._initLegend(this.mapView);
+    await this.mapView?.when(() => {
+      this.mapView && this._initLegend(this.mapView);
     });
   }
   // TODO check all load...for async
@@ -78,13 +85,6 @@ class l extends r {
       view: e
     }));
   }
-  static {
-    this.styles = o;
-  }
-  /** TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code */
-  willUpdate(e) {
-    e.has("mapView") && this.mapViewWatchHandler();
-  }
 }
 i("map-legend", l);
 export {

package/dist/components/map-picker/customElement.d.ts

@@ -9,7 +9,7 @@ export declare class MapPicker extends LitElement {
     /** IMapInfo[]: array of map infos (name and id) */
     mapInfos: IMapInfo[];
     /** boolean: when true map list will shown in half width. */
-    isMapLayout?: boolean;
+    isMapLayout?: boolean | undefined;
     setMapByID(id: string, skipEditCheck?: boolean): Promise<void>;
     /** Closes the list */
     close(): Promise<void>;