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

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

@@ -0,0 +1 @@
+{"version":3,"file":"customElement.js","sources":["../../../src/components/map-tools/map-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 T9nStrings from './assets/t9n/messages.en.json';\r\nimport type {\r\n  IBasemapConfig,\r\n  IMapInfo,\r\n  ISearchConfiguration\r\n} from '../../utils/interfaces';\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  Fragment,\r\n  h,\r\n  state,\r\n} from '@arcgis/lumina';\r\nimport type {\r\n  JsxNode,\r\n} from '@arcgis/lumina';\r\nimport { styles } from './map-tools.css';\r\nimport type { MapSearch } from '../map-search/map-search';\r\nimport type { MapLegend } from '../map-legend/map-legend';\r\nimport type { MapFullscreen } from '../map-fullscreen/map-fullscreen';\r\nimport type { MapFloorFilter } from '../map-floor-filter/map-floor-filter';\r\nimport type { MapBasemapGallery } from '../map-basemap-gallery/map-basemap-gallery';\r\nimport type { SelectionTool } from '../selection-tool/selection-tool';\r\nimport Expand from '@arcgis/core/widgets/Expand';\r\nimport Home from '@arcgis/core/widgets/Home';\r\n\r\ndeclare global {\r\n  interface DeclareElements {\r\n    'map-tools': MapTools;\r\n  }\r\n}\r\n\r\nexport class MapTools 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  constructor() {\r\n    super();\r\n    this.listenOn(window, 'mapChanged', this.mapChanged);\r\n  }\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    /* 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\r\n    if (changes.has('mapView')) {\r\n      void this.mapViewWatchHandler();\r\n    }\r\n\r\n    if (changes.has('parentComponentWidth')) {\r\n      if (this.parentComponentWidth) {\r\n        void this.parentComponentWidthWatchHandler(this.parentComponentWidth);\r\n      }\r\n    }\r\n\r\n    if (changes.has('_showBasemapWidget') && (this.hasUpdated || this._showBasemapWidget !== false)) {\r\n      void this._showBasemapWidgetWatchHandler(this._showBasemapWidget);\r\n    }\r\n\r\n    if (changes.has('_showFloorFilter') && (this.hasUpdated || this._showFloorFilter !== false)) {\r\n      void this._showFloorFilterWatchHandler(this._showFloorFilter);\r\n    }\r\n\r\n    if (changes.has('_showFullscreen') && (this.hasUpdated || this._showFullscreen !== false)) {\r\n      void this._showFullscreenWatchHandler(this._showFullscreen);\r\n    }\r\n\r\n    if (changes.has('_showLegendWidget') && (this.hasUpdated || this._showLegendWidget !== false)) {\r\n      void this._showLegendWidgetWatchHandler(this._showLegendWidget);\r\n    }\r\n\r\n    if (changes.has('_showSearchWidget') && (this.hasUpdated || this._showSearchWidget !== false)) {\r\n      void this._showSearchWidgetWatchHandler(this._showSearchWidget);\r\n    }\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (public)\r\n  //\r\n  //--------------------------------------------------------------------------\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  /**\r\n   * string[]: Optional list of enabled layer ids\r\n   *  If empty all layers will be available\r\n   */\r\n  @property() enabledLayerIds: string[] = [];\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 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  /** boolean: when true the home widget will be available */\r\n  @property() enableHome = 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  /** 's' | 'm' | 'l': Used for Zoom tools */\r\n  @property() zoomToolsSize: 'l' | 'm' | 's' = 'm';\r\n\r\n  /** 'horizontal' | 'vertical': used to control the orientation of the tools */\r\n  @property() layout: 'horizontal' | 'vertical' = 'vertical';\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  /** 's' | 'm' | 'l': Used for optional map tool widget */\r\n  @property() mapWidgetsSize: 'l' | 'm' | 's' = 'm';\r\n\r\n  /** boolean: when true the map picker will be available */\r\n  @property() enableMapPicker = false;\r\n\r\n  /** boolean: when true the map layer picker will be available */\r\n  @property() enableMapLayerPicker = false;\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 tools\r\n   */\r\n  @property() position: __esri.UIPosition = 'top-leading';\r\n\r\n  /** ISearchConfiguration: Configuration details for the Search widget */\r\n  @property() searchConfiguration: ISearchConfiguration | 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 = true;\r\n\r\n  /** boolean: when true the selection tools will be available */\r\n  @property() enableSelectionTool = false;\r\n\r\n  /** Valid tools: 'legend', 'search', 'fullscreen', 'basemap', 'floorfilter' */\r\n  /**\r\n   * Tools to show and its order\r\n   * Valid tools: 'home', 'legend', 'search', 'fullscreen', 'basemap', 'floorfilter', 'selectiontool', 'map-picker', 'map-layer-picker'\r\n   */\r\n  @property() toolOrder: string[] = ['home', 'legend', 'search', 'fullscreen', 'floorfilter', 'selectiontool', 'map-picker', 'map-layer-picker'];\r\n\r\n  /**  __esri.FeatureLayer: Selected feature layer */\r\n  @property() selectedLayer: __esri.FeatureLayer | undefined;\r\n\r\n  /** IMapInfo[]: array of map infos (name and id) */\r\n  @property() mapInfos: IMapInfo[] = [];\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  /** When true the component will render an optimized view for mobile devices */\r\n  @property() isMobile = false;\r\n\r\n  /**  component height */\r\n  @property() parentComponentHeight: number | undefined;\r\n\r\n  /** Parent component height */\r\n  @property() parentComponentWidth: number | undefined;\r\n\r\n  /** string: selected web map */\r\n  @property() selectedWebMapId = '';\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  /** IMapInfo: key configuration details about the current map */\r\n  @property() mapInfo: IMapInfo | undefined;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  State (internal)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** When true the map supports floor awareness */\r\n  @state() _hasFloorInfo = 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-tools', blocking: true });\r\n\r\n  /** When true the tool action bar will be displayed */\r\n  @state() _showTools = true;\r\n\r\n  /** When true the basemap picker will be displayed */\r\n  @state() _showBasemapWidget = false;\r\n\r\n  /** When true the floor filter widget will be displayed */\r\n  @state() _showFloorFilter = false;\r\n\r\n  /** When true the map will be displayed in fullscreen mode */\r\n  @state() _showFullscreen = false;\r\n\r\n  /** When true the legend widget will be displayed */\r\n  @state() _showLegendWidget = false;\r\n\r\n  /** When true the search widget will be displayed */\r\n  @state() _showSearchWidget = false;\r\n\r\n  /** * When true the selection tool will be in active mode */\r\n  @state() _selectionToolActive = false;\r\n\r\n  /** When true the ellpisis tools will shown */\r\n  @state() _showEllipsisTools = true;\r\n\r\n  /** Tool to show in ellipsis */\r\n  @state() _ellipsisTools: string[] = [];\r\n\r\n  /** boolean: Indicates whether the currently selected web map is valid and successfully loaded. */\r\n  @state() _isValidWebMap = true;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** HTMLMapSearchElement: The search element node */\r\n  private _basemapElement = createRef<MapBasemapGallery['el']>();\r\n\r\n  /** HTMLFloorFilterElement: The floor filter element node */\r\n  private _floorFilterElement = createRef<MapFloorFilter['el']>();\r\n\r\n  /** HTMLMapFullscreenElement: The fullscreen element node */\r\n  private _fullscreenElement = createRef<MapFullscreen['el']>();\r\n\r\n  /** HTMLLegendElement: The legend element node */\r\n  private _legendElement = createRef<MapLegend['el']>();\r\n\r\n  /** HTMLMapSearchElement: The search element node */\r\n  private _searchElement = createRef<MapSearch['el']>();\r\n\r\n  /**\r\n   * string[]: List of widget names that have been added to the UI\r\n   * This prop is only used when enableSingleExpand is false\r\n   */\r\n  private _widgets = [] as any[];\r\n\r\n  /** SelectionTool: The sketch tool element node */\r\n  private _selectionToolElement = createRef<SelectionTool['el']>();\r\n\r\n  /** esri/widgets/Home: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Home.html */\r\n  private _homeWidget: __esri.Home | undefined;\r\n\r\n  /** Tools to show on the map */\r\n  private _mapTools: string[] = [];\r\n\r\n  /** HTMLCalciteActionElement: */\r\n  private _mapTool = createRef<HTMLCalciteActionElement['el']>();\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Watch handlers\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** When the mapView loads update the tools on the map */\r\n  private async mapViewWatchHandler(): Promise<void> {\r\n    await this.mapView?.when(() => {\r\n      if (this.enableHome) {\r\n        this._initHome();\r\n      }\r\n      if (this.parentComponentWidth) {\r\n        this._updateTools(this.parentComponentWidth);\r\n      }\r\n    });\r\n  }\r\n\r\n  /** Upadate the tools on the map */\r\n  private async parentComponentWidthWatchHandler(\r\n    v: number\r\n  ): Promise<void> {\r\n    this._updateTools(v);\r\n  }\r\n\r\n  /** When the _showBasemapWidget property is true display the basemap gallery */\r\n  private async _showBasemapWidgetWatchHandler(\r\n    v: boolean\r\n  ): Promise<void> {\r\n    const widget = this._basemapElement.value ? this._basemapElement.value.basemapWidget : undefined;\r\n    if (widget) {\r\n      if (v) {\r\n        this.mapView?.ui.add(widget, {\r\n          position: this.position,\r\n          index: 1,\r\n        });\r\n      } else {\r\n        this.mapView?.ui.remove(widget);\r\n      }\r\n    }\r\n  }\r\n\r\n  /** When the _showBasemapWidget property is true display the basemap gallery */\r\n  private async _showFloorFilterWatchHandler(\r\n    v: boolean\r\n  ): Promise<void> {\r\n    const widget = this._floorFilterElement.value ? this._floorFilterElement.value.floorFilterWidget : undefined;\r\n    if (widget) {\r\n      if (v) {\r\n        this.mapView?.ui.add(widget, {\r\n          position: this.position,\r\n          index: 1,\r\n        });\r\n      } else {\r\n        this.mapView?.ui.remove(widget);\r\n      }\r\n    }\r\n  }\r\n\r\n  /** When the _showFullscreen property is true the app will consume the full screen */\r\n  private async _showFullscreenWatchHandler(\r\n    v: boolean\r\n  ): Promise<void> {\r\n    const widget = this._fullscreenElement.value ? this._fullscreenElement.value.fullscreenWidget : undefined;\r\n    if (widget) {\r\n      if (v) {\r\n        if (widget.viewModel.state === 'ready') {\r\n          widget.viewModel.enter();\r\n        }\r\n      } else {\r\n        if (widget.viewModel.state === 'active') {\r\n          widget.viewModel.exit();\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** When the _showLegendWidget property is true display the search widget */\r\n  private async _showLegendWidgetWatchHandler(\r\n    v: boolean\r\n  ): Promise<void> {\r\n    const widget = this._legendElement.value ? this._legendElement.value.legendWidget : undefined;\r\n    if (widget) {\r\n      if (v) {\r\n        this.mapView?.ui.add(widget, {\r\n          position: this.position,\r\n          index: 1,\r\n        });\r\n      } else {\r\n        this.mapView?.ui.remove(widget);\r\n      }\r\n    }\r\n  }\r\n\r\n  /** When the _showSearchWidget property is true display the search widget */\r\n  private async _showSearchWidgetWatchHandler(\r\n    v: boolean\r\n  ): Promise<void> {\r\n    const widget = this._searchElement.value ? this._searchElement.value.searchWidget : undefined;\r\n    if (widget) {\r\n      if (v) {\r\n        this.mapView?.ui.add(widget, {\r\n          position: this.position,\r\n          index: 1,\r\n        });\r\n      } else {\r\n        this.mapView?.ui.remove(widget);\r\n      }\r\n    }\r\n  }\r\n\r\n  /** Emits an event when web map is loaded */\r\n  private async mapChanged(\r\n    _evt: CustomEvent\r\n  ): Promise<void> {\r\n    const _isValid = _evt.detail.isValid;\r\n    this._isValidWebMap = _isValid;\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    // initially add all the tools in the map tools\r\n    this._mapTools = [...this.toolOrder];\r\n  }\r\n\r\n  /** Renders the component. */\r\n  override render(): JsxNode {\r\n    this._setZoomToolsSize();\r\n    const toggleIconClass = this.layout === 'horizontal' ? 'display-flex' : '';\r\n    const toggleIcon = this._getToggleIcon();\r\n    const toolsClass = !this._showTools ? 'display-none' : toggleIconClass;\r\n    const ellispsisToolsClass = this._showEllipsisTools ? '' : 'display-none';\r\n    const searchClass = this._showSearchWidget ? '' : 'display-none';\r\n    const basemapClass = this._showBasemapWidget ? '' : 'display-none';\r\n    const legendClass = this._showLegendWidget ? '' : 'display-none';\r\n    const floorFilterClass = this._showFloorFilter ? '' : 'display-none';\r\n    const fullscreenClass = this._showFullscreen ? '' : 'display-none';\r\n    const expandTip = this._showTools ? this._translations.collapse : this._translations.expand;\r\n    const containerClass = !this.enableBasemap && !this.enableFullscreen && !this.enableLegend && !this.enableSearch && !this.enableMapPicker && !this.enableMapLayerPicker ? 'display-none' : '';\r\n    const toolMarginClass = !this.enableSingleExpand ? '' : this.layout === 'horizontal' ? 'margin-left-1-2' : 'margin-top-1-2';\r\n    const ellipsisToolsContainer = this._ellipsisTools.length > 0 && this._showTools ? '' : 'display-none';\r\n    const shadowClass = this.stackTools && this._ellipsisTools.length === 0 ? 'box-shadow' : '';\r\n    return (\r\n      <>\r\n        <div class={`${containerClass} ${toggleIconClass}`}>\r\n          {\r\n            this.enableSingleExpand ?\r\n              <div\r\n                class={shadowClass}\r\n              >\r\n                {\r\n                  this._getActionGroup(\r\n                    toggleIcon,\r\n                    false,\r\n                    expandTip || '',\r\n                    () => this._toggleTools()\r\n                  )\r\n                }\r\n              </div> : undefined\r\n          }\r\n          <div\r\n            class={`${toolMarginClass} ${shadowClass} ${toolsClass}`}\r\n          >\r\n            {\r\n              this._getMapWidgets(this._mapTools)\r\n            }\r\n          </div>\r\n          <div>\r\n            <div class={ellipsisToolsContainer}>\r\n              {\r\n                this._getActionGroup(\r\n                  'ellipsis',\r\n                  false, '',\r\n                  () => this._toggleEllipsisTools()\r\n                )\r\n              }\r\n              <div class={ellispsisToolsClass}>\r\n                {this._getMapWidgets(this._ellipsisTools)}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <map-basemap-gallery\r\n          basemapConfig={this.basemapConfig}\r\n          class={basemapClass}\r\n          mapView={this.mapView}\r\n          ref={this._basemapElement}\r\n        />\r\n        <map-search\r\n          class={searchClass}\r\n          mapView={this.mapView}\r\n          ref={this._searchElement}\r\n          resultGraphicEnabled={true}\r\n          searchConfiguration={this.searchConfiguration}\r\n        />\r\n        <map-legend\r\n          class={legendClass}\r\n          mapView={this.mapView}\r\n          ref={this._legendElement}\r\n        />\r\n        <map-fullscreen\r\n          class={fullscreenClass}\r\n          mapView={this.mapView}\r\n          onfullscreenStateChange={_evt => this._fullscreenStateChange(_evt.detail)}\r\n          ref={this._fullscreenElement}\r\n        />\r\n        <map-floor-filter\r\n          class={floorFilterClass}\r\n          enabled={this.enableFloorFilter}\r\n          mapView={this.mapView}\r\n          ref={this._floorFilterElement}\r\n        />\r\n        <selection-tool\r\n          mapView={this.mapView}\r\n          ondrawingComplete={() => { this._selectionToolActive = !this._selectionToolActive }}\r\n          ref={this._selectionToolElement}\r\n          selectedLayerId={this.selectedLayer?.id}\r\n          tool='rectangle'\r\n        />\r\n        {this.enableMapPicker &&\r\n          <map-picker\r\n            class={'mapPickerClass'}\r\n            height={(this.parentComponentHeight ?? 0) - 25}\r\n            id='map-picker'\r\n            mapInfos={this.mapInfos}\r\n            referenceElement='map'\r\n            selectedWebMapId={this.selectedWebMapId}\r\n            showMapListInPopover={true}\r\n          />}\r\n        {this.enableMapLayerPicker && this.selectedLayer &&\r\n          <map-layer-picker\r\n            appearance='transparent'\r\n            defaultLayerId={this.defaultLayerId}\r\n            enabledLayerIds={this.enabledLayerIds}\r\n            height={(this.parentComponentHeight ?? 0) - 25}\r\n            isMobile={this.isMobile}\r\n            mapView={this.mapView}\r\n            showOnlyUpdatableLayers={this.showOnlyUpdatableLayers}\r\n            referenceElement='layers'\r\n            scale='s'\r\n            selectedIds={this.selectedLayer ? [this.selectedLayer.id] : []}\r\n            showLayersListInPopover={true}\r\n            showTables={true}\r\n            type='dropdown'\r\n          />\r\n        }\r\n      </>\r\n    );\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Functions (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Add/remove the home widget base on enableHome prop */\r\n  private _initHome(): void {\r\n    if (this.enableHome) {\r\n      this._homeWidget = new Home({\r\n        view: this.mapView\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Set the size of the zoom tools based on the user defined zoomToolsSize variable.\r\n   *\r\n   * @private\r\n   */\r\n  private _setZoomToolsSize(): void {\r\n    const zoomIn = document.getElementsByClassName('esri-zoom')[0]?.children[0];\r\n    const zoomOut = document.getElementsByClassName('esri-zoom')[0]?.children[1];\r\n    if (zoomIn && zoomOut) {\r\n      const size = this.zoomToolsSize === 's' ? '32px' : this.zoomToolsSize === 'm' ? '40px' : '48px';\r\n      (zoomIn as HTMLDivElement).style.width = size;\r\n      (zoomIn as HTMLDivElement).style.height = size;\r\n      (zoomOut as HTMLDivElement).style.width = size;\r\n      (zoomOut as HTMLDivElement).style.height = size;\r\n    }\r\n    if (this.layout === 'horizontal') {\r\n      document.getElementsByClassName('esri-zoom')[0]?.setAttribute('style', 'position: absolute; top: 50px; left: 0');\r\n      document.getElementsByClassName('esri-ui-top-left')[0]?.setAttribute('style', 'flex-direction: row; gap: 5px; align-items: flex-start; direction: ltr !important; z-index: 1;');\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @returns Toggle icon for expand/collapse\r\n   */\r\n  private _getToggleIcon(): HTMLCalciteIconElement['icon'] {\r\n    return this.layout === 'horizontal' ?\r\n      (this._showTools ? 'chevrons-left' : 'chevrons-right') :\r\n      this._showTools ? 'chevrons-up' : 'chevrons-down';\r\n  }\r\n\r\n  /**\r\n   * Update the map widget according to the parents width\r\n   * If tools get overflow then it will shown in the ellipsis\r\n   * @param parentComponentWidth Parent components width\r\n   */\r\n  private _updateTools(\r\n    parentComponentWidth: number\r\n  ): void {\r\n    const allMapTools: string[] = JSON.parse(JSON.stringify(this.toolOrder));\r\n    this._hasFloorInfo = (this.mapView?.map as any)?.floorInfo;\r\n    // remove floor filter if the map does not have floor info\r\n    const index = allMapTools.indexOf('floorfilter');\r\n    if (index > -1 && !this._hasFloorInfo) {\r\n      allMapTools.splice(index, 1);\r\n    }\r\n    // get tools count to fit in the horizontal row and show other overflowed tools in ellipsis\r\n    const toolWidth = 40; //each tool width is 40px\r\n    const toolsToFit = Math.ceil(parentComponentWidth / toolWidth) - 1;\r\n    if (toolsToFit && toolsToFit !== allMapTools.length - 1) {\r\n      this._mapTools = allMapTools.slice(0, toolsToFit);\r\n      this._ellipsisTools = allMapTools.slice(toolsToFit, allMapTools.length);\r\n    } else {\r\n      this._mapTools = allMapTools;\r\n      this._ellipsisTools = [];\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get the map widgets considering the user defined enabled values and tool order\r\n   *\r\n   * @private\r\n   */\r\n  private _getMapWidgets(\r\n    toolOrder: string[]\r\n  ): JsxNode {\r\n    const fullscreenIcon = this._showFullscreen ? 'full-screen-exit' : 'full-screen';\r\n    const fullscreenTip = this._showFullscreen ? this._translations.exitFullscreen : this._translations.enterFullscreen;\r\n    const mapIcon = this._isValidWebMap ? 'map' : 'exclamation-mark-triangle';\r\n    const layersIcon = this.selectedLayer === undefined ? 'exclamation-mark-triangle' : 'layers';\r\n    return toolOrder.map(t => {\r\n      switch (t) {\r\n        case 'legend':\r\n          return this.enableLegend && this.enableSingleExpand\r\n            ? this._getActionGroup('legend', false, this._translations.legend, () => this._showLegend())\r\n            : this.enableLegend\r\n              ? this._getWidget(t, this._legendElement.value?.legendWidget, true)\r\n              : undefined;\r\n        case 'search':\r\n          return this.enableSearch && this.enableSingleExpand\r\n            ? this._getActionGroup('magnifying-glass', false, this._translations.search, () => this._search())\r\n            : this.enableSearch\r\n              ? this._getWidget(t, this._searchElement.value?.searchWidget, true)\r\n              : undefined;\r\n        case 'fullscreen':\r\n          return this.enableFullscreen && this.enableSingleExpand\r\n            ? this._getActionGroup(fullscreenIcon, false, fullscreenTip || '', () => this._expand())\r\n            : this.enableFullscreen\r\n              ? this._getWidget(t, this._fullscreenElement.value?.fullscreenWidget, false)\r\n              : undefined;\r\n        case 'basemap':\r\n          return this.enableBasemap && this.enableSingleExpand\r\n            ? this._getActionGroup('basemap', false, this._translations.basemap, () => this._toggleBasemapPicker())\r\n            : this.enableBasemap\r\n              ? this._getWidget(t, this._basemapElement.value?.basemapWidget, true)\r\n              : undefined;\r\n        case 'floorfilter':\r\n          return this.enableFloorFilter && this._hasFloorInfo && this.enableSingleExpand\r\n            ? this._getActionGroup('urban-model', false, this._translations.floorFilter, () => this._toggleFloorFilter())\r\n            : this.enableFloorFilter && this._hasFloorInfo\r\n              ? this._getWidget(t, this._floorFilterElement.value?.floorFilterWidget, true)\r\n              : undefined;\r\n        case 'selectiontool':\r\n          return this.enableSelectionTool && this.selectedLayer ? // if selection tool is enabled and a layer is selected then only show selection tool\r\n            this._getActionGroup('cursor-selection', false, this._translations.selectByRectangle, () => this._toggleSelectionTool(), this._selectionToolActive)\r\n            : undefined\r\n        case 'home':\r\n          return this.enableHome ?\r\n            this._getActionGroup('home', false, this._translations.defaultMapView, () => this._homeWidget?.go())\r\n            : undefined\r\n        case 'map-picker':\r\n          return this.enableMapPicker ?\r\n            this._getActionGroup(mapIcon, false, '', () => undefined, !this._isValidWebMap)\r\n            : undefined;\r\n        case 'map-layer-picker':\r\n          return this.enableMapLayerPicker && this._isValidWebMap ?\r\n            this._getActionGroup(layersIcon, false, '', () => undefined, this.selectedLayer === undefined)\r\n            : undefined;\r\n        default:\r\n          return <></>;\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Respond to fullscreen state change and ensure our state var is in sync\r\n   *\r\n   * @param state The fullscreen view model's state.\r\n   * @private\r\n   */\r\n  private _fullscreenStateChange(\r\n    state: string\r\n  ): void {\r\n    if (state === 'ready' && this._showFullscreen) {\r\n      this._showFullscreen = false;\r\n    } else if (state === 'active' && !this._showFullscreen) {\r\n      this._showFullscreen = true;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get a calcite action group for the current action\r\n   *\r\n   * @param icon the icon to display for the current action\r\n   * @param disabled should the action be disabled\r\n   * @param tip information tip to display helpful details to end user\r\n   * @param func the associated onClick function to execute\r\n   * @param isDanger show icon in danger kind\r\n   * @param active shows blue indicator for the selected action\r\n   * @returns the dom node for the action group\r\n   * @private\r\n   */\r\n  private _getActionGroup(\r\n    icon: HTMLCalciteIconElement['icon'],\r\n    disabled: boolean,\r\n    tip: string,\r\n    func: any,\r\n    isDanger?: boolean,\r\n    active?: boolean\r\n  ): JsxNode {\r\n    const sizeClass = this.mapWidgetsSize === 's' ? 'square-32' : this.mapWidgetsSize === 'm' ? 'square-40' : 'square-48';\r\n    const stackClass = this.stackTools ? '' : 'margin-bottom-1-2';\r\n    const shadowClass = this.stackTools ? '' : 'box-shadow';\r\n    const iconClass = isDanger ? 'danger-icon-color' : '';\r\n    return (\r\n      <div>\r\n        <calcite-action\r\n          alignment='center'\r\n          appearance='solid'\r\n          indicator={active}\r\n          class={`map-actions ${sizeClass} ${stackClass} border-bottom ${shadowClass} ${iconClass}`}\r\n          disabled={disabled}\r\n          icon={icon}\r\n          id={icon}\r\n          onClick={func}\r\n          ref={this._mapTool}\r\n          scale='s'\r\n          text=''\r\n        >\r\n          <calcite-icon\r\n            icon='chevron-up'\r\n            scale='s'\r\n            slot='icon'\r\n          />\r\n        </calcite-action>\r\n        {!this.isMobile &&\r\n          <calcite-tooltip\r\n            placement={this.layout === 'vertical' ? 'auto' : 'bottom'}\r\n            reference-element={icon}\r\n          >\r\n            <span>\r\n              {tip}\r\n            </span>\r\n          </calcite-tooltip>}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Add the widget to the UI and optionally to an Expand widget\r\n   *\r\n   * @param name the icon to display for the current action\r\n   * @param content the widget to display\r\n   * @param internalExpand when true the widget will be added to an Expand widget\r\n   * @private\r\n   */\r\n  private _getWidget(\r\n    name: string,\r\n    content: any,\r\n    internalExpand: boolean\r\n  ): undefined {\r\n    if (this._widgets.indexOf(name) < 0 && this.mapView && content) {\r\n      const i = this.toolOrder.indexOf(name);\r\n      const exp = new Expand({\r\n        view: this.mapView,\r\n        content,\r\n      });\r\n      const v = this.enableHome ? 2 : 1;\r\n      this.mapView.ui.add(internalExpand ? exp : content, {\r\n        position: this.position,\r\n        index: i > -1 ? i + v : 1,\r\n      });\r\n      this._widgets.push(name);\r\n    }\r\n  }\r\n\r\n  /** Show/Hide the legend widget */\r\n  private _showLegend(): void {\r\n    this._showLegendWidget = !this._showLegendWidget;\r\n    this._showTools = false;\r\n    this._toggleEllipsisTools();\r\n  }\r\n\r\n  /** Show/Hide the search widget */\r\n  private _search(): void {\r\n    this._showSearchWidget = !this._showSearchWidget;\r\n    this._showTools = false;\r\n    this._toggleEllipsisTools();\r\n  }\r\n\r\n  /** Show/Hide the basemap picker */\r\n  private _toggleBasemapPicker(): void {\r\n    this._showBasemapWidget = !this._showBasemapWidget;\r\n    this._showTools = false;\r\n    this._toggleEllipsisTools();\r\n  }\r\n\r\n  /** Show/Hide the floor filter */\r\n  private _toggleFloorFilter(): void {\r\n    this._showFloorFilter = !this._showFloorFilter;\r\n    this._showTools = false;\r\n    this._toggleEllipsisTools();\r\n  }\r\n\r\n  /**  Show/Hide the floor filter */\r\n  private _toggleSelectionTool(): void {\r\n    this._selectionToolActive = !this._selectionToolActive;\r\n    void this._selectionToolElement.value?.toggleSelectionTool();\r\n  }\r\n\r\n  /** Enter/Exit fullscreen mode */\r\n  private _expand(): void {\r\n    this._showFullscreen = !this._showFullscreen;\r\n  }\r\n\r\n  /** Show/Hide the map tools */\r\n  private _toggleTools(): void {\r\n    if (!this._showTools) {\r\n      this._showBasemapWidget = false;\r\n      this._showSearchWidget = false;\r\n      this._showLegendWidget = false;\r\n      this._showFloorFilter = false;\r\n    }\r\n    this._showTools = !this._showTools;\r\n    this._toggleEllipsisTools();\r\n  }\r\n\r\n  /** Toggle Ellipsis Tools*/\r\n  private _toggleEllipsisTools(): void {\r\n    this._showEllipsisTools = !this._showEllipsisTools;\r\n  }\r\n}\r\n"],"names":["ref$jsx"],"mappings":"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"}

package/dist/components/pci-calculator/customElement.js

@@ -1,12 +1,12 @@
-import { c as s } from "../../chunks/runtime.js";
-import { css as c, html as i } from "lit";
-import { c as d } from "../../chunks/pciUtils.js";
-import { createRef as o, ref as n } from "lit-html/directives/ref.js";
-import { LitElement as u, safeClassMap as a } from "@arcgis/lumina";
 /*! 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.57 */
-const r = c`/** @license
+v1.2.0-next.58 */
+import { c as customElement } from "../../chunks/runtime.js";
+import { css, html } from "lit";
+import { c as calculatePCI } from "../../chunks/pciUtils.js";
+import { createRef, ref } from "lit-html/directives/ref.js";
+import { LitElement, safeClassMap } from "@arcgis/lumina";
+const styles = css`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -20,39 +20,93 @@ const r = c`/** @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;--calcite-label-margin-bottom: 0}.label-display{display:block;padding-bottom:1rem}.display-flex{display:flex}.display-grid{display:grid}.display-none{display:none}.padding-top-1{padding-top:1rem}.main-input{width:300px;padding-inline-end:1rem}.float-end{float:inline-end}.position-relative{position:relative}.position-right{position:absolute;right:0}`;
-class p extends u {
+ */
+
+:host {
+  display: block;
+  --calcite-label-margin-bottom: 0;
+}
+
+.label-display {
+  display: block;
+  padding-bottom: 1rem;
+}
+
+.display-flex {
+  display: flex;
+}
+
+.display-grid {
+  display: grid;
+}
+
+.display-none {
+  display: none;
+}
+
+.padding-top-1 {
+  padding-top: 1rem;
+}
+
+.main-input {
+  width: 300px;
+  padding-inline-end: 1rem;
+}
+
+.float-end {
+  float: inline-end;
+}
+
+.position-relative {
+  position: relative;
+}
+
+.position-right {
+  position: absolute;
+  right: 0px;
+}`;
+class PciCalculator extends LitElement {
   constructor() {
-    super(...arguments), this.showAddDeduct = !1, this._deductValuesElement = o();
+    super(...arguments);
+    this.showAddDeduct = false;
+    this._deductValuesElement = createRef();
   }
   static {
-    this.properties = { showAddDeduct: 16 };
+    this.properties = { showAddDeduct: [16, {}, { state: true }] };
   }
   static {
-    this.styles = r;
+    this.styles = styles;
   }
   render() {
-    const t = this.showAddDeduct ? "display-none" : "display-grid", e = this.showAddDeduct ? "position-relative" : "display-none";
-    return i`<div class=${a(t)}><div class="label-display"><calcite-label class="label-display">\r\n              Enter comma delimited deduct values${this._getDeductValuesInput()}</calcite-label></div><div>${this._getCalculateButton()}</div></div><div class=${a(e)}><div class="position-right"><calcite-action appearance=transparent class="float-end" icon=x @click=${() => this._toggleShowAddDeduct()} scale=s text></calcite-action></div><deduct-calculator class="display-grid padding-top-1" @deductValueComplete=${this._addDeductValue}></deduct-calculator></div>`;
+    const pciClass = !this.showAddDeduct ? "display-grid" : "display-none";
+    const deductClass = this.showAddDeduct ? "position-relative" : "display-none";
+    return html`<div class=${safeClassMap(pciClass)}><div class="label-display"><calcite-label class="label-display">\r\n              Enter comma delimited deduct values${this._getDeductValuesInput()}</calcite-label></div><div>${this._getCalculateButton()}</div></div><div class=${safeClassMap(deductClass)}><div class="position-right"><calcite-action appearance=transparent class="float-end" icon=x @click=${() => this._toggleShowAddDeduct()} scale=s text></calcite-action></div><deduct-calculator class="display-grid padding-top-1" @deductValueComplete=${this._addDeductValue}></deduct-calculator></div>`;
   }
   _getDeductValuesInput() {
-    return i`<div class="display-flex"><calcite-input class="main-input" ${n(this._deductValuesElement)}></calcite-input><calcite-action appearance=transparent icon=plus-circle @click=${() => this._toggleShowAddDeduct()} scale=s text></calcite-action></div>`;
+    return html`<div class="display-flex"><calcite-input class="main-input" ${ref(this._deductValuesElement)}></calcite-input><calcite-action appearance=transparent icon=plus-circle @click=${() => this._toggleShowAddDeduct()} scale=s text></calcite-action></div>`;
   }
   _getCalculateButton() {
-    return this._deductValuesElement.value ? i`<calcite-button @click=${() => this._calculatePCI(this._deductValuesElement?.value?.value || "")}>\r\n        Calculate PCI</calcite-button>` : void 0;
+    return this._deductValuesElement.value ? html`<calcite-button @click=${() => this._calculatePCI(this._deductValuesElement?.value?.value || "")}>\r\n        Calculate PCI</calcite-button>` : void 0;
   }
   _toggleShowAddDeduct() {
     this.showAddDeduct = !this.showAddDeduct;
   }
-  _addDeductValue(t) {
-    this._toggleShowAddDeduct(), this._deductValuesElement.value && (this._deductValuesElement.value.value += Math.abs(Number.parseFloat(this._deductValuesElement.value.value)) > 0 ? `,${t.detail}` : t.detail);
+  _addDeductValue(_evt) {
+    this._toggleShowAddDeduct();
+    if (this._deductValuesElement.value) {
+      this._deductValuesElement.value.value += Math.abs(Number.parseFloat(this._deductValuesElement.value.value)) > 0 ? `,${_evt.detail}` : _evt.detail;
+    }
   }
-  _calculatePCI(t) {
-    const e = d(t, !0), l = e <= 10 ? "Failed" : e <= 25 ? "Serious" : e <= 40 ? "Very Poor" : e <= 55 ? "Poor" : e <= 70 ? "Fair" : e <= 85 ? "Satisfactory" : "Good";
-    console.log(`PCI: ${e}`), console.log(`Rating: ${l}`), alert("See debug console for results");
+  _calculatePCI(deductValuesString) {
+    const pci = calculatePCI(deductValuesString, true);
+    const rating = pci <= 10 ? "Failed" : pci <= 25 ? "Serious" : pci <= 40 ? "Very Poor" : pci <= 55 ? "Poor" : pci <= 70 ? "Fair" : pci <= 85 ? "Satisfactory" : "Good";
+    console.log(`PCI: ${pci}`);
+    console.log(`Rating: ${rating}`);
+    alert("See debug console for results");
   }
 }
-s("pci-calculator", p);
+customElement("pci-calculator", PciCalculator);
 export {
-  p as PciCalculator
+  PciCalculator
 };
+//# sourceMappingURL=customElement.js.map

package/dist/components/pci-calculator/customElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"customElement.js","sources":["../../../src/components/pci-calculator/pci-calculator.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\n// This is a demo component for internal use only.\r\n// It may eventually live somewhere else and doesn't really need to be a component.\r\n// The main code will be whats in the supporting util file...it will be used by a survey123 form.\r\n// It has been requested that we have a simple way to demo and test the functionality.\r\n// I am putting here now just to keep together with other current work.\r\n\r\nimport { calculatePCI } from '../../utils/pciUtils';\r\nimport { createRef } from 'lit-html/directives/ref.js';\r\nimport {\r\n  LitElement,\r\n  Fragment,\r\n  h,\r\n  state,\r\n} from '@arcgis/lumina';\r\nimport type {\r\n  JsxNode,\r\n} from '@arcgis/lumina';\r\nimport { styles } from './pci-calculator.css';\r\n\r\ndeclare global {\r\n  interface DeclareElements {\r\n    'pci-calculator': PciCalculator;\r\n  }\r\n}\r\n\r\nexport class PciCalculator 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  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  State (internal)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Boolean: Show/Hide the calculate deduct value UI */\r\n  @state() showAddDeduct = false;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** HTMLCalciteInputElement: The html element for setting deduct values */\r\n  private _deductValuesElement = createRef<HTMLCalciteInputElement>();\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Watch handlers\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Methods (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Events (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Functions (lifecycle)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Renders the component. */\r\n  override render(): JsxNode {\r\n    const pciClass = !this.showAddDeduct ? 'display-grid' : 'display-none';\r\n    const deductClass = this.showAddDeduct ? 'position-relative' : 'display-none';\r\n\r\n    return (\r\n      <>\r\n        {/* PCI */}\r\n        <div class={pciClass}>\r\n          <div class='label-display'>\r\n            <calcite-label class='label-display'>\r\n              Enter comma delimited deduct values\r\n              {this._getDeductValuesInput()}\r\n            </calcite-label>\r\n          </div>\r\n          <div>{this._getCalculateButton()}</div>\r\n        </div>\r\n        {/* Deduct */}\r\n        <div class={deductClass}>\r\n          <div class='position-right'>\r\n            <calcite-action\r\n              appearance='transparent'\r\n              class='float-end'\r\n              icon='x'\r\n              onClick={() => this._toggleShowAddDeduct()}\r\n              scale='s'\r\n              text=''\r\n            />\r\n          </div>\r\n          <deduct-calculator\r\n            class='display-grid padding-top-1'\r\n            ondeductValueComplete={this._addDeductValue}\r\n          />\r\n        </div>\r\n      </>\r\n    );\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Functions (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Load the calculate deduct values calculate UI\r\n   *\r\n   * @returns calculate deduct value UI node\r\n   * @private\r\n   */\r\n  private _getDeductValuesInput(): JsxNode {\r\n    return (\r\n      <div class='display-flex'>\r\n        <calcite-input\r\n          class='main-input'\r\n          ref={this._deductValuesElement}\r\n        />\r\n        <calcite-action\r\n          appearance='transparent'\r\n          icon='plus-circle'\r\n          onClick={() => this._toggleShowAddDeduct()}\r\n          scale='s'\r\n          text=''\r\n        />\r\n      </div>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Add the calculate PCI button\r\n   *\r\n   * @returns calculate PCI button\r\n   * @private\r\n   */\r\n  private _getCalculateButton(): JsxNode {\r\n    return this._deductValuesElement.value ? (\r\n      <calcite-button onClick={() => this._calculatePCI(this._deductValuesElement?.value?.value || '')}>\r\n        Calculate PCI\r\n      </calcite-button>\r\n    ): undefined;\r\n  }\r\n\r\n  /**\r\n   * Toggle the value that controls show/hide of the deduct value UI\r\n   *\r\n   * @private\r\n   */\r\n  private _toggleShowAddDeduct(): void {\r\n    this.showAddDeduct = !this.showAddDeduct;\r\n  }\r\n\r\n  /**\r\n   * Hide the calculate deduct value UI and add the newly calculated value\r\n   *\r\n   * @param event the event from the calculate deduct value control\r\n   * @private\r\n   */\r\n  private _addDeductValue(_evt: CustomEvent): void {\r\n    this._toggleShowAddDeduct();\r\n    if (this._deductValuesElement.value) {\r\n    this._deductValuesElement.value.value += Math.abs(Number.parseFloat(this._deductValuesElement.value.value)) > 0 ?\r\n      `,${_evt.detail}` : _evt.detail;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Calculate the PCI value based on the ASTM methodology\r\n   *\r\n   * @param deductValuesString string with comma delimited numbers\r\n   * Survery123 does not accept array type arguments for passing to scripts.\r\n   * The string will be parsed within the script that will be consumed by Survey123\r\n   * @private\r\n   */\r\n  private _calculatePCI(deductValuesString: string): void {\r\n    const pci = calculatePCI(deductValuesString, true);\r\n    const rating = pci <= 10 ? 'Failed' : pci <= 25 ? 'Serious' : pci <= 40 ?\r\n      'Very Poor' : pci <= 55 ? 'Poor' : pci <= 70 ? 'Fair' : pci <= 85 ? 'Satisfactory' : 'Good';\r\n\r\n    console.log(`PCI: ${pci}`);\r\n    console.log(`Rating: ${rating}`);\r\n    alert('See debug console for results');\r\n  }\r\n}\r\n"],"names":["ref$jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CM,MAAO,sBAAsB,WAAU;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AAuBK,SAAA,gBAAgB;AASzB,SAAQ,uBAAuB,UAAA;AAAA;;;;EAxB/B,OAAA;AAAA,SAAgB,SAAS;AAAA,EAAA;AAAA,EAmDhB,SAAiB;AACxB,UAAM,WAAW,CAAC,KAAK,gBAAgB,iBAAiB;AACxD,UAAM,cAAc,KAAK,gBAAgB,sBAAsB;AAE/D,WAAO,kBAAA,aAGS,QAAQ,CAAA,yHAIb,KAAK,sBAAA,CAAuB,8BAG3B,KAAK,oBAAA,CAAqB,0BAAA,aAGtB,WAAW,CAAA,uGAMR,MAAM,KAAK,qBAAA,CAAsB,mHAOrB,KAAK,eAAe;AAAA,EAKrD;AAAA,EAcQ,wBAAgC;AACtC,WAAO,mEAAAA,IAII,KAAK,oBAAoB,CAAA,mFAKrB,MAAM,KAAK,qBAAA,CAAsB;AAAA,EAMlD;AAAA,EAQQ,sBAA8B;AACpC,WAAO,KAAK,qBAAqB,QAAQ,8BACd,MAAM,KAAK,cAAc,KAAK,sBAAsB,OAAO,SAAS,EAAE,CAAC,gDAG/F;AAAA,EACL;AAAA,EAOQ,uBAA4B;AAClC,SAAK,gBAAgB,CAAC,KAAK;AAAA,EAC7B;AAAA,EAQQ,gBAAgB,MAAwB;AAC9C,SAAK,qBAAA;AACL,QAAI,KAAK,qBAAqB,OAAO;AACrC,WAAK,qBAAqB,MAAM,SAAS,KAAK,IAAI,OAAO,WAAW,KAAK,qBAAqB,MAAM,KAAK,CAAC,IAAI,IAC5G,IAAI,KAAK,MAAM,KAAK,KAAK;AAAA,IAC3B;AAAA,EACF;AAAA,EAUQ,cAAc,oBAAiC;AACrD,UAAM,MAAM,aAAa,oBAAoB,IAAI;AACjD,UAAM,SAAS,OAAO,KAAK,WAAW,OAAO,KAAK,YAAY,OAAO,KACnE,cAAc,OAAO,KAAK,SAAS,OAAO,KAAK,SAAS,OAAO,KAAK,iBAAiB;AAEvF,YAAQ,IAAI,QAAQ,GAAG,EAAE;AACzB,YAAQ,IAAI,WAAW,MAAM,EAAE;AAC/B,UAAM,+BAA+B;AAAA,EACvC;AACD;;"}

package/dist/components/pdf-download/customElement.js

@@ -1,13 +1,13 @@
-import { c as n } from "../../chunks/runtime.js";
-import { css as o, html as s } from "lit";
-import { d as p, a as b } from "../../chunks/downloadUtils.js";
-import { u as d } from "../../chunks/useT9n.js";
-import { createRef as g, ref as c } from "lit-html/directives/ref.js";
-import { LitElement as m } from "@arcgis/lumina";
 /*! 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.57 */
-const h = [
+v1.2.0-next.58 */
+import { c as customElement } from "../../chunks/runtime.js";
+import { css, html } from "lit";
+import { d as downloadCSV, a as downloadPDF } from "../../chunks/downloadUtils.js";
+import { u as useT9n } from "../../chunks/useT9n.js";
+import { createRef, ref } from "lit-html/directives/ref.js";
+import { LitElement } from "@arcgis/lumina";
+const labelFormats = [
   {
     descriptionPDF: {
       labelWidthDisplay: "2-5/8",
@@ -197,10 +197,12 @@ const h = [
       maxNumLabelLines: 4
     }
   }
-], P = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+];
+const pdfLabelFormats = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: h
-}, Symbol.toStringTag, { value: "Module" })), u = o`/** @license
+  default: labelFormats
+}, Symbol.toStringTag, { value: "Module" }));
+const styles = css`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -214,50 +216,64 @@ const h = [
  * 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}`;
-class y extends m {
+ */
+
+:host {
+  display: block;
+}`;
+class PdfDownload extends LitElement {
   constructor() {
-    super(...arguments), this.disabled = !1, this._translations = d({ name: "pdf-download", blocking: !0 }), this._labelInfoElement = g();
+    super(...arguments);
+    this.disabled = false;
+    this._translations = useT9n({ name: "pdf-download", blocking: true });
+    this._labelInfoElement = createRef();
   }
   static {
-    this.properties = { defaultNumLabelsPerPage: 9, disabled: 5, _translations: 16 };
+    this.properties = { defaultNumLabelsPerPage: [9, {}, { type: Number }], disabled: [5, {}, { type: Boolean }], _translations: [16, {}, { state: true }] };
   }
   static {
-    this.styles = u;
+    this.styles = styles;
   }
-  async downloadCSV(a, i, e, l = !0) {
-    return p(
-      a,
-      i,
-      !0,
+  async downloadCSV(webmap, exportInfos, removeDuplicates, addColumnTitle = true) {
+    return downloadCSV(
+      webmap,
+      exportInfos,
+      true,
       // formatUsingLayerPopup
-      e,
-      l
+      removeDuplicates,
+      addColumnTitle
     );
   }
-  async downloadPDF(a, i, e = !1, l = "", t = "") {
-    const r = this._labelInfoElement.value ? this._labelInfoElement.value.selectedOption?.value : "";
-    return b(a, i, r, e, l, t);
+  async downloadPDF(webmap, exportInfos, removeDuplicates = false, title = "", initialImageDataUrl = "") {
+    const label = this._labelInfoElement.value ? this._labelInfoElement.value.selectedOption?.value : "";
+    return downloadPDF(webmap, exportInfos, label, removeDuplicates, title, initialImageDataUrl);
   }
   render() {
-    return s`<calcite-select .disabled=${this.disabled} label ${c(this._labelInfoElement)}>${this._renderOptions()}</calcite-select>`;
+    return html`<calcite-select .disabled=${this.disabled} label ${ref(this._labelInfoElement)}>${this._renderOptions()}</calcite-select>`;
   }
-  _getLabelSizeText(a) {
-    const i = a.descriptionPDF.labelsPerPageDisplay, e = a.descriptionPDF.labelWidthDisplay + " x " + a.descriptionPDF.labelHeightDisplay;
-    return this._translations.pdfLabel ? this._translations.pdfLabel.replace("{{n}}", i).replace("{{labelSize}}", e) : "";
+  _getLabelSizeText(labelInfo) {
+    const lNum = labelInfo.descriptionPDF.labelsPerPageDisplay;
+    const lSize = labelInfo.descriptionPDF.labelWidthDisplay + " x " + labelInfo.descriptionPDF.labelHeightDisplay;
+    return this._translations.pdfLabel ? this._translations.pdfLabel.replace("{{n}}", lNum).replace("{{labelSize}}", lSize) : "";
   }
   _renderOptions() {
-    const a = P;
-    return (a.default || a).sort((e, l) => {
-      const t = Number.parseInt(e.descriptionPDF.labelsPerPageDisplay, 10), r = Number.parseInt(l.descriptionPDF.labelsPerPageDisplay, 10);
-      return t < r ? -1 : t > r ? 1 : 0;
-    }).map((e, l) => {
-      let t = !1;
-      return (this.defaultNumLabelsPerPage ? Number.parseInt(e.descriptionPDF.labelsPerPageDisplay, 10) === this.defaultNumLabelsPerPage : l === 0) && (t = !0), s`<calcite-option .selected=${t} .value=${e}>${this._getLabelSizeText(e)}</calcite-option>`;
+    const s = pdfLabelFormats;
+    const sortedPdfIndo = (s.default || s).sort((a, b) => {
+      const _a = Number.parseInt(a.descriptionPDF.labelsPerPageDisplay, 10);
+      const _b = Number.parseInt(b.descriptionPDF.labelsPerPageDisplay, 10);
+      return _a < _b ? -1 : _a > _b ? 1 : 0;
+    });
+    return sortedPdfIndo.map((l, i) => {
+      let selected = false;
+      if (this.defaultNumLabelsPerPage ? Number.parseInt(l.descriptionPDF.labelsPerPageDisplay, 10) === this.defaultNumLabelsPerPage : i === 0) {
+        selected = true;
+      }
+      return html`<calcite-option .selected=${selected} .value=${l}>${this._getLabelSizeText(l)}</calcite-option>`;
     });
   }
 }
-n("pdf-download", y);
+customElement("pdf-download", PdfDownload);
 export {
-  y as PdfDownload
+  PdfDownload
 };
+//# sourceMappingURL=customElement.js.map

package/dist/components/pdf-download/customElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"customElement.js","sources":["../../../src/components/pdf-download/pdf-download.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 * as pdfLabelFormats from './assets/data/labelFormats.json';\r\nimport * as downloadUtils from '../../utils/downloadUtils';\r\nimport type T9nStrings from './assets/t9n/messages.en.json';\r\nimport type { IExportInfos } from '../../utils/interfaces';\r\nimport { useT9n } from '../../controllers/useT9n';\r\nimport { createRef } from 'lit-html/directives/ref.js';\r\nimport {\r\n  LitElement,\r\n  property,\r\n  h,\r\n  method,\r\n  state,\r\n} from '@arcgis/lumina';\r\nimport type {\r\n  JsxNode,\r\n} from '@arcgis/lumina';\r\nimport { styles } from './pdf-download.css';\r\n\r\ndeclare global {\r\n  interface DeclareElements {\r\n    'pdf-download': PdfDownload;\r\n  }\r\n}\r\n\r\nexport class PdfDownload 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  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** number: The default number of labels per page to export */\r\n  @property() defaultNumLabelsPerPage: number | undefined;\r\n\r\n  /** boolean: Controls the enabled/disabled state of download */\r\n  @property() disabled = 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: 'pdf-download', blocking: true });\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** HTMLCalciteSelectElement: The html element for selecting buffer unit */\r\n  private _labelInfoElement = createRef<HTMLCalciteSelectElement>();\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Watch handlers\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Methods (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Downloads csv of mailing labels for the provided list of ids\r\n   *\r\n   * @param webmap Webmap containing layer\r\n   * @param exportInfos Information about items to be exported\r\n   * @param removeDuplicates When true a single label is generated when multiple featues have a shared address value\r\n   * @param addColumnTitle Indicates if column headings should be included in output\r\n   * @returns Promise resolving when function is done\r\n   */\r\n  @method()\r\n  async downloadCSV(\r\n    webmap: __esri.Map,\r\n    exportInfos: IExportInfos,\r\n    removeDuplicates: boolean,\r\n    addColumnTitle = true\r\n  ): Promise<void> {\r\n    return downloadUtils.downloadCSV(\r\n      webmap,\r\n      exportInfos,\r\n      true, // formatUsingLayerPopup\r\n      removeDuplicates,\r\n      addColumnTitle,\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Downloads pdf of mailing labels for the provided list of ids\r\n   *\r\n   * @param webmap Webmap containing layer\r\n   * @param exportInfos Information about items to be exported\r\n   * @param removeDuplicates When true a single label is generated when multiple featues have a shared address value\r\n   * @param title Title for each page\r\n   * @param initialImageDataUrl Data URL of image for first page\r\n   * @returns Promise resolving when function is done\r\n   */\r\n  @method()\r\n  async downloadPDF(\r\n    webmap: __esri.Map,\r\n    exportInfos: IExportInfos,\r\n    removeDuplicates = false,\r\n    title = '',\r\n    initialImageDataUrl = ''\r\n  ): Promise<void> {\r\n    const label = this._labelInfoElement.value ? this._labelInfoElement.value.selectedOption?.value : '';\r\n    return downloadUtils.downloadPDF(\r\n      webmap,\r\n      exportInfos,\r\n      label,\r\n      removeDuplicates,\r\n      title,\r\n      initialImageDataUrl\r\n    );\r\n  }\r\n\r\n  /** Renders the component. */\r\n  override render(): JsxNode {\r\n    return (\r\n      <calcite-select\r\n        disabled={this.disabled}\r\n        label=''\r\n        ref={this._labelInfoElement}\r\n      >\r\n        {this._renderOptions()}\r\n      </calcite-select>\r\n    );\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Functions (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Gets the formatted pdf export size text\r\n   *\r\n   * @param labelInfo current user selected label info\r\n   * @returns the pdf label as a string\r\n   * @private\r\n   */\r\n  private _getLabelSizeText(labelInfo: any): string {\r\n    const lNum = labelInfo.descriptionPDF.labelsPerPageDisplay;\r\n    const lSize = (labelInfo.descriptionPDF.labelWidthDisplay as string) +\r\n      ' x ' + (labelInfo.descriptionPDF.labelHeightDisplay as string);\r\n    return this._translations.pdfLabel ?\r\n      this._translations.pdfLabel.replace('{{n}}', lNum).replace('{{labelSize}}', lSize) : '';\r\n  }\r\n\r\n  /**\r\n   * Renders the pdf export size options and adds them to the `select` component\r\n   *\r\n   * @private\r\n   */\r\n  private _renderOptions(): JsxNode[] {\r\n    const s: any = pdfLabelFormats;\r\n    const sortedPdfIndo = (s.default || s).sort((a: any, b: any) => {\r\n      const _a = Number.parseInt(a.descriptionPDF.labelsPerPageDisplay, 10);\r\n      const _b = Number.parseInt(b.descriptionPDF.labelsPerPageDisplay, 10);\r\n      return _a < _b ? -1 : _a > _b ? 1 : 0;\r\n    });\r\n    return sortedPdfIndo.map((l: any, i: any) => {\r\n      let selected = false;\r\n      if (this.defaultNumLabelsPerPage ?\r\n        Number.parseInt(l.descriptionPDF.labelsPerPageDisplay, 10) === this.defaultNumLabelsPerPage : i === 0) {\r\n        // Setting selected wasn't enough to trigger it being the 'selectedOption'\r\n        selected = true;\r\n      }\r\n      return (\r\n        <calcite-option\r\n          selected={selected}\r\n          value={l}\r\n        >\r\n          {this._getLabelSizeText(l)}\r\n        </calcite-option>\r\n      );\r\n    });\r\n  }\r\n}\r\n"],"names":["downloadUtils.downloadCSV","downloadUtils.downloadPDF"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCM,MAAO,oBAAoB,WAAU;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA;AAoBQ,SAAA,WAAW;AAYd,SAAA,gBAAgB,OAA0B,EAAE,MAAM,gBAAgB,UAAU,MAAM;AAS3F,SAAQ,oBAAoB,UAAA;AAAA;;;;EAjC5B,OAAA;AAAA,SAAgB,SAAS;AAAA,EAAA;AAAA,EAyDzB,MAAM,YACJ,QACA,aACA,kBACA,iBAAiB,MACH;AACd,WAAOA;AAAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AAAA,EAaA,MAAM,YACJ,QACA,aACA,mBAAmB,OACnB,QAAQ,IACR,sBAAsB,IACR;AACd,UAAM,QAAQ,KAAK,kBAAkB,QAAQ,KAAK,kBAAkB,MAAM,gBAAgB,QAAQ;AAClG,WAAOC,YACL,QACA,aACA,OACA,kBACA,OACA,mBAAmB;AAAA,EAEvB;AAAA,EAGS,SAAiB;AACxB,WAAO,iCAEO,KAAK,QAAQ,cAElB,KAAK,iBAAiB,CAAA,IAE1B,KAAK,eAAA,CAAgB;AAAA,EAG5B;AAAA,EAeQ,kBAAkB,WAAuB;AAC/C,UAAM,OAAO,UAAU,eAAe;AACtC,UAAM,QAAS,UAAU,eAAe,oBACtC,QAAS,UAAU,eAAe;AACpC,WAAO,KAAK,cAAc,WACxB,KAAK,cAAc,SAAS,QAAQ,SAAS,IAAI,EAAE,QAAQ,iBAAiB,KAAK,IAAI;AAAA,EACzF;AAAA,EAOQ,iBAA2B;AACjC,UAAM,IAAS;AACf,UAAM,iBAAiB,EAAE,WAAW,GAAG,KAAK,CAAC,GAAQ,MAAU;AAC7D,YAAM,KAAK,OAAO,SAAS,EAAE,eAAe,sBAAsB,EAAE;AACpE,YAAM,KAAK,OAAO,SAAS,EAAE,eAAe,sBAAsB,EAAE;AACpE,aAAO,KAAK,KAAK,KAAK,KAAK,KAAK,IAAI;AAAA,IACtC,CAAC;AACD,WAAO,cAAc,IAAI,CAAC,GAAQ,MAAU;AAC1C,UAAI,WAAW;AACf,UAAI,KAAK,0BACP,OAAO,SAAS,EAAE,eAAe,sBAAsB,EAAE,MAAM,KAAK,0BAA0B,MAAM,GAAG;AAEvG,mBAAW;AAAA,MACb;AACA,aAAO,iCAEO,QAAQ,WACX,CAAC,IAEP,KAAK,kBAAkB,CAAC,CAAC;AAAA,IAGhC,CAAC;AAAA,EACH;AACD;;"}

package/dist/components/public-notification/customElement.d.ts

@@ -16,9 +16,9 @@ export declare class PNStateController extends Controller {
 export declare class PublicNotification extends LitElement {
     /** string[]: List of layer ids that should be shown as potential addressee layers */
     addresseeLayerIds: string[];
-    /** string | number[] |  object with r, g, b, a: https://developers.arcgis.com/javascript/latest/api-reference/esri-Color.html */
+    /** string | number[] |  object with r, g, b, a: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-Color.html */
     bufferColor: any;
-    /** string | number[] | object with r, g, b, a: https://developers.arcgis.com/javascript/latest/api-reference/esri-Color.html */
+    /** string | number[] | object with r, g, b, a: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-Color.html */
     bufferOutlineColor: any;
     /**
      * boolean: When true the user can define a name for each notification list
@@ -83,7 +83,7 @@ export declare class PublicNotification extends LitElement {
     /**
      * The effect that will be applied when featureHighlightEnabled is true
      *
-     * esri/layers/support/FeatureEffect: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-support-FeatureEffect.html
+     * esri/layers/support/FeatureEffect: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-layers-support-FeatureEffect.html
      */
     featureEffect: __esri.FeatureEffect | undefined;
     /**
@@ -92,7 +92,7 @@ export declare class PublicNotification extends LitElement {
      * @default false
      */
     featureHighlightEnabled: boolean;
-    /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
+    /** esri/views/MapView: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
     mapView: __esri.MapView | undefined;
     /**
      * string: The value to show for no results
@@ -128,27 +128,27 @@ export declare class PublicNotification extends LitElement {
      */
     showSearchSettings: boolean;
     /**
-     * esri/symbols/SimpleLineSymbol | JSON representation : https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleLineSymbol.html
+     * esri/symbols/SimpleLineSymbol | JSON representation : https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleLineSymbol.html
      *
      * A JSON representation of the instance in the ArcGIS format.
      * See the ArcGIS REST API documentation for examples of the structure of various input JSON objects.
-     * https://developers.arcgis.com/documentation/common-data-types/symbol-objects.htm
+     * https://next.gha.afd.arcgis.com/documentation/common-data-types/symbol-objects.htm
      */
     sketchLineSymbol: __esri.SimpleLineSymbol | undefined;
     /**
-     * esri/symbols/SimpleMarkerSymbol | JSON representation: https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleMarkerSymbol.html
+     * esri/symbols/SimpleMarkerSymbol | JSON representation: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleMarkerSymbol.html
      *
      * A JSON representation of the instance in the ArcGIS format.
      * See the ArcGIS REST API documentation for examples of the structure of various input JSON objects.
-     * https://developers.arcgis.com/documentation/common-data-types/symbol-objects.htm
+     * https://next.gha.afd.arcgis.com/documentation/common-data-types/symbol-objects.htm
      */
     sketchPointSymbol: __esri.SimpleMarkerSymbol | undefined;
     /**
-     * esri/symbols/SimpleFillSymbol | JSON representation: https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleFillSymbol.html
+     * esri/symbols/SimpleFillSymbol | JSON representation: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleFillSymbol.html
      *
      * A JSON representation of the instance in the ArcGIS format.
      * See the ArcGIS REST API documentation for examples of the structure of various input JSON objects.
-     * https://developers.arcgis.com/documentation/common-data-types/symbol-objects.htm
+     * https://next.gha.afd.arcgis.com/documentation/common-data-types/symbol-objects.htm
      */
     sketchPolygonSymbol: __esri.SimpleFillSymbol | undefined;
     /** Emitted on demand when searchConfiguration gets a new value */