@esri/solutions-components 0.10.9 → 0.10.11

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

@@ -27,6 +27,7 @@ export class CreateFeature {
         this.selectedLayerId = undefined;
         this.customizeSubmit = false;
         this.searchConfiguration = undefined;
+        this.isMobile = undefined;
         this._editorLoading = false;
         this._showSearchWidget = undefined;
     }
@@ -57,7 +58,17 @@ export class CreateFeature {
      */
     FeatureLayer;
     /**
-     * "esri/widgets/Search": https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html
+     * esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
+     * The MapView instance
+     */
+    MapView;
+    /**
+     * esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
+     * Updated map view instance
+     */
+    _updatedMapView;
+    /**
+     * esri/widgets/Search: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html
      * The Search instance
      */
     Search;
@@ -78,6 +89,10 @@ export class CreateFeature {
      * HTMLDivElement: The node the editor will be added to
      */
     _container;
+    /**
+     * HTMLDivElement: The node for the map view
+     */
+    _mapViewContainer;
     /**
      * boolean: Flag to maintain form submission using submit button
      */
@@ -95,6 +110,13 @@ export class CreateFeature {
             await this.init();
         });
     }
+    /**
+     * Called each time when isMobile prop is changed.
+     */
+    async isMobileHandler() {
+        // emit an event when mode is changed to back to the feature selection panel (to avoid multiple maps conflict)
+        this.modeChanged.emit();
+    }
     /**
      * When _editorLoading is true the container node will be hidden while starting the create workflow
      */
@@ -155,6 +177,10 @@ export class CreateFeature {
      * Emitted on demand when editor panel changes
      */
     progressStatus;
+    /**
+     * Emitted on switched form mobile to desktop or vice versa
+     */
+    modeChanged;
     //--------------------------------------------------------------------------
     //
     //  Functions (lifecycle)
@@ -180,7 +206,8 @@ export class CreateFeature {
         const showSearchWidget = this._showSearchWidget ? '' : 'display-none';
         const loaderClass = this._editorLoading ? "" : "display-none";
         const featureFormClass = this._editorLoading ? "display-none" : "";
-        return (h(Fragment, { key: 'a4ccd565a52a4cde4e76439629425f19bd4c222e' }, h("calcite-loader", { key: '30e8a3753985a734dd7cba461f26691b51f49ab9', class: loaderClass, label: "", scale: "s" }), h("div", { key: '0845f1fa85a21b578fd18200b43d4a77c34e6808', class: featureFormClass, id: "feature-form" }), h("div", { key: 'af74b6337f5a0dcfdbd552145c88eae5282a3307', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref" })));
+        const mobileMapClass = this.isMobile ? "show-map" : "display-none";
+        return (h(Fragment, { key: '8adaa70257dfef9632f82be75dbdff572e2c39b3' }, h("calcite-loader", { key: 'e1a1aba8613d9cea1033513748dd21b7f27f9806', class: loaderClass, label: "", scale: "s" }), h("div", { key: 'e1089ffe60d079f345d358aac7ae1a6bd59a55df', class: featureFormClass, id: "feature-form" }), h("div", { key: '52274b6cd4c9f6886293f858caac9e572697da25', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref" }), h("div", { key: '64108cfa3bb57f9739bfb4951352c5523c194761', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -192,8 +219,9 @@ export class CreateFeature {
      */
     async init() {
         if (this.mapView && this.selectedLayerId) {
-            await this.createEditorWidget();
-            await this.createSearchWidget();
+            this._updatedMapView = this.mapView;
+            // In mobile mode show the map in panel
+            await (this.isMobile ? this.createMobileMapView() : this._loadWidgets());
         }
     }
     /**
@@ -202,14 +230,41 @@ export class CreateFeature {
      * @protected
      */
     async initModules() {
-        const [Editor, reactiveUtils, Search] = await loadModules([
+        const [Editor, reactiveUtils, Search, MapView] = await loadModules([
             "esri/widgets/Editor",
             "esri/core/reactiveUtils",
-            "esri/widgets/Search"
+            "esri/widgets/Search",
+            "esri/views/MapView"
         ]);
         this.Editor = Editor;
         this.reactiveUtils = reactiveUtils;
         this.Search = Search;
+        this.MapView = MapView;
+    }
+    /**
+     * updates the map view (in case of mobile)
+     * @protected
+     */
+    async createMobileMapView() {
+        this._mapViewContainer.classList.add('hide-map');
+        await new this.MapView({
+            map: this.mapView.map,
+            container: this._mapViewContainer
+        }).when((view) => {
+            // update the mapView and load all widgets
+            this._updatedMapView = view;
+            void this._loadWidgets();
+        }, (e) => {
+            console.log(e);
+        });
+    }
+    /**
+     * Loads the Editor and Search widgets
+     * @protected
+     */
+    async _loadWidgets() {
+        await this.createEditorWidget();
+        await this.createSearchWidget();
     }
     /**
      * Display editor widget to create the new feature
@@ -222,7 +277,7 @@ export class CreateFeature {
         const layerInfos = [];
         this._container = document.createElement("div");
         this._container?.classList.add("display-none");
-        const allMapLayers = await getAllLayers(this.mapView);
+        const allMapLayers = await getAllLayers(this._updatedMapView);
         // eslint-disable-next-line @typescript-eslint/no-misused-promises
         allMapLayers.forEach(async (eachLayer) => {
             layerInfos.push({
@@ -235,14 +290,19 @@ export class CreateFeature {
         });
         this._editor = new this.Editor({
             allowedWorkflows: "create-features",
-            view: this.mapView,
+            view: this._updatedMapView,
             layerInfos: layerInfos,
             visibleElements: {
                 snappingControls: false
             },
             container: this._container
         });
-        this.el.appendChild(this._container);
+        if (this._mapViewContainer) {
+            this.el.insertBefore(this._container, this._mapViewContainer);
+        }
+        else {
+            this.el.appendChild(this._container);
+        }
         //Add handle to watch if attachments are added/edited
         const attachmentHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
             if (state === 'adding-attachment' || state === 'editing-attachment') {
@@ -268,6 +328,7 @@ export class CreateFeature {
         //Add handle to watch featureFormViewModel ready state
         const formHandle = this.reactiveUtils.watch(() => this._editor.viewModel.featureFormViewModel?.state, (state) => {
             if (state === 'ready') {
+                this._mapViewContainer?.classList?.replace("show-map", "hide-map");
                 this._showSearchWidget = false;
                 this.progressStatus.emit(1);
                 this.drawComplete.emit();
@@ -277,6 +338,7 @@ export class CreateFeature {
         //Add handle to watch editor viewmodel state and then show the search widget
         const createFeatureHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
             if (state === 'creating-features') {
+                this._mapViewContainer?.classList?.replace("hide-map", "show-map");
                 this._editorLoading = true;
                 this._showSearchWidget = true;
             }
@@ -288,6 +350,8 @@ export class CreateFeature {
      * @protected
      */
     async startCreate() {
+        // hides the header elements on template picker page 
+        await this.hideEditorsElements();
         return new Promise((resolve, reject) => {
             if (this._editor.viewModel.featureTemplatesViewModel.items?.length) {
                 const items = this._editor.viewModel.featureTemplatesViewModel.items[0].get("items");
@@ -324,10 +388,10 @@ export class CreateFeature {
      */
     async createSearchWidget() {
         let searchOptions = {
-            view: this.mapView,
+            view: this._updatedMapView,
         };
         if (this.searchConfiguration) {
-            const searchConfiguration = this._getSearchConfig(this.searchConfiguration, this.mapView);
+            const searchConfiguration = this._getSearchConfig(this.searchConfiguration, this._updatedMapView);
             searchOptions = {
                 ...searchConfiguration
             };
@@ -336,11 +400,11 @@ export class CreateFeature {
         this._search.container = 'search-widget-ref';
         this._search.popupEnabled = false;
         this._search.resultGraphicEnabled = false;
-        const layer = await getLayerOrTable(this.mapView, this.selectedLayerId);
+        const layer = await getLayerOrTable(this._updatedMapView, this.selectedLayerId);
         let pointGeometry = null;
         // on search get the geometry of the searched location and pass it in sketchViewModel and go to featureForm page
         this._search.on('search-complete', (e) => {
-            void this.mapView.goTo(e.results[0].results[0].extent);
+            void this._updatedMapView.goTo(e.results[0].results[0].extent);
             if (layer.geometryType === 'point') {
                 pointGeometry = e.results[0].results[0]?.feature.geometry;
             }
@@ -556,6 +620,23 @@ export class CreateFeature {
                     "tags": [],
                     "text": "ISearchConfiguration: Configuration details for the Search widget"
                 }
+            },
+            "isMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: When true the application will be in mobile mode, controls the mobile or desktop view"
+                },
+                "attribute": "is-mobile",
+                "reflect": false
             }
         };
     }
@@ -646,6 +727,21 @@ export class CreateFeature {
                     "resolved": "number",
                     "references": {}
                 }
+            }, {
+                "method": "modeChanged",
+                "name": "modeChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on switched form mobile to desktop or vice versa"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
@@ -697,6 +793,9 @@ export class CreateFeature {
         return [{
                 "propName": "mapView",
                 "methodName": "mapViewWatchHandler"
+            }, {
+                "propName": "isMobile",
+                "methodName": "isMobileHandler"
             }, {
                 "propName": "_editorLoading",
                 "methodName": "_editorLoadingWatchHandler"

package/dist/collection/components/create-related-feature/create-related-feature.js

@@ -167,7 +167,7 @@ export class CreateRelatedFeature {
     }
     render() {
         const loaderClass = this._editorLoading ? "" : "display-none";
-        return (h("calcite-loader", { key: '5302b1166a175b0605604792cd40b9d3fbfabd02', class: loaderClass, label: "", scale: "s" }));
+        return (h("calcite-loader", { key: 'f78b296f74ee01aadc0443abd0bb78b68a7d9f3e', class: loaderClass, label: "", scale: "s" }));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -276,7 +276,16 @@ export class CreateRelatedFeature {
      */
     makeAttributesForRelatedFeature(parentFeature, parentRelationship, childRelationship) {
         const parentKeyField = parentRelationship.keyField;
-        const parentKeyValue = parentFeature.getAttribute(parentKeyField);
+        let parentKeyValue;
+        if (parentFeature.attributes.hasOwnProperty(parentKeyField)) {
+            parentKeyValue = parentFeature.getAttribute(parentKeyField);
+        }
+        else if (parentFeature.attributes.hasOwnProperty(parentKeyField.toLowerCase())) {
+            parentKeyValue = parentFeature.getAttribute(parentKeyField.toLowerCase());
+        }
+        else if (parentFeature.attributes.hasOwnProperty(parentKeyField.toUpperCase())) {
+            parentKeyValue = parentFeature.getAttribute(parentKeyField.toUpperCase());
+        }
         let childKeyField = childRelationship.keyField;
         // get the field from table which name is same as childKeyField and use that field name as childKeyField
         const field = this.table.fields.find((field) => field.name.toLocaleLowerCase() === childKeyField.toLocaleLowerCase());

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

@@ -228,7 +228,7 @@ export class CrowdsourceManager {
     render() {
         // only avoid border when we have a header color that is not white
         const borderClass = this.popupHeaderColor && this.popupHeaderColor !== "#FFFFFF" ? "border-width-0" : "";
-        return (h(Host, { key: '44041e4854d9d1da0f894c090e4b5455930b7a48' }, h("calcite-shell", { key: 'f11ed09226e43740677eefe01d42b70329b2485b', class: "position-relative" }, h("calcite-panel", { key: '6911478eaf00887e7b1578baba16989395dca190', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter()), this._filterModal()));
+        return (h(Host, { key: '805eb5daf8d5d7879e3404cd3c5145abf36469de' }, h("calcite-shell", { key: 'cb8a9037084e0ce4d32986a19a9aac9e6f407e1a', class: "position-relative" }, h("calcite-panel", { key: '176b6ef3c05414ec4a0582aac2d56deb21bd329f', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter()), this._filterModal()));
     }
     /**
      * Called after each render

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

@@ -50,6 +50,7 @@ export class CrowdsourceReporter {
         this.reportSubmittedMessage = undefined;
         this.searchConfiguration = undefined;
         this.showComments = undefined;
+        this.showUserImageInCommentsList = false;
         this.theme = "light";
         this.zoomToScale = undefined;
         this._featureCreationFailedErrorMsg = undefined;
@@ -187,9 +188,9 @@ export class CrowdsourceReporter {
      */
     _layerItemsHash;
     /**
-     * boolean: when true allow map to be collapsed
+     * boolean: when true allow panel to show in full height
      */
-    isFormOpen;
+    _showFullPanel;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -199,7 +200,7 @@ export class CrowdsourceReporter {
      * Called each time the mapView prop is changed.
      */
     async isMobileWatchHandler() {
-        this._sidePanelCollapsed = false;
+        this.updatePanelState(false, this._showFullPanel);
     }
     /**
      * Called each time the mapView prop is changed.
@@ -250,7 +251,7 @@ export class CrowdsourceReporter {
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, { key: 'e512e2693a586f8a6da7bcfa171feb60da26aee3' }, this._reportSubmitted && h("calcite-alert", { key: 'e5805ba948f1dc43eba2a78716af452cf71a8222', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '95b9accf1f09186c09c81cfb02a8939c4869ae8d', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: 'cab7f0e0f0d882612b4fa6f00799be9870aea6c5', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: 'b9453672d85e26cf7bdeae0923cd36020d259d49', slot: "title" }, this._translations.error), h("div", { key: '5084315857bc88b8f80aaa411ac3fd5e4493e918', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '62b7d9818913c3331ca9c8e4ed23c7f0c48a7946', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '5f18444fd375657db0c2a403cb453ead75536181', slot: "message" }, this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '732f08960095fc9fefcc79fc8df387a5a4c3f781', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '16415430cf33ce53c0d49cab19dce2c3e34257d6', slot: "title" }, this._translations.error), h("div", { key: '83e5918e00902bd49512165f4aa62813cecb4619', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '3e9dadd880319708e64e717ba7e7adaddf97b935' }, h("calcite-shell", { key: 'c72664d361b3904bc191668207c3ad31ff1f98c9', "content-behind": true }, this._getReporter())), this.filterModal()));
+        return (h(Host, { key: 'e4d2d075e2667ba3e396178e4b820658655813d3' }, this._reportSubmitted && h("calcite-alert", { key: '0cc4678edca8993e529aed1f328816f7ff00e565', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { key: 'cb1bc1c8bed7db3d4535542e7cd6c42119fe1ac3', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '83693e1946d2825cf57f6d8ae5ca5a21a0cc7bfc', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: 'c8477c3bcbee4a71ba5169cf80895702bd2adf16', slot: "title" }, this._translations.error), h("div", { key: '30722d6036a5634269cd3e485c94e55a06d008a2', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '373b8130788f65dd55106ea3be7fe17aecf80ebb', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '999471c510f95a9699fcb84307bd7daca608725a', slot: "message" }, this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '72accc95ed73545157141ae82b1be1ff0b407a26', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: 'b8beab27be23c9c7f3a9a4a0e839090e63ed9916', slot: "title" }, this._translations.error), h("div", { key: '60d4db0311c00b9bf4ccf56bed1c4d40e003d30d', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '4bcca25c6f33c79eeb013cb469dd4e650bc649fb' }, h("calcite-shell", { key: '5d68b182b17c9a09671f73ec477efd0bf5badcfb', "content-behind": true }, this._getReporter())), this.filterModal()));
     }
     //--------------------------------------------------------------------------
     //
@@ -417,7 +418,7 @@ export class CrowdsourceReporter {
         const onlyReportingLayers = this.reportingOptions ? Object.keys(this.reportingOptions).filter((layerId) => {
             return this.reportingOptions[layerId].visible && this.reportingOptions[layerId].reporting && this._layerItemsHash[layerId] && this._layerItemsHash[layerId].supportsAdd;
         }) : [];
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.chooseCategoryMsg)), h("layer-list", { class: "height-full", layers: onlyReportingLayers, mapView: this.mapView, onLayerSelect: this.navigateToCreateFeature.bind(this), showFeatureCount: false, showNextIcon: false }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.chooseCategoryMsg)), h("layer-list", { class: "height-full", layers: onlyReportingLayers, mapView: this.mapView, onLayerSelect: this.navigateToCreateFeature.bind(this), showFeatureCount: false, showNextIcon: false }))));
     }
     /**
      * Get Feature create form of the selected feature layer
@@ -425,7 +426,7 @@ export class CrowdsourceReporter {
      * @protected
      */
     getFeatureCreateFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), h("create-feature", { customizeSubmit: true, mapView: this.mapView, onDrawComplete: this.onFormReady.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onProgressStatus: this.updatedProgressStatus.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), h("create-feature", { customizeSubmit: true, isMobile: this.isMobile, mapView: this.mapView, onDrawComplete: this.onFormReady.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onModeChanged: this.backFromCreateFeaturePanel.bind(this), onProgressStatus: this.updatedProgressStatus.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId }))));
     }
     /**
      * Update the progress bar status when editor panel changes
@@ -440,8 +441,6 @@ export class CrowdsourceReporter {
      * @protected
      */
     onFormReady() {
-        // update the form state when form is ready
-        this.updateFormState(true);
         this._showSubmitCancelButton = true;
     }
     /**
@@ -469,9 +468,6 @@ export class CrowdsourceReporter {
             void this._createFeature.close();
         }
         //on back form will be closed, so update the form state
-        if (this.isFormOpen) {
-            this.updateFormState(false);
-        }
         this.backFromSelectedPanel();
     }
     /**
@@ -493,9 +489,6 @@ export class CrowdsourceReporter {
             this._showSubmitCancelButton = false;
         }
         //on back form will be closed, so update the form state
-        if (this.isFormOpen) {
-            this.updateFormState(false);
-        }
         this.backFromSelectedPanel();
     }
     /**
@@ -513,10 +506,11 @@ export class CrowdsourceReporter {
      */
     onReportSubmitted() {
         //on report submit form will be closed, so update the form state
-        if (this.isFormOpen) {
-            this.updateFormState(false);
+        if (this._showFullPanel) {
+            this.updatePanelState(this._sidePanelCollapsed, false);
         }
         this._reportSubmitted = true;
+        this._updatedProgressBarStatus = 0.25;
         void this.navigateToHomePage();
     }
     /**
@@ -572,6 +566,7 @@ export class CrowdsourceReporter {
             void this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
         }
         this._showSubmitCancelButton = false;
+        this.updatePanelState(false, true);
         this._flowItems = [...this._flowItems, "feature-create"];
     }
     /**
@@ -579,6 +574,7 @@ export class CrowdsourceReporter {
      * @protected
      */
     navigateToChooseCategory() {
+        this.updatePanelState(false, true);
         this._flowItems = [...this._flowItems, "reporting-layer-list"];
     }
     /**
@@ -637,6 +633,11 @@ export class CrowdsourceReporter {
             updatedFlowItems[updatedFlowItems.length - 1] === 'add-comment')) {
             this.clearHighlights();
         }
+        // update the panel to the default state while coming back from Reports creation
+        if (updatedFlowItems[updatedFlowItems.length - 1] === 'reporting-layer-list' || (updatedFlowItems[updatedFlowItems.length - 1] === 'feature-create' &&
+            (updatedFlowItems[0] === 'feature-list' || updatedFlowItems[updatedFlowItems.length - 2] === 'feature-list'))) {
+            this.updatePanelState(this._sidePanelCollapsed, false);
+        }
         updatedFlowItems.pop();
         //Back to layer list, and return as the flowItems will be reset in navigateToHomePage
         if (updatedFlowItems.length === 1 && updatedFlowItems[0] === 'layer-list') {
@@ -651,16 +652,18 @@ export class CrowdsourceReporter {
      */
     toggleSidePanel() {
         this._sidePanelCollapsed = !this._sidePanelCollapsed;
-        this.togglePanel.emit({ panelState: this._sidePanelCollapsed, isFormOpen: this.isFormOpen });
+        this.togglePanel.emit({ panelState: this._sidePanelCollapsed, isFormOpen: this._showFullPanel });
     }
     /**
-     * Hide map when form open in case of mobile
-     * @param isFormOpen updated form state
+     * Updates the Panel state
+     * @param sidePanelCollapsed side panel collapsed state
+     * @param showFullPanel updated panel state
      * @protected
      */
-    updateFormState(isFormOpen) {
-        this.isFormOpen = isFormOpen;
-        this.togglePanel.emit({ panelState: this._sidePanelCollapsed, isFormOpen: this.isFormOpen });
+    updatePanelState(sidePanelCollapsed, showFullPanel) {
+        this._sidePanelCollapsed = sidePanelCollapsed;
+        this._showFullPanel = showFullPanel;
+        this.togglePanel.emit({ panelState: this._sidePanelCollapsed, isFormOpen: this._showFullPanel });
     }
     /**
      * When feature is selected from list store that and show feature details
@@ -731,7 +734,7 @@ export class CrowdsourceReporter {
      */
     getFeatureDetailsFlowItem() {
         const showCommentBtn = this._getLayersConfig(this._selectedLayerId)?.comment && this._selectedLayer.relationships.length > 0;
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, class: "share-node", embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, removePopoverOffset: true, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", slot: "header-actions-end", socialMedia: true, view: this.mapView }), this._selectedFeature.length > 1 && this.getFeaturesPagination(), h("calcite-panel", null, h("feature-details", { class: 'full-height', graphics: this._selectedFeature, layerItemsHash: this._layerItemsHash, mapView: this.mapView, onCommentSelect: this.onCommentSelectFromList.bind(this), onFeatureSelectionChange: this.selectionChanged.bind(this), onLoadingStatus: (evt) => void this.updatingFeatureDetails(evt.detail), ref: el => this._featureDetails = el, reportingOptions: this.reportingOptions }), showCommentBtn &&
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, class: "share-node", embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, removePopoverOffset: true, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", slot: "header-actions-end", socialMedia: true, view: this.mapView }), this._selectedFeature.length > 1 && this.getFeaturesPagination(), h("calcite-panel", null, h("feature-details", { class: 'full-height', graphics: this._selectedFeature, layerItemsHash: this._layerItemsHash, mapView: this.mapView, onCommentSelect: this.onCommentSelectFromList.bind(this), onFeatureSelectionChange: this.selectionChanged.bind(this), onLoadingStatus: (evt) => void this.updatingFeatureDetails(evt.detail), ref: el => this._featureDetails = el, reportingOptions: this.reportingOptions, showUserImageInCommentsList: this.showUserImageInCommentsList }), showCommentBtn &&
             h("calcite-button", { appearance: "solid", onClick: () => this._flowItems = [...this._flowItems, "add-comment"], slot: "footer", width: "full" }, this._translations.comment))));
     }
     /**
@@ -1493,6 +1496,24 @@ export class CrowdsourceReporter {
                 "attribute": "show-comments",
                 "reflect": false
             },
+            "showUserImageInCommentsList": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: When true the profile image of the comment creator will be shown in the comments list"
+                },
+                "attribute": "show-user-image-in-comments-list",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "theme": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/deduct-calculator/deduct-calculator.js

@@ -93,7 +93,7 @@ export class DeductCalculator {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '7c12073b99b009ce413082df1ea7f7ba57a24d89' }, h("div", { key: '35ad62ab6a2fe9efb8e32c262d562c213ce067aa', class: "label-display" }, h("calcite-label", { key: '5f4b84e4639538ebc8c6172def2a9c4b2703621f', class: "label-display" }, "Density %", this._getDensityInput()), h("calcite-label", { key: 'b3c9bf873945871c456e97a7c6ce71ce820f37c5', class: "label-display" }, "Type", this._getTypeInput()), h("calcite-label", { key: '57d3b49c4b2a1f103fb197e29913e244731c507f', class: "label-display" }, "Severity", this._getSeverityInput())), h("div", { key: '1194dccf269b5c42248f4e4eed188bcc89aa4cb5' }, this._getCalculateInput())));
+        return (h(Host, { key: '6a017676a4d4cce0ac332906e62630c93d673dd1' }, h("div", { key: '4411f75b59666e2bd268446a3e91558c803cbab6', class: "label-display" }, h("calcite-label", { key: '764e02dfc4e8224a2e7bab3ad0e90d611ff68911', class: "label-display" }, "Density %", this._getDensityInput()), h("calcite-label", { key: 'b939b06882ef6a14325f327644096d7a7a814ed5', class: "label-display" }, "Type", this._getTypeInput()), h("calcite-label", { key: 'a4b9801ca974b3ac8525080b8e1bcd4906ab4944', class: "label-display" }, "Severity", this._getSeverityInput())), h("div", { key: 'b47be60c381513f386569ca5a80525cbfdeaa0af' }, this._getCalculateInput())));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/delete-button/delete-button.js

@@ -92,7 +92,7 @@ export class DeleteButton {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '87e080ea4203ab7fcb1313d8fa57a3d5c5d37885' }, this.buttonType === "button" ? (h("calcite-button", { appearance: "outline", disabled: !this._deleteEndabled, id: "solutions-delete", kind: "danger", onClick: () => this._delete(), width: "full" }, this._translations.deleteCount.replace("{{n}}", this.ids.length.toString()))) : (h("calcite-action", { appearance: "solid", compact: true, disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s", text: this._translations.delete }, h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage()));
+        return (h(Host, { key: '1ff43b4d224c4cf7bbfc0656e9605cd4ac4c971a' }, this.buttonType === "button" ? (h("calcite-button", { appearance: "outline", disabled: !this._deleteEndabled, id: "solutions-delete", kind: "danger", onClick: () => this._delete(), width: "full" }, this._translations.deleteCount.replace("{{n}}", this.ids.length.toString()))) : (h("calcite-action", { appearance: "solid", compact: true, disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s", text: this._translations.delete }, h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage()));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.

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

@@ -194,7 +194,7 @@ export class EditCard {
             !this.graphics[0].layer.editingEnabled : true;
         const tableNodeClass = this._editorLoading ? "display-none" : "position-absolute";
         const loadingClass = this._editorLoading ? "" : "display-none";
-        return (h(Host, { key: '5f81ea077d226b6bccf489c0628bf425df078d3a' }, h("div", { key: 'b66be8fe337bdedfe55d5897d044e5d2f6741c7e', class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { key: '58c7c0ff41141280c69d6477b3699bc6960b7a0a', class: "position-absolute" }, h("div", { key: '6b853f84699c0dcbeb867c13b7cd84f6316d87a9', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: '2a30bcd6e2fad7f65d16b167cf9d1cdc7549ca01', class: loadingClass, label: "", scale: "s" })))));
+        return (h(Host, { key: 'ae604b83ef7eb6a2117145b3e9f9c1c8dd1c8688' }, h("div", { key: 'a229ea8ae44ef10a2a75011d81d0c16a461b675f', class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { key: 'c9461e247a3b3b6e0c7af17a3646282dbd410b89', class: "position-absolute" }, h("div", { key: '3e385f2d39277de3eeb665e6b95a1c426d3c66b4', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: 'a995cdebcbbd9d25d2f0784c5dca7dbfbd2757dd', class: loadingClass, label: "", scale: "s" })))));
     }
     //--------------------------------------------------------------------------
     //

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

@@ -62,7 +62,7 @@ export class FeatureComments {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: '70ab7bb863463c41fa2291412f8da6d602e9a94d' }, h("slot", { key: '7266d385e0fc9341baf651a5dcab13b7ba361163' })));
+        return (h(Host, { key: '0d331b7c201854181dcf80f6192de2c00218b50c' }, h("slot", { key: '4b602b73d1b6d773eb49eace91df6613117e974d' })));
     }
     static get is() { return "feature-comments"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,6 +27,7 @@ export class FeatureDetails {
         this.graphics = undefined;
         this.reportingOptions = undefined;
         this.layerItemsHash = undefined;
+        this.showUserImageInCommentsList = false;
         this._likeFieldAvailable = false;
         this._likeCount = 0;
         this._disLikeCount = 0;
@@ -171,12 +172,12 @@ export class FeatureDetails {
     render() {
         //When related features found show comments list of only those features else comments list will be empty
         const commentsListWhereClause = this._relatedFeaturesOIDs?.length > 0 ? `objectId in(${this._relatedFeaturesOIDs})` : '1=0';
-        return (h("calcite-panel", { key: '7f1fa230117891c11ff6747b7d3c5d6c8771c998', "full-height": true }, h("info-card", { key: '2b9119b5a0533d2ed8136149dd322aa9211f503b', allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, onSelectionChanged: (e) => { this.featureSelectionChange.emit(e.detail); }, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el }), (this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) &&
-            h("div", { key: '85974c4ff61890dc43c02b84b9c6622e83039cdd', class: "buttons-container" }, this._commentsAvailable &&
-                h("div", { key: '8b905e1ee273103247f6cab2c598b03f1f733396', class: "comment-btn" }, h("span", { key: '05439cbc1e6080006479ce3694f4d1f81684a9d7' }, this._relatedFeaturesOIDs.length), h("calcite-icon", { key: '0e7062d1bc383c2f2fdd50ff003ea6a854e1a121', icon: "speech-bubble", scale: 's' })), this._likeFieldAvailable &&
-                h("calcite-button", { key: '26a024436a8e0c4251c200f112e6cc687795c85a', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onLikeButtonClick.bind(this), scale: 'm' }, this._likeCount ?? this._selectedGraphic.attributes[this._likeField] ?? 0), this._dislikeFieldAvailable &&
-                h("calcite-button", { key: '67d1ebe6b0ba1893aac9f26e4cebfe30569115d5', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onDislikeButtonClick.bind(this), scale: 'm' }, this._disLikeCount ?? this._selectedGraphic.attributes[this._dislikeField] ?? 0)), this.relatedTableId && this._commentsAvailable &&
-            h("feature-list", { key: '7ed006e8be5f7280fdd260102111aad4656526f6', class: "height-full", mapView: this.mapView, onFeatureSelect: (e) => { this.commentSelect.emit(e.detail); }, pageSize: 5, ref: el => this._commentsList = el, selectedLayerId: this.relatedTableId, showErrorWhenNoFeatures: false, showInitialLoading: false, textSize: "small", whereClause: commentsListWhereClause })));
+        return (h("calcite-panel", { key: 'a2d31f643b1a361343eb502ede98a35ea954f244', "full-height": true }, h("info-card", { key: '4ba44decfa3f155034d3edfdf8ab3e7df5f1ea8a', allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, onSelectionChanged: (e) => { this.featureSelectionChange.emit(e.detail); }, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el }), (this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) &&
+            h("div", { key: '0f7af99fd964da408f3131385cfd617138f40151', class: "buttons-container" }, this._commentsAvailable &&
+                h("div", { key: '6ce7b090a07db23c542fc7aaacf9cc8a39987483', class: "comment-btn" }, h("span", { key: 'fcce9266efa253c679dcb69f308c07950f5e2693' }, this._relatedFeaturesOIDs.length), h("calcite-icon", { key: '25355a5c195824e473a390f196d28c909c1348eb', icon: "speech-bubble", scale: 's' })), this._likeFieldAvailable &&
+                h("calcite-button", { key: '6dca1c0f2ca14f662de98362cbe7ef0993fad6b8', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onLikeButtonClick.bind(this), scale: 'm' }, this._likeCount ?? this._selectedGraphic.attributes[this._likeField] ?? 0), this._dislikeFieldAvailable &&
+                h("calcite-button", { key: '9d1c0a5938806645a24a757f06e31b13587912dc', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onDislikeButtonClick.bind(this), scale: 'm' }, this._disLikeCount ?? this._selectedGraphic.attributes[this._dislikeField] ?? 0)), this.relatedTableId && this._commentsAvailable &&
+            h("feature-list", { key: '73f81c666a054b2c9f02246fcc7ea4811494c106', class: "height-full", mapView: this.mapView, onFeatureSelect: (e) => { this.commentSelect.emit(e.detail); }, pageSize: 5, ref: el => this._commentsList = el, selectedLayerId: this.relatedTableId, showErrorWhenNoFeatures: false, showInitialLoading: false, showUserImageInList: this.showUserImageInCommentsList, textSize: "small", whereClause: commentsListWhereClause })));
     }
     /**
      * Load esri javascript api modules
@@ -218,8 +219,9 @@ export class FeatureDetails {
             //Get comments table id from map
             const relatedTableIdFromRelnship = selectedLayer.relationships[0].relatedTableId;
             const allTables = await getAllTables(this.mapView);
-            const relatedTable = allTables.filter((table) => selectedLayer.url === table.url && relatedTableIdFromRelnship === table.layerId);
-            this.relatedTableId = relatedTable?.length > 0 ? relatedTable[0].id : '';
+            const allRelatedTables = allTables.filter((table) => selectedLayer.url === table.url && relatedTableIdFromRelnship === table.layerId);
+            const relatedTable = allRelatedTables?.length > 0 ? allRelatedTables[0] : null;
+            this.relatedTableId = relatedTable?.id ?? '';
             //**Get the related records for the current selected feature**
             if (this.relatedTableId) {
                 //current selected feature's objectId
@@ -236,7 +238,7 @@ export class FeatureDetails {
                 const relatedOIDs = [];
                 if (result[objectId]) {
                     result[objectId].features.forEach((feature) => {
-                        relatedOIDs.push(feature.attributes.OBJECTID);
+                        relatedOIDs.push(feature.attributes[relatedTable.objectIdField]);
                     });
                 }
                 // Store the objectid's of the related features, this will be used to show the comments and its count
@@ -528,6 +530,24 @@ export class FeatureDetails {
                     "tags": [],
                     "text": "ILayerItemsHash: LayerDetailsHash for each layer in the map"
                 }
+            },
+            "showUserImageInCommentsList": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: When true the profile image of the comment creator will be shown in the comments list"
+                },
+                "attribute": "show-user-image-in-comments-list",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/feature-form-flow-item/feature-form-flow-item.js

@@ -62,7 +62,7 @@ export class FeatureFormFlowItem {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: '32113dda304b2f7179d0275f04987e69ce386959' }, h("slot", { key: '358d5ea7a03cc7da16e98a92391cf74dfe9fa89b' })));
+        return (h(Host, { key: 'e4cd5ed27b476b7f5ed699ed13422b54b84be2e5' }, h("slot", { key: 'b73e8f8b52ac166b0e85f3114ed0fb0d57a7fec9' })));
     }
     static get is() { return "feature-form-flow-item"; }
     static get encapsulation() { return "shadow"; }