@esri/solutions-components 1.0.0-next.20250513.1 → 1.0.0-next.20250521

package/dist/components/crowdsource-reporter/customElement.d.ts

@@ -28,6 +28,12 @@ export declare class CrowdsourceReporter extends LitElement {
      * @default ''
      */
     commentSubmittedMessage: string;
+    /**
+     * string: User configurable message if feature is drawn outside polygon boundary
+     *
+     * @default ''
+     */
+    reportOutsideAreaMessage: string;
     /**
      * string: Item ID of the web map that should be selected by default
      *
@@ -183,7 +189,7 @@ export declare class CrowdsourceReporter extends LitElement {
      */
     submitNewReportsMessage: string;
     /**
-     * theme: "light" | "dark" theme to be used
+     * theme: light | dark theme to be used
      *
      * @default 'light'
      */
@@ -214,6 +220,12 @@ export declare class CrowdsourceReporter extends LitElement {
      * @default 'newest'
      */
     sortOption: string;
+    /**
+     * string: Reporting polyon layer for creating feature
+     *
+     * @default ''
+     */
+    reportingAreaLayer: string;
     /** Method to update layerExpressions with the translated values */
     updateLayerExpressionsT9n(t9nLayerExpressions: ILayerExpression[]): Promise<void>;
     /** Emitted when toggle panel button is clicked in reporter */

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

@@ -1,18 +1,18 @@
-import { c as m } from "../../chunks/runtime.js";
-import { l as _ } from "../../chunks/loadModules.js";
-import { d, j as c, i as g, g as p, c as w, e as y } from "../../chunks/mapViewUtils.js";
-import { d as b } from "../../chunks/queryUtils.js";
-import { u as L } from "../../chunks/useT9n.js";
-import { html as a, nothing as u } from "lit";
-import { createRef as h, ref as o } from "lit-html/directives/ref.js";
-import { LitElement as F, createEvent as v, noShadowRoot as I, safeClassMap as f } from "@arcgis/lumina";
-import { css as $ } from "@lit/reactive-element/css-tag.js";
+import { c as g } from "../../chunks/runtime.js";
+import { l as w } from "../../chunks/loadModules.js";
+import { d, j as p, i as y, g as u, c as b, e as L } from "../../chunks/mapViewUtils.js";
+import { d as F } from "../../chunks/queryUtils.js";
+import { u as v } from "../../chunks/useT9n.js";
+import { html as l, nothing as f } from "lit";
+import { createRef as h, ref as n } from "lit-html/directives/ref.js";
+import { LitElement as I, createEvent as $, noShadowRoot as C, safeClassMap as m } from "@arcgis/lumina";
+import { css as x } from "@lit/reactive-element/css-tag.js";
 import "@arcgis/instant-apps-components";
-import { defineCustomElements as C } from "@arcgis/instant-apps-components/loader";
+import { defineCustomElements as S } from "@arcgis/instant-apps-components/loader";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.0/esri/copyright.txt for details.
-v1.0.0-next.20250513.1 */
-const S = $`@layer{/** @license
+v1.0.0-next.20250521 */
+const E = x`@layer{/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -27,18 +27,18 @@ const S = $`@layer{/** @license
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */:host{display:block;--calcite-label-margin-bottom: 0px;--solutions-theme-foreground-color: var(--calcite-color-foreground-1)}.width-full{width:100%!important}.width-0{width:0}.height-full{height:100%!important}.height-0{height:0}.overflow-hidden{overflow:hidden}.border{border:1px solid var(--calcite-color-border-3)}.notice-msg{padding:10px;width:calc(100% - 20px)}.progress-bar{padding:12px}.footer-top-button{padding-bottom:7px}.footer-button{height:35px}.feature-pagination{background-color:var(--calcite-color-foreground-1)!important;border-block-end:1px solid var(--calcite-color-border-3);display:flex;justify-content:center;padding:5px 0}.pagination-count{color:var(--calcite-color-brand);border-bottom:1px solid var(--calcite-color-brand);font-weight:700}.report-submitted-msg{position:absolute;z-index:1000}.share-node{display:flex}}`;
-class x extends F {
+class V extends I {
   constructor() {
-    super(), this.center = "", this.commentButtonText = "", this.commentSubmittedMessage = "", this.defaultWebmap = "", this.description = "", this.enableAnonymousAccess = !1, this.enableAnonymousComments = !1, this.enableComments = !1, this.enableHome = !0, this.enableLogin = !1, this.enableNewReports = !1, this.enableSearch = !0, this.enableSnapping = !1, this.enableZoom = !0, this.isMobile = !1, this.layerExpressions = [], this.layerId = "", this.level = "", this.loginTitle = "", this.mapInfos = [], this.objectId = "", this.reportButtonText = "", this.reportsHeader = "", this.reportSubmittedMessage = "", this.showComments = !1, this.showUserImageInCommentsList = !1, this.showFeatureSymbol = !1, this.showMyReportsOnly = !1, this.submitNewReportsMessage = "", this.theme = "light", this.floorLevel = "", this.showFullCommentTitle = !0, this.filterByMapExtent = !1, this.sortOption = "newest", this._featureCreationFailedErrorMsg = "", this._filterActive = !1, this._flowItems = [], this._hasValidLayers = !1, this._reportSubmitted = !1, this._selectedLayerName = "", this._showSubmitCancelButton = !1, this._showLoadingIndicator = !1, this._sidePanelCollapsed = !1, this._translations = L({ name: "crowdsource-reporter", blocking: !0 }), this._updatedProgressBarStatus = 25, this._updatedSortOption = "newest", this._commentSubmitted = !1, this._addingCommentFailed = !1, this._filterOpen = !1, this._createFeature = h(), this._currentFeatureId = "", this._editableLayerIds = [], this._featureDetails = h(), this._featureList = h(), this._selectedRelatedFeature = [], this._filterList = h(), this._layerList = h(), this._createRelatedFeature = h(), this._layers = [], this._selectedFeature = [], this._selectedFeatureIndex = 0, this._selectedLayerId = "", this._shareNode = h(), this._urlParamsLoaded = !1, this._validLayers = [], this._nonVisibleValidLayers = [], this._showFullPanel = !1, this._floorExpression = "", this._formElements = [], this._prevSelectedLayerId = "", this._t9nLayerExpressions = [], this.togglePanel = v(), C(window);
+    super(), this.center = "", this.commentButtonText = "", this.commentSubmittedMessage = "", this.reportOutsideAreaMessage = "", this.defaultWebmap = "", this.description = "", this.enableAnonymousAccess = !1, this.enableAnonymousComments = !1, this.enableComments = !1, this.enableHome = !0, this.enableLogin = !1, this.enableNewReports = !1, this.enableSearch = !0, this.enableSnapping = !1, this.enableZoom = !0, this.isMobile = !1, this.layerExpressions = [], this.layerId = "", this.level = "", this.loginTitle = "", this.mapInfos = [], this.objectId = "", this.reportButtonText = "", this.reportsHeader = "", this.reportSubmittedMessage = "", this.showComments = !1, this.showUserImageInCommentsList = !1, this.showFeatureSymbol = !1, this.showMyReportsOnly = !1, this.submitNewReportsMessage = "", this.theme = "light", this.floorLevel = "", this.showFullCommentTitle = !0, this.filterByMapExtent = !1, this.sortOption = "newest", this.reportingAreaLayer = "", this._featureCreationFailedErrorMsg = "", this._filterActive = !1, this._flowItems = [], this._hasValidLayers = !1, this._reportSubmitted = !1, this._selectedLayerName = "", this._showSubmitCancelButton = !1, this._showLoadingIndicator = !1, this._sidePanelCollapsed = !1, this._translations = v({ name: "crowdsource-reporter", blocking: !0 }), this._updatedProgressBarStatus = 25, this._updatedSortOption = "newest", this._commentSubmitted = !1, this._addingCommentFailed = !1, this._filterOpen = !1, this._showNextButton = !1, this._submitNextButtonDisabled = !1, this._createFeature = h(), this._currentFeatureId = "", this._editableLayerIds = [], this._featureDetails = h(), this._featureList = h(), this._selectedRelatedFeature = [], this._filterList = h(), this._layerList = h(), this._createRelatedFeature = h(), this._layers = [], this._mapImageryLayersId = [], this._selectedFeature = [], this._selectedFeatureIndex = 0, this._selectedLayerId = "", this._shareNode = h(), this._urlParamsLoaded = !1, this._validLayers = [], this._nonVisibleValidLayers = [], this._showFullPanel = !1, this._floorExpression = "", this._formElements = [], this._prevSelectedLayerId = "", this._t9nLayerExpressions = [], this._reportSubmittedAlert = h(), this.togglePanel = $(), S(window);
   }
   static {
-    this.properties = { center: 1, commentButtonText: 1, commentSubmittedMessage: 1, defaultWebmap: 1, description: 1, enableAnonymousAccess: 5, enableAnonymousComments: 5, enableComments: 5, enableHome: 5, enableLogin: 5, enableNewReports: 5, enableSearch: 5, enableSnapping: 5, enableZoom: 5, isMobile: 5, layerExpressions: 0, layerId: 1, level: 1, loginTitle: 1, mapInfos: 0, mapView: 0, objectId: 1, reportButtonText: 1, reportingOptions: 0, reportsHeader: 1, reportSubmittedMessage: 1, searchConfiguration: 0, showComments: 5, showUserImageInCommentsList: 5, showFeatureSymbol: 5, showMyReportsOnly: 5, submitNewReportsMessage: 1, theme: 1, zoomToScale: 9, floorLevel: 1, showFullCommentTitle: 5, filterByMapExtent: 5, sortOption: 1, _featureCreationFailedErrorMsg: 16, _filterActive: 16, _flowItems: 16, _hasValidLayers: 16, _mapInfo: 16, _reportSubmitted: 16, _selectedLayerName: 16, _showSubmitCancelButton: 16, _showLoadingIndicator: 16, _sidePanelCollapsed: 16, _translations: 16, _updatedProgressBarStatus: 16, _updatedSorting: 16, _updatedSortOption: 16, _commentSubmitted: 16, _addingCommentFailed: 16, _filterOpen: 16 };
+    this.properties = { center: 1, commentButtonText: 1, commentSubmittedMessage: 1, reportOutsideAreaMessage: 1, defaultWebmap: 1, description: 1, enableAnonymousAccess: 5, enableAnonymousComments: 5, enableComments: 5, enableHome: 5, enableLogin: 5, enableNewReports: 5, enableSearch: 5, enableSnapping: 5, enableZoom: 5, isMobile: 5, layerExpressions: 0, layerId: 1, level: 1, loginTitle: 1, mapInfos: 0, mapView: 0, objectId: 1, reportButtonText: 1, reportingOptions: 0, reportsHeader: 1, reportSubmittedMessage: 1, searchConfiguration: 0, showComments: 5, showUserImageInCommentsList: 5, showFeatureSymbol: 5, showMyReportsOnly: 5, submitNewReportsMessage: 1, theme: 1, zoomToScale: 9, floorLevel: 1, showFullCommentTitle: 5, filterByMapExtent: 5, sortOption: 1, reportingAreaLayer: 1, _featureCreationFailedErrorMsg: 16, _filterActive: 16, _flowItems: 16, _hasValidLayers: 16, _mapInfo: 16, _reportSubmitted: 16, _selectedLayerName: 16, _showSubmitCancelButton: 16, _showLoadingIndicator: 16, _sidePanelCollapsed: 16, _translations: 16, _updatedProgressBarStatus: 16, _updatedSorting: 16, _updatedSortOption: 16, _commentSubmitted: 16, _addingCommentFailed: 16, _filterOpen: 16, _showNextButton: 16, _submitNextButtonDisabled: 16 };
   }
   static {
-    this.styles = S;
+    this.styles = E;
   }
   static {
-    this.shadowRootOptions = I;
+    this.shadowRootOptions = C;
   }
   willUpdate(e) {
     e.has("isMobile") && this.isMobileWatchHandler(this.isMobile), e.has("mapView") && this.mapViewWatchHandler(), e.has("floorLevel") && this.floorLevelWatchHandler(), e.has("showMyReportsOnly") && (this.hasUpdated || this.showMyReportsOnly !== !1) && this.showMyReportsOnlyWatchHandler(), e.has("sortOption") && (this.hasUpdated || this.sortOption !== "newest") && this.sortOptionWatchHandler(), e.has("filterByMapExtent") && (this.hasUpdated || this.filterByMapExtent !== !1) && this.filterByMapExtentChangeWatchHandler(), e.has("layerExpressions") && (this.hasUpdated || this.layerExpressions?.length > 0) && this.layerExpressionsWatchHandler(), e.has("showFeatureSymbol") && (this.hasUpdated || this.showFeatureSymbol !== !1) && this.showFeatureSymbolWatchHandler(), (this._flowItems.includes("filter-panel") || this._filterOpen) && this._filterList.value?.updateInitDefExpressions({ initDefExpressions: this._initDefExpressions });
@@ -93,26 +93,31 @@ class x extends F {
   }
   render() {
     const e = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-    return a`${this._reportSubmitted && a`<calcite-alert auto-close class=${`${e} report-submitted-msg`} icon=check-circle kind=success label @calciteAlertClose=${() => {
+    return l`${this._reportSubmitted && l`<calcite-alert auto-close class=${`${e} report-submitted-msg`} icon=check-circle kind=success label @calciteAlertClose=${() => {
       this._reportSubmitted = !1;
-    }} open placement=top><div slot=message>${this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg}</div></calcite-alert>` || ""}${this._featureCreationFailedErrorMsg && a`<calcite-alert auto-close class=${f(e)} icon=x-octagon kind=danger label @calciteAlertClose=${() => {
+    }} open placement=top><div slot=message .innerHTML=${(this.reportSubmittedMessage || this._translations.submitMsg) ?? ""} ${n(this._reportSubmittedAlert)}></div></calcite-alert>` || ""}${this._featureCreationFailedErrorMsg && l`<calcite-alert auto-close class=${m(e)} icon=x-octagon kind=danger label @calciteAlertClose=${() => {
       this._featureCreationFailedErrorMsg = "";
-    }} open placement=top><div slot=title>${this._translations.error}</div><div slot=message>${this._featureCreationFailedErrorMsg}</div></calcite-alert>` || ""}${this._commentSubmitted && a`<calcite-alert auto-close class=${`report-submitted ${e}`} icon=check-circle kind=success label @calciteAlertClose=${() => {
+    }} open placement=top><div slot=title>${this._translations.error}</div><div slot=message>${this._featureCreationFailedErrorMsg}</div></calcite-alert>` || ""}${this._commentSubmitted && l`<calcite-alert auto-close class=${`report-submitted ${e}`} icon=check-circle kind=success label @calciteAlertClose=${() => {
       this._commentSubmitted = !1;
-    }} open placement=top><div slot=message>${this.commentSubmittedMessage || this._translations.commentSubmittedMsg}</div></calcite-alert>` || ""}${this._addingCommentFailed && a`<calcite-alert auto-close class=${f(e)} icon=x-octagon kind=danger label @calciteAlertClose=${() => {
+    }} open placement=top><div slot=message>${this.commentSubmittedMessage || this._translations.commentSubmittedMsg}</div></calcite-alert>` || ""}${this._addingCommentFailed && l`<calcite-alert auto-close class=${m(e)} icon=x-octagon kind=danger label @calciteAlertClose=${() => {
       this._addingCommentFailed = !1;
     }} open placement=top><div slot=title>${this._translations.error}</div><div slot=message>${this._translations.addingCommentFailedMsg}</div></calcite-alert>` || ""}<div><calcite-shell content-behind>${this._getReporter()}</calcite-shell></div>${this.isMobile && this.filterModal() || ""}`;
   }
+  updated() {
+    this.reportSubmittedMessage && this._reportSubmittedAlert.value?.children[0] && (this._reportSubmittedAlert.value.children[0].style.margin = "0px");
+  }
   async _initModules() {
-    const [e, t] = await _([
+    const [e, t, i, s] = await w([
       "esri/core/reactiveUtils",
-      "esri/layers/support/FeatureFilter"
+      "esri/layers/support/FeatureFilter",
+      "esri/rest/identify",
+      "esri/rest/support/IdentifyParameters"
     ]);
-    this.reactiveUtils = e, this.FeatureFilter = t;
+    this.reactiveUtils = e, this.FeatureFilter = t, this.identify = i, this.IdentifyParameters = s;
   }
   async setSelectedLayer(e, t) {
     this._selectedLayerId = e, this._selectedLayer = this.mapView && await d(this.mapView, e), this._selectedLayerName = t, this._validLayers.forEach((i) => {
-      this._nonVisibleValidLayers.find((r) => r.id === i.id) || i.set("visible", !e || i.id === e);
+      this._nonVisibleValidLayers.find((a) => a.id === i.id) || i.set("visible", !e || i.id === e);
     });
   }
   _getLayersConfig(e) {
@@ -149,14 +154,14 @@ class x extends F {
       }
     });
     const t = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-    return a`<calcite-panel class=${`width-full ${t}`}>${this.mapView ? a`<calcite-flow>${e?.length > 0 && e || ""}</calcite-flow>` : a`<calcite-loader label scale=m></calcite-loader>`}</calcite-panel>`;
+    return l`<calcite-panel class=${`width-full ${t}`}>${this.mapView ? l`<calcite-flow>${e?.length > 0 && e || ""}</calcite-flow>` : l`<calcite-loader label scale=m></calcite-loader>`}</calcite-panel>`;
   }
   filterModal() {
-    return (this.layerExpressions ? this.layerExpressions.filter((t) => t.id === this._selectedLayerId) : []).length > 0 && a`<calcite-modal aria-labelledby=modal-title class="modal" kind=brand @calciteModalClose=${() => void this._closeFilter()} .open=${this._filterOpen} width-scale=s><div class="display-flex align-center" id=modal-title slot=header>${this._translations.filterLayerTitle.replace("{{title}}", this._selectedLayerName)}</div><div slot=content>${this.mapView && a`<instant-apps-filter-list close-btn .closeBtnOnClick=${() => void this._closeFilter()} combobox-overlay-positioning=fixed .layerExpressions=${this._currentLayerExpressions} @filterListReset=${() => {
+    return (this.layerExpressions ? this.layerExpressions.filter((t) => t.id === this._selectedLayerId) : []).length > 0 && l`<calcite-modal aria-labelledby=modal-title class="modal" kind=brand @calciteModalClose=${() => void this._closeFilter()} .open=${this._filterOpen} width-scale=s><div class="display-flex align-center" id=modal-title slot=header>${this._translations.filterLayerTitle.replace("{{title}}", this._selectedLayerName)}</div><div slot=content>${this.mapView && l`<instant-apps-filter-list close-btn .closeBtnOnClick=${() => void this._closeFilter()} combobox-overlay-positioning=fixed .layerExpressions=${this._currentLayerExpressions} @filterListReset=${() => {
       this._filterActive = !1, this._featureList.value && this._featureList.value.refresh();
     }} @filterUpdate=${() => {
       this._filterList.value?.filterCount !== void 0 && this._handleFilterUpdate(this._filterList.value?.filterCount > 0);
-    }} reset-btn .view=${this.mapView} ${o(this._filterList)}></instant-apps-filter-list>` || ""}</div></calcite-modal>` || "";
+    }} reset-btn .view=${this.mapView} ${n(this._filterList)}></instant-apps-filter-list>` || ""}</div></calcite-modal>` || "";
   }
   _toggleFilter() {
     this._filterOpen = !this._filterOpen;
@@ -172,11 +177,11 @@ class x extends F {
   }
   _toggleSort() {
     const e = this.reportingOptions && this.reportingOptions[this._selectedLayerId] && this.reportingOptions[this._selectedLayerId].like && this.reportingOptions[this._selectedLayerId].likeField;
-    return a`<calcite-popover auto-close label offset-distance=0 .placement=${this.isMobile ? "leading-start" : "bottom-start"} pointer-disabled reference-element=sort-popover><calcite-list label selection-mode=single-persist><calcite-list-item .label=${this._translations.sortNewest} @calciteListItemSelect=${() => {
+    return l`<calcite-popover auto-close label offset-distance=0 .placement=${this.isMobile ? "leading-start" : "bottom-start"} pointer-disabled reference-element=sort-popover><calcite-list label selection-mode=single-persist><calcite-list-item .label=${this._translations.sortNewest} @calciteListItemSelect=${() => {
       this._selectedLayer && this.sortOptionClick(this._selectedLayer.objectIdField, "desc", "newest");
     }} .selected=${this._updatedSortOption === "newest"} value=newest></calcite-list-item><calcite-list-item .label=${this._translations.sortOldest} @calciteListItemSelect=${() => {
       this._selectedLayer && this.sortOptionClick(this._selectedLayer.objectIdField, "asc", "oldest");
-    }} .selected=${this._updatedSortOption === "oldest"} value=oldest></calcite-list-item>${e && a`<calcite-list-item .label=${this._translations.sortHighestVoted} @calciteListItemSelect=${() => {
+    }} .selected=${this._updatedSortOption === "oldest"} value=oldest></calcite-list-item>${e && l`<calcite-list-item .label=${this._translations.sortHighestVoted} @calciteListItemSelect=${() => {
       const t = this.reportingOptions && this.reportingOptions[this._selectedLayerId].likeField;
       t !== void 0 && this.sortOptionClick(t, "desc", "highestVoted");
     }} .selected=${this._updatedSortOption === "highestVoted"} value=highestVoted></calcite-list-item><calcite-list-item .label=${this._translations.sortLowestVoted} @calciteListItemSelect=${() => {
@@ -191,29 +196,35 @@ class x extends F {
     this._showLoadingIndicator = !0, this._filterActive = e, this._featureList.value && await this._featureList.value.refresh(), this._showLoadingIndicator = !1;
   }
   getLayerListFlowItem() {
-    return a`<calcite-flow-item .collapsed=${this.isMobile && this._sidePanelCollapsed} .heading=${this.reportsHeader} .selected=${this._flowItems[this._flowItems.length - 1] === "layer-list"}>${this.isMobile && this.getActionToExpandCollapsePanel() || ""}${this._hasValidLayers && this.enableNewReports && a`<calcite-button appearance=solid @click=${this.navigateToChooseCategory} slot=footer width=full>${this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText}</calcite-button>` || ""}<calcite-panel><layer-list .applyLayerViewFilter=${this.showMyReportsOnly} class="height-full" .filterByMapExtent=${this.filterByMapExtent} .layers=${this._editableLayerIds?.length > 0 ? this._editableLayerIds : this._layers} .mapView=${this.mapView} @layerSelect=${this.displayFeaturesList} @layersListLoaded=${this.layerListLoaded} show-feature-count show-next-icon ${o(this._layerList)}></layer-list></calcite-panel></calcite-flow-item>`;
+    return l`<calcite-flow-item .collapsed=${this.isMobile && this._sidePanelCollapsed} .heading=${this.reportsHeader} .selected=${this._flowItems[this._flowItems.length - 1] === "layer-list"}>${this.isMobile && this.getActionToExpandCollapsePanel() || ""}${this._hasValidLayers && this.enableNewReports && l`<calcite-button appearance=solid @click=${this.navigateToChooseCategory} slot=footer width=full>${this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText}</calcite-button>` || ""}<calcite-panel><layer-list .applyLayerViewFilter=${this.showMyReportsOnly} class="height-full" .filterByMapExtent=${this.filterByMapExtent} .layers=${this._editableLayerIds?.length > 0 ? this._editableLayerIds : this._layers} .mapView=${this.mapView} @layerSelect=${this.displayFeaturesList} @layersListLoaded=${this.layerListLoaded} show-feature-count show-next-icon ${n(this._layerList)}></layer-list></calcite-panel></calcite-flow-item>`;
   }
   getChooseCategoryFlowItem() {
     const e = this.reportingOptions ? Object.keys(this.reportingOptions).filter((t) => this.reportingOptions && this.reportingOptions[t].visible && this.reportingOptions[t].reporting && this._layerItemsHash && this._layerItemsHash[t] && this._layerItemsHash[t].supportsAdd) : [];
-    return a`<calcite-flow-item .collapsed=${this.isMobile && this._sidePanelCollapsed} .heading=${this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText} @calciteFlowItemBack=${this.backFromSelectedPanel} .selected=${this._flowItems[this._flowItems.length - 1] === "reporting-layer-list"}><calcite-panel><div class="progress-bar"><calcite-progress type=determinate .value=${this._updatedProgressBarStatus}></calcite-progress></div><calcite-notice class="notice-msg" icon=lightbulb kind=success open><div slot=message>${this._translations.chooseCategoryMsg}</div></calcite-notice><layer-list class="height-full" .layers=${e} .mapView=${this.mapView} @layerSelect=${this.navigateToCreateFeature}></layer-list></calcite-panel></calcite-flow-item>`;
+    return l`<calcite-flow-item .collapsed=${this.isMobile && this._sidePanelCollapsed} .heading=${this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText} @calciteFlowItemBack=${this.backFromSelectedPanel} .selected=${this._flowItems[this._flowItems.length - 1] === "reporting-layer-list"}><calcite-panel><div class="progress-bar"><calcite-progress type=determinate .value=${this._updatedProgressBarStatus}></calcite-progress></div><calcite-notice class="notice-msg" icon=lightbulb kind=success open><div slot=message>${this._translations.chooseCategoryMsg}</div></calcite-notice><layer-list class="height-full" .layers=${e} .mapView=${this.mapView} @layerSelect=${this.navigateToCreateFeature}></layer-list></calcite-panel></calcite-flow-item>`;
   }
   getFeatureCreateFlowItem() {
-    return a`<calcite-flow-item .collapsed=${this.isMobile && this._sidePanelCollapsed} .heading=${this._selectedLayerName} @calciteFlowItemBack=${this.backFromCreateFeaturePanel} .selected=${this._flowItems[this._flowItems.length - 1] === "feature-create"}>${this._showSubmitCancelButton && a`<div class=width-full slot=footer><calcite-button appearance=solid class="footer-top-button footer-button" @click=${this.onCreateFeatureSubmitButtonClick} width=full>${this._translations.submit}</calcite-button><calcite-button appearance=outline class=footer-button @click=${this.backFromCreateFeaturePanel} width=full>${this._translations.cancel}</calcite-button></div>` || ""}<calcite-panel><div class="progress-bar"><calcite-progress type=determinate .value=${this._updatedProgressBarStatus}></calcite-progress></div><create-feature customize-submit enable-search .enableSnapping=${this.enableSnapping} .floorLevel=${this.floorLevel} .formElements=${this._formElements.find((e) => e.id === this._selectedLayerId)} .isMobile=${this.isMobile} .mapView=${this.mapView} @drawComplete=${this.onFormReady} @editingAttachment=${this.showSubmitCancelButton} @fail=${this.createFeatureFailed} @modeChanged=${this.backFromCreateFeaturePanel} @progressStatus=${this.updatedProgressStatus} @success=${this.onReportSubmitted} .searchConfiguration=${this.searchConfiguration} .selectedLayerId=${this._selectedLayerId} .submitNewReportsMessage=${this.submitNewReportsMessage} ${o(this._createFeature)}></create-feature></calcite-panel></calcite-flow-item>`;
+    return l`<calcite-flow-item .collapsed=${this.isMobile && this._sidePanelCollapsed} .heading=${this._selectedLayerName} @calciteFlowItemBack=${this.backFromCreateFeaturePanel} .selected=${this._flowItems[this._flowItems.length - 1] === "feature-create"}>${this._showSubmitCancelButton && l`<div class=width-full slot=footer><calcite-button appearance=solid class="footer-top-button footer-button" .disabled=${this._submitNextButtonDisabled} @click=${this._showNextButton ? this.onNextButtonClick.bind(this) : this.onCreateFeatureSubmitButtonClick.bind(this)} width=full>${this._showNextButton ? this._translations.next : this._translations.submit}</calcite-button><calcite-button appearance=outline class=footer-button @click=${this.backFromCreateFeaturePanel} width=full>${this._translations.cancel}</calcite-button></div>` || ""}<calcite-panel><div class="progress-bar"><calcite-progress type=determinate .value=${this._updatedProgressBarStatus}></calcite-progress></div><create-feature customize-submit enable-search .enableSnapping=${this.enableSnapping} .floorLevel=${this.floorLevel} .formElements=${this._formElements.find((e) => e.id === this._selectedLayerId)} .reportingAreaLayer=${this.reportingAreaLayer} .isMobile=${this.isMobile} .mapView=${this.mapView} @drawComplete=${this.onFormReady} @editingLocation=${this.editingLocation} @editingAttachment=${this.showSubmitCancelButton} @fail=${this.createFeatureFailed} @modeChanged=${this.backFromCreateFeaturePanel} @progressStatus=${this.updatedProgressStatus} @success=${this.onReportSubmitted} .searchConfiguration=${this.searchConfiguration} .selectedLayerId=${this._selectedLayerId} .reportOutsideAreaMessage=${this.reportOutsideAreaMessage} .submitNewReportsMessage=${this.submitNewReportsMessage} update-map-position ${n(this._createFeature)}></create-feature></calcite-panel></calcite-flow-item>`;
   }
   updatedProgressStatus(e) {
     this._updatedProgressBarStatus = e.detail;
   }
-  onFormReady() {
-    this._showSubmitCancelButton = !0;
+  onFormReady(e) {
+    this._submitNextButtonDisabled = e.detail, this._showSubmitCancelButton = !0;
+  }
+  editingLocation() {
+    this._showNextButton = !0;
   }
   showSubmitCancelButton(e) {
     this._showSubmitCancelButton = !e.detail;
   }
   onCreateFeatureSubmitButtonClick() {
-    this._createFeature.value && this._createFeature.value.submit();
+    this._createFeature.value && (this._showSubmitCancelButton = !1, this._showNextButton = !1, this._createFeature.value.submit());
   }
   backFromCreateFeaturePanel() {
-    this._createFeature.value && this.updateNonVisibleLayersOnMap(!1), this.backFromSelectedPanel();
+    this._createFeature.value && (this._showSubmitCancelButton = !1, this._showNextButton = !1, this.updateNonVisibleLayersOnMap(!1)), this.backFromSelectedPanel();
+  }
+  onNextButtonClick() {
+    this._createFeature.value && (this._showNextButton = !1, this._showSubmitCancelButton = !0, this._createFeature.value.showForm());
   }
   onCreateRelatedFeatureSubmitButtonClick() {
     this._createRelatedFeature.value && this._createRelatedFeature.value.submit();
@@ -239,7 +250,7 @@ class x extends F {
     await this.setSelectedFeatures([]), this._layerList.value && await this._layerList.value.refresh(), this._editableLayerIds.length === 1 ? (this._featureList.value && await this._featureList.value.refresh(), this._flowItems = ["feature-list"]) : this._flowItems = ["layer-list"];
   }
   async navigateToCreateFeature(e) {
-    e.detail.layerId && e.detail.layerName && await this.setSelectedLayer(e.detail.layerId, e.detail.layerName), this.updateNonVisibleLayersOnMap(!0), this._getFormElements(), this._showSubmitCancelButton = !1, this.updatePanelState(!1, !0), this._flowItems = [...this._flowItems, "feature-create"];
+    e.detail.layerId && e.detail.layerName && await this.setSelectedLayer(e.detail.layerId, e.detail.layerName), this.updateNonVisibleLayersOnMap(!0), this._getFormElements(), this._showSubmitCancelButton = !1, this._showNextButton = !1, this.updatePanelState(!1, !0), this._flowItems = [...this._flowItems, "feature-create"];
   }
   navigateToChooseCategory() {
     this.updatePanelState(!1, !0), this._flowItems = [...this._flowItems, "reporting-layer-list"];
@@ -249,17 +260,17 @@ class x extends F {
   }
   async layerListLoaded(e) {
     if (this._layerList.value && this._flowItems[this._flowItems.length - 1] === "layer-list" || this._flowItems[0] === "feature-list") {
-      const i = e.detail, s = this.mapView && await c(this.mapView), r = [];
-      this._validLayers = [], this._nonVisibleValidLayers = [], s?.forEach((l) => {
-        i.includes(l.id) && (this._validLayers.push(l), l.visible || this._nonVisibleValidLayers.push(l), this._getLayersConfig(l.id)?.reporting && this._layerItemsHash && this._layerItemsHash[l.id] && this._layerItemsHash[l.id].supportsAdd && r.push(l.id));
-      }), this.handleMapClick(), this._hasValidLayers = r.length > 0, this._urlParamsLoaded || (this._urlParamsLoaded = !0, await this.loadFeatureFromURLParams());
+      const i = e.detail, s = this.mapView && await p(this.mapView), a = [];
+      this._validLayers = [], this._nonVisibleValidLayers = [], s?.forEach((r) => {
+        i.includes(r.id) && (this._validLayers.push(r), r.visible || this._nonVisibleValidLayers.push(r), this._getLayersConfig(r.id)?.reporting && this._layerItemsHash && this._layerItemsHash[r.id] && this._layerItemsHash[r.id].supportsAdd && a.push(r.id));
+      }), this.handleMapClick(), this._hasValidLayers = a.length > 0, this._urlParamsLoaded || (this._urlParamsLoaded = !0, await this.loadFeatureFromURLParams());
     }
   }
   async displayFeaturesList(e) {
     await this.setSelectedLayer(e.detail.layerId, e.detail.layerName), this.updateSortingOptions(), this.handleSelectedLayersFilter(), this._flowItems = [...this._flowItems, "feature-list"], this._prevSelectedLayerId = this._selectedLayerId;
   }
   updateSortingOptions() {
-    const e = this.sortOption === "" ? "newest" : this.sortOption, t = e === "oldest" || e === "lowestVoted" ? "asc" : "desc", i = this.reportingOptions?.[this._selectedLayerId]?.like ? this.reportingOptions?.[this._selectedLayerId]?.likeField : "", s = this._selectedLayer && (e === "newest" || e === "oldest") ? this._selectedLayer.objectIdField : i;
+    const e = this.sortOption === "" ? "newest" : this.sortOption, t = e === "oldest" || e === "lowestVoted" ? "asc" : "desc", i = this.reportingOptions?.[this._selectedLayerId]?.like ? this.reportingOptions?.[this._selectedLayerId]?.likeField : "", s = this._selectedLayer && (e === "newest" || e === "oldest") ? this._selectedLayer?.objectIdField : i;
     this._updatedSorting = {
       field: s || "",
       order: t
@@ -287,9 +298,9 @@ class x extends F {
     this._showLoadingIndicator = !0, await this.setSelectedFeatures([e.detail]), this._flowItems = [...this._flowItems, "feature-details"];
   }
   async getRelatedTable() {
-    const e = this._currentFeature?.layer, t = this.mapView && await g(this.mapView);
+    const e = this._currentFeature?.layer, t = this.mapView && await y(this.mapView);
     e.relationships?.some((i) => {
-      const s = t?.filter((r) => e.url === r.url && r.layerId === i.relatedTableId);
+      const s = t?.filter((a) => e.url === a.url && a.layerId === i.relatedTableId);
       return s && s.length > 0 ? (this._relatedTable = s[0], !0) : !1;
     });
   }
@@ -307,31 +318,31 @@ class x extends F {
   }
   getFeatureListFlowItem(e, t) {
     const i = this._getLayersConfig(this._selectedLayerId)?.reporting && this._layerItemsHash && this._layerItemsHash[this._selectedLayerId].supportsAdd, s = this._currentLayerExpressions?.length;
-    return a`<calcite-flow-item .collapsed=${this.isMobile && this._sidePanelCollapsed} .heading=${t} .loading=${!this.isMobile && this._showLoadingIndicator} @calciteFlowItemBack=${this.backFromSelectedPanel} .selected=${this._flowItems[this._flowItems.length - 1] === "feature-list"}>${this._toggleSort()}<calcite-action icon=sort-ascending-arrow id=sort-popover slot=header-actions-end .text=${this._translations.sort} title=${this._translations.sort ?? u}></calcite-action>${s && a`<calcite-action icon=filter .indicator=${this._filterActive} @click=${() => {
+    return l`<calcite-flow-item .collapsed=${this.isMobile && this._sidePanelCollapsed} .heading=${t} .loading=${!this.isMobile && this._showLoadingIndicator} @calciteFlowItemBack=${this.backFromSelectedPanel} .selected=${this._flowItems[this._flowItems.length - 1] === "feature-list"}>${this._toggleSort()}<calcite-action icon=sort-ascending-arrow id=sort-popover slot=header-actions-end .text=${this._translations.sort} title=${this._translations.sort ?? f}></calcite-action>${s && l`<calcite-action icon=filter .indicator=${this._filterActive} @click=${() => {
       this.isMobile ? this._toggleFilter() : this._flowItems = [...this._flowItems, "filter-panel"];
-    }} slot=header-actions-end .text=${this._translations.filter} title=${this._translations.filter ?? u}></calcite-action>` || ""}${this.isMobile && this.getActionToExpandCollapsePanel() || ""}${this.enableNewReports && i && a`<calcite-button appearance=solid @click=${this.navigateToCreateFeature} slot=footer width=full>${this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText}</calcite-button>` || ""}<calcite-panel>${a`<feature-list .applyLayerViewFilter=${this.showMyReportsOnly} class="height-full" .filterByMapExtent=${this.filterByMapExtent} highlight-on-hover .mapView=${this.mapView} .noFeaturesFoundMsg=${this._translations.featureErrorMsg} @featureSelect=${this.onFeatureSelectFromList} page-size=30 .reportingOptions=${this.reportingOptions} .selectedLayerId=${e} .showFeatureSymbol=${this.showFeatureSymbol} .sortingInfo=${this._updatedSorting} ${o(this._featureList)}></feature-list>`}</calcite-panel></calcite-flow-item>`;
+    }} slot=header-actions-end .text=${this._translations.filter} title=${this._translations.filter ?? f}></calcite-action>` || ""}${this.isMobile && this.getActionToExpandCollapsePanel() || ""}${this.enableNewReports && i && l`<calcite-button appearance=solid @click=${this.navigateToCreateFeature} slot=footer width=full>${this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText}</calcite-button>` || ""}<calcite-panel>${l`<feature-list .applyLayerViewFilter=${this.showMyReportsOnly} class="height-full" .filterByMapExtent=${this.filterByMapExtent} highlight-on-hover .mapView=${this.mapView} .noFeaturesFoundMsg=${this._translations.featureErrorMsg} @featureSelect=${this.onFeatureSelectFromList} page-size=30 .reportingOptions=${this.reportingOptions} .selectedLayerId=${e} .showFeatureSymbol=${this.showFeatureSymbol} .sortingInfo=${this._updatedSorting} ${n(this._featureList)}></feature-list>`}</calcite-panel></calcite-flow-item>`;
   }
   getFilterPanel() {
-    return a`<calcite-flow-item .collapsed=${this.isMobile && this._sidePanelCollapsed} .heading=${this._translations.filterLayerTitle.replace("{{title}}", this._selectedLayerName)} .loading=${this._showLoadingIndicator} @calciteFlowItemBack=${this.backFromFilterPanel} .selected=${this._flowItems[this._flowItems.length - 1] === "filter-panel"}>${this.isMobile && this.getActionToExpandCollapsePanel() || ""}<div class=width-full slot=footer><div class=width-full slot=footer><calcite-button appearance=solid class="footer-top-button footer-button" .disabled=${!this._filterActive} @click=${this.resetFilterList} width=full>${this._translations.resetFilter}</calcite-button><calcite-button appearance=outline class=footer-button @click=${this.backFromFilterPanel} width=full>${this._translations.close}</calcite-button></div></div><calcite-panel>${this.mapView && a`<instant-apps-filter-list .closeBtnOnClick=${() => {
+    return l`<calcite-flow-item .collapsed=${this.isMobile && this._sidePanelCollapsed} .heading=${this._translations.filterLayerTitle.replace("{{title}}", this._selectedLayerName)} .loading=${this._showLoadingIndicator} @calciteFlowItemBack=${this.backFromFilterPanel} .selected=${this._flowItems[this._flowItems.length - 1] === "filter-panel"}>${this.isMobile && this.getActionToExpandCollapsePanel() || ""}<div class=width-full slot=footer><div class=width-full slot=footer><calcite-button appearance=solid class="footer-top-button footer-button" .disabled=${!this._filterActive} @click=${this.resetFilterList} width=full>${this._translations.resetFilter}</calcite-button><calcite-button appearance=outline class=footer-button @click=${this.backFromFilterPanel} width=full>${this._translations.close}</calcite-button></div></div><calcite-panel>${this.mapView && l`<instant-apps-filter-list .closeBtnOnClick=${() => {
     }} combobox-overlay-positioning=fixed .layerExpressions=${this._currentLayerExpressions} @filterListReset=${() => void this._handleFilterListReset()} @filterUpdate=${() => {
       const e = this._filterList.value?.filterCount;
       e !== void 0 && this._handleFilterUpdate(e > 0);
-    }} .view=${this.mapView} ${o(this._filterList)}></instant-apps-filter-list>` || ""}</calcite-panel></calcite-flow-item>`;
+    }} .view=${this.mapView} ${n(this._filterList)}></instant-apps-filter-list>` || ""}</calcite-panel></calcite-flow-item>`;
   }
   getFeatureDetailsFlowItem() {
     const e = this._selectedLayer?.relationships, t = this._getLayersConfig(this._selectedLayerId)?.comment && e && e.length > 0 && this._relatedTable;
-    return a`<calcite-flow-item .collapsed=${this.isMobile && this._sidePanelCollapsed} .heading=${this._selectedLayerName} .loading=${this._showLoadingIndicator} @calciteFlowItemBack=${this.backFromSelectedPanel} .selected=${this._flowItems[this._flowItems.length - 1] === "feature-details"}>${this.isMobile && this.getActionToExpandCollapsePanel() || ""}${this.mapView && a`<instant-apps-social-share class=share-node flip-rtl popover-button-icon-scale=s remove-popover-offset scale=m share-button-color=neutral share-button-type=action slot=header-actions-end social-media .view=${this.mapView} ${o(this._shareNode)}></instant-apps-social-share>` || ""}${this._selectedFeature.length > 1 && this.getFeaturesPagination() || ""}<calcite-panel><feature-details class=full-height .enableSnapping=${this.enableSnapping} .graphics=${this._selectedFeature} .layerItemsHash=${this._layerItemsHash} .mapView=${this.mapView} @addComment=${this.showAddCommentsPanel} @commentSelect=${this.onCommentSelectFromList} @featureSelectionChange=${this.selectionChanged} @likeOrDislikeClicked=${() => {
+    return l`<calcite-flow-item .collapsed=${this.isMobile && this._sidePanelCollapsed} .heading=${this._selectedLayerName} .loading=${this._showLoadingIndicator} @calciteFlowItemBack=${this.backFromSelectedPanel} .selected=${this._flowItems[this._flowItems.length - 1] === "feature-details"}>${this.isMobile && this.getActionToExpandCollapsePanel() || ""}${this.mapView && l`<instant-apps-social-share class=share-node flip-rtl popover-button-icon-scale=s remove-popover-offset scale=m share-button-color=neutral share-button-type=action slot=header-actions-end social-media .view=${this.mapView} ${n(this._shareNode)}></instant-apps-social-share>` || ""}${this._selectedFeature.length > 1 && this.getFeaturesPagination() || ""}<calcite-panel><feature-details class=full-height .enableSnapping=${this.enableSnapping} .graphics=${this._selectedFeature} .layerItemsHash=${this._layerItemsHash} .mapView=${this.mapView} @addComment=${this.showAddCommentsPanel} @commentSelect=${this.onCommentSelectFromList} @featureSelectionChange=${this.selectionChanged} @likeOrDislikeClicked=${() => {
       this._featureList.value && this._featureList.value.refresh(!0);
-    }} @loadingStatus=${(i) => void this.updatingFeatureDetails(i.detail)} .reportingOptions=${this.reportingOptions} .showFullCommentTitle=${this.showFullCommentTitle} .showUserImageInCommentsList=${this.showUserImageInCommentsList} ${o(this._featureDetails)}></feature-details>${t && a`<calcite-button appearance=solid @click=${this.showAddCommentsPanel} slot=footer width=full>${this.commentButtonText || this._translations.comment}</calcite-button>` || ""}</calcite-panel></calcite-flow-item>`;
+    }} @loadingStatus=${(i) => void this.updatingFeatureDetails(i.detail)} .reportingOptions=${this.reportingOptions} .showFullCommentTitle=${this.showFullCommentTitle} .showUserImageInCommentsList=${this.showUserImageInCommentsList} ${n(this._featureDetails)}></feature-details>${t && l`<calcite-button appearance=solid @click=${this.showAddCommentsPanel} slot=footer width=full>${this.commentButtonText || this._translations.comment}</calcite-button>` || ""}</calcite-panel></calcite-flow-item>`;
   }
   getFeaturesPagination() {
-    return a`<div class="feature-pagination"><div><calcite-button appearance=transparent icon-start=chevron-left id=solutions-back @click=${() => this._featureDetails.value && void this._featureDetails.value.back()} scale=s width=full></calcite-button><calcite-tooltip placement=top reference-element=solutions-back><span>${this._translations.back}</span></calcite-tooltip></div><calcite-button appearance=transparent @click=${() => this._featureDetails.value && void this._featureDetails.value.toggleListView()} scale=s><span class="pagination-count">${this._getCount()}</span></calcite-button><div><calcite-button appearance=transparent icon-start=chevron-right id=solutions-next @click=${() => this._featureDetails.value && void this._featureDetails.value.next()} scale=s width=full></calcite-button><calcite-tooltip placement=top reference-element=solutions-next><span>${this._translations.next}</span></calcite-tooltip></div></div>`;
+    return l`<div class="feature-pagination"><div><calcite-button appearance=transparent icon-start=chevron-left id=solutions-back @click=${() => this._featureDetails.value && void this._featureDetails.value.back()} scale=s width=full></calcite-button><calcite-tooltip placement=top reference-element=solutions-back><span>${this._translations.back}</span></calcite-tooltip></div><calcite-button appearance=transparent @click=${() => this._featureDetails.value && void this._featureDetails.value.toggleListView()} scale=s><span class="pagination-count">${this._getCount()}</span></calcite-button><div><calcite-button appearance=transparent icon-start=chevron-right id=solutions-next @click=${() => this._featureDetails.value && void this._featureDetails.value.next()} scale=s width=full></calcite-button><calcite-tooltip placement=top reference-element=solutions-next><span>${this._translations.next}</span></calcite-tooltip></div></div>`;
   }
   getCommentDetailsFlowItem() {
-    return a`<calcite-flow-item .collapsed=${this.isMobile && this._sidePanelCollapsed} .heading=${this._relatedTable?.title || ""} @calciteFlowItemBack=${this.backFromSelectedPanel} .selected=${this._flowItems[this._flowItems.length - 1] === "comment-details"}>${this.isMobile && this.getActionToExpandCollapsePanel() || ""}<calcite-panel><info-card .enableSnapping=${this.enableSnapping} .graphics=${this._selectedRelatedFeature} .mapView=${this.mapView}></info-card></calcite-panel></calcite-flow-item>`;
+    return l`<calcite-flow-item .collapsed=${this.isMobile && this._sidePanelCollapsed} .heading=${this._relatedTable?.title || ""} @calciteFlowItemBack=${this.backFromSelectedPanel} .selected=${this._flowItems[this._flowItems.length - 1] === "comment-details"}>${this.isMobile && this.getActionToExpandCollapsePanel() || ""}<calcite-panel><info-card .enableSnapping=${this.enableSnapping} .graphics=${this._selectedRelatedFeature} .mapView=${this.mapView}></info-card></calcite-panel></calcite-flow-item>`;
   }
   getAddCommentFlowItem() {
-    return a`<calcite-flow-item .collapsed=${this.isMobile && this._sidePanelCollapsed} .heading=${this._relatedTable?.title || ""} @calciteFlowItemBack=${this.backFromCreateRelatedFeaturePanel} .selected=${this._flowItems[this._flowItems.length - 1] === "add-comment"}>${this.isMobile && this.getActionToExpandCollapsePanel() || ""}<div class=width-full slot=footer>${this._showSubmitCancelButton && a`<div class=width-full slot=footer><calcite-button appearance=solid class="footer-top-button footer-button" @click=${this.onCreateRelatedFeatureSubmitButtonClick} width=full>${this._translations.submit}</calcite-button><calcite-button appearance=outline class=footer-button @click=${this.backFromCreateRelatedFeaturePanel} width=full>${this._translations.cancel}</calcite-button></div>` || ""}</div><calcite-panel><create-related-feature customize-submit .enableSnapping=${this.enableSnapping} .mapView=${this.mapView} @fail=${this.addCommentFailed} @formReady=${this.onFormReady} @isActionPending=${this.showSubmitCancelButton} @success=${this.onCommentSubmitted} .selectedFeature=${this._currentFeature} .table=${this._relatedTable} ${o(this._createRelatedFeature)}></create-related-feature></calcite-panel></calcite-flow-item>`;
+    return l`<calcite-flow-item .collapsed=${this.isMobile && this._sidePanelCollapsed} .heading=${this._relatedTable?.title || ""} @calciteFlowItemBack=${this.backFromCreateRelatedFeaturePanel} .selected=${this._flowItems[this._flowItems.length - 1] === "add-comment"}>${this.isMobile && this.getActionToExpandCollapsePanel() || ""}<div class=width-full slot=footer>${this._showSubmitCancelButton && l`<div class=width-full slot=footer><calcite-button appearance=solid class="footer-top-button footer-button" @click=${this.onCreateRelatedFeatureSubmitButtonClick} width=full>${this._translations.submit}</calcite-button><calcite-button appearance=outline class=footer-button @click=${this.backFromCreateRelatedFeaturePanel} width=full>${this._translations.cancel}</calcite-button></div>` || ""}</div><calcite-panel><create-related-feature customize-submit .enableSnapping=${this.enableSnapping} .mapView=${this.mapView} @fail=${this.addCommentFailed} @formReady=${this.onFormReady} @isActionPending=${this.showSubmitCancelButton} @success=${this.onCommentSubmitted} .selectedFeature=${this._currentFeature} .table=${this._relatedTable} ${n(this._createRelatedFeature)}></create-related-feature></calcite-panel></calcite-flow-item>`;
   }
   async setSelectedFeatures(e) {
     this._selectedFeature = e, await this.setCurrentFeature(this._selectedFeature.length ? this._selectedFeature[0] : void 0);
@@ -346,11 +357,11 @@ class x extends F {
   }
   async highlightOnMap(e) {
     if (this.clearHighlights(), e && e.geometry && e.layer && e.layer.id !== void 0) {
-      const t = this.mapView && await p(this.mapView, e.layer.id.toString());
+      const t = this.mapView && await u(this.mapView, e.layer.id.toString());
       if (t) {
         t.highlightOptions = null;
         const i = Number(e.getObjectId());
-        this._highlightHandle = this.mapView && await w([i], t, this.mapView, !0, this.zoomToScale);
+        this._highlightHandle = this.mapView && await b([i], t, this.mapView, !0, this.zoomToScale);
       }
     }
     this.updatingFeatureDetails(!1);
@@ -359,7 +370,7 @@ class x extends F {
     this._highlightHandle && this._highlightHandle.remove();
   }
   getActionToExpandCollapsePanel() {
-    return a`<calcite-action .icon=${this._sidePanelCollapsed ? "chevrons-up" : "chevrons-down"} @click=${this.toggleSidePanel} slot=header-actions-end .text=${(this._sidePanelCollapsed ? this._translations.expand : this._translations.collapse) || ""}></calcite-action>`;
+    return l`<calcite-action .icon=${this._sidePanelCollapsed ? "chevrons-up" : "chevrons-down"} @click=${this.toggleSidePanel} slot=header-actions-end .text=${(this._sidePanelCollapsed ? this._translations.expand : this._translations.collapse) || ""}></calcite-action>`;
   }
   async setMapView() {
     await this.getLayersToShowInList(), await this._updateFeatures(), this._editableLayerIds?.length === 1 ? await this.renderFeaturesList() : this._flowItems = ["layer-list"], this.mapView && (this.mapView.popupEnabled = !1, this._defaultCenter && this._defaultLevel && (await this.mapView.goTo({
@@ -374,35 +385,65 @@ class x extends F {
     if (this.mapView) {
       this.mapView.popupEnabled = !1;
       const t = await this.mapView.hitTest(e);
-      if (t.results.length > 0) {
-        const i = [];
-        t.results.forEach(function(l) {
-          l.type === "graphic" && i.push(l.graphic);
-        });
-        const s = i.filter((l) => {
-          if (l.layer?.type === "feature") {
-            const n = l.layer;
-            return this._validLayers.includes(n);
-          } else
-            return !1;
-        }), r = i.filter((l) => {
-          if (l.layer?.type === "feature") {
-            const n = l.layer;
-            return !this._validLayers.includes(n) && n?.popupEnabled && n?.id;
-          } else
-            return !1;
-        });
-        if (s.length > 0 && (await this.setSelectedFeatures(s), this._flowItems.length && this._flowItems.includes("feature-details") ? (this._flowItems = [...this._flowItems.slice(0, this._flowItems.indexOf("feature-details") + 1)], await this.highlightOnMap(i[0])) : this._flowItems = [...this._flowItems, "feature-details"]), r.length > 0) {
-          this.mapView.popupEnabled = !0;
-          const l = {
-            features: r,
-            updateLocationEnabled: !0
-          };
-          await this.mapView.openPopup(l);
-        }
-      }
+      t.results.length > 0 ? await this._handleHitTestResults(t.results) : this._mapImageryLayersId.length > 0 && await this._handleIdentify(e.mapPoint);
+    }
+  }
+  async _handleHitTestResults(e) {
+    const t = [];
+    e.forEach(function(a) {
+      a.type === "graphic" && t.push(a.graphic);
+    });
+    const i = t.filter((a) => {
+      if (a.layer?.type === "feature") {
+        const r = a.layer;
+        return this._validLayers.includes(r);
+      } else
+        return !1;
+    }), s = t.filter((a) => {
+      if (a.layer?.type === "feature") {
+        const r = a.layer;
+        return !this._validLayers.includes(r) && r?.popupEnabled && r?.id;
+      } else
+        return !1;
+    });
+    if (i.length > 0 && (await this.setSelectedFeatures(i), this._flowItems.length && this._flowItems.includes("feature-details") ? (this._flowItems = [...this._flowItems.slice(0, this._flowItems.indexOf("feature-details") + 1)], await this.highlightOnMap(t[0])) : this._flowItems = [...this._flowItems, "feature-details"]), s.length > 0 && this.mapView) {
+      this.mapView.popupEnabled = !0;
+      const a = {
+        features: s,
+        updateLocationEnabled: !0
+      };
+      await this.mapView.openPopup(a);
     }
   }
+  async _handleIdentify(e) {
+    const t = this.IdentifyParameters && new this.IdentifyParameters({
+      geometry: e,
+      tolerance: 3,
+      mapExtent: this.mapView?.extent
+    }), i = this._mapImageryLayersId.map(async (r) => {
+      const o = this.mapView && await d(this.mapView, r);
+      if (o?.url && t)
+        return await this.identify?.identify(o.url, t);
+    }), s = await Promise.all(i), a = [];
+    s.forEach((r) => {
+      r.results.forEach((o) => {
+        const _ = Object.keys(o.feature.attributes).map((c) => ({
+          fieldName: c,
+          label: c
+        }));
+        o.feature.popupTemplate = {
+          title: o.layerName,
+          content: [{
+            type: "fields",
+            fieldInfos: _
+          }]
+        }, a.push(o.feature);
+      });
+    }), a.length > 0 && this.mapView && (this.mapView.popupEnabled = !0, await this.mapView.openPopup({
+      features: a,
+      location: e
+    }));
+  }
   _getCount() {
     const e = (this._selectedFeatureIndex + 1).toString(), t = this._selectedFeature.length.toString();
     return this._translations.indexOfTotal.replace("{{index}}", e).replace("{{total}}", t);
@@ -424,8 +465,8 @@ class x extends F {
   }
   reduceToConfiguredLayers(e, t) {
     return Object.keys(e).reduce((i, s) => {
-      const r = this.reportingOptions ? this._getLayersConfig(s)?.visible : e[s].supportsAdd;
-      return !t.includes(s) && r && i.push(s), i;
+      const a = this.reportingOptions ? this._getLayersConfig(s)?.visible : e[s].supportsAdd;
+      return !t.includes(s) && a && i.push(s), i;
     }, []);
   }
   refreshLists() {
@@ -435,7 +476,7 @@ class x extends F {
   }
   async _updateFeatures() {
     for (const e of this._editableLayerIds) {
-      const t = this.mapView && await p(this.mapView, e);
+      const t = this.mapView && await u(this.mapView, e);
       t && (await this._showMyFeaturesOnly(t), t.layer?.floorInfo?.floorField && this.floorLevel && this._updateFloorDefinitionExpression(t.layer));
     }
   }
@@ -449,7 +490,7 @@ class x extends F {
     }
   }
   async getLayersToShowInList() {
-    const e = this.mapView && await y(this.mapView, !0), t = this.mapView && await c(this.mapView), i = [];
+    const e = this.mapView && await L(this.mapView, !0), t = this.mapView && await p(this.mapView), i = [];
     t?.forEach((s) => {
       s?.type === "feature" && s?.editingEnabled && s?.capabilities?.operations?.supportsAdd && (e[s.id].supportsAdd = !0), s?.editingEnabled || i.push(s.id);
     }), this._editableLayerIds = this.reduceToConfiguredLayers(e, i), this._layerItemsHash = e;
@@ -475,7 +516,7 @@ class x extends F {
     }), this.layerId && this.objectId) {
       const e = this.mapView && await d(this.mapView, this.layerId);
       if (e) {
-        const t = this.mapView && await b([Number(this.objectId)], e, [], !0, this.mapView.spatialReference);
+        const t = this.mapView && await F([Number(this.objectId)], e, [], !0, this.mapView.spatialReference);
         t?.length && (await this.setSelectedFeatures(t), this._flowItems.length && this._flowItems[this._flowItems.length - 1] !== "feature-details" ? this._flowItems = [...this._flowItems, "feature-details"] : this._flowItems = [...this._flowItems]);
       }
     }
@@ -502,8 +543,8 @@ class x extends F {
     if (this._currentLayerExpressions && this._currentLayerExpressions?.length > 0) {
       const t = this._currentLayerExpressions[0];
       for (const i of t.expressions) {
-        const { active: s, definitionExpression: r } = i;
-        s && r && e.push(`(${r})`);
+        const { active: s, definitionExpression: a } = i;
+        s && a && e.push(`(${a})`);
       }
       this._filterActive = e.length > 0, this.updateFilterLayerDefExpression(e, t.operator);
     }
@@ -517,6 +558,10 @@ class x extends F {
       return;
     const e = this.mapView.map;
     e.allLayers.concat(e.allTables).forEach((t) => {
+      if (t.type === "map-image" && !this._mapImageryLayersId.includes(t.id)) {
+        this._mapImageryLayersId.push(t.id);
+        return;
+      }
       if (t.type !== "feature")
         return;
       const i = t;
@@ -525,15 +570,15 @@ class x extends F {
   }
   handleLayerExpressionsT9n(e, t) {
     e?.forEach((i) => {
-      const s = t?.find((r) => r.id === i.id);
-      s != null && (i.title = s.title, i.expressions?.forEach((r) => {
-        const l = s.expressions?.find((n) => n.id === r.id);
-        l != null && (r.name = l.name);
+      const s = t?.find((a) => a.id === i.id);
+      s != null && (i.title = s.title, i.expressions?.forEach((a) => {
+        const r = s.expressions?.find((o) => o.id === a.id);
+        r != null && (a.name = r.name);
       }));
     });
   }
 }
-m("crowdsource-reporter", x);
+g("crowdsource-reporter", V);
 export {
-  x as CrowdsourceReporter
+  V as CrowdsourceReporter
 };

package/dist/components/deduct-calculator/customElement.js

@@ -6,7 +6,7 @@ import { LitElement as p, createEvent as m } from "@arcgis/lumina";
 import { css as d } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.0/esri/copyright.txt for details.
-v1.0.0-next.20250513.1 */
+v1.0.0-next.20250521 */
 const y = d`/** @license
  * Copyright 2025 Esri
  *

package/dist/components/delete-button/customElement.d.ts

@@ -29,6 +29,14 @@ export declare class DeleteButton extends LitElement {
     ids: (number | string)[];
     /** esri/views/layers/FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html */
     layer: __esri.FeatureLayer | undefined;
+    /**
+     * boolean: When true the delete count will be shown at button
+     *
+     * @default true
+     */
+    showDeleteCount: boolean;
     /** Emitted on demand when features have been deleted */
     readonly editsComplete: TargetedEvent<this, EditType>;
+    /** Emitted on demand when the delete button is clicked */
+    readonly deleteClicked: TargetedEvent<this, void>;
 }