@esri/solutions-components 1.0.0-next.20250529.1 → 1.0.0-next.20250530.1

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

@@ -1,17 +1,17 @@
 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 { l as y } from "../../chunks/loadModules.js";
+import { d as c, j as u, i as w, g as f, 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 { html as a, nothing as m } 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 { LitElement as I, createEvent as $, noShadowRoot as C, safeClassMap as _ } from "@arcgis/lumina";
 import { css as x } from "@lit/reactive-element/css-tag.js";
 import "@arcgis/instant-apps-components";
 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.20250529.1 */
+v1.0.0-next.20250530.1 */
 const E = x`@layer{/** @license
  * Copyright 2025 Esri
  *
@@ -29,10 +29,10 @@ const E = x`@layer{/** @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 V extends I {
   constructor() {
-    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.reportingArea = !1, this.reportingAreaLayer = "", this.reportingAreaMessage = "", 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);
+    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.reportingArea = !1, this.reportingAreaLayer = "", this.reportingAreaMessage = "", 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, 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, reportingArea: 5, reportingAreaLayer: 1, reportingAreaMessage: 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 };
+    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, reportingArea: 5, reportingAreaLayer: 1, reportingAreaMessage: 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 = E;
@@ -41,7 +41,9 @@ class V extends 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 });
+    e.has("isMobile") && this.isMobileWatchHandler(this.isMobile), e.has("mapView") && this.mapViewWatchHandler(), e.has("floorLevel") && this.floorLevelWatchHandler(), (e.has("reportingAreaLayer") || e.has("reportingArea") && this.hasUpdated) && setTimeout(() => {
+      this._createFeature.value && this._createFeature.value.refresh(this.floorLevel);
+    }, 50), 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 });
   }
   async isMobileWatchHandler(e) {
     this.updatePanelState(!1, this._showFullPanel), e && this._flowItems[this._flowItems.length - 1] === "filter-panel" ? (await this.backFromFilterPanel(), this._filterOpen = !0) : !e && this._filterOpen && (await this._closeFilter(), this._flowItems = [...this._flowItems, "filter-panel"]);
@@ -54,7 +56,7 @@ class V extends I {
   async floorLevelWatchHandler() {
     if (this._editableLayerIds)
       for (const e of this._editableLayerIds) {
-        const t = this.mapView && await d(this.mapView, e);
+        const t = this.mapView && await c(this.mapView, e);
         t && t.floorInfo?.floorField && this._updateFloorDefinitionExpression(t);
       }
     this._flowItems[this._flowItems.length - 1] === "layer-list" && this._layerList.value && await this._layerList.value.refresh(), this._featureList.value && this._featureList.value.refresh(), this._createFeature.value && this._createFeature.value.refresh(this.floorLevel);
@@ -93,13 +95,13 @@ class V extends I {
   }
   render() {
     const e = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-    return l`${this._reportSubmitted && l`<calcite-alert auto-close class=${`${e} report-submitted-msg`} icon=check-circle kind=success label @calciteAlertClose=${() => {
+    return a`${this._reportSubmitted && a`<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 .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=${() => {
+    }} open placement=top><div slot=message .innerHTML=${(this.reportSubmittedMessage || this._translations.submitMsg) ?? ""} ${n(this._reportSubmittedAlert)}></div></calcite-alert>` || ""}${this._featureCreationFailedErrorMsg && a`<calcite-alert auto-close class=${_(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 && l`<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 && a`<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 && l`<calcite-alert auto-close class=${m(e)} icon=x-octagon kind=danger label @calciteAlertClose=${() => {
+    }} open placement=top><div slot=message>${this.commentSubmittedMessage || this._translations.commentSubmittedMsg}</div></calcite-alert>` || ""}${this._addingCommentFailed && a`<calcite-alert auto-close class=${_(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() || ""}`;
   }
@@ -107,7 +109,7 @@ class V extends I {
     this.reportSubmittedMessage && this._reportSubmittedAlert.value?.children[0] && (this._reportSubmittedAlert.value.children[0].style.margin = "0px");
   }
   async _initModules() {
-    const [e, t, i, s] = await w([
+    const [e, t, i, s] = await y([
       "esri/core/reactiveUtils",
       "esri/layers/support/FeatureFilter",
       "esri/rest/identify",
@@ -116,8 +118,8 @@ class V extends I {
     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((a) => a.id === i.id) || i.set("visible", !e || i.id === e);
+    this._selectedLayerId = e, this._selectedLayer = this.mapView && await c(this.mapView, e), this._selectedLayerName = t, this._validLayers.forEach((i) => {
+      this._nonVisibleValidLayers.find((l) => l.id === i.id) || i.set("visible", !e || i.id === e);
     });
   }
   _getLayersConfig(e) {
@@ -154,10 +156,10 @@ class V extends I {
       }
     });
     const t = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-    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>`;
+    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>`;
   }
   filterModal() {
-    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=${() => {
+    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=${() => {
       this._filterActive = !1, this._featureList.value && this._featureList.value.refresh();
     }} @filterUpdate=${() => {
       this._filterList.value?.filterCount !== void 0 && this._handleFilterUpdate(this._filterList.value?.filterCount > 0);
@@ -177,11 +179,11 @@ class V extends I {
   }
   _toggleSort() {
     const e = this.reportingOptions && this.reportingOptions[this._selectedLayerId] && this.reportingOptions[this._selectedLayerId].like && this.reportingOptions[this._selectedLayerId].likeField;
-    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=${() => {
+    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=${() => {
       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 && l`<calcite-list-item .label=${this._translations.sortHighestVoted} @calciteListItemSelect=${() => {
+    }} .selected=${this._updatedSortOption === "oldest"} value=oldest></calcite-list-item>${e && a`<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=${() => {
@@ -196,14 +198,14 @@ class V extends I {
     this._showLoadingIndicator = !0, this._filterActive = e, this._featureList.value && await this._featureList.value.refresh(), this._showLoadingIndicator = !1;
   }
   getLayerListFlowItem() {
-    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>`;
+    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 ${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 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>`;
+    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>`;
   }
   getFeatureCreateFlowItem() {
-    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>`;
+    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" .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} .reportingArea=${this.reportingArea} .reportingAreaMessage=${this.reportingAreaMessage} .submitNewReportsMessage=${this.submitNewReportsMessage} update-map-position ${n(this._createFeature)}></create-feature></calcite-panel></calcite-flow-item>`;
   }
   updatedProgressStatus(e) {
     this._updatedProgressBarStatus = e.detail;
@@ -260,10 +262,10 @@ class V extends I {
   }
   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 p(this.mapView), a = [];
+      const i = e.detail, s = this.mapView && await u(this.mapView), l = [];
       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());
+        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 && l.push(r.id));
+      }), this.handleMapClick(), this._hasValidLayers = l.length > 0, this._urlParamsLoaded || (this._urlParamsLoaded = !0, await this.loadFeatureFromURLParams());
     }
   }
   async displayFeaturesList(e) {
@@ -295,12 +297,12 @@ class V extends I {
     this._sidePanelCollapsed = e, this._showFullPanel = t, this.togglePanel.emit({ panelState: this._sidePanelCollapsed, isFormOpen: this._showFullPanel });
   }
   async onFeatureSelectFromList(e) {
-    this._showLoadingIndicator = !0, await this.setSelectedFeatures([e.detail]), this._flowItems = [...this._flowItems, "feature-details"];
+    await this.setSelectedFeatures([e.detail]), this._flowItems = [...this._flowItems, "feature-details"];
   }
   async getRelatedTable() {
-    const e = this._currentFeature?.layer, t = this.mapView && await y(this.mapView);
+    const e = this._currentFeature?.layer, t = this.mapView && await w(this.mapView);
     e.relationships?.some((i) => {
-      const s = t?.filter((a) => e.url === a.url && a.layerId === i.relatedTableId);
+      const s = t?.filter((l) => e.url === l.url && l.layerId === i.relatedTableId);
       return s && s.length > 0 ? (this._relatedTable = s[0], !0) : !1;
     });
   }
@@ -318,12 +320,14 @@ class V extends I {
   }
   getFeatureListFlowItem(e, t) {
     const i = this._getLayersConfig(this._selectedLayerId)?.reporting && this._layerItemsHash && this._layerItemsHash[this._selectedLayerId].supportsAdd, s = this._currentLayerExpressions?.length;
-    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=${() => {
+    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 ?? m}></calcite-action>${s && a`<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 ?? 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>`;
+    }} slot=header-actions-end .text=${this._translations.filter} title=${this._translations.filter ?? m}></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} @featureClick=${() => {
+      this._showLoadingIndicator = !0;
+    }} @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 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=${() => {
+    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=${() => {
     }} 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);
@@ -331,18 +335,22 @@ class V extends I {
   }
   getFeatureDetailsFlowItem() {
     const e = this._selectedLayer?.relationships, t = this._getLayersConfig(this._selectedLayerId)?.comment && e && e.length > 0 && this._relatedTable;
-    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=${() => {
+    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} ${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} @commentClick=${() => {
+      this._showLoadingIndicator = !0;
+    }} @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} ${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>`;
+    }} @loadingStatus=${(i) => void this.updatingFeatureDetails(i.detail)} .reportingOptions=${this.reportingOptions} .showFullCommentTitle=${this.showFullCommentTitle} .showUserImageInCommentsList=${this.showUserImageInCommentsList} ${n(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>`;
   }
   getFeaturesPagination() {
-    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>`;
+    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>`;
   }
   getCommentDetailsFlowItem() {
-    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>`;
+    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} @selectionChanged=${() => {
+      this._showLoadingIndicator = !1;
+    }}></info-card></calcite-panel></calcite-flow-item>`;
   }
   getAddCommentFlowItem() {
-    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>`;
+    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} ${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);
@@ -357,7 +365,7 @@ class V extends I {
   }
   async highlightOnMap(e) {
     if (this.clearHighlights(), e && e.geometry && e.layer && e.layer.id !== void 0) {
-      const t = this.mapView && await u(this.mapView, e.layer.id.toString());
+      const t = this.mapView && await f(this.mapView, e.layer.id.toString());
       if (t) {
         t.highlightOptions = null;
         const i = Number(e.getObjectId());
@@ -370,7 +378,7 @@ class V extends I {
     this._highlightHandle && this._highlightHandle.remove();
   }
   getActionToExpandCollapsePanel() {
-    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>`;
+    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>`;
   }
   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({
@@ -384,65 +392,68 @@ class V extends I {
   async onMapClick(e) {
     if (this.mapView) {
       this.mapView.popupEnabled = !1;
-      const t = await this.mapView.hitTest(e);
-      t.results.length > 0 ? await this._handleHitTestResults(t.results) : this._mapImageryLayersId.length > 0 && await this._handleIdentify(e.mapPoint);
+      const t = await this.mapView.hitTest(e), i = [];
+      let s = [], l = [], r = !1;
+      t.results.length > 0 && t.results.forEach((d) => {
+        d.type === "graphic" && i.push(d.graphic);
+      }), i.length > 0 && (await this._setReportingGraphics(i), s = this._getNonReportingLayerGraphics(i)), this._mapImageryLayersId.length > 0 && (l = await this._getIdentifiedGraphics(e.mapPoint), r = l.length > 0);
+      const o = s.concat(l);
+      if (o.length > 0) {
+        this.mapView.popupEnabled = !0;
+        const d = {
+          features: o,
+          location: e.mapPoint,
+          updateLocationEnabled: !r
+          // if identify graphics is present then dont update location
+        };
+        await this.mapView.openPopup(d);
+      }
     }
   }
-  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);
+  async _setReportingGraphics(e) {
+    const t = e.filter((i) => {
+      if (i.layer?.type === "feature") {
+        const s = i.layer;
+        return this._validLayers.includes(s);
       } 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;
+    });
+    t.length > 0 && (await this.setSelectedFeatures(t), this._flowItems.length && this._flowItems.includes("feature-details") ? (this._flowItems = [...this._flowItems.slice(0, this._flowItems.indexOf("feature-details") + 1)], await this.highlightOnMap(e[0])) : this._flowItems = [...this._flowItems, "feature-details"]);
+  }
+  _getNonReportingLayerGraphics(e) {
+    return e.filter((i) => {
+      if (i.layer?.type === "feature") {
+        const s = i.layer;
+        return !this._validLayers.includes(s) && s?.popupEnabled && s?.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) {
+  async _getIdentifiedGraphics(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);
+      const o = this.mapView && await c(this.mapView, r);
       if (o?.url && t)
         return await this.identify?.identify(o.url, t);
-    }), s = await Promise.all(i), a = [];
-    s.forEach((r) => {
+    }), s = await Promise.all(i), l = [];
+    return s.forEach((r) => {
       r.results.forEach((o) => {
-        const _ = Object.keys(o.feature.attributes).map((c) => ({
-          fieldName: c,
-          label: c
+        const d = Object.keys(o.feature.attributes).map((p) => ({
+          fieldName: p,
+          label: p
         }));
         o.feature.popupTemplate = {
           title: o.layerName,
           content: [{
             type: "fields",
-            fieldInfos: _
+            fieldInfos: d
           }]
-        }, a.push(o.feature);
+        }, l.push(o.feature);
       });
-    }), a.length > 0 && this.mapView && (this.mapView.popupEnabled = !0, await this.mapView.openPopup({
-      features: a,
-      location: e
-    }));
+    }), l;
   }
   _getCount() {
     const e = (this._selectedFeatureIndex + 1).toString(), t = this._selectedFeature.length.toString();
@@ -465,8 +476,8 @@ class V extends I {
   }
   reduceToConfiguredLayers(e, t) {
     return Object.keys(e).reduce((i, s) => {
-      const a = this.reportingOptions ? this._getLayersConfig(s)?.visible : e[s].supportsAdd;
-      return !t.includes(s) && a && i.push(s), i;
+      const l = this.reportingOptions ? this._getLayersConfig(s)?.visible : e[s].supportsAdd;
+      return !t.includes(s) && l && i.push(s), i;
     }, []);
   }
   refreshLists() {
@@ -476,7 +487,7 @@ class V extends I {
   }
   async _updateFeatures() {
     for (const e of this._editableLayerIds) {
-      const t = this.mapView && await u(this.mapView, e);
+      const t = this.mapView && await f(this.mapView, e);
       t && (await this._showMyFeaturesOnly(t), t.layer?.floorInfo?.floorField && this.floorLevel && this._updateFloorDefinitionExpression(t.layer));
     }
   }
@@ -490,7 +501,7 @@ class V extends I {
     }
   }
   async getLayersToShowInList() {
-    const e = this.mapView && await L(this.mapView, !0), t = this.mapView && await p(this.mapView), i = [];
+    const e = this.mapView && await L(this.mapView, !0), t = this.mapView && await u(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;
@@ -514,7 +525,7 @@ class V extends I {
       center: this.center.split(";").map(Number),
       zoom: this.level
     }), this.layerId && this.objectId) {
-      const e = this.mapView && await d(this.mapView, this.layerId);
+      const e = this.mapView && await c(this.mapView, this.layerId);
       if (e) {
         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]);
@@ -529,7 +540,7 @@ class V extends I {
   }
   async handlePrevLayersFilter() {
     if (this._prevSelectedLayerId) {
-      const e = this.mapView && await d(this.mapView, this._prevSelectedLayerId);
+      const e = this.mapView && await c(this.mapView, this._prevSelectedLayerId);
       e && this._initDefExpressions && (e.definitionExpression = this._initDefExpressions[this._prevSelectedLayerId]);
     }
   }
@@ -543,8 +554,8 @@ class V extends I {
     if (this._currentLayerExpressions && this._currentLayerExpressions?.length > 0) {
       const t = this._currentLayerExpressions[0];
       for (const i of t.expressions) {
-        const { active: s, definitionExpression: a } = i;
-        s && a && e.push(`(${a})`);
+        const { active: s, definitionExpression: l } = i;
+        s && l && e.push(`(${l})`);
       }
       this._filterActive = e.length > 0, this.updateFilterLayerDefExpression(e, t.operator);
     }
@@ -570,10 +581,10 @@ class V extends I {
   }
   handleLayerExpressionsT9n(e, t) {
     e?.forEach((i) => {
-      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);
+      const s = t?.find((l) => l.id === i.id);
+      s != null && (i.title = s.title, i.expressions?.forEach((l) => {
+        const r = s.expressions?.find((o) => o.id === l.id);
+        r != null && (l.name = r.name);
       }));
     });
   }

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.20250529.1 */
+v1.0.0-next.20250530.1 */
 const y = d`/** @license
  * Copyright 2025 Esri
  *

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

@@ -30,7 +30,7 @@ export declare class DeleteButton extends LitElement {
     /** 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
+     * boolean: When true the delete button will show the number of features that will be deleted
      *
      * @default true
      */

package/dist/components/delete-button/customElement.js

@@ -5,7 +5,7 @@ import { LitElement as a, createEvent as i } from "@arcgis/lumina";
 import { css as o } 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.20250529.1 */
+v1.0.0-next.20250530.1 */
 const d = o`/** @license
  * Copyright 2025 Esri
  *

package/dist/components/delete-dialog/customElement.js

@@ -5,7 +5,7 @@ import { LitElement as a, createEvent as i } from "@arcgis/lumina";
 import { css as o } 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.20250529.1 */
+v1.0.0-next.20250530.1 */
 const r = o`/** @license
  * Copyright 2025 Esri
  *

package/dist/components/edit-card/customElement.js

@@ -8,7 +8,7 @@ import { LitElement as f, createEvent as a, noShadowRoot as m, safeClassMap as n
 import { css as _ } 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.20250529.1 */
+v1.0.0-next.20250530.1 */
 const u = _`@layer{/** @license
  * Copyright 2025 Esri
  *

package/dist/components/feature-details/customElement.d.ts

@@ -47,6 +47,8 @@ export declare class FeatureDetails extends LitElement {
     toggleListView(): Promise<void>;
     /** Emitted on demand when like or dislike button is clicked */
     readonly loadingStatus: TargetedEvent<this, boolean>;
+    /** Emitted on demand when comment is clicked using the feature-list */
+    readonly commentClick: TargetedEvent<this, void>;
     /** Emitted on demand when comment is selected using the feature-list */
     readonly commentSelect: TargetedEvent<this, __esri.Graphic>;
     /** Emitted on demand when comment icon is clicked */

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

@@ -7,7 +7,7 @@ import { LitElement as g, createEvent as h, noShadowRoot as f } from "@arcgis/lu
 import { css as b } 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.20250529.1 */
+v1.0.0-next.20250530.1 */
 const C = b`@layer{/**
  * @license
  * Copyright 2025 Esri
@@ -26,7 +26,7 @@ const C = b`@layer{/**
  */:host{display:block}.buttons-container{align-items:center;display:flex;padding:4px;color:var(--calcite-color-text-1)!important;background-color:var(--calcite-color-foreground-1)!important;border-block-start:1px solid var(--calcite-color-border-3);border-block-end:1px solid var(--calcite-color-border-3)}}`;
 class F extends g {
   constructor() {
-    super(...arguments), this.enableSnapping = !1, this.graphics = [], this.showUserImageInCommentsList = !1, this.showFullCommentTitle = !0, this._likeFieldAvailable = !1, this._likeCount = 0, this._disLikeCount = 0, this._dislikeFieldAvailable = !1, this._commentsAvailable = !1, this._isLikeBtnClicked = !1, this._isDislikeBtnClicked = !1, this._relatedFeaturesOIDs = [], this._updating = !1, this._infoCard = p(), this._commentsList = p(), this._likeField = "", this._dislikeField = "", this._validFieldTypes = ["small-integer", "integer", "big-integer", "single", "long"], this.relatedTableId = "", this.loadingStatus = h(), this.commentSelect = h(), this.addComment = h(), this.likeOrDislikeClicked = h(), this.featureSelectionChange = h();
+    super(...arguments), this.enableSnapping = !1, this.graphics = [], this.showUserImageInCommentsList = !1, this.showFullCommentTitle = !0, this._likeFieldAvailable = !1, this._likeCount = 0, this._disLikeCount = 0, this._dislikeFieldAvailable = !1, this._commentsAvailable = !1, this._isLikeBtnClicked = !1, this._isDislikeBtnClicked = !1, this._relatedFeaturesOIDs = [], this._updating = !1, this._infoCard = p(), this._commentsList = p(), this._likeField = "", this._dislikeField = "", this._validFieldTypes = ["small-integer", "integer", "big-integer", "single", "long"], this.relatedTableId = "", this.loadingStatus = h(), this.commentClick = h(), this.commentSelect = h(), this.addComment = h(), this.likeOrDislikeClicked = h(), this.featureSelectionChange = h();
   }
   static {
     this.properties = { enableSnapping: 5, mapView: 0, graphics: 0, reportingOptions: 0, layerItemsHash: 0, showUserImageInCommentsList: 5, showFullCommentTitle: 5, _likeFieldAvailable: 16, _likeCount: 16, _disLikeCount: 16, _dislikeFieldAvailable: 16, _commentsAvailable: 16, _isLikeBtnClicked: 16, _isDislikeBtnClicked: 16, _relatedFeaturesOIDs: 16, _updating: 16 };
@@ -64,7 +64,9 @@ class F extends g {
       this.featureSelectionChange.emit(e.detail);
     }} position=relative ${u(this._infoCard)}></info-card>${(this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) && o`<div class="buttons-container">${this._commentsAvailable && o`<calcite-button appearance=transparent icon-end=speech-bubble kind=neutral @click=${() => {
       this.addComment.emit();
-    }} scale=m>${this._relatedFeaturesOIDs.length}</calcite-button>` || ""}${this._likeFieldAvailable && o`<calcite-button appearance=transparent icon-end=thumbs-up .kind=${this._isLikeBtnClicked ? "brand" : "neutral"} .loading=${this._updating} @click=${this.onLikeButtonClick} scale=m>${this._likeCount ?? this._selectedGraphic?.attributes[this._likeField] ?? 0}</calcite-button>` || ""}${this._dislikeFieldAvailable && o`<calcite-button appearance=transparent icon-end=thumbs-down .kind=${this._isDislikeBtnClicked ? "brand" : "neutral"} .loading=${this._updating} @click=${this.onDislikeButtonClick} scale=m>${this._disLikeCount ?? this._selectedGraphic?.attributes[this._dislikeField] ?? 0}</calcite-button>` || ""}</div>` || ""}${this.relatedTableId && this._commentsAvailable && o`<feature-list class="height-full" .mapView=${this.mapView} @featureSelect=${(e) => {
+    }} scale=m>${this._relatedFeaturesOIDs.length}</calcite-button>` || ""}${this._likeFieldAvailable && o`<calcite-button appearance=transparent icon-end=thumbs-up .kind=${this._isLikeBtnClicked ? "brand" : "neutral"} .loading=${this._updating} @click=${this.onLikeButtonClick} scale=m>${this._likeCount ?? this._selectedGraphic?.attributes[this._likeField] ?? 0}</calcite-button>` || ""}${this._dislikeFieldAvailable && o`<calcite-button appearance=transparent icon-end=thumbs-down .kind=${this._isDislikeBtnClicked ? "brand" : "neutral"} .loading=${this._updating} @click=${this.onDislikeButtonClick} scale=m>${this._disLikeCount ?? this._selectedGraphic?.attributes[this._dislikeField] ?? 0}</calcite-button>` || ""}</div>` || ""}${this.relatedTableId && this._commentsAvailable && o`<feature-list class="height-full" .mapView=${this.mapView} @featureClick=${() => {
+      this.commentClick.emit();
+    }} @featureSelect=${(e) => {
       this.commentSelect.emit(e.detail);
     }} page-size=5 .selectedLayerId=${this.relatedTableId} .showFullTitle=${this.showFullCommentTitle} .showUserImageInList=${this.showUserImageInCommentsList} text-size=small .whereClause=${i} ${u(this._commentsList)}></feature-list>` || ""}</calcite-panel>`;
   }
@@ -127,7 +129,7 @@ class F extends g {
       if (this._likeField = this.reportingOptions[i.id].likeField || "", this._dislikeField = this.reportingOptions[i.id].dislikeField || "", !this._likeField && !this._dislikeField)
         return;
       i.fields.forEach((e) => {
-        this._validFieldTypes.indexOf(e.type) > -1 && this.layerItemsHash && this.reportingOptions && this.layerItemsHash[i.id].supportsUpdate && (e.name === this._likeField && this.reportingOptions[i.id].like ? (this._likeFieldAvailable = !0, this._likeCount = this._selectedGraphic?.attributes[e.name]) : e.name === this._dislikeField && this.reportingOptions[i.id].dislike && (this._dislikeFieldAvailable = !0, this._disLikeCount = this._selectedGraphic?.attributes[e.name]));
+        this._validFieldTypes.indexOf(e.type) > -1 && this.layerItemsHash && this.reportingOptions && this.layerItemsHash[i.id].supportsUpdate && (e.name === this._likeField && this.reportingOptions[i.id].like ? (this._likeFieldAvailable = !0, this._likeCount = this._selectedGraphic?.attributes[e.name] || 0) : e.name === this._dislikeField && this.reportingOptions[i.id].dislike && (this._dislikeFieldAvailable = !0, this._disLikeCount = this._selectedGraphic?.attributes[e.name] || 0));
       }), this.getFromLocalStorage();
     }
   }
@@ -156,7 +158,7 @@ class F extends g {
     }
   }
   getFromLocalStorage() {
-    const i = this._selectedGraphic?.layer && this._selectedGraphic.layer.id, e = !Number.isNaN(Number(i)) && i?.toString() && localStorage[i];
+    const i = this._selectedGraphic?.layer && this._selectedGraphic.layer.id, e = i?.toString() && localStorage[i];
     if (e) {
       const t = JSON.parse(e).filter((l) => l.id === this._selectedGraphic?.getObjectId());
       t.length > 0 && (this._isLikeBtnClicked = t[0].like, this._isDislikeBtnClicked = t[0].dislike);

package/dist/components/feature-list/customElement.d.ts

@@ -98,6 +98,8 @@ export declare class FeatureList extends LitElement {
      * @returns Promise that resolves when the operation is complete
      */
     refresh(maintainPageState?: boolean): Promise<void>;
+    /** Emitted on demand when feature is clicked using the list */
+    readonly featureClick: TargetedEvent<this, void>;
     /** Emitted on demand when feature is selected using the list */
     readonly featureSelect: TargetedEvent<this, __esri.Graphic>;
 }