@esri/solutions-components 5.1.0-next.14 → 5.1.0-next.140

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

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
-import type { IImageExtraction, ILayerExpression, IMapInfo, IReportingOptions, ISearchConfiguration, theme } from "../../utils/interfaces.js";
+import type MapView from "@arcgis/core/views/MapView.js";
+import type { IImageExtraction, ILayerExpression, IMapInfo, IReportingOptions, ISearchConfiguration, ISortFields, ITextExtraction, theme } from "../../utils/interfaces.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
@@ -38,10 +38,16 @@ export abstract class CrowdsourceReporter extends LitElement {
       sortOldest: string;
       sortHighestVoted: string;
       sortLowestVoted: string;
+      sortAlphabetical: string;
+      reverseSortAlphabetical: string;
       resetFilter: string;
       close: string;
       submitBelow: string;
       noResultsMsg: string;
+      loading: string;
+      notification: string;
+      sortOptions: string;
+      toggleListView: string;
   } & T9nMeta<{
       createReportButtonText: string;
       share: string;
@@ -69,13 +75,21 @@ export abstract class CrowdsourceReporter extends LitElement {
       sortOldest: string;
       sortHighestVoted: string;
       sortLowestVoted: string;
+      sortAlphabetical: string;
+      reverseSortAlphabetical: string;
       resetFilter: string;
       close: string;
       submitBelow: string;
       noResultsMsg: string;
+      loading: string;
+      notification: string;
+      sortOptions: string;
+      toggleListView: string;
   }>;
   /** array: Configured AI image extraction field and prompt for the selected LayerId */
   accessor aiImageExtraction: IImageExtraction[];
+  /** array: Configured AI text extraction field and prompt for the selected LayerId */
+  accessor aiTextExtraction: ITextExtraction[];
   /**
    * string: Semicolon delimited numbers that will be used as the maps center point from URL params
    *
@@ -89,7 +103,7 @@ export abstract class CrowdsourceReporter extends LitElement {
    */
   accessor commentButtonText: string;
   /**
-   * string: User configurable nessage to display when a comment is submitted
+   * string: User configurable message to display when a comment is submitted
    *
    * @default ''
    */
@@ -136,6 +150,12 @@ export abstract class CrowdsourceReporter extends LitElement {
    * @default false
    */
   accessor enableLogin: boolean;
+  /**
+   * boolean: When true photo get location from the message selected for AI text Extraction
+   *
+   * @default false
+   */
+  accessor enableMessageLocation: boolean;
   /**
    * boolean: When true the user will be allowed to submit new reports
    *
@@ -207,7 +227,7 @@ export abstract class CrowdsourceReporter extends LitElement {
   /** IMapInfo[]: array of map infos (name and id) */
   accessor mapInfos: IMapInfo[];
   /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-  accessor mapView: __esri.MapView | undefined;
+  accessor mapView: MapView | undefined;
   /**
    * string: Object id of the feature from URL params
    *
@@ -284,6 +304,8 @@ export abstract class CrowdsourceReporter extends LitElement {
    * @default false
    */
   accessor showUserImageInCommentsList: boolean;
+  /** ISortFields: Configuration for sorting fields */
+  accessor sortFields: ISortFields | undefined;
   /**
    * string: sorting option to show the feature list
    *

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

@@ -1,35 +1,35 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as y } from "../../chunks/runtime.js";
-import { g as c, a as u, b as f, c as m, h as b, d as L } from "../../chunks/mapViewUtils.js";
-import { a as F } from "../../chunks/queryUtils.js";
-import { u as I } from "../../chunks/useT9n.js";
+import { c as w } from "../../chunks/runtime.js";
+import { d as c, g as u, a as f, b as m, j as b, e as L } from "../../chunks/mapViewUtils.js";
+import { c as I } from "../../chunks/queryUtils.js";
+import { u as F } from "../../chunks/useT9n.js";
 import { css as v, html as a, nothing as _ } from "lit";
-import { createRef as d, ref as n } from "lit-html/directives/ref.js";
-import { LitElement as $, createEvent as C, noShadowRoot as x, safeClassMap as g } from "@arcgis/lumina";
+import { createRef as d, ref as h } from "lit-html/directives/ref.js";
+import { LitElement as $, createEvent as S, noShadowRoot as x, safeClassMap as g } from "@arcgis/lumina";
 import "@arcgis/instant-apps-components";
-import { defineCustomElements as S } from "@arcgis/instant-apps-components/loader";
-import * as E from "@arcgis/core/core/reactiveUtils";
-import V from "@arcgis/core/layers/support/FeatureFilter";
-import * as P from "@arcgis/core/rest/identify";
-import k from "@arcgis/core/rest/support/IdentifyParameters";
-const O = v`@layer{:host{display:block;--calcite-label-margin-bottom: 0px;--solutions-theme-foreground-color: var(--calcite-color-foreground-1)}.width-full{width:100%!important}.height-full{height:100%!important}.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}.overflow-auto{overflow:auto}}`;
+import { defineCustomElements as C } from "@arcgis/instant-apps-components/loader";
+import * as E from "@arcgis/core/core/reactiveUtils.js";
+import V from "@arcgis/core/layers/support/FeatureFilter.js";
+import * as O from "@arcgis/core/rest/identify.js";
+import P from "@arcgis/core/rest/support/IdentifyParameters.js";
+const k = v`@layer{:host{display:block;--calcite-label-margin-bottom: 0px;--solutions-theme-foreground-color: var(--calcite-color-surface-2)}.width-full{width:100%!important}.height-full{height:100%!important}.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-surface-2)!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}.footer-button-container{width:100%;display:flex;gap:10px}.report-submitted-msg{position:absolute;z-index:1000}.share-node{display:flex}.overflow-auto{overflow:auto}}`;
 class M extends $ {
   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.reportingArea = !1, this.reportingAreaLayer = "", this.reportingAreaMessage = "", this.enablePhotoLocation = !1, this.aiImageExtraction = [], 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 = I({ 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._showFilterIcon = !1, this._createFeature = d(), this._currentFeatureId = "", this._editableLayerIds = [], this._featureDetails = d(), this._featureList = d(), this._selectedRelatedFeature = [], this._layerList = d(), this._createRelatedFeature = d(), this._layers = [], this._mapImageryLayersId = [], this._selectedFeature = [], this._selectedFeatureIndex = 0, this._selectedLayerId = "", this._shareNode = d(), this._urlParamsLoaded = !1, this._validLayers = [], this._nonVisibleValidLayers = [], this._showFullPanel = !1, this._floorExpression = "", this._formElements = [], this._prevSelectedLayerId = "", this._t9nLayerExpressions = [], this._reportSubmittedAlertNode = d(), this._commentSubmittedAlertNode = d(), this._sortPopoverNode = d(), this.togglePanel = C(), 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.enablePhotoLocation = !1, this.enableMessageLocation = !1, this.aiImageExtraction = [], this.aiTextExtraction = [], 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 = F({ 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._showFilterIcon = !1, this._createFeature = d(), this._currentFeatureId = "", this._editableLayerIds = [], this._featureDetails = d(), this._featureList = d(), this._selectedRelatedFeature = [], this._layerList = d(), this._createRelatedFeature = d(), this._layers = [], this._mapImageryLayersId = [], this._selectedFeature = [], this._selectedFeatureIndex = 0, this._selectedLayerId = "", this._shareNode = d(), this._urlParamsLoaded = !1, this._validLayers = [], this._nonVisibleValidLayers = [], this._showFullPanel = !1, this._floorExpression = "", this._formElements = [], this._prevSelectedLayerId = "", this._t9nLayerExpressions = [], this._reportSubmittedAlertNode = d(), this._commentSubmittedAlertNode = d(), this._sortPopoverNode = d(), this.togglePanel = S(), C(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, reportingArea: 5, reportingAreaLayer: 1, reportingAreaMessage: 1, enablePhotoLocation: 5, aiImageExtraction: 0, _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, _showFilterIcon: 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, enablePhotoLocation: 5, enableMessageLocation: 5, aiImageExtraction: 0, aiTextExtraction: 0, sortFields: 0, _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, _showFilterIcon: 16 };
   }
   static {
-    this.styles = O;
+    this.styles = k;
   }
   static {
     this.shadowRootOptions = x;
   }
   willUpdate(e) {
-    e.has("isMobile") && this.isMobileWatchHandler(this.isMobile), e.has("mapView") && this.hasUpdated && this.mapViewWatchHandler(), e.has("floorLevel") && this.floorLevelWatchHandler(), (e.has("reportingAreaLayer") || e.has("reportingArea") && this.hasUpdated) && setTimeout(() => {
+    e.has("isMobile") && this.isMobileWatchHandler(this.isMobile), e.has("mapView") && this.hasUpdated && this.mapViewWatchHandler(), e.has("floorLevel") && this.floorLevelWatchHandler(), e.has("reportingOptions") && this.hasUpdated && this.reportingOptionsWatchHandler(), (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?.updateInitDefExpressions({ initDefExpressions: this._initDefExpressions });
+    }, 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?.updateInitDefExpressions({ initDefExpressions: this._initDefExpressions }), e.has("sortFields") && this.hasUpdated && this._selectedLayerId && (this._updatedSortOption === "alphabetical" || this._updatedSortOption === "reverseAlphabetical") && this.sortFieldsWatchHandler();
   }
   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"]);
@@ -39,6 +39,9 @@ class M extends $ {
       this.setInitExpressions(), await this.setMapView();
     });
   }
+  async reportingOptionsWatchHandler() {
+    this.setInitExpressions(), await this.setMapView(), this.refreshLists();
+  }
   async floorLevelWatchHandler() {
     if (this._editableLayerIds)
       for (const e of this._editableLayerIds) {
@@ -53,6 +56,15 @@ class M extends $ {
   async sortOptionWatchHandler() {
     this.updateSortingOptions();
   }
+  sortFieldsWatchHandler() {
+    const e = this._getConfiguredLayerSortInfo(this._selectedLayerId);
+    if (e?.id === this._selectedLayerId && this._flowItems[this._flowItems.length - 1] === "feature-list") {
+      if (e?.fields.length > 0) {
+        const t = this._updatedSorting?.order === "asc" ? "asc" : "desc";
+        this.sortOptionClick(e.fields[0], t, this._updatedSortOption);
+      }
+    } else this._flowItems[this._flowItems.length - 1] === "feature-list" && this.updateSortingOptions();
+  }
   filterByMapExtentChangeWatchHandler() {
     this.refreshLists();
   }
@@ -81,13 +93,13 @@ class M extends $ {
   }
   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 a`${this._reportSubmitted && a`<calcite-alert auto-close class=${`${e} report-submitted-msg`} icon=check-circle kind=success .label=${this._translations.notification} @calciteAlertClose=${() => {
       this._reportSubmitted = !1;
-    }} open placement=top><div slot=message .innerHTML=${(this.reportSubmittedMessage || this._translations.submitMsg) ?? ""} ${n(this._reportSubmittedAlertNode)}></div></calcite-alert>` || ""}${this._featureCreationFailedErrorMsg && a`<calcite-alert auto-close class=${g(e)} icon=x-octagon kind=danger label @calciteAlertClose=${() => {
+    }} open placement=top><div slot=message .innerHTML=${(this.reportSubmittedMessage || this._translations.submitMsg) ?? ""} ${h(this._reportSubmittedAlertNode)}></div></calcite-alert>` || ""}${this._featureCreationFailedErrorMsg && a`<calcite-alert auto-close class=${g(e)} icon=x-octagon kind=danger .label=${this._translations.notification} @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 && a`<calcite-alert auto-close class=${`report-submitted ${e}`} icon=check-circle kind=success .label=${this._translations.notification} @calciteAlertClose=${() => {
       this._commentSubmitted = !1;
-    }} open placement=top><div slot=message .innerHTML=${(this.commentSubmittedMessage || this._translations.commentSubmittedMsg) ?? ""} ${n(this._commentSubmittedAlertNode)}></div></calcite-alert>` || ""}${this._addingCommentFailed && a`<calcite-alert auto-close class=${g(e)} icon=x-octagon kind=danger label @calciteAlertClose=${() => {
+    }} open placement=top><div slot=message .innerHTML=${(this.commentSubmittedMessage || this._translations.commentSubmittedMsg) ?? ""} ${h(this._commentSubmittedAlertNode)}></div></calcite-alert>` || ""}${this._addingCommentFailed && a`<calcite-alert auto-close class=${g(e)} icon=x-octagon kind=danger .label=${this._translations.notification} @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() || ""}`;
   }
@@ -133,7 +145,7 @@ class M extends $ {
       }
     });
     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 a`<calcite-panel class=${`width-full ${t}`}>${this.mapView ? a`<calcite-flow>${e?.length > 0 && e || ""}</calcite-flow>` : a`<calcite-loader .label=${this._translations.loading} scale=m></calcite-loader>`}</calcite-panel>`;
   }
   filterModal() {
     return (this.layerExpressions ? this.layerExpressions.filter((t) => t.id === this._selectedLayerId) : []).length > 0 && a`<calcite-dialog aria-labelledby=modal-title class="modal" .heading=${this._translations.filterLayerTitle.replace("{{title}}", this._selectedLayerName)} kind=brand @calciteDialogClose=${() => {
@@ -144,7 +156,7 @@ class M extends $ {
       this._filterActive = !1, this._featureList.value && this._featureList.value.refresh();
     }} @filterUpdate=${() => {
       this._filterList?.filterCount !== void 0 && this._handleFilterUpdate(this._filterList?.filterCount > 0);
-    }} .view=${this.mapView} ${n(this._setFilterList)}></instant-apps-filter-list>` || ""}</div></calcite-dialog>` || "";
+    }} .view=${this.mapView} ${h(this._setFilterList)}></instant-apps-filter-list>` || ""}</div></calcite-dialog>` || "";
   }
   _setFilterList(e) {
     this._filterList = e, e && (e.autoUpdateUrl = !1, e.resetBtn = this.isMobile, e.resetFiltersOnDisconnect = !1, e.zoomBtn = !1);
@@ -164,19 +176,28 @@ class M extends $ {
       order: t
     }, this._updatedSortOption = i, this._sortPopoverNode.value && (this._sortPopoverNode.value.open = !1);
   }
+  _getConfiguredLayerSortInfo(e) {
+    return this.sortFields && this.sortFields.layers.find((t) => t.id === e) || null;
+  }
   _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 ${n(this._sortPopoverNode)}><calcite-list label selection-mode=single-persist><calcite-list-item .label=${this._translations.sortNewest} @calciteListItemSelect=${() => {
+    const e = this.reportingOptions && this.reportingOptions[this._selectedLayerId] && this.reportingOptions[this._selectedLayerId].like && this.reportingOptions[this._selectedLayerId].likeField, t = this._getConfiguredLayerSortInfo(this._selectedLayerId);
+    return a`<calcite-popover auto-close .label=${this._translations.sortOptions} offset-distance=0 .placement=${this.isMobile ? "leading-start" : "bottom-start"} pointer-disabled reference-element=sort-popover ${h(this._sortPopoverNode)}><calcite-list .label=${this._translations.sortOptions} 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=${() => {
-      const t = this.reportingOptions && this.reportingOptions[this._selectedLayerId].likeField;
-      t !== void 0 && this.sortOptionClick(t, "desc", "highestVoted");
+      const i = this.reportingOptions && this.reportingOptions[this._selectedLayerId].likeField;
+      i !== void 0 && this.sortOptionClick(i, "desc", "highestVoted");
     }} .selected=${this._updatedSortOption === "highestVoted"} value=highestVoted></calcite-list-item><calcite-list-item .label=${this._translations.sortLowestVoted} @calciteListItemSelect=${() => {
-      const t = this.reportingOptions && this.reportingOptions[this._selectedLayerId].likeField;
-      t && this.sortOptionClick(t, "asc", "lowestVoted");
-    }} .selected=${this._updatedSortOption === "lowestVoted"} value=lowestVoted></calcite-list-item>` || ""}</calcite-list></calcite-popover>`;
+      const i = this.reportingOptions && this.reportingOptions[this._selectedLayerId].likeField;
+      i && this.sortOptionClick(i, "asc", "lowestVoted");
+    }} .selected=${this._updatedSortOption === "lowestVoted"} value=lowestVoted></calcite-list-item>` || ""}${t && a`<calcite-list-item .label=${this._translations.sortAlphabetical} @calciteListItemSelect=${() => {
+      const i = this._getConfiguredLayerSortInfo(this._selectedLayerId);
+      i?.fields && this.sortOptionClick(i.fields[0], "asc", "alphabetical");
+    }} .selected=${this._updatedSortOption === "alphabetical"} value=alphabetical></calcite-list-item><calcite-list-item .label=${this._translations.reverseSortAlphabetical} @calciteListItemSelect=${() => {
+      const i = this._getConfiguredLayerSortInfo(this._selectedLayerId);
+      i?.fields && this.sortOptionClick(i.fields[0], "desc", "reverseAlphabetical");
+    }} .selected=${this._updatedSortOption === "reverseAlphabetical"} value=reverseAlphabetical></calcite-list-item>` || ""}</calcite-list></calcite-popover>`;
   }
   async _handleFilterListReset() {
     this._filterActive = !1;
@@ -185,14 +206,14 @@ class M extends $ {
     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} .loading=${this._showLoadingIndicator} .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>`;
+    return a`<calcite-flow-item .collapsed=${this.isMobile && this._sidePanelCollapsed} .heading=${this.reportsHeader} .loading=${this._showLoadingIndicator} .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 ${h(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>`;
   }
   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" .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 app-name=reporter .aiImageExtraction=${this.aiImageExtraction} class="height-full overflow-auto" customize-submit enable-search .enablePhotoLocation=${this.enablePhotoLocation} .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>`;
+    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 app-name=reporter .aiImageExtraction=${this.aiImageExtraction} .aiTextExtraction=${this.aiTextExtraction} class="height-full overflow-auto" customize-submit .enableSearch=${this.enableSearch} .enablePhotoLocation=${this.enablePhotoLocation} .enableMessageLocation=${this.enableMessageLocation} .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 ${h(this._createFeature)}></create-feature></calcite-panel></calcite-flow-item>`;
   }
   updatedProgressStatus(e) {
     this._updatedProgressBarStatus = e.detail;
@@ -236,7 +257,12 @@ class M extends $ {
     }, 300);
   }
   async navigateToHomePage() {
-    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"];
+    if (await this.setSelectedFeatures([]), this._editableLayerIds.length === 1)
+      this._featureList.value && await this._featureList.value.refresh(), this._flowItems = ["feature-list"];
+    else {
+      const e = this.mapView && await c(this.mapView, this._prevSelectedLayerId);
+      this.floorLevel && e?.floorInfo?.floorField && this._updateFloorDefinitionExpression(e), this._layerList.value && await this._layerList.value.refresh(), 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._showNextButton = !1, this.updatePanelState(!1, !0), this._flowItems = [...this._flowItems, "feature-create"];
@@ -267,11 +293,11 @@ class M extends $ {
     this._showLoadingIndicator = !0, await this.setSelectedLayer(e.detail.layerId, e.detail.layerName), this.updateSortingOptions(), this.handleSelectedLayersFilter(), this._flowItems = [...this._flowItems, "feature-list"], this._prevSelectedLayerId = this._selectedLayerId, this._showLoadingIndicator = !1;
   }
   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" || e === "alphabetical" ? "asc" : "desc", i = this.reportingOptions?.[this._selectedLayerId]?.like ? this.reportingOptions?.[this._selectedLayerId]?.likeField : "", l = this._getConfiguredLayerSortInfo(this._selectedLayerId)?.fields?.[0] || "", r = this._selectedLayer && (e === "newest" || e === "oldest") ? this._selectedLayer?.objectIdField : e === "alphabetical" || e === "reverseAlphabetical" ? l : i, n = !!i && (e === "highestVoted" || e === "lowestVoted"), o = !!l && (e === "alphabetical" || e === "reverseAlphabetical");
     this._updatedSorting = {
-      field: s || "",
+      field: r || "",
       order: t
-    }, this._updatedSortOption = !i && (e === "highestVoted" || e === "lowestVoted") ? "newest" : e;
+    }, this._updatedSortOption = n || o || !(e === "highestVoted" || e === "lowestVoted" || e === "alphabetical" || e === "reverseAlphabetical") ? e : "newest";
   }
   async backFromFilterPanel() {
     this._filterList != null && (this._currentLayerExpressions = await this._filterList.getCurrentLayerExpressions(), this._showFilterIcon = this._currentLayerExpressions?.length > 0), this._featureList.value && await this._featureList.value.refresh(), this.backFromSelectedPanel();
@@ -315,11 +341,11 @@ class M extends $ {
   }
   getFeatureListFlowItem(e, t) {
     const i = this._getLayersConfig(this._selectedLayerId)?.reporting && this._layerItemsHash && this._layerItemsHash[this._selectedLayerId].supportsAdd, s = this._showFilterIcon;
-    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 appearance=solid icon=sort-ascending-arrow id=sort-popover slot=header-actions-end .text=${this._translations.sort} title=${this._translations.sort ?? _}></calcite-action>${s && a`<calcite-action appearance=solid 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 ?? _}></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 ?? _}></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>`;
+    }} @featureSelect=${this.onFeatureSelectFromList} page-size=30 .reportingOptions=${this.reportingOptions} .selectedLayerId=${e} show-error-when-no-features .showFeatureSymbol=${this.showFeatureSymbol} .sortingInfo=${this._updatedSorting} ${h(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=${() => {
@@ -328,20 +354,20 @@ class M extends $ {
     }} @filterUpdate=${() => {
       const e = this._filterList?.filterCount;
       e !== void 0 && this._handleFilterUpdate(e > 0);
-    }} .view=${this.mapView} ${n(this._setFilterList)}></instant-apps-filter-list>` || ""}</calcite-panel></calcite-flow-item>`;
+    }} .view=${this.mapView} ${h(this._setFilterList)}></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} ${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=${() => {
+    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} ${h(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) => {
       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>`;
+    }} .reportingOptions=${this.reportingOptions} .showFullCommentTitle=${this.showFullCommentTitle} .showUserImageInCommentsList=${this.showUserImageInCommentsList} ${h(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 a`<div class="feature-pagination"><div><calcite-button appearance=transparent icon-start=chevron-left icon-flip-rtl=both 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-flip-rtl=both 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 icon-flip-rtl=both id=solutions-back .label=${this._translations.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 .label=${this._translations.toggleListView} @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-flip-rtl=both icon-start=chevron-right id=solutions-next .label=${this._translations.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} @selectionChanged=${() => {
@@ -349,7 +375,7 @@ class M extends $ {
     }}></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} ${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} ${h(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);
@@ -376,7 +402,7 @@ class M extends $ {
     this._highlightHandle && this._highlightHandle.remove();
   }
   getActionToExpandCollapsePanel() {
-    return a`<calcite-action appearance=solid .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() {
     this.mapView && await f(this.mapView), 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({
@@ -396,11 +422,11 @@ class M extends $ {
       t.results.length > 0 && t.results.forEach((o) => {
         o.type === "graphic" && i.push(o.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 h = s.concat(l);
-      if (h.length > 0) {
+      const n = s.concat(l);
+      if (n.length > 0) {
         this.mapView.popupEnabled = !0;
         const o = {
-          features: h,
+          features: n,
           location: e.mapPoint,
           updateLocationEnabled: !r
           // if identify graphics is present then dont update location
@@ -429,19 +455,19 @@ class M extends $ {
     });
   }
   async _getIdentifiedGraphics(e) {
-    const t = new k({
+    const t = new P({
       geometry: e,
       tolerance: 3,
       mapExtent: this.mapView?.extent
     });
     let i, s = [];
     for (const r of this._mapImageryLayersId) {
-      const h = this.mapView && await c(this.mapView, r);
-      if (h?.url && t)
+      const n = this.mapView && await c(this.mapView, r);
+      if (n?.url && t)
         try {
-          const o = await P?.identify(h.url, t);
+          const o = await O?.identify(n.url, t);
           if (o?.results?.length) {
-            s = o.results, i = h;
+            s = o.results, i = n;
             break;
           }
         } catch (o) {
@@ -450,7 +476,7 @@ class M extends $ {
     }
     const l = [];
     return s.forEach((r) => {
-      const h = r.layerId, o = i?.sublayers?.items.find((w) => w.id === h), p = o?.popupTemplate;
+      const n = r.layerId, o = i?.sublayers?.items.find((y) => y.id === n), p = o?.popupTemplate;
       o?.popupEnabled && p && (r.feature.popupTemplate = p, l.push(r.feature));
     }), l;
   }
@@ -526,7 +552,7 @@ class M extends $ {
     }), this.layerId && this.objectId) {
       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);
+        const t = this.mapView && await I([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]);
       }
     }
@@ -582,13 +608,13 @@ class M extends $ {
     e?.forEach((i) => {
       const s = t?.find((l) => l.id === i.id);
       s != null && (i.title = s.title, i.expressions?.forEach((l) => {
-        const r = s.expressions?.find((h) => h.id === l.id);
+        const r = s.expressions?.find((n) => n.id === l.id);
         r != null && (l.name = r.name);
       }));
     });
   }
 }
-y("crowdsource-reporter", M);
+w("crowdsource-reporter", M);
 export {
   M as CrowdsourceReporter
 };

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

@@ -5,7 +5,7 @@ import { E as i, a as c, c as p } from "../../chunks/pciUtils.js";
 import { createRef as s, ref as n } from "lit-html/directives/ref.js";
 import { LitElement as m, createEvent as y } from "@arcgis/lumina";
 const d = o`:host{display:block;--calcite-label-margin-bottom: 0}.label-display{display:block;padding-bottom:1rem}`;
-class b extends m {
+class v extends m {
   constructor() {
     super(...arguments), this._densityElement = s(), this._typeElement = s(), this._severityElement = s(), this._types = Object.keys(i).filter((e) => !Number.isNaN(Number(i[e]))), this.deductValueComplete = y();
   }
@@ -19,10 +19,10 @@ class b extends m {
     return l`<calcite-input max=100 min=0 type=number ${n(this._densityElement)}></calcite-input>`;
   }
   _getTypeInput() {
-    return l`<calcite-select label ${n(this._typeElement)}>${this._types.map((e, t) => l`<calcite-option .value=${i[e].toString()}>${`${e} (${t + 1})`}</calcite-option>`)}</calcite-select>`;
+    return l`<calcite-select label=Type ${n(this._typeElement)}>${this._types.map((e, t) => l`<calcite-option .value=${i[e].toString()}>${`${e} (${t + 1})`}</calcite-option>`)}</calcite-select>`;
   }
   _getSeverityInput() {
-    return l`<calcite-select label ${n(this._severityElement)}><calcite-option .value=${c.H}>\r\n          High</calcite-option><calcite-option .value=${c.M}>\r\n          Medium</calcite-option><calcite-option .value=${c.L}>\r\n          Low</calcite-option></calcite-select>`;
+    return l`<calcite-select label=Severity ${n(this._severityElement)}><calcite-option .value=${c.H}>\r\n          High</calcite-option><calcite-option .value=${c.M}>\r\n          Medium</calcite-option><calcite-option .value=${c.L}>\r\n          Low</calcite-option></calcite-select>`;
   }
   _getCalculateInput() {
     const e = this._typeElement.value && Number.parseFloat(this._typeElement.value.value), t = this._severityElement.value && this._severityElement.value.value, a = this._densityElement.value && Number.parseFloat(this._densityElement.value.value);
@@ -36,7 +36,7 @@ class b extends m {
       alert("Type, severity, and a density number are required");
   }
 }
-u("deduct-calculator", b);
+u("deduct-calculator", v);
 export {
-  b as DeductCalculator
+  v as DeductCalculator
 };

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

@@ -1,5 +1,5 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type FeatureLayer from "@arcgis/core/layers/FeatureLayer.js";
 import type { ButtonType, EditType } from "../../utils/interfaces.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Icon as Icon } from "@esri/calcite-components/components/calcite-icon";
@@ -46,7 +46,7 @@ export abstract class DeleteButton extends LitElement {
   /** number[]: The ids that would be deleted */
   accessor ids: (number | string)[];
   /** esri/views/layers/FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html */
-  accessor layer: __esri.FeatureLayer | undefined;
+  accessor layer: FeatureLayer | undefined;
   /**
    * boolean: When true the delete button will show the number of features that will be deleted
    *

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

@@ -24,7 +24,7 @@ class r extends d {
     this._setDeleteEnabled();
   }
   render() {
-    return e`${this.buttonType === "button" ? e`<calcite-button appearance=outline .disabled=${!this._deleteEndabled} id=solutions-delete kind=danger @click=${() => this._delete()} width=full>${this.showDeleteCount ? this._translations.deleteCount?.replace("{{n}}", this.ids?.length.toString()) : this._translations.delete}</calcite-button>` : e`<calcite-action appearance=solid .disabled=${!this._deleteEndabled} id=${this.icon ?? n} @click=${() => this._delete()} scale=s .text=${this._translations.delete}><calcite-button appearance=transparent .iconStart=${this.icon} kind=danger>${this._translations.delete}</calcite-button></calcite-action>`}${this._deleteMessage()}<calcite-tooltip placement=bottom .referenceElement=${this.buttonType === "button" ? "solutions-delete" : this.icon}><span>${this._translations.delete}</span></calcite-tooltip>`;
+    return e`${this.buttonType === "button" ? e`<calcite-button appearance=outline .disabled=${!this._deleteEndabled} id=solutions-delete kind=danger @click=${() => this._delete()} width=full>${this.showDeleteCount ? this._translations.deleteCount?.replace("{{n}}", this.ids?.length.toString()) : this._translations.delete}</calcite-button>` : e`<calcite-action .disabled=${!this._deleteEndabled} id=${this.icon ?? n} @click=${() => this._delete()} scale=s .text=${this._translations.delete}><calcite-button appearance=transparent aria-hidden=true .iconStart=${this.icon} kind=danger>${this._translations.delete}</calcite-button></calcite-action>`}${this._deleteMessage()}<calcite-tooltip placement=bottom .referenceElement=${this.buttonType === "button" ? "solutions-delete" : this.icon}><span>${this._translations.delete}</span></calcite-tooltip>`;
   }
   loaded() {
     this._setDeleteEnabled();

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

@@ -1,5 +1,5 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type FeatureLayer from "@arcgis/core/layers/FeatureLayer.js";
 import type { EditType } from "../../utils/interfaces.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
@@ -28,8 +28,8 @@ export abstract class DeleteDialog extends LitElement {
   }>;
   /** number[]: The ids that would be deleted */
   accessor ids: (number | string)[];
-  /** esri/views/layers/FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html */
-  accessor layer: __esri.FeatureLayer | undefined;
+  /** FeatureLayer: The layer from which features will be deleted */
+  accessor layer: FeatureLayer | undefined;
   /**
    * boolean: When true the delete dialog will be displayed
    *

package/dist/components/edit-card/customElement.d.ts

@@ -1,6 +1,8 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type Graphic from "@arcgis/core/Graphic.js";
+import type MapView from "@arcgis/core/views/MapView.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { ArcgisEditor } from "@arcgis/map-components/components/arcgis-editor/customElement";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
 export abstract class EditCard extends LitElement {
@@ -10,7 +12,13 @@ export abstract class EditCard extends LitElement {
    *
    * @internal
    */
-  protected _translations: { enableEditing: string; } & T9nMeta<{ enableEditing: string; }>;
+  protected _translations: {
+      enableEditing: string;
+      loading: string;
+  } & T9nMeta<{
+      enableEditing: string;
+      loading: string;
+  }>;
   /**
    * When true allow multiple editing
    *
@@ -36,9 +44,9 @@ export abstract class EditCard extends LitElement {
    */
   accessor graphicIndex: number;
   /** esri/Graphic[]: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html */
-  accessor graphics: __esri.Graphic[];
-  /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-  accessor mapView: __esri.MapView | undefined;
+  accessor graphics: Graphic[];
+  /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views/MapView.html */
+  accessor mapView: MapView | undefined;
   /**
    * When true the component is displayed
    *
@@ -50,14 +58,14 @@ export abstract class EditCard extends LitElement {
   /** Event emitted upon selection of a table and invocation of feature addition from the related layer during an active edit workflow. */
   readonly creatingFeature: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Emit the Editor when it is initialized */
-  readonly editorInitialized: import("@arcgis/lumina").TargetedEvent<this, __esri.Editor>;
+  readonly editorInitialized: import("@arcgis/lumina").TargetedEvent<this, ArcgisEditor>;
   /** Emitted on demand when edits are completed on current edit layer */
   readonly editsComplete: import("@arcgis/lumina").TargetedEvent<this, void>;
   /**
    * Emitted on demand when the editor is closed to handle
    * things like attachment updates that don't fire the standard edit update event when complete
    */
-  readonly refreshGraphics: import("@arcgis/lumina").TargetedEvent<this, __esri.Graphic[]>;
+  readonly refreshGraphics: import("@arcgis/lumina").TargetedEvent<this, Graphic[]>;
   readonly "@eventTypes": {
     closeEdit: EditCard["closeEdit"]["detail"];
     creatingFeature: EditCard["creatingFeature"]["detail"];