@esri/solutions-components 0.7.35 → 0.7.37

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

@@ -414,9 +414,13 @@ export class CrowdsourceManager {
      * Update the component layout when its size changes
      */
     _onResize() {
-        this._isMobile = this.el.offsetWidth < 1024;
+        const isMobile = this.el.offsetWidth < 1024;
+        const forceOpen = !this._isMobile && isMobile;
+        this._isMobile = isMobile;
         this._layoutMode = this._isMobile ? ELayoutMode.HORIZONTAL : ELayoutMode.GRID;
-        this._panelOpen = true;
+        if (forceOpen) {
+            this._panelOpen = true;
+        }
     }
     /**
      * Open/Close the appropriate panel.

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, getLayerOrTable } from "../../utils/mapViewUtils";
+import { getAllLayers, getFeatureLayerView, getLayerOrTable, highlightFeatures } from "../../utils/mapViewUtils";
 import { queryFeaturesByID } from "../../utils/queryUtils";
 export class CrowdsourceReporter {
     constructor() {
@@ -97,7 +97,7 @@ export class CrowdsourceReporter {
      */
     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._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, 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()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -167,9 +167,7 @@ export class CrowdsourceReporter {
      * @protected
      */
     getLayerListFlowItem() {
-        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 &&
+        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._translations.noLayerToDisplayErrorMsg, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
     }
     /**
@@ -315,6 +313,7 @@ export class CrowdsourceReporter {
     backFromSelectedPanel() {
         const updatedFlowItems = [...this._flowItems];
         updatedFlowItems.pop();
+        this.clearHighlights();
         //Back to layer list, and return as the flowItems will be reset in navigateToHomePage
         if (updatedFlowItems.length === 1) {
             this.navigateToHomePage();
@@ -346,15 +345,15 @@ export class CrowdsourceReporter {
      * @protected
      */
     getFeatureListFlowItem(layerId, layerName) {
-        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: "solid", 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 }))));
+        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 }))));
     }
     /**
      * 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.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 }))));
+        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, highlightEnabled: false, 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
@@ -386,6 +385,30 @@ export class CrowdsourceReporter {
      */
     featureDetailsChanged(evt) {
         this.setCurrentFeature(evt.detail[0]);
+        void this.highlightOnMap(evt.detail[0]);
+    }
+    /**
+     * Highlights the feature on map
+     * @param selectedFeature Graphic currently shown in feature details
+     */
+    async highlightOnMap(selectedFeature) {
+        // if a feature is already highlighted, remove the previous highlight
+        this.clearHighlights();
+        // 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);
+            this._highlightHandle = await highlightFeatures([selectedFeature.getObjectId()], selectedLayerView, this.mapView, true);
+        }
+    }
+    /**
+     * Clears the highlight
+     * @protected
+     */
+    clearHighlights() {
+        //if a feature is already highlighted, then remove the highlight
+        if (this._highlightHandle) {
+            this._highlightHandle.remove();
+        }
     }
     /**
      * Returns the action button to Expand/Collapse side panel in mobile mode
@@ -453,6 +476,7 @@ export class CrowdsourceReporter {
             }
             else {
                 this._flowItems = [...this._flowItems];
+                void this.highlightOnMap(clickedGraphics[0]);
             }
         }
     }

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

@@ -74,7 +74,7 @@ export class FeatureList {
      */
     render() {
         return (h("calcite-panel", { "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { label: "", scale: "m" }), this._featureItems.length === 0 && !this._isLoading &&
-            h("calcite-notice", { class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { "selection-appearance": "border", "selection-mode": "single" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
+            h("calcite-notice", { class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
             h("div", { class: "width-full", slot: "footer" }, h("calcite-pagination", { class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, "start-item": "1", "total-items": this._featuresCount }))));
     }
     //--------------------------------------------------------------------------
@@ -122,14 +122,12 @@ export class FeatureList {
             this._highlightHandle = null;
         }
         //highlight on map only if it is selected item
-        if (event.target.selected) {
-            if (this.highlightOnMap) {
-                const selectedFeatureObjectId = Number(event.target.value);
-                const selectedLayerView = await getFeatureLayerView(this.mapView, this.selectedLayerId);
-                this._highlightHandle = await highlightFeatures([selectedFeatureObjectId], selectedLayerView, this.mapView, true);
-            }
-            this.featureSelect.emit(selectedFeature);
+        if (this.highlightOnMap) {
+            const selectedFeatureObjectId = Number(event.target.value);
+            const selectedLayerView = await getFeatureLayerView(this.mapView, this.selectedLayerId);
+            this._highlightHandle = await highlightFeatures([selectedFeatureObjectId], selectedLayerView, this.mapView, true);
         }
+        this.featureSelect.emit(selectedFeature);
     }
     /**
      * Query the selected feature layer, in descending order of object id's

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

@@ -30,6 +30,7 @@ export class InfoCard {
         this.mapView = undefined;
         this.zoomAndScrollToSelected = undefined;
         this.allowEditing = true;
+        this.highlightEnabled = true;
         this._alertOpen = false;
         this._count = "";
         this._editRecordOpen = false;
@@ -206,6 +207,7 @@ export class InfoCard {
                         heading: !this.isMobile
                     }
                 });
+                this._features.viewModel.highlightEnabled = this.highlightEnabled;
                 this.reactiveUtils.watch(() => this._features.viewModel.featureMenuOpen, (isOpen) => {
                     if (!isOpen) {
                         this._showListView = isOpen;
@@ -431,6 +433,24 @@ export class InfoCard {
                 "attribute": "allow-editing",
                 "reflect": false,
                 "defaultValue": "true"
+            },
+            "highlightEnabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: If true will highlights the features on map using Features Widget"
+                },
+                "attribute": "highlight-enabled",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }

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

@@ -157,6 +157,7 @@ export class LayerTable {
             this._initToolInfos();
         }
         this._initLayerExpressions();
+        this._resetColumnTemplates();
     }
     /**
      * watch for changes in map view and get the first layer
@@ -317,12 +318,14 @@ export class LayerTable {
      * @protected
      */
     async _initModules() {
-        const [FeatureTable, reactiveUtils] = await loadModules([
+        const [FeatureTable, reactiveUtils, TableTemplate] = await loadModules([
             "esri/widgets/FeatureTable",
-            "esri/core/reactiveUtils"
+            "esri/core/reactiveUtils",
+            "esri/widgets/FeatureTable/support/TableTemplate"
         ]);
         this.FeatureTable = FeatureTable;
         this.reactiveUtils = reactiveUtils;
+        this.TableTemplate = TableTemplate;
     }
     /**
      * Update the toolbar when its size changes
@@ -959,6 +962,18 @@ export class LayerTable {
         }
         this.featureSelectionChange.emit(this.selectedIds);
     }
+    /**
+     * Reset the tables column templates when we get new column config
+     */
+    _resetColumnTemplates() {
+        var _a, _b;
+        const columnTemplates = this._getColumnTemplates((_a = this._layer) === null || _a === void 0 ? void 0 : _a.id, (_b = this._layer) === null || _b === void 0 ? void 0 : _b.fields);
+        this._table.tableTemplate = new this.TableTemplate({
+            columnTemplates
+        });
+        const fieldNames = columnTemplates.map(f => f.fieldName);
+        this._initColumnsInfo(fieldNames);
+    }
     /**
      * Reset basic table props
      */
@@ -1009,12 +1024,28 @@ export class LayerTable {
     }
     /**
      * Store the column names and current hidden status to support show/hide of columns
+     * @param fieldNames optional list of names from new config options
      */
-    _initColumnsInfo() {
-        this._columnsInfo = this._table.columns.reduce((prev, cur) => {
-            prev[cur.name] = !cur.hidden;
+    _initColumnsInfo(fieldNames) {
+        var _a, _b;
+        // this._table.columns is not reflecting correct list when new
+        // tableTemplate.columnTemplates have been defined on an existing FeatureTable
+        // TODO review for better solution post 2024 R01 release
+        const columnsInfo = (_a = this._table) === null || _a === void 0 ? void 0 : _a.columns.reduce((prev, cur) => {
+            if (!fieldNames || ((fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.indexOf(cur.name)) > -1)) {
+                prev[cur.name] = !cur.hidden;
+            }
             return prev;
         }, {});
+        const oldColumnNames = (_b = this._table) === null || _b === void 0 ? void 0 : _b.columns.map((c) => c.name);
+        const newColumnNames = fieldNames ? fieldNames.filter(n => oldColumnNames.indexOf(n) < 0) : [];
+        newColumnNames.forEach(c => {
+            columnsInfo[c] = true;
+        });
+        this._columnsInfo = fieldNames ? fieldNames.reduce((prev, cur) => {
+            prev[cur] = columnsInfo[cur];
+            return prev;
+        }, {}) : columnsInfo;
     }
     /**
      * Select the feature that was specified via url params

package/dist/collection/utils/mapViewUtils.js

@@ -160,6 +160,8 @@ export async function getAllLayers(mapView) {
 export async function highlightFeatures(ids, layerView, mapView, updateExtent = false) {
     if (updateExtent) {
         await goToSelection(ids, layerView, mapView, false);
+        //wait for sometime to load the feature in layerView then only the highlight will work
+        await new Promise(resolve => setTimeout(resolve, 1000));
     }
     return layerView.highlight(ids);
 }

package/dist/collection/utils/mapViewUtils.ts

@@ -193,6 +193,8 @@ export async function highlightFeatures(
 ): Promise<__esri.Handle> {
   if (updateExtent) {
     await goToSelection(ids, layerView, mapView, false);
+    //wait for sometime to load the feature in layerView then only the highlight will work
+    await new Promise(resolve => setTimeout(resolve, 1000));
   }
   return layerView.highlight(ids);
 }

package/dist/components/crowdsource-manager.js

@@ -461,9 +461,13 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      * Update the component layout when its size changes
      */
     _onResize() {
-        this._isMobile = this.el.offsetWidth < 1024;
+        const isMobile = this.el.offsetWidth < 1024;
+        const forceOpen = !this._isMobile && isMobile;
+        this._isMobile = isMobile;
         this._layoutMode = this._isMobile ? ELayoutMode.HORIZONTAL : ELayoutMode.GRID;
-        this._panelOpen = true;
+        if (forceOpen) {
+            this._panelOpen = true;
+        }
     }
     /**
      * Open/Close the appropriate panel.

package/dist/components/crowdsource-reporter.js

@@ -6,7 +6,7 @@
 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, g as getLayerOrTable } from './mapViewUtils.js';
+import { a as getAllLayers, e as getFeatureLayerView, h as highlightFeatures, g as getLayerOrTable } from './mapViewUtils.js';
 import { q as queryFeaturesByID } from './queryUtils.js';
 import { d as defineCustomElement$w } from './action.js';
 import { d as defineCustomElement$v } from './action-menu.js';
@@ -119,7 +119,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     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._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, 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()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -189,9 +189,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @protected
      */
     getLayerListFlowItem() {
-        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 &&
+        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._translations.noLayerToDisplayErrorMsg, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
     }
     /**
@@ -337,6 +335,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     backFromSelectedPanel() {
         const updatedFlowItems = [...this._flowItems];
         updatedFlowItems.pop();
+        this.clearHighlights();
         //Back to layer list, and return as the flowItems will be reset in navigateToHomePage
         if (updatedFlowItems.length === 1) {
             this.navigateToHomePage();
@@ -368,15 +367,15 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @protected
      */
     getFeatureListFlowItem(layerId, layerName) {
-        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: "solid", 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 }))));
+        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 }))));
     }
     /**
      * 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.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 }))));
+        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, highlightEnabled: false, 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
@@ -408,6 +407,30 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     featureDetailsChanged(evt) {
         this.setCurrentFeature(evt.detail[0]);
+        void this.highlightOnMap(evt.detail[0]);
+    }
+    /**
+     * Highlights the feature on map
+     * @param selectedFeature Graphic currently shown in feature details
+     */
+    async highlightOnMap(selectedFeature) {
+        // if a feature is already highlighted, remove the previous highlight
+        this.clearHighlights();
+        // 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);
+            this._highlightHandle = await highlightFeatures([selectedFeature.getObjectId()], selectedLayerView, this.mapView, true);
+        }
+    }
+    /**
+     * Clears the highlight
+     * @protected
+     */
+    clearHighlights() {
+        //if a feature is already highlighted, then remove the highlight
+        if (this._highlightHandle) {
+            this._highlightHandle.remove();
+        }
     }
     /**
      * Returns the action button to Expand/Collapse side panel in mobile mode
@@ -475,6 +498,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             }
             else {
                 this._flowItems = [...this._flowItems];
+                void this.highlightOnMap(clickedGraphics[0]);
             }
         }
     }

package/dist/components/feature-list2.js

@@ -81,7 +81,7 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
      */
     render() {
         return (h("calcite-panel", { "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { label: "", scale: "m" }), this._featureItems.length === 0 && !this._isLoading &&
-            h("calcite-notice", { class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { "selection-appearance": "border", "selection-mode": "single" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
+            h("calcite-notice", { class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
             h("div", { class: "width-full", slot: "footer" }, h("calcite-pagination", { class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, "start-item": "1", "total-items": this._featuresCount }))));
     }
     //--------------------------------------------------------------------------
@@ -129,14 +129,12 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
             this._highlightHandle = null;
         }
         //highlight on map only if it is selected item
-        if (event.target.selected) {
-            if (this.highlightOnMap) {
-                const selectedFeatureObjectId = Number(event.target.value);
-                const selectedLayerView = await getFeatureLayerView(this.mapView, this.selectedLayerId);
-                this._highlightHandle = await highlightFeatures([selectedFeatureObjectId], selectedLayerView, this.mapView, true);
-            }
-            this.featureSelect.emit(selectedFeature);
+        if (this.highlightOnMap) {
+            const selectedFeatureObjectId = Number(event.target.value);
+            const selectedLayerView = await getFeatureLayerView(this.mapView, this.selectedLayerId);
+            this._highlightHandle = await highlightFeatures([selectedFeatureObjectId], selectedLayerView, this.mapView, true);
         }
+        this.featureSelect.emit(selectedFeature);
     }
     /**
      * Query the selected feature layer, in descending order of object id's

package/dist/components/info-card2.js

@@ -38,6 +38,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
         this.mapView = undefined;
         this.zoomAndScrollToSelected = undefined;
         this.allowEditing = true;
+        this.highlightEnabled = true;
         this._alertOpen = false;
         this._count = "";
         this._editRecordOpen = false;
@@ -214,6 +215,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
                         heading: !this.isMobile
                     }
                 });
+                this._features.viewModel.highlightEnabled = this.highlightEnabled;
                 this.reactiveUtils.watch(() => this._features.viewModel.featureMenuOpen, (isOpen) => {
                     if (!isOpen) {
                         this._showListView = isOpen;
@@ -331,6 +333,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
         "mapView": [16],
         "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
         "allowEditing": [4, "allow-editing"],
+        "highlightEnabled": [4, "highlight-enabled"],
         "_alertOpen": [32],
         "_count": [32],
         "_editRecordOpen": [32],

package/dist/components/layer-table2.js

@@ -186,6 +186,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
             this._initToolInfos();
         }
         this._initLayerExpressions();
+        this._resetColumnTemplates();
     }
     /**
      * watch for changes in map view and get the first layer
@@ -346,12 +347,14 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * @protected
      */
     async _initModules() {
-        const [FeatureTable, reactiveUtils] = await loadModules([
+        const [FeatureTable, reactiveUtils, TableTemplate] = await loadModules([
             "esri/widgets/FeatureTable",
-            "esri/core/reactiveUtils"
+            "esri/core/reactiveUtils",
+            "esri/widgets/FeatureTable/support/TableTemplate"
         ]);
         this.FeatureTable = FeatureTable;
         this.reactiveUtils = reactiveUtils;
+        this.TableTemplate = TableTemplate;
     }
     /**
      * Update the toolbar when its size changes
@@ -988,6 +991,18 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         }
         this.featureSelectionChange.emit(this.selectedIds);
     }
+    /**
+     * Reset the tables column templates when we get new column config
+     */
+    _resetColumnTemplates() {
+        var _a, _b;
+        const columnTemplates = this._getColumnTemplates((_a = this._layer) === null || _a === void 0 ? void 0 : _a.id, (_b = this._layer) === null || _b === void 0 ? void 0 : _b.fields);
+        this._table.tableTemplate = new this.TableTemplate({
+            columnTemplates
+        });
+        const fieldNames = columnTemplates.map(f => f.fieldName);
+        this._initColumnsInfo(fieldNames);
+    }
     /**
      * Reset basic table props
      */
@@ -1038,12 +1053,28 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     /**
      * Store the column names and current hidden status to support show/hide of columns
+     * @param fieldNames optional list of names from new config options
      */
-    _initColumnsInfo() {
-        this._columnsInfo = this._table.columns.reduce((prev, cur) => {
-            prev[cur.name] = !cur.hidden;
+    _initColumnsInfo(fieldNames) {
+        var _a, _b;
+        // this._table.columns is not reflecting correct list when new
+        // tableTemplate.columnTemplates have been defined on an existing FeatureTable
+        // TODO review for better solution post 2024 R01 release
+        const columnsInfo = (_a = this._table) === null || _a === void 0 ? void 0 : _a.columns.reduce((prev, cur) => {
+            if (!fieldNames || ((fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.indexOf(cur.name)) > -1)) {
+                prev[cur.name] = !cur.hidden;
+            }
             return prev;
         }, {});
+        const oldColumnNames = (_b = this._table) === null || _b === void 0 ? void 0 : _b.columns.map((c) => c.name);
+        const newColumnNames = fieldNames ? fieldNames.filter(n => oldColumnNames.indexOf(n) < 0) : [];
+        newColumnNames.forEach(c => {
+            columnsInfo[c] = true;
+        });
+        this._columnsInfo = fieldNames ? fieldNames.reduce((prev, cur) => {
+            prev[cur] = columnsInfo[cur];
+            return prev;
+        }, {}) : columnsInfo;
     }
     /**
      * Select the feature that was specified via url params

package/dist/components/mapViewUtils.js

@@ -161,6 +161,8 @@ async function getAllLayers(mapView) {
 async function highlightFeatures(ids, layerView, mapView, updateExtent = false) {
     if (updateExtent) {
         await goToSelection(ids, layerView, mapView, false);
+        //wait for sometime to load the feature in layerView then only the highlight will work
+        await new Promise(resolve => setTimeout(resolve, 1000));
     }
     return layerView.highlight(ids);
 }

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

@@ -12,7 +12,7 @@ import { o as onToggleOpenCloseComponent } from './openCloseComponent-9f90f493.j
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-436fb2b1.js';
 import { K as KindIcons } from './resources-88a48c5c.js';
 import { g as getLocaleComponentStrings, l as loadModules } from './locale-25a5ae3e.js';
-import { a as getAllLayers } from './mapViewUtils-cf05e880.js';
+import { a as getAllLayers } from './mapViewUtils-257bc9b3.js';
 import { P as PopupUtils } from './popupUtils-23fe3c9f.js';
 import './guid-b75a5f7b.js';
 import './resources-8834f920.js';
@@ -677,6 +677,7 @@ const InfoCard = class {
         this.mapView = undefined;
         this.zoomAndScrollToSelected = undefined;
         this.allowEditing = true;
+        this.highlightEnabled = true;
         this._alertOpen = false;
         this._count = "";
         this._editRecordOpen = false;
@@ -853,6 +854,7 @@ const InfoCard = class {
                         heading: !this.isMobile
                     }
                 });
+                this._features.viewModel.highlightEnabled = this.highlightEnabled;
                 this.reactiveUtils.watch(() => this._features.viewModel.featureMenuOpen, (isOpen) => {
                     if (!isOpen) {
                         this._showListView = isOpen;

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

@@ -22,7 +22,7 @@ import { V as Validation } from './Validation-ea480265.js';
 import { d as debounce } from './debounce-229b1a22.js';
 import { i as isActivationKey } from './key-c83d835f.js';
 import { g as getLocaleComponentStrings } from './locale-25a5ae3e.js';
-import { d as getMapLayerHash, o as getMapTableHash } from './mapViewUtils-cf05e880.js';
+import { d as getMapLayerHash, o as getMapTableHash } from './mapViewUtils-257bc9b3.js';
 import { s as state } from './publicNotificationStore-3bf4de75.js';
 import './resources-8834f920.js';
 import './browser-d60104bd.js';

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

@@ -12,7 +12,7 @@ import { c as connectLocalized, d as disconnectLocalized } from './locale-904407
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-436fb2b1.js';
 import { S as SLOTS$1 } from './resources-00983bd3.js';
 import { l as loadModules, g as getLocaleComponentStrings, f as formatNumber } from './locale-25a5ae3e.js';
-import { a as getAllLayers, g as getLayerOrTable, c as getFeatureLayerView, h as highlightFeatures, d as getMapLayerHash } from './mapViewUtils-cf05e880.js';
+import { a as getAllLayers, g as getLayerOrTable, b as getFeatureLayerView, h as highlightFeatures, d as getMapLayerHash } from './mapViewUtils-257bc9b3.js';
 import { P as PopupUtils } from './popupUtils-23fe3c9f.js';
 import './guid-b75a5f7b.js';
 import './resources-8834f920.js';
@@ -637,7 +637,7 @@ const FeatureList = class {
      */
     render() {
         return (h("calcite-panel", { "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { label: "", scale: "m" }), this._featureItems.length === 0 && !this._isLoading &&
-            h("calcite-notice", { class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { "selection-appearance": "border", "selection-mode": "single" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
+            h("calcite-notice", { class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
             h("div", { class: "width-full", slot: "footer" }, h("calcite-pagination", { class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, "start-item": "1", "total-items": this._featuresCount }))));
     }
     //--------------------------------------------------------------------------
@@ -685,14 +685,12 @@ const FeatureList = class {
             this._highlightHandle = null;
         }
         //highlight on map only if it is selected item
-        if (event.target.selected) {
-            if (this.highlightOnMap) {
-                const selectedFeatureObjectId = Number(event.target.value);
-                const selectedLayerView = await getFeatureLayerView(this.mapView, this.selectedLayerId);
-                this._highlightHandle = await highlightFeatures([selectedFeatureObjectId], selectedLayerView, this.mapView, true);
-            }
-            this.featureSelect.emit(selectedFeature);
+        if (this.highlightOnMap) {
+            const selectedFeatureObjectId = Number(event.target.value);
+            const selectedLayerView = await getFeatureLayerView(this.mapView, this.selectedLayerId);
+            this._highlightHandle = await highlightFeatures([selectedFeatureObjectId], selectedLayerView, this.mapView, true);
         }
+        this.featureSelect.emit(selectedFeature);
     }
     /**
      * Query the selected feature layer, in descending order of object id's