@esri/solutions-components 0.8.5 → 0.8.7

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

@@ -14,7 +14,7 @@ require('./esri-loader-ce6c3d3d.js');
 require('./_commonjsHelpers-480c2e77.js');
 require('./interfaces-7cd0a48a.js');
 
-const crowdsourceReporterCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.width-full{width:100% !important}.width-0{width:0}.height-full{height:100% !important}.height-0{height:0}.overflow-hidden{overflow:hidden}.border{border:1px solid var(--calcite-color-border-3)}.notice-msg{padding:10px;width:calc(100% - 20px)}.footer-top-button{padding-bottom:7px}.footer-button{height:35px}";
+const crowdsourceReporterCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.width-full{width:100% !important}.width-0{width:0}.height-full{height:100% !important}.height-0{height:0}.overflow-hidden{overflow:hidden}.border{border:1px solid var(--calcite-color-border-3)}.notice-msg{padding:10px;width:calc(100% - 20px)}.footer-top-button{padding-bottom:7px}.footer-button{height:35px}.report-submitted-msg{position:absolute;z-index:1000}";
 
 const CrowdsourceReporter = class {
     constructor(hostRef) {
@@ -36,8 +36,11 @@ const CrowdsourceReporter = class {
         this.objectId = undefined;
         this.center = undefined;
         this.level = undefined;
+        this.popupHeaderHoverColor = undefined;
+        this.popupHeaderColor = undefined;
         this.reportButtonText = undefined;
         this.reportsHeader = undefined;
+        this.reportingOptions = undefined;
         this.reportSubmittedMessage = undefined;
         this.searchConfiguration = undefined;
         this.showComments = undefined;
@@ -47,8 +50,9 @@ const CrowdsourceReporter = class {
         this.mapInfos = [];
         this.theme = "light";
         this.enableZoom = true;
+        this.zoomToScale = undefined;
         this._mapInfo = undefined;
-        this._flowItems = ["layer-list"];
+        this._flowItems = [];
         this._sidePanelCollapsed = false;
         this._translations = undefined;
         this._hasValidLayers = false;
@@ -87,16 +91,20 @@ const CrowdsourceReporter = class {
      * @returns Promise when complete
      */
     async componentWillLoad() {
+        var _a;
         this._urlParamsLoaded = false;
         await this._initModules();
         await this._getTranslations();
+        await ((_a = this.mapView) === null || _a === void 0 ? void 0 : _a.when(async () => {
+            await this.setMapView();
+        }));
     }
     /**
      * Renders the component.
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (index.h(index.Host, null, this._reportSubmitted && index.h("calcite-alert", { "auto-close": true, class: themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, index.h("div", { slot: "title" }, this._translations.reportSubmit), index.h("div", { slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && index.h("calcite-alert", { "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, index.h("div", { slot: "title" }, this._translations.error), index.h("div", { slot: "message" }, this._featureCreationFailedErrorMsg)), index.h("div", null, index.h("calcite-shell", { "content-behind": true }, this._getReporter()))));
+        return (index.h(index.Host, null, this._reportSubmitted && index.h("calcite-alert", { "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, index.h("div", { slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && index.h("calcite-alert", { "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, index.h("div", { slot: "title" }, this._translations.error), index.h("div", { slot: "message" }, this._featureCreationFailedErrorMsg)), index.h("div", null, index.h("calcite-shell", { "content-behind": true }, this._getReporter()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -166,8 +174,9 @@ const CrowdsourceReporter = class {
      * @protected
      */
     getLayerListFlowItem() {
+        var _a;
         return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports &&
-            index.h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText), index.h("calcite-panel", { "full-height": true, "full-width": true }, index.h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._noLayerToDisplayErrorMsg, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
+            index.h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), index.h("calcite-panel", { "full-height": true, "full-width": true }, index.h("layer-list", { class: "height-full", layers: ((_a = this._editableLayerIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this._editableLayerIds : this.layers, mapView: this.mapView, noLayerErrorMsg: this._noLayerToDisplayErrorMsg, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
     }
     /**
      * Get the layer list for creating a report
@@ -175,7 +184,7 @@ const CrowdsourceReporter = class {
      * @protected
      */
     getChooseCategoryFlowItem() {
-        return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._translations.createReportHeader, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), index.h("div", { class: "width-full", slot: "footer" }, index.h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", disabled: !this._selectedLayerId, onClick: this.navigateToCreateFeature.bind(this), width: "full" }, this._translations.next), index.h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromSelectedPanel.bind(this), width: "full" }, this._translations.cancel)), index.h("calcite-panel", { "full-height": true, "full-width": true }, index.h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, index.h("div", { slot: "message" }, this._translations.chooseCategoryMsg)), index.h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._noLayerToDisplayErrorMsg, onLayerSelect: this.highlightSelectedLayer.bind(this), showFeatureCount: false, showNextIcon: false }))));
+        return (index.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(), index.h("calcite-panel", { "full-height": true, "full-width": true }, index.h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, index.h("div", { slot: "message" }, this._translations.chooseCategoryMsg)), index.h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._noLayerToDisplayErrorMsg, onLayerSelect: this.navigateToCreateFeature.bind(this), showFeatureCount: false, showNextIcon: false }))));
     }
     /**
      * Get Feature create form of the selected feature layer
@@ -183,7 +192,7 @@ const CrowdsourceReporter = class {
      * @protected
      */
     getFeatureCreateFlowItem() {
-        return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), this._showSubmitCancelButton && index.h("div", { class: "width-full", slot: "footer" }, index.h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), index.h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), index.h("calcite-panel", { "full-height": true, "full-width": true }, index.h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, index.h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), index.h("create-feature", { customizeSubmit: true, mapView: this.mapView, onDrawComplete: this.onDrawComplete.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, selectedLayerId: this._selectedLayerId }))));
+        return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), this._showSubmitCancelButton && index.h("div", { class: "width-full", slot: "footer" }, index.h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), index.h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), index.h("calcite-panel", { "full-height": true, "full-width": true }, index.h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, index.h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), index.h("create-feature", { customizeSubmit: true, mapView: this.mapView, onDrawComplete: this.onDrawComplete.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId }))));
     }
     /**
      * When drawing of incident location completed on map show the submit and cancel button
@@ -233,13 +242,13 @@ const CrowdsourceReporter = class {
      */
     onReportSubmitted() {
         this._reportSubmitted = true;
-        this.navigateToHomePage();
+        void this.navigateToHomePage();
     }
     /**
      * Navigates to layer-list
      * @protected
      */
-    navigateToHomePage() {
+    async navigateToHomePage() {
         if (this._createFeature) {
             this._createFeature.close();
         }
@@ -247,21 +256,23 @@ const CrowdsourceReporter = class {
             this._layerList.refresh();
         }
         this.setSelectedFeatures([]);
-        this._flowItems = ["layer-list"];
+        if (this._editableLayerIds.length === 1) {
+            await this._featureList.refresh();
+            this._flowItems = ["feature-list"];
+        }
+        else {
+            this._flowItems = ["layer-list"];
+        }
     }
     /**
-     * Update the selected layer id and name
+     * On layer select open the feature create flow item
      * @param evt Event which has details of selected layerId and layerName
      * @protected
      */
-    highlightSelectedLayer(evt) {
-        this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
-    }
-    /**
-     * On next button click open the feature create flow item
-     * @protected
-     */
-    async navigateToCreateFeature() {
+    async navigateToCreateFeature(evt) {
+        if (evt.detail.layerId && evt.detail.layerName) {
+            this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
+        }
         this._showSubmitCancelButton = false;
         this._flowItems = [...this._flowItems, "feature-create"];
     }
@@ -314,8 +325,8 @@ const CrowdsourceReporter = class {
         updatedFlowItems.pop();
         this.clearHighlights();
         //Back to layer list, and return as the flowItems will be reset in navigateToHomePage
-        if (updatedFlowItems.length === 1) {
-            this.navigateToHomePage();
+        if (updatedFlowItems.length === 1 && updatedFlowItems[0] === 'layer-list') {
+            void this.navigateToHomePage();
             return;
         }
         this._flowItems = [...updatedFlowItems];
@@ -345,7 +356,7 @@ const CrowdsourceReporter = class {
      */
     getFeatureListFlowItem(layerId, layerName) {
         return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports &&
-            index.h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText), index.h("calcite-panel", { "full-height": true }, index.h("feature-list", { class: "height-full", mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, selectedLayerId: layerId }))));
+            index.h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), index.h("calcite-panel", { "full-height": true }, index.h("feature-list", { class: "height-full", highlightOnHover: true, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, ref: el => this._featureList = el, selectedLayerId: layerId }))));
     }
     /**
      * Returns the calcite-flow item for feature details
@@ -373,7 +384,9 @@ const CrowdsourceReporter = class {
             this._currentFeatureId = selectedFeature.attributes[layer.objectIdField];
         }
         else {
-            this.setSelectedLayer('', '');
+            if (this._editableLayerIds.length > 1) {
+                this.setSelectedLayer('', '');
+            }
             this._currentFeatureId = '';
         }
         this._updateShareURL();
@@ -396,6 +409,8 @@ const CrowdsourceReporter = class {
         // highlight the newly selected feature only when it has valid geometry
         if (selectedFeature && selectedFeature.geometry && selectedFeature.layer) {
             const selectedLayerView = await mapViewUtils.getFeatureLayerView(this.mapView, selectedFeature.layer.id);
+            // remove previous highlight options (if any) to highlight the feature by default color
+            selectedLayerView.highlightOptions = null;
             this._highlightHandle = await mapViewUtils.highlightFeatures([selectedFeature.getObjectId()], selectedLayerView, this.mapView, true);
         }
     }
@@ -421,6 +436,15 @@ const CrowdsourceReporter = class {
      * @protected
      */
     async setMapView() {
+        var _a;
+        await this.getLayersToShowInList();
+        // if only one valid layer is present then directly render features list
+        if (((_a = this._editableLayerIds) === null || _a === void 0 ? void 0 : _a.length) === 1) {
+            await this.renderFeaturesList();
+        }
+        else {
+            this._flowItems = ['layer-list'];
+        }
         this.mapView.popupEnabled = false;
         if (this._defaultCenter && this._defaultLevel) {
             await this.mapView.goTo({
@@ -444,7 +468,7 @@ const CrowdsourceReporter = class {
         this._mapClickHandle = this.reactiveUtils.on(() => this.mapView, "click", this.onMapClick.bind(this));
     }
     /**
-     * On map click do hitTest and get the clicked graphics of valid layers and show feature details
+     * On map click do hitTest and get the clicked graphics from both reporting and non-reporting layers, and show feature details
      * @param event IMapClick map click event details
      *
      * @protected
@@ -452,12 +476,8 @@ const CrowdsourceReporter = class {
     async onMapClick(event) {
         //disable map popup
         this.mapView.popupEnabled = false;
-        // only include graphics from valid layers listed in the layer list widget
-        const opts = {
-            include: this._validLayers
-        };
         // Perform a hitTest on the View
-        const hitTest = await this.mapView.hitTest(event, opts);
+        const hitTest = await this.mapView.hitTest(event);
         if (hitTest.results.length > 0) {
             const clickedGraphics = [];
             hitTest.results.forEach(function (result) {
@@ -466,16 +486,35 @@ const CrowdsourceReporter = class {
                     clickedGraphics.push(result.graphic);
                 }
             });
-            //update the selectedFeature
-            this.setSelectedFeatures(clickedGraphics);
-            //if featureDetails not open then add it to the list else just reInit flowItems which will update details with newly selected features
-            // eslint-disable-next-line unicorn/prefer-ternary
-            if (this._flowItems.length && this._flowItems[this._flowItems.length - 1] !== "feature-details") {
-                this._flowItems = [...this._flowItems, "feature-details"];
+            const reportingLayerGraphics = clickedGraphics.filter((graphic) => {
+                return this._validLayers.includes(graphic.layer);
+            });
+            const nonReportingLayerGraphics = clickedGraphics.filter((graphic) => {
+                var _a;
+                return !this._validLayers.includes(graphic.layer) && ((_a = graphic === null || graphic === void 0 ? void 0 : graphic.layer) === null || _a === void 0 ? void 0 : _a.id);
+            });
+            // if clicked graphic's layer is one of the reporting layers then show details in layer panel
+            if (reportingLayerGraphics.length > 0) {
+                //update the selectedFeature
+                this.setSelectedFeatures(reportingLayerGraphics);
+                //if featureDetails not open then add it to the list else just reInit flowItems which will update details with newly selected features
+                // eslint-disable-next-line unicorn/prefer-ternary
+                if (this._flowItems.length && this._flowItems[this._flowItems.length - 1] !== "feature-details") {
+                    this._flowItems = [...this._flowItems, "feature-details"];
+                }
+                else {
+                    this._flowItems = [...this._flowItems];
+                    void this.highlightOnMap(clickedGraphics[0]);
+                }
             }
-            else {
-                this._flowItems = [...this._flowItems];
-                void this.highlightOnMap(clickedGraphics[0]);
+            // if clicked graphic's layer is from non reporting layers then show popup on map
+            if (nonReportingLayerGraphics.length > 0) {
+                this.mapView.popupEnabled = true;
+                const options = {
+                    features: nonReportingLayerGraphics,
+                    updateLocationEnabled: true
+                };
+                await this.mapView.openPopup(options);
             }
         }
     }
@@ -488,10 +527,57 @@ const CrowdsourceReporter = class {
         const messages = await locale.getLocaleComponentStrings(this.el);
         this._translations = messages[0];
     }
+    /**
+     * Returns the ids of all OR configured layers that support edits with the update capability
+     * @param hash each layer item details
+     * @param layers list of layers id
+     * @returns array of editable layer ids
+     */
+    reduceToConfiguredLayers(hash) {
+        var _a;
+        const configuredLayers = ((_a = this.layers) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.layers : [];
+        return Object.keys(hash).reduce((prev, cur) => {
+            let showLayer = hash[cur].supportsAdd;
+            if ((configuredLayers === null || configuredLayers === void 0 ? void 0 : configuredLayers.length) > 0) {
+                showLayer = configuredLayers.indexOf(cur) > -1 ? hash[cur].supportsAdd : false;
+            }
+            if (showLayer) {
+                prev.push(cur);
+            }
+            return prev;
+        }, []);
+    }
+    /**
+     * Creates the list of layers to be listed in layer list
+     * @protected
+     */
+    async getLayersToShowInList() {
+        const layerItemsHash = await mapViewUtils.getMapLayerHash(this.mapView, true);
+        const allMapLayers = await mapViewUtils.getAllLayers(this.mapView);
+        allMapLayers.forEach((eachLayer) => {
+            var _a, _b;
+            if ((eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.type) === "feature" && (eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.editingEnabled) && ((_b = (_a = eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.capabilities) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.supportsAdd)) {
+                layerItemsHash[eachLayer.id].supportsAdd = true;
+            }
+        });
+        this._editableLayerIds = this.reduceToConfiguredLayers(layerItemsHash);
+    }
+    /**
+     * renders feature list
+     * @protected
+     */
+    async renderFeaturesList() {
+        const evt = {
+            detail: this._editableLayerIds
+        };
+        await this.layerListLoaded(evt);
+        this.setSelectedLayer(this._validLayers[0].id, this._validLayers[0].title);
+        this._flowItems = ['feature-list'];
+    }
     /**
      * Updates the share url for current selected feature
      * @protected
-    */
+     */
     _updateShareURL() {
         var _a, _b;
         const url = (_a = this._shareNode) === null || _a === void 0 ? void 0 : _a.shareUrl;