@esri/solutions-components 1.2.0-next.56 → 1.2.0-next.58

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

@@ -0,0 +1 @@
+{"version":3,"file":"customElement.js","sources":["../../../src/components/crowdsource-reporter/crowdsource-reporter.tsx"],"sourcesContent":["/**\r\n * @license\r\n * Copyright 2025 Esri\r\n *\r\n * Licensed under the Apache License, Version 2.0 (the 'License');\r\n * you may not use this file except in compliance with the License.\r\n * You may obtain a copy of the License at\r\n *\r\n *    http://www.apache.org/licenses/LICENSE-2.0\r\n *\r\n * Unless required by applicable law or agreed to in writing, software\r\n * distributed under the License is distributed on an 'AS IS' BASIS,\r\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n * See the License for the specific language governing permissions and\r\n * limitations under the License.\r\n */\r\n\r\nimport type {\r\n  ILayerExpression,\r\n  ILayerItemsHash,\r\n  IMapClick,\r\n  IMapInfo,\r\n  IReportingOption,\r\n  IReportingOptions,\r\n  ISearchConfiguration,\r\n  ISortingInfo,\r\n  theme\r\n} from '../../utils/interfaces';\r\nimport type T9nStrings from './assets/t9n/messages.en.json';\r\nimport {\r\n  getAllFeatureLayers,\r\n  getAllTables,\r\n  getFeatureLayerView,\r\n  getLayerOrTable,\r\n  getMapLayerHash,\r\n  highlightFeatures\r\n} from '../../utils/mapViewUtils';\r\nimport { queryFeaturesByID } from '../../utils/queryUtils';\r\nimport { useT9n } from '../../controllers/useT9n';\r\nimport type { PropertyValues } from 'lit';\r\nimport { createRef } from 'lit-html/directives/ref.js';\r\nimport {\r\n  LitElement,\r\n  property,\r\n  createEvent,\r\n  Fragment,\r\n  h,\r\n  method,\r\n  noShadowRoot,\r\n  state,\r\n} from '@arcgis/lumina';\r\nimport type {\r\n  JsxNode,\r\n} from '@arcgis/lumina';\r\nimport { styles } from './crowdsource-reporter.css';\r\nimport type { CreateRelatedFeature } from '../create-related-feature/create-related-feature';\r\nimport type { LayerList } from '../layer-list/layer-list';\r\nimport type { FeatureList } from '../feature-list/feature-list';\r\nimport type { FeatureDetails } from '../feature-details/feature-details';\r\nimport type { CreateFeature } from '../create-feature/create-feature';\r\nimport '@arcgis/instant-apps-components';\r\nimport { defineCustomElements } from '@arcgis/instant-apps-components/loader';\r\nimport * as reactiveUtils from '@arcgis/core/core/reactiveUtils';\r\nimport FeatureFilter from '@arcgis/core/layers/support/FeatureFilter';\r\nimport * as identify from '@arcgis/core/rest/identify';\r\nimport IdentifyParameters from '@arcgis/core/rest/support/IdentifyParameters';\r\n\r\ndeclare global {\r\n  interface DeclareElements {\r\n    'crowdsource-reporter': CrowdsourceReporter;\r\n  }\r\n}\r\n\r\nexport class CrowdsourceReporter extends LitElement {\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Overrides (internal)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  static override styles = styles;\r\n\r\n  static override shadowRootOptions = noShadowRoot;\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    // IAC assets\r\n    defineCustomElements(window);\r\n  }\r\n\r\n  /**\r\n   * Called before every render().\r\n   * Update the filter list's initial definition expressions when the filter list component is available\r\n   */\r\n  override willUpdate(\r\n    changes: PropertyValues<this>\r\n  ): void {\r\n    /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.\r\n     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method\r\n     Please refactor your code to reduce the need for this check.\r\n     Docs: https://qawebgis.esri.com/components/lumina/transition-from-stencil#watching-for-property-changes */\r\n    if (changes.has('isMobile')) {\r\n      void this.isMobileWatchHandler(this.isMobile);\r\n    }\r\n\r\n    if (changes.has('mapView') && this.hasUpdated) {\r\n      void this.mapViewWatchHandler();\r\n    }\r\n\r\n    if (changes.has('floorLevel')) {\r\n      void this.floorLevelWatchHandler();\r\n    }\r\n\r\n    if (changes.has('reportingAreaLayer') || changes.has('reportingArea') && this.hasUpdated) {\r\n      // added some timeout for when the value of prop is updated in create feature then call the method\r\n      setTimeout(() => {\r\n        if (this._createFeature.value) {\r\n          void this._createFeature.value.refresh(this.floorLevel);\r\n        }\r\n      }, 50);\r\n    }\r\n\r\n    if (changes.has('showMyReportsOnly') && (this.hasUpdated || this.showMyReportsOnly !== false)) {\r\n      void this.showMyReportsOnlyWatchHandler();\r\n    }\r\n\r\n    if (changes.has('sortOption') && (this.hasUpdated || this.sortOption !== 'newest')) {\r\n      void this.sortOptionWatchHandler();\r\n    }\r\n\r\n    if (changes.has('filterByMapExtent') && (this.hasUpdated || this.filterByMapExtent !== false)) {\r\n      this.filterByMapExtentChangeWatchHandler();\r\n    }\r\n\r\n    if (changes.has('layerExpressions') && (this.hasUpdated || this.layerExpressions?.length > 0)) {\r\n      void this.layerExpressionsWatchHandler();\r\n    }\r\n\r\n    if (changes.has('showFeatureSymbol') && (this.hasUpdated || this.showFeatureSymbol !== false)) {\r\n      void this.showFeatureSymbolWatchHandler();\r\n    }\r\n\r\n    if (this._flowItems.includes('filter-panel') || this._filterOpen) {\r\n      void this._filterList?.updateInitDefExpressions({ initDefExpressions: this._initDefExpressions });\r\n    }\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** string: Semicolon delimited numbers that will be used as the maps center point from URL params */\r\n  @property() center = '';\r\n\r\n  /** string: User configurable text to display for the comment button */\r\n  @property() commentButtonText = '';\r\n\r\n  /** string: User configurable nessage to display when a comment is submitted */\r\n  @property() commentSubmittedMessage = '';\r\n\r\n  /** string: Item ID of the web map that should be selected by default */\r\n  @property() defaultWebmap = '';\r\n\r\n  /** string: The text that will display under the title on the landing page */\r\n  @property() description = '';\r\n\r\n  /** boolean: When true the anonymous users will be allowed to submit reports and comments */\r\n  @property() enableAnonymousAccess = false;\r\n\r\n  /** boolean: When true the anonymous users will be allowed to submit comments */\r\n  @property() enableAnonymousComments = false;\r\n\r\n  /** boolean: When true the user will be allowed to submit comments */\r\n  @property() enableComments = false;\r\n\r\n  /** boolean: when true the home widget will be available */\r\n  @property() enableHome = true;\r\n\r\n  /** boolean: When true the user will be provided a login page */\r\n  @property() enableLogin = false;\r\n\r\n  /** boolean: When true the user will be allowed to submit new reports */\r\n  @property() enableNewReports = false;\r\n\r\n  /** boolean: when true the search widget will be available */\r\n  @property() enableSearch = true;\r\n\r\n  /** When true the snapping options will be exposed */\r\n  @property() enableSnapping = false;\r\n\r\n  /** boolean: when true the zoom widget will be available */\r\n  @property() enableZoom = true;\r\n\r\n  /** boolean: When true the application will be in mobile mode, controls the mobile or desktop view */\r\n  @property() isMobile = false;\r\n\r\n  /** ILayerExpression[]: Array of layer expressions for layers (filter configuration) */\r\n  @property() layerExpressions: ILayerExpression[] = [];\r\n\r\n  /** string: Layer id of the feature from URL params */\r\n  @property() layerId = '';\r\n\r\n  /** string: Id of the zoom level from URL params */\r\n  @property() level = '';\r\n\r\n  /** string: The text that will display at the top of the landing page */\r\n  @property() loginTitle = '';\r\n\r\n  /** IMapInfo[]: array of map infos (name and id) */\r\n  @property() mapInfos: IMapInfo[] = [];\r\n\r\n  /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */\r\n  @property() mapView: __esri.MapView | undefined;\r\n\r\n  /** string: Object id of the feature from URL params */\r\n  @property() objectId = '';\r\n\r\n  /** string: The word(s) to display in the reports submit button */\r\n  @property() reportButtonText = '';\r\n\r\n  /** IReportingOptions: Key options for reporting */\r\n  @property() reportingOptions: IReportingOptions | undefined;\r\n\r\n  /** string: The word(s) to display in the reports header */\r\n  @property() reportsHeader = '';\r\n\r\n  /** string: The message to display when the report has been submitted */\r\n  @property() reportSubmittedMessage = '';\r\n\r\n  /** ISearchConfiguration: Configuration details for the Search widget */\r\n  @property() searchConfiguration: ISearchConfiguration | undefined;\r\n\r\n  /** boolean: When true the comments from all users will be visible */\r\n  @property() showComments = false;\r\n\r\n  /** boolean: When true the profile image of the comment creator will be shown in the comments list */\r\n  @property() showUserImageInCommentsList = false;\r\n\r\n  /** boolean: When true the feature symbology of the feature will shown in the features list */\r\n  @property() showFeatureSymbol = false;\r\n\r\n  /** boolean: To show only those features which are created by the logged in user */\r\n  @property() showMyReportsOnly? = false;\r\n\r\n  /** string: Text to be displayed that will allow user to know they can submit new reports */\r\n  @property() submitNewReportsMessage = '';\r\n\r\n  /** theme: light | dark theme to be used */\r\n  @property() theme: theme = 'light';\r\n\r\n  /** number: default scale to zoom to when zooming to a single point feature */\r\n  @property() zoomToScale: number | undefined;\r\n\r\n  /** string: selected floor level */\r\n  @property() floorLevel = '';\r\n\r\n  /** boolean: When false comment will shown in single line in the comments list */\r\n  @property() showFullCommentTitle = true;\r\n\r\n  /** boolean: When true only the features from current extent will be shown */\r\n  @property() filterByMapExtent = false;\r\n\r\n  /** string: sorting option to show the feature list */\r\n  @property() sortOption = 'newest';\r\n\r\n  /** boolean: When true reporting area layer should be honored if it exists */\r\n  @property() reportingArea = false;\r\n\r\n  /** string: Reporting polyon layer for creating feature */\r\n  @property() reportingAreaLayer = '';\r\n\r\n  /** string: Message to be displayed when feature is outside the reportingAreaLayer */\r\n  @property() reportingAreaMessage = '';\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  State (internal)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** string: Error message when feature creation fails */\r\n  @state() _featureCreationFailedErrorMsg = '';\r\n\r\n  /** boolean: When true an indicator will be shown on the action */\r\n  @state() _filterActive = false;\r\n\r\n  /** string[]: Reporter flow items list */\r\n  @state() _flowItems: string[] = [];\r\n\r\n  /** boolean: Will be true when has valid reporting layers (This will be used to show the create report button on layer list) */\r\n  @state() _hasValidLayers = false;\r\n\r\n  /** IMapInfo: The current map info stores configuration details */\r\n  @state() _mapInfo: IMapInfo | undefined;\r\n\r\n  /** boolean: When true show the success message in the panel */\r\n  @state() _reportSubmitted = false;\r\n\r\n  /** string: The selected feature layer's name from the layer's list */\r\n  @state() _selectedLayerName = '';\r\n\r\n  /** boolean: When true show the submit and cancel button */\r\n  @state() _showSubmitCancelButton = false;\r\n\r\n  /** boolean: show loading indicator in the reporter component */\r\n  @state() _showLoadingIndicator = false;\r\n\r\n  /** boolean: Controls the state for panel in mobile view */\r\n  @state() _sidePanelCollapsed = false;\r\n\r\n  /**\r\n   * Contains the translations for this component.\r\n   * All UI strings should be defined here.\r\n   */\r\n  @state() _translations = useT9n<typeof T9nStrings>({ name: 'crowdsource-reporter', blocking: true });\r\n\r\n  /** number: Show the updated progress bar status */\r\n  @state() _updatedProgressBarStatus = 25;\r\n\r\n  /** ISortingInfo: Sort the feature list depending on the sort field and order */\r\n  @state() _updatedSorting: ISortingInfo | undefined;\r\n\r\n  /** string: Selected sort option */\r\n  @state() _updatedSortOption = 'newest';\r\n\r\n  /** boolean: When true show the success message in the panel */\r\n  @state() _commentSubmitted = false;\r\n\r\n  /** string: Error message when feature creation fails */\r\n  @state() _addingCommentFailed = false;\r\n\r\n  /** boolean: When true the filter modal will be displayed */\r\n  @state() _filterOpen = false;\r\n\r\n  /** boolean: When true show the next button */\r\n  @state() _showNextButton = false;\r\n\r\n  /** boolean: When true disable the submit and cancel button */\r\n  @state() _submitNextButtonDisabled = false;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** HTMLCreateFeatureElement: Create Feature component instance */\r\n  private _createFeature = createRef<CreateFeature['el']>();\r\n\r\n  /** ObjectId of the feature currently shown in the details */\r\n  private _currentFeatureId = '';\r\n\r\n  /** number[]: X,Y pair used to center the map */\r\n  private _defaultCenter: number[] | undefined;\r\n\r\n  /** number: zoom level the map should go to */\r\n  private _defaultLevel: number | undefined;\r\n\r\n  /** string[]: Configured/all layers id from current map which can be used for reporting */\r\n  private _editableLayerIds: string[] = [];\r\n\r\n  /** HTMLCreateFeatureElement: features details component instance */\r\n  private _featureDetails = createRef<FeatureDetails['el']>();\r\n\r\n  /** HTMLFeatureListElement: Create feature list component instance */\r\n  private _featureList = createRef<FeatureList['el']>();\r\n\r\n  /** __esri.Graphic: The current selected feature */\r\n  private _currentFeature: __esri.Graphic | undefined;\r\n\r\n  /** __esri.Graphic: The selected related feature from layer table */\r\n  private _selectedRelatedFeature: __esri.Graphic[] = [];\r\n\r\n  /** __esri.FeatureLayer: The related table from map */\r\n  private _relatedTable: __esri.FeatureLayer | undefined;\r\n\r\n  /** HTMLInstantAppsFilterListElement: Component from Instant Apps that supports interacting with the current filter config */\r\n  private _filterList: HTMLInstantAppsFilterListElement | undefined;\r\n\r\n  /** __esri.Handle: Highlight handles of the selections */\r\n  private _highlightHandle: __esri.Handle | undefined;\r\n\r\n  /** HTMLLayerListElement: Create Layer list component instance */\r\n  private _layerList = createRef<LayerList['el']>();\r\n\r\n  /** HTMLCreateFeatureElement: Create Feature component instance */\r\n  private _createRelatedFeature = createRef<CreateRelatedFeature['el']>();\r\n\r\n  /** string[]: list of configured reporting layer ids */\r\n  private _layers: string[] = [];\r\n\r\n  /** IHandle: The map click handle */\r\n  private _mapClickHandle: IHandle | undefined;\r\n\r\n  /**string[]: Imagery layers ids */\r\n  private _mapImageryLayersId: string[] = [];\r\n\r\n  /** __esri.Graphic: The selected feature */\r\n  private _selectedFeature: __esri.Graphic[] = [];\r\n\r\n  /** number: selected feature index */\r\n  private _selectedFeatureIndex = 0;\r\n\r\n  /** string: The selected feature layer's id from the layer's list */\r\n  private _selectedLayerId = '';\r\n\r\n  /** HTMLInstantAppsSocialShareElement: Share element */\r\n  private _shareNode = createRef<HTMLInstantAppsSocialShareElement>();\r\n\r\n  /** boolean: Maintains a flag to know if urls params are loaded or not */\r\n  private _urlParamsLoaded = false;\r\n\r\n  /** __esri.FeatureLayer[]: Valid layers from the current map */\r\n  private _validLayers: __esri.FeatureLayer[] = [];\r\n\r\n  /** __esri.FeatureLayer[]: layer from map whom visibility is disabled */\r\n  private _nonVisibleValidLayers: __esri.FeatureLayer[] = [];\r\n\r\n  /** __esri.FeatureLayer: Selected feature layer from the layer list */\r\n  private _selectedLayer: __esri.FeatureLayer | undefined;\r\n\r\n  /** ILayerItemsHash: LayerDetailsHash for each layer in the map */\r\n  private _layerItemsHash: ILayerItemsHash | undefined;\r\n\r\n  /** boolean: when true allow panel to show in full height */\r\n  private _showFullPanel = false;\r\n\r\n  /** string: The current floor expression */\r\n  private _floorExpression = '';\r\n\r\n  /** _esri.Element: form elements of the selected layer */\r\n  private _formElements: any[] = [];\r\n\r\n  /** string: Previous selected layer id */\r\n  private _prevSelectedLayerId = '';\r\n\r\n  /** ILayerExpression[]: current LayerExpressions based on the selected layer */\r\n  private _currentLayerExpressions: any;\r\n\r\n  /** { [key: string]: string }: definitionExpressions for each layer */\r\n  private _initDefExpressions: { [key: string]: string } | undefined;\r\n\r\n  /** ILayerExpression[]: translated values for layerExpressions */\r\n  private _t9nLayerExpressions: ILayerExpression[] = [];\r\n\r\n  /** HTMLCalciteAlertElement: Calcite alert element for report submitted message */\r\n  private _reportSubmittedAlertNode = createRef<HTMLDivElement>();\r\n\r\n  /** HTMLCalciteAlertElement: Calcite alert element for comment submitted message */\r\n  private _commentSubmittedAlertNode = createRef<HTMLDivElement>();\r\n\r\n  /** HTMLCalcitePopoverElement: Calcite Popover element for sorting options */\r\n  private _sortPopoverNode = createRef<HTMLCalcitePopoverElement>();\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Watch handlers\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Called each time the mapView prop is changed. */\r\n  private async isMobileWatchHandler(\r\n    isMobile: boolean\r\n  ): Promise<void> {\r\n    this.updatePanelState(false, this._showFullPanel);\r\n    if (isMobile && this._flowItems[this._flowItems.length - 1] === 'filter-panel') {\r\n      // while switching always first take back from filter panel to store currentLayerExpressions to restore the filter applied\r\n      await this.backFromFilterPanel();\r\n      this._filterOpen = true;\r\n    } else if (!isMobile && this._filterOpen) {\r\n      await this._closeFilter();\r\n      this._flowItems = [...this._flowItems, 'filter-panel'];\r\n    }\r\n  }\r\n\r\n  /** Called each time the mapView prop is changed. */\r\n  private async mapViewWatchHandler(): Promise<void> {\r\n    await this.mapView?.when(async () => {\r\n      this.setInitExpressions();\r\n      await this.setMapView();\r\n    });\r\n  }\r\n\r\n  /** Called each time the floorLevel prop is changed. */\r\n  private async floorLevelWatchHandler(): Promise<void> {\r\n    if (this._editableLayerIds) {\r\n      // updates all layer's defination expression when floorLevel is changed\r\n      // then refresh the components to update features\r\n      for (const layerId of this._editableLayerIds) {\r\n        const layer = this.mapView && await getLayerOrTable(this.mapView, layerId);\r\n        if (layer && layer.floorInfo?.floorField) {\r\n          this._updateFloorDefinitionExpression(layer);\r\n        }\r\n      }\r\n    }\r\n    // refresh layer list when user is on layer list panel\r\n    if (this._flowItems[this._flowItems.length - 1] === 'layer-list' && this._layerList.value) {\r\n      await this._layerList.value.refresh();\r\n    }\r\n    if (this._featureList.value) {\r\n      void this._featureList.value.refresh();\r\n    }\r\n    if (this._createFeature.value) {\r\n      void this._createFeature.value.refresh(this.floorLevel);\r\n    }\r\n  }\r\n\r\n  /** Called each time the my reports toggle is changed */\r\n  private async showMyReportsOnlyWatchHandler(): Promise<void> {\r\n    if (this._editableLayerIds) {\r\n      await this._updateFeatures();\r\n      this.refreshLists();\r\n    }\r\n  }\r\n\r\n  /** Update sorting options when the sortOption prop is changed */\r\n  private async sortOptionWatchHandler(): Promise<void> {\r\n    this.updateSortingOptions();\r\n  }\r\n\r\n  /** Called each time the filterByMapExtent prop is changed */\r\n  private filterByMapExtentChangeWatchHandler(): void {\r\n    this.refreshLists();\r\n  }\r\n\r\n  /** Called each time the layerExpressions prop is changed */\r\n  private async layerExpressionsWatchHandler(): Promise<void> {\r\n    await this.resetFilterList();\r\n    await this.handleSelectedLayersFilter();\r\n    await this._featureList.value?.refresh();\r\n  }\r\n\r\n  /** Called each time the showFeatureSymbol prop is changed */\r\n  private async showFeatureSymbolWatchHandler(): Promise<void> {\r\n    await this._featureList.value?.refresh();\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Methods (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Method to update layerExpressions with the translated values */\r\n  @method()\r\n  async updateLayerExpressionsT9n(\r\n    t9nLayerExpressions: ILayerExpression[]\r\n  ): Promise<void> {\r\n    this._t9nLayerExpressions = t9nLayerExpressions ? t9nLayerExpressions : this.layerExpressions;\r\n    if (this._filterList != null) {\r\n      await this._filterList.handleUpdatingT9nData(this._t9nLayerExpressions);\r\n    } else if (this._currentLayerExpressions != null) {\r\n      const currentLayerExpressions = structuredClone(this._currentLayerExpressions);\r\n      this.handleLayerExpressionsT9n(currentLayerExpressions, this._t9nLayerExpressions);\r\n      this._currentLayerExpressions = currentLayerExpressions;\r\n    }\r\n    return Promise.resolve();\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Events (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Emitted when toggle panel button is clicked in reporter */\r\n  togglePanel = createEvent<{ panelState: boolean; isFormOpen: boolean }>();\r\n\r\n  /**\r\n   * Called once just after the component is first connected to the DOM.\r\n   * Create component translations and monitor the mediaQuery change to detect mobile/desktop mode\r\n   *\r\n   * @returns Promise when complete\r\n   */\r\n  async load(): Promise<void> {\r\n    this._urlParamsLoaded = false;\r\n    await this.mapView?.when(async () => {\r\n      //set configured layers array which are enabled for data collection\r\n      this._layers = this.reportingOptions\r\n        ? Object.keys(this.reportingOptions).filter((layerId: string) => {\r\n          const reportingOption = layerId && this.reportingOptions && this.reportingOptions[layerId];\r\n          return reportingOption && reportingOption.visible;\r\n        })\r\n        : [];\r\n      this.setInitExpressions();\r\n      await this.setMapView();\r\n    });\r\n  }\r\n\r\n  /** Renders the component. */\r\n  override render(): JsxNode {\r\n    const themeClass = this.theme === 'dark' ? 'calcite-mode-dark' : 'calcite-mode-light';\r\n    return (\r\n      <>\r\n        {this._reportSubmitted && (\r\n          <calcite-alert\r\n            autoClose\r\n            class={`${themeClass} report-submitted-msg`}\r\n            icon='check-circle'\r\n            kind='success'\r\n            label=''\r\n            oncalciteAlertClose={() => {\r\n              this._reportSubmitted = false;\r\n            }}\r\n            open\r\n            placement={'top'}\r\n          >\r\n            <div\r\n              ref={this._reportSubmittedAlertNode}\r\n              slot='message'\r\n              innerHTML={this.reportSubmittedMessage || this._translations.submitMsg}>\r\n            </div>\r\n          </calcite-alert>\r\n        )}\r\n        {this._featureCreationFailedErrorMsg && (\r\n          <calcite-alert\r\n            autoClose\r\n            class={themeClass}\r\n            icon='x-octagon'\r\n            kind='danger'\r\n            label=''\r\n            oncalciteAlertClose={() => {\r\n              this._featureCreationFailedErrorMsg = '';\r\n            }}\r\n            open\r\n            placement={'top'}\r\n          >\r\n            <div slot='title'>\r\n              {this._translations.error}\r\n            </div>\r\n            <div slot='message'>\r\n              {this._featureCreationFailedErrorMsg}\r\n            </div>\r\n          </calcite-alert>\r\n        )}\r\n        {this._commentSubmitted && (\r\n          <calcite-alert\r\n            autoClose\r\n            class={`report-submitted ${themeClass}`}\r\n            icon='check-circle'\r\n            kind='success'\r\n            label=''\r\n            oncalciteAlertClose={() => {\r\n              this._commentSubmitted = false;\r\n            }}\r\n            open\r\n            placement={'top'}\r\n          >\r\n            <div\r\n              ref={this._commentSubmittedAlertNode}\r\n              slot='message'\r\n              innerHTML={this.commentSubmittedMessage || this._translations.commentSubmittedMsg}>\r\n            </div>\r\n          </calcite-alert>\r\n        )}\r\n        {this._addingCommentFailed && (\r\n          <calcite-alert\r\n            autoClose\r\n            class={themeClass}\r\n            icon='x-octagon'\r\n            kind='danger'\r\n            label=''\r\n            oncalciteAlertClose={() => {\r\n              this._addingCommentFailed = false;\r\n            }}\r\n            open\r\n            placement={'top'}\r\n          >\r\n            <div slot='title'>\r\n              {this._translations.error}\r\n            </div>\r\n            <div slot='message'>\r\n              {this._translations.addingCommentFailedMsg}\r\n            </div>\r\n          </calcite-alert>\r\n        )}\r\n        <div>\r\n          <calcite-shell contentBehind>\r\n            {this._getReporter()}\r\n          </calcite-shell>\r\n        </div>\r\n        {this.isMobile && this.filterModal()}\r\n      </>\r\n    );\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Functions (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Called after each render\r\n   */\r\n  override updated(): void {\r\n    this._adjustAlertStyles();\r\n  }\r\n\r\n  /**\r\n   * Set the selected layer id and layer name\r\n   *\r\n   * @param layerId string layerId of the selected layer\r\n   * @param layerName string layerName of the selected layer\r\n   */\r\n  private async setSelectedLayer(\r\n    layerId: string,\r\n    layerName: string\r\n  ): Promise<void> {\r\n    this._selectedLayerId = layerId;\r\n    this._selectedLayer = this.mapView && await getLayerOrTable(this.mapView, layerId);\r\n    this._selectedLayerName = layerName;\r\n    //show only current layer on map and hide other valid editable layers\r\n    //if layerId is empty then show all the layers on map\r\n    this._validLayers.forEach(layer => {\r\n      const nonVisibileValidLayer = this._nonVisibleValidLayers.find(l => l.id === layer.id);\r\n      if (!nonVisibileValidLayer) {\r\n        layer.set('visible', !layerId || layer.id === layerId);\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Returns the layers configuration\r\n   *\r\n   * @param layerId string layerId of the selected layer\r\n   * @returns Configuration for the layerId\r\n   */\r\n  private _getLayersConfig(\r\n    layerId: string\r\n  ): IReportingOption | null {\r\n    return this.reportingOptions && this.reportingOptions[layerId] ? this.reportingOptions[layerId] : null;\r\n  }\r\n\r\n  /**\r\n   * Get the reporter app functionality\r\n   *\r\n   * @private\r\n   */\r\n  private _getReporter(): JsxNode {\r\n    const renderLists: JsxNode[] = [];\r\n    this._flowItems.forEach(item => {\r\n      switch (item) {\r\n        case 'layer-list':\r\n          renderLists.push(this.getLayerListFlowItem());\r\n          break;\r\n        case 'feature-list':\r\n          renderLists.push(this.getFeatureListFlowItem(this._selectedLayerId, this._selectedLayerName));\r\n          break;\r\n        case 'filter-panel':\r\n          renderLists.push(this.getFilterPanel());\r\n          break;\r\n        case 'feature-details':\r\n          renderLists.push(this.getFeatureDetailsFlowItem());\r\n          break;\r\n        case 'reporting-layer-list':\r\n          renderLists.push(this.getChooseCategoryFlowItem());\r\n          break;\r\n        case 'feature-create':\r\n          renderLists.push(this.getFeatureCreateFlowItem());\r\n          break;\r\n        case 'comment-details':\r\n          renderLists.push(this.getCommentDetailsFlowItem());\r\n          break;\r\n        case 'add-comment':\r\n          renderLists.push(this.getAddCommentFlowItem());\r\n          break;\r\n      }\r\n    });\r\n    const themeClass = this.theme === 'dark' ? 'calcite-mode-dark' : 'calcite-mode-light';\r\n    return (\r\n      <calcite-panel class={`width-full ${themeClass}`}>\r\n        {this.mapView ? <calcite-flow>{renderLists?.length > 0 && renderLists}</calcite-flow> :\r\n          <calcite-loader label='' scale='m' />}\r\n      </calcite-panel>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Show filter component in modal\r\n   *\r\n   * @returns node to interact with any configured filters for the current layer\r\n   */\r\n  private filterModal(): JsxNode {\r\n    //get layer expression for current selected layer\r\n    const currentLayersExpressions = this.layerExpressions ?\r\n      this.layerExpressions.filter(exp => exp.id === this._selectedLayerId) : [];\r\n    return (\r\n      currentLayersExpressions.length > 0 && (\r\n        <calcite-dialog\r\n          aria-labelledby='modal-title'\r\n          class='modal'\r\n          kind='brand'\r\n          oncalciteDialogClose={() => void this._closeFilter()}\r\n          open={this._filterOpen}\r\n          width='s'\r\n        >\r\n          <div\r\n            class='display-flex align-center'\r\n            id='modal-title'\r\n            slot='header'\r\n          >\r\n            {this._translations.filterLayerTitle.replace('{{title}}', this._selectedLayerName)}\r\n          </div>\r\n          <div slot='content'>\r\n            {this.mapView && (\r\n              <instant-apps-filter-list\r\n                closeBtn={true}\r\n                closeBtnOnClick={() => void this._closeFilter()}\r\n                comboboxOverlayPositioning='fixed'\r\n                layerExpressions={this._currentLayerExpressions}\r\n                onfilterListReset={() => {\r\n                  this._filterActive = false;\r\n                  this._featureList.value && void this._featureList.value.refresh();\r\n                }}\r\n                onfilterUpdate={() => {\r\n                  if (this._filterList?.filterCount !== undefined) {\r\n                    void this._handleFilterUpdate(this._filterList?.filterCount > 0)\r\n                  }\r\n                }}\r\n                ref={this._setFilterList}\r\n                view={this.mapView}\r\n              />\r\n            )}\r\n          </div>\r\n        </calcite-dialog>\r\n      )\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Sets the filter list properties\r\n   * @param element ref element pf the filter list\r\n   */\r\n  private _setFilterList(\r\n    element: HTMLInstantAppsFilterListElement | undefined\r\n  ): void {\r\n    this._filterList = element;\r\n    if (element) {\r\n      element.autoUpdateUrl = false;\r\n      element.resetBtn = this.isMobile;\r\n      element.resetFiltersOnDisconnect = false;\r\n      element.zoomBtn = false;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Adjust the alert styles to avoid extra spacing\r\n   *\r\n   * @private\r\n   */\r\n  private _adjustAlertStyles(): void {\r\n    // adjust the margin of the report submitted message to avoid extra spacing\r\n    if (this.reportSubmittedMessage && this._reportSubmittedAlertNode.value?.children[0]) {\r\n      (this._reportSubmittedAlertNode.value.children[0] as HTMLElement).style.margin = '0px';\r\n    }\r\n    // adjust the margin of the comment submitted message to avoid extra spacing\r\n    if (this.commentSubmittedMessage && this._commentSubmittedAlertNode.value?.children[0]) {\r\n      (this._commentSubmittedAlertNode.value.children[0] as HTMLElement).style.margin = '0px';\r\n    }\r\n  }\r\n\r\n  /**\r\n   * When true the filter modal will be displayed\r\n   *\r\n   * @private\r\n   */\r\n  private _toggleFilter(): void {\r\n    this._filterOpen = !this._filterOpen;\r\n  }\r\n\r\n  /**\r\n   * Close the filter modal\r\n   *\r\n   * @private\r\n   */\r\n  private async _closeFilter(): Promise<void> {\r\n    this._filterOpen = false;\r\n    if (this._filterList != null) {\r\n      this._currentLayerExpressions = await this._filterList.getCurrentLayerExpressions();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * On sort option click update the sort field and sort order\r\n   *\r\n   * @param sortField sort field\r\n   * @param sortOrder sort order\r\n   * @param sortOption selected sort option (Newest/Oldest/Highest Voted/Lowest Voted)\r\n   */\r\n  private async sortOptionClick(\r\n    sortField: string,\r\n    sortOrder: 'asc' | 'desc',\r\n    sortOption: string\r\n  ): Promise<void> {\r\n    this._updatedSorting = {\r\n      field: sortField,\r\n      order: sortOrder,\r\n    };\r\n    this._updatedSortOption = sortOption;\r\n    if (this._sortPopoverNode.value) {\r\n      this._sortPopoverNode.value.open = false;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * On sort button click, display the sorting options\r\n   *\r\n   * @returns Sort options list\r\n   */\r\n  private _toggleSort(): JsxNode {\r\n    const canSortByVotes =\r\n      this.reportingOptions &&\r\n      this.reportingOptions[this._selectedLayerId] &&\r\n      this.reportingOptions[this._selectedLayerId].like &&\r\n      this.reportingOptions[this._selectedLayerId].likeField;\r\n    return (\r\n      <calcite-popover\r\n        autoClose={true}\r\n        label=''\r\n        offsetDistance={0}\r\n        placement={this.isMobile ? 'leading-start' : 'bottom-start'}\r\n        pointerDisabled\r\n        ref={this._sortPopoverNode}\r\n        referenceElement='sort-popover'>\r\n        <calcite-list label='' selectionMode='single-persist'>\r\n          <calcite-list-item\r\n            label={this._translations.sortNewest}\r\n            oncalciteListItemSelect={() => {\r\n              if (this._selectedLayer) {\r\n                void this.sortOptionClick(this._selectedLayer.objectIdField, 'desc', 'newest');\r\n              }\r\n            }}\r\n            selected={this._updatedSortOption === 'newest'}\r\n            value='newest'\r\n          />\r\n          <calcite-list-item\r\n            label={this._translations.sortOldest}\r\n            oncalciteListItemSelect={() => {\r\n              if (this._selectedLayer) {\r\n                void this.sortOptionClick(this._selectedLayer.objectIdField, 'asc', 'oldest');\r\n              }\r\n            }}\r\n            selected={this._updatedSortOption === 'oldest'}\r\n            value='oldest'\r\n          />\r\n          {canSortByVotes && (\r\n            <>\r\n              <calcite-list-item\r\n                label={this._translations.sortHighestVoted}\r\n                oncalciteListItemSelect={() => {\r\n                  const likeField = this.reportingOptions && this.reportingOptions[this._selectedLayerId].likeField;\r\n                  if (likeField !== undefined) {\r\n                    void this.sortOptionClick(likeField, 'desc', 'highestVoted');\r\n                  }\r\n                }}\r\n                selected={this._updatedSortOption === 'highestVoted'}\r\n                value='highestVoted'\r\n              />\r\n              <calcite-list-item\r\n                label={this._translations.sortLowestVoted}\r\n                oncalciteListItemSelect={() => {\r\n                  const likeField = this.reportingOptions && this.reportingOptions[this._selectedLayerId].likeField;\r\n                  if (likeField) {\r\n                    void this.sortOptionClick(likeField, 'asc', 'lowestVoted');\r\n                  }\r\n                }}\r\n                selected={this._updatedSortOption === 'lowestVoted'}\r\n                value='lowestVoted'\r\n              />\r\n            </>\r\n          )}\r\n        </calcite-list>\r\n      </calcite-popover>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Reset the filter\r\n   *\r\n   * @private\r\n   */\r\n  private async _handleFilterListReset(): Promise<void> {\r\n    //on reset filter list reset the filter states\r\n    this._filterActive = false;\r\n  }\r\n\r\n  /**\r\n   * Check if the layers definitionExpression has been modified and update the feature list depending on the applied filters\r\n   *\r\n   * @private\r\n   */\r\n  private async _handleFilterUpdate(\r\n    active: boolean\r\n  ): Promise<void> {\r\n    this._showLoadingIndicator = true;\r\n    this._filterActive = active;\r\n    this._featureList.value && await this._featureList.value.refresh();\r\n    this._showLoadingIndicator = false;\r\n  }\r\n\r\n  /**\r\n   * Get the feature layer list\r\n   *\r\n   * @returns the layer list items\r\n   * @private\r\n   */\r\n  private getLayerListFlowItem(): JsxNode {\r\n    return (\r\n      <calcite-flow-item\r\n        collapsed={this.isMobile && this._sidePanelCollapsed}\r\n        heading={this.reportsHeader}\r\n        loading={this._showLoadingIndicator}\r\n        selected={this._flowItems[this._flowItems.length - 1] === 'layer-list'}\r\n      >\r\n        {this.isMobile && this.getActionToExpandCollapsePanel()}\r\n        {this._hasValidLayers && this.enableNewReports && (\r\n          <calcite-button\r\n            appearance='solid'\r\n            onClick={this.navigateToChooseCategory}\r\n            slot='footer'\r\n            width='full'\r\n          >\r\n            {this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText}\r\n          </calcite-button>\r\n        )}\r\n        {/* TODO removed fullHeight fullWidth*/}\r\n        <calcite-panel>\r\n          <layer-list\r\n            applyLayerViewFilter={this.showMyReportsOnly}\r\n            class='height-full'\r\n            filterByMapExtent={this.filterByMapExtent}\r\n            layers={this._editableLayerIds?.length > 0 ? this._editableLayerIds : this._layers}\r\n            mapView={this.mapView}\r\n            onlayerSelect={this.displayFeaturesList}\r\n            onlayersListLoaded={this.layerListLoaded}\r\n            ref={this._layerList}\r\n            showFeatureCount\r\n            showNextIcon\r\n          />\r\n        </calcite-panel>\r\n      </calcite-flow-item>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Get the layer list for creating a report\r\n   *\r\n   * @returns Choose category flow item\r\n   * @private\r\n   */\r\n  private getChooseCategoryFlowItem(): JsxNode {\r\n    const onlyReportingLayers = this.reportingOptions\r\n      ? Object.keys(this.reportingOptions).filter((layerId: string) => {\r\n        return this.reportingOptions &&\r\n          this.reportingOptions[layerId].visible &&\r\n          this.reportingOptions[layerId].reporting &&\r\n          this._layerItemsHash &&\r\n          this._layerItemsHash[layerId] &&\r\n          this._layerItemsHash[layerId].supportsAdd;\r\n      })\r\n      : [];\r\n    return (\r\n      <calcite-flow-item\r\n        collapsed={this.isMobile && this._sidePanelCollapsed}\r\n        heading={this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText}\r\n        oncalciteFlowItemBack={this.backFromSelectedPanel}\r\n        selected={this._flowItems[this._flowItems.length - 1] === 'reporting-layer-list'}\r\n      >\r\n        {/* TODO removed fullHeight fullWidth*/}\r\n        <calcite-panel>\r\n          <div class='progress-bar'>\r\n            <calcite-progress\r\n              type='determinate'\r\n              value={this._updatedProgressBarStatus}\r\n            />\r\n          </div>\r\n          <calcite-notice\r\n            class='notice-msg'\r\n            icon='lightbulb'\r\n            kind='success'\r\n            open\r\n          >\r\n            <div slot='message'>\r\n              {this._translations.chooseCategoryMsg}\r\n            </div>\r\n          </calcite-notice>\r\n          <layer-list\r\n            class='height-full'\r\n            layers={onlyReportingLayers}\r\n            mapView={this.mapView}\r\n            onlayerSelect={this.navigateToCreateFeature}\r\n            showFeatureCount={false}\r\n            showNextIcon={false}\r\n          />\r\n        </calcite-panel>\r\n      </calcite-flow-item>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Get Feature create form of the selected feature layer\r\n   *\r\n   * @returns feature create form\r\n   * @private\r\n   */\r\n  private getFeatureCreateFlowItem(): JsxNode {\r\n    return (\r\n      <calcite-flow-item\r\n        collapsed={this.isMobile && this._sidePanelCollapsed}\r\n        heading={this._selectedLayerName}\r\n        oncalciteFlowItemBack={this.backFromCreateFeaturePanel}\r\n        selected={this._flowItems[this._flowItems.length - 1] === 'feature-create'}\r\n      >\r\n        {this._showSubmitCancelButton && (\r\n          <div class={'width-full'} slot='footer'>\r\n            <calcite-button\r\n              appearance='solid'\r\n              class={'footer-top-button footer-button'}\r\n              disabled={this._submitNextButtonDisabled}\r\n              onClick={this._showNextButton ? this.onNextButtonClick.bind(this) : this.onCreateFeatureSubmitButtonClick.bind(this)}\r\n              width='full'>\r\n              {this._showNextButton ? this._translations.next : this._translations.submit}\r\n            </calcite-button>\r\n            <calcite-button\r\n              appearance='outline'\r\n              class={'footer-button'}\r\n              onClick={this.backFromCreateFeaturePanel}\r\n              width='full'\r\n            >\r\n              {this._translations.cancel}\r\n            </calcite-button>\r\n          </div>\r\n        )}\r\n        {/* TODO removed fullHeight fullWidth*/}\r\n        <calcite-panel>\r\n          <div class='progress-bar'>\r\n            <calcite-progress\r\n              type='determinate'\r\n              value={this._updatedProgressBarStatus}\r\n            />\r\n          </div>\r\n          <create-feature\r\n            customizeSubmit\r\n            enableSearch\r\n            enableSnapping={this.enableSnapping}\r\n            floorLevel={this.floorLevel}\r\n            formElements={this._formElements.find((elm: any) => elm.id === this._selectedLayerId)}\r\n            reportingAreaLayer={this.reportingAreaLayer}\r\n            isMobile={this.isMobile}\r\n            mapView={this.mapView}\r\n            ondrawComplete={this.onFormReady}\r\n            oneditingLocation={this.editingLocation}\r\n            oneditingAttachment={this.showSubmitCancelButton}\r\n            onfail={this.createFeatureFailed}\r\n            onmodeChanged={this.backFromCreateFeaturePanel}\r\n            onprogressStatus={this.updatedProgressStatus}\r\n            onsuccess={this.onReportSubmitted}\r\n            ref={this._createFeature}\r\n            searchConfiguration={this.searchConfiguration}\r\n            selectedLayerId={this._selectedLayerId}\r\n            reportingArea={this.reportingArea}\r\n            reportingAreaMessage={this.reportingAreaMessage}\r\n            submitNewReportsMessage={this.submitNewReportsMessage}\r\n            updateMapPosition={true}\r\n          />\r\n        </calcite-panel>\r\n      </calcite-flow-item>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Update the progress bar status when editor panel changes\r\n   *\r\n   * @param _evt Event which has progress bar status\r\n   * @private\r\n   */\r\n  private updatedProgressStatus(\r\n    _evt: CustomEvent\r\n  ): void {\r\n    this._updatedProgressBarStatus = _evt.detail;\r\n  }\r\n\r\n  /**\r\n   * When form is ready then show submit and cancel button\r\n   *\r\n   * @private\r\n   */\r\n  private onFormReady(\r\n    _evt: CustomEvent\r\n  ): void {\r\n    this._submitNextButtonDisabled = _evt.detail;\r\n    this._showSubmitCancelButton = true;\r\n  }\r\n\r\n  /**\r\n   * When editing location hide the submit and cancel button\r\n   * @private\r\n   */\r\n  private editingLocation(): void {\r\n    this._showNextButton = true;\r\n  }\r\n\r\n  /**\r\n   * When Add attachment panel is enabled hide the submit and cancel button\r\n   *\r\n   * @private\r\n   */\r\n  private showSubmitCancelButton(\r\n    _evt: CustomEvent\r\n  ): void {\r\n    this._showSubmitCancelButton = !_evt.detail;\r\n  }\r\n\r\n  /**\r\n   * On back from create feature, call submit editor to destroy the Editor widget instance\r\n   *\r\n   * @private\r\n   */\r\n  private onCreateFeatureSubmitButtonClick(): void {\r\n    if (this._createFeature.value) {\r\n      this._showNextButton = false;\r\n      void this._createFeature.value.submit();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * On back from create feature, call close editor to destroy the Editor widget instance\r\n   *\r\n   * @private\r\n   */\r\n  private backFromCreateFeaturePanel(): void {\r\n    if (this._createFeature.value) {\r\n      this._showSubmitCancelButton = false;\r\n      this._showNextButton = false;\r\n      void this.updateNonVisibleLayersOnMap(false);\r\n    }\r\n    //on back form will be closed, so update the form state\r\n    this.backFromSelectedPanel();\r\n  }\r\n\r\n  /**\r\n   * On next click, show the feature form of the Editor widget instance\r\n   * @private\r\n   */\r\n  private onNextButtonClick(): void {\r\n    if (this._createFeature.value) {\r\n      this._showNextButton = false;\r\n      this._showSubmitCancelButton = true;\r\n      void this._createFeature.value.showForm();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * On back from create realated feature, call submit editor to destroy the Editor widget instance\r\n   *\r\n   * @private\r\n   */\r\n  private onCreateRelatedFeatureSubmitButtonClick(): void {\r\n    if (this._createRelatedFeature.value) {\r\n      void this._createRelatedFeature.value.submit();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * On back from create related feature, call close editor to destroy the Editor widget instance\r\n   *\r\n   * @private\r\n   */\r\n  private backFromCreateRelatedFeaturePanel(): void {\r\n    if (this._createRelatedFeature.value) {\r\n      this._showSubmitCancelButton = false;\r\n    }\r\n    //on back form will be closed, so update the form state\r\n    this.backFromSelectedPanel();\r\n  }\r\n\r\n  /**\r\n   * On creating the feature is failed, show the error message\r\n   *\r\n   * @param _evt Event which has feature failed message\r\n   * @private\r\n   */\r\n  private createFeatureFailed(\r\n    _evt: CustomEvent\r\n  ): void {\r\n    console.error(_evt.detail);\r\n    this._featureCreationFailedErrorMsg = _evt.detail.message;\r\n  }\r\n\r\n  /**\r\n   * On submit report navigate to the layer list home page and refresh the layer list\r\n   *\r\n   * @private\r\n   */\r\n  private async onReportSubmitted(): Promise<void> {\r\n    this._showSubmitCancelButton = false;\r\n    void this.updateNonVisibleLayersOnMap(false);\r\n    await this.navigateToHomePage();\r\n    this._reportSubmitted = true;\r\n    this._updatedProgressBarStatus = 25;\r\n    //on report submit form will be closed, so update the form state\r\n    if (this._showFullPanel) {\r\n      this.updatePanelState(this._sidePanelCollapsed, false);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * On adding the is failed, show the error message\r\n   *\r\n   * @param _evt Event which has comment failed message\r\n   * @private\r\n   */\r\n  private addCommentFailed(\r\n    _evt: CustomEvent\r\n  ): void {\r\n    console.error(_evt.detail);\r\n    this._addingCommentFailed = true;\r\n  }\r\n\r\n  /**\r\n   * On submit comment navigate to the feature list and refresh the feature details\r\n   *\r\n   * @private\r\n   */\r\n  private async onCommentSubmitted(): Promise<void> {\r\n    this._commentSubmitted = true;\r\n    this.backFromCreateRelatedFeaturePanel();\r\n    this._showLoadingIndicator = true;\r\n    //update the feature details to reflect the like, dislike and comment values\r\n    this._featureDetails.value && await this._featureDetails.value.refresh(this._currentFeature);\r\n    setTimeout(() => {\r\n      this._showLoadingIndicator = false;\r\n    }, 300);\r\n  }\r\n\r\n  /**\r\n   * Navigates to layer-list\r\n   *\r\n   * @private\r\n   */\r\n  private async navigateToHomePage(): Promise<void> {\r\n    // set the selected features and then refresh the layer list to maintain the layer's visibility state\r\n    await this.setSelectedFeatures([]);\r\n    if (this._layerList.value) {\r\n      await this._layerList.value.refresh();\r\n    }\r\n    if (this._editableLayerIds.length === 1) {\r\n      this._featureList.value && await this._featureList.value.refresh();\r\n      this._flowItems = ['feature-list'];\r\n    } else {\r\n      this._flowItems = ['layer-list'];\r\n    }\r\n  }\r\n\r\n  /**\r\n   * On layer select open the feature create flow item\r\n   *\r\n   * @param _evt Event which has details of selected layerId and layerName\r\n   * @private\r\n   */\r\n  private async navigateToCreateFeature(\r\n    _evt: any\r\n  ): Promise<void> {\r\n    if (_evt.detail.layerId && _evt.detail.layerName) {\r\n      await this.setSelectedLayer(_evt.detail.layerId, _evt.detail.layerName);\r\n    }\r\n\r\n    void this.updateNonVisibleLayersOnMap(true);\r\n    // get the form template elements to pass in create-feature to create a LEVELID field in feature-form\r\n    this._getFormElements();\r\n    this._showSubmitCancelButton = false;\r\n    this._showNextButton = false;\r\n    this.updatePanelState(false, true);\r\n    this._flowItems = [...this._flowItems, 'feature-create'];\r\n  }\r\n\r\n  /**\r\n   * On report an incident button click open the create a report panel with the layer list\r\n   *\r\n   * @private\r\n   */\r\n  private navigateToChooseCategory(): void {\r\n    this.updatePanelState(false, true);\r\n    this._flowItems = [...this._flowItems, 'reporting-layer-list'];\r\n  }\r\n\r\n  /**\r\n   * updates the non visible layer visibility\r\n   *\r\n   * @param visible boolean value to set the layers visibility\r\n   */\r\n  private updateNonVisibleLayersOnMap(\r\n    visible: boolean\r\n  ): void {\r\n    const isNonVisibleValidLayerSelected = this._nonVisibleValidLayers.find(layer => layer.id === this._selectedLayerId);\r\n    if (isNonVisibleValidLayerSelected && this._selectedLayer) {\r\n      this._selectedLayer.set('visible', visible);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * 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\r\n   *\r\n   * @param _evt Event which has list of layers\r\n   * @private\r\n   */\r\n  private async layerListLoaded(\r\n    _evt: CustomEvent\r\n  ): Promise<void> {\r\n    // Check if user is present on the layer panel or if first component is feature list\r\n    // then only allow to store the non-reporting valid layers to avoid the feature visbility issue on map\r\n    const presentOnLayerListPanel = (this._layerList.value &&\r\n      this._flowItems[this._flowItems.length - 1] === 'layer-list') || this._flowItems[0] === 'feature-list';\r\n    if (presentOnLayerListPanel) {\r\n      const layersListed = _evt.detail;\r\n      //consider only the layers listed in the layer-list component\r\n      const allMapLayers = this.mapView && await getAllFeatureLayers(this.mapView);\r\n      const reportingEnabledLayerIds = [];\r\n      this._validLayers = [];\r\n      this._nonVisibleValidLayers = [];\r\n      allMapLayers?.forEach((eachLayer: __esri.FeatureLayer) => {\r\n        if (layersListed.includes(eachLayer.id)) {\r\n          this._validLayers.push(eachLayer);\r\n          if (!eachLayer.visible) {\r\n            this._nonVisibleValidLayers.push(eachLayer);\r\n          }\r\n          //create list of reporting enabled layers\r\n          if (this._getLayersConfig(eachLayer.id)?.reporting && this._layerItemsHash &&\r\n            this._layerItemsHash[eachLayer.id] && this._layerItemsHash[eachLayer.id].supportsAdd) {\r\n            reportingEnabledLayerIds.push(eachLayer.id);\r\n          }\r\n        }\r\n      });\r\n      //handleMap click on layer list loaded\r\n      this.handleMapClick();\r\n      //When we have any reporting layer then only show the create report button on layerList\r\n      this._hasValidLayers = reportingEnabledLayerIds.length > 0;\r\n      //navigate to the feature details if URL params found in case of multiple layers\r\n      if (!this._urlParamsLoaded && this._editableLayerIds.length > 1) {\r\n        if (this.layerId && this.objectId) {\r\n          const layer = this.mapView && await getLayerOrTable(this.mapView, this.layerId);\r\n          if (layer) {\r\n            await this.displayFeaturesList({\r\n              detail: {\r\n                layerId: layer.id,\r\n                layerName: layer.title\r\n              }\r\n            } as CustomEvent);\r\n          }\r\n          this._urlParamsLoaded = true;\r\n          await this.loadFeatureFromURLParams();\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * On click of layer list item show feature list\r\n   *\r\n   * @param _evt Event which has details of selected layerId and layerName\r\n   * @private\r\n   */\r\n  private async displayFeaturesList(\r\n    _evt: CustomEvent\r\n  ): Promise<void> {\r\n    this._showLoadingIndicator = true;\r\n    await this.setSelectedLayer(_evt.detail.layerId, _evt.detail.layerName);\r\n    void this.updateSortingOptions();\r\n    void this.handleSelectedLayersFilter();\r\n    this._flowItems = [...this._flowItems, 'feature-list'];\r\n    this._prevSelectedLayerId = this._selectedLayerId;\r\n    this._showLoadingIndicator = false;\r\n  }\r\n\r\n  /**\r\n   * Updates the sorting options based on the selected sort preference.\r\n   *\r\n   * @private\r\n   */\r\n  private updateSortingOptions(): void {\r\n    const sortingOption = this.sortOption === '' ? 'newest' : this.sortOption;\r\n    const sortOrder = sortingOption === 'oldest' || sortingOption === 'lowestVoted' ? 'asc' : 'desc';\r\n    const likeField = this.reportingOptions?.[this._selectedLayerId]?.like ?\r\n      this.reportingOptions?.[this._selectedLayerId]?.likeField : '';\r\n    const sortField = (this._selectedLayer && (sortingOption === 'newest' || sortingOption === 'oldest')) ?\r\n      this._selectedLayer?.objectIdField : likeField;\r\n    this._updatedSorting = {\r\n      field: sortField || '',\r\n      order: sortOrder,\r\n    };\r\n    this._updatedSortOption = !likeField && (sortingOption === 'highestVoted' || sortingOption === 'lowestVoted') ?\r\n      'newest' : sortingOption;\r\n  }\r\n\r\n  /**\r\n   * On back from filter panel get the filter's init state\r\n   *\r\n   * @private\r\n   */\r\n  private async backFromFilterPanel(): Promise<void> {\r\n    if (this._filterList != null) {\r\n      this._currentLayerExpressions = await this._filterList.getCurrentLayerExpressions();\r\n    }\r\n    this._featureList.value && await this._featureList.value.refresh();\r\n    this.backFromSelectedPanel();\r\n  }\r\n\r\n  /**\r\n   * On back from selected panel navigate to the previous panel\r\n   *\r\n   * @private\r\n   */\r\n  private backFromSelectedPanel(): void {\r\n    this._updatedProgressBarStatus = 25;\r\n    const updatedFlowItems = [...this._flowItems];\r\n    // when back from comment details or add comment page don't clear the highlighted feature of map\r\n    if (!(updatedFlowItems[updatedFlowItems.length - 1] === 'comment-details' ||\r\n      updatedFlowItems[updatedFlowItems.length - 1] === 'add-comment')) {\r\n      this.clearHighlights();\r\n    }\r\n\r\n    // update the panel to the default state while coming back from Reports creation\r\n    if (\r\n      updatedFlowItems[updatedFlowItems.length - 1] === 'reporting-layer-list' ||\r\n      (updatedFlowItems[updatedFlowItems.length - 1] === 'feature-create' &&\r\n        (updatedFlowItems[0] === 'feature-list' || updatedFlowItems[updatedFlowItems.length - 2] === 'feature-list'))\r\n    ) {\r\n      this.updatePanelState(this._sidePanelCollapsed, false);\r\n    }\r\n    updatedFlowItems.pop();\r\n    //Back to layer list, and return as the flowItems will be reset in navigateToHomePage\r\n    if (updatedFlowItems.length === 1 && updatedFlowItems[0] === 'layer-list') {\r\n      void this.navigateToHomePage();\r\n      return;\r\n    }\r\n    this._flowItems = [...updatedFlowItems];\r\n  }\r\n\r\n  /**\r\n   * Toggle side panel in case of mobile mode\r\n   *\r\n   * @private\r\n   */\r\n  private toggleSidePanel(): void {\r\n    this._sidePanelCollapsed = !this._sidePanelCollapsed;\r\n    this.togglePanel.emit({ panelState: this._sidePanelCollapsed, isFormOpen: this._showFullPanel });\r\n  }\r\n\r\n  /**\r\n   * Updates the Panel state\r\n   *\r\n   * @param sidePanelCollapsed side panel collapsed state\r\n   * @param showFullPanel updated panel state\r\n   * @private\r\n   */\r\n  private updatePanelState(\r\n    sidePanelCollapsed: boolean,\r\n    showFullPanel: boolean\r\n  ): void {\r\n    this._sidePanelCollapsed = sidePanelCollapsed;\r\n    this._showFullPanel = showFullPanel;\r\n    this.togglePanel.emit({ panelState: this._sidePanelCollapsed, isFormOpen: this._showFullPanel });\r\n  }\r\n\r\n  /**\r\n   * When feature is selected from list store that and show feature details\r\n   *\r\n   * @param _evt Event which has details of selected feature\r\n   */\r\n  private async onFeatureSelectFromList(\r\n    _evt: CustomEvent\r\n  ): Promise<void> {\r\n    await this.setSelectedFeatures([_evt.detail]);\r\n    this._flowItems = [...this._flowItems, 'feature-details'];\r\n  }\r\n\r\n  /**\r\n   * Gets related table id of the selected feature's layer\r\n   *\r\n   * @private\r\n   */\r\n  private async getRelatedTable(): Promise<void> {\r\n    const selectedLayer = this._currentFeature?.layer as __esri.FeatureLayer;\r\n    const allTables = this.mapView && await getAllTables(this.mapView);\r\n    selectedLayer.relationships?.some(relationship => {\r\n      const relatedTables = allTables?.filter(\r\n        table => selectedLayer.url === (table as __esri.FeatureLayer).url &&\r\n          (table as __esri.FeatureLayer).layerId === relationship.relatedTableId,\r\n      );\r\n      if (relatedTables && relatedTables.length > 0) {\r\n        this._relatedTable = relatedTables[0] as __esri.FeatureLayer;\r\n        return true;\r\n      } else {\r\n        return false;\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Show loading indicator while updating the feature details component\r\n   *\r\n   * @param isLoading is feature detail component loading\r\n   */\r\n  private async updatingFeatureDetails(\r\n    isLoading: boolean\r\n  ): Promise<void> {\r\n    this._showLoadingIndicator = isLoading;\r\n  }\r\n\r\n  /**\r\n   * On Feature details change update the Layer title and the current selected layer id\r\n   *\r\n   * @param _evt Event hold the details of current feature graphic from the feature-details\r\n   * @private\r\n   */\r\n  private async selectionChanged(\r\n    _evt: CustomEvent\r\n  ): Promise<void> {\r\n    void this.updatingFeatureDetails(true);\r\n    await this.setCurrentFeature(_evt.detail.selectedFeature[0]);\r\n    void this.highlightOnMap(_evt.detail.selectedFeature[0]);\r\n    this._selectedFeatureIndex = _evt.detail.selectedFeatureIndex;\r\n    //update the feature details to reflect the like, dislike and comment values\r\n    this._featureDetails.value && await this._featureDetails.value.refresh(_evt.detail.selectedFeature[0]);\r\n  }\r\n\r\n  /** Shows the add comments panel */\r\n  private showAddCommentsPanel(): void {\r\n    this._flowItems = [...this._flowItems, 'add-comment'];\r\n  }\r\n\r\n  /**\r\n   * When comment is selected from list store that and show comment details\r\n   *\r\n   * @param _evt Event which has details of selected feature\r\n   * @private\r\n   */\r\n  private async onCommentSelectFromList(\r\n    _evt: CustomEvent\r\n  ): Promise<void> {\r\n    this._selectedRelatedFeature = [_evt.detail];\r\n    this._flowItems = [...this._flowItems, 'comment-details'];\r\n  }\r\n\r\n  /**\r\n   * Get feature list of the selected feature layer\r\n   *\r\n   * @param layerId Layer id\r\n   * @param layerName Layer name\r\n   * @returns feature list node\r\n   * @private\r\n   */\r\n  private getFeatureListFlowItem(\r\n    layerId: string,\r\n    layerName: string\r\n  ): JsxNode {\r\n    const canCreateReports = this._getLayersConfig(this._selectedLayerId)?.reporting &&\r\n      this._layerItemsHash && this._layerItemsHash[this._selectedLayerId].supportsAdd;\r\n    const showFilterIcon = this._currentLayerExpressions?.length;\r\n    return (\r\n      <calcite-flow-item\r\n        collapsed={this.isMobile && this._sidePanelCollapsed}\r\n        heading={layerName}\r\n        loading={!this.isMobile && this._showLoadingIndicator}\r\n        oncalciteFlowItemBack={this.backFromSelectedPanel}\r\n        selected={this._flowItems[this._flowItems.length - 1] === 'feature-list'}\r\n      >\r\n        {this._toggleSort()}\r\n        <calcite-action\r\n          appearance='solid'\r\n          icon='sort-ascending-arrow'\r\n          id='sort-popover'\r\n          slot={'header-actions-end'}\r\n          text={this._translations.sort}\r\n          title={this._translations.sort}\r\n        />\r\n        {showFilterIcon && (\r\n          <calcite-action\r\n            appearance='solid'\r\n            icon='filter'\r\n            indicator={this._filterActive}\r\n            onClick={() => {\r\n              this.isMobile ? this._toggleFilter() : (this._flowItems = [...this._flowItems, 'filter-panel']);\r\n            }}\r\n            slot={'header-actions-end'}\r\n            text={this._translations.filter}\r\n            title={this._translations.filter}\r\n          />\r\n        )}\r\n        {this.isMobile && this.getActionToExpandCollapsePanel()}\r\n        {this.enableNewReports && canCreateReports && (\r\n          <calcite-button\r\n            appearance='solid'\r\n            onClick={this.navigateToCreateFeature}\r\n            slot='footer'\r\n            width='full'\r\n          >\r\n            {this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText}\r\n          </calcite-button>\r\n        )}\r\n        {/* TODO removed fullHeight*/}\r\n        <calcite-panel>\r\n          {\r\n            <feature-list\r\n              applyLayerViewFilter={this.showMyReportsOnly}\r\n              class='height-full'\r\n              filterByMapExtent={this.filterByMapExtent}\r\n              highlightOnHover\r\n              mapView={this.mapView}\r\n              noFeaturesFoundMsg={this._translations.featureErrorMsg}\r\n              onfeatureClick={() => {\r\n                this._showLoadingIndicator = true;\r\n              }}\r\n              onfeatureSelect={this.onFeatureSelectFromList}\r\n              pageSize={30}\r\n              ref={this._featureList}\r\n              reportingOptions={this.reportingOptions}\r\n              selectedLayerId={layerId}\r\n              showFeatureSymbol={this.showFeatureSymbol}\r\n              sortingInfo={this._updatedSorting}\r\n            />\r\n          }\r\n        </calcite-panel>\r\n      </calcite-flow-item>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Returns the calcite-flow item for filter\r\n   *\r\n   * @returns Node\r\n   * @private\r\n   */\r\n  private getFilterPanel(): JsxNode {\r\n    return (\r\n      <calcite-flow-item\r\n        collapsed={this.isMobile && this._sidePanelCollapsed}\r\n        heading={this._translations.filterLayerTitle.replace('{{title}}', this._selectedLayerName)}\r\n        loading={this._showLoadingIndicator}\r\n        oncalciteFlowItemBack={this.backFromFilterPanel}\r\n        selected={this._flowItems[this._flowItems.length - 1] === 'filter-panel'}\r\n      >\r\n        {this.isMobile && this.getActionToExpandCollapsePanel()}\r\n        <div class={'width-full'} slot='footer'>\r\n          <div class={'width-full'} slot='footer'>\r\n            <calcite-button\r\n              appearance='solid'\r\n              class={'footer-top-button footer-button'}\r\n              disabled={!this._filterActive}\r\n              onClick={this.resetFilterList}\r\n              width='full'\r\n            >\r\n              {this._translations.resetFilter}\r\n            </calcite-button>\r\n            <calcite-button\r\n              appearance='outline'\r\n              class={'footer-button'}\r\n              onClick={this.backFromFilterPanel}\r\n              width='full'\r\n            >\r\n              {this._translations.close}\r\n            </calcite-button>\r\n          </div>\r\n        </div>\r\n        {/* TODO removed fullHeight*/}\r\n        <calcite-panel>\r\n          {this.mapView && (\r\n            <instant-apps-filter-list\r\n              closeBtnOnClick={() => undefined}\r\n              comboboxOverlayPositioning='fixed'\r\n              layerExpressions={this._currentLayerExpressions}\r\n              onfilterListReset={() => void this._handleFilterListReset()}\r\n              onfilterUpdate={() => {\r\n                const filterCount = this._filterList?.filterCount;\r\n                if (filterCount !== undefined) {\r\n                  void this._handleFilterUpdate(filterCount > 0)\r\n                }\r\n              }}\r\n              ref={this._setFilterList}\r\n              view={this.mapView}\r\n            />\r\n          )}\r\n        </calcite-panel>\r\n      </calcite-flow-item>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Returns the calcite-flow item for feature details\r\n   *\r\n   * @returns Node\r\n   */\r\n  private getFeatureDetailsFlowItem(): JsxNode {\r\n    const relationships = this._selectedLayer?.relationships;\r\n    const showCommentBtn = this._getLayersConfig(\r\n      this._selectedLayerId)?.comment && relationships && relationships.length > 0 && this._relatedTable;\r\n    return (\r\n      <calcite-flow-item\r\n        collapsed={this.isMobile && this._sidePanelCollapsed}\r\n        heading={this._selectedLayerName}\r\n        loading={this._showLoadingIndicator}\r\n        oncalciteFlowItemBack={this.backFromSelectedPanel}\r\n        selected={this._flowItems[this._flowItems.length - 1] === 'feature-details'}\r\n      >\r\n        {this.isMobile && this.getActionToExpandCollapsePanel()}\r\n        {/* Create share button */}\r\n        {this.mapView && (\r\n          <instant-apps-social-share\r\n            class={'share-node'}\r\n            embed={false}\r\n            flipRtl={true}\r\n            popoverButtonIconScale='s'\r\n            ref={this._shareNode}\r\n            removePopoverOffset={true}\r\n            scale='m'\r\n            shareButtonColor='neutral'\r\n            shareButtonType='action'\r\n            slot={'header-actions-end'}\r\n            socialMedia={true}\r\n            view={this.mapView}\r\n          />\r\n        )}\r\n        {this._selectedFeature.length > 1 && this.getFeaturesPagination()}\r\n        <calcite-panel>\r\n          <feature-details\r\n            class={'full-height'}\r\n            enableSnapping={this.enableSnapping}\r\n            graphics={this._selectedFeature}\r\n            layerItemsHash={this._layerItemsHash}\r\n            mapView={this.mapView}\r\n            onaddComment={this.showAddCommentsPanel}\r\n            oncommentClick={() => {\r\n              this._showLoadingIndicator = true;\r\n            }}\r\n            oncommentSelect={this.onCommentSelectFromList}\r\n            onfeatureSelectionChange={this.selectionChanged}\r\n            onlikeOrDislikeClicked={() => {\r\n              this._featureList.value && void this._featureList.value.refresh(true);\r\n            }}\r\n            onloadingStatus={_evt => void this.updatingFeatureDetails(_evt.detail)}\r\n            ref={this._featureDetails}\r\n            reportingOptions={this.reportingOptions}\r\n            showFullCommentTitle={this.showFullCommentTitle}\r\n            showUserImageInCommentsList={this.showUserImageInCommentsList}\r\n          />\r\n          {showCommentBtn && (\r\n            <calcite-button\r\n              appearance='solid'\r\n              onClick={this.showAddCommentsPanel}\r\n              slot='footer'\r\n              width='full'\r\n            >\r\n              {this.commentButtonText || this._translations.comment}\r\n            </calcite-button>\r\n          )}\r\n        </calcite-panel>\r\n      </calcite-flow-item>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Returns the pagination for the multiple features\r\n   * Create pagination to avoid the overlap of like, dislike and comment section\r\n   *\r\n   * @returns Node\r\n   */\r\n  private getFeaturesPagination(): JsxNode {\r\n    return (\r\n      <div class='feature-pagination'>\r\n        <div>\r\n          <calcite-button\r\n            appearance='transparent'\r\n            disabled={false}\r\n            iconStart='chevron-left'\r\n            iconFlipRtl='both'\r\n            id='solutions-back'\r\n            onClick={() => this._featureDetails.value && void this._featureDetails.value.back()}\r\n            scale='s'\r\n            width='full'\r\n          />\r\n          <calcite-tooltip\r\n            placement='top'\r\n            referenceElement='solutions-back'\r\n          >\r\n            <span>{this._translations.back}</span>\r\n          </calcite-tooltip>\r\n        </div>\r\n        <calcite-button\r\n          appearance='transparent'\r\n          onClick={() => this._featureDetails.value && void this._featureDetails.value.toggleListView()}\r\n          scale='s'\r\n        >\r\n          <span class='pagination-count'>\r\n            {this._getCount()}\r\n          </span>\r\n        </calcite-button>\r\n        <div>\r\n          <calcite-button\r\n            appearance='transparent'\r\n            disabled={false}\r\n            iconFlipRtl='both'\r\n            iconStart='chevron-right'\r\n            id='solutions-next'\r\n            onClick={() => this._featureDetails.value && void this._featureDetails.value.next()}\r\n            scale='s'\r\n            width='full'\r\n          />\r\n          <calcite-tooltip\r\n            placement='top'\r\n            referenceElement='solutions-next'\r\n          >\r\n            <span>\r\n              {this._translations.next}\r\n            </span>\r\n          </calcite-tooltip>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Returns the calcite-flow item for comment details\r\n   *\r\n   * @returns Node\r\n   */\r\n  private getCommentDetailsFlowItem(): JsxNode {\r\n    return (\r\n      <calcite-flow-item\r\n        collapsed={this.isMobile && this._sidePanelCollapsed}\r\n        heading={this._relatedTable?.title || ''}\r\n        oncalciteFlowItemBack={this.backFromSelectedPanel}\r\n        selected={this._flowItems[this._flowItems.length - 1] === 'comment-details'}\r\n      >\r\n        {this.isMobile && this.getActionToExpandCollapsePanel()}\r\n        {/* TODO removed fullHeight*/}\r\n        <calcite-panel>\r\n          <info-card\r\n            enableSnapping={this.enableSnapping}\r\n            graphics={this._selectedRelatedFeature}\r\n            highlightEnabled={false}\r\n            isLoading={false}\r\n            isMobile={false}\r\n            mapView={this.mapView}\r\n            onselectionChanged={() => {\r\n              // When info card is opened in the panel then no need to show loading indicator\r\n              this._showLoadingIndicator = false;\r\n            }}\r\n            paginationEnabled={false}\r\n          />\r\n        </calcite-panel>\r\n      </calcite-flow-item>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Returns the calcite-flow item for add comment\r\n   *\r\n   * @returns Node\r\n   */\r\n  private getAddCommentFlowItem(): JsxNode {\r\n    return (\r\n      <calcite-flow-item\r\n        collapsed={this.isMobile && this._sidePanelCollapsed}\r\n        heading={this._relatedTable?.title || ''}\r\n        oncalciteFlowItemBack={this.backFromCreateRelatedFeaturePanel}\r\n        selected={this._flowItems[this._flowItems.length - 1] === 'add-comment'}\r\n      >\r\n        {this.isMobile && this.getActionToExpandCollapsePanel()}\r\n        <div class={'width-full'} slot='footer'>\r\n          {this._showSubmitCancelButton && (\r\n            <div class={'width-full'} slot='footer'>\r\n              <calcite-button\r\n                appearance='solid'\r\n                class={'footer-top-button footer-button'}\r\n                onClick={this.onCreateRelatedFeatureSubmitButtonClick}\r\n                width='full'\r\n              >\r\n                {this._translations.submit}\r\n              </calcite-button>\r\n              <calcite-button\r\n                appearance='outline'\r\n                class={'footer-button'}\r\n                onClick={this.backFromCreateRelatedFeaturePanel}\r\n                width='full'\r\n              >\r\n                {this._translations.cancel}\r\n              </calcite-button>\r\n            </div>\r\n          )}\r\n        </div>\r\n        <calcite-panel>\r\n          <create-related-feature\r\n            customizeSubmit\r\n            enableSnapping={this.enableSnapping}\r\n            mapView={this.mapView}\r\n            onfail={this.addCommentFailed}\r\n            onformReady={this.onFormReady}\r\n            onisActionPending={this.showSubmitCancelButton}\r\n            onsuccess={this.onCommentSubmitted}\r\n            ref={this._createRelatedFeature}\r\n            selectedFeature={this._currentFeature}\r\n            table={this._relatedTable}\r\n          />\r\n        </calcite-panel>\r\n      </calcite-flow-item>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Sets the selected features and updates the first feature as the current selected feature\r\n   *\r\n   * @param features Graphics array of the features selected\r\n   */\r\n  private async setSelectedFeatures(\r\n    features: __esri.Graphic[]\r\n  ): Promise<void> {\r\n    this._selectedFeature = features;\r\n    await this.setCurrentFeature(this._selectedFeature.length ? this._selectedFeature[0] : undefined);\r\n  }\r\n\r\n  /**\r\n   * Set the object id of the current selected feature, and also updates the current selected layer details\r\n   *\r\n   * @param selectedFeature Graphic currently shown in feature details\r\n   */\r\n  private async setCurrentFeature(\r\n    selectedFeature?: __esri.Graphic | undefined\r\n  ): Promise<void> {\r\n    this._currentFeature = selectedFeature;\r\n    if (selectedFeature && selectedFeature.layer) {\r\n      const layer = selectedFeature.layer as __esri.FeatureLayer;\r\n      layer.title && void this.setSelectedLayer(layer.id, layer.title);\r\n      this._currentFeatureId = selectedFeature.attributes[layer.objectIdField];\r\n      // check if comments are configured and relationship is present then only get the related table\r\n      const isCommentTablePresent = this._getLayersConfig(layer.id)?.comment && layer.relationships &&\r\n        layer.relationships.length > 0;\r\n      if (isCommentTablePresent) {\r\n        await this.getRelatedTable();\r\n      }\r\n    } else {\r\n      if (this._editableLayerIds.length > 1) {\r\n        void this.setSelectedLayer('', '');\r\n        void this.handlePrevLayersFilter();\r\n      }\r\n      this._currentFeatureId = '';\r\n    }\r\n    this._updateShareURL();\r\n  }\r\n\r\n  /**\r\n   * Highlights the feature on map\r\n   *\r\n   * @param selectedFeature Graphic currently shown in feature details\r\n   */\r\n  private async highlightOnMap(\r\n    selectedFeature?: __esri.Graphic\r\n  ): Promise<void> {\r\n    // if a feature is already highlighted, remove the previous highlight\r\n    this.clearHighlights();\r\n    // highlight the newly selected feature only when it has valid geometry\r\n    if (selectedFeature && selectedFeature.geometry && selectedFeature.layer && selectedFeature.layer.id !== undefined) {\r\n      const selectedLayerView = this.mapView && await getFeatureLayerView(this.mapView, selectedFeature.layer.id.toString());\r\n      if (selectedLayerView) {\r\n        const oid = Number(selectedFeature.getObjectId());\r\n        this._highlightHandle = this.mapView && await highlightFeatures([oid], selectedLayerView, this.mapView, true, this.zoomToScale);\r\n      }\r\n    }\r\n    void this.updatingFeatureDetails(false);\r\n  }\r\n\r\n  /**\r\n   * Clears the highlight\r\n   *\r\n   * @private\r\n   */\r\n  private clearHighlights(): void {\r\n    //if a feature is already highlighted, then remove the highlight\r\n    if (this._highlightHandle) {\r\n      this._highlightHandle.remove();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Returns the action button to Expand/Collapse side panel in mobile mode\r\n   *\r\n   * @private\r\n   */\r\n  private getActionToExpandCollapsePanel(): JsxNode {\r\n    return (\r\n      <calcite-action\r\n        appearance='solid'\r\n        icon={this._sidePanelCollapsed ? 'chevrons-up' : 'chevrons-down'}\r\n        onClick={this.toggleSidePanel}\r\n        slot='header-actions-end'\r\n        text={(this._sidePanelCollapsed ? this._translations.expand : this._translations.collapse) || ''}\r\n      />\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Set the current map info when maps change\r\n   *\r\n   * @private\r\n   */\r\n  private async setMapView(): Promise<void> {\r\n    this.mapView && await getAllTables(this.mapView)\r\n    await this.getLayersToShowInList();\r\n    // filter/update the feature(s) if any filter/condition is already applied\r\n    await this._updateFeatures();\r\n    // if only one valid layer is present then directly render features list\r\n    if (this._editableLayerIds?.length === 1) {\r\n      await this.renderFeaturesList();\r\n    } else {\r\n      this._flowItems = ['layer-list'];\r\n    }\r\n\r\n    if (this.mapView) {\r\n      this.mapView.popupEnabled = false;\r\n      if (this._defaultCenter && this._defaultLevel) {\r\n        await this.mapView.goTo({\r\n          center: this._defaultCenter,\r\n          zoom: this._defaultLevel,\r\n        });\r\n        this._defaultCenter = undefined;\r\n        this._defaultLevel = undefined;\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handle map click event\r\n   *\r\n   * @param layers Array of layerIds\r\n   * @private\r\n   */\r\n  private handleMapClick(): void {\r\n    if (this._mapClickHandle) {\r\n      this._mapClickHandle.remove();\r\n    }\r\n    this._mapClickHandle = reactiveUtils.on(\r\n      () => this.mapView,\r\n      'click',\r\n      (event: IMapClick) => {\r\n        //disable map popup\r\n        if (this.mapView) {\r\n          this.mapView.popupEnabled = false;\r\n        }\r\n        void this.onMapClick(event);\r\n      });\r\n  }\r\n\r\n  /**\r\n   * On map click do hitTest and get the clicked graphics from both reporting and non-reporting layers, and show feature details\r\n   *\r\n   * @param event The map click event containing information about the clicked location.\r\n   * @private\r\n   */\r\n  private async onMapClick(\r\n    event: IMapClick\r\n  ): Promise<void> {\r\n    // Prevent popups during creation or commenting to maintain workflow continuity.\r\n    if (this._flowItems[this._flowItems.length - 1] === 'feature-create' ||\r\n      this._flowItems[this._flowItems.length - 1] === 'add-comment') {\r\n      return;\r\n    }\r\n    if (this.mapView) {\r\n      // Perform a hitTest on the View\r\n      const hitTest = await this.mapView.hitTest(event);\r\n      const clickedGraphics: __esri.Graphic[] = [];\r\n      let nonReportingLayerGraphics: __esri.Graphic[] = [];\r\n      let identifyGraphics: __esri.Graphic[] = [];\r\n      let hasIdentifiedGraphics = false;\r\n      if (hitTest.results.length > 0) {\r\n        hitTest.results.forEach((result) => {\r\n          // check if the result type is graphic\r\n          if (result.type === 'graphic') {\r\n            clickedGraphics.push(result.graphic);\r\n          }\r\n        });\r\n      }\r\n      if (clickedGraphics.length > 0) {\r\n        await this._setReportingGraphics(clickedGraphics);\r\n        nonReportingLayerGraphics = this._getNonReportingLayerGraphics(clickedGraphics);\r\n      }\r\n      if (this._mapImageryLayersId.length > 0) {\r\n        identifyGraphics = await this._getIdentifiedGraphics(event.mapPoint);\r\n        hasIdentifiedGraphics = identifyGraphics.length > 0;\r\n      }\r\n      // if clicked graphic's layer is from non reporting layers then show popup on map\r\n      // Merge the non reporting graphics and identify graphics to show in common popup\r\n      const graphics = nonReportingLayerGraphics.concat(identifyGraphics);\r\n      if (graphics.length > 0) {\r\n        this.mapView.popupEnabled = true;\r\n        const options = {\r\n          features: graphics,\r\n          location: event.mapPoint,\r\n          updateLocationEnabled: !hasIdentifiedGraphics, // if identify graphics is present then dont update location\r\n        };\r\n        await this.mapView.openPopup(options);\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Filters the array of clicked graphics to include only those whose layer is a feature layer\r\n   *\r\n   * @param clickedGraphics - An array of graphics that were clicked.\r\n   * @returns An array of graphics whose layers are valid feature layers.\r\n   */\r\n  private async _setReportingGraphics(\r\n    clickedGraphics: __esri.Graphic[]\r\n  ): Promise<void> {\r\n    const reportingLayerGraphics = clickedGraphics.filter(graphic => {\r\n      if (graphic.layer?.type === 'feature') {\r\n        const layer = graphic.layer as __esri.FeatureLayer;\r\n        return this._validLayers.includes(layer);\r\n      } else {\r\n        return false;\r\n      }\r\n    });\r\n    // if same selected feature from same layer then dont update the graphics to avoid highlighit issue (#1426)\r\n    if (this._selectedLayer && this._selectedFeature.length > 0 &&\r\n      this._selectedLayer.id === reportingLayerGraphics[0]?.layer?.id &&\r\n      reportingLayerGraphics[0].attributes[this._selectedLayer.objectIdField] === this._selectedFeature[0].attributes[this._selectedLayer.objectIdField]) {\r\n      return;\r\n    }\r\n    // if clicked graphic's layer is one of the reporting layers then show details in layer panel\r\n    if (reportingLayerGraphics.length > 0) {\r\n      //update the selectedFeature\r\n      await this.setSelectedFeatures(reportingLayerGraphics);\r\n      //if featureDetails not open then add it to the list else just reInit flowItems which will update details with newly selected features\r\n      // eslint-disable-next-line unicorn/prefer-ternary\r\n      if (this._flowItems.length && this._flowItems.includes('feature-details')) {\r\n        this._flowItems = [...this._flowItems.slice(0, this._flowItems.indexOf('feature-details') + 1)];\r\n        await this.highlightOnMap(clickedGraphics[0]);\r\n      } else {\r\n        this._flowItems = [...this._flowItems, 'feature-details'];\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Filters the provided array of graphics to return only those that belong to feature layers\r\n   * which are not included in the list of valid layers, have popups enabled, and possess an ID.\r\n   *\r\n   * @param clickedGraphics - An array of graphics that were clicked.\r\n   * @returns An array of graphics from feature layers that are not considered valid reporting layers,\r\n   *          have popups enabled, and have a defined layer ID.\r\n   */\r\n  private _getNonReportingLayerGraphics(\r\n    clickedGraphics: __esri.Graphic[]\r\n  ): __esri.Graphic[] {\r\n    const nonReportingLayerGraphics = clickedGraphics.filter(graphic => {\r\n      if (graphic.layer?.type === 'feature') {\r\n        const layer = graphic.layer as __esri.FeatureLayer;\r\n        return !this._validLayers.includes(layer) && layer?.popupEnabled && layer?.id;\r\n      } else {\r\n        return false;\r\n      }\r\n    });\r\n    return nonReportingLayerGraphics;\r\n  }\r\n\r\n  /**\r\n   * Identifies graphics at a given map point by querying all imagery layers in the map view.\r\n   *\r\n   * @param mapPoint - The map point at which to perform the identify operation.\r\n   * @returns A promise that resolves to an array of identified graphics (`__esri.Graphic[]`).\r\n   *\r\n   */\r\n  private async _getIdentifiedGraphics(\r\n    mapPoint: __esri.Point\r\n  ): Promise<__esri.Graphic[]> {\r\n    // Build identify parameters with geometry, tolerance, and current map extent\r\n    const params = new IdentifyParameters({\r\n      geometry: mapPoint,\r\n      tolerance: 3,\r\n      mapExtent: this.mapView?.extent\r\n    });\r\n    let identifiedLayer: __esri.Layer | undefined;\r\n    let identifyResults: __esri.IdentifyResult[] = [];\r\n    // Loop through imagery layers to find the first one with identify results\r\n    for (const layerId of this._mapImageryLayersId) {\r\n      const layer = this.mapView && await getLayerOrTable(this.mapView, layerId);\r\n      if (layer?.url && params) {\r\n        try {\r\n          const result = await identify?.identify(layer.url, params);\r\n          if (result?.results?.length) {\r\n            identifyResults = result.results;\r\n            identifiedLayer = layer;\r\n            break; // Stop once we get results from a layer\r\n          }\r\n        } catch (error) {\r\n          console.error(error);\r\n        }\r\n      }\r\n    }\r\n    // Build graphics array from valid identify results\r\n    const graphics: __esri.Graphic[] = [];\r\n    identifyResults.forEach((result) => {\r\n      const layerId = result.layerId;\r\n      // Retrive the sub layer of the identified image layer to get the popup template\r\n      const subLayer = (identifiedLayer as any)?.sublayers?.items.find((l: any) => l.id === layerId);\r\n      const popupTemplate = subLayer?.popupTemplate;\r\n      // Add popup template to the feature only if the sublayer has popups enabled from the map viewer and a template is available\r\n      if (subLayer?.popupEnabled && popupTemplate) {\r\n        result.feature.popupTemplate = popupTemplate;\r\n        graphics.push(result.feature);\r\n      }\r\n    });\r\n    return graphics;\r\n  }\r\n\r\n  /**\r\n   * Get the current index of total string\r\n   *\r\n   * @returns the index of total string\r\n   * @private\r\n   */\r\n  private _getCount(): string {\r\n    const index = (this._selectedFeatureIndex + 1).toString();\r\n    const total = this._selectedFeature.length.toString();\r\n    return this._translations.indexOfTotal.replace('{{index}}', index).replace('{{total}}', total);\r\n  }\r\n\r\n  /**\r\n   * Applies a definition expression when floor field and level are available\r\n   *\r\n   * @param layer FeatureLayer on which the definitionExpression should be updated\r\n   * @private\r\n   */\r\n  private _updateFloorDefinitionExpression(\r\n    layer: __esri.FeatureLayer\r\n  ): void {\r\n    const floorField = layer?.floorInfo?.floorField;\r\n    // update the layer definition expression\r\n    const floorExp = `${floorField} = '${this.floorLevel}'`;\r\n    const defExp = layer.definitionExpression;\r\n    layer.definitionExpression = defExp && defExp?.indexOf(this._floorExpression) > -1 ?\r\n      defExp.replace(this._floorExpression, floorExp) : floorExp;\r\n    this._floorExpression = floorExp;\r\n  }\r\n\r\n  /**\r\n   * Gets the form template elements\r\n   *\r\n   * @private\r\n   */\r\n  private _getFormElements(): void {\r\n    const layer = this._selectedLayer;\r\n    const floorField = layer?.floorInfo?.floorField;\r\n    if (floorField && this.floorLevel && layer?.formTemplate) {\r\n      const formElement = this._formElements.find((elm: any) => elm.id === layer.id);\r\n      if (this._formElements.length === 0 || !formElement) {\r\n        this._formElements.push({\r\n          id: layer.id,\r\n          orgElements: layer.formTemplate.elements,\r\n          orgExpressionInfos: layer.formTemplate.expressionInfos,\r\n        });\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Returns the ids of all OR configured layers that support edits with the update capability\r\n   *\r\n   * @param hash each layer item details\r\n   * @param layersEditingDisabled list layer ids for which editing is disabled\r\n   * @returns array of editable layer ids\r\n   */\r\n  private reduceToConfiguredLayers(\r\n    hash: ILayerItemsHash,\r\n    layersEditingDisabled: string[]\r\n  ): string[] {\r\n    return Object.keys(hash).reduce((prev, cur) => {\r\n      // check if reporting options exists consider the visible prop if else just check the supports Add\r\n      const showLayer = this.reportingOptions ? this._getLayersConfig(cur)?.visible : hash[cur].supportsAdd;\r\n      //show layer only when editing is enabled\r\n      if (!layersEditingDisabled.includes(cur) && showLayer) {\r\n        prev.push(cur);\r\n      }\r\n      return prev;\r\n    }, [] as string[]);\r\n  }\r\n\r\n  /**\r\n   * Refreshes the layer and feature list\r\n   *\r\n   * @private\r\n   */\r\n  private refreshLists(): void {\r\n    // added setTimeout for when the value of prop is updated then refresh the lists\r\n    setTimeout(() => {\r\n      // refresh layer list when user is on layer list panel\r\n      if (this._layerList.value && this._flowItems[this._flowItems.length - 1] === 'layer-list') {\r\n        void this._layerList.value.refresh();\r\n      }\r\n      if (this._featureList.value) {\r\n        void this._featureList.value.refresh();\r\n      }\r\n    }, 50);\r\n  }\r\n\r\n  /**\r\n   * updates the features for layer/feature list\r\n   *\r\n   * @private\r\n   */\r\n  private async _updateFeatures(): Promise<void> {\r\n    for (const eachLayerId of this._editableLayerIds) {\r\n      const featureLayerView = this.mapView && await getFeatureLayerView(this.mapView, eachLayerId);\r\n      if (featureLayerView) {\r\n        // In case of show my features add filter for Featurelayerview\r\n        await this._showMyFeaturesOnly(featureLayerView);\r\n        const floorField = featureLayerView.layer?.floorInfo?.floorField;\r\n        if (floorField && this.floorLevel) {\r\n          // Update the layer's definition as per selected floor level from map for all editable layers\r\n          this._updateFloorDefinitionExpression(featureLayerView.layer);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Show only loggedIn user's features\r\n   *\r\n   * @param featureLayerView on which the filter should be applied\r\n   * @private\r\n   */\r\n  private async _showMyFeaturesOnly(\r\n    featureLayerView: __esri.FeatureLayerView\r\n  ): Promise<void> {\r\n    const loggedInUserName = (this.mapView?.map as any).portalItem.portal?.credential?.userId;\r\n    if (loggedInUserName && featureLayerView) {\r\n      const creatorField = featureLayerView.layer.editFieldsInfo?.creatorField.toLowerCase();\r\n      featureLayerView.filter =\r\n        this.showMyReportsOnly && creatorField\r\n          ? new FeatureFilter({\r\n            where: `${creatorField} = '${loggedInUserName}'`\r\n          }) as any\r\n          : null;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Creates the list of layers to be listed in layer list\r\n   *\r\n   * @private\r\n   */\r\n  private async getLayersToShowInList(): Promise<void> {\r\n    const layerItemsHash = (this.mapView && await getMapLayerHash(this.mapView, true)) as ILayerItemsHash;\r\n    const allMapLayers = this.mapView && await getAllFeatureLayers(this.mapView);\r\n    const layersEditingDisabled: string[] = [];\r\n    allMapLayers?.forEach((eachLayer: __esri.FeatureLayer) => {\r\n      if (eachLayer?.type === 'feature' && eachLayer?.editingEnabled && eachLayer?.capabilities?.operations?.supportsAdd) {\r\n        layerItemsHash[eachLayer.id].supportsAdd = true;\r\n      }\r\n      if (!eachLayer?.editingEnabled) {\r\n        layersEditingDisabled.push(eachLayer.id);\r\n      }\r\n    });\r\n    this._editableLayerIds = this.reduceToConfiguredLayers(layerItemsHash, layersEditingDisabled);\r\n    this._layerItemsHash = layerItemsHash;\r\n  }\r\n\r\n  /**\r\n   * renders feature list\r\n   *\r\n   * @private\r\n   */\r\n  private async renderFeaturesList(): Promise<void> {\r\n    this._flowItems = ['feature-list'];\r\n    const _evt = {\r\n      detail: this._editableLayerIds,\r\n    } as CustomEvent;\r\n    await this.layerListLoaded(_evt);\r\n    await this.setSelectedLayer(this._validLayers[0].id, this._validLayers[0]?.title || '');\r\n    this.updateSortingOptions();\r\n    await this.handleSelectedLayersFilter();\r\n    //navigate to the feature details if URL params found in case of single layer\r\n    if (!this._urlParamsLoaded) {\r\n      this._urlParamsLoaded = true;\r\n      await this.loadFeatureFromURLParams();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Updates the share url for current selected feature\r\n   *\r\n   * @private\r\n   */\r\n  private _updateShareURL(): void {\r\n    const url = this._shareNode.value?.shareUrl;\r\n    if (!url) {\r\n      return;\r\n    }\r\n    const urlObj = new URL(url);\r\n    //set the selected layers id\r\n    if (this._selectedLayerId) {\r\n      urlObj.searchParams.set('layerid', this._selectedLayerId);\r\n    } else {\r\n      urlObj.searchParams.delete('layerid');\r\n    }\r\n    //Set the selected features objectid\r\n    if (this._selectedFeature?.length) {\r\n      urlObj.searchParams.set('oid', this._currentFeatureId);\r\n    } else {\r\n      urlObj.searchParams.delete('oid');\r\n    }\r\n    if (this._shareNode.value) {\r\n      //update the url in share component\r\n      this._shareNode.value.autoUpdateShareUrl = false;\r\n      this._shareNode.value.shareUrl = urlObj.href;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Navigates to selected features detail based on the URL params\r\n   *\r\n   * @private\r\n   */\r\n  private async loadFeatureFromURLParams(): Promise<void> {\r\n    if (this.center && this.level) {\r\n      await this.mapView?.goTo({\r\n        center: this.center.split(';').map(Number),\r\n        zoom: parseInt(this.level, 10),\r\n      });\r\n    }\r\n    if (this.layerId && this.objectId) {\r\n      const layer = this.mapView && await getLayerOrTable(this.mapView, this.layerId);\r\n      if (layer) {\r\n        // only query if we have some ids...query with no ids will result in all features being returned\r\n        const featureSet = this.mapView && await queryFeaturesByID([Number(this.objectId)], layer, [], true, this.mapView.spatialReference);\r\n        if (featureSet?.length) {\r\n          //update the selectedFeature\r\n          await this.setSelectedFeatures(featureSet);\r\n          //if featureDetails not open then add it to the list else just reInit flowItems\r\n          // which will update details with newly selected features\r\n          // eslint-disable-next-line unicorn/prefer-ternary\r\n          if (this._flowItems.length && this._flowItems[this._flowItems.length - 1] !== 'feature-details') {\r\n            this._flowItems = [...this._flowItems, 'feature-details'];\r\n          } else {\r\n            this._flowItems = [...this._flowItems];\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handles updating the current layer expressions and definition expression for the selected layer\r\n   *\r\n   * @private\r\n   */\r\n  private async handleSelectedLayersFilter(): Promise<void> {\r\n    if (this._selectedLayer) {\r\n      const currentLayerExpressions = this.layerExpressions ?\r\n        structuredClone(this.layerExpressions.filter(exp => exp.id === this._selectedLayerId)) : [];\r\n      if (this._t9nLayerExpressions != null) {\r\n        this.handleLayerExpressionsT9n(currentLayerExpressions, this._t9nLayerExpressions);\r\n      }\r\n      this._currentLayerExpressions = currentLayerExpressions;\r\n      this.setActiveDefinitionExpressions();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handles updating the previous layer's definition expression to it's initial definition expression\r\n   *\r\n   * @private\r\n   */\r\n  private async handlePrevLayersFilter(): Promise<void> {\r\n    if (this._prevSelectedLayerId) {\r\n      const prevLayer = this.mapView && await getLayerOrTable(this.mapView, this._prevSelectedLayerId);\r\n      if (prevLayer && this._initDefExpressions) {\r\n        prevLayer.definitionExpression = this._initDefExpressions[this._prevSelectedLayerId];\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Resets the selected layer's definition expression with the initial definition expression\r\n   *\r\n   * @private\r\n   */\r\n  private async resetFilterList(): Promise<void> {\r\n    await this._filterList?.forceReset();\r\n    if (this._selectedLayer !== undefined && this._initDefExpressions) {\r\n      this._selectedLayer.definitionExpression = this._initDefExpressions[this._selectedLayerId];\r\n      this._filterActive = false;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Sets the active definition expressions for the selected layer\r\n   *\r\n   * @private\r\n   */\r\n  private setActiveDefinitionExpressions(): void {\r\n    if (this._selectedLayer === undefined) {\r\n      return;\r\n    }\r\n    const defExpressions: string[] = [];\r\n    if (this._currentLayerExpressions && this._currentLayerExpressions?.length > 0) {\r\n      const layerExpression = this._currentLayerExpressions[0];\r\n      for (const expression of layerExpression.expressions) {\r\n        const { active, definitionExpression } = expression;\r\n        if (active && definitionExpression) {\r\n          defExpressions.push(`(${definitionExpression})`);\r\n        }\r\n      }\r\n      this._filterActive = defExpressions.length > 0;\r\n      this.updateFilterLayerDefExpression(defExpressions, layerExpression.operator);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Updates the selected layer's definition expression based on the active expressions\r\n   *\r\n   * @private\r\n   */\r\n  private updateFilterLayerDefExpression(\r\n    defExpressions: string[],\r\n    operator: string\r\n  ): void {\r\n    const initDefExpression = this._initDefExpressions && this._initDefExpressions[this._selectedLayerId];\r\n    const combinedExpressions =\r\n      defExpressions?.length > 0 && initDefExpression\r\n        ? `(${defExpressions.join(operator)}) AND (${initDefExpression})`\r\n        : defExpressions.length > 0\r\n          ? defExpressions.join(operator)\r\n          : initDefExpression;\r\n    if (this._selectedLayer) {\r\n      this._selectedLayer.definitionExpression = combinedExpressions;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Sets the initial definition expressions for all the feature layers\r\n   *\r\n   * @private\r\n   */\r\n  private setInitExpressions(): void {\r\n    this._initDefExpressions = {};\r\n    if (this.mapView == null) {\r\n      return;\r\n    }\r\n    const map = this.mapView.map as __esri.WebMap | __esri.WebScene;\r\n    map.allLayers.concat(map.allTables.toArray()).forEach(layer => {\r\n      if (layer.type === 'map-image' && (layer as any).popupEnabled && !this._mapImageryLayersId.includes(layer.id)) {\r\n        this._mapImageryLayersId.push(layer.id);\r\n        return;\r\n      }\r\n      if (layer.type !== 'feature') {\r\n        return;\r\n      }\r\n      const fl = layer as __esri.FeatureLayer;\r\n      if (this._initDefExpressions) {\r\n        this._initDefExpressions[fl.id] = fl.definitionExpression || '';\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Handles updating the layer expressions with the translated strings\r\n   *\r\n   * @private\r\n   */\r\n  private handleLayerExpressionsT9n(\r\n    layerExpressions: ILayerExpression[],\r\n    layerExpressionsT9n: ILayerExpression[]\r\n  ): void {\r\n    layerExpressions?.forEach(layerExpression => {\r\n      const t9nLayerExpression = layerExpressionsT9n?.find(t9nLayerExpression => t9nLayerExpression.id === layerExpression.id);\r\n      if (t9nLayerExpression != null) {\r\n        layerExpression.title = t9nLayerExpression.title;\r\n        layerExpression.expressions?.forEach(expression => {\r\n          const t9nExpression = t9nLayerExpression.expressions?.find(t9nExpression => t9nExpression.id === expression.id);\r\n          if (t9nExpression != null) {\r\n            expression.name = t9nExpression.name;\r\n          }\r\n        });\r\n      }\r\n    });\r\n  }\r\n}\r\n"],"names":["ref$jsx","t9nLayerExpression","t9nExpression"],"mappings":"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"}

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

@@ -1,12 +1,12 @@
-import { c as o } from "../../chunks/runtime.js";
-import { css as u, html as i } from "lit";
-import { E as a, a as s, b as p } from "../../chunks/pciUtils.js";
-import { createRef as c, ref as n } from "lit-html/directives/ref.js";
-import { LitElement as m, createEvent as d } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.56 */
-const y = u`/** @license
+v1.2.0-next.58 */
+import { c as customElement } from "../../chunks/runtime.js";
+import { css, html } from "lit";
+import { E as EDistressType, a as ESeverity, b as calculateDeductValue } from "../../chunks/pciUtils.js";
+import { createRef, ref } from "lit-html/directives/ref.js";
+import { LitElement, createEvent } from "@arcgis/lumina";
+const styles = css`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -20,39 +20,59 @@ const y = u`/** @license
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */:host{display:block;--calcite-label-margin-bottom: 0}.label-display{display:block;padding-bottom:1rem}`;
-class h extends m {
+ */
+
+:host {
+  display: block;
+  --calcite-label-margin-bottom: 0;
+}
+
+.label-display {
+  display: block;
+  padding-bottom: 1rem;
+}`;
+class DeductCalculator extends LitElement {
   constructor() {
-    super(...arguments), this._densityElement = c(), this._typeElement = c(), this._severityElement = c(), this._types = Object.keys(a).filter((e) => !Number.isNaN(Number(a[e]))), this.deductValueComplete = d();
+    super(...arguments);
+    this._densityElement = createRef();
+    this._typeElement = createRef();
+    this._severityElement = createRef();
+    this._types = Object.keys(EDistressType).filter((k) => !Number.isNaN(Number(EDistressType[k])));
+    this.deductValueComplete = createEvent();
   }
   static {
-    this.styles = y;
+    this.styles = styles;
   }
   render() {
-    return i`<div class="label-display"><calcite-label class="label-display">\r\n            Density %${this._getDensityInput()}</calcite-label><calcite-label class="label-display">\r\n            Type${this._getTypeInput()}</calcite-label><calcite-label class="label-display">\r\n            Severity${this._getSeverityInput()}</calcite-label></div><div>${this._getCalculateInput()}</div>`;
+    return html`<div class="label-display"><calcite-label class="label-display">\r\n            Density %${this._getDensityInput()}</calcite-label><calcite-label class="label-display">\r\n            Type${this._getTypeInput()}</calcite-label><calcite-label class="label-display">\r\n            Severity${this._getSeverityInput()}</calcite-label></div><div>${this._getCalculateInput()}</div>`;
   }
   _getDensityInput() {
-    return i`<calcite-input max=100 min=0 type=number ${n(this._densityElement)}></calcite-input>`;
+    return html`<calcite-input max=100 min=0 type=number ${ref(this._densityElement)}></calcite-input>`;
   }
   _getTypeInput() {
-    return i`<calcite-select label ${n(this._typeElement)}>${this._types.map((e, t) => i`<calcite-option .value=${a[e].toString()}>${`${e} (${t + 1})`}</calcite-option>`)}</calcite-select>`;
+    return html`<calcite-select label ${ref(this._typeElement)}>${this._types.map((t, i) => html`<calcite-option .value=${EDistressType[t].toString()}>${`${t} (${i + 1})`}</calcite-option>`)}</calcite-select>`;
   }
   _getSeverityInput() {
-    return i`<calcite-select label ${n(this._severityElement)}><calcite-option .value=${s.H}>\r\n          High</calcite-option><calcite-option .value=${s.M}>\r\n          Medium</calcite-option><calcite-option .value=${s.L}>\r\n          Low</calcite-option></calcite-select>`;
+    return html`<calcite-select label ${ref(this._severityElement)}><calcite-option .value=${ESeverity.H}>\r\n          High</calcite-option><calcite-option .value=${ESeverity.M}>\r\n          Medium</calcite-option><calcite-option .value=${ESeverity.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, l = this._densityElement.value && Number.parseFloat(this._densityElement.value.value);
-    return i`<calcite-button @click=${() => this._calculateDeduct(e, t, l)}>\r\n        Calculate Deduct Value</calcite-button>`;
-  }
-  _calculateDeduct(e, t, l) {
-    if (e && t && !Number.isNaN(l)) {
-      const r = p(e.toString(), t.toString(), l.toString(), !0);
-      this.deductValueComplete.emit(r), alert(r);
-    } else
+    const _type = this._typeElement.value && Number.parseFloat(this._typeElement.value.value);
+    const _sev = this._severityElement.value && this._severityElement.value.value;
+    const _den = this._densityElement.value && Number.parseFloat(this._densityElement.value.value);
+    return html`<calcite-button @click=${() => this._calculateDeduct(_type, _sev, _den)}>\r\n        Calculate Deduct Value</calcite-button>`;
+  }
+  _calculateDeduct(type, severity, density) {
+    if (type && severity && !Number.isNaN(density)) {
+      const dv = calculateDeductValue(type.toString(), severity.toString(), density.toString(), true);
+      this.deductValueComplete.emit(dv);
+      alert(dv);
+    } else {
       alert("Type, severity, and a density number are required");
+    }
   }
 }
-o("deduct-calculator", h);
+customElement("deduct-calculator", DeductCalculator);
 export {
-  h as DeductCalculator
+  DeductCalculator
 };
+//# sourceMappingURL=customElement.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"customElement.js","sources":["../../../src/components/deduct-calculator/deduct-calculator.tsx"],"sourcesContent":["/**\r\n * @license\r\n * Copyright 2025 Esri\r\n *\r\n * Licensed under the Apache License, Version 2.0 (the 'License');\r\n * you may not use this file except in compliance with the License.\r\n * You may obtain a copy of the License at\r\n *\r\n *    http://www.apache.org/licenses/LICENSE-2.0\r\n *\r\n * Unless required by applicable law or agreed to in writing, software\r\n * distributed under the License is distributed on an 'AS IS' BASIS,\r\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n * See the License for the specific language governing permissions and\r\n * limitations under the License.\r\n */\r\n\r\n// This is a demo component for internal use only.\r\n// It may eventually live somewhere else and doesn't really need to be a component.\r\n// The main code will be whats in the supporting util file...it will be used by a survey123 form.\r\n// It has been requested that we have a simple way to demo and test the functionality.\r\n// I am putting here now just to keep together with other current work.\r\n\r\nimport {\r\n  calculateDeductValue,\r\n  EDistressType,\r\n  ESeverity\r\n} from '../../utils/pciUtils';\r\nimport { createRef } from 'lit-html/directives/ref.js';\r\nimport {\r\n  LitElement,\r\n  createEvent,\r\n  Fragment,\r\n  h,\r\n} from '@arcgis/lumina';\r\nimport type {\r\n  JsxNode,\r\n} from '@arcgis/lumina';\r\nimport { styles } from './deduct-calculator.css';\r\n\r\ndeclare global {\r\n  interface DeclareElements {\r\n    'deduct-calculator': DeductCalculator;\r\n  }\r\n}\r\n\r\nexport class DeductCalculator extends LitElement {\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Overrides (internal)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  static override styles = styles;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  State (internal)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** HTMLCalciteInputElement: The html element for setting the density value */\r\n  private _densityElement = createRef<HTMLCalciteInputElement>();\r\n\r\n  /**\r\n   * HTMLCalciteSelectElement: The html element for selecting the distress type\r\n   * 1-19 based on values defined by ASTM standard\r\n   */\r\n  private _typeElement = createRef<HTMLCalciteSelectElement>();\r\n\r\n  /**\r\n   * HTMLCalciteSelectElement: The html element for selecting the distress severity\r\n   * 'H' | 'M' | 'L'\r\n   */\r\n  private _severityElement = createRef<HTMLCalciteSelectElement>();\r\n\r\n  /** string[]: Array of the distress types */\r\n  private _types: string[] = Object.keys(EDistressType).filter((k: any) => !Number.isNaN(Number(EDistressType[k])));\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Watch handlers\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Methods (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Events (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Emitted on demand when the user clicks to calculate the deduct value */\r\n  deductValueComplete = createEvent<string>();\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Functions (lifecycle)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Renders the component. */\r\n  override render(): JsxNode {\r\n    return (\r\n      <>\r\n        <div class='label-display'>\r\n          <calcite-label class='label-display'>\r\n            Density %{this._getDensityInput()}\r\n          </calcite-label>\r\n          <calcite-label class='label-display'>\r\n            Type\r\n            {this._getTypeInput()}\r\n          </calcite-label>\r\n          <calcite-label class='label-display'>\r\n            Severity\r\n            {this._getSeverityInput()}\r\n          </calcite-label>\r\n        </div>\r\n        <div>{this._getCalculateInput()}</div>\r\n      </>\r\n    );\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Functions (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Render the density input\r\n   *\r\n   * @returns a node with a control to set the density number (float)\r\n   * @private\r\n   */\r\n  private _getDensityInput(): JsxNode {\r\n    return <calcite-input\r\n      max={100}\r\n      min={0}\r\n      ref={this._densityElement}\r\n      type='number'\r\n    />;\r\n  }\r\n\r\n  /**\r\n   * Render the distress type input\r\n   *\r\n   * @returns a node with a control that shows the distress type name and value\r\n   * for example ALLIGATOR_CRACKING (1)\r\n   * @private\r\n   */\r\n  private _getTypeInput(): JsxNode {\r\n    return (\r\n      <calcite-select\r\n        label=''\r\n        ref={this._typeElement}\r\n      >\r\n        {this._types.map((t: any, i) => (\r\n          <calcite-option\r\n            value={EDistressType[t].toString()}\r\n          >\r\n            {`${t} (${i + 1})`}\r\n          </calcite-option>\r\n        ))}\r\n      </calcite-select>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Render the distress type input\r\n   *\r\n   * @returns a node with a control that shows the distress type name and value\r\n   * for example ALLIGATOR_CRACKING (1)\r\n   * @private\r\n   */\r\n  private _getSeverityInput(): JsxNode {\r\n    return (\r\n      <calcite-select\r\n        label=''\r\n        ref={this._severityElement}\r\n      >\r\n        <calcite-option value={ESeverity.H}>\r\n          High\r\n        </calcite-option>\r\n        <calcite-option value={ESeverity.M}>\r\n          Medium\r\n        </calcite-option>\r\n        <calcite-option value={ESeverity.L}>\r\n          Low\r\n        </calcite-option>\r\n      </calcite-select>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Render calculate deduct value button\r\n   *\r\n   * @returns a node with a control that calculates the deduct value\r\n   * @private\r\n   */\r\n  private _getCalculateInput(): JsxNode {\r\n    const _type = this._typeElement.value && Number.parseFloat(this._typeElement.value.value);\r\n    const _sev = this._severityElement.value && this._severityElement.value.value;\r\n    const _den = this._densityElement.value && Number.parseFloat(this._densityElement.value.value);\r\n    return (\r\n      <calcite-button\r\n        onClick={() =>\r\n          this._calculateDeduct(_type as number, _sev as unknown as ESeverity, _den as number)\r\n        }\r\n      >\r\n        Calculate Deduct Value\r\n      </calcite-button>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Calculate the deduct value based on the user inputs using the ASTM methodology\r\n   *\r\n   * @param type distress type 1-19 based on ASTM\r\n   * @param severity 'H' | 'M' | 'L' high, med, low based on ASTM\r\n   * @param density percent density of the distress type and severity based on total sample area\r\n   * @private\r\n   */\r\n  private _calculateDeduct(\r\n    type: number,\r\n    severity: ESeverity,\r\n    density: number\r\n  ): void {\r\n    if (type && severity && !Number.isNaN(density)) {\r\n      const dv = calculateDeductValue(type.toString(), severity.toString(), density.toString(), true);\r\n      this.deductValueComplete.emit(dv);\r\n      alert(dv);\r\n    } else {\r\n      alert('Type, severity, and a density number are required');\r\n    }\r\n  }\r\n}\r\n"],"names":["ref$jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CM,MAAO,yBAAyB,WAAU;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA;AA6BJ,SAAQ,kBAAkB,UAAA;AAM1B,SAAQ,eAAe,UAAA;AAMvB,SAAQ,mBAAmB,UAAA;AAG3B,SAAQ,SAAmB,OAAO,KAAK,aAAa,EAAE,OAAO,CAAC,MAAW,CAAC,OAAO,MAAM,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC;AAqBhH,SAAA,sBAAsB,YAAA;AAAA;EAzDtB,OAAA;AAAA,SAAgB,SAAS;AAAA,EAAA;AAAA,EAkEhB,SAAiB;AACxB,WAAO,gGAIW,KAAK,iBAAA,CAAkB,4EAIhC,KAAK,cAAA,CAAe,gFAIpB,KAAK,mBAAmB,8BAGvB,KAAK,oBAAoB;AAAA,EAGrC;AAAA,EAcQ,mBAA2B;AACjC,WAAA,gDAAAA,IAGO,KAAK,eAAe,CAAA;AAAA,EAG7B;AAAA,EASQ,gBAAwB;AAC9B,4CAGS,KAAK,YAAY,CAAA,IAErB,KAAK,OAAO,IAAI,CAAC,GAAQ,MAAM,8BAErB,cAAc,CAAC,EAAE,SAAA,CAAU,IAEjC,GAAG,CAAC,KAAK,IAAI,CAAC,GAAG,mBAErB,CAAC;AAAA,EAGR;AAAA,EASQ,oBAA4B;AAClC,4CAGS,KAAK,gBAAgB,CAAA,2BAEH,UAAU,CAAC,8DAGX,UAAU,CAAC,gEAGX,UAAU,CAAC;AAAA,EAKxC;AAAA,EAQQ,qBAA6B;AACnC,UAAM,QAAQ,KAAK,aAAa,SAAS,OAAO,WAAW,KAAK,aAAa,MAAM,KAAK;AACxF,UAAM,OAAO,KAAK,iBAAiB,SAAS,KAAK,iBAAiB,MAAM;AACxE,UAAM,OAAO,KAAK,gBAAgB,SAAS,OAAO,WAAW,KAAK,gBAAgB,MAAM,KAAK;AAC7F,WAAO,8BAEM,MACP,KAAK,iBAAiB,OAAiB,MAA8B,IAAc,CAAC;AAAA,EAM5F;AAAA,EAUQ,iBACN,MACA,UACA,SACK;AACL,QAAI,QAAQ,YAAY,CAAC,OAAO,MAAM,OAAO,GAAG;AAC9C,YAAM,KAAK,qBAAqB,KAAK,SAAA,GAAY,SAAS,YAAY,QAAQ,SAAA,GAAY,IAAI;AAC9F,WAAK,oBAAoB,KAAK,EAAE;AAChC,YAAM,EAAE;AAAA,IACV,OAAO;AACL,YAAM,mDAAmD;AAAA,IAC3D;AAAA,EACF;AACD;;"}

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

@@ -23,7 +23,7 @@ export declare class DeleteButton extends LitElement {
     icon: HTMLCalciteIconElement['icon'] | undefined;
     /** number[]: The ids that would be deleted */
     ids: (number | string)[];
-    /** esri/views/layers/FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html */
+    /** esri/views/layers/FeatureLayer: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html */
     layer: __esri.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

@@ -1,11 +1,11 @@
-import { c as s } from "../../chunks/runtime.js";
-import { u as l } from "../../chunks/useT9n.js";
-import { css as n, html as e, nothing as a } from "lit";
-import { LitElement as o, createEvent as i } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.56 */
-const d = n`/** @license
+v1.2.0-next.58 */
+import { c as customElement } from "../../chunks/runtime.js";
+import { u as useT9n } from "../../chunks/useT9n.js";
+import { css, html, nothing } from "lit";
+import { LitElement, createEvent } from "@arcgis/lumina";
+const styles = css`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -19,19 +19,38 @@ const d = n`/** @license
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */:host{display:block}`;
-class r extends o {
+ */
+
+:host {
+  display: block;
+}`;
+class DeleteButton extends LitElement {
   constructor() {
-    super(...arguments), this.buttonType = "button", this.disabled = !1, this.ids = [], this.showDeleteCount = !0, this._confirmDelete = !1, this._deleteEndabled = !1, this._supportsDelete = !1, this._translations = l({ name: "delete-button", blocking: !0 }), this.editsComplete = i(), this.deleteClicked = i();
+    super(...arguments);
+    this.buttonType = "button";
+    this.disabled = false;
+    this.ids = [];
+    this.showDeleteCount = true;
+    this._confirmDelete = false;
+    this._deleteEndabled = false;
+    this._supportsDelete = false;
+    this._translations = useT9n({ name: "delete-button", blocking: true });
+    this.editsComplete = createEvent();
+    this.deleteClicked = createEvent();
   }
   static {
-    this.properties = { deleteDialog: 1, buttonType: 1, disabled: 5, icon: 0, ids: 0, layer: 0, showDeleteCount: 5, _confirmDelete: 16, _deleteEndabled: 16, _supportsDelete: 16, _translations: 16 };
+    this.properties = { deleteDialog: 1, buttonType: 1, disabled: [5, {}, { type: Boolean }], icon: [0, {}, { attribute: false }], ids: [0, {}, { attribute: false }], layer: [0, {}, { attribute: false }], showDeleteCount: [5, {}, { type: Boolean }], _confirmDelete: [16, {}, { state: true }], _deleteEndabled: [16, {}, { state: true }], _supportsDelete: [16, {}, { state: true }], _translations: [16, {}, { state: true }] };
   }
   static {
-    this.styles = d;
+    this.styles = styles;
   }
-  willUpdate(t) {
-    t.has("ids") && (this.hasUpdated || this.ids?.length > 0) && this.idsWatchHandler(), t.has("layer") && this.layerWatchHandler();
+  willUpdate(changes) {
+    if (changes.has("ids") && (this.hasUpdated || this.ids?.length > 0)) {
+      void this.idsWatchHandler();
+    }
+    if (changes.has("layer")) {
+      void this.layerWatchHandler();
+    }
   }
   async idsWatchHandler() {
     this._setDeleteEnabled();
@@ -40,22 +59,25 @@ class r extends o {
     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 ?? a} @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 html`${this.buttonType === "button" ? html`<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>` : html`<calcite-action appearance=solid .disabled=${!this._deleteEndabled} id=${this.icon ?? nothing} @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>`;
   }
   loaded() {
     this._setDeleteEnabled();
   }
   _setDeleteEnabled() {
-    this._supportsDelete = !!(this.layer?.editingEnabled && this.layer?.capabilities?.operations?.supportsDelete), this._deleteEndabled = !this.disabled || this._supportsDelete && this.ids?.length > 0;
+    this._supportsDelete = this.layer?.editingEnabled && this.layer?.capabilities?.operations?.supportsDelete ? true : false;
+    this._deleteEndabled = !this.disabled || this._supportsDelete && this.ids?.length > 0;
   }
   _delete() {
-    this.deleteClicked.emit(), this._confirmDelete = !0;
+    this.deleteClicked.emit();
+    this._confirmDelete = true;
   }
   _deleteMessage() {
-    return this.deleteDialog ? this.deleteDialog : e`<delete-dialog id=solution-delete-dialog .ids=${this.ids} .layer=${this.layer} @deleteDialogClose=${() => this._confirmDelete = !1} .open=${this._confirmDelete}></delete-dialog>`;
+    return this.deleteDialog ? this.deleteDialog : html`<delete-dialog id=solution-delete-dialog .ids=${this.ids} .layer=${this.layer} @deleteDialogClose=${() => this._confirmDelete = false} .open=${this._confirmDelete}></delete-dialog>`;
   }
 }
-s("delete-button", r);
+customElement("delete-button", DeleteButton);
 export {
-  r as DeleteButton
+  DeleteButton
 };
+//# sourceMappingURL=customElement.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"customElement.js","sources":["../../../src/components/delete-button/delete-button.tsx"],"sourcesContent":["/**\r\n * @license\r\n * Copyright 2025 Esri\r\n *\r\n * Licensed under the Apache License, Version 2.0 (the 'License');\r\n * you may not use this file except in compliance with the License.\r\n * You may obtain a copy of the License at\r\n *\r\n *    http://www.apache.org/licenses/LICENSE-2.0\r\n *\r\n * Unless required by applicable law or agreed to in writing, software\r\n * distributed under the License is distributed on an 'AS IS' BASIS,\r\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n * See the License for the specific language governing permissions and\r\n * limitations under the License.\r\n */\r\n\r\nimport type T9nStrings from './assets/t9n/messages.en.json';\r\nimport type { ButtonType, EditType } from '../../utils/interfaces';\r\nimport { useT9n } from '../../controllers/useT9n';\r\nimport type { PropertyValues } from 'lit';\r\nimport {\r\n  LitElement,\r\n  property,\r\n  createEvent,\r\n  Fragment,\r\n  h,\r\n  state,\r\n} from '@arcgis/lumina';\r\nimport type {\r\n  JsxNode,\r\n} from '@arcgis/lumina';\r\nimport { styles } from './delete-button.css';\r\n\r\ndeclare global {\r\n  interface DeclareElements {\r\n    'delete-button': DeleteButton;\r\n  }\r\n}\r\n\r\nexport class DeleteButton extends LitElement {\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Overrides (internal)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  static override styles = styles;\r\n\r\n  /** TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code */\r\n  override willUpdate(\r\n    changes: PropertyValues<this>\r\n  ): void {\r\n    /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.\r\n    To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method\r\n    Please refactor your code to reduce the need for this check.\r\n    Docs: https://qawebgis.esri.com/components/lumina/transition-from-stencil#watching-for-property-changes */\r\n    if (changes.has('ids') && (this.hasUpdated || this.ids?.length > 0)) {\r\n      void this.idsWatchHandler();\r\n    }\r\n\r\n    if (changes.has('layer')) {\r\n      void this.layerWatchHandler();\r\n    }\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** calcite-dialog: Use this prop when using the button within a parent like a dropdown that would constrain the dialog and that is not desired */\r\n  @property() deleteDialog: any; //HTMLDeleteDialog;\r\n\r\n  /** ButtonType (button | action): Support usage as action or button */\r\n  @property() buttonType: ButtonType = 'button';\r\n\r\n  /** boolean: This overrides internal enable/disable logic that is based on checks if the layer supports delete */\r\n  @property() disabled = false;\r\n\r\n  /** string: The icon to display in the component */\r\n  @property() icon: HTMLCalciteIconElement['icon'] | undefined;\r\n\r\n  /** number[]: The ids that would be deleted */\r\n  @property() ids: (number | string)[] = [];\r\n\r\n  /** esri/views/layers/FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html */\r\n  @property() layer: __esri.FeatureLayer | undefined;\r\n\r\n  /** boolean: When true the delete button will show the number of features that will be deleted */\r\n  @property() showDeleteCount = true;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  State (internal)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** boolean: When true the user will be asked to confirm the delete operation */\r\n  @state() _confirmDelete = false;\r\n\r\n  /** boolean: When true the user can delete the current features */\r\n  @state() _deleteEndabled = false;\r\n\r\n  /** boolean: When true the layer supports delete and a button will be returned */\r\n  @state() _supportsDelete = false;\r\n\r\n  /**\r\n   * Contains the translations for this component.\r\n   * All UI strings should be defined here.\r\n   */\r\n  @state() _translations = useT9n<typeof T9nStrings>({name: 'delete-button', blocking: true});\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Watch handlers\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** watch for changes in layer view and verify if it has editing enabled */\r\n  private async idsWatchHandler(): Promise<void> {\r\n    this._setDeleteEnabled();\r\n  }\r\n\r\n  /** watch for changes in layer view and verify if it has editing enabled */\r\n  private async layerWatchHandler(): Promise<void> {\r\n    this._setDeleteEnabled();\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Methods (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Events (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Emitted on demand when features have been deleted */\r\n  editsComplete = createEvent<EditType>();\r\n\r\n  /** Emitted on demand when the delete button is clicked */\r\n  deleteClicked = createEvent();\r\n\r\n  /** Renders the component. */\r\n  override render(): JsxNode {\r\n    return (\r\n      <>\r\n        {this.buttonType === 'button' ? (\r\n          <calcite-button\r\n            appearance='outline'\r\n            disabled={!this._deleteEndabled}\r\n            id='solutions-delete'\r\n            kind='danger'\r\n            onClick={() => this._delete()}\r\n            width='full'\r\n          >\r\n            {this.showDeleteCount ? this._translations.deleteCount?.replace('{{n}}', this.ids?.length.toString()) : this._translations.delete}\r\n          </calcite-button>\r\n        ) : (\r\n          <calcite-action\r\n            appearance='solid'\r\n            disabled={!this._deleteEndabled}\r\n            id={this.icon}\r\n            onClick={() => this._delete()}\r\n            scale='s'\r\n            text={this._translations.delete}\r\n          >\r\n            <calcite-button\r\n              appearance='transparent'\r\n              iconStart={this.icon}\r\n              kind='danger'\r\n            >\r\n              {this._translations.delete}\r\n            </calcite-button>\r\n          </calcite-action>\r\n        )}\r\n        {this._deleteMessage()}\r\n        <calcite-tooltip\r\n          placement={'bottom'}\r\n          referenceElement={this.buttonType === 'button' ? 'solutions-delete' : this.icon}\r\n        >\r\n          <span>\r\n            {this._translations.delete}\r\n          </span>\r\n        </calcite-tooltip>\r\n      </>\r\n    );\r\n  }\r\n\r\n  /** Called once just after the component is fully loaded and the first render() occurs. */\r\n  loaded(): void {\r\n    this._setDeleteEnabled();\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Functions (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Verify if the layer supports delete and that we have 1 or more ids */\r\n  private _setDeleteEnabled(): void {\r\n    this._supportsDelete = this.layer?.editingEnabled && this.layer?.capabilities?.operations?.supportsDelete ? true : false;\r\n    this._deleteEndabled = !this.disabled || (this._supportsDelete && this.ids?.length > 0);\r\n  }\r\n\r\n  /**\r\n   * Delete all selected records or shows an alert if the layer does not have editing enabled\r\n   *\r\n   * @returns a promise that will resolve when the operation is complete\r\n   */\r\n  private _delete(): void {\r\n    this.deleteClicked.emit();\r\n    this._confirmDelete = true;\r\n  }\r\n\r\n  /**\r\n   * Show delete confirmation message\r\n   *\r\n   * @returns node to confirm or deny the delete operation\r\n   */\r\n  private _deleteMessage(): JsxNode {\r\n    return this.deleteDialog ? (\r\n      this.deleteDialog\r\n    ) : (\r\n      <delete-dialog\r\n        id='solution-delete-dialog'\r\n        ids={this.ids}\r\n        layer={this.layer}\r\n        ondeleteDialogClose={() => (this._confirmDelete = false)}\r\n        open={this._confirmDelete}\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAwCM,MAAO,qBAAqB,WAAU;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA;AAqCQ,SAAA,aAAyB;AAGzB,SAAA,WAAW;AAMX,SAAA,MAA2B,CAAA;AAM3B,SAAA,kBAAkB;AASrB,SAAA,iBAAiB;AAGjB,SAAA,kBAAkB;AAGlB,SAAA,kBAAkB;AAMlB,SAAA,gBAAgB,OAA0B,EAAC,MAAM,iBAAiB,UAAU,MAAK;AAqC1F,SAAA,gBAAgB,YAAA;AAGhB,SAAA,gBAAgB,YAAA;AAAA,EAAW;AAAA;;;EAzG3B,OAAA;AAAA,SAAgB,SAAS;AAAA,EAAA;AAAA,EAGhB,WACP,SACK;AAKL,QAAI,QAAQ,IAAI,KAAK,MAAM,KAAK,cAAc,KAAK,KAAK,SAAS,IAAI;AACnE,WAAK,KAAK,gBAAA;AAAA,IACZ;AAEA,QAAI,QAAQ,IAAI,OAAO,GAAG;AACxB,WAAK,KAAK,kBAAA;AAAA,IACZ;AAAA,EACF;AAAA,EA+DA,MAAc,kBAAgC;AAC5C,SAAK,kBAAA;AAAA,EACP;AAAA,EAGA,MAAc,oBAAkC;AAC9C,SAAK,kBAAA;AAAA,EACP;AAAA,EAqBS,SAAiB;AACxB,WAAO,OAEF,KAAK,eAAe,WAAW,oDAGlB,CAAC,KAAK,eAAe,2CAGtB,MAAM,KAAK,QAAA,CAAS,eAG5B,KAAK,kBAAkB,KAAK,cAAc,aAAa,QAAQ,SAAS,KAAK,KAAK,OAAO,SAAA,CAAU,IAAI,KAAK,cAAc,MAAM,sBAEjI,kDAGU,CAAC,KAAK,eAAe,OAC3B,KAAK,QAAI,OAAA,WACJ,MAAM,KAAK,SAAS,kBAEvB,KAAK,cAAc,MAAM,sDAIlB,KAAK,IAAI,gBAGnB,KAAK,cAAc,MAAM,oCAG/B,GACA,KAAK,eAAA,CAAgB,uDAGF,KAAK,eAAe,WAAW,qBAAqB,KAAK,IAAI,UAG5E,KAAK,cAAc,MAAM;AAAA,EAKpC;AAAA,EAGA,SAAc;AACZ,SAAK,kBAAA;AAAA,EACP;AAAA,EASQ,oBAAyB;AAC/B,SAAK,kBAAkB,KAAK,OAAO,kBAAkB,KAAK,OAAO,cAAc,YAAY,iBAAiB,OAAO;AACnH,SAAK,kBAAkB,CAAC,KAAK,YAAa,KAAK,mBAAmB,KAAK,KAAK,SAAS;AAAA,EACvF;AAAA,EAOQ,UAAe;AACrB,SAAK,cAAc,KAAA;AACnB,SAAK,iBAAiB;AAAA,EACxB;AAAA,EAOQ,iBAAyB;AAC/B,WAAO,KAAK,eACV,KAAK,eACH,qDAGK,KAAK,GAAG,WACN,KAAK,KAAK,uBACI,MAAO,KAAK,iBAAiB,KAAM,UAClD,KAAK,cAAc;AAAA,EAG/B;AACD;;"}

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

@@ -6,7 +6,7 @@ import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/
 export declare class DeleteDialog extends LitElement {
     /** number[]: The ids that would be deleted */
     ids: (number | string)[];
-    /** esri/views/layers/FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html */
+    /** esri/views/layers/FeatureLayer: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html */
     layer: __esri.FeatureLayer | undefined;
     /**
      * boolean: When true the delete dialog will be displayed