@esri/solutions-components 0.7.29 → 0.7.30

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

@@ -20,6 +20,8 @@
  */
 import { Host, h } from "@stencil/core";
 import { getLocaleComponentStrings } from "../../utils/locale";
+import { loadModules } from "../../utils/loadModules";
+import { getAllLayers } from "../../utils/mapViewUtils";
 export class CrowdsourceReporter {
     constructor() {
         this.description = undefined;
@@ -48,6 +50,7 @@ export class CrowdsourceReporter {
         this._sidePanelCollapsed = false;
         this._translations = undefined;
         this._hasValidLayers = false;
+        this._selectedLayerName = undefined;
     }
     //--------------------------------------------------------------------------
     //
@@ -79,6 +82,7 @@ export class CrowdsourceReporter {
      * @returns Promise when complete
      */
     async componentWillLoad() {
+        await this._initModules();
         await this._getTranslations();
     }
     /**
@@ -92,6 +96,19 @@ export class CrowdsourceReporter {
     //  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;
+    }
     /**
      * Get the reporter app functionality
      * @protected
@@ -125,7 +142,7 @@ 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", 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), showFeatureCount: true, showNextIcon: true }))));
     }
     /**
      * 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
@@ -134,6 +151,7 @@ export class CrowdsourceReporter {
      */
     layerListLoaded(evt) {
         const layersListed = evt.detail;
+        this.handleMapClick(layersListed);
         this._hasValidLayers = layersListed.length > 0;
     }
     /**On click of layer list item show feature list
@@ -173,6 +191,7 @@ export class CrowdsourceReporter {
     /**
      * Get feature list of the selected feature layer
      * @param layerId Layer id
+     * @param layerName Layer name
      * @returns feature list node
      * @protected
      */
@@ -185,7 +204,15 @@ export class CrowdsourceReporter {
      * @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.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, onSelectionChanged: this.featureDetailsChanged.bind(this), zoomAndScrollToSelected: true }))));
+    }
+    /**
+     * 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._selectedLayerId = evt.detail[0].layer.id;
+        this._selectedLayerName = evt.detail[0].layer.title;
     }
     /**
      * Returns the action button to Expand/Collapse side panel in mobile mode
@@ -208,6 +235,63 @@ export class CrowdsourceReporter {
             this._defaultLevel = undefined;
         }
     }
+    /**
+     * Handle map click event
+     * @param layers Array of layerIds
+     *
+     *  @protected
+     */
+    handleMapClick(layers) {
+        if (this._mapClickHandle) {
+            this._mapClickHandle.remove();
+        }
+        this._mapClickHandle = this.reactiveUtils.on(() => this.mapView, "click", (event) => {
+            void this.onMapClick(event, layers);
+        });
+    }
+    /**
+     * On map click do hitTest and get the clicked graphics of valid layers and show feature details
+     * @param event
+     * @param layers
+     *
+     * @protected
+     */
+    async onMapClick(event, layers) {
+        //disable map popup
+        this.mapView.popupEnabled = false;
+        // only include graphics from valid layers listed in the layer list widget
+        const allMapLayers = await getAllLayers(this.mapView);
+        const validLayers = [];
+        allMapLayers.forEach((eachLayer) => {
+            if (layers.includes(eachLayer.id)) {
+                validLayers.push(eachLayer);
+            }
+        });
+        const opts = {
+            include: 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._selectedFeature = 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
@@ -616,7 +700,8 @@ export class CrowdsourceReporter {
             "_flowItems": {},
             "_sidePanelCollapsed": {},
             "_translations": {},
-            "_hasValidLayers": {}
+            "_hasValidLayers": {},
+            "_selectedLayerName": {}
         };
     }
     static get events() {

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

@@ -111,6 +111,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;
@@ -58,7 +60,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" }, this.renderLayerList())));
     }
     //--------------------------------------------------------------------------
     //
@@ -85,7 +87,7 @@ export class LayerList {
         this._layerItemsHash = await getMapLayerHash(this.mapView, true);
         const allMapLayers = await getAllLayers(this.mapView);
         // eslint-disable-next-line @typescript-eslint/no-misused-promises
-        allMapLayers.forEach(async (eachLayer) => {
+        this.showFeatureCount && 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)) {
@@ -159,13 +161,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 +243,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"
             }
         };
     }

package/dist/collection/demos/crowdsource-reporter.html

@@ -156,20 +156,20 @@
         //on change update the prop for is mobile
         mediaQueryList.onchange = (e) => {
           demo.isMobile = e.matches;
-          togglePanel({detail:false})
+          togglePanel({ detail: false })
         }
         //listen to togglePanel event
         demo.addEventListener('togglePanel', togglePanel);
       });
 
-      function togglePanel(evt){
+      function togglePanel(evt) {
         const state = evt.detail;
         const viewDiv = document.getElementById("viewDiv");
         const demo = document.getElementById("demo");
-        if(state){
+        if (state) {
           demo.classList.add("column-collapsed");
           viewDiv.classList.add("map-with-panel-collapsed");
-        } else{
+        } else {
           demo.classList.remove("column-collapsed");
           viewDiv.classList.remove("map-with-panel-collapsed");
         }

package/dist/collection/demos/feature-list.html

@@ -77,7 +77,7 @@
         view.when(function () {
           const demo = document.getElementById("demo");
           demo.mapView = view;
-          demo.selectedLayerId = 'BirdObservationTryItLive_2797'
+          demo.selectedLayerId = 'BirdObservationTryItLive_2797';
           demo.pageSize = 30;
         })
       });

package/dist/components/crowdsource-reporter.js

@@ -5,6 +5,8 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getLocaleComponentStrings } from './locale.js';
+import { l as loadModules } from './loadModules.js';
+import { a as getAllLayers } from './mapViewUtils.js';
 import { d as defineCustomElement$u } from './action.js';
 import { d as defineCustomElement$t } from './action-menu.js';
 import { d as defineCustomElement$s } from './alert.js';
@@ -68,6 +70,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         this._sidePanelCollapsed = false;
         this._translations = undefined;
         this._hasValidLayers = false;
+        this._selectedLayerName = undefined;
     }
     //--------------------------------------------------------------------------
     //
@@ -99,6 +102,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @returns Promise when complete
      */
     async componentWillLoad() {
+        await this._initModules();
         await this._getTranslations();
     }
     /**
@@ -112,6 +116,19 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     //  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;
+    }
     /**
      * Get the reporter app functionality
      * @protected
@@ -145,7 +162,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         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", 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), showFeatureCount: true, showNextIcon: true }))));
     }
     /**
      * 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
@@ -154,6 +171,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     layerListLoaded(evt) {
         const layersListed = evt.detail;
+        this.handleMapClick(layersListed);
         this._hasValidLayers = layersListed.length > 0;
     }
     /**On click of layer list item show feature list
@@ -193,6 +211,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     /**
      * Get feature list of the selected feature layer
      * @param layerId Layer id
+     * @param layerName Layer name
      * @returns feature list node
      * @protected
      */
@@ -205,7 +224,15 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @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.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, onSelectionChanged: this.featureDetailsChanged.bind(this), zoomAndScrollToSelected: true }))));
+    }
+    /**
+     * 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._selectedLayerId = evt.detail[0].layer.id;
+        this._selectedLayerName = evt.detail[0].layer.title;
     }
     /**
      * Returns the action button to Expand/Collapse side panel in mobile mode
@@ -228,6 +255,63 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             this._defaultLevel = undefined;
         }
     }
+    /**
+     * Handle map click event
+     * @param layers Array of layerIds
+     *
+     *  @protected
+     */
+    handleMapClick(layers) {
+        if (this._mapClickHandle) {
+            this._mapClickHandle.remove();
+        }
+        this._mapClickHandle = this.reactiveUtils.on(() => this.mapView, "click", (event) => {
+            void this.onMapClick(event, layers);
+        });
+    }
+    /**
+     * On map click do hitTest and get the clicked graphics of valid layers and show feature details
+     * @param event
+     * @param layers
+     *
+     * @protected
+     */
+    async onMapClick(event, layers) {
+        //disable map popup
+        this.mapView.popupEnabled = false;
+        // only include graphics from valid layers listed in the layer list widget
+        const allMapLayers = await getAllLayers(this.mapView);
+        const validLayers = [];
+        allMapLayers.forEach((eachLayer) => {
+            if (layers.includes(eachLayer.id)) {
+                validLayers.push(eachLayer);
+            }
+        });
+        const opts = {
+            include: 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._selectedFeature = 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
@@ -269,7 +353,8 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         "_flowItems": [32],
         "_sidePanelCollapsed": [32],
         "_translations": [32],
-        "_hasValidLayers": [32]
+        "_hasValidLayers": [32],
+        "_selectedLayerName": [32]
     }, undefined, {
         "isMobile": ["isMobileWatchHandler"],
         "mapView": ["mapViewWatchHandler"]

package/dist/components/feature-list2.js

@@ -118,6 +118,7 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
     /**
      * 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/components/layer-list2.js

@@ -19,7 +19,7 @@ import { d as defineCustomElement$3 } from './progress.js';
 import { d as defineCustomElement$2 } from './scrim.js';
 import { d as defineCustomElement$1 } from './stack.js';
 
-const layerListCss = ":host{display:block}.error-msg{padding:10px}.layer-name{font-weight:500;padding:10px 12px}";
+const layerListCss = ":host{display:block}.error-msg{padding:10px}.layer-name{font-weight:500;padding:10px 12px}.feature-count{padding-right:12px}";
 
 const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLElement {
     constructor() {
@@ -30,6 +30,8 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
         this.mapView = undefined;
         this.layers = undefined;
         this.noLayerErrorMsg = undefined;
+        this.showFeatureCount = true;
+        this.showNextIcon = false;
         this._noLayersToDisplay = false;
         this._mapLayerIds = [];
         this._isLoading = false;
@@ -61,7 +63,7 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
     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" }, this.renderLayerList())));
     }
     //--------------------------------------------------------------------------
     //
@@ -88,7 +90,7 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
         this._layerItemsHash = await getMapLayerHash(this.mapView, true);
         const allMapLayers = await getAllLayers(this.mapView);
         // eslint-disable-next-line @typescript-eslint/no-misused-promises
-        allMapLayers.forEach(async (eachLayer) => {
+        this.showFeatureCount && 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)) {
@@ -162,13 +164,13 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
     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 });
     }
     /**
@@ -186,6 +188,8 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
         "mapView": [16],
         "layers": [16],
         "noLayerErrorMsg": [1, "no-layer-error-msg"],
+        "showFeatureCount": [4, "show-feature-count"],
+        "showNextIcon": [4, "show-next-icon"],
         "_noLayersToDisplay": [32],
         "_mapLayerIds": [32],
         "_isLoading": [32],

package/dist/esm/calcite-alert_4.entry.js

@@ -12,7 +12,7 @@ import { o as onToggleOpenCloseComponent } from './openCloseComponent-982c6b9e.j
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-f16911e7.js';
 import { K as KindIcons } from './resources-6e00e0d1.js';
 import { g as getLocaleComponentStrings, l as loadModules } from './locale-731e75a8.js';
-import { d as getAllLayers } from './mapViewUtils-6daedef8.js';
+import { a as getAllLayers } from './mapViewUtils-cf05e880.js';
 import { P as PopupUtils } from './popupUtils-d75edf93.js';
 import './guid-36c6c6a5.js';
 import './resources-cdc36705.js';

package/dist/esm/calcite-combobox_6.entry.js

@@ -22,7 +22,7 @@ import { d as debounce } from './debounce-229b1a22.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-1149b5cb.js';
 import { i as isActivationKey } from './key-af303047.js';
 import { g as getLocaleComponentStrings } from './locale-731e75a8.js';
-import { c as getMapLayerHash, o as getMapTableHash } from './mapViewUtils-6daedef8.js';
+import { d as getMapLayerHash, o as getMapTableHash } from './mapViewUtils-cf05e880.js';
 import { s as state } from './publicNotificationStore-9362d7ae.js';
 import './resources-cdc36705.js';
 import './browser-b4c16201.js';

package/dist/esm/calcite-flow_4.entry.js

@@ -12,7 +12,7 @@ import { c as connectLocalized, d as disconnectLocalized } from './locale-6107ef
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-f16911e7.js';
 import { S as SLOTS$1 } from './resources-649a0f91.js';
 import { P as PopupUtils } from './popupUtils-d75edf93.js';
-import { g as getLayerOrTable, b as getFeatureLayerView, h as highlightFeatures, c as getMapLayerHash, d as getAllLayers } from './mapViewUtils-6daedef8.js';
+import { g as getLayerOrTable, c as getFeatureLayerView, h as highlightFeatures, d as getMapLayerHash, a as getAllLayers } from './mapViewUtils-cf05e880.js';
 import { g as getLocaleComponentStrings, f as formatNumber } from './locale-731e75a8.js';
 import './guid-36c6c6a5.js';
 import './resources-cdc36705.js';
@@ -428,6 +428,7 @@ const FeatureList = class {
     /**
      * 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) {
@@ -514,7 +515,7 @@ const FeatureList = class {
 };
 FeatureList.style = featureListCss;
 
-const layerListCss = ":host{display:block}.error-msg{padding:10px}.layer-name{font-weight:500;padding:10px 12px}";
+const layerListCss = ":host{display:block}.error-msg{padding:10px}.layer-name{font-weight:500;padding:10px 12px}.feature-count{padding-right:12px}";
 
 const LayerList = class {
     constructor(hostRef) {
@@ -524,6 +525,8 @@ const LayerList = class {
         this.mapView = undefined;
         this.layers = undefined;
         this.noLayerErrorMsg = undefined;
+        this.showFeatureCount = true;
+        this.showNextIcon = false;
         this._noLayersToDisplay = false;
         this._mapLayerIds = [];
         this._isLoading = false;
@@ -555,7 +558,7 @@ const LayerList = class {
     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" }, this.renderLayerList())));
     }
     //--------------------------------------------------------------------------
     //
@@ -582,7 +585,7 @@ const LayerList = class {
         this._layerItemsHash = await getMapLayerHash(this.mapView, true);
         const allMapLayers = await getAllLayers(this.mapView);
         // eslint-disable-next-line @typescript-eslint/no-misused-promises
-        allMapLayers.forEach(async (eachLayer) => {
+        this.showFeatureCount && 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)) {
@@ -656,13 +659,13 @@ const LayerList = class {
     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 });
     }
     /**

package/dist/esm/card-manager_3.entry.js

@@ -5,8 +5,8 @@
  */
 import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-7183ce4a.js';
 import { g as getLocaleComponentStrings, l as loadModules } from './locale-731e75a8.js';
-import { q as queryFeaturesByID, g as getLayerOrTable, a as goToSelection, e as queryAllIds, f as queryFeatureIds, i as queryFeaturesByGlobalID } from './mapViewUtils-6daedef8.js';
-import { d as downloadCSV } from './downloadUtils-a301c193.js';
+import { q as queryFeaturesByID, g as getLayerOrTable, b as goToSelection, e as queryAllIds, f as queryFeatureIds, i as queryFeaturesByGlobalID } from './mapViewUtils-cf05e880.js';
+import { d as downloadCSV } from './downloadUtils-d070a467.js';
 import './esri-loader-eda07632.js';
 import './_commonjsHelpers-d5f9d613.js';
 import './interfaces-586e863c.js';

package/dist/esm/crowdsource-manager.entry.js

@@ -6,7 +6,7 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-7183ce4a.js';
 import { g as getLocaleComponentStrings } from './locale-731e75a8.js';
 import { E as ELayoutMode } from './interfaces-586e863c.js';
-import { g as getLayerOrTable } from './mapViewUtils-6daedef8.js';
+import { g as getLayerOrTable } from './mapViewUtils-cf05e880.js';
 import './esri-loader-eda07632.js';
 import './_commonjsHelpers-d5f9d613.js';