@esri/solutions-components 5.1.0-next.11 → 5.1.0-next.110

package/dist/components/layer-table/customElement.d.ts

@@ -1,5 +1,6 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type FeatureLayer from "@arcgis/core/layers/FeatureLayer.js";
+import type MapView from "@arcgis/core/views/MapView.js";
 import type { AppLayout, IDeleteIds, IMapInfo } from "../../utils/interfaces.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
@@ -143,7 +144,7 @@ export abstract class LayerTable extends LitElement {
   /** IMapInfo: key configuration details about the current map */
   accessor mapInfo: IMapInfo | undefined;
   /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-  accessor mapView: __esri.MapView | undefined;
+  accessor mapView: MapView | undefined;
   /** number[]: A list of ids that are currently selected */
   accessor selectedIds: (number | string)[];
   /** number[]: A list of ids selected ids from related records */
@@ -214,7 +215,7 @@ export abstract class LayerTable extends LitElement {
   /** Emitted on demand when a layer is selected */
   readonly featureSelectionChange: import("@arcgis/lumina").TargetedEvent<this, (number | string)[]>;
   /** Emitted when related record toggled from related table */
-  readonly relatedRecordToggled: import("@arcgis/lumina").TargetedEvent<this, __esri.FeatureLayer>;
+  readonly relatedRecordToggled: import("@arcgis/lumina").TargetedEvent<this, FeatureLayer>;
   /** Emitted on demand when when the delete dialog should be shown */
   readonly showDelete: import("@arcgis/lumina").TargetedEvent<this, IDeleteIds>;
   /** Emitted on demand when filter action is clicked */

package/dist/components/layer-table/customElement.js

@@ -3,20 +3,21 @@ import { c as I } from "../../chunks/runtime.js";
 import { e as w, g as T, c as v } from "../../chunks/mapViewUtils.js";
 import { b as E } from "../../chunks/queryUtils.js";
 import { d as x } from "../../chunks/downloadUtils.js";
-import { z as S, b } from "../../chunks/interfaces.js";
-import { defineCustomElements as F } from "@arcgis/instant-apps-components/loader";
-import { u as O } from "../../chunks/useT9n.js";
-import { css as C, html as o, nothing as c } from "lit";
+import { b } from "../../chunks/interfaces.js";
+import { defineCustomElements as S } from "@arcgis/instant-apps-components/loader";
+import { u as F } from "../../chunks/useT9n.js";
+import { css as O, html as o, nothing as c } from "lit";
 import { createRef as g, ref as p } from "lit-html/directives/ref.js";
-import { LitElement as A, createEvent as _, noShadowRoot as H, safeClassMap as y } from "@arcgis/lumina";
-import L from "@arcgis/core/widgets/FeatureTable";
-import * as u from "@arcgis/core/core/reactiveUtils";
-import $ from "@arcgis/core/rest/support/RelationshipQuery";
-import m from "@arcgis/core/widgets/FeatureTable/support/TableTemplate";
-const D = C`@layer{:host{display:block}.height-full{height:100%}.height-full-adjusted{height:calc(100% - 20px)}.width-full{width:100%}.display-flex{display:flex}.display-none{display:none}.table-border{border:1px solid var(--calcite-color-border-2)}.border-end{border-inline-end:1px solid var(--calcite-color-border-2)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51-px{height:51px}.height-50-px{height:50px}.bottom-left{position:absolute;left:0;bottom:0;padding-left:5px}html[dir=rtl] .bottom-left{position:absolute;right:0;bottom:0;padding-right:5px}.height-19{height:19px}.background{background-color:var(--calcite-color-background)}.text-color{color:var(--calcite-color-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-color-status-danger)}.esri-feature-table vaadin-grid{border:none!important}vaadin-grid-cell-content{font-size:14px!important;color:var(--calcite-color-text-3)!important}.absolute-right{position:absolute;right:0;left:unset}html[dir=rtl] .absolute-right{left:0;right:unset}.disabled{cursor:default!important;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.actions-end{height:50px!important;display:inline-flex}.border-top{border-top:1px solid var(--calcite-color-border-2)}.modal{--calcite-dialog-content-space: 0}.esri-feature-table__table-container{height:100%}.search-container{background-color:var(--calcite-color-foreground-1)!important}.search{--calcite-color-border-input: var(--calcite-color-border-3);width:60%;padding:10px}.delete-red{--calcite-icon-color: var(--calcite-color-status-danger);--calcite-color-text-1: var(--calcite-color-status-danger);--calcite-color-text-3: var(--calcite-color-status-danger)}.label-override{white-space:nowrap}.padding-start-1-4{padding-inline-start:.5rem}.panel-header-override{--calcite-panel-header-content-space: 0px}.danger-label-color{color:var(--calcite-color-status-danger)}.danger-icon-color{--calcite-icon-color: var(--calcite-color-status-danger)}.width-51{width:51px}.height-51{height:51px}calcite-action-bar{--calcite-internal-action-bar-gap: 0px;--calcite-internal-action-bar-padding: 0px}}`;
-class M extends A {
+import { LitElement as C, createEvent as _, noShadowRoot as A, safeClassMap as y } from "@arcgis/lumina";
+import { h as H } from "../../chunks/helpers.js";
+import L from "@arcgis/core/widgets/FeatureTable.js";
+import * as u from "@arcgis/core/core/reactiveUtils.js";
+import $ from "@arcgis/core/rest/support/RelationshipQuery.js";
+import m from "@arcgis/core/widgets/FeatureTable/support/TableTemplate.js";
+const D = O`@layer{:host{display:block}.height-full{height:100%}.height-full-adjusted{height:calc(100% - 20px)}.width-full{width:100%}.display-flex{display:flex}.display-none{display:none}.table-border{border:1px solid var(--calcite-color-border-2)}.border-end{border-inline-end:1px solid var(--calcite-color-border-2)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51-px{height:51px}.height-50-px{height:50px}.bottom-left{position:absolute;left:0;bottom:0;padding-left:5px}html[dir=rtl] .bottom-left{position:absolute;right:0;bottom:0;padding-right:5px}.height-19{height:19px}.background{background-color:var(--calcite-color-surface-1)}.text-color{color:var(--calcite-color-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-color-status-danger)}.esri-feature-table vaadin-grid{border:none!important}vaadin-grid-cell-content{font-size:14px!important;color:var(--calcite-color-text-3)!important}.absolute-right{position:absolute;right:0;left:unset}html[dir=rtl] .absolute-right{left:0;right:unset}.disabled{cursor:default!important;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.actions-end{height:50px!important;display:inline-flex}.border-top{border-top:1px solid var(--calcite-color-border-2)}.modal{--calcite-dialog-content-space: 0}.esri-feature-table__table-container{height:100%}.search-container{background-color:var(--calcite-color-surface-2)!important}.search{--calcite-color-border-input: var(--calcite-color-border-3);width:60%;padding:10px}.delete-red{--calcite-icon-color: var(--calcite-color-status-danger);--calcite-color-text-1: var(--calcite-color-status-danger);--calcite-color-text-3: var(--calcite-color-status-danger)}.label-override{white-space:nowrap}.padding-start-1-4{padding-inline-start:.5rem}.panel-header-override{--calcite-panel-header-content-space: 0px}.danger-label-color{color:var(--calcite-color-status-danger)}.danger-icon-color{--calcite-icon-color: var(--calcite-color-status-danger)}.width-51{width:51px}.height-51{height:51px}calcite-action-bar{--calcite-internal-action-bar-gap: 0px;--calcite-internal-action-bar-padding: 0px}}`;
+class M extends C {
   constructor() {
-    super(), this.defaultGlobalId = [], this.defaultLayerId = "", this.defaultOid = [], this.enableAutoRefresh = !1, this.enableColumnReorder = !0, this.enableCSV = !1, this.enableInlineEdit = !1, this.enableShare = !1, this.enableTableAutosave = !0, this.featureSelectionMode = "multiple", this.selectedRelatedIds = [], this.honorMapFieldSettings = !1, this.isMobile = !1, this.mapHidden = !1, this.showOnlyUpdatableLayers = !1, this.selectedIds = [], this.shareIncludeEmbed = !1, this.shareIncludeSocial = !1, this.showNewestFirst = !1, this.zoomAndScrollToSelected = !1, this._allIds = [], this._configLayerOrderDefined = !1, this._csvExporting = !1, this._fetchingData = !1, this._hideTable = !1, this._filterActive = !1, this._selectAllActive = !1, this._showHideOpen = !1, this._showOnlySelected = !1, this._toolInfos = [], this._translations = O({ name: "layer-table", blocking: !0 }), this._fullTextSearchInfo = [], this._searchPlaceHolder = "", this._size = 0, this._queryingData = !1, this._editEnabled = !1, this._enabledLayerIds = [], this._defaultGlobalIdHonored = !1, this._defaultOidHonored = !1, this._deleteEnabled = !1, this._floorExpression = "", this._floorField = "", this._floorLevel = "", this._loaded = !1, this._shareNode = g(), this._toolbar = g(), this._searchExpression = "", this._skipEditCheck = !1, this._tempSelectedIds = [], this._outOFExtentOids = [], this._shouldUpdateTableOnExtentChange = !0, this._creatingFeature = !1, this._searchNode = g(), this.columnReorder = _(), this.featureSelectionChange = _(), this.toggleFilter = _(), this.showDelete = _(), this.relatedRecordToggled = _(), this.editMultipleFeatures = _(), this.listenOn(window, "beforeMapInfoChange", this.beforeMapInfoChange, { capture: !0 }), this.listenOn(window, "editorInitialized", this.editorInitialized), this.listenOn(window, "closeEdit", this.closeEdit), this.listenOn(window, "selectionChanged", this.selectionChanged), this.listenOn(window, "beforeLayerSelectionChange", this.beforeLayerSelectionChange), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.listenOn(window, "editsComplete", this.editsComplete), this.listenOn(window, "facilityChanged", this.facilityChanged), this.listenOn(window, "levelChanged", this.levelChanged), this.listenOn(window, "siteChanged", this.siteChanged), this.listenOn(window, "noLayersFound", this.noLayersFound), this.listenOn(window, "clearSelection", this.clearSelection), this.listenOn(window, "mapChanged", this.mapChanged), this.listenOn(window, "featuresSelected", this.featuresSelected), this.listenOn(window, "createWorkFlowStarted", this.createWorkFlowStarted), this.listenOn(window, "backFromCreateWorkFlow", this.backFromCreateWorkFlow), F(window);
+    super(), this.defaultGlobalId = [], this.defaultLayerId = "", this.defaultOid = [], this.enableAutoRefresh = !1, this.enableColumnReorder = !0, this.enableCSV = !1, this.enableInlineEdit = !1, this.enableShare = !1, this.enableTableAutosave = !0, this.featureSelectionMode = "multiple", this.selectedRelatedIds = [], this.honorMapFieldSettings = !1, this.isMobile = !1, this.mapHidden = !1, this.showOnlyUpdatableLayers = !1, this.selectedIds = [], this.shareIncludeEmbed = !1, this.shareIncludeSocial = !1, this.showNewestFirst = !1, this.zoomAndScrollToSelected = !1, this._allIds = [], this._configLayerOrderDefined = !1, this._csvExporting = !1, this._fetchingData = !1, this._hideTable = !1, this._filterActive = !1, this._selectAllActive = !1, this._showHideOpen = !1, this._showOnlySelected = !1, this._toolInfos = [], this._translations = F({ name: "layer-table", blocking: !0 }), this._fullTextSearchInfo = [], this._searchPlaceHolder = "", this._size = 0, this._queryingData = !1, this._editEnabled = !1, this._enabledLayerIds = [], this._defaultGlobalIdHonored = !1, this._defaultOidHonored = !1, this._deleteEnabled = !1, this._floorExpression = "", this._floorField = "", this._floorLevel = "", this._loaded = !1, this._shareNode = g(), this._toolbar = g(), this._searchExpression = "", this._skipEditCheck = !1, this._tempSelectedIds = [], this._outOFExtentOids = [], this._shouldUpdateTableOnExtentChange = !0, this._creatingFeature = !1, this._searchNode = g(), this.columnReorder = _(), this.featureSelectionChange = _(), this.toggleFilter = _(), this.showDelete = _(), this.relatedRecordToggled = _(), this.editMultipleFeatures = _(), this.listenOn(window, "beforeMapInfoChange", this.beforeMapInfoChange, { capture: !0 }), this.listenOn(window, "editorInitialized", this.editorInitialized), this.listenOn(window, "closeEdit", this.closeEdit), this.listenOn(window, "selectionChanged", this.selectionChanged), this.listenOn(window, "beforeLayerSelectionChange", this.beforeLayerSelectionChange), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.listenOn(window, "editsComplete", this.editsComplete), this.listenOn(window, "facilityChanged", this.facilityChanged), this.listenOn(window, "levelChanged", this.levelChanged), this.listenOn(window, "siteChanged", this.siteChanged), this.listenOn(window, "noLayersFound", this.noLayersFound), this.listenOn(window, "clearSelection", this.clearSelection), this.listenOn(window, "mapChanged", this.mapChanged), this.listenOn(window, "featuresSelected", this.featuresSelected), this.listenOn(window, "createWorkFlowStarted", this.createWorkFlowStarted), this.listenOn(window, "backFromCreateWorkFlow", this.backFromCreateWorkFlow), S(window);
   }
   static {
     this.properties = { appLayout: 1, defaultGlobalId: 0, defaultLayerId: 1, defaultOid: 0, enableAutoRefresh: 5, enableColumnReorder: 5, enableCSV: 5, enableInlineEdit: 5, enableShare: 5, enableTableAutosave: 5, featureSelectionMode: 1, selectedRelatedIds: 0, honorMapFieldSettings: 5, isMobile: 5, mapHidden: 5, mapInfo: 0, mapView: 0, showOnlyUpdatableLayers: 5, selectedIds: 0, shareIncludeEmbed: 5, shareIncludeSocial: 5, showNewestFirst: 5, zoomAndScrollToSelected: 5, zoomToScale: 9, _allIds: 16, _configLayerOrderDefined: 16, _csvExporting: 16, _fetchingData: 16, _hideTable: 16, _filterActive: 16, _layer: 16, _selectAllActive: 16, _showHideOpen: 16, _showOnlySelected: 16, _toolInfos: 16, _translations: 16, _fullTextSearchInfo: 16, _searchPlaceHolder: 16, _size: 16, _queryingData: 16 };
@@ -25,7 +26,7 @@ class M extends A {
     this.styles = D;
   }
   static {
-    this.shadowRootOptions = H;
+    this.shadowRootOptions = A;
   }
   willUpdate(e) {
     if (e.has("appLayout") && this.appLayoutWatchHandler(), e.has("defaultOid") && this.defaultOidWatchHandler(), e.has("defaultGlobalId") && this.defaultGlobalIdWatchHandler(), e.has("enableCSV") && this.enableCSVWatchHandler(), e.has("enableInlineEdit") && this.enableInlineEditWatchHandler(), e.has("mapHidden") && this.mapHiddenWatchHandler(), e.has("isMobile") && this.isMobileWatchHandler(), e.has("mapInfo") && this.mapInfoWatchHandler(), e.has("mapView") && this.mapViewWatchHandler(), e.has("_layer") && this._layerWatchHandler(), e.has("selectedIds") && (this.hasUpdated || JSON.stringify(e.get("selectedIds")) !== JSON.stringify(this.selectedIds)) && this.selectedIdsWatchHandler(), e.has("selectedRelatedIds") && (this.hasUpdated || JSON.stringify(e.get("selectedRelatedIds")) !== JSON.stringify(this.selectedRelatedIds)) && this.selectedRelatedIdsWatchHandler(), e.has("enableTableAutosave") && this.hasUpdated && this._table && (this._table.autoSaveEnabled = this.enableTableAutosave), e.has("_translations")) {
@@ -55,7 +56,7 @@ class M extends A {
     !this._toolInfos && !this.isMobile && await this._initToolInfos();
   }
   async mapInfoWatchHandler() {
-    this._configLayerOrderDefined = "configLayerOrder" in (this.mapInfo?.layerOptions || {}), this._enabledLayerIds = S(this.mapInfo?.layerOptions?.layers || [], this.mapInfo?.layerOptions?.configLayerOrder), this._table && (this._resetColumnTemplates(), this._sortTable());
+    this._configLayerOrderDefined = "configLayerOrder" in (this.mapInfo?.layerOptions || {}), this._enabledLayerIds = H(this.mapInfo?.layerOptions?.layers || [], this.mapInfo?.layerOptions?.configLayerOrder), this._table && (this._resetColumnTemplates(), this._sortTable(), await this._initToolInfos());
   }
   async mapViewWatchHandler() {
     this._mapClickHandle && this._mapClickHandle.remove(), this.mapView && (this._floorExpression = "", this._searchExpression = "undefined", this.mapView.highlights = [
@@ -427,7 +428,7 @@ class M extends A {
   }
   _getDangerAction(e, t, i, s) {
     const a = this._layer === void 0 ? !0 : s;
-    return o`<div class="display-flex" id=${this._getId(e) ?? c}>${o`<calcite-action appearance=solid .disabled=${a} .id=${`layer-table-${e}`} @click=${i} text><calcite-icon class="danger-icon-color" .icon=${e} scale=s></calcite-icon><span class="label-override padding-start-1-4 danger-label-color">${t}</span></calcite-action>`}${this._getToolTip("bottom", `layer-table-${e}`, t)}</div>`;
+    return o`<div class="display-flex" id=${this._getId(e) ?? c}>${o`<calcite-action appearance=solid .disabled=${a} .id=${`layer-table-${e}`} @click=${i} .text=${t}><calcite-icon aria-hidden=true class="danger-icon-color" .icon=${e} scale=s></calcite-icon><span class="label-override padding-start-1-4 danger-label-color">${t}</span></calcite-action>`}${this._getToolTip("bottom", `layer-table-${e}`, t)}</div>`;
   }
   _getIds() {
     let e = this._relatedFeatureTable ?? this._table;

package/dist/components/map-basemap-gallery/customElement.d.ts

@@ -1,5 +1,6 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type BasemapGallery from "@arcgis/core/widgets/BasemapGallery.js";
+import type MapView from "@arcgis/core/views/MapView.js";
 import type { IBasemapConfig } from "../../utils/interfaces.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
@@ -11,7 +12,7 @@ export abstract class MapBasemapGallery extends LitElement {
    *
    * BasemapGallery instance
    */
-  accessor basemapWidget: __esri.BasemapGallery | undefined;
+  accessor basemapWidget: BasemapGallery | undefined;
   /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-  accessor mapView: __esri.MapView | undefined;
+  accessor mapView: MapView | undefined;
 }

package/dist/components/map-basemap-gallery/customElement.js

@@ -3,8 +3,8 @@ import { c as i } from "../../chunks/runtime.js";
 import { css as t, html as p } from "lit";
 import { createRef as m, ref as r } from "lit-html/directives/ref.js";
 import { LitElement as o } from "@arcgis/lumina";
-import l from "@arcgis/core/widgets/BasemapGallery";
-import n from "@arcgis/core/widgets/BasemapGallery/support/PortalBasemapsSource";
+import l from "@arcgis/core/widgets/BasemapGallery.js";
+import n from "@arcgis/core/widgets/BasemapGallery/support/PortalBasemapsSource.js";
 const d = t`.display-block{display:block}`;
 class h extends o {
   constructor() {

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

@@ -1,7 +1,9 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type MapView from "@arcgis/core/views/MapView.js";
+import type FeatureLayer from "@arcgis/core/layers/FeatureLayer.js";
 import type { AppLayout, IBasemapConfig, IMapChange, IMapInfo, theme, VisibilityIconType } from "../../utils/interfaces.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { UIPosition } from "@arcgis/core/views/ui/types.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
 export abstract class MapCard extends LitElement {
@@ -154,7 +156,7 @@ export abstract class MapCard extends LitElement {
   /** Valid tools: 'legend', 'search', 'fullscreen', 'basemap', 'floorfilter', 'selectiontool' */
   accessor mapToolsOrder: string[];
   /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-  accessor mapView: __esri.MapView | undefined;
+  accessor mapView: MapView | undefined;
   /**
    * number: The placement index of the map widgets (legend, basemap, fullscreen etc). This index shows where to place the component relative to other components.
    * For example a value of 0 would place it topmost when position is top-*, leftmost for bottom-left and right most for bottom-right.
@@ -168,7 +170,7 @@ export abstract class MapCard extends LitElement {
    *
    * @default 'top-leading'
    */
-  accessor mapWidgetsPosition: __esri.UIPosition;
+  accessor mapWidgetsPosition: UIPosition;
   /**
    * 's' | 'm' | 'l': Used for optional map tool widget
    *
@@ -181,13 +183,13 @@ export abstract class MapCard extends LitElement {
    *
    * @default 'top-right'
    */
-  accessor mobileMapWidgetsPosition: __esri.UIPosition;
+  accessor mobileMapWidgetsPosition: UIPosition;
   /** Valid tools: 'map-picker', 'map-layer-picker' */
   accessor mobileToolsOrder: string[];
   /** number[]: A list of ids that are currently selected */
   accessor selectedFeaturesIds: (number | string)[];
   /** __esri.FeatureLayer: Selected layer */
-  accessor selectedLayer: __esri.FeatureLayer | undefined;
+  accessor selectedLayer: FeatureLayer | undefined;
   /**
    * boolean: When true the share options will include embed option
    *

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

@@ -1,20 +1,21 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as b } from "../../chunks/runtime.js";
-import { z as y, b as c } from "../../chunks/interfaces.js";
-import { joinAppProxies as _ } from "templates-common-library/functionality/proxy";
-import { c as g, e as v } from "../../chunks/mapViewUtils.js";
-import { u as I } from "../../chunks/useT9n.js";
-import { css as $, html as o, nothing as m } from "lit";
+import { b as c } from "../../chunks/interfaces.js";
+import { joinAppProxies as y } from "templates-common-library/functionality/proxy";
+import { c as _, e as g } from "../../chunks/mapViewUtils.js";
+import { u as v } from "../../chunks/useT9n.js";
+import { css as I, html as o, nothing as m } from "lit";
 import { createRef as d, ref as r } from "lit-html/directives/ref.js";
-import { LitElement as L, createEvent as p, noShadowRoot as w, safeClassMap as f } from "@arcgis/lumina";
-import { defineCustomElements as M } from "@arcgis/instant-apps-components/loader";
-import S from "@arcgis/core/config";
-import T from "@arcgis/core/views/MapView";
-import W from "@arcgis/core/WebMap";
-const k = $`@layer{: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}.hidden{visibility:hidden!important}.display-flex{display:flex}.display-none{display:none}.display-block{display:block}.absolute-right{position:absolute;right:0;left:unset}.esri-ui-inner-container.esri-ui-corner-container{direction:ltr}html[dir=rtl] .absolute-right{left:0;right:unset}.panel-header-override{--calcite-panel-header-content-space: 0px;--calcite-internal-panel-action-spacing: 0px !important}@media only screen and (max-width:1024px){.esri-zoom{display:none!important}}calcite-action-bar{--calcite-internal-action-bar-gap: 0px;--calcite-internal-action-bar-padding: 0px}}`;
-class C extends L {
+import { LitElement as $, createEvent as p, noShadowRoot as L, safeClassMap as f } from "@arcgis/lumina";
+import { defineCustomElements as w } from "@arcgis/instant-apps-components/loader";
+import { h as M } from "../../chunks/helpers.js";
+import S from "@arcgis/core/config.js";
+import T from "@arcgis/core/views/MapView.js";
+import W from "@arcgis/core/WebMap.js";
+const k = I`@layer{: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}.hidden{visibility:hidden!important}.display-flex{display:flex}.display-none{display:none}.display-block{display:block}.absolute-right{position:absolute;right:0;left:unset}.esri-ui-inner-container.esri-ui-corner-container{direction:ltr}html[dir=rtl] .absolute-right{left:0;right:unset}.panel-header-override{--calcite-panel-header-content-space: 0px;--calcite-internal-panel-action-spacing: 0px !important}@media only screen and (max-width:1024px){.esri-zoom{display:none!important}}calcite-action-bar{--calcite-internal-action-bar-gap: 0px;--calcite-internal-action-bar-padding: 0px}}`;
+class C extends $ {
   constructor() {
-    super(), this.defaultWebmapId = "", this.defaultLayerId = "", this.enableHome = !1, this.enableLegend = !1, this.enableLayerList = !0, this.enableFloorFilter = !1, this.enableFullscreen = !1, this.enableShare = !1, this.enableMapLayerPicker = !1, this.enableMapPicker = !1, this.enableSingleExpand = !1, this.enableSearch = !1, this.enableBasemap = !1, this.featureSelectionMode = "multiple", this.hide = !1, this.zoomToolsSize = "m", this.mapInfos = [], this.mapWidgetsIndex = 0, this.mapWidgetsPosition = "top-leading", this.mobileMapWidgetsPosition = "top-right", this.mapWidgetsSize = "m", this.stackTools = !1, this.mapToolsOrder = [], this.mobileToolsOrder = [], this.isMapLayout = !1, this.shareIncludeEmbed = !1, this.shareIncludeSocial = !1, this.selectedFeaturesIds = [], this.showOnlyUpdatableLayers = !1, this.isMobile = !1, this.enableSelectionTool = !1, this.visibilityIcon = "eyeball", this._configLayerOrderDefined = !1, this._translations = I({ name: "map-card", blocking: !0 }), this._toolInfos = [], this._filterActive = !1, this._layerIds = [], this._enabledLayerIds = [], this._defaultWebmapHonored = !1, this._loadedId = "", this._mapDiv = d(), this._mapPicker = d(), this._mapTools = d(), this._mobMapTools = d(), this._mapLayerPicker = d(), this._selectedWebMapId = "", this._isValidWebMap = !0, this.mapChanged = p(), this.beforeMapChanged = p(), this.toggleFilter = p(), this.clearSelection = p(), this.editMultipleFeatures = p(), this.listenOn(window, "mapInfoChange", this.mapInfoChange), this.listenOn(window, "noLayersFound", this.noLayersFound), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.listenOn(window, "idsFound", this._idsFound), this.enableSingleExpand = !0, this.stackTools = !0, M(window);
+    super(), this.defaultWebmapId = "", this.defaultLayerId = "", this.enableHome = !1, this.enableLegend = !1, this.enableLayerList = !0, this.enableFloorFilter = !1, this.enableFullscreen = !1, this.enableShare = !1, this.enableMapLayerPicker = !1, this.enableMapPicker = !1, this.enableSingleExpand = !1, this.enableSearch = !1, this.enableBasemap = !1, this.featureSelectionMode = "multiple", this.hide = !1, this.zoomToolsSize = "m", this.mapInfos = [], this.mapWidgetsIndex = 0, this.mapWidgetsPosition = "top-leading", this.mobileMapWidgetsPosition = "top-right", this.mapWidgetsSize = "m", this.stackTools = !1, this.mapToolsOrder = [], this.mobileToolsOrder = [], this.isMapLayout = !1, this.shareIncludeEmbed = !1, this.shareIncludeSocial = !1, this.selectedFeaturesIds = [], this.showOnlyUpdatableLayers = !1, this.isMobile = !1, this.enableSelectionTool = !1, this.visibilityIcon = "eyeball", this._configLayerOrderDefined = !1, this._translations = v({ name: "map-card", blocking: !0 }), this._toolInfos = [], this._filterActive = !1, this._layerIds = [], this._enabledLayerIds = [], this._defaultWebmapHonored = !1, this._loadedId = "", this._mapDiv = d(), this._mapPicker = d(), this._mapTools = d(), this._mobMapTools = d(), this._mapLayerPicker = d(), this._selectedWebMapId = "", this._isValidWebMap = !0, this.mapChanged = p(), this.beforeMapChanged = p(), this.toggleFilter = p(), this.clearSelection = p(), this.editMultipleFeatures = p(), this.listenOn(window, "mapInfoChange", this.mapInfoChange), this.listenOn(window, "noLayersFound", this.noLayersFound), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.listenOn(window, "idsFound", this._idsFound), this.enableSingleExpand = !0, this.stackTools = !0, w(window);
   }
   static {
     this.properties = { appLayout: 1, appProxies: 1, defaultWebmapId: 1, defaultLayerId: 1, enableHome: 5, enableLegend: 5, enableLayerList: 5, enableFloorFilter: 5, enableFullscreen: 5, enableShare: 5, enableMapLayerPicker: 5, enableMapPicker: 5, enableSingleExpand: 5, enableSearch: 5, enableBasemap: 5, featureSelectionMode: 1, basemapConfig: 0, hide: 5, zoomToolsSize: 1, mapInfos: 0, mapWidgetsIndex: 9, mapWidgetsPosition: 1, mobileMapWidgetsPosition: 1, mapWidgetsSize: 1, mapView: 0, stackTools: 5, theme: 1, mapToolsOrder: 0, mobileToolsOrder: 0, isMapLayout: 5, shareIncludeEmbed: 5, shareIncludeSocial: 5, selectedFeaturesIds: 0, selectedLayer: 0, zoomToScale: 9, showOnlyUpdatableLayers: 5, isMobile: 5, mapInfo: 0, enableSelectionTool: 5, visibilityIcon: 1, _configLayerOrderDefined: 16, _translations: 16, _searchConfiguration: 16, _webMapInfo: 16, _toolInfos: 16, _filterActive: 16, _mapDivHeight: 16, _mapDivWidth: 16, _layerIds: 16 };
@@ -23,7 +24,7 @@ class C extends L {
     this.styles = k;
   }
   static {
-    this.shadowRootOptions = w;
+    this.shadowRootOptions = L;
   }
   willUpdate(e) {
     e.has("appLayout") && this.appLayoutWatchHandler(), e.has("mapView") && this.mapViewWatchHandler(), e.has("mapInfo") && this.mapInfoWatchHandler(), e.has("selectedFeaturesIds") && this.selectedFeaturesIdsWatchHandler();
@@ -32,7 +33,7 @@ class C extends L {
     this._updateShareUrl();
   }
   async mapInfoWatchHandler() {
-    this._configLayerOrderDefined = "configLayerOrder" in (this.mapInfo?.layerOptions || {}), this._enabledLayerIds = y(this.mapInfo?.layerOptions?.layers || [], this.mapInfo?.layerOptions?.configLayerOrder);
+    this._configLayerOrderDefined = "configLayerOrder" in (this.mapInfo?.layerOptions || {}), this._enabledLayerIds = M(this.mapInfo?.layerOptions?.layers || [], this.mapInfo?.layerOptions?.configLayerOrder);
   }
   async mapViewWatchHandler() {
     this.mapView && this._updateShareUrl();
@@ -87,7 +88,7 @@ class C extends L {
         portalItem: { id: s }
       });
       try {
-        l && await l.load(), this.appProxies && l && await _(l, S, this.appProxies), this.mapView = new T({
+        l && await l.load(), this.appProxies && l && await y(l, S, this.appProxies), this.mapView = new T({
           container: this._mapDiv.value,
           map: l,
           resizeAlign: "center"
@@ -203,8 +204,8 @@ class C extends L {
   }
   async _zoom() {
     if (this.selectedLayer && this.mapView) {
-      const e = await g(this.mapView, this.selectedLayer.id);
-      e && await v(this.selectedFeaturesIds, e, this.mapView, !0, void 0, this.zoomToScale);
+      const e = await _(this.mapView, this.selectedLayer.id);
+      e && await g(this.selectedFeaturesIds, e, this.mapView, !0, void 0, this.zoomToScale);
     }
   }
   async _toggleFilter() {

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

@@ -1,5 +1,9 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type Graphic from "@arcgis/core/Graphic.js";
+import type MapView from "@arcgis/core/views/MapView.js";
+import type SimpleFillSymbol from "@arcgis/core/symbols/SimpleFillSymbol.js";
+import type SimpleLineSymbol from "@arcgis/core/symbols/SimpleLineSymbol.js";
+import type SimpleMarkerSymbol from "@arcgis/core/symbols/SimpleMarkerSymbol.js";
 import type { ISketchGraphicsChange, EDrawMode } from "../../utils/interfaces.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
@@ -42,23 +46,23 @@ export abstract class MapDrawTools extends LitElement {
    */
   accessor editGraphicsEnabled: boolean;
   /** esri/Graphic: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html */
-  accessor graphics: __esri.Graphic[];
+  accessor graphics: Graphic[];
   /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-  accessor mapView: __esri.MapView | undefined;
-  /** esri/symbols/SimpleMarkerSymbol: https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleMarkerSymbol.html */
-  accessor pointSymbol: __esri.SimpleMarkerSymbol | undefined;
-  /** esri/symbols/SimpleFillSymbol: https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleFillSymbol.html */
-  accessor polygonSymbol: __esri.SimpleFillSymbol | undefined;
-  /** esri/symbols/SimpleLineSymbol: https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleLineSymbol.html */
-  accessor polylineSymbol: __esri.SimpleLineSymbol | undefined;
+  accessor mapView: MapView | undefined;
+  /** SimpleMarkerSymbol: Point symbol used for sketching and updating point graphics */
+  accessor pointSymbol: SimpleMarkerSymbol | undefined;
+  /** SimpleFillSymbol: Polygon symbol used for sketching and updating polygon graphics */
+  accessor polygonSymbol: SimpleFillSymbol | undefined;
+  /** SimpleLineSymbol: Polyline symbol used for sketching and updating polyline graphics */
+  accessor polylineSymbol: SimpleLineSymbol | undefined;
   /**
-   * boolean: when eanbled the user can redo the previous operation
+   * boolean: when enabled the user can redo the previous operation
    *
    * @default false
    */
   accessor redoEnabled: boolean;
   /**
-   * boolean: when eanbled the user can undo the previous operation
+   * boolean: when enabled the user can undo the previous operation
    *
    * @default false
    */

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

@@ -1,39 +1,78 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as r } from "../../chunks/runtime.js";
+import { c as h } from "../../chunks/runtime.js";
 import { u as c } from "../../chunks/useT9n.js";
-import { css as l, html as n } from "lit";
-import { createRef as d, ref as p } from "lit-html/directives/ref.js";
-import { LitElement as g, createEvent as o, noShadowRoot as m, safeClassMap as h } from "@arcgis/lumina";
-import { useContextConsumer as f } from "@arcgis/lumina/context";
-import { p as y } from "../../chunks/publicNotificationContext.js";
-import _ from "@arcgis/core/layers/GraphicsLayer";
-import k from "@arcgis/core/widgets/Sketch/SketchViewModel";
-import w from "@arcgis/core/widgets/Sketch";
-const u = l`@layer{:host{display:block}.border{outline:1px solid var(--calcite-color-border-input)}.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 b extends g {
+import { css as n, html as l } from "lit";
+import { createRef as p, ref as d } from "lit-html/directives/ref.js";
+import { LitElement as m, createEvent as a, noShadowRoot as g, safeClassMap as o } from "@arcgis/lumina";
+import { useContextConsumer as u } from "@arcgis/lumina/context";
+import { p as _ } from "../../chunks/publicNotificationContext.js";
+import y from "@arcgis/core/layers/GraphicsLayer.js";
+const f = n`@layer{:host{display:block}.border{outline:1px solid var(--calcite-color-border-input)}.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 k extends m {
   constructor() {
-    super(...arguments), this.active = !1, this.drawMode = "SKETCH", this.editGraphicsEnabled = !0, this.graphics = [], this.redoEnabled = !1, this.undoEnabled = !1, this._translations = c({ name: "map-draw-tools", blocking: !0 }), this._pnContextConsumer = f({
-      context: y,
+    super(...arguments), this.active = !1, this.drawMode = "SKETCH", this.editGraphicsEnabled = !0, this.graphics = [], this.redoEnabled = !1, this.undoEnabled = !1, this._translations = c({ name: "map-draw-tools", blocking: !0 }), this._pnContextConsumer = u({
+      context: _,
       subscribe: !0
-    }), this._sketchElement = d(), this.selectionLoadingChange = o(), this.sketchGraphicsChange = o(), this.drawUndo = o(), this.drawRedo = o();
+    }), this._sketchComponent = p(), this._forceCreate = !1, this.selectionLoadingChange = a(), this.sketchGraphicsChange = a(), this.drawUndo = a(), this.drawRedo = a(), this._onSketchReady = async () => {
+      await new Promise((t) => setTimeout(t, 50)), this._sketchComponent.value?.getElementsByTagName("calcite-popover")[0]?.setAttribute("placement", "auto");
+    }, this._onSketchCreate = (e) => {
+      const t = e.detail;
+      t.state === "complete" && (this.graphics = t.graphic ? [t.graphic] : [], this.sketchGraphicsChange.emit({
+        graphics: this.graphics,
+        useOIDs: !1
+      }), this.drawMode === "REFINE" && (this._forceCreate = !0, this._sketchComponent.value?.create(t.tool))), t.state === "cancel" && this.drawMode === "REFINE" && this._forceCreate && (this._forceCreate = !this._forceCreate, this._sketchComponent.value?.create(t.tool));
+    }, this._onSketchUpdate = (e) => {
+      if (!this.editGraphicsEnabled) {
+        this._sketchComponent.value?.cancel();
+        return;
+      }
+      const t = e.detail, i = t.toolEventInfo?.type;
+      (t.state === "active" && i === "update" || i === "move" || i === "reshape-stop" || i === "move-stop") && (clearTimeout(this._debounceTimer), this._debounceTimer = window.setTimeout(() => {
+        this.graphics = t.graphics, this.sketchGraphicsChange.emit({
+          graphics: this.graphics,
+          useOIDs: !1
+        });
+      }, 1e3));
+    }, this._onSketchDelete = () => {
+      this.graphics = [], this.sketchGraphicsChange.emit({
+        graphics: this.graphics,
+        useOIDs: !1
+      });
+    }, this._onSketchUndo = (e) => {
+      if (this._sketchComponent.value?.state === "active")
+        return;
+      const t = e.detail;
+      this.graphics = t.graphics, this.sketchGraphicsChange.emit({
+        graphics: this.graphics,
+        useOIDs: !1
+      });
+    }, this._onSketchRedo = (e) => {
+      if (this._sketchComponent.value?.state === "active")
+        return;
+      const t = e.detail;
+      t.graphics[0].geometry && (this.graphics = t.graphics, this.sketchGraphicsChange.emit({
+        graphics: this.graphics,
+        useOIDs: !1
+      }));
+    };
   }
   static {
     this.properties = { active: 5, drawMode: 1, editGraphicsEnabled: 5, graphics: 0, mapView: 0, pointSymbol: 0, polylineSymbol: 0, polygonSymbol: 0, redoEnabled: 5, undoEnabled: 5, _translations: 16, _selectionMode: 16 };
   }
   static {
-    this.styles = u;
+    this.styles = f;
   }
   static {
-    this.shadowRootOptions = m;
+    this.shadowRootOptions = g;
   }
   willUpdate(e) {
     e.has("graphics") && this.graphicsWatchHandler(this.graphics, e.get("graphics")), e.has("mapView") && this.mapView && this.mapViewWatchHandler(this.mapView, e.get("mapView"));
   }
-  graphicsWatchHandler(e, i) {
-    e && e.length > 0 && JSON.stringify(e) !== JSON.stringify(i) && this._sketchGraphicsLayer && (this._updateGraphicsSymbols(e), this._sketchGraphicsLayer.removeAll(), this._sketchGraphicsLayer.addMany(e));
+  graphicsWatchHandler(e, t) {
+    e && e.length > 0 && JSON.stringify(e) !== JSON.stringify(t) && this._sketchGraphicsLayer && (this._updateGraphicsSymbols(e), this._sketchGraphicsLayer.removeAll(), this._sketchGraphicsLayer.addMany(e));
   }
-  mapViewWatchHandler(e, i) {
-    e && e !== i && this._init();
+  mapViewWatchHandler(e, t) {
+    e && e !== t && this._init();
   }
   async clear() {
     this._clearSketch();
@@ -45,101 +84,34 @@ class b extends g {
     this._init();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this._sketchWidget?.cancel(), this._clearSketch();
+    super.disconnectedCallback(), this._sketchComponent.value?.cancel(), this._clearSketch();
   }
   render() {
-    const e = this.drawMode === "SKETCH" ? "border" : "border esri-widget esri-sketch__panel", i = this.drawMode === "SKETCH" ? "display-none" : "esri-widget esri-sketch__panel border-left esri-sketch__section";
-    return n`<div class=${h(e)}><div ${p(this._sketchElement)}></div><div class=${h(i)}><calcite-action appearance=solid .disabled=${!this.undoEnabled} icon=undo @click=${() => this._undo()} scale=s .text=${this._translations.undo}></calcite-action><calcite-action appearance=solid .disabled=${!this.redoEnabled} icon=redo @click=${() => this._redo()} scale=s .text=${this._translations.redo}></calcite-action></div></div>`;
+    const e = this.drawMode === "SKETCH" ? "border" : "border esri-widget esri-sketch__panel", t = this.drawMode === "SKETCH" ? "display-none" : "esri-widget esri-sketch__panel border-left esri-sketch__section";
+    return l`<div class=${o(e)}><arcgis-sketch @arcgisReady=${this._onSketchReady} @arcgisCreate=${this._onSketchCreate} @arcgisUpdate=${this._onSketchUpdate} @arcgisDelete=${this._onSketchDelete} @arcgisUndo=${this._onSketchUndo} @arcgisRedo=${this._onSketchRedo} use-legacy-create-tools ${d(this._sketchComponent)}></arcgis-sketch><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>`;
   }
   _init() {
-    this.mapView && this._sketchElement.value && (this._initGraphicsLayer(), this._initSketch());
+    this.mapView && (this._initGraphicsLayer(), this._initSketch());
   }
   _initGraphicsLayer() {
-    const e = this._pnContextConsumer.value, i = this._translations.sketchLayer;
+    const e = this._pnContextConsumer.value, t = this._translations.sketchLayer;
     if (this.mapView) {
-      const s = this.mapView.map.layers.findIndex((t) => t.title === i);
-      s > -1 ? this._sketchGraphicsLayer = this.mapView.map.layers.getItemAt(s) : (this._sketchGraphicsLayer = new _({ title: i, listMode: "hide" }), this._sketchGraphicsLayer && (e.managedLayers[i] = "sketch", this.mapView.map.layers.add(this._sketchGraphicsLayer))), this.graphics && this.graphics.length > 0 && this._sketchGraphicsLayer && this._sketchGraphicsLayer.addMany(this.graphics);
+      const i = this.mapView.map.layers.findIndex((s) => s.title === t);
+      i > -1 ? this._sketchGraphicsLayer = this.mapView.map.layers.getItemAt(i) : (this._sketchGraphicsLayer = new y({ title: t, listMode: "hide" }), this._sketchGraphicsLayer && (e.managedLayers[t] = "sketch", this.mapView.map.layers.add(this._sketchGraphicsLayer))), this.graphics && this.graphics.length > 0 && this._sketchGraphicsLayer && this._sketchGraphicsLayer.addMany(this.graphics);
     }
   }
   _initSketch() {
-    const e = {
-      layer: this._sketchGraphicsLayer,
-      view: this.mapView,
-      defaultCreateOptions: {
-        mode: "hybrid"
-      },
-      defaultUpdateOptions: {
-        preserveAspectRatio: !1,
-        enableScaling: !1,
-        enableRotation: !1,
-        tool: "reshape",
-        toggleToolOnClick: !1
-      }
-    };
-    if (this._sketchWidget = new w({
-      ...e,
-      container: this._sketchElement.value,
-      creationMode: "single",
-      toolbarKind: "docked",
-      useLegacyCreateTools: !0,
-      visibleElements: {
-        duplicateButton: !1,
-        selectionTools: {
-          "lasso-selection": !1,
-          "rectangle-selection": !1
-        },
-        createTools: {
-          circle: !1
-        },
-        undoRedoMenu: !1,
-        settingsMenu: this.drawMode === "SKETCH"
-      }
-    }), this._sketchWidget && this._sketchWidget.viewModel) {
-      this._sketchViewModel = new k({
-        ...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), this._sketchWidget?.when(async () => {
-        await new Promise((a) => setTimeout(a, 50)), this._sketchElement.value?.getElementsByTagName("calcite-popover")[0]?.setAttribute("placement", "auto");
-      });
-      let i = !1;
-      this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("create", (t) => {
-        t.state === "complete" && (this.graphics = t.graphic ? [t.graphic] : [], this.sketchGraphicsChange.emit({
-          graphics: this.graphics,
-          useOIDs: !1
-        }), this.drawMode === "REFINE" && (i = !0, this._sketchWidget?.viewModel.create(t.tool))), t.state === "cancel" && this.drawMode === "REFINE" && i && (i = !i, this._sketchWidget?.viewModel.create(t.tool));
-      }));
-      let s;
-      this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("update", (t) => {
-        if (!this.editGraphicsEnabled)
-          this._sketchWidget?.viewModel.cancel(), this._sketchViewModel?.cancel();
-        else {
-          const a = t?.toolEventInfo?.type;
-          (a === "move" || a === "reshape-stop" || a === "move-stop") && (clearTimeout(s), s = window.setTimeout(async () => {
-            this.graphics = t.graphics, this.sketchGraphicsChange.emit({
-              graphics: this.graphics,
-              useOIDs: !1
-            });
-          }, 1e3));
-        }
-      })), 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", (t) => {
-        this.graphics = t.graphics, this.sketchGraphicsChange.emit({
-          graphics: this.graphics,
-          useOIDs: !1
-        });
-      })), this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("redo", (t) => {
-        this.graphics = t.graphics, this.sketchGraphicsChange.emit({
-          graphics: this.graphics,
-          useOIDs: !1
-        });
-      }));
-    }
+    const e = this._sketchComponent.value;
+    e && (e.view = this.mapView, e.layer = this._sketchGraphicsLayer, e.creationMode = "single", e.toolbarKind = "docked", e.defaultCreateOptions = { mode: "hybrid" }, e.defaultUpdateOptions = {
+      preserveAspectRatio: !1,
+      enableScaling: !1,
+      enableRotation: !1,
+      tool: "reshape",
+      toggleToolOnClick: !1
+    }, e.hideDuplicateButton = !0, e.hideSelectionToolsLassoSelection = !0, e.hideSelectionToolsRectangleSelection = !0, e.hideCreateToolsCircle = !0, e.hideUndoRedoMenu = !0, e.hideSettingsMenu = this.drawMode !== "SKETCH", this.pointSymbol ? e.pointSymbol = this.pointSymbol : this.polylineSymbol ? e.polylineSymbol = this.polylineSymbol : this.polygonSymbol && (e.polygonSymbol = this.polygonSymbol));
   }
   _clearSketch() {
-    this._sketchWidget?.viewModel.cancel(), this.graphics = [], this._sketchGraphicsLayer?.removeAll();
+    this._sketchComponent.value?.cancel(), this.graphics = [], this._sketchGraphicsLayer?.removeAll();
   }
   _undo() {
     this.drawUndo.emit();
@@ -149,21 +121,15 @@ class b extends g {
   }
   _updateGraphics() {
     setTimeout(() => {
-      this.graphics.length === 1 && this._sketchWidget && this._sketchWidget.update(this.graphics, {
-        tool: "reshape",
-        enableRotation: !1,
-        enableScaling: !1,
-        preserveAspectRatio: !1,
-        toggleToolOnClick: !1
-      });
+      this.graphics.length === 1 && this.graphics[0].geometry && this._sketchComponent.value && this._sketchComponent.value.triggerUpdate(this.graphics);
     }, 100);
   }
   _updateGraphicsSymbols(e) {
-    const s = e[0]?.geometry?.type, t = s === "point" ? this.pointSymbol : s === "polyline" ? this.polylineSymbol : s === "polygon" ? this.polygonSymbol : void 0;
-    t && e.forEach((a) => a.symbol = t);
+    const i = e[0]?.geometry?.type, s = i === "point" ? this.pointSymbol : i === "polyline" ? this.polylineSymbol : i === "polygon" ? this.polygonSymbol : void 0;
+    s && e.forEach((r) => r.symbol = s);
   }
 }
-r("map-draw-tools", b);
+h("map-draw-tools", k);
 export {
-  b as MapDrawTools
+  k as MapDrawTools
 };

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

@@ -1,2 +1,3 @@
+import "@arcgis/map-components/components/arcgis-sketch";
 import "@esri/calcite-components/components/calcite-action";
 export * from "./customElement.js";

package/dist/components/map-floor-filter/customElement.d.ts

@@ -1,5 +1,6 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type FloorFilter from "@arcgis/core/widgets/FloorFilter.js";
+import type MapView from "@arcgis/core/views/MapView.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
 export abstract class MapFloorFilter extends LitElement {
@@ -14,9 +15,9 @@ export abstract class MapFloorFilter extends LitElement {
    *
    * FloorFilter instance
    */
-  accessor floorFilterWidget: __esri.FloorFilter | undefined;
+  accessor floorFilterWidget: FloorFilter | undefined;
   /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-  accessor mapView: __esri.MapView | undefined;
+  accessor mapView: MapView | undefined;
   /** Emitted on demand when the Facility is changed */
   readonly facilityChanged: import("@arcgis/lumina").TargetedEvent<this, string>;
   /** Emitted on demand when the Level is changed */

package/dist/components/map-floor-filter/customElement.js

@@ -3,8 +3,8 @@ import { c as o } from "../../chunks/runtime.js";
 import { css as s, html as a } from "lit";
 import { createRef as h, ref as n } from "lit-html/directives/ref.js";
 import { LitElement as d, createEvent as l } from "@arcgis/lumina";
-import f from "@arcgis/core/widgets/FloorFilter";
-import * as r from "@arcgis/core/core/reactiveUtils";
+import f from "@arcgis/core/widgets/FloorFilter.js";
+import * as r from "@arcgis/core/core/reactiveUtils.js";
 const m = s`:host{display:block}`;
 class c extends d {
   constructor() {