@esri/solutions-components 0.8.24 → 0.8.26

package/dist/components/create-feature2.js

@@ -6,6 +6,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
 import { a as getAllLayers, g as getLayerOrTable } from './mapViewUtils.js';
+import { d as defineCustomElement$1 } from './loader.js';
 
 const createFeatureCss = ":host{display:block}.esri-editor__panel-toolbar{display:none !important}.esri-editor__update-actions{display:none !important}.esri-editor__panel-content{padding-block:0px !important}.esri-editor .esri-item-list__group__header{display:none !important}.esri-editor__panel-content__section .esri-widget__heading{display:none !important}.esri-editor .esri-item-list__filter-container--sticky{padding-block:0px !important;padding-inline:10px !important}.search-widget{width:92% !important;margin:5px 0 20px 14px}.display-none{display:none !important}";
 const CreateFeatureStyle0 = createFeatureCss;
@@ -19,10 +20,15 @@ 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;
         this.searchConfiguration = undefined;
+        this._editorLoading = false;
         this.showSearchWidget = undefined;
     }
     //--------------------------------------------------------------------------
@@ -31,13 +37,25 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
     //
     //--------------------------------------------------------------------------
     /**
-    * Called each time the mapView prop is changed.
-    */
+     * Called each time the mapView prop is changed.
+     */
     async mapViewWatchHandler() {
         await this.mapView.when(async () => {
             await this.init();
         });
     }
+    /**
+     * When _editorLoading is true the container node will be hidden while starting the create workflow
+     */
+    async _editorLoadingWatchHandler(v) {
+        var _a, _b;
+        if (v) {
+            (_a = this._container) === null || _a === void 0 ? void 0 : _a.classList.add("display-none");
+            await this.startCreate();
+            (_b = this._container) === null || _b === void 0 ? void 0 : _b.classList.remove("display-none");
+            this._editorLoading = false;
+        }
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
@@ -58,6 +76,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      */
     async submit() {
         if (this._editor) {
+            this._isSubmitBtnClicked = true;
             this._editor.viewModel.featureFormViewModel.submit();
         }
     }
@@ -84,7 +103,9 @@ 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" })));
+        const loaderClass = this._editorLoading ? "" : "display-none";
+        const featureFormClass = this._editorLoading ? "display-none" : "";
+        return (h(Fragment, { key: '2e790defdd5592fed729853888ee06143c95c84d' }, h("calcite-loader", { key: 'a0f1de0064ea80305d4aaf83f78939c0236c955a', class: loaderClass, label: "", scale: "s" }), h("div", { key: '1af391d6d7fd0dffa2e8e4b43905f8081a5f9820', class: featureFormClass, id: "feature-form" }), h("div", { key: '88d12115c3c2e0d34a5d6fd8895fb60cec6e9b5d', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref" })));
     }
     //--------------------------------------------------------------------------
     //
@@ -120,11 +141,13 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      * @protected
      */
     async createEditorWidget() {
+        var _a;
         if (this._editor) {
             this._editor.destroy();
         }
         const layerInfos = [];
-        const container = document.createElement("div");
+        this._container = document.createElement("div");
+        (_a = this._container) === null || _a === void 0 ? void 0 : _a.classList.add("display-none");
         const allMapLayers = await getAllLayers(this.mapView);
         // eslint-disable-next-line @typescript-eslint/no-misused-promises
         allMapLayers.forEach(async (eachLayer) => {
@@ -143,9 +166,9 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
             visibleElements: {
                 snappingControls: false
             },
-            container
+            container: this._container
         });
-        this.el.appendChild(container);
+        this.el.appendChild(this._container);
         //Add handle to watch if attachments are added/edited
         const attachmentHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
             if (state === 'adding-attachment' || state === 'editing-attachment') {
@@ -164,13 +187,14 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         const handle = this.reactiveUtils.watch(() => this._editor.viewModel.featureTemplatesViewModel.state, (state) => {
             if (state === 'ready') {
                 this.progressStatus.emit(0.5);
-                void this.startCreate();
+                this._editorLoading = true;
             }
         });
         this._editor.viewModel.addHandles(handle);
         //Add handle to watch editor viewmodel state and then show the search widget
         const formHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
             if (state === 'creating-features') {
+                this._editorLoading = true;
                 this.showSearchWidget = true;
             }
         });
@@ -181,36 +205,39 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      * @protected
      */
     async startCreate() {
-        var _a;
-        if ((_a = this._editor.viewModel.featureTemplatesViewModel.items) === null || _a === void 0 ? void 0 : _a.length) {
-            const items = this._editor.viewModel.featureTemplatesViewModel.items[0].get("items");
-            //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));
-                    //on sketch complete emit the event
-                    this._editor.viewModel.sketchViewModel.on("create", (evt) => {
-                        if (evt.state === "complete") {
-                            this.showSearchWidget = false;
-                            this.progressStatus.emit(1);
-                            this.drawComplete.emit();
-                        }
-                    });
-                    this.hideEditorsElements();
-                }, 700);
-                this.hideEditorsElements();
-            });
-            //if only one feature template then directly start geometry creation for that
-            //else allow feature template selection to user
-            if (items.length === 1) {
-                this._editor.viewModel.featureTemplatesViewModel.select(items[0]);
+        return new Promise((resolve, reject) => {
+            var _a;
+            if ((_a = this._editor.viewModel.featureTemplatesViewModel.items) === null || _a === void 0 ? void 0 : _a.length) {
+                const items = this._editor.viewModel.featureTemplatesViewModel.items[0].get("items");
+                //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));
+                        //on sketch complete emit the event
+                        this._editor.viewModel.sketchViewModel.on("create", (evt) => {
+                            if (evt.state === "complete") {
+                                this.showSearchWidget = false;
+                                this.progressStatus.emit(1);
+                                this.drawComplete.emit();
+                            }
+                        });
+                        this.hideEditorsElements().then(() => {
+                            resolve({});
+                        }, e => reject(e));
+                    }, 700);
+                });
+                //if only one feature template then directly start geometry creation for that
+                //else allow feature template selection to user
+                if (items.length === 1) {
+                    this._editor.viewModel.featureTemplatesViewModel.select(items[0]);
+                }
+                //hides the header and footer elements in editor widget
+                void this.hideEditorsElements();
             }
-            //hides the header and footer elements in editor widget
-            this.hideEditorsElements();
-        }
+        });
     }
     /**
      * Display search widget to search location
@@ -245,7 +272,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
                     if (this._editor.viewModel.sketchViewModel.createGraphic && pointGeometry) {
                         this._editor.viewModel.sketchViewModel.createGraphic.set('geometry', pointGeometry);
                         this._editor.viewModel.sketchViewModel.complete();
-                        this.hideEditorsElements();
+                        void this.hideEditorsElements();
                     }
                 }, 100);
             }
@@ -304,22 +331,21 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      * Hides the elements of editor widget
      * @protected
      */
-    hideEditorsElements() {
+    async hideEditorsElements() {
+        var _a;
         if (!this.customizeSubmit) {
             return;
         }
-        setTimeout(() => {
-            var _a;
-            //hides the header and footer on the featureForm
-            (_a = this.el.querySelector('.esri-editor').querySelectorAll('calcite-flow-item')) === null || _a === void 0 ? void 0 : _a.forEach((flowItem) => {
-                var _a, _b, _c, _d, _e;
-                const article = (_c = (_b = (_a = flowItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('calcite-panel')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('article');
-                //hide the header
-                (_d = article === null || article === void 0 ? void 0 : article.querySelector('header')) === null || _d === void 0 ? void 0 : _d.setAttribute('style', 'display: none');
-                //hide the footer
-                (_e = article === null || article === void 0 ? void 0 : article.querySelector('footer')) === null || _e === void 0 ? void 0 : _e.setAttribute('style', 'display: none');
-            });
-        }, 700);
+        await this.timeout(700);
+        //hides the header and footer on the featureForm
+        (_a = this.el.querySelector('.esri-editor').querySelectorAll('calcite-flow-item')) === null || _a === void 0 ? void 0 : _a.forEach((flowItem) => {
+            var _a, _b, _c, _d, _e;
+            const article = (_c = (_b = (_a = flowItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('calcite-panel')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('article');
+            //hide the header
+            (_d = article === null || article === void 0 ? void 0 : article.querySelector('header')) === null || _d === void 0 ? void 0 : _d.setAttribute('style', 'display: none');
+            //hide the footer
+            (_e = article === null || article === void 0 ? void 0 : article.querySelector('footer')) === null || _e === void 0 ? void 0 : _e.setAttribute('style', 'display: none');
+        });
     }
     /**
      * On creation of feature emit the event that the feature is created
@@ -330,11 +356,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
@@ -353,9 +381,18 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
             this.success.emit();
         }
     }
+    /**
+     * call setTimeout in Promise wrapper
+     * @param delay The time, in milliseconds that the timer should wait before the promise is resolved
+     * @protected
+     */
+    timeout(delay) {
+        return new Promise(resolve => setTimeout(resolve, delay));
+    }
     get el() { return this; }
     static get watchers() { return {
-        "mapView": ["mapViewWatchHandler"]
+        "mapView": ["mapViewWatchHandler"],
+        "_editorLoading": ["_editorLoadingWatchHandler"]
     }; }
     static get style() { return CreateFeatureStyle0; }
 }, [0, "create-feature", {
@@ -363,23 +400,30 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         "selectedLayerId": [1, "selected-layer-id"],
         "customizeSubmit": [4, "customize-submit"],
         "searchConfiguration": [16],
+        "_editorLoading": [32],
         "showSearchWidget": [32],
         "close": [64],
         "submit": [64]
     }, undefined, {
-        "mapView": ["mapViewWatchHandler"]
+        "mapView": ["mapViewWatchHandler"],
+        "_editorLoading": ["_editorLoadingWatchHandler"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["create-feature"];
+    const components = ["create-feature", "calcite-loader"];
     components.forEach(tagName => { switch (tagName) {
         case "create-feature":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, CreateFeature);
             }
             break;
+        case "calcite-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
     } });
 }
 defineCustomElement();

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: 'c8516898db79b35b7fba909810afdc56b0602ebd' }));
     }
     /**
      * 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-manager.js

@@ -252,7 +252,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     render() {
         // only avoid border when we have a header color that is not white
         const borderClass = this.popupHeaderColor && this.popupHeaderColor !== "#FFFFFF" ? "border-width-0" : "";
-        return (h(Host, { key: '0f06df71cc424887b8dc4b4929670d94b6548085' }, h("calcite-shell", { key: 'c81a570fb771650de6193e45ffbebd03544eaf2e', class: "position-relative" }, h("calcite-panel", { key: '5e67c2bf9ed0df0080629989f93e89a145349abc', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
+        return (h(Host, { key: '9624c9a65dfde0984d1abdc8ed78f709d58874f3' }, h("calcite-shell", { key: '0b54737e19b7ab1b17a1841b7b83267515a5de51', class: "position-relative" }, h("calcite-panel", { key: 'aea71b81bd854548f921920cb6dc259d8441a2b2', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
     }
     /**
      * Called after each render

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: '119bb8b1c9115dca4e15c45ddd8e7fbed500b4d7' }, this._reportSubmitted && h("calcite-alert", { key: 'ef85c61fb5c9eaac9391c1e37494ef5e4244dadb', "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: '616a75103a227cf1b50d9e43fea129afc3fee4f9', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '2faf9a9729bf90b87e044bfe8958571735f2cbf5', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '66cdf81166042ff4efddd4cc5801d790463d75fc', slot: "title" }, this._translations.error), h("div", { key: 'ad289b06742d2159d6fcfbdc42ecc9fb6d81f362', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '27aee542bfd2cae8972035d17167407b35b5eb76', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '70a8a21de05b00d409adb226d6393817f7514930', slot: "message" }, this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '107ab01eca03500faeb4db5a2ac0e9dc7261e6fc', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '31e6fba8c28489f87897a13ebb4e7b8956452191', slot: "title" }, this._translations.error), h("div", { key: '6f0868946ef6e04490ba1e0806a03e26c756760b', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: 'e169b7b466023010d45151ca9b7dfb900d8d7f9f' }, h("calcite-shell", { key: '72899b8eff6622233224df91223ee5d59539905b', "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/deduct-calculator2.js

@@ -874,7 +874,7 @@ const DeductCalculator = /*@__PURE__*/ proxyCustomElement(class DeductCalculator
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '68401afdbb18147910d55f13cae4c019bda9f020' }, h("div", { key: '88b89c1a9b260024f28315574539f47bd0bd0a3a', class: "label-display" }, h("calcite-label", { key: '8e81c5e65fe272c547addd3915ccc6a7da48a5b8', class: "label-display" }, "Density %", this._getDensityInput()), h("calcite-label", { key: 'f549369baa3b681922c07b2c91a626664e98309f', class: "label-display" }, "Type", this._getTypeInput()), h("calcite-label", { key: 'e850fbf5d9728f969c289946c3518a30316e88b9', class: "label-display" }, "Severity", this._getSeverityInput())), h("div", { key: '2485c0b0f0c2681b1af7cf55478ec34efb734a46' }, this._getCalculateInput())));
+        return (h(Host, { key: '7c12073b99b009ce413082df1ea7f7ba57a24d89' }, h("div", { key: '35ad62ab6a2fe9efb8e32c262d562c213ce067aa', class: "label-display" }, h("calcite-label", { key: '5f4b84e4639538ebc8c6172def2a9c4b2703621f', class: "label-display" }, "Density %", this._getDensityInput()), h("calcite-label", { key: 'b3c9bf873945871c456e97a7c6ce71ce820f37c5', class: "label-display" }, "Type", this._getTypeInput()), h("calcite-label", { key: '57d3b49c4b2a1f103fb197e29913e244731c507f', class: "label-display" }, "Severity", this._getSeverityInput())), h("div", { key: '1194dccf269b5c42248f4e4eed188bcc89aa4cb5' }, this._getCalculateInput())));
     }
     //--------------------------------------------------------------------------
     //

package/dist/components/delete-button2.js

@@ -12,7 +12,7 @@ import { d as defineCustomElement$3 } from './loader.js';
 import { d as defineCustomElement$2 } from './modal.js';
 import { d as defineCustomElement$1 } from './scrim.js';
 
-const deleteButtonCss = ":host{display:block}";
+const deleteButtonCss = ":host{display:block}.delete-modal{position:fixed}";
 const DeleteButtonStyle0 = deleteButtonCss;
 
 const DeleteButton = /*@__PURE__*/ proxyCustomElement(class DeleteButton extends HTMLElement {
@@ -71,7 +71,7 @@ const DeleteButton = /*@__PURE__*/ proxyCustomElement(class DeleteButton extends
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '09821225eb29ad6eef021f81977cabc3b7852167' }, this.buttonType === "button" ? (h("calcite-button", { appearance: "outline", disabled: !this._deleteEndabled, id: "solutions-delete", kind: "danger", onClick: () => this._delete(), width: "full" }, this._translations.deleteCount.replace("{{n}}", this.ids.length.toString()))) : (h("calcite-action", { appearance: "solid", compact: true, disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s", text: this._translations.delete }, h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage()));
+        return (h(Host, { key: '87e080ea4203ab7fcb1313d8fa57a3d5c5d37885' }, this.buttonType === "button" ? (h("calcite-button", { appearance: "outline", disabled: !this._deleteEndabled, id: "solutions-delete", kind: "danger", onClick: () => this._delete(), width: "full" }, this._translations.deleteCount.replace("{{n}}", this.ids.length.toString()))) : (h("calcite-action", { appearance: "solid", compact: true, disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s", text: this._translations.delete }, h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage()));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -108,7 +108,7 @@ const DeleteButton = /*@__PURE__*/ proxyCustomElement(class DeleteButton extends
     _deleteMessage() {
         const confirmMessage = this.ids.length === 1 ? this._translations.confirmSingle :
             this._translations.confirmMultiple;
-        return (h("calcite-modal", { "aria-labelledby": "modal-title", kind: "danger", onCalciteModalClose: () => this._deleteClosed(), open: this._confirmDelete }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations.deleteFeature), h("div", { slot: "content" }, confirmMessage), h("calcite-button", { appearance: "outline", kind: "danger", onClick: () => this._deleteClosed(), slot: "secondary", width: "full" }, this._translations.cancel), h("calcite-button", { kind: "danger", loading: this._isDeleting, onClick: () => void this._deleteFeatures(), slot: "primary", width: "full" }, this._translations.delete)));
+        return (h("calcite-modal", { "aria-labelledby": "modal-title", class: "delete-modal", kind: "danger", onCalciteModalClose: () => this._deleteClosed(), open: this._confirmDelete }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations.deleteFeature), h("div", { slot: "content" }, confirmMessage), h("calcite-button", { appearance: "outline", kind: "danger", onClick: () => this._deleteClosed(), slot: "secondary", width: "full" }, this._translations.cancel), h("calcite-button", { kind: "danger", loading: this._isDeleting, onClick: () => void this._deleteFeatures(), slot: "primary", width: "full" }, this._translations.delete)));
     }
     /**
      * Delete the currently selected features

package/dist/components/edit-card2.js

@@ -108,7 +108,7 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
             !this.graphics[0].layer.editingEnabled : true;
         const tableNodeClass = this._editorLoading ? "display-none" : "position-absolute";
         const loadingClass = this._editorLoading ? "" : "display-none";
-        return (h(Host, { key: 'fbb55e4f99e4fde338fb1ca9debc6cd4eeb46787' }, h("div", { key: '10f7468920f81c1b97a2b23c8069e5b821683788', class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { key: '4badfa94e30d2a8108812c780ea6e636ca4e6e00', class: "position-absolute" }, h("div", { key: '7ce280938b7ae435fbffd358969a23577a0a8ce8', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: '13e23afb8e6d012f6abebad43b24485ac0e72805', class: loadingClass, label: "", scale: "s" })))));
+        return (h(Host, { key: '80acdd7d9b9441be28664ab60b7ad5d19c633bdd' }, h("div", { key: 'c8e41f2f7f3d5fcc4f49dd42b1f530c9e422cc8a', class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { key: '4b93fef902254d2a55e997bccdb4e16ee67c3c75', class: "position-absolute" }, h("div", { key: '1794c5c246ab90b2915a15a15077ae7d82ec567c', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: '001162f8ae947cae915de33c16a116efd7795f75', class: loadingClass, label: "", scale: "s" })))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/components/feature-comments.js

@@ -50,7 +50,7 @@ const FeatureComments$1 = /*@__PURE__*/ proxyCustomElement(class FeatureComments
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: '388f7097c0cfc5b9c6cc6649ff00e9fd0be1c6aa' }, h("slot", { key: '31a2a3694358fe14a2195da82063f3be0500b3d8' })));
+        return (h(Host, { key: '70ab7bb863463c41fa2291412f8da6d602e9a94d' }, h("slot", { key: '7266d385e0fc9341baf651a5dcab13b7ba361163' })));
     }
     get el() { return this; }
     static get style() { return FeatureCommentsStyle0; }

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: 'e42bbf7e4070b03c43aec1bf47c442b65cd35731', "full-height": true }, h("info-card", { key: 'f44099e2f8f87edbc656700e65daeb1bf934d41c', 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: 'aa65adf8d8b6a059d5e9d0e74a1896eb20c84eaf', class: "buttons-container" }, this._commentsAvailable &&
+                h("div", { key: '09dd5da4932a9a0526b413592d25469087eaf4c9', class: "comment-btn" }, h("span", { key: '48f7080ace69de3589aa4f3b199eb25e53f61110' }, this._relatedFeaturesOIDs.length), h("calcite-icon", { key: 'f524b4d66a0a6427dda6a7a93e9dc362fe7337fc', icon: "speech-bubble", scale: 's' })), this._likeFieldAvailable &&
+                h("calcite-button", { key: '278a685b13f7ae2a37cb649a0933006104fa7b9f', 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: '7010b6ef352be7c587d7ca49fe3b8411aeb163c6', 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: '526614c384fa627057a18528c1bd4aaf2b9c70d8', 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-form-flow-item.js

@@ -50,7 +50,7 @@ const FeatureFormFlowItem$1 = /*@__PURE__*/ proxyCustomElement(class FeatureForm
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: '2607999cdad5fbe75eac4366256b589eeb33fe36' }, h("slot", { key: 'a9443a71e40b37449d01f4c40ca5f21b83bf005a' })));
+        return (h(Host, { key: '32113dda304b2f7179d0275f04987e69ce386959' }, h("slot", { key: '358d5ea7a03cc7da16e98a92391cf74dfe9fa89b' })));
     }
     get el() { return this; }
     static get style() { return FeatureFormFlowItemStyle0; }

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 {
@@ -111,9 +111,9 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
      * Renders the component.
      */
     render() {
-        return (h("calcite-panel", { key: '6184d07592669fd8884996475b7eeb26e0604790', "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { key: '282127215213a28b9cfdf484aaf5730145b6bb55', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
-            h("calcite-notice", { key: '25fcfeb1d19a089b092050515c3d69401bc17dc8', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: '2ac81a338df9d0e0f43c659a24be0c9b7b95d027', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: '70453e8ded4f859076a5f00d8f04152cd78278d8', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
-            h("div", { key: 'db1003ace54cd599acefad04e94fe54248327126', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: '67764a051381b0e7ef26dbd16dc9226d7e152c20', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, ref: el => this._pagination = el, "start-item": "1", "total-items": this._featuresCount }))));
+        return (h("calcite-panel", { key: '3d7b707a73bb6c4d566515e50cf2baa155e60816', "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { key: '50294111fb6c1e52e727b03e54ca83fc498ca3b9', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
+            h("calcite-notice", { key: '8dd48fc33e2a9825a95b0d0d50424baf431fed55', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: '6ff0dc700cdf40fe6929a9777bca8ebc6325f1ed', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: '2412a7b41ab87bfee803460bdea0395ca609d55a', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
+            h("div", { key: '4216b02c264cf88472082f1c6f3cd466bd77d166', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: '2bb39768d0fbd0d863b075b0e2e6b750c5f7c2a1', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, ref: el => this._pagination = el, "start-item": "1", "total-items": this._featuresCount }))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/components/features-flow-item.js

@@ -50,7 +50,7 @@ const FeaturesFlowItem$1 = /*@__PURE__*/ proxyCustomElement(class FeaturesFlowIt
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: 'e0d4102af27d4ca25cb6257292797c2900337ec7' }, h("slot", { key: 'ea50a07d3d33ee0b67bc5a27a71bc7ea597fb008' })));
+        return (h(Host, { key: 'eb455611b9248308ef11de0f2b03cb35bbc77e5b' }, h("slot", { key: 'f9829297423e86f028c1415e6c7d27c0967b9e8e' })));
     }
     get el() { return this; }
     static get style() { return FeaturesFlowItemStyle0; }

package/dist/components/floor-filter2.js

@@ -52,7 +52,7 @@ const FloorFilter = /*@__PURE__*/ proxyCustomElement(class FloorFilter extends H
         return this._initModules();
     }
     render() {
-        return (h(Host, { key: '4b532bae1022d879f46022203a9ffa00c8e615a7' }, h("div", { key: 'd75ad603472d2f57ccd52725f1c3ed428bdd8173', ref: (el) => { this._floorFilterElement = el; } })));
+        return (h(Host, { key: '98769446b20d8a9432b571b5653abbc6613bdfe5' }, h("div", { key: '6606a2593fec1885fc02b07a168bdea43e7f864a', ref: (el) => { this._floorFilterElement = el; } })));
     }
     //--------------------------------------------------------------------------
     //