@esri/solutions-components 0.7.36 → 0.7.38

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

@@ -336,7 +336,7 @@ export class CrowdsourceManager {
      */
     _getMapAndCard(layoutMode, panelOpen, hideTable) {
         const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen, hideTable);
-        return (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(layoutMode, panelOpen), this._getPopupExpandNode()));
+        return (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(panelOpen), this._getPopupExpandNode()));
     }
     /**
      * Get the map node based for the current layout options
@@ -347,11 +347,10 @@ export class CrowdsourceManager {
      * @returns the map node
      * @protected
      */
-    _getMapNode(layoutMode, panelOpen) {
+    _getMapNode(panelOpen) {
         var _a;
-        const mapDisplayClass = layoutMode === ELayoutMode.HORIZONTAL ? "" : layoutMode === ELayoutMode.GRID ? "" : "visibility-hidden";
         const mapContainerClass = this._layoutMode === ELayoutMode.HORIZONTAL && (!this._isMobile || panelOpen) ? "" : "adjusted-height-50";
-        return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", defaultWebmapId: this.defaultWebmap, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: true, hidden: this._expandPopup, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", mapInfos: (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"] })));
+        return (h("div", { class: `${mapContainerClass} overflow-hidden` }, h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", defaultWebmapId: this.defaultWebmap, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: true, hidden: this._expandPopup && !this._isMobile, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", mapInfos: (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"] })));
     }
     /**
      * Get the expand node for the popup information

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() {
@@ -313,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();
@@ -345,14 +346,14 @@ export class CrowdsourceReporter {
      */
     getFeatureListFlowItem(layerId, layerName) {
         return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports &&
-            h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { class: "height-full", highlightOnMap: true, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, selectedLayerId: layerId }))));
+            h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText), 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
@@ -384,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
@@ -451,6 +476,7 @@ export class CrowdsourceReporter {
             }
             else {
                 this._flowItems = [...this._flowItems];
+                void this.highlightOnMap(clickedGraphics[0]);
             }
         }
     }

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
@@ -176,10 +177,10 @@ export class LayerTable {
      * watch for changes in layer view and verify if it has editing enabled
      */
     async _layerWatchHandler() {
-        var _a, _b;
+        var _a, _b, _c;
         this._fetchingData = true;
-        this._definitionExpression = this._layer.definitionExpression;
-        this._floorField = (_b = (_a = this._layer) === null || _a === void 0 ? void 0 : _a.floorInfo) === null || _b === void 0 ? void 0 : _b.floorField;
+        this._definitionExpression = (_a = this._layer) === null || _a === void 0 ? void 0 : _a.definitionExpression;
+        this._floorField = (_c = (_b = this._layer) === null || _b === void 0 ? void 0 : _b.floorInfo) === null || _c === void 0 ? void 0 : _c.floorField;
         this._updateFloorDefinitionExpression();
         await this._resetTable();
         this._updateShareUrl();
@@ -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,20 @@ 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);
+        if (this._table && columnTemplates) {
+            this._table.tableTemplate = new this.TableTemplate({
+                columnTemplates
+            });
+            const fieldNames = columnTemplates.map(f => f.fieldName);
+            this._initColumnsInfo(fieldNames);
+        }
+    }
     /**
      * Reset basic table props
      */
@@ -1009,12 +1026,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/components/map-card/map-card.css

@@ -32,8 +32,9 @@
   box-shadow: none !important;
 }
 
-.visibility-hidden {
+.visibility-hidden-1 {
   visibility: hidden;
+  height: 1px; /* setting to 1 as 0 would cause the editor to not load in some cases */
 }
 
 .display-none {

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

@@ -93,7 +93,7 @@ export class MapCard {
      */
     render() {
         var _a, _b;
-        const mapClass = this.hidden ? "visibility-hidden" : "";
+        const mapClass = this.hidden ? "visibility-hidden-1" : "";
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
         const mapPickerClass = ((_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.length) > 1 ? "" : "display-none";
         const mapHeightClass = ((_b = this.mapInfos) === null || _b === void 0 ? void 0 : _b.length) > 1 ? "map-height" : "height-full";

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

@@ -383,7 +383,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      */
     _getMapAndCard(layoutMode, panelOpen, hideTable) {
         const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen, hideTable);
-        return (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(layoutMode, panelOpen), this._getPopupExpandNode()));
+        return (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(panelOpen), this._getPopupExpandNode()));
     }
     /**
      * Get the map node based for the current layout options
@@ -394,11 +394,10 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      * @returns the map node
      * @protected
      */
-    _getMapNode(layoutMode, panelOpen) {
+    _getMapNode(panelOpen) {
         var _a;
-        const mapDisplayClass = layoutMode === ELayoutMode.HORIZONTAL ? "" : layoutMode === ELayoutMode.GRID ? "" : "visibility-hidden";
         const mapContainerClass = this._layoutMode === ELayoutMode.HORIZONTAL && (!this._isMobile || panelOpen) ? "" : "adjusted-height-50";
-        return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", defaultWebmapId: this.defaultWebmap, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: true, hidden: this._expandPopup, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", mapInfos: (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"] })));
+        return (h("div", { class: `${mapContainerClass} overflow-hidden` }, h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", defaultWebmapId: this.defaultWebmap, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: true, hidden: this._expandPopup && !this._isMobile, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", mapInfos: (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"] })));
     }
     /**
      * Get the expand node for the popup information

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';
@@ -335,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();
@@ -367,14 +368,14 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     getFeatureListFlowItem(layerId, layerName) {
         return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports &&
-            h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { class: "height-full", highlightOnMap: true, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, selectedLayerId: layerId }))));
+            h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText), 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
@@ -406,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
@@ -473,6 +498,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             }
             else {
                 this._flowItems = [...this._flowItems];
+                void this.highlightOnMap(clickedGraphics[0]);
             }
         }
     }

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
@@ -205,10 +206,10 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * watch for changes in layer view and verify if it has editing enabled
      */
     async _layerWatchHandler() {
-        var _a, _b;
+        var _a, _b, _c;
         this._fetchingData = true;
-        this._definitionExpression = this._layer.definitionExpression;
-        this._floorField = (_b = (_a = this._layer) === null || _a === void 0 ? void 0 : _a.floorInfo) === null || _b === void 0 ? void 0 : _b.floorField;
+        this._definitionExpression = (_a = this._layer) === null || _a === void 0 ? void 0 : _a.definitionExpression;
+        this._floorField = (_c = (_b = this._layer) === null || _b === void 0 ? void 0 : _b.floorInfo) === null || _c === void 0 ? void 0 : _c.floorField;
         this._updateFloorDefinitionExpression();
         await this._resetTable();
         this._updateShareUrl();
@@ -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,20 @@ 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);
+        if (this._table && columnTemplates) {
+            this._table.tableTemplate = new this.TableTemplate({
+                columnTemplates
+            });
+            const fieldNames = columnTemplates.map(f => f.fieldName);
+            this._initColumnsInfo(fieldNames);
+        }
+    }
     /**
      * Reset basic table props
      */
@@ -1038,12 +1055,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/map-card2.js

@@ -30,7 +30,7 @@ import { d as defineCustomElement$3 } from './map-picker2.js';
 import { d as defineCustomElement$2 } from './map-search2.js';
 import { d as defineCustomElement$1 } from './map-tools2.js';
 
-const mapCardCss = ":host{display:block;--calcite-label-margin-bottom:0;--calcite-block-padding:0}.map-height{height:calc(100% - 51px)}.height-full{height:100%}.box-shadow{box-shadow:none !important}.visibility-hidden{visibility:hidden}.display-none{display:none}";
+const mapCardCss = ":host{display:block;--calcite-label-margin-bottom:0;--calcite-block-padding:0}.map-height{height:calc(100% - 51px)}.height-full{height:100%}.box-shadow{box-shadow:none !important}.visibility-hidden-1{visibility:hidden;height:1px;}.display-none{display:none}";
 
 const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLElement {
     constructor() {
@@ -103,7 +103,7 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
      */
     render() {
         var _a, _b;
-        const mapClass = this.hidden ? "visibility-hidden" : "";
+        const mapClass = this.hidden ? "visibility-hidden-1" : "";
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
         const mapPickerClass = ((_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.length) > 1 ? "" : "display-none";
         const mapHeightClass = ((_b = this.mapInfos) === null || _b === void 0 ? void 0 : _b.length) > 1 ? "map-height" : "height-full";

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';