@esri/solutions-components 1.0.0-next.20250501.2 → 1.0.0-next.20250506.1

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

@@ -11,7 +11,7 @@ import "@arcgis/instant-apps-components";
 import { defineCustomElements as C } 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.20250501.2 */
+v1.0.0-next.20250506.1 */
 const S = $`@layer{/** @license
  * Copyright 2025 Esri
  *
@@ -40,29 +40,17 @@ class x extends F {
   static {
     this.shadowRootOptions = I;
   }
-  /**
-   * Called before every render().
-   * Update the filter list's initial definition expressions when the filter list component is available
-   */
   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 });
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Watch handlers
-  //
-  //--------------------------------------------------------------------------
-  /** Called each time the mapView prop is changed. */
   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"]);
   }
-  /** Called each time the mapView prop is changed. */
   async mapViewWatchHandler() {
     await this.mapView?.when(async () => {
       this.setInitExpressions(), await this.setMapView();
     });
   }
-  /** Called each time the floorLevel prop is changed. */
   async floorLevelWatchHandler() {
     if (this._editableLayerIds)
       for (const e of this._editableLayerIds) {
@@ -71,32 +59,21 @@ class x extends F {
       }
     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);
   }
-  /** Called each time the my reports toggle is changed */
   async showMyReportsOnlyWatchHandler() {
     this._editableLayerIds && (await this._updateFeatures(), this.refreshLists());
   }
-  /** Update sorting options when the sortOption prop is changed */
   async sortOptionWatchHandler() {
     this.updateSortingOptions();
   }
-  /** Called each time the filterByMapExtent prop is changed */
   filterByMapExtentChangeWatchHandler() {
     this.refreshLists();
   }
-  /** Called each time the layerExpressions prop is changed */
   async layerExpressionsWatchHandler() {
     this.resetFilterList(), await this.handleSelectedLayersFilter(), await this._featureList.value?.refresh();
   }
-  /** Called each time the showFeatureSymbol prop is changed */
   async showFeatureSymbolWatchHandler() {
     await this._featureList.value?.refresh();
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Methods (public)
-  //
-  //--------------------------------------------------------------------------
-  /** Method to update layerExpressions with the translated values */
   async updateLayerExpressionsT9n(e) {
     if (this._t9nLayerExpressions = e || this.layerExpressions, this._filterList.value != null)
       await this._filterList.value.handleUpdatingT9nData(this._t9nLayerExpressions);
@@ -106,12 +83,6 @@ class x extends F {
     }
     return Promise.resolve();
   }
-  /**
-   * Called once just after the component is first connected to the DOM.
-   * Create component translations and monitor the mediaQuery change to detect mobile/desktop mode
-   *
-   * @returns Promise when complete
-   */
   async load() {
     this._urlParamsLoaded = !1, await this._initModules(), await this.mapView?.when(async () => {
       this._layers = this.reportingOptions ? Object.keys(this.reportingOptions).filter((e) => {
@@ -120,7 +91,6 @@ class x extends F {
       }) : [], this.setInitExpressions(), await this.setMapView();
     });
   }
-  /** Renders the component. */
   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=${() => {
@@ -133,17 +103,6 @@ class x extends F {
       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() || ""}`;
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Functions (protected)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Load esri javascript api modules
-   *
-   * @returns Promise resolving when function is done
-   * @protected
-   */
   async _initModules() {
     const [e, t] = await _([
       "esri/core/reactiveUtils",
@@ -151,31 +110,14 @@ class x extends F {
     ]);
     this.reactiveUtils = e, this.FeatureFilter = t;
   }
-  /**
-   * Set the selected layer id and layer name
-   *
-   * @param layerId string layerId of the selected layer
-   * @param layerName string layerName of the selected layer
-   */
   async setSelectedLayer(e, t) {
     this._selectedLayerId = e, this._selectedLayer = this.mapView && await d(this.mapView, e), this._selectedLayerName = t, this._validLayers.forEach((i) => {
       this._nonVisibleValidLayers.find((r) => r.id === i.id) || i.set("visible", !e || i.id === e);
     });
   }
-  /**
-   * Returns the layers configuration
-   *
-   * @param layerId string layerId of the selected layer
-   * @returns Configuration for the layerId
-   */
   _getLayersConfig(e) {
     return this.reportingOptions && this.reportingOptions[e] ? this.reportingOptions[e] : null;
   }
-  /**
-   * Get the reporter app functionality
-   *
-   * @protected
-   */
   _getReporter() {
     const e = [];
     this._flowItems.forEach((i) => {
@@ -209,11 +151,6 @@ class x extends F {
     const t = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
     return a`<calcite-panel class=${`width-full ${t}`}>${this.mapView ? a`<calcite-flow>${e?.length > 0 && e || ""}</calcite-flow>` : a`<calcite-loader label scale=m></calcite-loader>`}</calcite-panel>`;
   }
-  /**
-   * Show filter component in modal
-   *
-   * @returns node to interact with any configured filters for the current layer
-   */
   filterModal() {
     return (this.layerExpressions ? this.layerExpressions.filter((t) => t.id === this._selectedLayerId) : []).length > 0 && a`<calcite-modal aria-labelledby=modal-title class="modal" kind=brand @calciteModalClose=${() => void this._closeFilter()} .open=${this._filterOpen} width-scale=s><div class="display-flex align-center" id=modal-title slot=header>${this._translations.filterLayerTitle.replace("{{title}}", this._selectedLayerName)}</div><div slot=content>${this.mapView && a`<instant-apps-filter-list close-btn .closeBtnOnClick=${() => void this._closeFilter()} combobox-overlay-positioning=fixed .layerExpressions=${this._currentLayerExpressions} @filterListReset=${() => {
       this._filterActive = !1, this._featureList.value && this._featureList.value.refresh();
@@ -221,40 +158,18 @@ class x extends F {
       this._filterList.value?.filterCount !== void 0 && this._handleFilterUpdate(this._filterList.value?.filterCount > 0);
     }} reset-btn .view=${this.mapView} ${o(this._filterList)}></instant-apps-filter-list>` || ""}</div></calcite-modal>` || "";
   }
-  /**
-   * When true the filter modal will be displayed
-   *
-   * @protected
-   */
   _toggleFilter() {
     this._filterOpen = !this._filterOpen;
   }
-  /**
-   * Close the filter modal
-   *
-   * @protected
-   */
   async _closeFilter() {
     this._filterOpen = !1, this._filterList.value != null && (this._currentLayerExpressions = await this._filterList.value.getCurrentLayerExpressions());
   }
-  /**
-   * On sort option click update the sort field and sort order
-   *
-   * @param sortField sort field
-   * @param sortOrder sort order
-   * @param sortOption selected sort option (Newest/Oldest/Highest Voted/Lowest Voted)
-   */
   async sortOptionClick(e, t, i) {
     this._updatedSorting = {
       field: e,
       order: t
     }, this._updatedSortOption = i;
   }
-  /**
-   * On sort button click, display the sorting options
-   *
-   * @returns Sort options list
-   */
   _toggleSort() {
     const e = this.reportingOptions && this.reportingOptions[this._selectedLayerId] && this.reportingOptions[this._selectedLayerId].like && this.reportingOptions[this._selectedLayerId].likeField;
     return a`<calcite-popover auto-close label offset-distance=0 .placement=${this.isMobile ? "leading-start" : "bottom-start"} pointer-disabled reference-element=sort-popover><calcite-list label selection-mode=single-persist><calcite-list-item .label=${this._translations.sortNewest} @calciteListItemSelect=${() => {
@@ -269,182 +184,69 @@ class x extends F {
       t && this.sortOptionClick(t, "asc", "lowestVoted");
     }} .selected=${this._updatedSortOption === "lowestVoted"} value=lowestVoted></calcite-list-item>` || ""}</calcite-list></calcite-popover>`;
   }
-  /**
-   * Reset the filter
-   *
-   * @protected
-   */
   async _handleFilterListReset() {
     this._filterActive = !1;
   }
-  /**
-   * Check if the layers definitionExpression has been modified and update the feature list depending on the applied filters
-   *
-   * @protected
-   */
   async _handleFilterUpdate(e) {
     this._showLoadingIndicator = !0, this._filterActive = e, this._featureList.value && await this._featureList.value.refresh(), this._showLoadingIndicator = !1;
   }
-  /**
-   * Get the feature layer list
-   *
-   * @returns the layer list items
-   * @protected
-   */
   getLayerListFlowItem() {
     return a`<calcite-flow-item .collapsed=${this.isMobile && this._sidePanelCollapsed} .heading=${this.reportsHeader} .selected=${this._flowItems[this._flowItems.length - 1] === "layer-list"}>${this.isMobile && this.getActionToExpandCollapsePanel() || ""}${this._hasValidLayers && this.enableNewReports && a`<calcite-button appearance=solid @click=${this.navigateToChooseCategory} slot=footer width=full>${this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText}</calcite-button>` || ""}<calcite-panel><layer-list .applyLayerViewFilter=${this.showMyReportsOnly} class="height-full" .filterByMapExtent=${this.filterByMapExtent} .layers=${this._editableLayerIds?.length > 0 ? this._editableLayerIds : this._layers} .mapView=${this.mapView} @layerSelect=${this.displayFeaturesList} @layersListLoaded=${this.layerListLoaded} show-feature-count show-next-icon ${o(this._layerList)}></layer-list></calcite-panel></calcite-flow-item>`;
   }
-  /**
-   * Get the layer list for creating a report
-   *
-   * @returns Choose category flow item
-   * @protected
-   */
   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>`;
   }
-  /**
-   * Get Feature create form of the selected feature layer
-   *
-   * @returns feature create form
-   * @protected
-   */
   getFeatureCreateFlowItem() {
     return a`<calcite-flow-item .collapsed=${this.isMobile && this._sidePanelCollapsed} .heading=${this._selectedLayerName} @calciteFlowItemBack=${this.backFromCreateFeaturePanel} .selected=${this._flowItems[this._flowItems.length - 1] === "feature-create"}>${this._showSubmitCancelButton && a`<div class=width-full slot=footer><calcite-button appearance=solid class="footer-top-button footer-button" @click=${this.onCreateFeatureSubmitButtonClick} width=full>${this._translations.submit}</calcite-button><calcite-button appearance=outline class=footer-button @click=${this.backFromCreateFeaturePanel} width=full>${this._translations.cancel}</calcite-button></div>` || ""}<calcite-panel><div class="progress-bar"><calcite-progress type=determinate .value=${this._updatedProgressBarStatus}></calcite-progress></div><create-feature customize-submit enable-search .enableSnapping=${this.enableSnapping} .floorLevel=${this.floorLevel} .formElements=${this._formElements.find((e) => e.id === this._selectedLayerId)} .isMobile=${this.isMobile} .mapView=${this.mapView} @drawComplete=${this.onFormReady} @editingAttachment=${this.showSubmitCancelButton} @fail=${this.createFeatureFailed} @modeChanged=${this.backFromCreateFeaturePanel} @progressStatus=${this.updatedProgressStatus} @success=${this.onReportSubmitted} .searchConfiguration=${this.searchConfiguration} .selectedLayerId=${this._selectedLayerId} .submitNewReportsMessage=${this.submitNewReportsMessage} ${o(this._createFeature)}></create-feature></calcite-panel></calcite-flow-item>`;
   }
-  /**
-   * Update the progress bar status when editor panel changes
-   *
-   * @param _evt Event which has progress bar status
-   * @protected
-   */
   updatedProgressStatus(e) {
     this._updatedProgressBarStatus = e.detail;
   }
-  /**
-   * When form is ready then show submit and cancel button
-   *
-   * @protected
-   */
   onFormReady() {
     this._showSubmitCancelButton = !0;
   }
-  /**
-   * When Add attachment panel is enabled hide the submit and cancel button
-   *
-   * @protected
-   */
   showSubmitCancelButton(e) {
     this._showSubmitCancelButton = !e.detail;
   }
-  /**
-   * On back from create feature, call submit editor to destroy the Editor widget instance
-   *
-   * @protected
-   */
   onCreateFeatureSubmitButtonClick() {
     this._createFeature.value && this._createFeature.value.submit();
   }
-  /**
-   * On back from create feature, call close editor to destroy the Editor widget instance
-   *
-   * @protected
-   */
   backFromCreateFeaturePanel() {
     this._createFeature.value && this.updateNonVisibleLayersOnMap(!1), this.backFromSelectedPanel();
   }
-  /**
-   * On back from create realated feature, call submit editor to destroy the Editor widget instance
-   *
-   * @protected
-   */
   onCreateRelatedFeatureSubmitButtonClick() {
     this._createRelatedFeature.value && this._createRelatedFeature.value.submit();
   }
-  /**
-   * On back from create related feature, call close editor to destroy the Editor widget instance
-   *
-   * @protected
-   */
   backFromCreateRelatedFeaturePanel() {
     this._createRelatedFeature.value && (this._showSubmitCancelButton = !1), this.backFromSelectedPanel();
   }
-  /**
-   * On creating the feature is failed, show the error message
-   *
-   * @param _evt Event which has feature failed message
-   * @protected
-   */
   createFeatureFailed(e) {
     console.error(e.detail), this._featureCreationFailedErrorMsg = e.detail.message;
   }
-  /**
-   * On submit report navigate to the layer list home page and refresh the layer list
-   *
-   * @protected
-   */
   async onReportSubmitted() {
     this.updateNonVisibleLayersOnMap(!1), await this.navigateToHomePage(), this._reportSubmitted = !0, this._updatedProgressBarStatus = 25, this._showFullPanel && this.updatePanelState(this._sidePanelCollapsed, !1);
   }
-  /**
-   * On adding the is failed, show the error message
-   *
-   * @param _evt Event which has comment failed message
-   * @protected
-   */
   addCommentFailed(e) {
     console.error(e.detail), this._addingCommentFailed = !0;
   }
-  /**
-   * On submit comment navigate to the feature list and refresh the feature details
-   *
-   * @protected
-   */
   async onCommentSubmitted() {
     this._commentSubmitted = !0, this.backFromSelectedPanel(), this._showLoadingIndicator = !0, this._featureDetails.value && await this._featureDetails.value.refresh(this._currentFeature), setTimeout(() => {
       this._showLoadingIndicator = !1;
     }, 300);
   }
-  /**
-   * Navigates to layer-list
-   *
-   * @protected
-   */
   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"];
   }
-  /**
-   * On layer select open the feature create flow item
-   *
-   * @param _evt Event which has details of selected layerId and layerName
-   * @protected
-   */
   async navigateToCreateFeature(e) {
     e.detail.layerId && e.detail.layerName && await this.setSelectedLayer(e.detail.layerId, e.detail.layerName), this.updateNonVisibleLayersOnMap(!0), this._getFormElements(), this._showSubmitCancelButton = !1, this.updatePanelState(!1, !0), this._flowItems = [...this._flowItems, "feature-create"];
   }
-  /**
-   * On report an incident button click open the create a report panel with the layer list
-   *
-   * @protected
-   */
   navigateToChooseCategory() {
     this.updatePanelState(!1, !0), this._flowItems = [...this._flowItems, "reporting-layer-list"];
   }
-  /**
-   * updates the non visible layer visibility
-   *
-   * @param visible boolean value to set the layers visibility
-   */
   updateNonVisibleLayersOnMap(e) {
     this._nonVisibleValidLayers.find((i) => i.id === this._selectedLayerId) && this._selectedLayer && this._selectedLayer.set("visible", e);
   }
-  /**
-   * When layer list is loaded, we will receive the list of layers, if its  means we don't have any valid layer to be listed
-   *
-   * @param _evt Event which has list of layers
-   * @protected
-   */
   async layerListLoaded(e) {
     if (this._layerList.value && this._flowItems[this._flowItems.length - 1] === "layer-list" || this._flowItems[0] === "feature-list") {
       const i = e.detail, s = this.mapView && await c(this.mapView), r = [];
@@ -453,20 +255,9 @@ class x extends F {
       }), this.handleMapClick(), this._hasValidLayers = r.length > 0, this._urlParamsLoaded || (this._urlParamsLoaded = !0, await this.loadFeatureFromURLParams());
     }
   }
-  /**
-   * On click of layer list item show feature list
-   *
-   * @param _evt Event which has details of selected layerId and layerName
-   * @protected
-   */
   async displayFeaturesList(e) {
     await this.setSelectedLayer(e.detail.layerId, e.detail.layerName), this.updateSortingOptions(), this.handleSelectedLayersFilter(), this._flowItems = [...this._flowItems, "feature-list"], this._prevSelectedLayerId = this._selectedLayerId;
   }
-  /**
-   * Updates the sorting options based on the selected sort preference.
-   *
-   * @protected
-   */
   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;
     this._updatedSorting = {
@@ -474,19 +265,9 @@ class x extends F {
       order: t
     }, this._updatedSortOption = !i && (e === "highestVoted" || e === "lowestVoted") ? "newest" : e;
   }
-  /**
-   * On back from filter panel get the filter's init state
-   *
-   * @protected
-   */
   async backFromFilterPanel() {
     this._filterList.value != null && (this._currentLayerExpressions = await this._filterList.value.getCurrentLayerExpressions()), this._featureList.value && await this._featureList.value.refresh(), this.backFromSelectedPanel();
   }
-  /**
-   * On back from selected panel navigate to the previous panel
-   *
-   * @protected
-   */
   backFromSelectedPanel() {
     this._updatedProgressBarStatus = 25;
     const e = [...this._flowItems];
@@ -496,37 +277,15 @@ class x extends F {
     }
     this._flowItems = [...e];
   }
-  /**
-   * Toggle side panel in case of mobile mode
-   *
-   * @protected
-   */
   toggleSidePanel() {
     this._sidePanelCollapsed = !this._sidePanelCollapsed, this.togglePanel.emit({ panelState: this._sidePanelCollapsed, isFormOpen: this._showFullPanel });
   }
-  /**
-   * Updates the Panel state
-   *
-   * @param sidePanelCollapsed side panel collapsed state
-   * @param showFullPanel updated panel state
-   * @protected
-   */
   updatePanelState(e, t) {
     this._sidePanelCollapsed = e, this._showFullPanel = t, this.togglePanel.emit({ panelState: this._sidePanelCollapsed, isFormOpen: this._showFullPanel });
   }
-  /**
-   * When feature is selected from list store that and show feature details
-   *
-   * @param _evt Event which has details of selected feature
-   */
   async onFeatureSelectFromList(e) {
     this._showLoadingIndicator = !0, await this.setSelectedFeatures([e.detail]), this._flowItems = [...this._flowItems, "feature-details"];
   }
-  /**
-   * Gets related table id of the selected feature's layer
-   *
-   * @protected
-   */
   async getRelatedTable() {
     const e = this._currentFeature?.layer, t = this.mapView && await g(this.mapView);
     e.relationships?.some((i) => {
@@ -534,56 +293,24 @@ class x extends F {
       return s && s.length > 0 ? (this._relatedTable = s[0], !0) : !1;
     });
   }
-  /**
-   * Show loading indicator while updating the feature details component
-   *
-   * @param isLoading is feature detail component loading
-   */
   async updatingFeatureDetails(e) {
     this._showLoadingIndicator = e;
   }
-  /**
-   * On Feature details change update the Layer title and the current selected layer id
-   *
-   * @param _evt Event hold the details of current feature graphic from the feature-details
-   * @protected
-   */
   async selectionChanged(e) {
     this.updatingFeatureDetails(!0), await this.setCurrentFeature(e.detail.selectedFeature[0]), this.highlightOnMap(e.detail.selectedFeature[0]), this._selectedFeatureIndex = e.detail.selectedFeatureIndex, this._featureDetails.value && await this._featureDetails.value.refresh(e.detail.selectedFeature[0]);
   }
-  /** Shows the add comments panel */
   showAddCommentsPanel() {
     this._flowItems = [...this._flowItems, "add-comment"];
   }
-  /**
-   * When comment is selected from list store that and show comment details
-   *
-   * @param _evt Event which has details of selected feature
-   * @protected
-   */
   async onCommentSelectFromList(e) {
     this._selectedRelatedFeature = [e.detail], this._flowItems = [...this._flowItems, "comment-details"];
   }
-  /**
-   * Get feature list of the selected feature layer
-   *
-   * @param layerId Layer id
-   * @param layerName Layer name
-   * @returns feature list node
-   * @protected
-   */
   getFeatureListFlowItem(e, t) {
     const i = this._getLayersConfig(this._selectedLayerId)?.reporting && this._layerItemsHash && this._layerItemsHash[this._selectedLayerId].supportsAdd, s = this._currentLayerExpressions?.length;
     return a`<calcite-flow-item .collapsed=${this.isMobile && this._sidePanelCollapsed} .heading=${t} .loading=${!this.isMobile && this._showLoadingIndicator} @calciteFlowItemBack=${this.backFromSelectedPanel} .selected=${this._flowItems[this._flowItems.length - 1] === "feature-list"}>${this._toggleSort()}<calcite-action icon=sort-ascending-arrow id=sort-popover slot=header-actions-end .text=${this._translations.sort} title=${this._translations.sort ?? u}></calcite-action>${s && a`<calcite-action icon=filter .indicator=${this._filterActive} @click=${() => {
       this.isMobile ? this._toggleFilter() : this._flowItems = [...this._flowItems, "filter-panel"];
     }} slot=header-actions-end .text=${this._translations.filter} title=${this._translations.filter ?? u}></calcite-action>` || ""}${this.isMobile && this.getActionToExpandCollapsePanel() || ""}${this.enableNewReports && i && a`<calcite-button appearance=solid @click=${this.navigateToCreateFeature} slot=footer width=full>${this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText}</calcite-button>` || ""}<calcite-panel>${a`<feature-list .applyLayerViewFilter=${this.showMyReportsOnly} class="height-full" .filterByMapExtent=${this.filterByMapExtent} highlight-on-hover .mapView=${this.mapView} .noFeaturesFoundMsg=${this._translations.featureErrorMsg} @featureSelect=${this.onFeatureSelectFromList} page-size=30 .reportingOptions=${this.reportingOptions} .selectedLayerId=${e} .showFeatureSymbol=${this.showFeatureSymbol} .sortingInfo=${this._updatedSorting} ${o(this._featureList)}></feature-list>`}</calcite-panel></calcite-flow-item>`;
   }
-  /**
-   * Returns the calcite-flow item for filter
-   *
-   * @returns Node
-   * @protected
-   */
   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=${() => {
     }} combobox-overlay-positioning=fixed .layerExpressions=${this._currentLayerExpressions} @filterListReset=${() => void this._handleFilterListReset()} @filterUpdate=${() => {
@@ -591,55 +318,24 @@ class x extends F {
       e !== void 0 && this._handleFilterUpdate(e > 0);
     }} .view=${this.mapView} ${o(this._filterList)}></instant-apps-filter-list>` || ""}</calcite-panel></calcite-flow-item>`;
   }
-  /**
-   * Returns the calcite-flow item for feature details
-   *
-   * @returns Node
-   */
   getFeatureDetailsFlowItem() {
     const e = this._selectedLayer?.relationships, t = this._getLayersConfig(this._selectedLayerId)?.comment && e && e.length > 0 && this._relatedTable;
     return a`<calcite-flow-item .collapsed=${this.isMobile && this._sidePanelCollapsed} .heading=${this._selectedLayerName} .loading=${this._showLoadingIndicator} @calciteFlowItemBack=${this.backFromSelectedPanel} .selected=${this._flowItems[this._flowItems.length - 1] === "feature-details"}>${this.isMobile && this.getActionToExpandCollapsePanel() || ""}${this.mapView && a`<instant-apps-social-share class=share-node flip-rtl popover-button-icon-scale=s remove-popover-offset scale=m share-button-color=neutral share-button-type=action slot=header-actions-end social-media .view=${this.mapView} ${o(this._shareNode)}></instant-apps-social-share>` || ""}${this._selectedFeature.length > 1 && this.getFeaturesPagination() || ""}<calcite-panel><feature-details class=full-height .enableSnapping=${this.enableSnapping} .graphics=${this._selectedFeature} .layerItemsHash=${this._layerItemsHash} .mapView=${this.mapView} @addComment=${this.showAddCommentsPanel} @commentSelect=${this.onCommentSelectFromList} @featureSelectionChange=${this.selectionChanged} @likeOrDislikeClicked=${() => {
       this._featureList.value && this._featureList.value.refresh(!0);
     }} @loadingStatus=${(i) => void this.updatingFeatureDetails(i.detail)} .reportingOptions=${this.reportingOptions} .showFullCommentTitle=${this.showFullCommentTitle} .showUserImageInCommentsList=${this.showUserImageInCommentsList} ${o(this._featureDetails)}></feature-details>${t && a`<calcite-button appearance=solid @click=${this.showAddCommentsPanel} slot=footer width=full>${this.commentButtonText || this._translations.comment}</calcite-button>` || ""}</calcite-panel></calcite-flow-item>`;
   }
-  /**
-   * Returns the pagination for the multiple features
-   * Create pagination to avoid the overlap of like, dislike and comment section
-   *
-   * @returns Node
-   */
   getFeaturesPagination() {
     return a`<div class="feature-pagination"><div><calcite-button appearance=transparent icon-start=chevron-left id=solutions-back @click=${() => this._featureDetails.value && void this._featureDetails.value.back()} scale=s width=full></calcite-button><calcite-tooltip placement=top reference-element=solutions-back><span>${this._translations.back}</span></calcite-tooltip></div><calcite-button appearance=transparent @click=${() => this._featureDetails.value && void this._featureDetails.value.toggleListView()} scale=s><span class="pagination-count">${this._getCount()}</span></calcite-button><div><calcite-button appearance=transparent icon-start=chevron-right id=solutions-next @click=${() => this._featureDetails.value && void this._featureDetails.value.next()} scale=s width=full></calcite-button><calcite-tooltip placement=top reference-element=solutions-next><span>${this._translations.next}</span></calcite-tooltip></div></div>`;
   }
-  /**
-   * Returns the calcite-flow item for comment details
-   *
-   * @returns Node
-   */
   getCommentDetailsFlowItem() {
     return a`<calcite-flow-item .collapsed=${this.isMobile && this._sidePanelCollapsed} .heading=${this._relatedTable?.title || ""} @calciteFlowItemBack=${this.backFromSelectedPanel} .selected=${this._flowItems[this._flowItems.length - 1] === "comment-details"}>${this.isMobile && this.getActionToExpandCollapsePanel() || ""}<calcite-panel><info-card .enableSnapping=${this.enableSnapping} .graphics=${this._selectedRelatedFeature} .mapView=${this.mapView}></info-card></calcite-panel></calcite-flow-item>`;
   }
-  /**
-   * Returns the calcite-flow item for add comment
-   *
-   * @returns Node
-   */
   getAddCommentFlowItem() {
     return a`<calcite-flow-item .collapsed=${this.isMobile && this._sidePanelCollapsed} .heading=${this._relatedTable?.title || ""} @calciteFlowItemBack=${this.backFromCreateRelatedFeaturePanel} .selected=${this._flowItems[this._flowItems.length - 1] === "add-comment"}>${this.isMobile && this.getActionToExpandCollapsePanel() || ""}<div class=width-full slot=footer>${this._showSubmitCancelButton && a`<div class=width-full slot=footer><calcite-button appearance=solid class="footer-top-button footer-button" @click=${this.onCreateRelatedFeatureSubmitButtonClick} width=full>${this._translations.submit}</calcite-button><calcite-button appearance=outline class=footer-button @click=${this.backFromCreateRelatedFeaturePanel} width=full>${this._translations.cancel}</calcite-button></div>` || ""}</div><calcite-panel><create-related-feature customize-submit .enableSnapping=${this.enableSnapping} .mapView=${this.mapView} @fail=${this.addCommentFailed} @formReady=${this.onFormReady} @isActionPending=${this.showSubmitCancelButton} @success=${this.onCommentSubmitted} .selectedFeature=${this._currentFeature} .table=${this._relatedTable} ${o(this._createRelatedFeature)}></create-related-feature></calcite-panel></calcite-flow-item>`;
   }
-  /**
-   * Sets the selected features and updates the first feature as the current selected feature
-   *
-   * @param features Graphics array of the features selected
-   */
   async setSelectedFeatures(e) {
     this._selectedFeature = e, await this.setCurrentFeature(this._selectedFeature.length ? this._selectedFeature[0] : void 0);
   }
-  /**
-   * Set the object id of the current selected feature, and also updates the current selected layer details
-   *
-   * @param selectedFeature Graphic currently shown in feature details
-   */
   async setCurrentFeature(e) {
     if (this._currentFeature = e, e && e.layer) {
       const t = e.layer;
@@ -648,11 +344,6 @@ class x extends F {
       this._editableLayerIds.length > 1 && (this.setSelectedLayer("", ""), this.handlePrevLayersFilter()), this._currentFeatureId = "";
     this._updateShareURL();
   }
-  /**
-   * Highlights the feature on map
-   *
-   * @param selectedFeature Graphic currently shown in feature details
-   */
   async highlightOnMap(e) {
     if (this.clearHighlights(), e && e.geometry && e.layer && e.layer.id !== void 0) {
       const t = this.mapView && await p(this.mapView, e.layer.id.toString());
@@ -664,48 +355,21 @@ class x extends F {
     }
     this.updatingFeatureDetails(!1);
   }
-  /**
-   * Clears the highlight
-   *
-   * @protected
-   */
   clearHighlights() {
     this._highlightHandle && this._highlightHandle.remove();
   }
-  /**
-   * Returns the action button to Expand/Collapse side panel in mobile mode
-   *
-   * @protected
-   */
   getActionToExpandCollapsePanel() {
     return a`<calcite-action .icon=${this._sidePanelCollapsed ? "chevrons-up" : "chevrons-down"} @click=${this.toggleSidePanel} slot=header-actions-end .text=${(this._sidePanelCollapsed ? this._translations.expand : this._translations.collapse) || ""}></calcite-action>`;
   }
-  /**
-   * Set the current map info when maps change
-   *
-   * @protected
-   */
   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({
       center: this._defaultCenter,
       zoom: this._defaultLevel
     }), this._defaultCenter = void 0, this._defaultLevel = void 0));
   }
-  /**
-   * Handle map click event
-   *
-   * @param layers Array of layerIds
-   * @protected
-   */
   handleMapClick() {
     this._mapClickHandle && this._mapClickHandle.remove(), this._mapClickHandle = this.reactiveUtils?.on(() => this.mapView, "click", this.onMapClick.bind(this));
   }
-  /**
-   * On map click do hitTest and get the clicked graphics from both reporting and non-reporting layers, and show feature details
-   *
-   * @param event IMapClick map click event details
-   * @protected
-   */
   async onMapClick(e) {
     if (this.mapView) {
       this.mapView.popupEnabled = !1;
@@ -739,31 +403,14 @@ class x extends F {
       }
     }
   }
-  /**
-   * Get the current index of total string
-   *
-   * @returns the index of total string
-   * @protected
-   */
   _getCount() {
     const e = (this._selectedFeatureIndex + 1).toString(), t = this._selectedFeature.length.toString();
     return this._translations.indexOfTotal.replace("{{index}}", e).replace("{{total}}", t);
   }
-  /**
-   * Applies a definition expression when floor field and level are available
-   *
-   * @param layer FeatureLayer on which the definitionExpression should be updated
-   * @protected
-   */
   _updateFloorDefinitionExpression(e) {
     const i = `${e?.floorInfo?.floorField} = '${this.floorLevel}'`, s = e.definitionExpression;
     e.definitionExpression = s && s?.indexOf(this._floorExpression) > -1 ? s.replace(this._floorExpression, i) : i, this._floorExpression = i;
   }
-  /**
-   * Gets the form template elements
-   *
-   * @protected
-   */
   _getFormElements() {
     const e = this._selectedLayer;
     if (e?.floorInfo?.floorField && this.floorLevel && e?.formTemplate) {
@@ -775,46 +422,23 @@ class x extends F {
       });
     }
   }
-  /**
-   * Returns the ids of all OR configured layers that support edits with the update capability
-   *
-   * @param hash each layer item details
-   * @param layersEditingDisabled list layer ids for which editing is disabled
-   * @returns array of editable layer ids
-   */
   reduceToConfiguredLayers(e, t) {
     return Object.keys(e).reduce((i, s) => {
       const r = this.reportingOptions ? this._getLayersConfig(s)?.visible : e[s].supportsAdd;
       return !t.includes(s) && r && i.push(s), i;
     }, []);
   }
-  /**
-   * Refreshes the layer and feature list
-   *
-   * @protected
-   */
   refreshLists() {
     setTimeout(() => {
       this._layerList.value && this._flowItems[this._flowItems.length - 1] === "layer-list" && this._layerList.value.refresh(), this._featureList.value && this._featureList.value.refresh();
     }, 50);
   }
-  /**
-   * updates the features for layer/feature list
-   *
-   * @protected
-   */
   async _updateFeatures() {
     for (const e of this._editableLayerIds) {
       const t = this.mapView && await p(this.mapView, e);
       t && (await this._showMyFeaturesOnly(t), t.layer?.floorInfo?.floorField && this.floorLevel && this._updateFloorDefinitionExpression(t.layer));
     }
   }
-  /**
-   * Show only loggedIn user's features
-   *
-   * @param featureLayerView on which the filter should be applied
-   * @protected
-   */
   async _showMyFeaturesOnly(e) {
     const t = (this.mapView?.map).portalItem.portal?.credential?.userId;
     if (t && e) {
@@ -824,22 +448,12 @@ class x extends F {
       }) : null;
     }
   }
-  /**
-   * Creates the list of layers to be listed in layer list
-   *
-   * @protected
-   */
   async getLayersToShowInList() {
     const e = this.mapView && await y(this.mapView, !0), t = this.mapView && await c(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;
   }
-  /**
-   * renders feature list
-   *
-   * @protected
-   */
   async renderFeaturesList() {
     this._flowItems = ["feature-list"];
     const e = {
@@ -847,11 +461,6 @@ class x extends F {
     };
     await this.layerListLoaded(e), await this.setSelectedLayer(this._validLayers[0].id, this._validLayers[0]?.title || ""), this.updateSortingOptions(), this.handleSelectedLayersFilter();
   }
-  /**
-   * Updates the share url for current selected feature
-   *
-   * @protected
-   */
   _updateShareURL() {
     const e = this._shareNode.value?.shareUrl;
     if (!e)
@@ -859,11 +468,6 @@ class x extends F {
     const t = new URL(e);
     this._selectedLayerId ? t.searchParams.set("layerid", this._selectedLayerId) : t.searchParams.delete("layerid"), this._selectedFeature?.length ? t.searchParams.set("oid", this._currentFeatureId) : t.searchParams.delete("oid"), this._shareNode.value && (this._shareNode.value.shareUrl = t.href);
   }
-  /**
-   * Navigates to selected features detail based on the URL params
-   *
-   * @protected
-   */
   async loadFeatureFromURLParams() {
     if (this.center && this.level && await this.mapView?.goTo({
       center: this.center.split(";").map(Number),
@@ -876,41 +480,21 @@ class x extends F {
       }
     }
   }
-  /**
-   * Handles updating the current layer expressions and definition expression for the selected layer
-   *
-   * @protected
-   */
   async handleSelectedLayersFilter() {
     if (this._selectedLayer) {
       const e = this.layerExpressions ? structuredClone(this.layerExpressions.filter((t) => t.id === this._selectedLayerId)) : [];
       this._t9nLayerExpressions != null && this.handleLayerExpressionsT9n(e, this._t9nLayerExpressions), this._currentLayerExpressions = e, this.setActiveDefinitionExpressions();
     }
   }
-  /**
-   * Handles updating the previous layer's definition expression to it's initial definition expression
-   *
-   * @protected
-   */
   async handlePrevLayersFilter() {
     if (this._prevSelectedLayerId) {
       const e = this.mapView && await d(this.mapView, this._prevSelectedLayerId);
       e && this._initDefExpressions && (e.definitionExpression = this._initDefExpressions[this._prevSelectedLayerId]);
     }
   }
-  /**
-   * Resets the selected layer's definition expression with the initial definition expression
-   *
-   * @protected
-   */
   resetFilterList() {
     this._filterList.value?.forceReset(), this._selectedLayer !== void 0 && this._initDefExpressions && (this._selectedLayer.definitionExpression = this._initDefExpressions[this._selectedLayerId], this._filterActive = !1);
   }
-  /**
-   * Sets the active definition expressions for the selected layer
-   *
-   * @protected
-   */
   setActiveDefinitionExpressions() {
     if (this._selectedLayer === void 0)
       return;
@@ -924,20 +508,10 @@ class x extends F {
       this._filterActive = e.length > 0, this.updateFilterLayerDefExpression(e, t.operator);
     }
   }
-  /**
-   * Updates the selected layer's definition expression based on the active expressions
-   *
-   * @protected
-   */
   updateFilterLayerDefExpression(e, t) {
     const i = this._initDefExpressions && this._initDefExpressions[this._selectedLayerId], s = e?.length > 0 && i ? `(${e.join(t)}) AND (${i})` : e.length > 0 ? e.join(t) : i;
     this._selectedLayer && (this._selectedLayer.definitionExpression = s);
   }
-  /**
-   * Sets the initial definition expressions for all the feature layers
-   *
-   * @protected
-   */
   setInitExpressions() {
     if (this._initDefExpressions = {}, this.mapView == null)
       return;
@@ -949,11 +523,6 @@ class x extends F {
       this._initDefExpressions && (this._initDefExpressions[i.id] = i.definitionExpression || "");
     });
   }
-  /**
-   * Handles updating the layer expressions with the translated strings
-   *
-   * @protected
-   */
   handleLayerExpressionsT9n(e, t) {
     e?.forEach((i) => {
       const s = t?.find((r) => r.id === i.id);