@esri/solutions-components 0.8.5 → 0.8.7

package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.js

@@ -21,7 +21,7 @@
 import { Host, h } from "@stencil/core";
 import { getLocaleComponentStrings } from "../../utils/locale";
 import { loadModules } from "../../utils/loadModules";
-import { getAllLayers, getFeatureLayerView, getLayerOrTable, highlightFeatures } from "../../utils/mapViewUtils";
+import { getAllLayers, getFeatureLayerView, getLayerOrTable, getMapLayerHash, highlightFeatures } from "../../utils/mapViewUtils";
 import { queryFeaturesByID } from "../../utils/queryUtils";
 export class CrowdsourceReporter {
     constructor() {
@@ -41,8 +41,11 @@ export class CrowdsourceReporter {
         this.objectId = undefined;
         this.center = undefined;
         this.level = undefined;
+        this.popupHeaderHoverColor = undefined;
+        this.popupHeaderColor = undefined;
         this.reportButtonText = undefined;
         this.reportsHeader = undefined;
+        this.reportingOptions = undefined;
         this.reportSubmittedMessage = undefined;
         this.searchConfiguration = undefined;
         this.showComments = undefined;
@@ -52,8 +55,9 @@ export class CrowdsourceReporter {
         this.mapInfos = [];
         this.theme = "light";
         this.enableZoom = true;
+        this.zoomToScale = undefined;
         this._mapInfo = undefined;
-        this._flowItems = ["layer-list"];
+        this._flowItems = [];
         this._sidePanelCollapsed = false;
         this._translations = undefined;
         this._hasValidLayers = false;
@@ -92,16 +96,20 @@ export class CrowdsourceReporter {
      * @returns Promise when complete
      */
     async componentWillLoad() {
+        var _a;
         this._urlParamsLoaded = false;
         await this._initModules();
         await this._getTranslations();
+        await ((_a = this.mapView) === null || _a === void 0 ? void 0 : _a.when(async () => {
+            await this.setMapView();
+        }));
     }
     /**
      * Renders the component.
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, null, this._reportSubmitted && h("calcite-alert", { "auto-close": true, class: themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { slot: "title" }, this._translations.reportSubmit), h("div", { slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { slot: "title" }, this._translations.error), h("div", { slot: "message" }, this._featureCreationFailedErrorMsg)), h("div", null, h("calcite-shell", { "content-behind": true }, this._getReporter()))));
+        return (h(Host, null, this._reportSubmitted && h("calcite-alert", { "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { slot: "title" }, this._translations.error), h("div", { slot: "message" }, this._featureCreationFailedErrorMsg)), h("div", null, h("calcite-shell", { "content-behind": true }, this._getReporter()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -171,8 +179,9 @@ export class CrowdsourceReporter {
      * @protected
      */
     getLayerListFlowItem() {
+        var _a;
         return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports &&
-            h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._noLayerToDisplayErrorMsg, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
+            h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { class: "height-full", layers: ((_a = this._editableLayerIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this._editableLayerIds : this.layers, mapView: this.mapView, noLayerErrorMsg: this._noLayerToDisplayErrorMsg, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
     }
     /**
      * Get the layer list for creating a report
@@ -180,7 +189,7 @@ export class CrowdsourceReporter {
      * @protected
      */
     getChooseCategoryFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._translations.createReportHeader, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", disabled: !this._selectedLayerId, onClick: this.navigateToCreateFeature.bind(this), width: "full" }, this._translations.next), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromSelectedPanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.chooseCategoryMsg)), h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._noLayerToDisplayErrorMsg, onLayerSelect: this.highlightSelectedLayer.bind(this), showFeatureCount: false, showNextIcon: false }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-panel", { "full-height": true, "full-width": true }, h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.chooseCategoryMsg)), h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._noLayerToDisplayErrorMsg, onLayerSelect: this.navigateToCreateFeature.bind(this), showFeatureCount: false, showNextIcon: false }))));
     }
     /**
      * Get Feature create form of the selected feature layer
@@ -188,7 +197,7 @@ export class CrowdsourceReporter {
      * @protected
      */
     getFeatureCreateFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), h("create-feature", { customizeSubmit: true, mapView: this.mapView, onDrawComplete: this.onDrawComplete.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, selectedLayerId: this._selectedLayerId }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), h("create-feature", { customizeSubmit: true, mapView: this.mapView, onDrawComplete: this.onDrawComplete.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId }))));
     }
     /**
      * When drawing of incident location completed on map show the submit and cancel button
@@ -238,13 +247,13 @@ export class CrowdsourceReporter {
      */
     onReportSubmitted() {
         this._reportSubmitted = true;
-        this.navigateToHomePage();
+        void this.navigateToHomePage();
     }
     /**
      * Navigates to layer-list
      * @protected
      */
-    navigateToHomePage() {
+    async navigateToHomePage() {
         if (this._createFeature) {
             this._createFeature.close();
         }
@@ -252,21 +261,23 @@ export class CrowdsourceReporter {
             this._layerList.refresh();
         }
         this.setSelectedFeatures([]);
-        this._flowItems = ["layer-list"];
+        if (this._editableLayerIds.length === 1) {
+            await this._featureList.refresh();
+            this._flowItems = ["feature-list"];
+        }
+        else {
+            this._flowItems = ["layer-list"];
+        }
     }
     /**
-     * Update the selected layer id and name
+     * On layer select open the feature create flow item
      * @param evt Event which has details of selected layerId and layerName
      * @protected
      */
-    highlightSelectedLayer(evt) {
-        this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
-    }
-    /**
-     * On next button click open the feature create flow item
-     * @protected
-     */
-    async navigateToCreateFeature() {
+    async navigateToCreateFeature(evt) {
+        if (evt.detail.layerId && evt.detail.layerName) {
+            this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
+        }
         this._showSubmitCancelButton = false;
         this._flowItems = [...this._flowItems, "feature-create"];
     }
@@ -319,8 +330,8 @@ export class CrowdsourceReporter {
         updatedFlowItems.pop();
         this.clearHighlights();
         //Back to layer list, and return as the flowItems will be reset in navigateToHomePage
-        if (updatedFlowItems.length === 1) {
-            this.navigateToHomePage();
+        if (updatedFlowItems.length === 1 && updatedFlowItems[0] === 'layer-list') {
+            void this.navigateToHomePage();
             return;
         }
         this._flowItems = [...updatedFlowItems];
@@ -350,7 +361,7 @@ export class CrowdsourceReporter {
      */
     getFeatureListFlowItem(layerId, layerName) {
         return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports &&
-            h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { class: "height-full", mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, selectedLayerId: layerId }))));
+            h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { class: "height-full", highlightOnHover: true, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, ref: el => this._featureList = el, selectedLayerId: layerId }))));
     }
     /**
      * Returns the calcite-flow item for feature details
@@ -378,7 +389,9 @@ export class CrowdsourceReporter {
             this._currentFeatureId = selectedFeature.attributes[layer.objectIdField];
         }
         else {
-            this.setSelectedLayer('', '');
+            if (this._editableLayerIds.length > 1) {
+                this.setSelectedLayer('', '');
+            }
             this._currentFeatureId = '';
         }
         this._updateShareURL();
@@ -401,6 +414,8 @@ export class CrowdsourceReporter {
         // highlight the newly selected feature only when it has valid geometry
         if (selectedFeature && selectedFeature.geometry && selectedFeature.layer) {
             const selectedLayerView = await getFeatureLayerView(this.mapView, selectedFeature.layer.id);
+            // remove previous highlight options (if any) to highlight the feature by default color
+            selectedLayerView.highlightOptions = null;
             this._highlightHandle = await highlightFeatures([selectedFeature.getObjectId()], selectedLayerView, this.mapView, true);
         }
     }
@@ -426,6 +441,15 @@ export class CrowdsourceReporter {
      * @protected
      */
     async setMapView() {
+        var _a;
+        await this.getLayersToShowInList();
+        // if only one valid layer is present then directly render features list
+        if (((_a = this._editableLayerIds) === null || _a === void 0 ? void 0 : _a.length) === 1) {
+            await this.renderFeaturesList();
+        }
+        else {
+            this._flowItems = ['layer-list'];
+        }
         this.mapView.popupEnabled = false;
         if (this._defaultCenter && this._defaultLevel) {
             await this.mapView.goTo({
@@ -449,7 +473,7 @@ export class CrowdsourceReporter {
         this._mapClickHandle = this.reactiveUtils.on(() => this.mapView, "click", this.onMapClick.bind(this));
     }
     /**
-     * On map click do hitTest and get the clicked graphics of valid layers and show feature details
+     * On map click do hitTest and get the clicked graphics from both reporting and non-reporting layers, and show feature details
      * @param event IMapClick map click event details
      *
      * @protected
@@ -457,12 +481,8 @@ export class CrowdsourceReporter {
     async onMapClick(event) {
         //disable map popup
         this.mapView.popupEnabled = false;
-        // only include graphics from valid layers listed in the layer list widget
-        const opts = {
-            include: this._validLayers
-        };
         // Perform a hitTest on the View
-        const hitTest = await this.mapView.hitTest(event, opts);
+        const hitTest = await this.mapView.hitTest(event);
         if (hitTest.results.length > 0) {
             const clickedGraphics = [];
             hitTest.results.forEach(function (result) {
@@ -471,16 +491,35 @@ export class CrowdsourceReporter {
                     clickedGraphics.push(result.graphic);
                 }
             });
-            //update the selectedFeature
-            this.setSelectedFeatures(clickedGraphics);
-            //if featureDetails not open then add it to the list else just reInit flowItems which will update details with newly selected features
-            // eslint-disable-next-line unicorn/prefer-ternary
-            if (this._flowItems.length && this._flowItems[this._flowItems.length - 1] !== "feature-details") {
-                this._flowItems = [...this._flowItems, "feature-details"];
+            const reportingLayerGraphics = clickedGraphics.filter((graphic) => {
+                return this._validLayers.includes(graphic.layer);
+            });
+            const nonReportingLayerGraphics = clickedGraphics.filter((graphic) => {
+                var _a;
+                return !this._validLayers.includes(graphic.layer) && ((_a = graphic === null || graphic === void 0 ? void 0 : graphic.layer) === null || _a === void 0 ? void 0 : _a.id);
+            });
+            // if clicked graphic's layer is one of the reporting layers then show details in layer panel
+            if (reportingLayerGraphics.length > 0) {
+                //update the selectedFeature
+                this.setSelectedFeatures(reportingLayerGraphics);
+                //if featureDetails not open then add it to the list else just reInit flowItems which will update details with newly selected features
+                // eslint-disable-next-line unicorn/prefer-ternary
+                if (this._flowItems.length && this._flowItems[this._flowItems.length - 1] !== "feature-details") {
+                    this._flowItems = [...this._flowItems, "feature-details"];
+                }
+                else {
+                    this._flowItems = [...this._flowItems];
+                    void this.highlightOnMap(clickedGraphics[0]);
+                }
             }
-            else {
-                this._flowItems = [...this._flowItems];
-                void this.highlightOnMap(clickedGraphics[0]);
+            // if clicked graphic's layer is from non reporting layers then show popup on map
+            if (nonReportingLayerGraphics.length > 0) {
+                this.mapView.popupEnabled = true;
+                const options = {
+                    features: nonReportingLayerGraphics,
+                    updateLocationEnabled: true
+                };
+                await this.mapView.openPopup(options);
             }
         }
     }
@@ -493,10 +532,57 @@ export class CrowdsourceReporter {
         const messages = await getLocaleComponentStrings(this.el);
         this._translations = messages[0];
     }
+    /**
+     * Returns the ids of all OR configured layers that support edits with the update capability
+     * @param hash each layer item details
+     * @param layers list of layers id
+     * @returns array of editable layer ids
+     */
+    reduceToConfiguredLayers(hash) {
+        var _a;
+        const configuredLayers = ((_a = this.layers) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.layers : [];
+        return Object.keys(hash).reduce((prev, cur) => {
+            let showLayer = hash[cur].supportsAdd;
+            if ((configuredLayers === null || configuredLayers === void 0 ? void 0 : configuredLayers.length) > 0) {
+                showLayer = configuredLayers.indexOf(cur) > -1 ? hash[cur].supportsAdd : false;
+            }
+            if (showLayer) {
+                prev.push(cur);
+            }
+            return prev;
+        }, []);
+    }
+    /**
+     * Creates the list of layers to be listed in layer list
+     * @protected
+     */
+    async getLayersToShowInList() {
+        const layerItemsHash = await getMapLayerHash(this.mapView, true);
+        const allMapLayers = await getAllLayers(this.mapView);
+        allMapLayers.forEach((eachLayer) => {
+            var _a, _b;
+            if ((eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.type) === "feature" && (eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.editingEnabled) && ((_b = (_a = eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.capabilities) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.supportsAdd)) {
+                layerItemsHash[eachLayer.id].supportsAdd = true;
+            }
+        });
+        this._editableLayerIds = this.reduceToConfiguredLayers(layerItemsHash);
+    }
+    /**
+     * renders feature list
+     * @protected
+     */
+    async renderFeaturesList() {
+        const evt = {
+            detail: this._editableLayerIds
+        };
+        await this.layerListLoaded(evt);
+        this.setSelectedLayer(this._validLayers[0].id, this._validLayers[0].title);
+        this._flowItems = ['feature-list'];
+    }
     /**
      * Updates the share url for current selected feature
      * @protected
-    */
+     */
     _updateShareURL() {
         var _a, _b;
         const url = (_a = this._shareNode) === null || _a === void 0 ? void 0 : _a.shareUrl;
@@ -805,6 +891,40 @@ export class CrowdsourceReporter {
                 "attribute": "level",
                 "reflect": false
             },
+            "popupHeaderHoverColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: The color that will be displayed on hover when expanding the popup header"
+                },
+                "attribute": "popup-header-hover-color",
+                "reflect": false
+            },
+            "popupHeaderColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: The background color to apply to the popup header"
+                },
+                "attribute": "popup-header-color",
+                "reflect": false
+            },
             "reportButtonText": {
                 "type": "string",
                 "mutable": false,
@@ -839,6 +959,27 @@ export class CrowdsourceReporter {
                 "attribute": "reports-header",
                 "reflect": false
             },
+            "reportingOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IReportingOptions",
+                    "resolved": "IReportingOptions",
+                    "references": {
+                        "IReportingOptions": {
+                            "location": "import",
+                            "path": "../../utils/interfaces",
+                            "id": "src/utils/interfaces.ts::IReportingOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "IReportingOptions: Key options for reporting"
+                }
+            },
             "reportSubmittedMessage": {
                 "type": "string",
                 "mutable": false,
@@ -1011,6 +1152,23 @@ export class CrowdsourceReporter {
                 "attribute": "enable-zoom",
                 "reflect": false,
                 "defaultValue": "true"
+            },
+            "zoomToScale": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "number: default scale to zoom to when zooming to a single point feature"
+                },
+                "attribute": "zoom-to-scale",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/feature-list/feature-list.js

@@ -19,6 +19,7 @@
  * limitations under the License.
  */
 import { h } from "@stencil/core";
+import { loadModules } from "../../utils/loadModules";
 import { PopupUtils } from "../../utils/popupUtils";
 import { getFeatureLayerView, getLayerOrTable, highlightFeatures } from "../../utils/mapViewUtils";
 import { getLocaleComponentStrings } from "../../utils/locale";
@@ -29,6 +30,7 @@ export class FeatureList {
         this.noFeaturesFoundMsg = undefined;
         this.pageSize = 100;
         this.highlightOnMap = false;
+        this.highlightOnHover = false;
         this._featureItems = [];
         this._featuresCount = 0;
         this._isLoading = false;
@@ -48,6 +50,16 @@ export class FeatureList {
     }
     //--------------------------------------------------------------------------
     //
+    //  Methods (public)
+    /**
+     * Refresh the feature list which will fetch the latest features and update the features list
+     * @returns Promise that resolves when the operation is complete
+     */
+    async refresh() {
+        await this.initializeFeatureItems();
+    }
+    //--------------------------------------------------------------------------
+    //
     //  Functions (lifecycle)
     //
     //--------------------------------------------------------------------------
@@ -56,6 +68,7 @@ export class FeatureList {
      * @returns Promise when complete
      */
     async componentWillLoad() {
+        await this.initModules();
         await this._getTranslations();
         this._isLoading = true;
         this._popupUtils = new PopupUtils();
@@ -82,6 +95,17 @@ export class FeatureList {
     //  Functions (protected)
     //
     //--------------------------------------------------------------------------
+    /**
+   * Load esri javascript api modules
+   * @returns Promise resolving when function is done
+   * @protected
+   */
+    async initModules() {
+        const [Color] = await loadModules([
+            "esri/Color"
+        ]);
+        this.Color = Color;
+    }
     /**
      * Initialize the features list using the selected layer
      * @protected
@@ -117,10 +141,7 @@ export class FeatureList {
      */
     async featureClicked(event, selectedFeature) {
         //clear previous highlight and remove the highlightHandle
-        if (this.highlightOnMap && this._highlightHandle) {
-            this._highlightHandle.remove();
-            this._highlightHandle = null;
-        }
+        this.clearHighlights();
         //highlight on map only if it is selected item
         if (this.highlightOnMap) {
             const selectedFeatureObjectId = Number(event.target.value);
@@ -129,6 +150,31 @@ export class FeatureList {
         }
         this.featureSelect.emit(selectedFeature);
     }
+    /**
+     * On feature hover in feature list highlight the feature on the map
+     * @param selectedFeature mouseovered feature graphic
+     * @protected
+     */
+    async onFeatureHover(selectedFeature) {
+        //clear previous highlight and remove the highlightHandle
+        this.clearHighlights();
+        if (this.highlightOnHover) {
+            const oId = selectedFeature.getObjectId();
+            const selectedLayerView = await getFeatureLayerView(this.mapView, this.selectedLayerId);
+            selectedLayerView.highlightOptions = { color: new this.Color("#FFFF00") };
+            this._highlightHandle = selectedLayerView.highlight([oId]);
+        }
+    }
+    /**
+     * Clears the highlight
+     * @protected
+     */
+    clearHighlights() {
+        //if a feature is already highlighted, then remove the highlight
+        if (this._highlightHandle) {
+            this._highlightHandle.remove();
+        }
+    }
     /**
      * Query the selected feature layer, in descending order of object id's
      * @param page 0th page number in the pagination item
@@ -179,7 +225,7 @@ export class FeatureList {
         const oId = selectedFeature.attributes[this._selectedLayer.objectIdField].toString();
         //use object id if popupTitle is null or undefined
         popupTitle = popupTitle !== null && popupTitle !== void 0 ? popupTitle : oId;
-        return (h("calcite-list-item", { onCalciteListItemSelect: (e) => { void this.featureClicked(e, selectedFeature); }, value: oId }, h("div", { class: "popup-title", slot: "content-start" }, popupTitle), h("calcite-icon", { icon: "chevron-right", scale: "s", slot: "content-end" })));
+        return (h("calcite-list-item", { onCalciteListItemSelect: (e) => { void this.featureClicked(e, selectedFeature); }, onMouseLeave: () => { void this.clearHighlights(); }, onMouseOver: () => { void this.onFeatureHover(selectedFeature); }, value: oId }, h("div", { class: "popup-title", slot: "content-start" }, popupTitle), h("calcite-icon", { icon: "chevron-right", scale: "s", slot: "content-end" })));
     }
     /**
      * Fetches the component's translations
@@ -292,6 +338,24 @@ export class FeatureList {
                 "attribute": "highlight-on-map",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "highlightOnHover": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: Highlight feature on map optional (default false) boolean to indicate if we should highlight when hover on Feature in list"
+                },
+                "attribute": "highlight-on-hover",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -326,6 +390,30 @@ export class FeatureList {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Refresh the feature list which will fetch the latest features and update the features list",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise that resolves when the operation is complete"
+                        }]
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{

package/dist/collection/components/info-card/info-card.css

@@ -40,7 +40,7 @@
   overflow: auto;
 }
 
-.esri-features__footer {
+.feature-node .esri-features__footer {
   display: none !important;
 }
 

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

@@ -140,7 +140,7 @@ export class InfoCard {
         const id = (_d = (_c = this._features) === null || _c === void 0 ? void 0 : _c.selectedFeature) === null || _d === void 0 ? void 0 : _d.getObjectId();
         const ids = parseInt(id === null || id === void 0 ? void 0 : id.toString(), 10) > -1 ? [id] : [];
         const deleteEnabled = ((_e = this._layer) === null || _e === void 0 ? void 0 : _e.editingEnabled) && ((_h = (_g = (_f = this._layer) === null || _f === void 0 ? void 0 : _f.capabilities) === null || _g === void 0 ? void 0 : _g.operations) === null || _h === void 0 ? void 0 : _h.supportsDelete);
-        return (h(Host, null, h("calcite-shell", null, this._getHeader(), h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+        return (h(Host, null, h("calcite-shell", null, this._getHeader(), h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget feature-node " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
             h("div", { class: "display-flex top-border padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), !nextBackDisabled && h("div", { class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("div", null, h("calcite-action", { icon: "list", onClick: () => this._toggleListView(), scale: "s", text: this._count, textEnabled: true })), h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next))))), h("edit-card", { class: editClass, graphicIndex: (_j = this._features) === null || _j === void 0 ? void 0 : _j.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
     }
     //--------------------------------------------------------------------------

package/dist/collection/components/layer-list/layer-list.js

@@ -79,7 +79,7 @@ export class LayerList {
     render() {
         return (h(Fragment, null, this._isLoading && h("calcite-loader", { label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
             h("calcite-notice", { class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { slot: "title" }, this._translations.error), h("div", { slot: "message" }, this.noLayerErrorMsg ? this.noLayerErrorMsg : this._noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
-            h("calcite-list", { "selection-appearance": "border", "selection-mode": this.showNextIcon ? "none" : "single-persist" }, this.renderLayerList())));
+            h("calcite-list", { "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
     }
     //--------------------------------------------------------------------------
     //
@@ -127,7 +127,7 @@ export class LayerList {
             }
         });
         await Promise.all(def).then(() => {
-            const editableLayerIds = this.getEditableIds(this._layerItemsHash);
+            const editableLayerIds = this.getLayersToBeShownInList(this._layerItemsHash);
             this._mapLayerIds = editableLayerIds.reverse();
             this.handleNoLayersToDisplay();
         }, () => {
@@ -143,17 +143,17 @@ export class LayerList {
         this.layersListLoaded.emit(this._mapLayerIds);
     }
     /**
-     * Returns the ids of all OR configured layers that support edits with the update capability
+     * Returns the ids of all OR configured layers that needs to be shown in the list
      * @param hash each layer item details
      * @returns array of layer ids
      */
-    getEditableIds(hash) {
+    getLayersToBeShownInList(hash) {
         var _a;
         const configuredLayers = ((_a = this.layers) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.layers : [];
         return Object.keys(hash).reduce((prev, cur) => {
-            let showLayer = hash[cur].supportsAdd;
+            let showLayer = true;
             if ((configuredLayers === null || configuredLayers === void 0 ? void 0 : configuredLayers.length) > 0) {
-                showLayer = configuredLayers.indexOf(cur) > -1 ? hash[cur].supportsAdd : false;
+                showLayer = configuredLayers.indexOf(cur) > -1;
             }
             if (showLayer) {
                 prev.push(cur);

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

@@ -170,7 +170,7 @@ export class MapDrawTools {
         }
         else {
             this._sketchGraphicsLayer = new this.GraphicsLayer({ title, listMode: "hide" });
-            state.managedLayers.push(title);
+            state.managedLayers[title] = "sketch";
             this.mapView.map.layers.add(this._sketchGraphicsLayer);
         }
         if (this.graphics && this.graphics.length > 0) {