@esri/solutions-components 1.0.0-next.20250501.2 → 1.0.0-next.20250506.1

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

@@ -11,7 +11,7 @@ import { LitElement as E, createEvent as T, noShadowRoot as O, safeClassMap as f
 import { css as F } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.0/esri/copyright.txt for details.
-v1.0.0-next.20250501.2 */
+v1.0.0-next.20250506.1 */
 const D = F`@layer{/** @license
  * Copyright 2025 Esri
  *
@@ -40,54 +40,22 @@ class N extends E {
   static {
     this.shadowRootOptions = O;
   }
-  /** TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code */
   willUpdate(e) {
     e.has("geometries") && (this.hasUpdated || this.geometries?.length > 0) && this.watchGeometriesHandler(this.geometries, e.get("geometries")), e.has("mapView") && this.mapView && this.mapViewWatchHandler(this.mapView, e.get("mapView")), e.has("searchConfiguration") && this.searchConfiguration && this.watchSearchConfigurationHandler(this.searchConfiguration, e.get("searchConfiguration"));
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Watch handlers
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Called each time the geometries prop is changed.
-   *
-   * @returns Promise when complete
-   */
   async watchGeometriesHandler(e, t) {
     if (e !== t && e.length > 0)
       return this._highlightWithOIDsOrGeoms();
   }
-  /** Called each time the mapView prop is changed. */
   async mapViewWatchHandler(e, t) {
     e && e !== t && await this._init();
   }
-  /**
-   * Called each time the searchConfiguration prop is changed.
-   *
-   * @returns Promise when complete
-   */
   async watchSearchConfigurationHandler(e, t) {
     JSON.stringify(e) !== JSON.stringify(t) && await this._initSearchWidget();
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Methods (public)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Clear any selection results
-   *
-   * @returns Promise when the results have been cleared
-   */
   async clearSelection() {
     return this._clearResults(!0, !0);
   }
-  /**
-   * Get the new selection set
-   *
-   * @returns Promise with the new selection set
-   */
   async getSelection() {
     return /\S+/gm.test(this._selectionLabel) || await this._updateLabel(), {
       id: this.isUpdate && this.selectionSet ? this.selectionSet.id : Date.now(),
@@ -109,39 +77,30 @@ class N extends E {
       sketchGraphic: this._sketchGraphic
     };
   }
-  /** Handle changes to the search configuration */
   searchConfigurationChangeChanged(e) {
     this.searchConfiguration = e.detail;
   }
-  /** Handle changes to the buffer distance value */
   async distanceChanged(e) {
     await this._distanceChanged(e.detail);
   }
-  /** Handle changes to the buffer unit */
   async unitChanged(e) {
     e.detail.newValue !== e.detail.oldValue && (this._unit = e.detail.newValue, await this._updateLabel());
   }
-  /** Called once just after the component is first connected to the DOM. */
   async load() {
     await this._initModules();
   }
-  /** Called once just after the component is fully loaded and the first render() occurs. */
-  /** This lifecycle method is not expected to return a promise. The returned promise will be ignored by Lit rather than awaited. */
   async loaded() {
     await this._init();
   }
-  /** Renders the component. */
   render() {
     const e = this.enableSketchTools ? "" : "display-none", t = this.enableSketchTools ? "padding-top-1" : "";
     return c`${this._getMapLayerPicker()}<div class="border-bottom"></div><div class="padding-top-sides-1"><div class="search-widget" ${y(this._searchElement)}></div><div class=${f(t)}><map-draw-tools active class=${f(e)} .editGraphicsEnabled=${!this.useLayerFeaturesEnabled} .graphics=${this._graphics} .mapView=${this.mapView} @sketchGraphicsChange=${(s) => void this._sketchGraphicsChanged(s)} .pointSymbol=${this.sketchPointSymbol} .polygonSymbol=${this.sketchPolygonSymbol} .polylineSymbol=${this.sketchLineSymbol} ${y(this._drawTools)}></map-draw-tools></div>${this.enableSearchDistance ? this._getBufferOptions() : void 0}${this.enableLayerFeatures ? this._getUseLayerFeaturesOptions() : void 0}${this._getNumSelected()}</div><div class="border-bottom"></div>${this._getNameInput()}`;
   }
-  /** Renders the buffer tools component. */
   _getBufferOptions() {
     this.enableSearchDistanceOnLoad && (this.searchDistanceEnabled = !0, this.enableSearchDistanceOnLoad = !1);
     const e = this.searchDistanceEnabled ? "search-distance" : "div-not-visible", t = typeof this.selectionSet?.distance == "number" ? this.selectionSet.distance : this.defaultBufferDistance;
     return c`<div><div class="padding-top-1 display-flex"><calcite-label class="label-margin-0 w-100" layout=inline-space-between><div class="tooltip-container">${this._translations.searchDistance}<calcite-icon class="padding-start-1-2 icon" .flipRtl=${this._translations._lang?.toLowerCase() !== "he"} icon=question id=search-distance-icon scale=s></calcite-icon></div></calcite-label><calcite-popover closable label overlay-positioning=fixed reference-element=search-distance-icon><span class="tooltip-message">${this._translations.useSearchDistanceTootip}</span></calcite-popover><calcite-switch .checked=${this.searchDistanceEnabled} @calciteSwitchChange=${() => this.searchDistanceEnabled = !this.searchDistanceEnabled}></calcite-switch></div><div class=${f(e)}><buffer-tools .disabled=${!this.searchDistanceEnabled} .distance=${t} .geometries=${this.geometries} @bufferComplete=${(s) => void this._bufferComplete(s)} .unit=${this.selectionSet?.unit || this.defaultBufferUnit} ${y(this._bufferTools)}></buffer-tools></div></div>`;
   }
-  /** Renders the map layer picker component. */
   _getUseLayerFeaturesOptions() {
     this.enableLayerFeaturesOnLoad && (this.useLayerFeaturesEnabled = !0, this.enableLayerFeaturesOnLoad = !1);
     const e = this.useLayerFeaturesEnabled ? "div-visible" : "div-not-visible";
@@ -151,39 +110,20 @@ class N extends E {
       this._layerSelectionChange(t);
     }} .selectedIds=${this.layerViews.map((t) => t.layer.id)}></map-layer-picker></div></div>`;
   }
-  /** Renders the number of selected features */
   _getNumSelected() {
     const e = this._translations._lang === "en" ? `${this._translations.selectionLoading}...` : this._translations.selectionLoading;
     return c`<div class="padding-top-1 padding-bottom-1" style=${$({ "align-items": "end", display: "flex" })}>${this._selectionLoading ? c`<div><calcite-loader class="info-blue padding-end-1-2" inline .label=${e || ""} scale=m type=indeterminate></calcite-loader></div>` : c`<calcite-icon class="info-blue padding-end-1-2" icon=feature-layer scale=s></calcite-icon>`}<calcite-input-message class="info-blue" scale=m>${this._selectionLoading ? e : this.noResultText && this._numSelected === 0 ? this.noResultText : this._translations.selectedFeatures.replace("{{n}}", this._numSelected.toString())}</calcite-input-message></div>`;
   }
-  /** Renders the custom label input */
   _getNameInput() {
     const e = this.customLabelEnabled ? "" : "display-none";
     return c`<div class=${`padding-sides-1 padding-top-1 ${e}`}><calcite-label class="font-bold">${this._translations.listName}<calcite-input @input=${() => {
       this._selectionLabel = this._labelName.value ? this._labelName.value.value : "";
     }} .placeholder=${this._translations.listNamePlaceholder} .value=${this._selectionLabel || ""} ${y(this._labelName)}></calcite-input></calcite-label></div>`;
   }
-  /**
-   * Create the UI element that will expose the addressee layers
-   *
-   * @returns addressee layer list node
-   * @protected
-   */
   _getMapLayerPicker() {
     const e = this.selectionSet?.layerView?.layer.id;
     return c`<div class="display-flex padding-sides-1 padding-bottom-1"><calcite-label class="font-bold width-full label-margin-0">${this._translations.inputLayer}<map-layer-picker .enabledLayerIds=${this.enabledLayerIds} .mapView=${this.mapView} @layerSelectionChange=${(t) => void this._inputLayerSelectionChange(t)} .selectedIds=${this.selectLayerView ? [this.selectLayerView.layer.id] : this.selectionSet && e !== void 0 ? [e] : []}></map-layer-picker></calcite-label></div>`;
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Functions (protected)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Load esri javascript api modules
-   *
-   * @returns Promise resolving when function is done
-   * @protected
-   */
   async _initModules() {
     const [e, t, s, i, a, l] = await S([
       "esri/request",
@@ -195,19 +135,9 @@ class N extends E {
     ]);
     this._esriRequest = e, this.GraphicsLayer = t, this.Graphic = s, this.Search = i, this._geometryEngine = a, this.FeatureLayer = l;
   }
-  /**
-   * Initialize the graphics layer, selection set, and search widget
-   *
-   * @returns Promise when the operation has completed
-   */
   async _init() {
     this._initGraphicsLayer(), await this._initSelectionSet(), await this._initSearchWidget();
   }
-  /**
-   * Initialize the state of the component with any stored values in a selection set
-   *
-   * @protected
-   */
   async _initSelectionSet() {
     this.selectionSet && (this._searchTerm = this.selectionSet.searchResult?.name, this._searchResult = this.selectionSet.searchResult, this._selectLayers = this.selectionSet.selectLayers, this._selectedIds = this.selectionSet.selectedIds, this._skipGeomOIDs = this.selectionSet.skipGeomOIDs || [], this.searchDistanceEnabled = this.selectionSet.searchDistanceEnabled, this.useLayerFeaturesEnabled = this.selectionSet.useLayerFeaturesEnabled, this._distance = this.selectionSet.searchDistanceEnabled ? this.selectionSet.distance : 0, this._unit = this.selectionSet.unit, this._workflowType = this.selectionSet.workflowType, this.selectLayerView = this.selectionSet.layerView, this._sketchGraphic = this.selectionSet.sketchGraphic, this.geometries = [...this.selectionSet?.geometries || []], this._graphics = this.geometries.reduce((e, t) => {
       const s = t.type === "point" ? this.sketchPointSymbol : t.type === "polyline" ? this.sketchLineSymbol : this.sketchPolygonSymbol;
@@ -217,11 +147,6 @@ class N extends E {
       })), e;
     }, []), this._selectionLabel = this.selectionSet?.label, this.useLayerFeaturesEnabled || await this._drawTools.value?.updateGraphics(), this.selectionSet.layerView && this.mapView && await v(this.selectionSet.selectedIds, this.selectionSet.layerView, this.mapView, !1));
   }
-  /**
-   * Initialize the search widget
-   *
-   * @protected
-   */
   async _initSearchWidget() {
     if (this.mapView && this._searchElement.value) {
       const e = this.searchConfiguration && this._getSearchConfig(this.searchConfiguration, this.mapView), t = {
@@ -240,13 +165,6 @@ class N extends E {
       }));
     }
   }
-  /**
-   * Handle the result from the search widget.
-   *
-   * @param url the url of the layer view
-   * @returns the url of the views source
-   * @protected
-   */
   async _selectResult(e) {
     if (e) {
       this._searchResult = e;
@@ -264,13 +182,6 @@ class N extends E {
       this._clearResults(!1, t);
     }
   }
-  /**
-   * Get the source url for a view. This function supports single source views only.
-   *
-   * @param url the url of the layer view
-   * @returns the url of the views source
-   * @protected
-   */
   async _getViewSourceUrl(e) {
     let t = "";
     const s = `${e}/sources?f=json`;
@@ -286,22 +197,9 @@ class N extends E {
     }
     return t;
   }
-  /**
-   * Check if the current label should be cleared
-   *
-   * @returns true when the current label is based on search result
-   * @protected
-   */
   _searchClearLabel() {
     return this._searchResult?.name && this._labelName.value && this._labelName.value.value.indexOf(this._searchResult.name) > -1;
   }
-  /**
-   * Initialize the search widget based on user defined configuration
-   *
-   * @param searchConfiguration search configuration defined by the user
-   * @param view the current map view
-   * @protected
-   */
   _getSearchConfig(e, t) {
     const s = e?.sources;
     return s && s?.length > 0 ? (e = {
@@ -309,7 +207,7 @@ class N extends E {
       includeDefaultSources: !1
     }, s.forEach((i) => {
       if (i.hasOwnProperty("layer")) {
-        const l = i, r = l.layer?.id, o = r ? t.map.findLayerById(r) : null, h = l?.layer?.url;
+        const l = i, r = l.layer?.id, o = r ? t.map?.findLayerById(r) : null, h = l?.layer?.url;
         o && l ? l.layer = o : h && this.FeatureLayer && (l.layer = new this.FeatureLayer(h));
       }
     }), s?.forEach((i) => {
@@ -326,11 +224,6 @@ class N extends E {
       includeDefaultSources: !0
     }, e;
   }
-  /**
-   * Initialize the graphics layer used to store any buffer grapghics
-   *
-   * @protected
-   */
   _initGraphicsLayer() {
     const e = this._translations.bufferLayer;
     if (this.mapView) {
@@ -344,13 +237,6 @@ class N extends E {
       }
     }
   }
-  /**
-   * Handle changes in the sketch graphics
-   *
-   * @param event stores the graphics that will be used to select features
-   * @param forceUpdate when true the drawn graphic will be used to select features from
-   * use layer features layer...then the selected layer features will be used to select from the main input layer
-   */
   async _sketchGraphicsChanged(e, t = !1) {
     const s = e.detail.graphics;
     if (s.length > 0 && s[0])
@@ -364,38 +250,15 @@ class N extends E {
     else
       await this._clearResults(!0, !0);
   }
-  /**
-   * Highlight the features in the map based on OIDs when skipOIDs have been defined
-   *
-   * @protected
-   */
   async _highlightWithOIDsOrGeoms() {
     return this._skipGeomOIDs && this._skipGeomOIDs?.length > 0 ? (this._selectedIds = this._skipGeomOIDs, this._highlightFeatures(this._selectedIds)) : this._geomQuery(this.geometries);
   }
-  /**
-   * Highlight the features in the map
-   *
-   * @param ids the ids that should be highlighted
-   * @protected
-   */
   async _highlightFeatures(e) {
     u.removeHandles(), e.length > 0 && this.selectLayerView && this.mapView && u.highlightHandles.push(await C(e, this.selectLayerView, this.mapView)), this._numSelected = e.length, this.selectionSetChange.emit(e.length);
   }
-  /**
-   * Query the selectLayerView based on any user drawn geometries or buffers
-   *
-   * @param geometries Array of geometries used for the selection of ids from the select layer view
-   * @returns Promise when the selection is complete and the graphics have been highlighted
-   */
   async _selectFeatures(e) {
     this._selectionLoading = !0, this._selectedIds = this.selectLayerView && await G(e, this.selectLayerView.layer) || [], this._selectionLoading = !1, this._drawTools.value && (this._drawTools.value.graphics = this._graphics), await this._highlightFeatures(this._selectedIds);
   }
-  /**
-   * Query the selectLayerView based on any user drawn geometries or buffers
-   *
-   * @param _evt CustomEvent that contains the result of the buffer
-   * @protected
-   */
   async _bufferComplete(e) {
     this._bufferGeometry = Array.isArray(e.detail) ? e.detail[0] : e.detail;
     let t = this._bufferTools.value && Number(this._bufferTools.value.distance), s = 0;
@@ -419,64 +282,25 @@ class N extends E {
       newValue: s
     });
   }
-  /**
-   * Fetch a single geometry for each potential geometry type
-   *
-   * @param geometries All current selection geometries
-   * @protected
-   */
   _geomQuery(e) {
     const t = this._geometryEngine && V(e, this._geometryEngine);
     return t ? this._selectFeatures(t) : Promise.resolve();
   }
-  /**
-   * Clear all stored values and general state for the component
-   *
-   * @param clearSearchWidget Optional boolean for clearing the search widget (default is true)
-   * @param clearLabel Optional boolean for clearing the search label (default is true)
-   * @protected
-   */
   async _clearResults(e = !0, t = !1) {
     this._selectedIds = [], this._distance = void 0, this._unit = void 0, t && (this._selectionLabel = "", this._labelName.value && (this._labelName.value.value = "")), this._bufferGraphicsLayer && this._bufferGraphicsLayer.removeAll(), e && this._searchWidget && this._clearSearchWidget(), u.removeHandles(), this._drawTools.value?.clear && (this._graphics = [], await this._drawTools.value.clear()), this._numSelected = this._selectedIds.length, this.selectionSetChange.emit(this._numSelected);
   }
-  /**
-   * Clear all the search widget and any stored search result
-   *
-   * @protected
-   */
   _clearSearchWidget() {
     this._searchWidget?.clear(), this._searchResult = void 0;
   }
-  /**
-   * Fetch a single geometry for the current geometry type
-   *
-   * @param type worflow type
-   * @param graphics graphics to be used for selection
-   * @param label selection label
-   * @param useOIDs indicates if the OIDs should override the geometry for selection
-   * @param oids list of IDs to select when useOIDs is true
-   * @protected
-   */
   _updateSelection(e, t, s) {
     this._selectedIds = t && s ? s : this._selectedIds, this._skipGeomOIDs = t ? s : void 0, this.geometries = Array.isArray(e) ? e.reduce((i, a) => (a.geometry && i.push(a.geometry), i), []) : this.geometries, this._graphics = e;
   }
-  /**
-   * Updates the label for the selection set
-   *
-   * @protected
-   */
   async _updateLabel() {
     if (this.enableSearchDistance) {
       const e = this._translations.sketch && this._selectionLabel.indexOf(this._translations.sketch) > -1, t = this._translations.select && this._selectionLabel.indexOf(this._translations.select) > -1, s = this._selectionLabel.indexOf(this._searchResult?.name) > -1, i = this._workflowType === d.SEARCH ? this._searchResult?.name : this._workflowType === d.SELECT ? this._translations.select : this._translations.sketch, a = !this._unit && this._bufferTools.value ? this._bufferTools.value.unit : this._unit, l = this._bufferTools.value && a && await this._bufferTools.value.getTranslatedUnit(a), r = Number.isNaN(Number(this._distance)) && this._bufferTools.value ? this._bufferTools.value.distance : this._distance;
       this._selectionLabel = e || t || s || !this._selectionLabel ? `${i} ${r} ${l}` : this._selectionLabel, this._labelName.value && (this._labelName.value.value = this._selectionLabel);
     }
   }
-  /**
-   * Gets the layer views from the map when the layer selection changes
-   *
-   * @returns Promise resolving when function is done
-   * @protected
-   */
   async _layerSelectionChange(e) {
     if (Array.isArray(e.detail) && e.detail.length > 0) {
       const t = e.detail.reduce((s, i) => (this.mapView && s.push(b(this.mapView, i)), s), []);
@@ -490,28 +314,13 @@ class N extends E {
       });
     }
   }
-  /**
-   * Fetch the layer from the map
-   *
-   * @param _evt layer selection change event
-   * @returns Promise when the function has completed
-   * @protected
-   */
   async _inputLayerSelectionChange(e) {
     const t = e?.detail?.length > 0 ? e.detail[0] : "";
     (!this.selectLayerView || t !== this.selectLayerView.layer.id) && (this.selectLayerView = this.mapView && await b(this.mapView, t), await this._updateLabel(), this._bufferGeometry ? await this._selectFeatures([this._bufferGeometry]) : await this._highlightWithOIDsOrGeoms());
   }
-  /** Handle changes to the buffer distance value */
   async _distanceChanged(e) {
     e.newValue !== e.oldValue && (this._distance = e.newValue, await this._updateLabel());
   }
-  /**
-   * Select features based on the input geometry
-   *
-   * @param geom the geometry used for selection
-   * @returns Promise resolving when function is done
-   * @protected
-   */
   async _selectLayerFeatures(e) {
     this._selectionLoading = !0;
     const t = this.layerViews.map((s) => (this._featuresCollection[s.layer.id] = [], I(0, s.layer, e, this._featuresCollection)));
@@ -537,11 +346,6 @@ class N extends E {
       }, !0);
     });
   }
-  /**
-   * Store use layer features value and re-select features based on the original sketch graphic
-   *
-   * @protected
-   */
   _useLayerFeaturesEnabledChanged() {
     this.useLayerFeaturesEnabled = !this.useLayerFeaturesEnabled, this._sketchGraphic && this._sketchGraphicsChanged({
       detail: {

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

@@ -12,34 +12,74 @@ import { BasemapGallery } from '../basemap-gallery/customElement.js';
 export declare class MapTools extends LitElement {
     /** IBasemapConfig: List of any basemaps to filter out from the basemap widget */
     basemapConfig: IBasemapConfig | undefined;
-    /** boolean: when true the legend widget will be available */
+    /**
+     * boolean: when true the legend widget will be available
+     *
+     * @default false
+     */
     enableLegend: boolean;
-    /** boolean: when true the floor filter widget will be available */
+    /**
+     * boolean: when true the floor filter widget will be available
+     *
+     * @default false
+     */
     enableFloorFilter: boolean;
-    /** boolean: when true the fullscreen widget will be available */
+    /**
+     * boolean: when true the fullscreen widget will be available
+     *
+     * @default false
+     */
     enableFullscreen: boolean;
-    /** boolean: when true the search widget will be available */
+    /**
+     * boolean: when true the search widget will be available
+     *
+     * @default false
+     */
     enableSearch: boolean;
-    /** boolean: when true the basemap widget will be available */
+    /**
+     * boolean: when true the basemap widget will be available
+     *
+     * @default false
+     */
     enableBasemap: boolean;
-    /** boolean: when true the home widget will be available */
+    /**
+     * boolean: when true the home widget will be available
+     *
+     * @default false
+     */
     enableHome: boolean;
     /**
      * boolean: when true map tools will be displayed within a single expand/collapse widget
      * when false widgets will be loaded individually into expand widgets
+     *
+     * @default false
      */
     enableSingleExpand: boolean;
-    /** "s" | "m" | "l": Used for Zoom and Home tools */
+    /**
+     * "s" | "m" | "l": Used for Zoom and Home tools
+     *
+     * @default 'm'
+     */
     homeZoomToolsSize: 'l' | 'm' | 's';
-    /** "horizontal" | "vertical": used to control the orientation of the tools */
+    /**
+     * "horizontal" | "vertical": used to control the orientation of the tools
+     *
+     * @default 'vertical'
+     */
     layout: 'horizontal' | 'vertical';
     /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
     mapView: __esri.MapView | undefined;
-    /** "s" | "m" | "l": Used for optional map tool widget */
+    /**
+     * "s" | "m" | "l": Used for optional map tool widget
+     *
+     * @default 'm'
+     */
     mapWidgetsSize: 'l' | 'm' | 's';
     /**
      * __esri.UIPosition: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-UI.html#UIPosition
      * The position details for the tools
+     *
+     * @default 'top-right'
      */
     position: __esri.UIPosition;
     /** ISearchConfiguration: Configuration details for the Search widget */
@@ -47,6 +87,8 @@ export declare class MapTools extends LitElement {
     /**
      * boolean: When true the map widget tools will have no margin between them.
      * When false the map widget tools will have a margin between them.
+     *
+     * @default true
      */
     stackTools: boolean;
     /** Valid tools: "legend", "search", "fullscreen", "basemap", "floorfilter" */

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

@@ -7,7 +7,7 @@ import { LitElement as W, safeClassMap as o } from "@arcgis/lumina";
 import { css as v } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.0/esri/copyright.txt for details.
-v1.0.0-next.20250501.2 */
+v1.0.0-next.20250506.1 */
 const x = v`/** @license
  * Copyright 2025 Esri
  *
@@ -33,22 +33,14 @@ class E extends W {
   static {
     this.styles = x;
   }
-  /** TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code */
   willUpdate(e) {
     e.has("mapView") && this.mapViewWatchHandler(), e.has("_showBasemapWidget") && (this.hasUpdated || this._showBasemapWidget !== !1) && this._showBasemapWidgetWatchHandler(this._showBasemapWidget), e.has("_showFloorFilter") && (this.hasUpdated || this._showFloorFilter !== !1) && this._showFloorFilterWatchHandler(this._showFloorFilter), e.has("_showFullscreen") && (this.hasUpdated || this._showFullscreen !== !1) && this._showFullscreenWatchHandler(this._showFullscreen), e.has("_showLegendWidget") && (this.hasUpdated || this._showLegendWidget !== !1) && this._showLegendWidgetWatchHandler(this._showLegendWidget), e.has("_showSearchWidget") && (this.hasUpdated || this._showSearchWidget !== !1) && this._showSearchWidgetWatchHandler(this._showSearchWidget);
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Watch handlers
-  //
-  //--------------------------------------------------------------------------
-  /** When the mapView loads check if it supports floor awareness */
   async mapViewWatchHandler() {
     await this.mapView?.when(() => {
       this._hasFloorInfo = this.mapView?.map?.floorInfo;
     });
   }
-  /** When the _showBasemapWidget property is true display the basemap gallery */
   async _showBasemapWidgetWatchHandler(e) {
     const s = this._basemapElement.value ? this._basemapElement.value.basemapWidget : void 0;
     s && (e ? this.mapView?.ui.add(s, {
@@ -56,7 +48,6 @@ class E extends W {
       index: 1
     }) : this.mapView?.ui.remove(s));
   }
-  /** When the _showBasemapWidget property is true display the basemap gallery */
   async _showFloorFilterWatchHandler(e) {
     const s = this._floorFilterElement.value ? this._floorFilterElement.value.floorFilterWidget : void 0;
     s && (e ? this.mapView?.ui.add(s, {
@@ -64,12 +55,10 @@ class E extends W {
       index: 1
     }) : this.mapView?.ui.remove(s));
   }
-  /** When the _showFullscreen property is true the app will consume the full screen */
   async _showFullscreenWatchHandler(e) {
     const s = this._fullscreenElement.value ? this._fullscreenElement.value.fullscreenWidget : void 0;
     s && (e ? s.viewModel.state === "ready" && s.viewModel.enter() : s.viewModel.state === "active" && s.viewModel.exit());
   }
-  /** When the _showLegendWidget property is true display the search widget */
   async _showLegendWidgetWatchHandler(e) {
     const s = this._legendElement.value ? this._legendElement.value.legendWidget : void 0;
     s && (e ? this.mapView?.ui.add(s, {
@@ -77,7 +66,6 @@ class E extends W {
       index: 1
     }) : this.mapView?.ui.remove(s));
   }
-  /** When the _showSearchWidget property is true display the search widget */
   async _showSearchWidgetWatchHandler(e) {
     const s = this._searchElement.value ? this._searchElement.value.searchWidget : void 0;
     s && (e ? this.mapView?.ui.add(s, {
@@ -85,36 +73,18 @@ class E extends W {
       index: 1
     }) : this.mapView?.ui.remove(s));
   }
-  /** Called once just after the component is first connected to the DOM. */
   async load() {
     await this._initModules();
   }
-  /** Renders the component. */
   render() {
     this._setZoomToolsSize();
     const e = this._showTools ? "chevrons-up" : "chevrons-down", s = this._showTools ? "" : "display-none", i = this._showSearchWidget ? "" : "display-none", t = this._showBasemapWidget ? "" : "display-none", a = this._showLegendWidget ? "" : "display-none", l = this._showFloorFilter ? "" : "display-none", r = this._showFullscreen ? "" : "display-none", c = this._showTools ? this._translations.collapse : this._translations.expand, p = !this.enableBasemap && !this.enableFullscreen && !this.enableLegend && !this.enableSearch ? "display-none" : "", m = this.enableSingleExpand ? "margin-top-1-2" : "", g = this.toolOrder ? this.toolOrder : ["legend", "search", "fullscreen", "floorfilter"], _ = this.stackTools ? "box-shadow" : "";
     return d`<div class=${o(p)}>${this.enableSingleExpand ? d`<div class="box-shadow">${this._getActionGroup(e, !1, c || "", () => this._toggleTools())}</div>` : void 0}<div class=${`${m} ${_} ${s}`}>${this._getMapWidgets(g)}</div></div><basemap-gallery .basemapConfig=${this.basemapConfig} class=${o(t)} .mapView=${this.mapView} ${n(this._basemapElement)}></basemap-gallery><map-search class=${o(i)} .mapView=${this.mapView} result-graphic-enabled .searchConfiguration=${this.searchConfiguration} ${n(this._searchElement)}></map-search><map-legend class=${o(a)} .mapView=${this.mapView} ${n(this._legendElement)}></map-legend><map-fullscreen class=${o(r)} .mapView=${this.mapView} @fullscreenStateChange=${(w) => this._fullscreenStateChange(w.detail)} ${n(this._fullscreenElement)}></map-fullscreen><floor-filter class=${o(l)} .enabled=${this.enableFloorFilter} .mapView=${this.mapView} ${n(this._floorFilterElement)}></floor-filter>`;
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Functions (protected)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Load esri javascript api modules
-   *
-   * @returns Promise resolving when function is done
-   * @protected
-   */
   async _initModules() {
     const [e] = await f(["esri/widgets/Expand"]);
     this.Expand = e;
   }
-  /**
-   * Set the size of the zoom tools based on the user defined homeZoomToolsSize variable.
-   *
-   * @protected
-   */
   _setZoomToolsSize() {
     const e = document.getElementsByClassName("esri-zoom")[0]?.children[0], s = document.getElementsByClassName("esri-zoom")[0]?.children[1];
     if (e && s) {
@@ -122,11 +92,6 @@ class E extends W {
       e.style.width = i, e.style.height = i, s.style.width = i, s.style.height = i;
     }
   }
-  /**
-   * Get the map widgets considering the user defined enabled values and tool order
-   *
-   * @protected
-   */
   _getMapWidgets(e) {
     const s = this._showFullscreen ? "full-screen-exit" : "full-screen", i = this._showFullscreen ? this._translations.exitFullscreen : this._translations.enterFullscreen;
     return e.map((t) => {
@@ -146,37 +111,13 @@ class E extends W {
       }
     });
   }
-  /**
-   * Respond to fullscreen state change and ensure our state var is in sync
-   *
-   * @param state The fullscreen view model's state.
-   * @protected
-   */
   _fullscreenStateChange(e) {
     e === "ready" && this._showFullscreen ? this._showFullscreen = !1 : e === "active" && !this._showFullscreen && (this._showFullscreen = !0);
   }
-  /**
-   * Get a calcite action group for the current action
-   *
-   * @param icon the icon to display for the current action
-   * @param disabled should the action be disabled
-   * @param tip information tip to display helpful details to end user
-   * @param func the associated onClick function to execute
-   * @returns the dom node for the action group
-   * @protected
-   */
   _getActionGroup(e, s, i, t) {
     const a = this.mapWidgetsSize === "s" ? "square-32" : this.mapWidgetsSize === "m" ? "square-40" : "square-48", l = this.stackTools ? "" : "margin-bottom-1-2", r = this.stackTools ? "" : "box-shadow";
     return d`<div><calcite-action alignment=center class=${`${a} ${l} border-bottom ${r}`} .disabled=${s} .icon=${e} id=${e ?? F} @click=${t} scale=s text><calcite-icon icon=cheveron-up scale=s slot=icon></calcite-icon></calcite-action><calcite-tooltip label placement=trailing .referenceElement=${e}><span>${i}</span></calcite-tooltip></div>`;
   }
-  /**
-   * Add the widget to the UI and optionally to an Expand widget
-   *
-   * @param name the icon to display for the current action
-   * @param content the widget to display
-   * @param internalExpand when true the widget will be added to an Expand widget
-   * @protected
-   */
   _getWidget(e, s, i) {
     if (this._widgets.indexOf(e) < 0 && this.mapView && s) {
       const t = this.toolOrder.indexOf(e), a = this.Expand && new this.Expand({
@@ -189,27 +130,21 @@ class E extends W {
       }), this._widgets.push(e);
     }
   }
-  /** Show/Hide the legend widget */
   _showLegend() {
     this._showLegendWidget = !this._showLegendWidget, this._showTools = !1;
   }
-  /** Show/Hide the search widget */
   _search() {
     this._showSearchWidget = !this._showSearchWidget, this._showTools = !1;
   }
-  /** Show/Hide the basemap picker */
   _toggleBasemapPicker() {
     this._showBasemapWidget = !this._showBasemapWidget, this._showTools = !1;
   }
-  /** Show/Hide the floor filter */
   _toggleFloorFilter() {
     this._showFloorFilter = !this._showFloorFilter, this._showTools = !1;
   }
-  /** Enter/Exit fullscreen mode */
   _expand() {
     this._showFullscreen = !this._showFullscreen;
   }
-  /** Show/Hide the map tools */
   _toggleTools() {
     this._showTools || (this._showBasemapWidget = !1, this._showSearchWidget = !1, this._showLegendWidget = !1, this._showFloorFilter = !1), this._showTools = !this._showTools;
   }