@esri/solutions-components 0.7.16 → 0.7.18

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

@@ -92,10 +92,11 @@ export class MapCard {
      * Renders the component.
      */
     render() {
+        var _a, _b;
         const mapClass = this.hidden ? "visibility-hidden" : "";
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        const mapPickerClass = this.mapInfos?.length > 1 ? "" : "display-none";
-        const mapHeightClass = this.mapInfos?.length > 1 ? "map-height" : "height-full";
+        const mapPickerClass = ((_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.length) > 1 ? "" : "display-none";
+        const mapHeightClass = ((_b = this.mapInfos) === null || _b === void 0 ? void 0 : _b.length) > 1 ? "map-height" : "height-full";
         return (h(Host, null, h("map-picker", { class: mapPickerClass, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), h("div", { class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableLegend: this.enableLegend, enableMapToolsExpand: this.enableMapToolsExpand, enableSearch: this.enableSearch, homeZoomToolsSize: this.homeZoomToolsSize, mapView: this.mapView, mapWidgetsSize: this.mapWidgetsSize, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration, stackTools: this.stackTools, toolOrder: this.toolOrder })));
     }
     //--------------------------------------------------------------------------
@@ -124,20 +125,17 @@ export class MapCard {
      * Load the webmap for the provided webMapInfo
      *
      * @param webMapInfo the webmap id and name to load
-     *
-     * @returns void
-     *
-     * @protected
      */
     async _loadMap(webMapInfo) {
+        var _a;
         // on the first render use the default webmap id if provided otherwise use the first child of the provided mapInfos
         const loadDefaultMap = !this._defaultWebmapHonored && this.defaultWebmapId;
-        const defaultMap = this.mapInfos?.filter(i => i.id === this.defaultWebmapId);
+        const defaultMap = (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(i => i.id === this.defaultWebmapId);
         const mapConfigChanged = JSON.stringify(webMapInfo) !== JSON.stringify(this._webMapInfo);
         this._webMapInfo = loadDefaultMap && defaultMap ? defaultMap[0] :
-            !webMapInfo?.id && this.mapInfos.length > 0 ? this.mapInfos[0] : webMapInfo;
+            !(webMapInfo === null || webMapInfo === void 0 ? void 0 : webMapInfo.id) && this.mapInfos.length > 0 ? this.mapInfos[0] : webMapInfo;
         const id = this._webMapInfo.id;
-        const isDefaultMap = loadDefaultMap && webMapInfo?.id === this.defaultWebmapId;
+        const isDefaultMap = loadDefaultMap && (webMapInfo === null || webMapInfo === void 0 ? void 0 : webMapInfo.id) === this.defaultWebmapId;
         if ((this._loadedId !== id && !loadDefaultMap) || isDefaultMap) {
             const webMap = new this.WebMap({
                 portalItem: { id }

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

@@ -106,8 +106,6 @@ export class MapDrawTools {
     }
     /**
      * StencilJS: Called every time the component is disconnected from the DOM
-     *
-     * @returns void
      */
     disconnectedCallback() {
         // cancel any existing create operations
@@ -199,11 +197,7 @@ export class MapDrawTools {
                 toggleToolOnClick: false
             }
         };
-        this._sketchWidget = new this.Sketch({
-            ...sketchOptions,
-            container: this._sketchElement,
-            creationMode: "single",
-            visibleElements: {
+        this._sketchWidget = new this.Sketch(Object.assign(Object.assign({}, sketchOptions), { container: this._sketchElement, creationMode: "single", visibleElements: {
                 duplicateButton: false,
                 selectionTools: {
                     "lasso-selection": false,
@@ -213,11 +207,8 @@ export class MapDrawTools {
                 },
                 undoRedoMenu: false,
                 settingsMenu: this.drawMode === EDrawMode.SKETCH
-            }
-        });
-        this._sketchViewModel = new this.SketchViewModel({
-            ...sketchOptions
-        });
+            } }));
+        this._sketchViewModel = new this.SketchViewModel(Object.assign({}, sketchOptions));
         this._sketchWidget.viewModel.polylineSymbol = this.polylineSymbol;
         this._sketchWidget.viewModel.pointSymbol = this.pointSymbol;
         this._sketchWidget.viewModel.polygonSymbol = this.polygonSymbol;
@@ -242,12 +233,13 @@ export class MapDrawTools {
             }
         });
         this._sketchWidget.on("update", (evt) => {
+            var _a;
             if (!this.editGraphicsEnabled) {
                 this._sketchWidget.viewModel.cancel();
                 this._sketchViewModel.cancel();
             }
             else {
-                const eventType = evt?.toolEventInfo?.type;
+                const eventType = (_a = evt === null || evt === void 0 ? void 0 : evt.toolEventInfo) === null || _a === void 0 ? void 0 : _a.type;
                 if (eventType === "reshape-stop" || eventType === "move-stop") {
                     this.graphics = evt.graphics;
                     this.sketchGraphicsChange.emit({
@@ -285,9 +277,10 @@ export class MapDrawTools {
      * @protected
      */
     _clearSketch() {
+        var _a;
         this._sketchWidget.viewModel.cancel();
         this.graphics = [];
-        this._sketchGraphicsLayer?.removeAll();
+        (_a = this._sketchGraphicsLayer) === null || _a === void 0 ? void 0 : _a.removeAll();
     }
     /**
      * Emit the undo event

package/dist/collection/components/map-fullscreen/map-fullscreen.css

@@ -1,19 +1,19 @@
-/** @license
- * Copyright 2022 Esri
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * 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;
-}
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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;
+}

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

@@ -39,6 +39,7 @@ export class MapLayerPicker {
         this.enabledLayerIds = [];
         this.enabledTableIds = [];
         this.height = undefined;
+        this.isMobile = undefined;
         this.mapView = undefined;
         this.onlyShowUpdatableLayers = undefined;
         this.placeholderIcon = "";
@@ -49,6 +50,7 @@ export class MapLayerPicker {
         this.type = "select";
         this._hasMultipleLayers = true;
         this._hasValidLayers = true;
+        this._isDropdownOpen = undefined;
         this.ids = [];
         this.selectedName = "";
         this._translations = undefined;
@@ -94,7 +96,7 @@ export class MapLayerPicker {
     render() {
         const id = "map-layer-picker";
         let style = this.height > 0 ? { "height": `${this.height.toString()}px` } : {};
-        style = { ...style, "display": this.display };
+        style = Object.assign(Object.assign({}, style), { "display": this.display });
         return (h(Host, null, h("div", { class: "map-layer-picker-container", style: style }, h("div", { class: "map-layer-picker", style: style }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
             !this._hasMultipleLayers && this.showSingleLayerAsLabel ? this._getSingleLayerPlaceholder() :
                 this.type === "combobox" ? this._getCombobox(id) :
@@ -167,7 +169,26 @@ export class MapLayerPicker {
      * @returns Array of Dropdown items with layer names
      */
     _getDropdown(id) {
-        return (h("calcite-dropdown", { class: "layer-picker-dropdown" }, h("calcite-action", { id: id, slot: "trigger", text: "" }, h("calcite-button", { alignment: "icon-end-space-between", appearance: this.appearance, class: "max-width-350", iconEnd: "chevron-down", iconStart: "layers", kind: "neutral", width: "full" }, h("div", null, this.selectedName))), h("calcite-dropdown-group", { "selection-mode": "single" }, this._getMapLayerOptions())));
+        return (h("calcite-dropdown", { calciteDropdownOpen: () => alert("open"), class: "layer-picker-dropdown", onCalciteDropdownBeforeClose: () => this._isDropdownOpen = false, onCalciteDropdownBeforeOpen: () => this._isDropdownOpen = true }, this.isMobile ? this._getDropdownButton() : this._getActionDropdownButton(id), h("calcite-dropdown-group", { "selection-mode": "single" }, this._getMapLayerOptions())));
+    }
+    /**
+     * Get the button that will open the dropdown list wrapped in an action
+     *
+     * @returns the node for the action and button
+     */
+    _getActionDropdownButton(id) {
+        return (h("calcite-action", { id: id, slot: "trigger", text: "" }, this._getDropdownButton()));
+    }
+    /**
+     * Get the button that will open the dropdown list
+     *
+     * @returns the node for the button
+     */
+    _getDropdownButton() {
+        const buttonClass = this.isMobile ? "" : "max-width-350";
+        const buttonSlot = this.isMobile ? "trigger" : "";
+        const buttonIcon = this._isDropdownOpen ? "chevron-up" : "chevron-down";
+        return (h("calcite-button", { alignment: "icon-end-space-between", appearance: this.appearance, class: buttonClass, iconEnd: buttonIcon, iconStart: "layers", kind: "neutral", slot: buttonSlot, width: "full" }, h("div", null, this.selectedName)));
     }
     /**
      * Get the appropriate type of dom nodes for each valid layer or table
@@ -210,7 +231,7 @@ export class MapLayerPicker {
             id = this.defaultLayerHonored ? this.defaultLayerId : id;
         }
         item = item ? item : this._getLayerFromHash(id);
-        this.selectedName = item?.name;
+        this.selectedName = item === null || item === void 0 ? void 0 : item.name;
         this.selectedIds = [id];
         this.layerSelectionChange.emit(this.selectedIds);
     }
@@ -237,8 +258,8 @@ export class MapLayerPicker {
             const tableIds = this.showTables ? this.onlyShowUpdatableLayers ?
                 this._getEditableIds(this._tableNameHash) : Object.keys(this._tableNameHash) : [];
             this.ids = [
-                ...layerIds.reverse().filter(n => this.enabledLayerIds?.length > 0 ? this.enabledLayerIds.reverse().indexOf(n) > -1 : true),
-                ...tableIds.reverse().filter(n => this.enabledTableIds?.length > 0 ? this.enabledTableIds.reverse().indexOf(n) > -1 : true),
+                ...layerIds.reverse().filter(n => { var _a; return ((_a = this.enabledLayerIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledLayerIds.reverse().indexOf(n) > -1 : true; }),
+                ...tableIds.reverse().filter(n => { var _a; return ((_a = this.enabledTableIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledTableIds.reverse().indexOf(n) > -1 : true; }),
             ];
             this.idsFound.emit({
                 layerIds,
@@ -274,7 +295,8 @@ export class MapLayerPicker {
      * @returns boolean when true the layer will be used in the current layer picker type
      */
     _validLayer(id) {
-        const name = this._layerNameHash[id]?.name;
+        var _a;
+        const name = (_a = this._layerNameHash[id]) === null || _a === void 0 ? void 0 : _a.name;
         return name && state.managedLayers.indexOf(name) < 0 && (this.enabledLayerIds.length > 0 ?
             this.enabledLayerIds.indexOf(id) > -1 : true);
     }
@@ -284,7 +306,8 @@ export class MapLayerPicker {
      * @returns boolean when true the table will be used in the current layer picker type
      */
     _validTable(id) {
-        const name = this._tableNameHash[id]?.name;
+        var _a;
+        const name = (_a = this._tableNameHash[id]) === null || _a === void 0 ? void 0 : _a.name;
         const validName = name && this.showTables;
         return validName ? state.managedTables.indexOf(name) < 0 &&
             (this.enabledTableIds.length > 0 ? this.enabledTableIds.indexOf(id) > -1 : true) : validName;
@@ -427,6 +450,23 @@ export class MapLayerPicker {
                 "attribute": "height",
                 "reflect": false
             },
+            "isMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true the component will render an optimized view for mobile devices"
+                },
+                "attribute": "is-mobile",
+                "reflect": false
+            },
             "mapView": {
                 "type": "unknown",
                 "mutable": false,
@@ -575,6 +615,7 @@ export class MapLayerPicker {
         return {
             "_hasMultipleLayers": {},
             "_hasValidLayers": {},
+            "_isDropdownOpen": {},
             "ids": {},
             "selectedName": {},
             "_translations": {}

package/dist/collection/components/map-legend/map-legend.css

@@ -1,3 +1,3 @@
-:host {
-  display: block;
-}
+:host {
+  display: block;
+}

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

@@ -90,10 +90,6 @@ export class MapLegend {
     }
     /**
      * Initialize the basemap gallery or reset the current view if it already exists
-     *
-     * @returns void
-     *
-     * @protected
      */
     _initLegend(view) {
         if (view && this.Legend) {

package/dist/collection/components/map-picker/map-picker.js

@@ -41,7 +41,7 @@ export class MapPicker {
      */
     _webMapInfoWatchHandler(v, oldV) {
         if (v && JSON.stringify(v) !== JSON.stringify(oldV)) {
-            this._loadedId = v?.id;
+            this._loadedId = v === null || v === void 0 ? void 0 : v.id;
             this.mapInfoChange.emit(v);
         }
     }
@@ -59,8 +59,9 @@ export class MapPicker {
     //
     //--------------------------------------------------------------------------
     async setMapByID(id) {
-        const mapInfos = this.mapInfos?.filter(i => i.id === id);
-        if (id && mapInfos?.length > 0) {
+        var _a;
+        const mapInfos = (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(i => i.id === id);
+        if (id && (mapInfos === null || mapInfos === void 0 ? void 0 : mapInfos.length) > 0) {
             this._webMapSelected(mapInfos[0]);
         }
     }
@@ -106,9 +107,10 @@ export class MapPicker {
      * @protected
      */
     _getMapPicker() {
+        var _a;
         const id = "map-picker-expand-toggle";
         const mapListIcon = this._mapListExpanded ? "chevron-up" : "chevron-down";
-        return (h("div", { class: "width-full" }, h("calcite-button", { alignment: "icon-end-space-between", appearance: "transparent", class: "width-full height-full", iconEnd: mapListIcon, id: id, kind: "neutral", onClick: () => this._chooseMap(), width: "full" }, this._webMapInfo?.name), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.switchMap))));
+        return (h("div", { class: "width-full" }, h("calcite-button", { alignment: "icon-end-space-between", appearance: "transparent", class: "width-full height-full", iconEnd: mapListIcon, id: id, kind: "neutral", onClick: () => this._chooseMap(), width: "full" }, (_a = this._webMapInfo) === null || _a === void 0 ? void 0 : _a.name), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.switchMap))));
     }
     /**
      * Create the toolbar (controls used for map and app interactions)
@@ -139,10 +141,6 @@ export class MapPicker {
      * Fired when the user clicks on the map list
      *
      * @param webMapInfo the web map id and name selected from the list
-     *
-     * @returns void
-     *
-     * @protected
      */
     _webMapSelected(webMapInfo) {
         this._mapListExpanded = false;

package/dist/collection/components/map-search/map-search.js

@@ -119,9 +119,7 @@ export class MapSearch {
             };
             if (this.searchConfiguration) {
                 const searchConfiguration = this._getSearchConfig(this.searchConfiguration, this.mapView);
-                searchOptions = {
-                    ...searchConfiguration
-                };
+                searchOptions = Object.assign({}, searchConfiguration);
             }
             this.searchWidget = new this.Search(searchOptions);
             this.searchWidget.popupEnabled = this.popupEnabled;
@@ -144,15 +142,16 @@ export class MapSearch {
     _getSearchConfig(searchConfiguration, view) {
         const INCLUDE_DEFAULT_SOURCES = "includeDefaultSources";
         const sources = searchConfiguration.sources;
-        if (sources?.length > 0) {
+        if ((sources === null || sources === void 0 ? void 0 : sources.length) > 0) {
             searchConfiguration[INCLUDE_DEFAULT_SOURCES] = false;
             sources.forEach((source) => {
+                var _a, _b;
                 const isLayerSource = source.hasOwnProperty("layer");
                 if (isLayerSource) {
                     const layerSource = source;
-                    const layerId = layerSource.layer?.id;
+                    const layerId = (_a = layerSource.layer) === null || _a === void 0 ? void 0 : _a.id;
                     const layerFromMap = layerId ? view.map.findLayerById(layerId) : null;
-                    const layerUrl = layerSource?.layer?.url;
+                    const layerUrl = (_b = layerSource === null || layerSource === void 0 ? void 0 : layerSource.layer) === null || _b === void 0 ? void 0 : _b.url;
                     if (layerFromMap) {
                         layerSource.layer = layerFromMap;
                     }
@@ -161,11 +160,11 @@ export class MapSearch {
                     }
                 }
             });
-            sources?.forEach((source) => {
+            sources === null || sources === void 0 ? void 0 : sources.forEach((source) => {
                 const isLocatorSource = source.hasOwnProperty("locator");
                 if (isLocatorSource) {
                     const locatorSource = source;
-                    if (locatorSource?.name === "ArcGIS World Geocoding Service") {
+                    if ((locatorSource === null || locatorSource === void 0 ? void 0 : locatorSource.name) === "ArcGIS World Geocoding Service") {
                         const outFields = locatorSource.outFields || ["Addr_type", "Match_addr", "StAddr", "City"];
                         locatorSource.outFields = outFields;
                         locatorSource.singleLineFieldName = "SingleLine";
@@ -176,10 +175,7 @@ export class MapSearch {
             });
         }
         else {
-            searchConfiguration = {
-                ...searchConfiguration,
-                includeDefaultSources: true
-            };
+            searchConfiguration = Object.assign(Object.assign({}, searchConfiguration), { includeDefaultSources: true });
         }
         return searchConfiguration;
     }

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

@@ -179,7 +179,8 @@ export class MapSelectTools {
     async componentDidLoad() {
         await this._init();
         await this._searchWidget.when(() => {
-            this._searchWidget.allPlaceholder = this.searchConfiguration?.allPlaceholder &&
+            var _a;
+            this._searchWidget.allPlaceholder = ((_a = this.searchConfiguration) === null || _a === void 0 ? void 0 : _a.allPlaceholder) &&
                 this.searchConfiguration.allPlaceholder.toLowerCase() !== "find address or place" ?
                 this.searchConfiguration.allPlaceholder : this._translations.placeholder;
         });
@@ -194,9 +195,10 @@ export class MapSelectTools {
      * Renders the buffer tools component.
      */
     _getBufferOptions() {
+        var _a, _b;
         const showBufferToolsClass = this._searchDistanceEnabled ? "search-distance" : "div-not-visible";
-        const bufferDistance = typeof this.selectionSet?.distance === "number" ? this.selectionSet.distance : this.defaultBufferDistance;
-        return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.searchDistance, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "search-distance-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", referenceElement: "search-distance-icon" }, h("span", { class: "tooltip-message" }, this._translations.useSearchDistanceTootip)), h("calcite-switch", { checked: this._searchDistanceEnabled, onCalciteSwitchChange: () => this._searchDistanceEnabled = !this._searchDistanceEnabled })), h("div", { class: showBufferToolsClass }, h("buffer-tools", { disabled: !this._searchDistanceEnabled, distance: bufferDistance, geometries: this.geometries, onBufferComplete: (evt) => this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: this.selectionSet?.unit || this.defaultBufferUnit }))));
+        const bufferDistance = typeof ((_a = this.selectionSet) === null || _a === void 0 ? void 0 : _a.distance) === "number" ? this.selectionSet.distance : this.defaultBufferDistance;
+        return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.searchDistance, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "search-distance-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", referenceElement: "search-distance-icon" }, h("span", { class: "tooltip-message" }, this._translations.useSearchDistanceTootip)), h("calcite-switch", { checked: this._searchDistanceEnabled, onCalciteSwitchChange: () => this._searchDistanceEnabled = !this._searchDistanceEnabled })), h("div", { class: showBufferToolsClass }, h("buffer-tools", { disabled: !this._searchDistanceEnabled, distance: bufferDistance, geometries: this.geometries, onBufferComplete: (evt) => this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: ((_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.unit) || this.defaultBufferUnit }))));
     }
     /**
      * Renders the map layer picker component.
@@ -276,8 +278,9 @@ export class MapSelectTools {
      * @protected
      */
     async _initSelectionSet() {
+        var _a, _b, _c, _d;
         if (this.selectionSet) {
-            this._searchTerm = this.selectionSet.searchResult?.name;
+            this._searchTerm = (_a = this.selectionSet.searchResult) === null || _a === void 0 ? void 0 : _a.name;
             this._searchResult = this.selectionSet.searchResult;
             this._selectLayers = this.selectionSet.selectLayers;
             this._selectedIds = this.selectionSet.selectedIds;
@@ -290,7 +293,7 @@ export class MapSelectTools {
             this.selectLayerView = this.selectionSet.layerView;
             this._sketchGraphic = this.selectionSet.sketchGraphic;
             this.geometries = [
-                ...this.selectionSet?.geometries || []
+                ...((_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.geometries) || []
             ];
             // restore graphics from geometries to avoid issues with temp modifications to graphics that were aborted
             this._graphics = this.geometries.map(geometry => {
@@ -301,9 +304,9 @@ export class MapSelectTools {
                     symbol
                 });
             });
-            this._selectionLabel = this.selectionSet?.label;
+            this._selectionLabel = (_c = this.selectionSet) === null || _c === void 0 ? void 0 : _c.label;
             if (!this._useLayerFeaturesEnabled) {
-                this._drawTools?.updateGraphics();
+                (_d = this._drawTools) === null || _d === void 0 ? void 0 : _d.updateGraphics();
             }
             await goToSelection(this.selectionSet.selectedIds, this.selectionSet.layerView, this.mapView, false);
         }
@@ -316,12 +319,7 @@ export class MapSelectTools {
     _initSearchWidget() {
         if (this.mapView && this._searchElement) {
             const searchConfiguration = this._getSearchConfig(this.searchConfiguration, this.mapView);
-            const searchOptions = {
-                view: this.mapView,
-                container: this._searchElement,
-                searchTerm: this._searchTerm,
-                ...searchConfiguration
-            };
+            const searchOptions = Object.assign({ view: this.mapView, container: this._searchElement, searchTerm: this._searchTerm }, searchConfiguration);
             this._searchWidget = new this.Search(searchOptions);
             this._searchWidget.popupEnabled = false;
             this._searchWidget.resultGraphicEnabled = false;
@@ -330,9 +328,10 @@ export class MapSelectTools {
                 void this._clearResults(false, clearLabel);
             });
             this._searchWidget.on("select-result", (searchResults) => {
+                var _a, _b;
                 if (searchResults.result) {
                     this._searchResult = searchResults.result;
-                    const useOIDs = searchResults.source?.layer?.id && searchResults.source.layer.id === this.selectLayerView.layer.id;
+                    const useOIDs = ((_b = (_a = searchResults.source) === null || _a === void 0 ? void 0 : _a.layer) === null || _b === void 0 ? void 0 : _b.id) && searchResults.source.layer.id === this.selectLayerView.layer.id;
                     const oids = useOIDs ? [searchResults.result.feature.getObjectId()] : undefined;
                     this._workflowType = EWorkflowType.SEARCH;
                     void this._updateLabel();
@@ -355,7 +354,8 @@ export class MapSelectTools {
      * @protected
      */
     _searchClearLabel() {
-        return this._searchResult?.name && this._labelName.value.indexOf(this._searchResult.name) > -1;
+        var _a;
+        return ((_a = this._searchResult) === null || _a === void 0 ? void 0 : _a.name) && this._labelName.value.indexOf(this._searchResult.name) > -1;
     }
     /**
      * Initialize the search widget based on user defined configuration
@@ -367,16 +367,17 @@ export class MapSelectTools {
      */
     _getSearchConfig(searchConfiguration, view) {
         const INCLUDE_DEFAULT_SOURCES = "includeDefaultSources";
-        const sources = searchConfiguration?.sources;
-        if (sources?.length > 0) {
+        const sources = searchConfiguration === null || searchConfiguration === void 0 ? void 0 : searchConfiguration.sources;
+        if ((sources === null || sources === void 0 ? void 0 : sources.length) > 0) {
             searchConfiguration[INCLUDE_DEFAULT_SOURCES] = false;
             sources.forEach((source) => {
+                var _a, _b;
                 const isLayerSource = source.hasOwnProperty("layer");
                 if (isLayerSource) {
                     const layerSource = source;
-                    const layerId = layerSource.layer?.id;
+                    const layerId = (_a = layerSource.layer) === null || _a === void 0 ? void 0 : _a.id;
                     const layerFromMap = layerId ? view.map.findLayerById(layerId) : null;
-                    const layerUrl = layerSource?.layer?.url;
+                    const layerUrl = (_b = layerSource === null || layerSource === void 0 ? void 0 : layerSource.layer) === null || _b === void 0 ? void 0 : _b.url;
                     if (layerFromMap) {
                         layerSource.layer = layerFromMap;
                     }
@@ -385,11 +386,11 @@ export class MapSelectTools {
                     }
                 }
             });
-            sources?.forEach((source) => {
+            sources === null || sources === void 0 ? void 0 : sources.forEach((source) => {
                 const isLocatorSource = source.hasOwnProperty("locator");
                 if (isLocatorSource) {
                     const locatorSource = source;
-                    if (locatorSource?.name === "ArcGIS World Geocoding Service") {
+                    if ((locatorSource === null || locatorSource === void 0 ? void 0 : locatorSource.name) === "ArcGIS World Geocoding Service") {
                         const outFields = locatorSource.outFields || ["Addr_type", "Match_addr", "StAddr", "City"];
                         locatorSource.outFields = outFields;
                         locatorSource.singleLineFieldName = "SingleLine";
@@ -400,10 +401,7 @@ export class MapSelectTools {
             });
         }
         else {
-            searchConfiguration = {
-                ...searchConfiguration,
-                includeDefaultSources: true
-            };
+            searchConfiguration = Object.assign(Object.assign({}, searchConfiguration), { includeDefaultSources: true });
         }
         return searchConfiguration;
     }
@@ -457,7 +455,8 @@ export class MapSelectTools {
             }
             else {
                 const oids = graphics.reduce((prev, cur) => {
-                    if (cur?.layer?.objectIdField) {
+                    var _a;
+                    if ((_a = cur === null || cur === void 0 ? void 0 : cur.layer) === null || _a === void 0 ? void 0 : _a.objectIdField) {
                         prev.push(cur.attributes[cur.layer.objectIdField]);
                     }
                     else if (cur.getObjectId) {
@@ -482,7 +481,8 @@ export class MapSelectTools {
      * @protected
      */
     async _highlightWithOIDsOrGeoms() {
-        if (this._skipGeomOIDs?.length > 0) {
+        var _a;
+        if (((_a = this._skipGeomOIDs) === null || _a === void 0 ? void 0 : _a.length) > 0) {
             this._selectedIds = this._skipGeomOIDs;
             return this._highlightFeatures(this._selectedIds);
         }
@@ -589,6 +589,7 @@ export class MapSelectTools {
      * @protected
      */
     async _clearResults(clearSearchWidget = true, clearLabel = false) {
+        var _a;
         this._selectedIds = [];
         this._distance = undefined;
         this._unit = undefined;
@@ -604,7 +605,7 @@ export class MapSelectTools {
         }
         state.removeHandles();
         // checking for clear as it would throw off tests
-        if (this._drawTools?.clear) {
+        if ((_a = this._drawTools) === null || _a === void 0 ? void 0 : _a.clear) {
             this._graphics = [];
             await this._drawTools.clear();
         }
@@ -643,10 +644,11 @@ export class MapSelectTools {
      * @protected
      */
     async _updateLabel() {
+        var _a, _b;
         const hasSketch = this._selectionLabel.indexOf(this._translations.sketch) > -1;
         const hasSelect = this._selectionLabel.indexOf(this._translations.select) > -1;
-        const hasSearch = this._selectionLabel.indexOf(this._searchResult?.name) > -1;
-        const label = this._workflowType === EWorkflowType.SEARCH ? this._searchResult?.name :
+        const hasSearch = this._selectionLabel.indexOf((_a = this._searchResult) === null || _a === void 0 ? void 0 : _a.name) > -1;
+        const label = this._workflowType === EWorkflowType.SEARCH ? (_b = this._searchResult) === null || _b === void 0 ? void 0 : _b.name :
             this._workflowType === EWorkflowType.SELECT ?
                 this._translations.select : this._translations.sketch;
         const _unit = !this._unit ? this._bufferTools.unit : this._unit;
@@ -691,7 +693,8 @@ export class MapSelectTools {
      * @protected
      */
     async _inputLayerSelectionChange(evt) {
-        const id = evt?.detail?.length > 0 ? evt.detail[0] : "";
+        var _a;
+        const id = ((_a = evt === null || evt === void 0 ? void 0 : evt.detail) === null || _a === void 0 ? void 0 : _a.length) > 0 ? evt.detail[0] : "";
         if (!this.selectLayerView || id !== this.selectLayerView.layer.id) {
             this.selectLayerView = await getFeatureLayerView(this.mapView, id);
             await this._updateLabel();
@@ -733,12 +736,13 @@ export class MapSelectTools {
             });
             let hasOID = false;
             graphics.forEach((g) => {
+                var _a;
                 const geom = g.geometry;
                 g.symbol = geom.type === "point" ?
                     this.sketchPointSymbol : geom.type === "polyline" ?
                     this.sketchLineSymbol : geom.type === "polygon" ?
                     this.sketchPolygonSymbol : undefined;
-                hasOID = g?.layer?.hasOwnProperty("objectIdField") || g.hasOwnProperty("getObjectId");
+                hasOID = ((_a = g === null || g === void 0 ? void 0 : g.layer) === null || _a === void 0 ? void 0 : _a.hasOwnProperty("objectIdField")) || g.hasOwnProperty("getObjectId");
             });
             // OIDs are used when the addressee layer and the current "use layer features" layer are the same
             const useOIDs = (this.layerViews[0].layer.title === this.selectLayerView.layer.title) && hasOID;