@esri/solutions-components 0.7.36 → 0.7.37

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

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-164d485a.js';
 import { g as getLocaleComponentStrings, l as loadModules } from './locale-25a5ae3e.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-8b83a40c.js';
+import { q as queryFeaturesByID, g as getLayerOrTable, c as goToSelection, e as queryAllIds, f as queryFeatureIds, i as queryFeaturesByGlobalID } from './mapViewUtils-257bc9b3.js';
+import { d as downloadCSV } from './downloadUtils-985dcd1c.js';
 import './esri-loader-eda07632.js';
 import './_commonjsHelpers-d5f9d613.js';
 import './interfaces-586e863c.js';
@@ -238,6 +238,7 @@ const LayerTable = class {
             this._initToolInfos();
         }
         this._initLayerExpressions();
+        this._resetColumnTemplates();
     }
     /**
      * watch for changes in map view and get the first layer
@@ -398,12 +399,14 @@ const LayerTable = class {
      * @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
@@ -1040,6 +1043,18 @@ const LayerTable = class {
         }
         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
      */
@@ -1090,12 +1105,28 @@ const LayerTable = class {
     }
     /**
      * 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/esm/crowdsource-manager.entry.js

@@ -6,7 +6,7 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-164d485a.js';
 import { g as getLocaleComponentStrings } from './locale-25a5ae3e.js';
 import { E as ELayoutMode } from './interfaces-586e863c.js';
-import { g as getLayerOrTable } from './mapViewUtils-cf05e880.js';
+import { g as getLayerOrTable } from './mapViewUtils-257bc9b3.js';
 import './esri-loader-eda07632.js';
 import './_commonjsHelpers-d5f9d613.js';
 

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

@@ -5,7 +5,7 @@
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-164d485a.js';
 import { l as loadModules, g as getLocaleComponentStrings } from './locale-25a5ae3e.js';
-import { a as getAllLayers, g as getLayerOrTable, q as queryFeaturesByID } from './mapViewUtils-cf05e880.js';
+import { a as getAllLayers, b as getFeatureLayerView, h as highlightFeatures, g as getLayerOrTable, q as queryFeaturesByID } from './mapViewUtils-257bc9b3.js';
 import './esri-loader-eda07632.js';
 import './_commonjsHelpers-d5f9d613.js';
 import './interfaces-586e863c.js';
@@ -304,6 +304,7 @@ const CrowdsourceReporter = class {
     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();
@@ -336,14 +337,14 @@ const CrowdsourceReporter = class {
      */
     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
@@ -375,6 +376,30 @@ const CrowdsourceReporter = class {
      */
     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
@@ -442,6 +467,7 @@ const CrowdsourceReporter = class {
             }
             else {
                 this._flowItems = [...this._flowItems];
+                void this.highlightOnMap(clickedGraphics[0]);
             }
         }
     }