@esri/solutions-components 1.2.0-next.56 → 1.2.0-next.58

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

@@ -0,0 +1 @@
+{"version":3,"file":"customElement.js","sources":["../../../src/components/map-card/map-card.tsx"],"sourcesContent":["/**\r\n * @license\r\n * Copyright 2025 Esri\r\n *\r\n * Licensed under the Apache License, Version 2.0 (the 'License');\r\n * you may not use this file except in compliance with the License.\r\n * You may obtain a copy of the License at\r\n *\r\n *    http://www.apache.org/licenses/LICENSE-2.0\r\n *\r\n * Unless required by applicable law or agreed to in writing, software\r\n * distributed under the License is distributed on an 'AS IS' BASIS,\r\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n * See the License for the specific language governing permissions and\r\n * limitations under the License.\r\n */\r\n\r\nimport type T9nStrings from './assets/t9n/messages.en.json';\r\nimport type {\r\n  AppLayout,\r\n  IBasemapConfig,\r\n  IMapChange,\r\n  IMapInfo,\r\n  ISearchConfiguration,\r\n  IToolInfo,\r\n  theme,\r\n  TooltipPlacement\r\n} from '../../utils/interfaces';\r\nimport {\r\n  BATCH_EDIT_LIMIT,\r\n} from '../../utils/interfaces';\r\nimport { joinAppProxies } from 'templates-common-library/functionality/proxy';\r\nimport { getFeatureLayerView, goToSelection } from '../../utils/mapViewUtils';\r\nimport { useT9n } from '../../controllers/useT9n';\r\nimport type { PropertyValues } from 'lit';\r\nimport { createRef } from 'lit-html/directives/ref.js';\r\nimport {\r\n  LitElement,\r\n  property,\r\n  createEvent,\r\n  Fragment,\r\n  h,\r\n  method,\r\n  noShadowRoot,\r\n  state,\r\n} from '@arcgis/lumina';\r\nimport type {\r\n  JsxNode,\r\n} from '@arcgis/lumina';\r\nimport { styles } from './map-card.css';\r\nimport type { MapLayerPicker } from '../map-layer-picker/map-layer-picker';\r\nimport type { MapTools } from '../map-tools/map-tools';\r\nimport type { MapPicker } from '../map-picker/map-picker';\r\nimport { defineCustomElements } from '@arcgis/instant-apps-components/loader';\r\nimport { getEnabledLayerIds } from '../../utils/helpers';\r\nimport config from '@arcgis/core/config';\r\nimport MapView from '@arcgis/core/views/MapView';\r\nimport WebMap from '@arcgis/core/WebMap';\r\n\r\ndeclare global {\r\n  interface DeclareElements {\r\n    'map-card': MapCard;\r\n  }\r\n}\r\n\r\n// TODO navigation and accessability isn't right for the map list\r\n//   tab does not go into the list when it's open\r\n//   focus is not set when it opens\r\n// TODO clarify what the List button is supposed to do\r\n// TODO map list button tooltip does not work\r\n// TODO map list should close if the user clicks something else...hope this will be easy when I figure out how to set focus when it opens\r\n\r\nexport class MapCard extends LitElement {\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Overrides (internal)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  constructor() {\r\n    super();\r\n    this.listenOn<CustomEvent>(window, 'mapInfoChange', this.mapInfoChange);\r\n    this.listenOn(window, 'noLayersFound', this.noLayersFound);\r\n    this.listenOn(window, 'layerSelectionChange', this.layerSelectionChange);\r\n    this.enableSingleExpand = true;\r\n    this.stackTools = true;\r\n\r\n    // IAC assets\r\n    defineCustomElements(window);\r\n  }\r\n\r\n  static override styles = styles;\r\n\r\n  static override shadowRootOptions = noShadowRoot;\r\n\r\n  /** TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code */\r\n  override willUpdate(changes: PropertyValues<this>): void {\r\n    /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.\r\n    To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method\r\n    Please refactor your code to reduce the need for this check.\r\n    Docs: https://qawebgis.esri.com/components/lumina/transition-from-stencil#watching-for-property-changes */\r\n    if (changes.has('appLayout')) {\r\n      this.appLayoutWatchHandler();\r\n    }\r\n\r\n    if (changes.has('mapView')) {\r\n      void this.mapViewWatchHandler();\r\n    }\r\n\r\n    if (changes.has('mapInfo')) {\r\n      void this.mapInfoWatchHandler();\r\n    }\r\n\r\n    if (changes.has('selectedFeaturesIds')) {\r\n      void this.selectedFeaturesIdsWatchHandler();\r\n    }\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** AppLayout: the current app layout */\r\n  @property() appLayout: AppLayout | undefined;\r\n\r\n  /** Array of objects containing proxy information for premium platform services. */\r\n  @property() appProxies: any;\r\n\r\n  /** string: Item ID of the web map that should be selected by default when the app loads */\r\n  @property() defaultWebmapId = '';\r\n\r\n  /** string: when provided this layer ID will be used when the app loads */\r\n  @property() defaultLayerId = '';\r\n\r\n  /** boolean: when true the home widget will be available */\r\n  @property() enableHome = false;\r\n\r\n  /** boolean: when true the legend widget will be available */\r\n  @property() enableLegend = false;\r\n\r\n  /** boolean: when true the floor filter widget will be available */\r\n  @property() enableFloorFilter = false;\r\n\r\n  /** boolean: when true the fullscreen widget will be available */\r\n  @property() enableFullscreen = false;\r\n\r\n  /** boolean: when true the share widget will be available */\r\n  @property() enableShare = false;\r\n\r\n  /** boolean: when true the map layer picker tool will be available */\r\n  @property() enableMapLayerPicker = false;\r\n\r\n  /** boolean: when true the map picker tool will be available */\r\n  @property() enableMapPicker = false;\r\n\r\n  /**\r\n   * boolean: when true map tools will be displayed within a single expand/collapse widget\r\n   * when false widgets will be loaded individually into expand widgets\r\n   */\r\n  @property() enableSingleExpand = false;\r\n\r\n  /** boolean: when true the search widget will be available */\r\n  @property() enableSearch = false;\r\n\r\n  /** boolean: when true the basemap widget will be available */\r\n  @property() enableBasemap = false;\r\n\r\n  /** string: Selection mode for the feature selection */\r\n  @property() featureSelectionMode = 'multiple';\r\n\r\n  /** IBasemapConfig: List of any basemaps to filter out from the basemap widget */\r\n  @property() basemapConfig: IBasemapConfig | undefined;\r\n\r\n  /** boolean: When true the map display will be hidden */\r\n  @property() hide = false;\r\n\r\n  /** 's' | 'm' | 'l': Used for Zoom and Home tools */\r\n  @property() zoomToolsSize: 'l' | 'm' | 's' = 'm';\r\n\r\n  /** IMapInfo[]: array of map infos (name and id) */\r\n  @property() mapInfos: IMapInfo[] = [];\r\n\r\n  /**\r\n   * number: The placement index of the map widgets (legend, basemap, fullscreen etc). This index shows where to place the component relative to other components.\r\n   * For example a value of 0 would place it topmost when position is top-*, leftmost for bottom-left and right most for bottom-right.\r\n   */\r\n  @property() mapWidgetsIndex = 0;\r\n\r\n  /**\r\n   * __esri.UIPosition: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-UI.html#UIPosition\r\n   * The position details for the map tools\r\n   */\r\n  @property() mapWidgetsPosition: __esri.UIPosition = 'top-leading';\r\n\r\n  /**\r\n   * __esri.UIPosition: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-UI.html#UIPosition\r\n   * The position details for the mobile map tools\r\n   */\r\n  @property() mobileMapWidgetsPosition: __esri.UIPosition = 'top-right';\r\n\r\n  /** 's' | 'm' | 'l': Used for optional map tool widget */\r\n  @property() mapWidgetsSize: 'l' | 'm' | 's' = 'm';\r\n\r\n  /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */\r\n  @property() mapView: __esri.MapView | undefined;\r\n\r\n  /**\r\n   * boolean: When true the map widget tools will have no margin between them.\r\n   * When false the map widget tools will have a margin between them.\r\n   */\r\n  @property() stackTools = false;\r\n\r\n  /** theme: 'light' | 'dark' theme to be used */\r\n  @property() theme: theme | undefined;\r\n\r\n  /** Valid tools: 'legend', 'search', 'fullscreen', 'basemap', 'floorfilter', 'selectiontool' */\r\n  @property() mapToolsOrder: string[] = [];\r\n\r\n  /** Valid tools: 'map-picker', 'map-layer-picker' */\r\n  @property() mobileToolsOrder: string[] = [];\r\n\r\n  /** boolean: When true map will shown is full screen */\r\n  @property() isMapLayout = false;\r\n\r\n  /** boolean: When true the share options will include embed option */\r\n  @property() shareIncludeEmbed = false;\r\n\r\n  /** boolean: When true the share options will include social media sharing */\r\n  @property() shareIncludeSocial = false;\r\n\r\n  /** number[]: A list of ids that are currently selected */\r\n  @property() selectedFeaturesIds: (number | string)[] = [];\r\n\r\n  /** __esri.FeatureLayer: Selected layer */\r\n  @property() selectedLayer: __esri.FeatureLayer | undefined;\r\n\r\n  /** number: default scale to zoom to when zooming to a single point feature */\r\n  @property() zoomToScale: number | undefined;\r\n\r\n  /** boolean: When true only editable layers that support the update capability will be available */\r\n  @property() showOnlyUpdatableLayers = false;\r\n\r\n  /** When true the component will render an optimized view for mobile devices */\r\n  @property() isMobile = false;\r\n\r\n  /** IMapInfo: key configuration details about the current map */\r\n  @property() mapInfo: IMapInfo | undefined;\r\n\r\n  /** boolean: when true the selectionTool tool will be available */\r\n  @property() enableSelectionTool = false;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  State (internal)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** boolean: when true the layer order should be defined in the enabledLayerIds, when false we will use the older logic of layers first then tables */\r\n  @state() _configLayerOrderDefined = false;\r\n\r\n  /**\r\n   * Contains the translations for this component.\r\n   * All UI strings should be defined here.\r\n   */\r\n  @state() _translations = useT9n<typeof T9nStrings>({ name: 'map-card', blocking: true });\r\n\r\n  /** ISearchConfiguration: Configuration details for the Search widget */\r\n  @state() _searchConfiguration: ISearchConfiguration | undefined;\r\n\r\n  /** IMapInfo: id and name of the map to display */\r\n  @state() _webMapInfo: IMapInfo | undefined;\r\n\r\n  /** IToolInfo[]: Key details used for creating the tools */\r\n  @state() _toolInfos: IToolInfo[] = [];\r\n\r\n  /** boolean: When true an indicator will be shown on the action */\r\n  @state() _filterActive = false;\r\n\r\n  /** map div container calculated height */\r\n  @state() _mapDivHeight: number | undefined;\r\n\r\n  /** map div container calculated width */\r\n  @state() _mapDivWidth: number | undefined;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * string[]: Optional list of enabled layer ids\r\n   *  If empty all layers will be available\r\n   */\r\n  private _enabledLayerIds: string[] = [];\r\n\r\n  /** boolean: When true the default map provided via url params has been loaded and should no longer override other maps */\r\n  private _defaultWebmapHonored = false;\r\n\r\n  /** string: the id of map currently displayed */\r\n  private _loadedId = '';\r\n\r\n  /** HTMLDivElement: the container div for the map */\r\n  private _mapDiv = createRef<HTMLDivElement>();\r\n\r\n  // /** HTMLMapPickerElement: map layer picker element */\r\n  private _mapPicker = createRef<MapPicker['el']>();\r\n\r\n  // /** HTMLMapToolsElement: the container div for the map tools */\r\n  private _mapTools = createRef<MapTools['el']>();\r\n\r\n  // /** HTMLMapToolsElement: the container div for the mobile map tools */\r\n  private _mobMapTools = createRef<MapTools['el']>();\r\n\r\n  /** HTMLMapLayerPickerElement: The Map layer picker refrence element */\r\n  private _mapLayerPicker = createRef<MapLayerPicker['el']>();\r\n\r\n  /** HTMLInstantAppsSocialShareElement: Element to support app sharing to social media */\r\n  private _shareNode: HTMLInstantAppsSocialShareElement | undefined;\r\n\r\n  /** ResizeObserver: The observer that watches for map container size */\r\n  private _mapSizeObserver: ResizeObserver | undefined;\r\n\r\n  /** string: selected web map id */\r\n  private _selectedWebMapId = '';\r\n\r\n  /** boolean: when true the provided web map is valid */\r\n  private _isValidWebMap = true;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Watch handlers\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Update the url params when the appLayout changes */\r\n  private appLayoutWatchHandler(): void {\r\n    this._updateShareUrl();\r\n  }\r\n\r\n  /** watch for changes in map info and update the enabled layers */\r\n  private async mapInfoWatchHandler(): Promise<void> {\r\n    this._configLayerOrderDefined = 'configLayerOrder' in (this.mapInfo?.layerOptions || {});\r\n    this._enabledLayerIds = getEnabledLayerIds(\r\n      this.mapInfo?.layerOptions?.layers || [],\r\n      this.mapInfo?.layerOptions?.configLayerOrder\r\n    );\r\n  }\r\n\r\n  /** watch for changes in map view and get the first layer */\r\n  private async mapViewWatchHandler(): Promise<void> {\r\n    if (this.mapView) {\r\n      this._updateShareUrl();\r\n    }\r\n  }\r\n\r\n  /** watch for features ids changes */\r\n  private async selectedFeaturesIdsWatchHandler(): Promise<void> {\r\n    this._updateShareUrl();\r\n    this._validateEnabledActions();\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Methods (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Reset the filter */\r\n  @method()\r\n  async resetFilter(): Promise<void> {\r\n    this._filterActive = false;\r\n    this._updateShareUrl();\r\n  }\r\n\r\n  /** updates the filter */\r\n  @method()\r\n  async updateFilterState(active: boolean): Promise<void> {\r\n    this._filterActive = active;\r\n    this._updateShareUrl();\r\n  }\r\n\r\n  /** updates the layer in map layer picker */\r\n  @method()\r\n  async updateLayer(): Promise<void> {\r\n    this._mapLayerPicker.value && void this._mapLayerPicker.value.updateLayer();\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Events (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Emitted when a new map is loaded */\r\n  mapChanged = createEvent<IMapChange>();\r\n\r\n  /** Emitted before a new map is loaded */\r\n  beforeMapChanged = createEvent();\r\n\r\n  /** Emitted on demand when filter action is clicked */\r\n  toggleFilter = createEvent();\r\n\r\n  /** Emitted on demand when clear selection button is clicked */\r\n  clearSelection = createEvent();\r\n\r\n  /** Emitted on demand when edit multiple action is clicked */\r\n  editMultipleFeatures = createEvent<(number | string)[]>();\r\n\r\n  /** Listen for changes to map info and load the appropriate map */\r\n  private async mapInfoChange(\r\n    _evt: CustomEvent\r\n  ): Promise<void> {\r\n    this._selectedWebMapId = _evt.detail.id;\r\n    await this._loadMap(_evt.detail);\r\n  }\r\n\r\n  /** Listen for change when mapview doesn't contain any layer */\r\n  private noLayersFound(): void {\r\n    this.selectedLayer = undefined;\r\n    this.selectedFeaturesIds = [];\r\n  }\r\n\r\n  /** Handles layer selection change to show new table */\r\n  private layerSelectionChange(): void {\r\n    setTimeout(() => {\r\n      this._initToolInfos();\r\n    }, 50);\r\n  }\r\n\r\n  /** Called once just after the component is first connected to the DOM. */\r\n  async load(): Promise<void> {\r\n    this._initToolInfos();\r\n    if (!this._mapSizeObserver) {\r\n      this._mapSizeObserver = new ResizeObserver(() => {\r\n        // Allow the ResizeObserver to calculate the width once it is determined after the map view becomes ready.\r\n        if (this._mapDivWidth && this._mapDiv.value) {\r\n          const widthToDeduct = this.isMobile ? 160 : 110;\r\n          this._mapDivWidth = this._mapDiv.value.offsetWidth - widthToDeduct;\r\n        }\r\n      });\r\n    }\r\n  }\r\n\r\n  /** Renders the component. */\r\n  override render(): JsxNode {\r\n    const mapClass = this.hide ? 'visibility-hidden-1' : '';\r\n    const themeClass = this.theme === 'dark' ? 'calcite-mode-dark' : 'calcite-mode-light';\r\n    const mapHeightClass = 'height-full';\r\n    const progressClass = this.isMapLayout ? '' : 'display-none';\r\n    const defaultToolsVisibility = !this._isValidWebMap ? 'hidden' : '';\r\n    const mobileToolsVisibility = !this.isMobile ? 'hidden' : '';\r\n    this._handleMapVisibility()\r\n    this._validateActiveActions();\r\n    return (\r\n      <>\r\n        <calcite-panel class='height-full width-full panel-header-override'>\r\n          {this._getMapLayerPicker()}\r\n          {this._getHeaderActions()}\r\n          <div slot='header-actions-end' class='display-flex absolute-right'>\r\n            {this.enableShare && this.isMapLayout ? this._getShare('share') : undefined}\r\n          </div>\r\n          {/* added calcite progress below header actions to match bottom-border with the split/table view */}\r\n          <calcite-progress class={progressClass} value={0} />\r\n          <div class={`${mapClass} ${mapHeightClass}`}>\r\n            <div class='height-full' ref={this._mapDiv} />\r\n          </div>\r\n          {\r\n            <>\r\n              <map-tools\r\n                basemapConfig={this.basemapConfig}\r\n                class={`box-shadow ${themeClass} ${defaultToolsVisibility}`}\r\n                defaultLayerId={this.defaultLayerId}\r\n                enableBasemap={this.enableBasemap}\r\n                enableFloorFilter={this.enableFloorFilter}\r\n                enableFullscreen={this.enableFullscreen}\r\n                enableHome={this.enableHome}\r\n                enableLegend={this.enableLegend}\r\n                enableSearch={this.enableSearch}\r\n                enableSingleExpand={this.enableSingleExpand}\r\n                enableSelectionTool={this.enableSelectionTool}\r\n                isMobile={this.isMobile}\r\n                parentComponentHeight={this._mapDivHeight}\r\n                parentComponentWidth={this._mapDivWidth}\r\n                zoomToolsSize={this.zoomToolsSize}\r\n                layout='horizontal'\r\n                mapView={this.mapView}\r\n                mapWidgetsSize={this.mapWidgetsSize}\r\n                position={this.mapWidgetsPosition}\r\n                ref={this._mapTools}\r\n                selectedLayer={this.selectedLayer}\r\n                searchConfiguration={this._searchConfiguration}\r\n                stackTools={this.stackTools}\r\n                toolOrder={this.mapToolsOrder}\r\n              />\r\n              <map-tools\r\n                class={`box-shadow ${themeClass} ${mobileToolsVisibility}`}\r\n                defaultLayerId={this.defaultLayerId}\r\n                enabledLayerIds={this._enabledLayerIds}\r\n                enableMapLayerPicker={this.enableMapLayerPicker}\r\n                enableMapPicker={this.enableMapPicker}\r\n                isMobile={this.isMobile}\r\n                zoomToolsSize={this.zoomToolsSize}\r\n                layout='vertical'\r\n                mapInfos={this.mapInfos}\r\n                mapView={this.mapView}\r\n                mapWidgetsSize={this.mapWidgetsSize}\r\n                parentComponentHeight={this._mapDivHeight}\r\n                position={this.mobileMapWidgetsPosition}\r\n                ref={this._mobMapTools}\r\n                selectedLayer={this.selectedLayer}\r\n                selectedWebMapId={this._selectedWebMapId}\r\n                showOnlyUpdatableLayers={this.showOnlyUpdatableLayers}\r\n                stackTools={this.stackTools}\r\n                toolOrder={this.mobileToolsOrder}\r\n              />\r\n            </>\r\n          }\r\n        </calcite-panel>\r\n      </>\r\n    );\r\n  }\r\n\r\n  /** Called each time after the component is loaded */\r\n  override updated(): void {\r\n    this._mapDivHeight = this._mapDiv.value?.offsetHeight ?? 0;\r\n    document.onclick = e => this._handleDocumentClick(e);\r\n  }\r\n\r\n  /** Called once after the component is loaded */\r\n  loaded(): void {\r\n    if (this._mapDiv.value) {\r\n      this._mapSizeObserver?.observe(this._mapDiv.value);\r\n    }\r\n    this._updateShareUrl();\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Functions (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Load the webmap for the provided webMapInfo\r\n   *\r\n   * @param webMapInfo the webmap id and name to load\r\n   */\r\n  private async _loadMap(\r\n    webMapInfo: IMapInfo\r\n  ): Promise<void> {\r\n    // on the first render use the default webmap id if provided otherwise use the first child of the provided mapInfos\r\n    const loadDefaultMap = !this._defaultWebmapHonored && this.defaultWebmapId;\r\n    const defaultMap = this.mapInfos?.filter(i => i.id === this.defaultWebmapId);\r\n\r\n    const mapConfigChanged = JSON.stringify(webMapInfo) !== JSON.stringify(this._webMapInfo);\r\n\r\n    this._webMapInfo = loadDefaultMap && defaultMap ? defaultMap[0] : !webMapInfo?.id && this.mapInfos.length > 0 ? this.mapInfos[0] : webMapInfo;\r\n\r\n    const id = this._webMapInfo.id;\r\n    const isDefaultMap = loadDefaultMap && webMapInfo?.id === this.defaultWebmapId;\r\n\r\n    if ((this._loadedId !== id && !loadDefaultMap) || isDefaultMap) {\r\n      const webMap = new WebMap({\r\n        portalItem: { id },\r\n      });\r\n      try {\r\n        if (webMap) {\r\n          await webMap.load();\r\n        }\r\n        if (this.appProxies && webMap) {\r\n          await joinAppProxies(webMap, config, this.appProxies);\r\n        }\r\n        this.mapView = new MapView({\r\n          container: this._mapDiv.value,\r\n          map: webMap as any,\r\n          resizeAlign: 'center',\r\n        });\r\n\r\n        this._loadedId = id;\r\n        this._searchConfiguration = this._webMapInfo.searchConfiguration;\r\n\r\n        this.beforeMapChanged.emit();\r\n\r\n        this.mapView && await this.mapView.when(() => {\r\n          if (this.mapView) {\r\n            const widthToDeduct = this.isMobile ? 160 : 110;\r\n            this._mapDivWidth = this._mapDiv.value && this._mapDiv.value.offsetWidth - widthToDeduct;\r\n            if (this._mapTools.value) {\r\n              this.mapView.ui.add(this._mapTools.value, { position: this.mapWidgetsPosition, index: this.mapWidgetsIndex });\r\n            }\r\n            if (this._mobMapTools.value) {\r\n              this.mapView.ui.add(this._mobMapTools.value, { position: this.mobileMapWidgetsPosition, index: this.mapWidgetsIndex });\r\n            }\r\n            this._defaultWebmapHonored = isDefaultMap ? true : this._defaultWebmapHonored;\r\n            this._isValidWebMap = true;\r\n            this.mapChanged.emit({\r\n              id: id,\r\n              mapView: this.mapView,\r\n              isValid: true\r\n            });\r\n            if (!this.isMobile) {\r\n              document.getElementsByClassName('esri-zoom')[0]?.classList.remove('display-none')\r\n            }\r\n          }\r\n        });\r\n      } catch (err) {\r\n        console.error(err);\r\n        this._loadedId = id;\r\n        this._isValidWebMap = false;\r\n        this.mapChanged.emit({\r\n          id,\r\n          mapView: undefined,\r\n          isValid: false\r\n        });\r\n        // hide zoom tools in case of invalid web map\r\n        document.getElementsByClassName('esri-zoom')[0]?.classList.add('display-none')\r\n        return;\r\n      }\r\n    } else if (loadDefaultMap) {\r\n      this._defaultWebmapHonored = true;\r\n      if (this._mapPicker.value) {\r\n        void this._mapPicker.value.setMapByID(id);\r\n      }\r\n    } else if (mapConfigChanged && this.mapView) {\r\n      // Map is the same so no need to reload but we need to update for any changes from the config\r\n      this._searchConfiguration = this._webMapInfo.searchConfiguration;\r\n      this.beforeMapChanged.emit();\r\n      this.mapChanged.emit({\r\n        id: id,\r\n        mapView: this.mapView,\r\n        isValid: true\r\n      });\r\n    }\r\n    this._updateShareUrl();\r\n  }\r\n\r\n  /**\r\n   * Renders the map layer picker UI component(s) based on the current layout and device type.\r\n   *\r\n   * @private\r\n   * @returns {JsxNode} The JSX node containing the map layer picker UI elements.\r\n   */\r\n  private _getMapLayerPicker(): JsxNode {\r\n    const slot = this.isMapLayout ? 'header-actions-start' : '';\r\n    const mapPickerClass = this.mapInfos?.length > 1 ? '' : 'display-none';\r\n    const width = this.isMapLayout ? 'height-0' : 'width-full';\r\n    const containerClass = 'display-flex';\r\n    const headerElements = this.isMapLayout ? '' : 'display-none';\r\n    return (\r\n      <>\r\n        {!this.isMobile && <div slot={slot}>\r\n          <map-picker\r\n            class={`${mapPickerClass} ${width}`}\r\n            id='map-picker'\r\n            isMapLayout={this.isMapLayout}\r\n            mapInfos={this.mapInfos}\r\n            ref={this._mapPicker}\r\n            selectedWebMapId={this._selectedWebMapId}\r\n          />\r\n        </div>\r\n        }\r\n        <div slot='header-actions-start'\r\n          class={`mapView-header display-flex ${headerElements}`}\r\n          id='solutions-map-layer-picker-container'\r\n        >\r\n          <div class={`border-end ${containerClass}`}>\r\n            {this.mapView && (\r\n              <map-layer-picker\r\n                appearance='transparent'\r\n                configLayerOrderDefined={this._configLayerOrderDefined}\r\n                defaultLayerId={this.defaultLayerId}\r\n                display='inline-flex'\r\n                enabledLayerIds={this._enabledLayerIds}\r\n                height={50}\r\n                isMobile={this.isMobile}\r\n                mapView={this.mapView}\r\n                showOnlyUpdatableLayers={this.showOnlyUpdatableLayers}\r\n                placeholderIcon='layers'\r\n                ref={this._mapLayerPicker}\r\n                scale='l'\r\n                selectedIds={this.selectedLayer ? [this.selectedLayer.id] : []}\r\n                showSingleLayerAsLabel={true}\r\n                showTables={true}\r\n                showTablesDisabled={true}\r\n                type='dropdown'\r\n              />\r\n            )}\r\n          </div>\r\n        </div>\r\n      </>\r\n    )\r\n  }\r\n\r\n  /**\r\n   * Gets a row of controls that can be used for various interactions with the table\r\n   *\r\n   * @returns The dom node that contains the controls\r\n   * @private\r\n   */\r\n  private _getHeaderActions(): JsxNode {\r\n    const containerClass = 'display-flex';\r\n    return (\r\n      <div slot={'header-content'}>\r\n        <calcite-action-bar\r\n          class={containerClass}\r\n          expandDisabled={true}\r\n          expanded={true}\r\n          id={this._getId('bar')}\r\n          layout='horizontal'\r\n        >\r\n          <calcite-action-group>\r\n            {this.isMapLayout ? this._getActions() : undefined}\r\n          </calcite-action-group>\r\n        </calcite-action-bar>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Get an action and tooltip for share\r\n   *\r\n   * @param icon string the name of the icon to display, will also be used in its id\r\n   * @returns VNode The node representing the DOM element that will contain the action\r\n   */\r\n  private _getShare(icon: string): JsxNode {\r\n    return (\r\n      <div\r\n        class='share-action'\r\n        id={this._getId(icon)}\r\n      >\r\n        {this.mapView && (\r\n          <instant-apps-social-share\r\n            class='instant-app-share'\r\n            embed={this.shareIncludeEmbed}\r\n            flipRtl={true}\r\n            popoverButtonIconScale='s'\r\n            ref={(el: HTMLInstantAppsSocialShareElement | undefined) => {\r\n              if (el) {\r\n                this._shareNode = el;\r\n                this._updateShareUrl();\r\n              }\r\n            }}\r\n            scale='m'\r\n            shareButtonColor='neutral'\r\n            shareButtonType='action'\r\n            socialMedia={this.shareIncludeSocial}\r\n            view={this.mapView}\r\n          />\r\n        )}\r\n\r\n        {this._getToolTip('bottom', `map-${icon}`, this._translations?.share)}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  /** Called each time the values that are used for custom url params change */\r\n  private _updateShareUrl(): void {\r\n    const url = this._shareNode?.shareUrl;\r\n    if (!url) {\r\n      return;\r\n    }\r\n    const urlObj = new URL(url);\r\n\r\n    //set the additional search params\r\n    if (this._loadedId) {\r\n      urlObj.searchParams.set('webmap', this._loadedId);\r\n    } else {\r\n      urlObj.searchParams.delete('webmap');\r\n    }\r\n\r\n    if (this.selectedLayer?.id) {\r\n      urlObj.searchParams.set('layer', this.selectedLayer.id);\r\n    } else {\r\n      urlObj.searchParams.delete('layer');\r\n    }\r\n\r\n    if (this.selectedFeaturesIds?.length > 0) {\r\n      urlObj.searchParams.set('oid', this.selectedFeaturesIds.join(','));\r\n    } else {\r\n      urlObj.searchParams.delete('oid');\r\n    }\r\n\r\n    if (this.appLayout) {\r\n      urlObj.searchParams.set('applayout', this.appLayout);\r\n    }\r\n\r\n    if (this._shareNode) {\r\n      this._shareNode.autoUpdateShareUrl = false;\r\n      this._shareNode.shareUrl = urlObj.href;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get the full list of toolInfos.\r\n   * Order is important. They should be listed in the order they should display in the UI from\r\n   * Left to Right for the action bar and Top to Bottom for the dropdown.\r\n   *\r\n   * @private\r\n   */\r\n  private _initToolInfos(): void {\r\n    const featuresSelected = this.selectedFeaturesIds.length > 0;\r\n    const multipleEditsDisabled = this.selectedFeaturesIds.length < 2 || this.selectedFeaturesIds.length > BATCH_EDIT_LIMIT;\r\n    const showMultipleEdits = this.featureSelectionMode === 'multiple' && this.selectedLayer?.capabilities?.operations.supportsUpdate;\r\n    const toolInfos: IToolInfo[] = [];\r\n    toolInfos.push({\r\n      active: false,\r\n      icon: 'filter',\r\n      indicator: false,\r\n      label: this._translations.filters,\r\n      func: () => void this._toggleFilter(),\r\n      disabled: false,\r\n      toolTip: this._translations.filters,\r\n    });\r\n\r\n    toolInfos.push({\r\n      active: false,\r\n      icon: 'zoom-to-object',\r\n      indicator: false,\r\n      label: this._translations.zoom,\r\n      func: () => void this._zoom(),\r\n      disabled: !featuresSelected,\r\n      toolTip: this._translations.zoom\r\n    });\r\n\r\n    if (showMultipleEdits) {\r\n      toolInfos.push({\r\n        active: false,\r\n        icon: 'pencil',\r\n        indicator: false,\r\n        label: this._translations.editMultiple,\r\n        func: () => this.editMultipleFeatures.emit(this.selectedFeaturesIds),\r\n        disabled: multipleEditsDisabled,\r\n        toolTip: this._translations.editMultiple\r\n      });\r\n    }\r\n    toolInfos.push({\r\n      active: false,\r\n      icon: 'refresh',\r\n      indicator: false,\r\n      label: this._translations.refresh,\r\n      func: () => this.selectedLayer?.refresh(),\r\n      disabled: false,\r\n      toolTip: this._translations.refresh\r\n    });\r\n    toolInfos.push({\r\n      active: false,\r\n      icon: 'erase',\r\n      indicator: false,\r\n      label: this._translations.clearSelection,\r\n      func: () => this.clearSelection.emit(),\r\n      disabled: !featuresSelected,\r\n      toolTip: this._translations.clearSelection\r\n    });\r\n    this._toolInfos = [...toolInfos];\r\n  }\r\n\r\n  /**\r\n   * Update actions active prop based on a stored value\r\n   *\r\n   * @private\r\n   */\r\n  private _validateActiveActions(): void {\r\n    const activeDependant = ['filter'];\r\n    this._toolInfos?.forEach(ti => {\r\n      if (ti && activeDependant.indexOf(ti.icon) > -1) {\r\n        if (ti.icon === 'filter') {\r\n          ti.indicator = this._filterActive;\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Handles map visibility\r\n   */\r\n  private _handleMapVisibility(): void {\r\n    if (this._mapDiv.value) {\r\n      const mapSurface = this._mapDiv.value.getElementsByClassName('esri-view-surface')[0];\r\n      const attribution = this._mapDiv.value.getElementsByClassName('esri-attribution')[0];\r\n      if (!this._isValidWebMap) {\r\n        mapSurface?.classList.add('hidden');\r\n        attribution?.classList.add('hidden');\r\n      } else {\r\n        mapSurface?.classList.remove('hidden');\r\n        attribution?.classList.remove('hidden');\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Update actions enabled prop based on number of selected indexes\r\n   *\r\n   * @private\r\n   */\r\n  private _validateEnabledActions(): void {\r\n    const featuresSelected = this.selectedFeaturesIds.length > 0;\r\n    const multipleEditsDisabled = this.selectedFeaturesIds.length < 2 || this.selectedFeaturesIds.length > BATCH_EDIT_LIMIT;\r\n    const selectionDependant = ['zoom-to-object', 'pencil', 'erase'];\r\n    this._toolInfos?.forEach(ti => {\r\n      if (ti && selectionDependant.indexOf(ti.icon) > -1) {\r\n        // disable the pencil icon if multiple features are not selected\r\n        // For other icons disable them if any feature is not selected\r\n        ti.disabled = ti.icon === 'pencil' ? multipleEditsDisabled : !featuresSelected;\r\n        // if more than 500 features are selected, show a limit tooltip otherwise show the default tooltip for multiple edits\r\n        ti.toolTip = ti.icon === 'pencil' ? this.selectedFeaturesIds.length > BATCH_EDIT_LIMIT ? this._translations.featureEditLimitNotice : this._translations.editMultiple : ti.toolTip;\r\n\r\n      }\r\n    });\r\n  }\r\n\r\n\r\n  /** Close show/hide dropdown when the user clicks outside of it */\r\n  private _handleDocumentClick(e: MouseEvent): void {\r\n    // TODO evaluate...this was causing the list to remain open in some cases\r\n    // if clicked on map picker then toggle the dropdown\r\n    // if ((e.target as any).tagName === 'MAP-PICKER') {\r\n    // this._mapListExpanded = !this._mapListExpanded;\r\n    // this._mapPicker.value && void this._mapPicker.value.toggle(this._mapListExpanded);\r\n    // }\r\n    // if clicked on other place then just close the dropdown\r\n    if ((e.target as any).tagName !== 'MAP-PICKER') {\r\n      this._mapPicker.value && void this._mapPicker.value.close();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Zoom to all selected features\r\n   *\r\n   * @returns a promise that will resolve when the operation is complete\r\n   */\r\n  private async _zoom(): Promise<void> {\r\n    if (this.selectedLayer && this.mapView) {\r\n      const selectedLayerView = await getFeatureLayerView(this.mapView, this.selectedLayer.id);\r\n      if (selectedLayerView) {\r\n        await goToSelection(this.selectedFeaturesIds, selectedLayerView, this.mapView, true, undefined, this.zoomToScale);\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * toggle the filter\r\n   *\r\n   * @private\r\n   */\r\n  private async _toggleFilter(): Promise<void> {\r\n    this.toggleFilter.emit();\r\n  }\r\n\r\n  /**\r\n   * Get the actions that are used for various interactions with the table\r\n   *\r\n   * @returns VNode[] the action nodes\r\n   */\r\n  private _getActions(): JsxNode {\r\n    return this._toolInfos?.reduce((prev, cur) => {\r\n      if (cur) {\r\n        prev.push(\r\n          this._getAction(\r\n            cur.active,\r\n            cur.icon,\r\n            cur.indicator,\r\n            cur.label,\r\n            cur.func,\r\n            cur.disabled,\r\n            cur.loading,\r\n            cur.toolTip\r\n          )\r\n        );\r\n      }\r\n      return prev;\r\n    }, [] as any);\r\n  }\r\n\r\n  /**\r\n   * Get a tooltip\r\n   *\r\n   * @param placement string where the tooltip should display\r\n   * @param referenceElement string the element the tooltip will be associated with\r\n   * @param text string the text to display in the tooltip\r\n   * @returns VNode The tooltip node\r\n   */\r\n  private _getToolTip(\r\n    placement: TooltipPlacement,\r\n    referenceElement: string,\r\n    text: string\r\n  ): JsxNode {\r\n    return (\r\n      <calcite-tooltip placement={placement} referenceElement={referenceElement}>\r\n        <span>{text}</span>\r\n      </calcite-tooltip>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Get an action and tooltip\r\n   *\r\n   * @param active boolean if true the icon is in use\r\n   * @param icon HTMLCalciteIconElement['icon'] the name of the icon to display, will also be used as the id\r\n   * @param indicator if true the icon will shown using indicator\r\n   * @param label string the text to display and label the action\r\n   * @param func any the function to execute\r\n   * @param disabled boolean when true the user will not be able to interact with the action\r\n   * @param loading if true loading indicator will shown\r\n   * @param slot slot for the action\r\n   * @returns VNode The node representing the DOM element that will contain the action\r\n   */\r\n  private _getAction(\r\n    active: boolean,\r\n    icon: HTMLCalciteIconElement['icon'],\r\n    indicator: boolean,\r\n    label: string,\r\n    func: any,\r\n    disabled: boolean,\r\n    loading: boolean | undefined,\r\n    toolTip: string\r\n  ): JsxNode {\r\n    const _disabled = this.selectedLayer === undefined ? true : disabled;\r\n    return (\r\n      <>\r\n        <calcite-action\r\n          active={active}\r\n          appearance='solid'\r\n          disabled={_disabled}\r\n          icon={icon}\r\n          id={`map-${icon}`}\r\n          indicator={indicator}\r\n          label={label}\r\n          loading={loading}\r\n          onClick={func}\r\n          text={label}\r\n          textEnabled={true}\r\n        />\r\n        {this._getToolTip('auto', `map-${icon}`, toolTip)}\r\n      </>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Get an id with a prefix to the user supplied value\r\n   *\r\n   * @param id the unique value for the id\r\n   * @returns the new id with the prefix value\r\n   */\r\n  private _getId(\r\n    id: string\r\n  ): string {\r\n    return `solutions-action-${id}`;\r\n  }\r\n}\r\n"],"names":["ref$jsx"],"mappings":"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"}

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

@@ -26,15 +26,15 @@ export declare class MapDrawTools extends LitElement {
      * @default true
      */
     editGraphicsEnabled: boolean;
-    /** esri/Graphic: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html */
+    /** esri/Graphic: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-Graphic.html */
     graphics: __esri.Graphic[];
-    /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
+    /** esri/views/View: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
     mapView: __esri.MapView | undefined;
-    /** esri/symbols/SimpleMarkerSymbol: https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleMarkerSymbol.html */
+    /** esri/symbols/SimpleMarkerSymbol: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleMarkerSymbol.html */
     pointSymbol: __esri.SimpleMarkerSymbol | undefined;
-    /** esri/symbols/SimpleLineSymbol: https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleLineSymbol.html */
+    /** esri/symbols/SimpleLineSymbol: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleLineSymbol.html */
     polylineSymbol: __esri.SimpleLineSymbol | undefined;
-    /** esri/symbols/SimpleFillSymbol: https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleFillSymbol.html */
+    /** esri/symbols/SimpleFillSymbol: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleFillSymbol.html */
     polygonSymbol: __esri.SimpleFillSymbol | undefined;
     /**
      * boolean: when eanbled the user can redo the previous operation

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

@@ -1,18 +1,19 @@
-import { c } from "../../chunks/runtime.js";
-import { f as o } from "../../chunks/interfaces.js";
-import { u as l } from "../../chunks/useT9n.js";
-import { css as n, html as d } from "lit";
-import { createRef as p, ref as g } from "lit-html/directives/ref.js";
-import { LitElement as m, createEvent as h, noShadowRoot as f, safeClassMap as r } from "@arcgis/lumina";
-import { useContextConsumer as y } from "@arcgis/lumina/context";
-import { p as w } from "../../chunks/publicNotificationContext.js";
-import _ from "@arcgis/core/layers/GraphicsLayer";
-import k from "@arcgis/core/widgets/Sketch/SketchViewModel";
-import u from "@arcgis/core/widgets/Sketch";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.56 */
-const b = n`@layer{/** @license
+v1.2.0-next.58 */
+import { c as customElement } from "../../chunks/runtime.js";
+import { f as EDrawMode } from "../../chunks/interfaces.js";
+import { u as useT9n } from "../../chunks/useT9n.js";
+import { css, html } from "lit";
+import { createRef, ref } from "lit-html/directives/ref.js";
+import { LitElement, createEvent, noShadowRoot, safeClassMap } from "@arcgis/lumina";
+import { useContextConsumer } from "@arcgis/lumina/context";
+import { p as pnContext } from "../../chunks/publicNotificationContext.js";
+import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
+import SketchViewModel from "@arcgis/core/widgets/Sketch/SketchViewModel";
+import Sketch from "@arcgis/core/widgets/Sketch";
+const styles = css`@layer{
+/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -26,31 +27,105 @@ const b = n`@layer{/** @license
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */: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 v extends m {
+ */
+
+:host {
+  display: block;
+}
+
+.border {
+  outline: 1px solid var(--calcite-color-border-input);
+}
+
+.border-left {
+  border-left: 1px solid rgba(110, 110, 110, 0.3);
+}
+
+.border-left[dir='rtl'] {
+  border-right: 1px solid rgba(110, 110, 110, 0.3);
+}
+
+/* from js api */
+.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 MapDrawTools extends LitElement {
   constructor() {
-    super(...arguments), this.active = !1, this.drawMode = o.SKETCH, this.editGraphicsEnabled = !0, this.graphics = [], this.redoEnabled = !1, this.undoEnabled = !1, this._translations = l({ name: "map-draw-tools", blocking: !0 }), this._pnContextConsumer = y({
-      context: w,
-      subscribe: !0
-    }), this._sketchElement = p(), this.selectionLoadingChange = h(), this.sketchGraphicsChange = h(), this.drawUndo = h(), this.drawRedo = h();
+    super(...arguments);
+    this.active = false;
+    this.drawMode = EDrawMode.SKETCH;
+    this.editGraphicsEnabled = true;
+    this.graphics = [];
+    this.redoEnabled = false;
+    this.undoEnabled = false;
+    this._translations = useT9n({ name: "map-draw-tools", blocking: true });
+    this._pnContextConsumer = useContextConsumer({
+      context: pnContext,
+      subscribe: true
+    });
+    this._sketchElement = createRef();
+    this.selectionLoadingChange = createEvent();
+    this.sketchGraphicsChange = createEvent();
+    this.drawUndo = createEvent();
+    this.drawRedo = createEvent();
   }
   static {
-    this.properties = { active: 5, drawMode: 0, editGraphicsEnabled: 5, graphics: 0, mapView: 0, pointSymbol: 0, polylineSymbol: 0, polygonSymbol: 0, redoEnabled: 5, undoEnabled: 5, _translations: 16, _selectionMode: 16 };
+    this.properties = { active: [5, {}, { type: Boolean }], drawMode: [0, {}, { attribute: false }], editGraphicsEnabled: [5, {}, { type: Boolean }], graphics: [0, {}, { attribute: false }], mapView: [0, {}, { attribute: false }], pointSymbol: [0, {}, { attribute: false }], polylineSymbol: [0, {}, { attribute: false }], polygonSymbol: [0, {}, { attribute: false }], redoEnabled: [5, {}, { type: Boolean }], undoEnabled: [5, {}, { type: Boolean }], _translations: [16, {}, { state: true }], _selectionMode: [16, {}, { state: true }] };
   }
   static {
-    this.styles = b;
+    this.styles = styles;
   }
   static {
-    this.shadowRootOptions = f;
+    this.shadowRootOptions = noShadowRoot;
   }
-  willUpdate(e) {
-    e.has("graphics") && this.graphicsWatchHandler(this.graphics, e.get("graphics")), e.has("mapView") && this.mapView && this.mapViewWatchHandler(this.mapView, e.get("mapView"));
+  willUpdate(changes) {
+    if (changes.has("graphics")) {
+      this.graphicsWatchHandler(this.graphics, changes.get("graphics"));
+    }
+    if (changes.has("mapView") && this.mapView) {
+      this.mapViewWatchHandler(this.mapView, changes.get("mapView"));
+    }
   }
-  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));
+  graphicsWatchHandler(v, oldV) {
+    if (v && v.length > 0 && JSON.stringify(v) !== JSON.stringify(oldV) && this._sketchGraphicsLayer) {
+      this._updateGraphicsSymbols(v);
+      this._sketchGraphicsLayer.removeAll();
+      this._sketchGraphicsLayer.addMany(v);
+    }
   }
-  mapViewWatchHandler(e, t) {
-    e && e !== t && this._init();
+  mapViewWatchHandler(v, oldV) {
+    if (v && v !== oldV) {
+      this._init();
+    }
   }
   async clear() {
     this._clearSketch();
@@ -62,100 +137,155 @@ class v extends m {
     this._init();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this._sketchWidget?.cancel(), this._clearSketch();
+    super.disconnectedCallback();
+    this._sketchWidget?.cancel();
+    this._clearSketch();
   }
   render() {
-    const e = this.drawMode === o.SKETCH ? "border" : "border esri-widget esri-sketch__panel", t = this.drawMode === o.SKETCH ? "display-none" : "esri-widget esri-sketch__panel border-left esri-sketch__section";
-    return d`<div class=${r(e)}><div ${g(this._sketchElement)}></div><div class=${r(t)}><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 containerClass = this.drawMode === EDrawMode.SKETCH ? "border" : "border esri-widget esri-sketch__panel";
+    const undoRedoClass = this.drawMode === EDrawMode.SKETCH ? "display-none" : "esri-widget esri-sketch__panel border-left esri-sketch__section";
+    return html`<div class=${safeClassMap(containerClass)}><div ${ref(this._sketchElement)}></div><div class=${safeClassMap(undoRedoClass)}><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>`;
   }
   _init() {
-    this.mapView && this._sketchElement.value && (this._initGraphicsLayer(), this._initSketch());
+    if (this.mapView && this._sketchElement.value) {
+      this._initGraphicsLayer();
+      this._initSketch();
+    }
   }
   _initGraphicsLayer() {
-    const e = this._pnContextConsumer.value, t = this._translations.sketchLayer;
+    const _state = this._pnContextConsumer.value;
+    const title = this._translations.sketchLayer;
     if (this.mapView) {
-      const s = this.mapView.map.layers.findIndex((i) => i.title === t);
-      s > -1 ? this._sketchGraphicsLayer = this.mapView.map.layers.getItemAt(s) : (this._sketchGraphicsLayer = new _({ 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);
+      const sketchIndex = this.mapView.map.layers.findIndex((l) => l.title === title);
+      if (sketchIndex > -1) {
+        this._sketchGraphicsLayer = this.mapView.map.layers.getItemAt(sketchIndex);
+      } else {
+        this._sketchGraphicsLayer = new GraphicsLayer({ title, listMode: "hide" });
+        if (this._sketchGraphicsLayer) {
+          _state.managedLayers[title] = "sketch";
+          this.mapView.map.layers.add(this._sketchGraphicsLayer);
+        }
+      }
+      if (this.graphics && this.graphics.length > 0 && this._sketchGraphicsLayer) {
+        this._sketchGraphicsLayer.addMany(this.graphics);
+      }
     }
   }
   _initSketch() {
-    const e = {
+    const sketchOptions = {
       layer: this._sketchGraphicsLayer,
       view: this.mapView,
       defaultCreateOptions: {
         mode: "hybrid"
       },
       defaultUpdateOptions: {
-        preserveAspectRatio: !1,
-        enableScaling: !1,
-        enableRotation: !1,
+        preserveAspectRatio: false,
+        enableScaling: false,
+        enableRotation: false,
         tool: "reshape",
-        toggleToolOnClick: !1
+        toggleToolOnClick: false
       }
     };
-    if (this._sketchWidget = new u({
-      ...e,
+    this._sketchWidget = new Sketch({
+      ...sketchOptions,
       container: this._sketchElement.value,
       creationMode: "single",
       toolbarKind: "docked",
       visibleElements: {
-        duplicateButton: !1,
+        duplicateButton: false,
         selectionTools: {
-          "lasso-selection": !1,
-          "rectangle-selection": !1
+          "lasso-selection": false,
+          "rectangle-selection": false
         },
         createTools: {
-          circle: !1
+          circle: false
         },
-        undoRedoMenu: !1,
-        settingsMenu: this.drawMode === o.SKETCH
+        undoRedoMenu: false,
+        settingsMenu: this.drawMode === EDrawMode.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");
+    });
+    if (this._sketchWidget && this._sketchWidget.viewModel) {
+      this._sketchViewModel = new SketchViewModel({
+        ...sketchOptions
       });
-      let t = !1;
-      this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("create", (i) => {
-        i.state === "complete" && (this.graphics = i.graphic ? [i.graphic] : [], this.sketchGraphicsChange.emit({
-          graphics: this.graphics,
-          useOIDs: !1
-        }), this.drawMode === o.REFINE && (t = !0, this._sketchWidget?.viewModel.create(i.tool))), i.state === "cancel" && this.drawMode === o.REFINE && t && (t = !t, this._sketchWidget?.viewModel.create(i.tool));
+      if (this.polylineSymbol) {
+        this._sketchWidget.viewModel.polylineSymbol = this.polylineSymbol;
+      }
+      if (this.pointSymbol) {
+        this._sketchWidget.viewModel.pointSymbol = this.pointSymbol;
+      }
+      if (this.polygonSymbol) {
+        this._sketchWidget.viewModel.polygonSymbol = this.polygonSymbol;
+      }
+      void this._sketchWidget?.when(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+        const settingsMenuPopover = this._sketchElement.value?.getElementsByTagName("calcite-popover")[0];
+        settingsMenuPopover?.setAttribute("placement", "auto");
+      });
+      let forceCreate = false;
+      this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("create", (_evt) => {
+        if (_evt.state === "complete") {
+          this.graphics = _evt.graphic ? [_evt.graphic] : [];
+          this.sketchGraphicsChange.emit({
+            graphics: this.graphics,
+            useOIDs: false
+          });
+          if (this.drawMode === EDrawMode.REFINE) {
+            forceCreate = true;
+            this._sketchWidget?.viewModel.create(_evt.tool);
+          }
+        }
+        if (_evt.state === "cancel" && this.drawMode === EDrawMode.REFINE && forceCreate) {
+          forceCreate = !forceCreate;
+          this._sketchWidget?.viewModel.create(_evt.tool);
+        }
       }));
-      let s;
-      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 === "move" || a === "reshape-stop" || a === "move-stop") && (clearTimeout(s), s = window.setTimeout(async () => {
-            this.graphics = i.graphics, this.sketchGraphicsChange.emit({
-              graphics: this.graphics,
-              useOIDs: !1
-            });
-          }, 1e3));
+      let debounceTimer;
+      this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("update", (_evt) => {
+        if (!this.editGraphicsEnabled) {
+          this._sketchWidget?.viewModel.cancel();
+          this._sketchViewModel?.cancel();
+        } else {
+          const eventType = _evt?.toolEventInfo?.type;
+          if (eventType === "move" || eventType === "reshape-stop" || eventType === "move-stop") {
+            clearTimeout(debounceTimer);
+            debounceTimer = window.setTimeout(async () => {
+              this.graphics = _evt.graphics;
+              this.sketchGraphicsChange.emit({
+                graphics: this.graphics,
+                useOIDs: false
+              });
+            }, 1e3);
+          }
         }
-      })), this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("delete", () => {
-        this.graphics = [], this.sketchGraphicsChange.emit({
+      }));
+      this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("delete", () => {
+        this.graphics = [];
+        this.sketchGraphicsChange.emit({
           graphics: this.graphics,
-          useOIDs: !1
+          useOIDs: false
         });
-      })), this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("undo", (i) => {
-        this.graphics = i.graphics, this.sketchGraphicsChange.emit({
+      }));
+      this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("undo", (_evt) => {
+        this.graphics = _evt.graphics;
+        this.sketchGraphicsChange.emit({
           graphics: this.graphics,
-          useOIDs: !1
+          useOIDs: false
         });
-      })), this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("redo", (i) => {
-        this.graphics = i.graphics, this.sketchGraphicsChange.emit({
+      }));
+      this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("redo", (_evt) => {
+        this.graphics = _evt.graphics;
+        this.sketchGraphicsChange.emit({
           graphics: this.graphics,
-          useOIDs: !1
+          useOIDs: false
         });
       }));
     }
   }
   _clearSketch() {
-    this._sketchWidget?.viewModel.cancel(), this.graphics = [], this._sketchGraphicsLayer?.removeAll();
+    this._sketchWidget?.viewModel.cancel();
+    this.graphics = [];
+    this._sketchGraphicsLayer?.removeAll();
   }
   _undo() {
     this.drawUndo.emit();
@@ -165,21 +295,28 @@ class v extends m {
   }
   _updateGraphics() {
     setTimeout(() => {
-      this.graphics.length === 1 && this._sketchWidget && this._sketchWidget.update(this.graphics, {
-        tool: "reshape",
-        enableRotation: !1,
-        enableScaling: !1,
-        preserveAspectRatio: !1,
-        toggleToolOnClick: !1
-      });
+      if (this.graphics.length === 1 && this._sketchWidget) {
+        void this._sketchWidget.update(this.graphics, {
+          tool: "reshape",
+          enableRotation: false,
+          enableScaling: false,
+          preserveAspectRatio: false,
+          toggleToolOnClick: false
+        });
+      }
     }, 100);
   }
-  _updateGraphicsSymbols(e) {
-    const s = e[0]?.geometry?.type, i = s === "point" ? this.pointSymbol : s === "polyline" ? this.polylineSymbol : s === "polygon" ? this.polygonSymbol : void 0;
-    i && e.forEach((a) => a.symbol = i);
+  _updateGraphicsSymbols(graphics) {
+    const graphic = graphics[0];
+    const type = graphic?.geometry?.type;
+    const symbol = type === "point" ? this.pointSymbol : type === "polyline" ? this.polylineSymbol : type === "polygon" ? this.polygonSymbol : void 0;
+    if (symbol) {
+      graphics.forEach((g) => g.symbol = symbol);
+    }
   }
 }
-c("map-draw-tools", v);
+customElement("map-draw-tools", MapDrawTools);
 export {
-  v as MapDrawTools
+  MapDrawTools
 };
+//# sourceMappingURL=customElement.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"customElement.js","sources":["../../../src/components/map-draw-tools/map-draw-tools.tsx"],"sourcesContent":["/**\r\n * @license\r\n * Copyright 2025 Esri\r\n *\r\n * Licensed under the Apache License, Version 2.0 (the 'License');\r\n * you may not use this file except in compliance with the License.\r\n * You may obtain a copy of the License at\r\n *\r\n *    http://www.apache.org/licenses/LICENSE-2.0\r\n *\r\n * Unless required by applicable law or agreed to in writing, software\r\n * distributed under the License is distributed on an 'AS IS' BASIS,\r\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n * See the License for the specific language governing permissions and\r\n * limitations under the License.\r\n */\r\n\r\nimport type {\r\n  ESelectionType,\r\n  ISketchGraphicsChange\r\n} from '../../utils/interfaces';\r\nimport {\r\n  EDrawMode,\r\n} from '../../utils/interfaces';\r\nimport type T9nStrings from './assets/t9n/messages.en.json';\r\nimport { useT9n } from '../../controllers/useT9n';\r\nimport type { PropertyValues } from 'lit';\r\nimport { createRef } from 'lit-html/directives/ref.js';\r\nimport {\r\n  LitElement,\r\n  property,\r\n  createEvent,\r\n  h,\r\n  method,\r\n  noShadowRoot,\r\n  state,\r\n} from '@arcgis/lumina';\r\nimport type {\r\n  JsxNode,\r\n} from '@arcgis/lumina';\r\nimport { styles } from './map-draw-tools.css';\r\nimport {\r\n  useContextConsumer,\r\n} from '@arcgis/lumina/context';\r\nimport {\r\n  pnContext,\r\n} from '../../utils/publicNotificationContext';\r\nimport GraphicsLayer from '@arcgis/core/layers/GraphicsLayer';\r\nimport SketchViewModel from '@arcgis/core/widgets/Sketch/SketchViewModel';\r\nimport Sketch from '@arcgis/core/widgets/Sketch';\r\n\r\ndeclare global {\r\n  interface DeclareElements {\r\n    'map-draw-tools': MapDrawTools;\r\n  }\r\n}\r\n\r\nexport class MapDrawTools extends LitElement {\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Overrides (internal)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  static override styles = styles;\r\n\r\n  static override shadowRootOptions = noShadowRoot;\r\n\r\n  /** TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code */\r\n  override willUpdate(\r\n    changes: PropertyValues<this>\r\n  ): void {\r\n    if (changes.has('graphics')) {\r\n      this.graphicsWatchHandler(this.graphics, changes.get('graphics'));\r\n    }\r\n\r\n    if (changes.has('mapView') && this.mapView) {\r\n      this.mapViewWatchHandler(this.mapView, changes.get('mapView'));\r\n    }\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** boolean: sketch is used by multiple components...need a way to know who should respond... */\r\n  @property() active = false;\r\n\r\n  /**\r\n   * utils/interfaces: Controls how the draw tools are rendered\r\n   *\r\n   * SKETCH mode supports snapping\r\n   * REFINE mode supports undo/redo\r\n   */\r\n  @property() drawMode: EDrawMode = EDrawMode.SKETCH;\r\n\r\n  /** boolean: when true you will be able to make additional modifications to the sketched geometry */\r\n  @property() editGraphicsEnabled = true;\r\n\r\n  /** esri/Graphic: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html */\r\n  @property() graphics: __esri.Graphic[] = [];\r\n\r\n  /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */\r\n  @property() mapView: __esri.MapView | undefined;\r\n\r\n  /** esri/symbols/SimpleMarkerSymbol: https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleMarkerSymbol.html */\r\n  @property() pointSymbol: __esri.SimpleMarkerSymbol | undefined;\r\n\r\n  /** esri/symbols/SimpleLineSymbol: https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleLineSymbol.html */\r\n  @property() polylineSymbol: __esri.SimpleLineSymbol | undefined;\r\n\r\n  /** esri/symbols/SimpleFillSymbol: https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleFillSymbol.html */\r\n  @property() polygonSymbol: __esri.SimpleFillSymbol | undefined;\r\n\r\n  /** boolean: when eanbled the user can redo the previous operation */\r\n  @property() redoEnabled = false;\r\n\r\n  /** boolean: when eanbled the user can undo the previous operation */\r\n  @property() undoEnabled = false;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  State (internal)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Contains the translations for this component.\r\n   * All UI strings should be defined here.\r\n   */\r\n  @state() _translations = useT9n<typeof T9nStrings>({ name: 'map-draw-tools', blocking: true });\r\n\r\n  /** utils/interfaces/ESelectionType: POINT, LINE, POLY, RECT */\r\n  @state() _selectionMode: ESelectionType | undefined;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** The context consumer for shared PN state */\r\n  private _pnContextConsumer = useContextConsumer({\r\n    context: pnContext,\r\n    subscribe: true,\r\n  });\r\n\r\n  /**\r\n   * esri/layers/GraphicsLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-GraphicsLayer.html\r\n   * The graphics layer used to show selections.\r\n   */\r\n  private _sketchGraphicsLayer: __esri.GraphicsLayer | undefined;\r\n\r\n  /** esri/widgets/Sketch/SketchViewModel: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html */\r\n  private _sketchViewModel: __esri.SketchViewModel | undefined;\r\n\r\n  /** esri/widgets/Sketch: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch.html#constructors-summary */\r\n  private _sketchWidget: __esri.Sketch | undefined;\r\n\r\n  /** The container element for the sketch widget */\r\n  private _sketchElement = createRef<HTMLDivElement>();\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Watch handlers\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Called each time the graphics prop is changed. */\r\n  private graphicsWatchHandler(\r\n    v: __esri.Graphic[],\r\n    oldV?: __esri.Graphic[]\r\n  ): void {\r\n    if (v && v.length > 0 && JSON.stringify(v) !== JSON.stringify(oldV) && this._sketchGraphicsLayer) {\r\n      this._updateGraphicsSymbols(v);\r\n      this._sketchGraphicsLayer.removeAll();\r\n      this._sketchGraphicsLayer.addMany(v);\r\n    }\r\n  }\r\n\r\n  /** Called each time the mapView prop is changed. */\r\n  private mapViewWatchHandler(\r\n    v: __esri.MapView,\r\n    oldV?: __esri.MapView\r\n  ): void {\r\n    if (v && v !== oldV) {\r\n      this._init();\r\n    }\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Methods (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Clears the user drawn graphics\r\n   *\r\n   * @returns Promise that resolves when the operation is complete\r\n   */\r\n  @method()\r\n  async clear(): Promise<void> {\r\n    this._clearSketch();\r\n  }\r\n\r\n  /**\r\n   * Set the sketch widget to update mode with the current graphic\r\n   *\r\n   * @returns Promise that resolves when the operation is complete\r\n   */\r\n  @method()\r\n  async updateGraphics(): Promise<void> {\r\n    this._updateGraphics();\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Events (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Emitted on demand when selection starts or ends. */\r\n  selectionLoadingChange = createEvent<boolean>();\r\n\r\n  /** Emitted on demand when the sketch graphics change. */\r\n  sketchGraphicsChange = createEvent<ISketchGraphicsChange>();\r\n\r\n  /** Emitted on demand when the undo action is clicked. */\r\n  drawUndo = createEvent();\r\n\r\n  /** Emitted on demand when the redo action is clicked. */\r\n  drawRedo = createEvent();\r\n\r\n  /**\r\n   * Called once just after the component is fully loaded and the first render() occurs.\r\n   *\r\n   * @returns Promise when complete\r\n   */\r\n  loaded(): void {\r\n    this._init();\r\n  }\r\n\r\n  /** Invoked each time your component is added to the document's DOM. */\r\n  override disconnectedCallback(): void {\r\n    // cancel any existing create operations\r\n    this._sketchWidget?.cancel();\r\n    // clear any current temp sketch\r\n    this._clearSketch();\r\n  }\r\n\r\n  /** Renders the component. */\r\n  override render(): JsxNode {\r\n    const containerClass = this.drawMode === EDrawMode.SKETCH ? 'border' : 'border esri-widget esri-sketch__panel';\r\n\r\n    const undoRedoClass = this.drawMode === EDrawMode.SKETCH ? 'display-none' : 'esri-widget esri-sketch__panel border-left esri-sketch__section';\r\n\r\n    return (\r\n      <div class={containerClass}>\r\n        <div ref={this._sketchElement} />\r\n        <div class={undoRedoClass}>\r\n          <calcite-action\r\n            appearance='solid'\r\n            disabled={!this.undoEnabled}\r\n            icon='undo'\r\n            onClick={() => this._undo()}\r\n            scale='s'\r\n            text={this._translations.undo}\r\n          />\r\n          <calcite-action\r\n            appearance='solid'\r\n            disabled={!this.redoEnabled}\r\n            icon='redo'\r\n            onClick={() => this._redo()}\r\n            scale='s'\r\n            text={this._translations.redo}\r\n          />\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Functions (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Initialize the graphics layer and the tools that support creating new graphics\r\n   *\r\n   * @private\r\n   */\r\n  private _init(): void {\r\n    if (this.mapView && this._sketchElement.value) {\r\n      this._initGraphicsLayer();\r\n      this._initSketch();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Initialize the graphics layer\r\n   *\r\n   * @returns Promise when the operation has completed\r\n   * @private\r\n   */\r\n  private _initGraphicsLayer(): void {\r\n    const _state = this._pnContextConsumer.value!;\r\n    const title = this._translations.sketchLayer;\r\n    if (this.mapView) {\r\n      const sketchIndex = this.mapView.map!.layers.findIndex(l => l.title === title);\r\n      if (sketchIndex > -1) {\r\n        this._sketchGraphicsLayer = this.mapView.map!.layers.getItemAt(sketchIndex) as __esri.GraphicsLayer;\r\n      } else {\r\n        this._sketchGraphicsLayer = new GraphicsLayer({ title, listMode: 'hide' });\r\n        if (this._sketchGraphicsLayer) {\r\n          _state.managedLayers[title] = 'sketch';\r\n          this.mapView.map!.layers.add(this._sketchGraphicsLayer);\r\n        }\r\n      }\r\n\r\n      if (this.graphics && this.graphics.length > 0 && this._sketchGraphicsLayer) {\r\n        this._sketchGraphicsLayer.addMany(this.graphics);\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Initialize the skecth widget\r\n   *\r\n   * @private\r\n   */\r\n  private _initSketch(): void {\r\n    const sketchOptions: __esri.SketchViewModelProperties | __esri.SketchProperties = {\r\n      layer: this._sketchGraphicsLayer,\r\n      view: this.mapView,\r\n      defaultCreateOptions: {\r\n        mode: 'hybrid',\r\n      },\r\n      defaultUpdateOptions: {\r\n        preserveAspectRatio: false,\r\n        enableScaling: false,\r\n        enableRotation: false,\r\n        tool: 'reshape',\r\n        toggleToolOnClick: false,\r\n      },\r\n    };\r\n    this._sketchWidget = new Sketch({\r\n      ...sketchOptions,\r\n      container: this._sketchElement.value,\r\n      creationMode: 'single',\r\n      toolbarKind: 'docked',\r\n      visibleElements: {\r\n        duplicateButton: false,\r\n        selectionTools: {\r\n          'lasso-selection': false,\r\n          'rectangle-selection': false,\r\n        },\r\n        createTools: {\r\n          circle: false,\r\n        },\r\n        undoRedoMenu: false,\r\n        settingsMenu: this.drawMode === EDrawMode.SKETCH,\r\n      },\r\n    } as any);\r\n\r\n    if (this._sketchWidget && this._sketchWidget.viewModel) {\r\n      this._sketchViewModel = new SketchViewModel({\r\n        ...sketchOptions,\r\n      });\r\n\r\n      if (this.polylineSymbol) {\r\n        this._sketchWidget.viewModel.polylineSymbol = this.polylineSymbol;\r\n      }\r\n      if (this.pointSymbol) {\r\n        this._sketchWidget.viewModel.pointSymbol = this.pointSymbol;\r\n      }\r\n      if (this.polygonSymbol) {\r\n        this._sketchWidget.viewModel.polygonSymbol = this.polygonSymbol;\r\n      }\r\n      void this._sketchWidget?.when(async () => {\r\n        // Wait briefly to ensure the popover is rendered\r\n        await new Promise(resolve => setTimeout(resolve, 50));\r\n        const settingsMenuPopover = this._sketchElement.value?.getElementsByTagName('calcite-popover')[0];\r\n        settingsMenuPopover?.setAttribute('placement', 'auto');\r\n      });\r\n\r\n      let forceCreate = false;\r\n      this._sketchWidget.viewModel.addHandles(\r\n        this._sketchWidget.on('create', _evt => {\r\n          if (_evt.state === 'complete') {\r\n            this.graphics = _evt.graphic ? [_evt.graphic] : [];\r\n            this.sketchGraphicsChange.emit({\r\n              graphics: this.graphics,\r\n              useOIDs: false,\r\n            });\r\n\r\n            if (this.drawMode === EDrawMode.REFINE) {\r\n              // calling create during complete will force the cancel event\r\n              // https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch.html#event-create\r\n              forceCreate = true;\r\n              this._sketchWidget?.viewModel.create(_evt.tool);\r\n            }\r\n          }\r\n\r\n          if (_evt.state === 'cancel' && this.drawMode === EDrawMode.REFINE && forceCreate) {\r\n            forceCreate = !forceCreate;\r\n            this._sketchWidget?.viewModel.create(_evt.tool);\r\n          }\r\n        }));\r\n\r\n      let debounceTimer: number;\r\n      this._sketchWidget.viewModel.addHandles(\r\n        this._sketchWidget.on('update', _evt => {\r\n          if (!this.editGraphicsEnabled) {\r\n            this._sketchWidget?.viewModel.cancel();\r\n            this._sketchViewModel?.cancel();\r\n          } else {\r\n            const eventType = _evt?.toolEventInfo?.type;\r\n            if (eventType === 'move' || eventType === 'reshape-stop' || eventType === 'move-stop') {\r\n              // add a debounce to avoid multiple events\r\n              clearTimeout(debounceTimer);\r\n              // eslint-disable-next-line @typescript-eslint/no-misused-promises\r\n              debounceTimer = window.setTimeout(async () => {\r\n                this.graphics = _evt.graphics;\r\n                this.sketchGraphicsChange.emit({\r\n                  graphics: this.graphics,\r\n                  useOIDs: false,\r\n                });\r\n              }, 1000);\r\n            }\r\n          }\r\n        }));\r\n\r\n      this._sketchWidget.viewModel.addHandles(\r\n        this._sketchWidget.on('delete', () => {\r\n          this.graphics = [];\r\n          this.sketchGraphicsChange.emit({\r\n            graphics: this.graphics,\r\n            useOIDs: false,\r\n          });\r\n        }));\r\n\r\n      this._sketchWidget.viewModel.addHandles(\r\n        this._sketchWidget.on('undo', _evt => {\r\n          this.graphics = _evt.graphics;\r\n          this.sketchGraphicsChange.emit({\r\n            graphics: this.graphics,\r\n            useOIDs: false,\r\n          });\r\n        }));\r\n\r\n      this._sketchWidget.viewModel.addHandles(\r\n        this._sketchWidget.on('redo', _evt => {\r\n          this.graphics = _evt.graphics;\r\n          this.sketchGraphicsChange.emit({\r\n            graphics: this.graphics,\r\n            useOIDs: false,\r\n          });\r\n        }));\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Clear any stored graphics and remove all graphics from the graphics layer\r\n   *\r\n   * @private\r\n   */\r\n  private _clearSketch(): void {\r\n    this._sketchWidget?.viewModel.cancel();\r\n    this.graphics = [];\r\n    this._sketchGraphicsLayer?.removeAll();\r\n  }\r\n\r\n  /**\r\n   * Emit the undo event\r\n   *\r\n   * @private\r\n   */\r\n  private _undo(): void {\r\n    this.drawUndo.emit();\r\n  }\r\n\r\n  /**\r\n   * Emit the undo event\r\n   *\r\n   * @private\r\n   */\r\n  private _redo(): void {\r\n    this.drawRedo.emit();\r\n  }\r\n\r\n  /**\r\n   * Set the sketch widget to update mode with the current graphic\r\n   *\r\n   * reshape tool only supports a single graphic\r\n   *\r\n   * @private\r\n   */\r\n  private _updateGraphics(): void {\r\n    setTimeout(() => {\r\n      if (this.graphics.length === 1 && this._sketchWidget) {\r\n        void this._sketchWidget.update(this.graphics, {\r\n          tool: 'reshape',\r\n          enableRotation: false,\r\n          enableScaling: false,\r\n          preserveAspectRatio: false,\r\n          toggleToolOnClick: false,\r\n        });\r\n      }\r\n    }, 100);\r\n  }\r\n\r\n  /**\r\n   * Any time graphics are added update the symbology so they will always be consistent\r\n   * regardless of where they are from.\r\n   * https://github.com/Esri/solutions-components/issues/246\r\n   *\r\n   * reshape tool only supports a single graphic\r\n   *\r\n   * @private\r\n   */\r\n  private _updateGraphicsSymbols(\r\n    graphics: __esri.Graphic[]\r\n  ): void {\r\n    // graphics will only be of one gemetry type\r\n    const graphic = graphics[0];\r\n    const type = graphic?.geometry?.type;\r\n    const symbol = type === 'point' ? this.pointSymbol : type === 'polyline' ? this.polylineSymbol : type === 'polygon' ? this.polygonSymbol : undefined;\r\n    if (symbol) {\r\n      graphics.forEach(g => (g.symbol = symbol));\r\n    }\r\n  }\r\n}\r\n"],"names":["ref$jsx"],"mappings":"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"}