@esri/solutions-components 0.8.7 → 0.8.9

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

@@ -31,6 +31,8 @@ export class InfoCard {
         this.zoomAndScrollToSelected = undefined;
         this.allowEditing = true;
         this.highlightEnabled = true;
+        this.paginationEnabled = true;
+        this.position = 'absolute';
         this._alertOpen = false;
         this._count = "";
         this._editRecordOpen = false;
@@ -76,6 +78,45 @@ export class InfoCard {
     async getSelectedFeature() {
         return this._features.selectedFeature;
     }
+    /**
+     * Get the current selected feature from the Features widget
+     * @returns Promise resolving with the current feature
+     */
+    async refresh() {
+        await this.setGraphics();
+    }
+    /**
+     * Go to the previous feature in the features widget
+     */
+    async back() {
+        this._features.previous();
+        this._count = this._getCount();
+    }
+    /**
+     * Go to the next feature in the features widget
+     */
+    async next() {
+        this._features.next();
+        this._count = this._getCount();
+    }
+    /**
+     * Toggle the visibility of the features list view
+     */
+    async toggleListView() {
+        this._showListView = !this._showListView;
+        const i = this._features.selectedFeatureIndex;
+        this._features.open({
+            features: this.graphics,
+            featureMenuOpen: this._showListView
+        });
+        this._features.selectedFeatureIndex = i;
+    }
+    /**
+     * update the current graphics to the features widget
+     */
+    async updateCurrentGraphic(selectedGraphic) {
+        this._features.selectedFeatureWidget.graphic = selectedGraphic;
+    }
     /**
      * Respond to and close the edit record display
      *
@@ -140,8 +181,8 @@ export class InfoCard {
         const id = (_d = (_c = this._features) === null || _c === void 0 ? void 0 : _c.selectedFeature) === null || _d === void 0 ? void 0 : _d.getObjectId();
         const ids = parseInt(id === null || id === void 0 ? void 0 : id.toString(), 10) > -1 ? [id] : [];
         const deleteEnabled = ((_e = this._layer) === null || _e === void 0 ? void 0 : _e.editingEnabled) && ((_h = (_g = (_f = this._layer) === null || _f === void 0 ? void 0 : _f.capabilities) === null || _g === void 0 ? void 0 : _g.operations) === null || _h === void 0 ? void 0 : _h.supportsDelete);
-        return (h(Host, null, h("calcite-shell", null, this._getHeader(), h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget feature-node " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
-            h("div", { class: "display-flex top-border padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), !nextBackDisabled && h("div", { class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("div", null, h("calcite-action", { icon: "list", onClick: () => this._toggleListView(), scale: "s", text: this._count, textEnabled: true })), h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next))))), h("edit-card", { class: editClass, graphicIndex: (_j = this._features) === null || _j === void 0 ? void 0 : _j.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
+        return (h(Host, null, h("calcite-shell", { style: { position: this.position } }, this._getHeader(), h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget feature-node " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+            h("div", { class: "display-flex top-border padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", null, h("calcite-button", { appearance: 'transparent', disabled: nextBackDisabled, iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("calcite-action", { class: 'pagination-action', onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { class: "pagination-count" }, this._count)), h("div", null, h("calcite-button", { appearance: "transparent", disabled: nextBackDisabled, iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next))))), h("edit-card", { class: editClass, graphicIndex: (_j = this._features) === null || _j === void 0 ? void 0 : _j.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -216,7 +257,7 @@ export class InfoCard {
                 if (this.zoomAndScrollToSelected) {
                     this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (i) => {
                         if (i > -1) {
-                            this.selectionChanged.emit([this._features.selectedFeature]);
+                            this.selectionChanged.emit({ selectedFeature: [this._features.selectedFeature], selectedFeatureIndex: this._features.selectedFeatureIndex });
                         }
                     });
                 }
@@ -451,6 +492,42 @@ export class InfoCard {
                 "attribute": "highlight-enabled",
                 "reflect": false,
                 "defaultValue": "true"
+            },
+            "paginationEnabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: If true will show the pagination for multiple features"
+                },
+                "attribute": "pagination-enabled",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "string: Set the position of the feature info"
+                },
+                "attribute": "position",
+                "reflect": false,
+                "defaultValue": "'absolute'"
             }
         };
     }
@@ -491,8 +568,8 @@ export class InfoCard {
                     "text": "Emitted on demand when the selected index changes"
                 },
                 "complexType": {
-                    "original": "__esri.Graphic[]",
-                    "resolved": "Graphic[]",
+                    "original": "{ selectedFeature: __esri.Graphic[], selectedFeatureIndex: number }",
+                    "resolved": "{ selectedFeature: Graphic[]; selectedFeatureIndex: number; }",
                     "references": {
                         "___esri": {
                             "location": "global",
@@ -523,6 +600,102 @@ export class InfoCard {
                             "text": "Promise resolving with the current feature"
                         }]
                 }
+            },
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<any>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "Get the current selected feature from the Features widget",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise resolving with the current feature"
+                        }]
+                }
+            },
+            "back": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Go to the previous feature in the features widget",
+                    "tags": []
+                }
+            },
+            "next": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Go to the next feature in the features widget",
+                    "tags": []
+                }
+            },
+            "toggleListView": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggle the visibility of the features list view",
+                    "tags": []
+                }
+            },
+            "updateCurrentGraphic": {
+                "complexType": {
+                    "signature": "(selectedGraphic: __esri.Graphic) => Promise<void>",
+                    "parameters": [{
+                            "name": "selectedGraphic",
+                            "type": "Graphic",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "___esri": {
+                            "location": "global",
+                            "id": "global::___esri"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "update the current graphics to the features widget",
+                    "tags": []
+                }
             }
         };
     }

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

@@ -220,7 +220,7 @@ export class LayerTable {
      * @param evt CustomEvent the graphic for the current selection
      */
     async selectionChanged(evt) {
-        const g = evt.detail[0];
+        const g = evt.detail.selectedFeature[0];
         const oid = g.getObjectId();
         if (this.zoomAndScrollToSelected) {
             const i = this._table.viewModel.getObjectIdIndex(oid);
@@ -377,7 +377,7 @@ export class LayerTable {
     _getActionBar() {
         const containerClass = this.isMobile ? "width-full" : "";
         const mobileClass = this.isMobile ? "border-top" : "";
-        return (h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), !this.isMobile ? this._getActions() : undefined));
+        return (h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, mapView: this.mapView, onLayerSelectionChange: (evt) => void this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), !this.isMobile ? this._getActions() : undefined));
     }
     /**
      * Get the actions that are used for various interactions with the table

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

@@ -168,7 +168,7 @@ export class MapCard {
         }
         else if (loadDefaultMap) {
             this._defaultWebmapHonored = true;
-            this._mapPicker.setMapByID(id);
+            void this._mapPicker.setMapByID(id);
         }
         else if (mapConfigChanged) {
             // Map is the same so no need to reload but we need to update for any changes from the config

package/dist/collection/components/map-select-tools/map-select-tools.js

@@ -191,7 +191,7 @@ export class MapSelectTools {
      * Renders the component.
      */
     render() {
-        return (h(Host, null, this._getMapLayerPicker(), h("div", { class: "border-bottom" }), h("div", { class: "padding-top-sides-1" }, h("div", { class: "search-widget", ref: (el) => { this._searchElement = el; } }), h("div", { class: "padding-top-1" }, h("map-draw-tools", { active: true, editGraphicsEnabled: !this._useLayerFeaturesEnabled, graphics: this._graphics, mapView: this.mapView, onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, ref: (el) => { this._drawTools = el; } })), this._getBufferOptions(), this._getUseLayerFeaturesOptions(), this._getNumSelected()), h("div", { class: "border-bottom" }), this._getNameInput()));
+        return (h(Host, null, this._getMapLayerPicker(), h("div", { class: "border-bottom" }), h("div", { class: "padding-top-sides-1" }, h("div", { class: "search-widget", ref: (el) => { this._searchElement = el; } }), h("div", { class: "padding-top-1" }, h("map-draw-tools", { active: true, editGraphicsEnabled: !this._useLayerFeaturesEnabled, graphics: this._graphics, mapView: this.mapView, onSketchGraphicsChange: (evt) => void this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, ref: (el) => { this._drawTools = el; } })), this._getBufferOptions(), this._getUseLayerFeaturesOptions(), this._getNumSelected()), h("div", { class: "border-bottom" }), this._getNameInput()));
     }
     /**
      * Renders the buffer tools component.
@@ -200,7 +200,7 @@ export class MapSelectTools {
         var _a, _b;
         const showBufferToolsClass = this._searchDistanceEnabled ? "search-distance" : "div-not-visible";
         const bufferDistance = typeof ((_a = this.selectionSet) === null || _a === void 0 ? void 0 : _a.distance) === "number" ? this.selectionSet.distance : this.defaultBufferDistance;
-        return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.searchDistance, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "search-distance-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", referenceElement: "search-distance-icon" }, h("span", { class: "tooltip-message" }, this._translations.useSearchDistanceTootip)), h("calcite-switch", { checked: this._searchDistanceEnabled, onCalciteSwitchChange: () => this._searchDistanceEnabled = !this._searchDistanceEnabled })), h("div", { class: showBufferToolsClass }, h("buffer-tools", { disabled: !this._searchDistanceEnabled, distance: bufferDistance, geometries: this.geometries, onBufferComplete: (evt) => this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: ((_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.unit) || this.defaultBufferUnit }))));
+        return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.searchDistance, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "search-distance-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", referenceElement: "search-distance-icon" }, h("span", { class: "tooltip-message" }, this._translations.useSearchDistanceTootip)), h("calcite-switch", { checked: this._searchDistanceEnabled, onCalciteSwitchChange: () => this._searchDistanceEnabled = !this._searchDistanceEnabled })), h("div", { class: showBufferToolsClass }, h("buffer-tools", { disabled: !this._searchDistanceEnabled, distance: bufferDistance, geometries: this.geometries, onBufferComplete: (evt) => void this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: ((_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.unit) || this.defaultBufferUnit }))));
     }
     /**
      * Renders the map layer picker component.
@@ -236,7 +236,7 @@ export class MapSelectTools {
      * @protected
      */
     _getMapLayerPicker() {
-        return (h("div", { class: "display-flex padding-sides-1 padding-bottom-1" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, this._translations.inputLayer, h("map-layer-picker", { enabledLayerIds: this.enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => this._inputLayerSelectionChange(evt), selectedIds: this.selectLayerView ? [this.selectLayerView.layer.id] : this.selectionSet ? [this.selectionSet.layerView.layer.id] : [], showTables: false }))));
+        return (h("div", { class: "display-flex padding-sides-1 padding-bottom-1" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, this._translations.inputLayer, h("map-layer-picker", { enabledLayerIds: this.enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => void this._inputLayerSelectionChange(evt), selectedIds: this.selectLayerView ? [this.selectLayerView.layer.id] : this.selectionSet ? [this.selectionSet.layerView.layer.id] : [], showTables: false }))));
     }
     //--------------------------------------------------------------------------
     //
@@ -308,7 +308,7 @@ export class MapSelectTools {
             });
             this._selectionLabel = (_c = this.selectionSet) === null || _c === void 0 ? void 0 : _c.label;
             if (!this._useLayerFeaturesEnabled) {
-                (_d = this._drawTools) === null || _d === void 0 ? void 0 : _d.updateGraphics();
+                await ((_d = this._drawTools) === null || _d === void 0 ? void 0 : _d.updateGraphics());
             }
             await goToSelection(this.selectionSet.selectedIds, this.selectionSet.layerView, this.mapView, false);
         }
@@ -454,7 +454,7 @@ export class MapSelectTools {
             }
             this._workflowType = this._useLayerFeaturesEnabled ? EWorkflowType.SELECT : EWorkflowType.SKETCH;
             if (this._workflowType === EWorkflowType.SKETCH) {
-                this._drawTools.updateGraphics();
+                await this._drawTools.updateGraphics();
             }
             await this._updateLabel();
             this._clearSearchWidget();

package/dist/collection/components/refine-selection/refine-selection.js

@@ -293,7 +293,7 @@ export class RefineSelection {
         });
         const oids = Array.isArray(graphics) ? graphics.map(g => { var _a; return g.attributes[(_a = g === null || g === void 0 ? void 0 : g.layer) === null || _a === void 0 ? void 0 : _a.objectIdField]; }) : [];
         await this._updateIds(oids, this._selectionMode, this._refineSelectionSet.undoStack, this._refineLayer);
-        this._drawTools.clear();
+        void this._drawTools.clear();
     }
     /**
      * Highlight any selected features in the map

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

@@ -140,9 +140,11 @@
           //id: "c720e337ff814fe4a83bc244c46f8e43" //15 Layers
           //id: "f5186c798b9e40dab1078658ddbc28cf" // 30K features
           //id: "dda88d905a6748a5ab46bea5be795f33" // screening layers
-          id: "b5bdcb1e5d684dd3b21a2d44b8e4f928" //Popup content
+          id: "b5bdcb1e5d684dd3b21a2d44b8e4f928" //Popup content + like dislike
           //id: "d399ec39959a4aac8617ae4f05dd6785" //Arcade
           //id: "024e8a5e73a34c5aade9632d651c5750" //Attachments
+          //id: "ae6d5d1936e84ce7adde44c7a7908846" //like dislike
+          // id: "ce3dec81bf714d3bb71da9691ab686d1" //Filter
         }
         const webMap = new WebMap({
           portalItem: custom ?? portalItem
@@ -164,6 +166,118 @@
         demo.enableNewReports = true;
         demo.theme = "light";
         demo.reportSubmittedMessage = "Thank you! Your request was successfully submitted";
+        
+        //Set the zoomScale to be used when zooming to single point feature
+        //demo.zoomToScale = 139596221; //World
+        //demo.zoomToScale = 33800278;//Country
+        //demo.zoomToScale = 4291772;//States
+        demo.zoomToScale = 96610;//City
+        //demo.zoomToScale = 3495; //Building
+        
+        //Set filter config
+        demo.layerExpressions = [
+          {
+            id: "Requests_681",
+            title: "Requests",
+            operator: " AND ",
+            expressions: [
+              {
+                definitionExpression: "OBJECTID > 690",
+                id: 1701793260225,
+                index: 0,
+                name: "greater than 690",
+                active: false
+              },
+              {
+                id: 1654881457794,
+                name: 'status',
+                type: 'string',
+                field: 'status'
+              }
+            ]
+          },{
+            id: "18f056682a4-layer-12",
+            title: "PopUp with date in title",
+            operator: " AND ",
+            expressions: [
+              {
+                definitionExpression: "shrt > 0",
+                id: 1901793260225,
+                index: 0,
+                name: "Like greater than 0",
+                active: false
+              }
+            ]
+          }
+        ];
+        //Set the reporting layer options, layers from this object with reporting set to true will only be shown in layer list
+        //if all the layers from map should be considered for reporting then pass true for each layer 
+        demo.reportingOptions = {
+          "Requests_681":{
+            reporting: true,
+            comment: false,
+            like: false,
+            likeField: "Like_field",
+            dislike: false,
+            dislikeField: "Dislike_field"
+          },
+          "18cdb191817-layer-5": {
+            reporting: true,
+            comment: false,
+            like: true,
+            likeField: "Like_field",
+            dislike: true,
+            dislikeField: "Dislike_field"
+          },
+          "18f056682a4-layer-12":{
+            reporting: true,
+            comment: false,
+            like: true,
+            likeField: "shrt",
+            dislike: false,
+            dislikeField: "dislike_field"
+          },
+          "18f2a1562a8-layer-7": {
+            reporting: true,
+            comment: true,
+            like: true,
+            likeField: "like_field",
+            dislike: true,
+            dislikeField: "dislike_field"
+          },
+          "18f2a1562a5-layer-3": {
+            reporting: true,
+            comment: true,
+            like: true,
+            likeField: "like_field",
+            dislike: true,
+            dislikeField: "dislike_field"
+          },
+          "18f2a1562a7-layer-4": {
+            reporting: true,
+            comment: true,
+            like: true,
+            likeField: "like_field",
+            dislike: true,
+            dislikeField: "dislike_field"
+          },
+          "18f2a1562a7-layer-5": {
+            reporting: true,
+            comment: true,
+            like: true,
+            likeField: "like_field",
+            dislike: true,
+            dislikeField: "dislike_field"
+          },
+          "18f2a1562a8-layer-6": {
+            reporting: true,
+            comment: true,
+            like: true,
+            likeField: "like_field",
+            dislike: true,
+            dislikeField: "dislike_field"
+          }
+        }
         //Select reporting layers -
         //demo.layers = ['SE_field_mapping_9688', 'SE_field_mapping_5784', 'SE_field_mapping_1853']; //Se mapping
         //demo.layers = ['Three_Layers_nested_4042', 'SE_sort_2889', 'SE_sort_756']; //screening layers

package/dist/collection/utils/interfaces.ts

@@ -577,14 +577,14 @@ export interface IManagedLayers {
  * Key is the layers guid
  */
 export interface IReportingOptions {
-  [key: string]: IReportOption;
+  [key: string]: IReportingOption;
 }
 
-export interface IReportOption {
+export interface IReportingOption {
   reporting: boolean;
   comment: boolean;
   like: boolean;
+  likeField?: string;
   dislike: boolean;
-  likeField: string;
-  dislikeField: string;
+  dislikeField?: string;
 }

package/dist/collection/utils/mapViewUtils.js

@@ -154,12 +154,13 @@ export async function getAllLayers(mapView) {
  * @param layerView the layer view to highlight
  * @param mapView the map view used if updateExtent is true
  * @param updateExtent optional (default false) boolean to indicate if we should zoom to the extent
+ * @param zoomToScale optional (default 0) zoomScale that individual points will use when zoomed to
  *
  * @returns Promise resolving with the highlight handle
  */
-export async function highlightFeatures(ids, layerView, mapView, updateExtent = false) {
+export async function highlightFeatures(ids, layerView, mapView, updateExtent = false, zoomToScale = 0) {
     if (updateExtent) {
-        await goToSelection(ids, layerView, mapView, false);
+        await goToSelection(ids, layerView, mapView, false, undefined, zoomToScale);
         //wait for sometime to load the feature in layerView then only the highlight will work
         await new Promise(resolve => setTimeout(resolve, 1000));
     }
@@ -245,13 +246,18 @@ export async function flashSelection(ids, layerView, featureEffect) {
  * @param layerView the layer view that contains the OIDs
  * @param mapView the map view to show the extent change
  * @param flashFeatures optional (default true) boolean to indicate if we should flash the features
- *
+ * @param featureEffect optional (default undefined) feature effect when flashing the features
+ * @param zoomToScale optional (default to 0) zoomScale that individual points will use when zoomed to
  * @returns Promise resolving when the operation is complete
  *
  */
-export async function goToSelection(ids, layerView, mapView, flashFeatures = true, featureEffect = undefined) {
+export async function goToSelection(ids, layerView, mapView, flashFeatures = true, featureEffect = undefined, zoomToScale = 0) {
     const result = await queryExtent(ids, layerView.layer);
-    await mapView.goTo(result.extent);
+    const goToParams = { target: result.extent };
+    if (result.count === 1 && layerView.layer.geometryType === 'point' && zoomToScale) {
+        goToParams.scale = zoomToScale;
+    }
+    await mapView.goTo(goToParams);
     if (flashFeatures) {
         await flashSelection(ids, layerView, featureEffect);
     }

package/dist/collection/utils/mapViewUtils.ts

@@ -182,6 +182,7 @@ export async function getAllLayers(
  * @param layerView the layer view to highlight
  * @param mapView the map view used if updateExtent is true
  * @param updateExtent optional (default false) boolean to indicate if we should zoom to the extent
+ * @param zoomToScale optional (default 0) zoomScale that individual points will use when zoomed to
  *
  * @returns Promise resolving with the highlight handle
  */
@@ -189,10 +190,11 @@ export async function highlightFeatures(
   ids: number[],
   layerView: __esri.FeatureLayerView,
   mapView: __esri.MapView,
-  updateExtent = false
+  updateExtent = false,
+  zoomToScale = 0
 ): Promise<__esri.Handle> {
   if (updateExtent) {
-    await goToSelection(ids, layerView, mapView, false);
+    await goToSelection(ids, layerView, mapView, false, undefined, zoomToScale);
     //wait for sometime to load the feature in layerView then only the highlight will work
     await new Promise(resolve => setTimeout(resolve, 1000));
   }
@@ -295,7 +297,8 @@ export async function flashSelection(
  * @param layerView the layer view that contains the OIDs
  * @param mapView the map view to show the extent change
  * @param flashFeatures optional (default true) boolean to indicate if we should flash the features
- *
+ * @param featureEffect optional (default undefined) feature effect when flashing the features
+ * @param zoomToScale optional (default to 0) zoomScale that individual points will use when zoomed to
  * @returns Promise resolving when the operation is complete
  *
  */
@@ -304,10 +307,15 @@ export async function goToSelection(
   layerView: __esri.FeatureLayerView,
   mapView: __esri.MapView,
   flashFeatures = true,
-  featureEffect: __esri.FeatureEffect = undefined
+  featureEffect: __esri.FeatureEffect = undefined,
+  zoomToScale = 0
 ): Promise<void> {
   const result = await queryExtent(ids, layerView.layer);
-  await mapView.goTo(result.extent);
+  const goToParams: { target: __esri.Extent; scale?: number; } = { target: result.extent };
+  if (result.count === 1 && layerView.layer.geometryType === 'point' && zoomToScale) {
+    goToParams.scale = zoomToScale
+  }
+  await mapView.goTo(goToParams);
   if (flashFeatures) {
     await flashSelection(ids, layerView, featureEffect);
   }

package/dist/components/create-feature2.js

@@ -17,6 +17,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         this.fail = createEvent(this, "fail", 7);
         this.drawComplete = createEvent(this, "drawComplete", 7);
         this.editingAttachment = createEvent(this, "editingAttachment", 7);
+        this.progressStatus = createEvent(this, "progressStatus", 7);
         this.mapView = undefined;
         this.selectedLayerId = undefined;
         this.customizeSubmit = false;
@@ -161,6 +162,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         //Add handle to watch featureTemplatesViewModel ready state and then start the creation
         const handle = this.reactiveUtils.watch(() => this._editor.viewModel.featureTemplatesViewModel.state, (state) => {
             if (state === 'ready') {
+                this.progressStatus.emit(0.5);
                 void this.startCreate();
             }
         });
@@ -184,6 +186,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
             //once the feature template is selected handle the event for formSubmit and sketch complete
             //also, hide the headers and footer in the editor as we will be showing our own submit and cancel button
             this._editor.viewModel.featureTemplatesViewModel.on('select', () => {
+                this.progressStatus.emit(0.75);
                 setTimeout(() => {
                     //on form submit 
                     this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
@@ -191,6 +194,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
                     this._editor.viewModel.sketchViewModel.on("create", (evt) => {
                         if (evt.state === "complete") {
                             this.showSearchWidget = false;
+                            this.progressStatus.emit(1);
                             this.drawComplete.emit();
                         }
                     });

package/dist/components/crowdsource-manager.js

@@ -114,6 +114,10 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         this.hideMapOnLoad = undefined;
         this.mapInfos = [];
         this.onlyShowUpdatableLayers = true;
+        this.popupHeaderColor = undefined;
+        this.popupHeaderHoverColor = undefined;
+        this.popupHeaderHoverTextColor = undefined;
+        this.popupHeaderTextColor = undefined;
         this.searchConfiguration = undefined;
         this.shareIncludeEmbed = undefined;
         this.shareIncludeSocial = undefined;
@@ -570,6 +574,10 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         "hideMapOnLoad": [4, "hide-map-on-load"],
         "mapInfos": [16],
         "onlyShowUpdatableLayers": [4, "only-show-updatable-layers"],
+        "popupHeaderColor": [1, "popup-header-color"],
+        "popupHeaderHoverColor": [1, "popup-header-hover-color"],
+        "popupHeaderHoverTextColor": [1, "popup-header-hover-text-color"],
+        "popupHeaderTextColor": [1, "popup-header-text-color"],
         "searchConfiguration": [16],
         "shareIncludeEmbed": [4, "share-include-embed"],
         "shareIncludeSocial": [4, "share-include-social"],