@esri/solutions-components 0.10.34 → 0.10.36

package/dist/components/crowdsource-reporter.js

@@ -8,46 +8,47 @@ import { g as getLocaleComponentStrings } from './locale.js';
 import { l as loadModules } from './loadModules.js';
 import { g as getLayerOrTable, a as getAllLayers, f as getAllTables, c as getFeatureLayerView, h as highlightFeatures, d as getMapLayerHash } from './mapViewUtils.js';
 import { q as queryFeaturesByID } from './queryUtils.js';
-import { d as defineCustomElement$M } from './action.js';
-import { d as defineCustomElement$L } from './action-menu.js';
-import { d as defineCustomElement$K } from './alert.js';
-import { d as defineCustomElement$J } from './avatar.js';
-import { d as defineCustomElement$I } from './block.js';
-import { d as defineCustomElement$H } from './button.js';
-import { d as defineCustomElement$G } from './checkbox.js';
-import { d as defineCustomElement$F } from './chip.js';
-import { d as defineCustomElement$E } from './combobox.js';
-import { d as defineCustomElement$D } from './combobox-item.js';
-import { d as defineCustomElement$C } from './date-picker.js';
-import { d as defineCustomElement$B } from './date-picker-day.js';
-import { d as defineCustomElement$A } from './date-picker-month.js';
-import { d as defineCustomElement$z } from './date-picker-month-header.js';
-import { d as defineCustomElement$y } from './filter2.js';
-import { d as defineCustomElement$x } from './flow.js';
-import { d as defineCustomElement$w } from './flow-item.js';
-import { d as defineCustomElement$v } from './graph.js';
-import { d as defineCustomElement$u } from './handle.js';
-import { d as defineCustomElement$t } from './icon.js';
-import { d as defineCustomElement$s } from './input.js';
-import { d as defineCustomElement$r } from './input-date-picker.js';
-import { d as defineCustomElement$q } from './input-text.js';
-import { d as defineCustomElement$p } from './list.js';
-import { d as defineCustomElement$o } from './list-item.js';
-import { d as defineCustomElement$n } from './loader.js';
-import { d as defineCustomElement$m } from './modal.js';
-import { d as defineCustomElement$l } from './notice.js';
-import { d as defineCustomElement$k } from './pagination.js';
-import { d as defineCustomElement$j } from './panel.js';
-import { d as defineCustomElement$i } from './popover.js';
-import { d as defineCustomElement$h } from './progress.js';
-import { d as defineCustomElement$g } from './scrim.js';
-import { d as defineCustomElement$f } from './shell.js';
-import { d as defineCustomElement$e } from './slider.js';
-import { d as defineCustomElement$d } from './stack.js';
-import { d as defineCustomElement$c } from './tooltip.js';
-import { d as defineCustomElement$b } from './create-feature2.js';
-import { d as defineCustomElement$a } from './create-related-feature2.js';
-import { d as defineCustomElement$9 } from './delete-button2.js';
+import { d as defineCustomElement$N } from './action.js';
+import { d as defineCustomElement$M } from './action-menu.js';
+import { d as defineCustomElement$L } from './alert.js';
+import { d as defineCustomElement$K } from './avatar.js';
+import { d as defineCustomElement$J } from './block.js';
+import { d as defineCustomElement$I } from './button.js';
+import { d as defineCustomElement$H } from './checkbox.js';
+import { d as defineCustomElement$G } from './chip.js';
+import { d as defineCustomElement$F } from './combobox.js';
+import { d as defineCustomElement$E } from './combobox-item.js';
+import { d as defineCustomElement$D } from './date-picker.js';
+import { d as defineCustomElement$C } from './date-picker-day.js';
+import { d as defineCustomElement$B } from './date-picker-month.js';
+import { d as defineCustomElement$A } from './date-picker-month-header.js';
+import { d as defineCustomElement$z } from './filter2.js';
+import { d as defineCustomElement$y } from './flow.js';
+import { d as defineCustomElement$x } from './flow-item.js';
+import { d as defineCustomElement$w } from './graph.js';
+import { d as defineCustomElement$v } from './handle.js';
+import { d as defineCustomElement$u } from './icon.js';
+import { d as defineCustomElement$t } from './input.js';
+import { d as defineCustomElement$s } from './input-date-picker.js';
+import { d as defineCustomElement$r } from './input-text.js';
+import { d as defineCustomElement$q } from './list.js';
+import { d as defineCustomElement$p } from './list-item.js';
+import { d as defineCustomElement$o } from './loader.js';
+import { d as defineCustomElement$n } from './modal.js';
+import { d as defineCustomElement$m } from './notice.js';
+import { d as defineCustomElement$l } from './pagination.js';
+import { d as defineCustomElement$k } from './panel.js';
+import { d as defineCustomElement$j } from './popover.js';
+import { d as defineCustomElement$i } from './progress.js';
+import { d as defineCustomElement$h } from './scrim.js';
+import { d as defineCustomElement$g } from './shell.js';
+import { d as defineCustomElement$f } from './slider.js';
+import { d as defineCustomElement$e } from './stack.js';
+import { d as defineCustomElement$d } from './tooltip.js';
+import { d as defineCustomElement$c } from './create-feature2.js';
+import { d as defineCustomElement$b } from './create-related-feature2.js';
+import { d as defineCustomElement$a } from './delete-button2.js';
+import { d as defineCustomElement$9 } from './delete-dialog2.js';
 import { d as defineCustomElement$8 } from './edit-card2.js';
 import { d as defineCustomElement$7 } from './feature-details2.js';
 import { d as defineCustomElement$6 } from './feature-list2.js';
@@ -290,7 +291,8 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
                 }
             }
         }
-        if (this._layerList) {
+        // refresh layer list when user is on layer list panel
+        if (this._flowItems[this._flowItems.length - 1] === "layer-list" && this._layerList) {
             await this._layerList.refresh();
         }
         if (this._featureList) {
@@ -307,7 +309,8 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         if (this._editableLayerIds) {
             await this._updateFeatures();
             setTimeout(() => {
-                if (this._layerList) {
+                // refresh layer list when user is on layer list panel 
+                if (this._flowItems[this._flowItems.length - 1] === "layer-list" && this._layerList) {
                     void this._layerList.refresh();
                 }
                 if (this._featureList) {
@@ -357,7 +360,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, { key: 'bb2f79258038360e5c0b894ce5a21dcdd41d0ce4' }, this._reportSubmitted && h("calcite-alert", { key: 'aa244cd93326c8817b851d2465c7b9c453117ad2', "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: '25d6d6bd01ee8dc260bce41ea6c43eafa609292e', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '06851f2f8cabebd0e953c31bdddfdeac363a4e6e', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: 'f0d73a00a8150a78c48cc09e8901ad7dcb438e90', slot: "title" }, this._translations.error), h("div", { key: '0747a85bbf4936a28dd85a9ea0e8b416f70ee7cf', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '55017090c066ad4e12023315bde39e8c7fa67091', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: 'cb63168c1fe507b7b93ac4f58d5283ad0d09b34b', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '36b551428b32c7d93f4d04639504bfe326bbc9c8', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '2e9865c5611f4960bb622f75f386a489abcbb484', slot: "title" }, this._translations.error), h("div", { key: 'ebdf339d63369e18b1c68867cdffb9bd40f52766', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: 'a08980aead377e11697e96e77aa514ed66dc9613' }, h("calcite-shell", { key: '6d96e769ece33073870f2b8f1a7ef6a44006c3f0', "content-behind": true }, this._getReporter()))));
+        return (h(Host, { key: 'c8f50d4d6004a875444a863a9e839442708f732b' }, this._reportSubmitted && h("calcite-alert", { key: '5f556d67fd9f04c6277b88c0ad0f774ec9216850', "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: '0204b9967307421fdfeafc61eca006db62f99aab', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: 'fd21dc9f77fddd3b5a1edcef8f4ac0983018fb97', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '3a33593f8c3285d38f651316ea2f4acc148606ec', slot: "title" }, this._translations.error), h("div", { key: '588890b6760a7657218282ddff9f3db94b9f73f6', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: 'b999711f77b1f5c94a84b4ca5f80d33a4d352ea2', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: 'ed7f7b1604d5dcdbf146fdbae108081742806587', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '4bbcb945e9cc232ba77b327247b37b4ca420a77c', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: 'b75dad85bd1a793232c99b7d870fc9df9ccc0303', slot: "title" }, this._translations.error), h("div", { key: 'f161f78d54beba9ecaeccedd69d8e019c88a48e4', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '43aea9a8138da6645ee420e9e2abe21a3cbe4c91' }, h("calcite-shell", { key: '5fd031aba8feed8d54e3118a7a99a5be8254c89f', "content-behind": true }, this._getReporter()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -479,6 +482,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             if (canRestoreFilter) {
                 void this._filterList.restoreFilters(this._filterUrlParams[0], this._filterInitState);
             }
+            this._filterInitState = null;
         }, 200);
     }
     /**
@@ -490,12 +494,6 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         this._filterActive = false;
         this._filterUrlParams = null;
         this._filterInitState = null;
-        if (this._featureList) {
-            await this._featureList.refresh();
-        }
-        if (this._layerList) {
-            await this._layerList.refresh();
-        }
     }
     /**
      * Check if the layers definitionExpression has been modified and update the feature list depending on the applied filters
@@ -507,11 +505,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         //set the filter active state based on the length of applied filters
         this._filterActive = this._filterList.urlParams.getAll('filter').length > 0;
         this._filterUrlParams = this._filterList.urlParams.getAll('filter');
-        this._filterInitState = await this._filterList.getFilterInitState();
         await this._featureList.refresh();
-        if (this._layerList) {
-            await this._layerList.refresh();
-        }
         this._showLoadingIndicator = false;
     }
     /**
@@ -617,15 +611,15 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * On submit report navigate to the layer list home page and refresh the layer list
      * @protected
      */
-    onReportSubmitted() {
+    async onReportSubmitted() {
+        void this.updateNonVisibleLayersOnMap(false);
+        await this.navigateToHomePage();
+        this._reportSubmitted = true;
+        this._updatedProgressBarStatus = 0.25;
         //on report submit form will be closed, so update the form state
         if (this._showFullPanel) {
             this.updatePanelState(this._sidePanelCollapsed, false);
         }
-        void this.updateNonVisibleLayersOnMap(false);
-        this._reportSubmitted = true;
-        this._updatedProgressBarStatus = 0.25;
-        void this.navigateToHomePage();
     }
     /**
      * On adding the is failed, show the error message
@@ -655,10 +649,11 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @protected
      */
     async navigateToHomePage() {
+        // set the selected features and then refresh the layer list to maintain the layer's visibility state
+        await this.setSelectedFeatures([]);
         if (this._layerList) {
-            void this._layerList.refresh();
+            await this._layerList.refresh();
         }
-        await this.setSelectedFeatures([]);
         if (this._editableLayerIds.length === 1) {
             await this._featureList.refresh();
             this._flowItems = ["feature-list"];
@@ -767,6 +762,15 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         prevLayer.definitionExpression = this._filterInitState.initDefExpressions[this._prevSelectedLayerId];
         void this._handleFilterListReset();
     }
+    /**
+     * On back from filter panel get the filter's init state
+     * @protected
+     */
+    async backFromFilterPanel() {
+        this._filterInitState = await this._filterList.getFilterInitState();
+        await this._featureList.refresh();
+        this.backFromSelectedPanel();
+    }
     /**
      * On back from selected panel navigate to the previous panel
      * @protected
@@ -891,7 +895,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     getFilterPanel() {
         const currentLayersExpressions = this.layerExpressions ? this.layerExpressions.filter((exp) => exp.id === this._selectedLayerId) : [];
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._translations?.filterLayerTitle?.replace("{{title}}", this._selectedLayerName), loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", disabled: !this._filterActive, onClick: () => { void this._filterList?.forceReset(); }, width: "full" }, this._translations.resetFilter), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromSelectedPanel.bind(this), width: "full" }, this._translations.close))), h("calcite-panel", { "full-height": true }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtnOnClick: () => undefined, comboboxOverlayPositioning: "fixed", layerExpressions: currentLayersExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, resetBtn: false, resetFiltersOnDisconnect: false, view: this.mapView, zoomBtn: false }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._translations?.filterLayerTitle?.replace("{{title}}", this._selectedLayerName), loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromFilterPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", disabled: !this._filterActive, onClick: () => { void this._filterList?.forceReset(); }, width: "full" }, this._translations.resetFilter), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromFilterPanel.bind(this), width: "full" }, this._translations.close))), h("calcite-panel", { "full-height": true }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtnOnClick: () => undefined, comboboxOverlayPositioning: "fixed", layerExpressions: currentLayersExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, resetBtn: false, resetFiltersOnDisconnect: false, view: this.mapView, zoomBtn: false }))));
     }
     /**
      * Returns the calcite-flow item for feature details
@@ -1334,7 +1338,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["crowdsource-reporter", "calcite-action", "calcite-action-menu", "calcite-alert", "calcite-avatar", "calcite-block", "calcite-button", "calcite-checkbox", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-date-picker", "calcite-date-picker-day", "calcite-date-picker-month", "calcite-date-picker-month-header", "calcite-filter", "calcite-flow", "calcite-flow-item", "calcite-graph", "calcite-handle", "calcite-icon", "calcite-input", "calcite-input-date-picker", "calcite-input-text", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-modal", "calcite-notice", "calcite-pagination", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-shell", "calcite-slider", "calcite-stack", "calcite-tooltip", "create-feature", "create-related-feature", "delete-button", "edit-card", "feature-details", "feature-list", "info-card", "instant-apps-filter-list", "instant-apps-social-share", "layer-list"];
+    const components = ["crowdsource-reporter", "calcite-action", "calcite-action-menu", "calcite-alert", "calcite-avatar", "calcite-block", "calcite-button", "calcite-checkbox", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-date-picker", "calcite-date-picker-day", "calcite-date-picker-month", "calcite-date-picker-month-header", "calcite-filter", "calcite-flow", "calcite-flow-item", "calcite-graph", "calcite-handle", "calcite-icon", "calcite-input", "calcite-input-date-picker", "calcite-input-text", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-modal", "calcite-notice", "calcite-pagination", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-shell", "calcite-slider", "calcite-stack", "calcite-tooltip", "create-feature", "create-related-feature", "delete-button", "delete-dialog", "edit-card", "feature-details", "feature-list", "info-card", "instant-apps-filter-list", "instant-apps-social-share", "layer-list"];
     components.forEach(tagName => { switch (tagName) {
         case "crowdsource-reporter":
             if (!customElements.get(tagName)) {
@@ -1343,200 +1347,205 @@ function defineCustomElement$1() {
             break;
         case "calcite-action":
             if (!customElements.get(tagName)) {
-                defineCustomElement$M();
+                defineCustomElement$N();
             }
             break;
         case "calcite-action-menu":
             if (!customElements.get(tagName)) {
-                defineCustomElement$L();
+                defineCustomElement$M();
             }
             break;
         case "calcite-alert":
             if (!customElements.get(tagName)) {
-                defineCustomElement$K();
+                defineCustomElement$L();
             }
             break;
         case "calcite-avatar":
             if (!customElements.get(tagName)) {
-                defineCustomElement$J();
+                defineCustomElement$K();
             }
             break;
         case "calcite-block":
             if (!customElements.get(tagName)) {
-                defineCustomElement$I();
+                defineCustomElement$J();
             }
             break;
         case "calcite-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$H();
+                defineCustomElement$I();
             }
             break;
         case "calcite-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$G();
+                defineCustomElement$H();
             }
             break;
         case "calcite-chip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$F();
+                defineCustomElement$G();
             }
             break;
         case "calcite-combobox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$E();
+                defineCustomElement$F();
             }
             break;
         case "calcite-combobox-item":
             if (!customElements.get(tagName)) {
-                defineCustomElement$D();
+                defineCustomElement$E();
             }
             break;
         case "calcite-date-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$C();
+                defineCustomElement$D();
             }
             break;
         case "calcite-date-picker-day":
             if (!customElements.get(tagName)) {
-                defineCustomElement$B();
+                defineCustomElement$C();
             }
             break;
         case "calcite-date-picker-month":
             if (!customElements.get(tagName)) {
-                defineCustomElement$A();
+                defineCustomElement$B();
             }
             break;
         case "calcite-date-picker-month-header":
             if (!customElements.get(tagName)) {
-                defineCustomElement$z();
+                defineCustomElement$A();
             }
             break;
         case "calcite-filter":
             if (!customElements.get(tagName)) {
-                defineCustomElement$y();
+                defineCustomElement$z();
             }
             break;
         case "calcite-flow":
             if (!customElements.get(tagName)) {
-                defineCustomElement$x();
+                defineCustomElement$y();
             }
             break;
         case "calcite-flow-item":
             if (!customElements.get(tagName)) {
-                defineCustomElement$w();
+                defineCustomElement$x();
             }
             break;
         case "calcite-graph":
             if (!customElements.get(tagName)) {
-                defineCustomElement$v();
+                defineCustomElement$w();
             }
             break;
         case "calcite-handle":
             if (!customElements.get(tagName)) {
-                defineCustomElement$u();
+                defineCustomElement$v();
             }
             break;
         case "calcite-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$u();
             }
             break;
         case "calcite-input":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$t();
             }
             break;
         case "calcite-input-date-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$s();
             }
             break;
         case "calcite-input-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$r();
             }
             break;
         case "calcite-list":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$q();
             }
             break;
         case "calcite-list-item":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$p();
             }
             break;
         case "calcite-loader":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$o();
             }
             break;
         case "calcite-modal":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$n();
             }
             break;
         case "calcite-notice":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$m();
             }
             break;
         case "calcite-pagination":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$l();
             }
             break;
         case "calcite-panel":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$k();
             }
             break;
         case "calcite-popover":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$j();
             }
             break;
         case "calcite-progress":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$i();
             }
             break;
         case "calcite-scrim":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$h();
             }
             break;
         case "calcite-shell":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$g();
             }
             break;
         case "calcite-slider":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$f();
             }
             break;
         case "calcite-stack":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$e();
             }
             break;
         case "calcite-tooltip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$d();
             }
             break;
         case "create-feature":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$c();
             }
             break;
         case "create-related-feature":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "delete-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "delete-dialog":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }

package/dist/components/delete-button2.js

@@ -5,13 +5,14 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getLocaleComponentStrings } from './locale.js';
-import { d as defineCustomElement$7 } from './action.js';
-import { d as defineCustomElement$6 } from './button.js';
-import { d as defineCustomElement$5 } from './icon.js';
-import { d as defineCustomElement$4 } from './loader.js';
-import { d as defineCustomElement$3 } from './modal.js';
-import { d as defineCustomElement$2 } from './scrim.js';
-import { d as defineCustomElement$1 } from './tooltip.js';
+import { d as defineCustomElement$8 } from './action.js';
+import { d as defineCustomElement$7 } from './button.js';
+import { d as defineCustomElement$6 } from './icon.js';
+import { d as defineCustomElement$5 } from './loader.js';
+import { d as defineCustomElement$4 } from './modal.js';
+import { d as defineCustomElement$3 } from './scrim.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
+import { d as defineCustomElement$1 } from './delete-dialog2.js';
 
 const deleteButtonCss = ":host{display:block}.delete-modal{position:fixed}";
 const DeleteButtonStyle0 = deleteButtonCss;
@@ -22,6 +23,7 @@ const DeleteButton = /*@__PURE__*/ proxyCustomElement(class DeleteButton extends
         this.__registerHost();
         this.__attachShadow();
         this.editsComplete = createEvent(this, "editsComplete", 7);
+        this.deleteDialog = undefined;
         this.buttonType = "button";
         this.disabled = false;
         this.icon = undefined;
@@ -29,7 +31,6 @@ const DeleteButton = /*@__PURE__*/ proxyCustomElement(class DeleteButton extends
         this.layer = undefined;
         this._confirmDelete = false;
         this._deleteEndabled = false;
-        this._isDeleting = false;
         this._supportsDelete = undefined;
         this._translations = undefined;
     }
@@ -87,7 +88,7 @@ const DeleteButton = /*@__PURE__*/ proxyCustomElement(class DeleteButton extends
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '23936d6981c9779f5a21951c6667e3cba86e5d82' }, 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(), h("calcite-tooltip", { key: '0078ca79ef0a2195be88d0b508fefc9838af9693', placement: "bottom", "reference-element": this.buttonType === "button" ? "solutions-delete" : this.icon }, h("span", { key: '6a2f3c55237c2cb07f17559c9f14edd4b442e004' }, this._translations.delete))));
+        return (h(Host, { key: '4ced17b35479900aaa01ebbd298eeae57194e358' }, 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(), h("calcite-tooltip", { key: '04f82e726cf9142c403ee43cb8151027bb7b617f', placement: "bottom", "reference-element": this.buttonType === "button" ? "solutions-delete" : this.icon }, h("span", { key: 'f7852b2476dae4b18e82495c64a819b3db98696d' }, this._translations.delete))));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -121,30 +122,7 @@ const DeleteButton = /*@__PURE__*/ proxyCustomElement(class DeleteButton extends
      * @returns node to confirm or deny the delete operation
      */
     _deleteMessage() {
-        const confirmMessage = this.ids.length === 1 ? this._translations.confirmSingle :
-            this._translations.confirmMultiple;
-        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
-     */
-    async _deleteFeatures() {
-        this._isDeleting = true;
-        const deleteFeatures = this.ids.map((objectId) => {
-            return { objectId };
-        });
-        await this.layer.applyEdits({
-            deleteFeatures
-        });
-        this._isDeleting = false;
-        this._deleteClosed();
-        this.editsComplete.emit("delete");
-    }
-    /**
-     * Set the alertOpen member to false when the alert is closed
-     */
-    _deleteClosed() {
-        this._confirmDelete = false;
+        return this.deleteDialog ? this.deleteDialog : (h("delete-dialog", { id: "solution-delete-dialog", ids: this.ids, layer: this.layer, onDeleteDialogClose: () => this._confirmDelete = false, open: this._confirmDelete }));
     }
     /**
      * Fetches the component's translations
@@ -162,6 +140,7 @@ const DeleteButton = /*@__PURE__*/ proxyCustomElement(class DeleteButton extends
     }; }
     static get style() { return DeleteButtonStyle0; }
 }, [1, "delete-button", {
+        "deleteDialog": [8, "delete-dialog"],
         "buttonType": [1, "button-type"],
         "disabled": [4],
         "icon": [1],
@@ -169,7 +148,6 @@ const DeleteButton = /*@__PURE__*/ proxyCustomElement(class DeleteButton extends
         "layer": [16],
         "_confirmDelete": [32],
         "_deleteEndabled": [32],
-        "_isDeleting": [32],
         "_supportsDelete": [32],
         "_translations": [32]
     }, undefined, {
@@ -180,7 +158,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["delete-button", "calcite-action", "calcite-button", "calcite-icon", "calcite-loader", "calcite-modal", "calcite-scrim", "calcite-tooltip"];
+    const components = ["delete-button", "calcite-action", "calcite-button", "calcite-icon", "calcite-loader", "calcite-modal", "calcite-scrim", "calcite-tooltip", "delete-dialog"];
     components.forEach(tagName => { switch (tagName) {
         case "delete-button":
             if (!customElements.get(tagName)) {
@@ -189,35 +167,40 @@ function defineCustomElement() {
             break;
         case "calcite-action":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "calcite-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "calcite-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "calcite-loader":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "calcite-modal":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "calcite-scrim":
             if (!customElements.get(tagName)) {
-                defineCustomElement$2();
+                defineCustomElement$3();
             }
             break;
         case "calcite-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "delete-dialog":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

package/dist/components/delete-dialog.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DeleteDialog extends Components.DeleteDialog, HTMLElement {}
+export const DeleteDialog: {
+    prototype: DeleteDialog;
+    new (): DeleteDialog;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;