@esri/solutions-components 0.8.24 → 0.8.25

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

@@ -23,6 +23,10 @@ import { loadModules } from "../../utils/loadModules";
 import { getAllLayers, getLayerOrTable } from "../../utils/mapViewUtils";
 export class CreateFeature {
     constructor() {
+        /**
+         * boolean: Flag to maintain form submission using submit button
+         */
+        this._isSubmitBtnClicked = false;
         this.mapView = undefined;
         this.selectedLayerId = undefined;
         this.customizeSubmit = false;
@@ -62,6 +66,7 @@ export class CreateFeature {
      */
     async submit() {
         if (this._editor) {
+            this._isSubmitBtnClicked = true;
             this._editor.viewModel.featureFormViewModel.submit();
         }
     }
@@ -88,7 +93,7 @@ export class CreateFeature {
      */
     render() {
         const showSearchWidget = this.showSearchWidget ? '' : 'display-none';
-        return (h(Fragment, { key: 'e1427c13c0385279fcb0f122b50b891eac419ec4' }, h("div", { key: '039e8d8ff5792765c73cb23df37f37bacc0c9dda', id: "feature-form" }), h("div", { key: '94601056ec69000009f4b71b34a38cea28635d99', class: `search-widget ${showSearchWidget}`, id: "search-widget-ref" })));
+        return (h(Fragment, { key: 'd11a16053bc5eb86a09fd3bc35c9a89cee6dd064' }, h("div", { key: '0320bb0ca9fc069306151078c66fbee11060fcab', id: "feature-form" }), h("div", { key: '8aaa13e87213a880382ca408d324beb79ba7a500', class: `search-widget ${showSearchWidget}`, id: "search-widget-ref" })));
     }
     //--------------------------------------------------------------------------
     //
@@ -334,11 +339,13 @@ export class CreateFeature {
         var _a;
         //return if any attribute is invalid , focus will be shifted to the invalid attribute in feature form
         if (evt.invalid.length) {
+            this._isSubmitBtnClicked = false;
             return;
         }
         //Submit only when valid attributes
         //emit success or fail based on the result
-        if (evt.valid.length) {
+        if (evt.valid.length && this._isSubmitBtnClicked) {
+            this._isSubmitBtnClicked = false;
             try {
                 await this._editor.activeWorkflow.commit();
                 //throw errors if any failures

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

@@ -22,6 +22,10 @@ import { Host, h } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
 export class CreateRelatedFeature {
     constructor() {
+        /**
+         * boolean: Flag to maintain form submission using submit button
+         */
+        this._isSubmitBtnClicked = false;
         this.mapView = undefined;
         this.table = undefined;
         this.selectedFeature = undefined;
@@ -58,6 +62,7 @@ export class CreateRelatedFeature {
      */
     async submit() {
         if (this._editor) {
+            this._isSubmitBtnClicked = true;
             this._editor.viewModel.featureFormViewModel.submit();
         }
     }
@@ -95,7 +100,7 @@ export class CreateRelatedFeature {
         this.reactiveUtils = reactiveUtils;
     }
     render() {
-        return (h(Host, { key: '579af77dcac88043b178e711e0b47d7982c1c87f' }));
+        return (h(Host, { key: '8c32e05707b6e5501759caaef5d89f8da40640e4' }));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -225,11 +230,13 @@ export class CreateRelatedFeature {
         var _a;
         //return if any attribute is invalid , focus will be shifted to the invalid attribute in feature form
         if (evt.invalid.length) {
+            this._isSubmitBtnClicked = false;
             return;
         }
         //Submit only when valid attributes
         //emit success or fail based on the result
-        if (evt.valid.length) {
+        if (evt.valid.length && this._isSubmitBtnClicked) {
+            this._isSubmitBtnClicked = false;
             try {
                 await this._editor.activeWorkflow.commit();
                 //throw errors if any failures

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

@@ -118,7 +118,7 @@ export class CrowdsourceReporter {
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, { key: '25711a088216a3fcf2aa5d39b81ebd124f004306' }, this._reportSubmitted && h("calcite-alert", { key: 'b8cf62929599eb873a52c7e7a9b056e25fd86c2a', "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: '6411e0e7b57fd58f8ba7987331271f0494ba113b', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '67b28ad1e3493427227d2d59548a5eac80041dea', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '3ad206c32a217e6a9a5bb1e638ef3160fbff5db2', slot: "title" }, this._translations.error), h("div", { key: '7580dd6b3f81a9b0c4263fb9e71e2031e199b41d', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '7be4c3b5d07e9f30551d19990462bb3d1152b2a3', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '41c01a889ed6732cf7dabf0945fbfb261a0f3a3b', slot: "message" }, this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '29bca2310f6877ec976fbe49ac39413593202a4d', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '8a7860934cebec53462c46e0d979268c75fb9705', slot: "title" }, this._translations.error), h("div", { key: 'd675ee393e81f5104d87391075a9ae89b4077a45', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '1fce11b73759bc751de763e040d15d85a3fb347d' }, h("calcite-shell", { key: '71634d0d1b0fcbe92813ff9b514ec4e752bd3fd1', "content-behind": true }, this._getReporter())), this.filterModal()));
+        return (h(Host, { key: '497227745f29c2afc434349e86da19b088b1eb78' }, this._reportSubmitted && h("calcite-alert", { key: 'd22cceb7124073ad390cd53d97214a2983e97ea0', "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: '1f98f71fa79cf64e65fecfbceec3862714702609', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '381d3b5a3f5115782634833ad53b4494e888ea97', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '34371959d1272e4bc465e5f5a432d450a156c20b', slot: "title" }, this._translations.error), h("div", { key: '09a55e3325edde43f660a2db1621a4ffd373e09f', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '33d79a67575c9a2b14e602e60b702ca82025e20f', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '91b9dcc26cf1f66a116a287a94e8df5c3d2f37bf', slot: "message" }, this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '758f1d465d4301fade8fd93a682bfe4b359be2ca', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '982424caf90e309701c62c75065d7e7e15d327b4', slot: "title" }, this._translations.error), h("div", { key: '1c93f9f8e1b958ccf8553560c36a32273f16a3a6', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '612254cf38da92cf88b90ace8136a2e0859afcae' }, h("calcite-shell", { key: 'bb56100b4dfc355b93d580deee929aad7cfb3f7f', "content-behind": true }, this._getReporter())), this.filterModal()));
     }
     //--------------------------------------------------------------------------
     //
@@ -788,8 +788,9 @@ export class CrowdsourceReporter {
      */
     reduceToConfiguredLayers(hash) {
         return Object.keys(hash).reduce((prev, cur) => {
+            var _a;
             // check if reporting options exists consider the visible prop if else just check the supports Add
-            const showLayer = this.reportingOptions ? this._getLayersConfig(cur).visible
+            const showLayer = this.reportingOptions ? (_a = this._getLayersConfig(cur)) === null || _a === void 0 ? void 0 : _a.visible
                 : hash[cur].supportsAdd;
             if (showLayer) {
                 prev.push(cur);
@@ -871,7 +872,7 @@ export class CrowdsourceReporter {
                 const featureSet = await queryFeaturesByID([Number(this.objectId)], layer, [], true, this.mapView.spatialReference);
                 if (featureSet.length) {
                     //update the selectedFeature
-                    this._selectedFeature = featureSet;
+                    await this.setSelectedFeatures(featureSet);
                     //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") {
@@ -880,7 +881,6 @@ export class CrowdsourceReporter {
                     else {
                         this._flowItems = [...this._flowItems];
                     }
-                    await this.highlightOnMap(featureSet[0]);
                 }
             }
         }

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

@@ -5,7 +5,7 @@
 .buttons-container{
   align-items: center;
   display: flex;
-  padding: 10px;
+  padding: 4px;
   color: var(--calcite-color-text-1) !important;
   background-color: var(--calcite-color-foreground-1) !important;
   border-block-start: 1px solid var(--calcite-color-border-3);
@@ -14,8 +14,8 @@
 
 .comment-btn{
   display: flex;
-  gap: 5px;
-  font-size: var(--calcite-font-size--2);
+  gap: 10px;
+  font-size: var(--calcite-font-size--1);
   align-items: center;
-  padding: 0 0.5rem;
+  padding: 7px 0.75rem;
 }

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

@@ -39,6 +39,7 @@ export class FeatureDetails {
         this._isLikeBtnClicked = false;
         this._isDislikeBtnClicked = false;
         this._relatedFeaturesOIDs = undefined;
+        this._updating = false;
     }
     //--------------------------------------------------------------------------
     //
@@ -110,12 +111,12 @@ export class FeatureDetails {
         var _a, _b, _c, _d, _e;
         //When related features found show comments list of only those features else comments list will be empty
         const commentsListWhereClause = ((_a = this._relatedFeaturesOIDs) === null || _a === void 0 ? void 0 : _a.length) > 0 ? `objectId in(${this._relatedFeaturesOIDs})` : '1=0';
-        return (h("calcite-panel", { key: 'f8d1d282a6ebdb4d5a64efd96d88329d375b7fe1', "full-height": true }, h("info-card", { key: '3cfca85af149ab445973510ff1a9f94e22c5c833', 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: 'a3242d417cef788f0f677bf21c65fb9aaa44f8b2', class: "buttons-container" }, this._commentsAvailable &&
-                h("div", { key: '9dcfccc0a48b719d14cb08737d654000a27e21cc', class: "comment-btn" }, h("span", { key: 'b68cafd0cebfa91c12f32f648ec2f71a51e3b9da' }, this._relatedFeaturesOIDs.length), h("calcite-icon", { key: 'f2b9c34ac64a5cb7692f80cd73658f077525eee4', icon: "speech-bubble", scale: 's' })), this._likeFieldAvailable &&
-                h("calcite-button", { key: '7a4ec79205b3eccceb7d43de2c227d8407c24a26', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", onClick: this.onLikeButtonClick.bind(this), scale: 's' }, (_c = (_b = this._likeCount) !== null && _b !== void 0 ? _b : this._selectedGraphic.attributes[this._likeField]) !== null && _c !== void 0 ? _c : 0), this._dislikeFieldAvailable &&
-                h("calcite-button", { key: '4634f8aeb114f97c9ceaae8eac5da86afa89f217', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", onClick: this.onDislikeButtonClick.bind(this), scale: 's' }, (_e = (_d = this._disLikeCount) !== null && _d !== void 0 ? _d : this._selectedGraphic.attributes[this._dislikeField]) !== null && _e !== void 0 ? _e : 0)), this.relatedTableId && this._commentsAvailable &&
-            h("feature-list", { key: '30559c6f28a741264972677cef1f182f1012f73f', 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: '8d7069fec0df2a6217c175df6171376b4412c548', "full-height": true }, h("info-card", { key: '3713b783371bcb36a9b844196033326941d833f5', 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: '8c84e82708fab0d6091050672b26e6fa2de59345', class: "buttons-container" }, this._commentsAvailable &&
+                h("div", { key: '22edb3f17ef6a2bdef67e5e94492966986d452b7', class: "comment-btn" }, h("span", { key: '03b7eb0aff4358aac3020b3d6d52a2d47b308a41' }, this._relatedFeaturesOIDs.length), h("calcite-icon", { key: '5225e156b45a15db0055a28ed21bc3511dedc706', icon: "speech-bubble", scale: 's' })), this._likeFieldAvailable &&
+                h("calcite-button", { key: '1a291524d46c6f826813c87f781e7d6bcf5bc097', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onLikeButtonClick.bind(this), scale: 'm' }, (_c = (_b = this._likeCount) !== null && _b !== void 0 ? _b : this._selectedGraphic.attributes[this._likeField]) !== null && _c !== void 0 ? _c : 0), this._dislikeFieldAvailable &&
+                h("calcite-button", { key: 'da6bee2189565c1eb70564b340e742494bac35c9', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onDislikeButtonClick.bind(this), scale: 'm' }, (_e = (_d = this._disLikeCount) !== null && _d !== void 0 ? _d : this._selectedGraphic.attributes[this._dislikeField]) !== null && _e !== void 0 ? _e : 0)), this.relatedTableId && this._commentsAvailable &&
+            h("feature-list", { key: 'fd6faa9f3404a2dfadb102ca7c578ffb47207729', 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 })));
     }
     /**
      * Load esri javascript api modules
@@ -272,7 +273,6 @@ export class FeatureDetails {
      * @protected
      */
     onLikeButtonClick() {
-        this.loadingStatus.emit(true);
         if (this._isDislikeBtnClicked && this.reportingOptions[this._selectedGraphic.layer.id].dislike) {
             this.onDislikeButtonClick();
         }
@@ -290,7 +290,6 @@ export class FeatureDetails {
      * @protected
      */
     onDislikeButtonClick() {
-        this.loadingStatus.emit(true);
         if (this._isLikeBtnClicked && this.reportingOptions[this._selectedGraphic.layer.id].like) {
             this.onLikeButtonClick();
         }
@@ -312,6 +311,7 @@ export class FeatureDetails {
     async updateFeaturesLikeDislikeField(fieldName, buttonClicked) {
         const attributesToUpdate = {};
         const selectedLayer = this._selectedGraphic.layer;
+        this._updating = true;
         //Increment the value if button is clicked or else decrement it
         const selectFeatureAttr = this._selectedGraphic;
         if (buttonClicked) {
@@ -335,9 +335,9 @@ export class FeatureDetails {
             }
             //store the like dislike value for the current selected graphic in local storage
             this.setInLocalStorage();
-            this.loadingStatus.emit(false);
+            this._updating = false;
         }, (err) => {
-            this.loadingStatus.emit(false);
+            this._updating = false;
             console.log(err);
         });
     }
@@ -490,7 +490,8 @@ export class FeatureDetails {
             "_commentsAvailable": {},
             "_isLikeBtnClicked": {},
             "_isDislikeBtnClicked": {},
-            "_relatedFeaturesOIDs": {}
+            "_relatedFeaturesOIDs": {},
+            "_updating": {}
         };
     }
     static get events() {

package/dist/collection/components/feature-list/feature-list.css

@@ -35,9 +35,11 @@
 .feature-list-popup-title {
   font-weight: 500;
   padding: 10px 12px;
+  white-space: pre-line;
 }
 
 .feature-list-popup-title-small {
   font-size: small;
   padding: 10px 12px;
+  white-space: pre-line;
 }

package/dist/components/create-feature2.js

@@ -19,6 +19,10 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         this.drawComplete = createEvent(this, "drawComplete", 7);
         this.editingAttachment = createEvent(this, "editingAttachment", 7);
         this.progressStatus = createEvent(this, "progressStatus", 7);
+        /**
+         * boolean: Flag to maintain form submission using submit button
+         */
+        this._isSubmitBtnClicked = false;
         this.mapView = undefined;
         this.selectedLayerId = undefined;
         this.customizeSubmit = false;
@@ -58,6 +62,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      */
     async submit() {
         if (this._editor) {
+            this._isSubmitBtnClicked = true;
             this._editor.viewModel.featureFormViewModel.submit();
         }
     }
@@ -84,7 +89,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      */
     render() {
         const showSearchWidget = this.showSearchWidget ? '' : 'display-none';
-        return (h(Fragment, { key: 'e1427c13c0385279fcb0f122b50b891eac419ec4' }, h("div", { key: '039e8d8ff5792765c73cb23df37f37bacc0c9dda', id: "feature-form" }), h("div", { key: '94601056ec69000009f4b71b34a38cea28635d99', class: `search-widget ${showSearchWidget}`, id: "search-widget-ref" })));
+        return (h(Fragment, { key: 'd11a16053bc5eb86a09fd3bc35c9a89cee6dd064' }, h("div", { key: '0320bb0ca9fc069306151078c66fbee11060fcab', id: "feature-form" }), h("div", { key: '8aaa13e87213a880382ca408d324beb79ba7a500', class: `search-widget ${showSearchWidget}`, id: "search-widget-ref" })));
     }
     //--------------------------------------------------------------------------
     //
@@ -330,11 +335,13 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         var _a;
         //return if any attribute is invalid , focus will be shifted to the invalid attribute in feature form
         if (evt.invalid.length) {
+            this._isSubmitBtnClicked = false;
             return;
         }
         //Submit only when valid attributes
         //emit success or fail based on the result
-        if (evt.valid.length) {
+        if (evt.valid.length && this._isSubmitBtnClicked) {
+            this._isSubmitBtnClicked = false;
             try {
                 await this._editor.activeWorkflow.commit();
                 //throw errors if any failures

package/dist/components/create-related-feature2.js

@@ -16,6 +16,10 @@ const CreateRelatedFeature = /*@__PURE__*/ proxyCustomElement(class CreateRelate
         this.success = createEvent(this, "success", 7);
         this.fail = createEvent(this, "fail", 7);
         this.isActionPending = createEvent(this, "isActionPending", 7);
+        /**
+         * boolean: Flag to maintain form submission using submit button
+         */
+        this._isSubmitBtnClicked = false;
         this.mapView = undefined;
         this.table = undefined;
         this.selectedFeature = undefined;
@@ -52,6 +56,7 @@ const CreateRelatedFeature = /*@__PURE__*/ proxyCustomElement(class CreateRelate
      */
     async submit() {
         if (this._editor) {
+            this._isSubmitBtnClicked = true;
             this._editor.viewModel.featureFormViewModel.submit();
         }
     }
@@ -89,7 +94,7 @@ const CreateRelatedFeature = /*@__PURE__*/ proxyCustomElement(class CreateRelate
         this.reactiveUtils = reactiveUtils;
     }
     render() {
-        return (h(Host, { key: '579af77dcac88043b178e711e0b47d7982c1c87f' }));
+        return (h(Host, { key: '8c32e05707b6e5501759caaef5d89f8da40640e4' }));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -219,11 +224,13 @@ const CreateRelatedFeature = /*@__PURE__*/ proxyCustomElement(class CreateRelate
         var _a;
         //return if any attribute is invalid , focus will be shifted to the invalid attribute in feature form
         if (evt.invalid.length) {
+            this._isSubmitBtnClicked = false;
             return;
         }
         //Submit only when valid attributes
         //emit success or fail based on the result
-        if (evt.valid.length) {
+        if (evt.valid.length && this._isSubmitBtnClicked) {
+            this._isSubmitBtnClicked = false;
             try {
                 await this._editor.activeWorkflow.commit();
                 //throw errors if any failures

package/dist/components/crowdsource-reporter.js

@@ -156,7 +156,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, { key: '25711a088216a3fcf2aa5d39b81ebd124f004306' }, this._reportSubmitted && h("calcite-alert", { key: 'b8cf62929599eb873a52c7e7a9b056e25fd86c2a', "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: '6411e0e7b57fd58f8ba7987331271f0494ba113b', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '67b28ad1e3493427227d2d59548a5eac80041dea', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '3ad206c32a217e6a9a5bb1e638ef3160fbff5db2', slot: "title" }, this._translations.error), h("div", { key: '7580dd6b3f81a9b0c4263fb9e71e2031e199b41d', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '7be4c3b5d07e9f30551d19990462bb3d1152b2a3', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '41c01a889ed6732cf7dabf0945fbfb261a0f3a3b', slot: "message" }, this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '29bca2310f6877ec976fbe49ac39413593202a4d', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '8a7860934cebec53462c46e0d979268c75fb9705', slot: "title" }, this._translations.error), h("div", { key: 'd675ee393e81f5104d87391075a9ae89b4077a45', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '1fce11b73759bc751de763e040d15d85a3fb347d' }, h("calcite-shell", { key: '71634d0d1b0fcbe92813ff9b514ec4e752bd3fd1', "content-behind": true }, this._getReporter())), this.filterModal()));
+        return (h(Host, { key: '497227745f29c2afc434349e86da19b088b1eb78' }, this._reportSubmitted && h("calcite-alert", { key: 'd22cceb7124073ad390cd53d97214a2983e97ea0', "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: '1f98f71fa79cf64e65fecfbceec3862714702609', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '381d3b5a3f5115782634833ad53b4494e888ea97', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '34371959d1272e4bc465e5f5a432d450a156c20b', slot: "title" }, this._translations.error), h("div", { key: '09a55e3325edde43f660a2db1621a4ffd373e09f', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '33d79a67575c9a2b14e602e60b702ca82025e20f', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '91b9dcc26cf1f66a116a287a94e8df5c3d2f37bf', slot: "message" }, this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '758f1d465d4301fade8fd93a682bfe4b359be2ca', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '982424caf90e309701c62c75065d7e7e15d327b4', slot: "title" }, this._translations.error), h("div", { key: '1c93f9f8e1b958ccf8553560c36a32273f16a3a6', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '612254cf38da92cf88b90ace8136a2e0859afcae' }, h("calcite-shell", { key: 'bb56100b4dfc355b93d580deee929aad7cfb3f7f', "content-behind": true }, this._getReporter())), this.filterModal()));
     }
     //--------------------------------------------------------------------------
     //
@@ -826,8 +826,9 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     reduceToConfiguredLayers(hash) {
         return Object.keys(hash).reduce((prev, cur) => {
+            var _a;
             // check if reporting options exists consider the visible prop if else just check the supports Add
-            const showLayer = this.reportingOptions ? this._getLayersConfig(cur).visible
+            const showLayer = this.reportingOptions ? (_a = this._getLayersConfig(cur)) === null || _a === void 0 ? void 0 : _a.visible
                 : hash[cur].supportsAdd;
             if (showLayer) {
                 prev.push(cur);
@@ -909,7 +910,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
                 const featureSet = await queryFeaturesByID([Number(this.objectId)], layer, [], true, this.mapView.spatialReference);
                 if (featureSet.length) {
                     //update the selectedFeature
-                    this._selectedFeature = featureSet;
+                    await this.setSelectedFeatures(featureSet);
                     //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") {
@@ -918,7 +919,6 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
                     else {
                         this._flowItems = [...this._flowItems];
                     }
-                    await this.highlightOnMap(featureSet[0]);
                 }
             }
         }

package/dist/components/feature-details2.js

@@ -33,7 +33,7 @@ import { d as defineCustomElement$3 } from './edit-card2.js';
 import { d as defineCustomElement$2 } from './feature-list2.js';
 import { d as defineCustomElement$1 } from './info-card2.js';
 
-const featureDetailsCss = ":host{display:block}.buttons-container{align-items:center;display:flex;padding:10px;color:var(--calcite-color-text-1) !important;background-color:var(--calcite-color-foreground-1) !important;border-block-start:1px solid var(--calcite-color-border-3);border-block-end:1px solid var(--calcite-color-border-3)}.comment-btn{display:flex;gap:5px;font-size:var(--calcite-font-size--2);align-items:center;padding:0 0.5rem}";
+const featureDetailsCss = ":host{display:block}.buttons-container{align-items:center;display:flex;padding:4px;color:var(--calcite-color-text-1) !important;background-color:var(--calcite-color-foreground-1) !important;border-block-start:1px solid var(--calcite-color-border-3);border-block-end:1px solid var(--calcite-color-border-3)}.comment-btn{display:flex;gap:10px;font-size:var(--calcite-font-size--1);align-items:center;padding:7px 0.75rem}";
 const FeatureDetailsStyle0 = featureDetailsCss;
 
 const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails extends HTMLElement {
@@ -59,6 +59,7 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
         this._isLikeBtnClicked = false;
         this._isDislikeBtnClicked = false;
         this._relatedFeaturesOIDs = undefined;
+        this._updating = false;
     }
     //--------------------------------------------------------------------------
     //
@@ -130,12 +131,12 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
         var _a, _b, _c, _d, _e;
         //When related features found show comments list of only those features else comments list will be empty
         const commentsListWhereClause = ((_a = this._relatedFeaturesOIDs) === null || _a === void 0 ? void 0 : _a.length) > 0 ? `objectId in(${this._relatedFeaturesOIDs})` : '1=0';
-        return (h("calcite-panel", { key: 'f8d1d282a6ebdb4d5a64efd96d88329d375b7fe1', "full-height": true }, h("info-card", { key: '3cfca85af149ab445973510ff1a9f94e22c5c833', 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: 'a3242d417cef788f0f677bf21c65fb9aaa44f8b2', class: "buttons-container" }, this._commentsAvailable &&
-                h("div", { key: '9dcfccc0a48b719d14cb08737d654000a27e21cc', class: "comment-btn" }, h("span", { key: 'b68cafd0cebfa91c12f32f648ec2f71a51e3b9da' }, this._relatedFeaturesOIDs.length), h("calcite-icon", { key: 'f2b9c34ac64a5cb7692f80cd73658f077525eee4', icon: "speech-bubble", scale: 's' })), this._likeFieldAvailable &&
-                h("calcite-button", { key: '7a4ec79205b3eccceb7d43de2c227d8407c24a26', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", onClick: this.onLikeButtonClick.bind(this), scale: 's' }, (_c = (_b = this._likeCount) !== null && _b !== void 0 ? _b : this._selectedGraphic.attributes[this._likeField]) !== null && _c !== void 0 ? _c : 0), this._dislikeFieldAvailable &&
-                h("calcite-button", { key: '4634f8aeb114f97c9ceaae8eac5da86afa89f217', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", onClick: this.onDislikeButtonClick.bind(this), scale: 's' }, (_e = (_d = this._disLikeCount) !== null && _d !== void 0 ? _d : this._selectedGraphic.attributes[this._dislikeField]) !== null && _e !== void 0 ? _e : 0)), this.relatedTableId && this._commentsAvailable &&
-            h("feature-list", { key: '30559c6f28a741264972677cef1f182f1012f73f', 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: '8d7069fec0df2a6217c175df6171376b4412c548', "full-height": true }, h("info-card", { key: '3713b783371bcb36a9b844196033326941d833f5', 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: '8c84e82708fab0d6091050672b26e6fa2de59345', class: "buttons-container" }, this._commentsAvailable &&
+                h("div", { key: '22edb3f17ef6a2bdef67e5e94492966986d452b7', class: "comment-btn" }, h("span", { key: '03b7eb0aff4358aac3020b3d6d52a2d47b308a41' }, this._relatedFeaturesOIDs.length), h("calcite-icon", { key: '5225e156b45a15db0055a28ed21bc3511dedc706', icon: "speech-bubble", scale: 's' })), this._likeFieldAvailable &&
+                h("calcite-button", { key: '1a291524d46c6f826813c87f781e7d6bcf5bc097', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onLikeButtonClick.bind(this), scale: 'm' }, (_c = (_b = this._likeCount) !== null && _b !== void 0 ? _b : this._selectedGraphic.attributes[this._likeField]) !== null && _c !== void 0 ? _c : 0), this._dislikeFieldAvailable &&
+                h("calcite-button", { key: 'da6bee2189565c1eb70564b340e742494bac35c9', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onDislikeButtonClick.bind(this), scale: 'm' }, (_e = (_d = this._disLikeCount) !== null && _d !== void 0 ? _d : this._selectedGraphic.attributes[this._dislikeField]) !== null && _e !== void 0 ? _e : 0)), this.relatedTableId && this._commentsAvailable &&
+            h("feature-list", { key: 'fd6faa9f3404a2dfadb102ca7c578ffb47207729', 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 })));
     }
     /**
      * Load esri javascript api modules
@@ -292,7 +293,6 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
      * @protected
      */
     onLikeButtonClick() {
-        this.loadingStatus.emit(true);
         if (this._isDislikeBtnClicked && this.reportingOptions[this._selectedGraphic.layer.id].dislike) {
             this.onDislikeButtonClick();
         }
@@ -310,7 +310,6 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
      * @protected
      */
     onDislikeButtonClick() {
-        this.loadingStatus.emit(true);
         if (this._isLikeBtnClicked && this.reportingOptions[this._selectedGraphic.layer.id].like) {
             this.onLikeButtonClick();
         }
@@ -332,6 +331,7 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
     async updateFeaturesLikeDislikeField(fieldName, buttonClicked) {
         const attributesToUpdate = {};
         const selectedLayer = this._selectedGraphic.layer;
+        this._updating = true;
         //Increment the value if button is clicked or else decrement it
         const selectFeatureAttr = this._selectedGraphic;
         if (buttonClicked) {
@@ -355,9 +355,9 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
             }
             //store the like dislike value for the current selected graphic in local storage
             this.setInLocalStorage();
-            this.loadingStatus.emit(false);
+            this._updating = false;
         }, (err) => {
-            this.loadingStatus.emit(false);
+            this._updating = false;
             console.log(err);
         });
     }
@@ -422,6 +422,7 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
         "_isLikeBtnClicked": [32],
         "_isDislikeBtnClicked": [32],
         "_relatedFeaturesOIDs": [32],
+        "_updating": [32],
         "refresh": [64],
         "back": [64],
         "next": [64],

package/dist/components/feature-list2.js

@@ -25,7 +25,7 @@ import { d as defineCustomElement$3 } from './progress.js';
 import { d as defineCustomElement$2 } from './scrim.js';
 import { d as defineCustomElement$1 } from './stack.js';
 
-const featureListCss = ":host{display:block}.width-full{width:100%}.pagination{display:flex;justify-content:center}.error-msg{padding:10px;width:calc(100% - 20px)}.feature-list-popup-title{font-weight:500;padding:10px 12px}.feature-list-popup-title-small{font-size:small;padding:10px 12px}";
+const featureListCss = ":host{display:block}.width-full{width:100%}.pagination{display:flex;justify-content:center}.error-msg{padding:10px;width:calc(100% - 20px)}.feature-list-popup-title{font-weight:500;padding:10px 12px;white-space:pre-line}.feature-list-popup-title-small{font-size:small;padding:10px 12px;white-space:pre-line}";
 const FeatureListStyle0 = featureListCss;
 
 const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends HTMLElement {