@esri/solutions-components 0.7.29 → 0.7.31

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

@@ -20,6 +20,9 @@
  */
 import { Host, h } from "@stencil/core";
 import { getLocaleComponentStrings } from "../../utils/locale";
+import { loadModules } from "../../utils/loadModules";
+import { getAllLayers, getLayerOrTable } from "../../utils/mapViewUtils";
+import { queryFeaturesByID } from "../../utils/queryUtils";
 export class CrowdsourceReporter {
     constructor() {
         this.description = undefined;
@@ -32,6 +35,8 @@ export class CrowdsourceReporter {
         this.layers = undefined;
         this.loginTitle = undefined;
         this.mapView = undefined;
+        this.layerId = undefined;
+        this.objectId = undefined;
         this.reportButtonText = undefined;
         this.reportsHeader = undefined;
         this.reportSubmittedMessage = undefined;
@@ -48,6 +53,10 @@ export class CrowdsourceReporter {
         this._sidePanelCollapsed = false;
         this._translations = undefined;
         this._hasValidLayers = false;
+        this._selectedLayerName = undefined;
+        this._reportSubmitted = false;
+        this._showSubmitCancelButton = false;
+        this._featureCreationFailedErrorMsg = undefined;
     }
     //--------------------------------------------------------------------------
     //
@@ -79,19 +88,43 @@ export class CrowdsourceReporter {
      * @returns Promise when complete
      */
     async componentWillLoad() {
+        await this._initModules();
         await this._getTranslations();
     }
     /**
      * Renders the component.
      */
     render() {
-        return (h(Host, null, h("div", null, h("calcite-shell", { "content-behind": true }, this._getReporter()))));
+        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, closable: true, icon: "check-circle", kind: "success", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { slot: "title" }, this._translations.reportSubmit), h("div", { slot: "message" }, this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { "auto-close": true, class: themeClass, closable: true, icon: "x-octagon", kind: "danger", 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()))));
     }
     //--------------------------------------------------------------------------
     //
     //  Functions (protected)
     //
     //--------------------------------------------------------------------------
+    /**
+     * Load esri javascript api modules
+     *
+     * @returns Promise resolving when function is done
+     *
+     * @protected
+     */
+    async _initModules() {
+        const [reactiveUtils] = await loadModules([
+            "esri/core/reactiveUtils"
+        ]);
+        this.reactiveUtils = reactiveUtils;
+    }
+    /**
+     * Set the selected layer id and layer name
+     * @param layerId string layerId of the selected layer
+     * @param layerName string layerName of the selected layer
+     */
+    setSelectedLayer(layerId, layerName) {
+        this._selectedLayerId = layerId;
+        this._selectedLayerName = layerName;
+    }
     /**
      * Get the reporter app functionality
      * @protected
@@ -109,6 +142,12 @@ export class CrowdsourceReporter {
                 case "feature-details":
                     renderLists.push(this.getFeatureDetailsFlowItem());
                     break;
+                case "reporting-layer-list":
+                    renderLists.push(this.getChooseCategoryFlowItem());
+                    break;
+                case "feature-create":
+                    renderLists.push(this.getFeatureCreateFlowItem());
+                    break;
             }
         });
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
@@ -125,33 +164,135 @@ export class CrowdsourceReporter {
         return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this._hasValidLayers &&
             h("calcite-action", { icon: "sort-ascending-arrow", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this.isMobile }), this._hasValidLayers &&
             h("calcite-action", { icon: "filter", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this.isMobile }), this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports &&
-            h("calcite-button", { appearance: "secondary", 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._translations.noLayerToDisplayErrorMsg, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this) }))));
+            h("calcite-button", { appearance: "secondary", 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._translations.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
+     * @returns Choose category flow item
+     * @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: "secondary", 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._translations.noLayerToDisplayErrorMsg, onLayerSelect: this.highlightSelectedLayer.bind(this), showFeatureCount: false, showNextIcon: false }))));
+    }
+    /**
+     * Get Feature create form of the selected feature layer
+     * @returns feature create form
+     * @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: "secondary", 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", { mapView: this.mapView, onDrawComplete: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onSuccess: this.navigateHomePage.bind(this), ref: el => this._createFeature = el, selectedLayerId: this._selectedLayerId }))));
+    }
+    /**
+     * When drawing of incident location completed on map show the submit and cancel button
+     * @protected
+     */
+    showSubmitCancelButton() {
+        this._showSubmitCancelButton = true;
+    }
+    /**
+     * On back from create feature, call submit editor to destroy the Editor widget instance
+     * @protected
+     */
+    onSubmitButtonClick() {
+        if (this._createFeature) {
+            this._createFeature.submit();
+        }
+    }
+    /**
+     * On back from create feature, call close editor to destroy the Editor widget instance
+     * @protected
+     */
+    backFromCreateFeaturePanel() {
+        if (this._createFeature) {
+            this._createFeature.close();
+        }
+        this.backFromSelectedPanel();
+    }
+    /**
+     * On creating the feature is failed, show the error message
+     * @param evt Event which has feature failed message
+     * @protected
+     */
+    createFeatureFailed(evt) {
+        console.error(evt.detail);
+        this._featureCreationFailedErrorMsg = evt.detail.message;
+    }
+    /**
+     * On submit report navigate to the layer list home page and refresh the layer list
+     * @protected
+     */
+    navigateHomePage() {
+        this._reportSubmitted = true;
+        if (this._layerList) {
+            this._layerList.refresh();
+        }
+        this._flowItems = ["layer-list"];
+    }
+    /**
+     * Update the selected layer id and name
+     * @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() {
+        this._showSubmitCancelButton = false;
+        this._flowItems = [...this._flowItems, "feature-create"];
+    }
+    /**
+     * On report an incident button click open the create a report panel with the layer list
+     * @protected
+     */
+    navigateToChooseCategory() {
+        this._flowItems = [...this._flowItems, "reporting-layer-list"];
     }
     /**
      * When layer list is loaded, we will receive the list of layers, if its  means we don't have any valid layer to be listed
      * @param evt Event which has list of layers
      * @protected
      */
-    layerListLoaded(evt) {
+    async layerListLoaded(evt) {
         const layersListed = evt.detail;
+        //consider only the layers listed in the layer-list component  
+        const allMapLayers = await getAllLayers(this.mapView);
+        this._validLayers = [];
+        allMapLayers.forEach((eachLayer) => {
+            if (layersListed.includes(eachLayer.id)) {
+                this._validLayers.push(eachLayer);
+            }
+        });
+        //handleMap click on layer list loaded
+        this.handleMapClick();
+        //update the has valid layer state
         this._hasValidLayers = layersListed.length > 0;
+        //navigate to the feature details if URL params found
+        await this.loadFeatureFromURLParams();
     }
     /**On click of layer list item show feature list
      * @param evt Event which has details of selected layerId and layerName
      * @protected
      */
     displayFeaturesList(evt) {
-        this._selectedLayerId = evt.detail.layerId;
-        this._selectedLayerName = evt.detail.layerName;
+        this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
         this._flowItems = [...this._flowItems, "feature-list"];
     }
     /**
-     * On back from feature list navigate to the Layer list panel
+     * On back from selected panel navigate to the previous panel
      * @protected
      */
-    backFromFeatureList() {
+    backFromSelectedPanel() {
         const updatedFlowItems = [...this._flowItems];
         updatedFlowItems.pop();
+        //clear the selected layer and feature when back to layer list
+        if (updatedFlowItems.length === 1) {
+            this.setSelectedLayer('', '');
+            this.setSelectedFeatures([]);
+        }
         this._flowItems = [...updatedFlowItems];
     }
     /**
@@ -167,28 +308,61 @@ export class CrowdsourceReporter {
      * @param evt Event which has details of selected feature
      */
     async onFeatureSelectFromList(evt) {
-        this._selectedFeature = [evt.detail];
+        this.setSelectedFeatures([evt.detail]);
         this._flowItems = [...this._flowItems, "feature-details"];
     }
     /**
      * Get feature list of the selected feature layer
      * @param layerId Layer id
+     * @param layerName Layer name
      * @returns feature list node
      * @protected
      */
     getFeatureListFlowItem(layerId, layerName) {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, onCalciteFlowItemBack: this.backFromFeatureList.bind(this) }, h("calcite-action", { icon: "sort-ascending-arrow", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this.isMobile }), h("calcite-action", { icon: "filter", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this.isMobile }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports &&
-            h("calcite-button", { appearance: "secondary", slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { class: "height-full", highlightOnMap: true, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, selectedLayerId: layerId }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, h("calcite-action", { icon: "sort-ascending-arrow", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this.isMobile }), h("calcite-action", { icon: "filter", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this.isMobile }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports &&
+            h("calcite-button", { appearance: "secondary", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { class: "height-full", highlightOnMap: true, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, selectedLayerId: layerId }))));
     }
     /**
      * Returns the calcite-flow item for feature details
      * @returns Node
      */
     getFeatureDetailsFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromFeatureList.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-action", { icon: "share", slot: "header-actions-end", text: this._translations.share }), h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, graphics: this._selectedFeature, isLoading: false, isMobile: false, mapView: this.mapView, zoomAndScrollToSelected: true }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", slot: "header-actions-end", socialMedia: true, view: this.mapView }), h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, graphics: this._selectedFeature, isLoading: false, isMobile: false, mapView: this.mapView, onSelectionChanged: this.featureDetailsChanged.bind(this), zoomAndScrollToSelected: true }))));
+    }
+    /**
+     * Sets the selected features and updates the first feature as the current selected feature
+     * @param features Graphics array of the features selected
+     */
+    setSelectedFeatures(features) {
+        this._selectedFeature = features;
+        this.setCurrentFeature(this._selectedFeature.length ? this._selectedFeature[0] : null);
+    }
+    /**
+     * Set the object id of the current selected feature, and also updates the current selected layer details
+     * @param selectedFeature Graphic currently shown in feature details
+     */
+    setCurrentFeature(selectedFeature) {
+        if (selectedFeature && selectedFeature.layer) {
+            const layer = selectedFeature.layer;
+            this.setSelectedLayer(layer.id, layer.title);
+            this._currentFeatureId = selectedFeature.attributes[layer.objectIdField];
+        }
+        else {
+            this.setSelectedLayer('', '');
+            this._currentFeatureId = '';
+        }
+        this._updateShareURL();
+    }
+    /**
+     * On Feature details change update the Layer title and the current selected layer id
+     * @param evt Event hold the details of current feature graphic in the info-card
+     */
+    featureDetailsChanged(evt) {
+        this.setCurrentFeature(evt.detail[0]);
     }
     /**
      * Returns the action button to Expand/Collapse side panel in mobile mode
+     * @protected
      */
     getActionToExpandCollapsePanel() {
         return (h("calcite-action", { icon: this._sidePanelCollapsed ? "chevrons-up" : "chevrons-down", onClick: this.toggleSidePanel.bind(this), slot: "header-actions-end", text: this._sidePanelCollapsed ? this._translations.expand : this._translations.collapse }));
@@ -208,6 +382,53 @@ export class CrowdsourceReporter {
             this._defaultLevel = undefined;
         }
     }
+    /**
+     * Handle map click event
+     * @param layers Array of layerIds
+     *
+     * @protected
+     */
+    handleMapClick() {
+        if (this._mapClickHandle) {
+            this._mapClickHandle.remove();
+        }
+        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
+     * @param event IMapClick map click event details
+     *
+     * @protected
+     */
+    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);
+        if (hitTest.results.length > 0) {
+            const clickedGraphics = [];
+            hitTest.results.forEach(function (result) {
+                // check if the result type is graphic
+                if (result.type === 'graphic') {
+                    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"];
+            }
+            else {
+                this._flowItems = [...this._flowItems];
+            }
+        }
+    }
     /**
      * Fetches the component's translations
      * @returns Promise when complete
@@ -217,6 +438,59 @@ export class CrowdsourceReporter {
         const messages = await getLocaleComponentStrings(this.el);
         this._translations = messages[0];
     }
+    /**
+     * Updates the share url for current selected feature
+     * @returns
+     * @protected
+    */
+    _updateShareURL() {
+        var _a, _b;
+        const url = (_a = this._shareNode) === null || _a === void 0 ? void 0 : _a.shareUrl;
+        if (!url) {
+            return;
+        }
+        const urlObj = new URL(url);
+        //set the selected layers id
+        if (this._selectedLayerId) {
+            urlObj.searchParams.set("layerid", this._selectedLayerId);
+        }
+        else {
+            urlObj.searchParams.delete("layerid");
+        }
+        //Set the selected features objectid
+        if ((_b = this._selectedFeature) === null || _b === void 0 ? void 0 : _b.length) {
+            urlObj.searchParams.set("oid", this._currentFeatureId);
+        }
+        else {
+            urlObj.searchParams.delete("oid");
+        }
+        //update the url in share component
+        this._shareNode.shareUrl = urlObj.href;
+    }
+    /**
+     * Navigates to selected features detail based on the URL params
+     */
+    async loadFeatureFromURLParams() {
+        if (this.layerId && this.objectId) {
+            const layer = await getLayerOrTable(this.mapView, this.layerId);
+            if (layer) {
+                // only query if we have some ids...query with no ids will result in all features being returned
+                const featureSet = await queryFeaturesByID([Number(this.objectId)], layer, [], false, this.mapView.spatialReference);
+                if (featureSet.length) {
+                    //update the selectedFeature
+                    this._selectedFeature = featureSet;
+                    //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];
+                    }
+                }
+            }
+        }
+    }
     static get is() { return "crowdsource-reporter"; }
     static get originalStyleUrls() {
         return {
@@ -401,6 +675,40 @@ export class CrowdsourceReporter {
                     "text": "esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
                 }
             },
+            "layerId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: Layer id of the feature from URL params"
+                },
+                "attribute": "layer-id",
+                "reflect": false
+            },
+            "objectId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: Object id of the feature from URL params"
+                },
+                "attribute": "object-id",
+                "reflect": false
+            },
             "reportButtonText": {
                 "type": "string",
                 "mutable": false,
@@ -616,7 +924,11 @@ export class CrowdsourceReporter {
             "_flowItems": {},
             "_sidePanelCollapsed": {},
             "_translations": {},
-            "_hasValidLayers": {}
+            "_hasValidLayers": {},
+            "_selectedLayerName": {},
+            "_reportSubmitted": {},
+            "_showSubmitCancelButton": {},
+            "_featureCreationFailedErrorMsg": {}
         };
     }
     static get events() {

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

@@ -84,6 +84,7 @@ export class FeatureList {
     //--------------------------------------------------------------------------
     /**
      * Initialize the features list using the selected layer
+     * @protected
      */
     async initializeFeatureItems() {
         if (this._selectedLayer) {
@@ -111,6 +112,7 @@ export class FeatureList {
     /**
      * On feature click in feature list highlight the feature on the map
      * @param event feature clicked event
+     * @param selectedFeature selected feature graphic
      * @protected
      */
     async featureClicked(event, selectedFeature) {

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

@@ -26,3 +26,7 @@
   font-weight: 500;
   padding: 10px 12px;
 }
+
+.feature-count {
+  padding-right: 12px;
+}

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

@@ -27,6 +27,8 @@ export class LayerList {
         this.mapView = undefined;
         this.layers = undefined;
         this.noLayerErrorMsg = undefined;
+        this.showFeatureCount = true;
+        this.showNextIcon = false;
         this._noLayersToDisplay = false;
         this._mapLayerIds = [];
         this._isLoading = false;
@@ -34,6 +36,23 @@ export class LayerList {
     }
     //--------------------------------------------------------------------------
     //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Methods (public)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Refresh the layer list which will fetch the latest layer count and update the list
+     * @returns Promise that resolves when the operation is complete
+     */
+    async refresh() {
+        await this.setLayers();
+    }
+    //--------------------------------------------------------------------------
+    //
     //  Functions (lifecycle)
     //
     //--------------------------------------------------------------------------
@@ -58,7 +77,7 @@ export class LayerList {
     render() {
         return (h(Fragment, null, this._isLoading && h("calcite-loader", { 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._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
-            h("calcite-list", null, this.renderLayerList())));
+            h("calcite-list", { "selection-appearance": "border", "selection-mode": this.showNextIcon ? "none" : "single-persist" }, this.renderLayerList())));
     }
     //--------------------------------------------------------------------------
     //
@@ -88,18 +107,21 @@ export class LayerList {
         allMapLayers.forEach(async (eachLayer) => {
             var _a, _b;
             //TODO: checking editable condition could be configurable
-            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.supportsUpdate)) {
-                const q = eachLayer.createQuery();
-                const result = eachLayer.queryFeatureCount(q);
-                def.push(result);
-                void result.then(async (resCount) => {
-                    const formattedCount = !isNaN(resCount) ? await formatNumber(resCount, {
-                        places: 0,
-                        api: 4,
-                        type: "decimal"
-                    }) : "";
-                    this._layerItemsHash[eachLayer.id].formattedFeatureCount = formattedCount;
-                });
+            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)) {
+                this._layerItemsHash[eachLayer.id].supportsAdd = true;
+                if (this.showFeatureCount) {
+                    const q = eachLayer.createQuery();
+                    const result = eachLayer.queryFeatureCount(q);
+                    def.push(result);
+                    void result.then(async (resCount) => {
+                        const formattedCount = !isNaN(resCount) ? await formatNumber(resCount, {
+                            places: 0,
+                            api: 4,
+                            type: "decimal"
+                        }) : "";
+                        this._layerItemsHash[eachLayer.id].formattedFeatureCount = formattedCount;
+                    });
+                }
             }
         });
         await Promise.all(def).then(() => {
@@ -127,9 +149,9 @@ export class LayerList {
         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].supportsUpdate;
+            let showLayer = hash[cur].supportsAdd;
             if ((configuredLayers === null || configuredLayers === void 0 ? void 0 : configuredLayers.length) > 0) {
-                showLayer = configuredLayers.indexOf(cur) > -1 ? hash[cur].supportsUpdate : false;
+                showLayer = configuredLayers.indexOf(cur) > -1 ? hash[cur].supportsAdd : false;
             }
             if (showLayer) {
                 prev.push(cur);
@@ -159,13 +181,13 @@ export class LayerList {
     getLayerListItem(layerId) {
         const layerName = this._layerItemsHash[layerId].name;
         const featureCount = this._layerItemsHash[layerId].formattedFeatureCount;
-        return (h("calcite-list-item", { onCalciteListItemSelect: () => { this.showFeaturesList(layerId); } }, h("div", { class: "layer-name", slot: "content-start" }, layerName), featureCount !== "" && h("div", { slot: "content-end" }, "(" + featureCount + ")"), h("calcite-icon", { icon: "chevron-right", scale: "s", slot: "content-end" })));
+        return (h("calcite-list-item", { onCalciteListItemSelect: () => { this.onLayerItemSelected(layerId); } }, h("div", { class: "layer-name", slot: "content-start" }, layerName), this.showFeatureCount && featureCount !== undefined && featureCount !== "" && h("div", { class: !this.showNextIcon ? "feature-count" : "", slot: "content-end" }, "(" + featureCount + ")"), this.showNextIcon && h("calcite-icon", { icon: "chevron-right", scale: "s", slot: "content-end" })));
     }
-    /**On click of layer list item show feature list
+    /**On click of layer list item emit the event along with the selected layerId and layerName
      * @param layerId Layer id
      * @protected
      */
-    showFeaturesList(layerId) {
+    onLayerItemSelected(layerId) {
         this.layerSelect.emit({ layerId, layerName: this._layerItemsHash[layerId].name });
     }
     /**
@@ -241,6 +263,42 @@ export class LayerList {
                 },
                 "attribute": "no-layer-error-msg",
                 "reflect": false
+            },
+            "showFeatureCount": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: if true display's feature count for each layer"
+                },
+                "attribute": "show-feature-count",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showNextIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: If true display's arrow icon on each layer item"
+                },
+                "attribute": "show-next-icon",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -285,5 +343,29 @@ export class LayerList {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Refresh the layer list which will fetch the latest layer count and update the list",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise that resolves when the operation is complete"
+                        }]
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
 }