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

package/dist/components/feature-list/customElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"customElement.js","sources":["../../../src/components/feature-list/feature-list.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 { PopupUtils } from '../../utils/popupUtils';\r\nimport type {\r\n  IPopupUtils,\r\n  IReportingOptions,\r\n  ISortingInfo\r\n} from '../../utils/interfaces';\r\nimport {\r\n  getFeatureLayerView,\r\n  getLayerOrTable,\r\n  highlightFeatures\r\n} from '../../utils/mapViewUtils';\r\nimport type T9nStrings from './assets/t9n/messages.en.json';\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  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 './feature-list.css';\r\nimport config from '@arcgis/core/config';\r\nimport * as symbolUtils from '@arcgis/core/symbols/support/symbolUtils';\r\nimport * as reactiveUtils from '@arcgis/core/core/reactiveUtils';\r\n\r\ndeclare global {\r\n  interface DeclareElements {\r\n    'feature-list': FeatureList;\r\n  }\r\n}\r\n\r\nexport class FeatureList 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    this.listenOn<CustomEvent>(window, 'selectedLanguageUpdated', this.selectedLanguageUpdated);\r\n  }\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\r\n    if (changes.has('selectedLayerId')) {\r\n      void this.selectedLayerWatchHandler();\r\n    }\r\n\r\n    if (changes.has('sortingInfo')) {\r\n      void this.sortingInfoWatchHandler();\r\n    }\r\n\r\n    if (changes.has('whereClause')) {\r\n      void this.whereClauseHandler();\r\n    }\r\n\r\n    if (changes.has('filterByMapExtent') && this.hasUpdated) {\r\n      void this.filterByMapExtentWatchHandler(this.filterByMapExtent);\r\n    }\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** string: Layer id of the feature layer to show the list */\r\n  @property() selectedLayerId = '';\r\n\r\n  /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */\r\n  @property() mapView: __esri.MapView | undefined;\r\n\r\n  /** string: Message to be displayed when features are not found */\r\n  @property() noFeaturesFoundMsg? = '';\r\n\r\n  /** number: Number features to be fetched per page, by default 100 features will be fetched */\r\n  @property() pageSize?: number = 100;\r\n\r\n  /** boolean: Highlight feature on map optional (default false) boolean to indicate if we should highlight and zoom to the extent of the feature geometry */\r\n  @property() highlightOnMap? = false;\r\n\r\n  /** boolean: Highlight feature on map optional (default false) boolean to indicate if we should highlight when hover on Feature in list */\r\n  @property() highlightOnHover? = false;\r\n\r\n  /** ISortingInfo: Sorting field and order using which features list will be sorted */\r\n  @property() sortingInfo?: ISortingInfo;\r\n\r\n  /** string: where clause to filter the features list */\r\n  @property() whereClause?: string;\r\n\r\n  /** string(small/large): Controls the font size of the title */\r\n  @property() textSize?: 'large' | 'small' = 'large';\r\n\r\n  /** boolean: Show initial loading indicator when creating list */\r\n  @property() showInitialLoading? = true;\r\n\r\n  /** boolean: If true will show error msg when features are not present */\r\n  @property() showErrorWhenNoFeatures? = false;\r\n\r\n  /** boolean: If true display's profile img on each feature item */\r\n  @property() showUserImageInList? = false;\r\n\r\n  /** boolean: If true display's feature symbol on each feature item */\r\n  @property() showFeatureSymbol? = false;\r\n\r\n  /** boolean: If true will consider the FeatureFilter applied on the layerview */\r\n  @property() applyLayerViewFilter? = false;\r\n\r\n  /** IReportingOptions: Key options for reporting */\r\n  @property() reportingOptions: IReportingOptions | undefined;\r\n\r\n  /** boolean: When false popup title will shown in single line */\r\n  @property() showFullTitle = true;\r\n\r\n  /** boolean: when true the feature from map view extent will shown */\r\n  @property() filterByMapExtent = false;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  State (internal)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** calcite-list-item list of features with popup titles */\r\n  @state() _featureItems: any = [];\r\n\r\n  /** number: Total number of feature count */\r\n  @state() _featuresCount = 0;\r\n\r\n  /** boolean: Check if selected layer's features fetching process is completed */\r\n  @state() _isLoading = false;\r\n\r\n  /** string: Placeholder string to show fields included in full text search */\r\n  @state() _searchPlaceHolder = '';\r\n\r\n  /** any[]: Contains full text search info object */\r\n  @state() _fullTextSearchInfo: any[] = [];\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: 'feature-list', blocking: true });\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** IPopupUtils: To fetch the list label using popup titles */\r\n  private _popupUtils: IPopupUtils | undefined;\r\n\r\n  /** __esri.FeatureLayer: Selected feature layer from the layer list */\r\n  private _selectedLayer: __esri.FeatureLayer | undefined;\r\n\r\n  /** __esri.Handle: Highlight handle of the selections */\r\n  private _highlightHandle: __esri.Handle | undefined;\r\n\r\n  /** __esri.Handle: Handle for filter by map extent */\r\n  private _filterByMapExtentHandle: __esri.Handle | undefined;\r\n\r\n  /** HTMLCalcitePaginationElement: Calcite pagination element instance */\r\n  private _pagination = createRef<HTMLCalcitePaginationElement>();\r\n\r\n  /** HTMLCalciteListElement: Calcite List element instance */\r\n  private _calciteList = createRef<HTMLCalciteListElement>();\r\n\r\n  /** string[]: Valid field types for like */\r\n  private _validFieldTypes = ['small-integer', 'integer', 'big-integer', 'single', 'long'];\r\n\r\n  /** string: Abbrivated like count of the feature */\r\n  private _abbreviatedLikeCount = '';\r\n\r\n  /** boolean: When true configured like field is available in selected layer */\r\n  private _likeFieldAvailable = false;\r\n\r\n  /** string: The current search expression */\r\n  private _searchExpression = '';\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Watch handlers\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Watch for selectedLayerId change and update layer instance and features list for new layerId */\r\n  private async selectedLayerWatchHandler(): Promise<void> {\r\n    this._selectedLayer = this.mapView && await getLayerOrTable(this.mapView, this.selectedLayerId);\r\n    await this.initializeFeatureItems();\r\n  }\r\n\r\n  /** Watch for sorting field or order change and update the features list */\r\n  private async sortingInfoWatchHandler(): Promise<void> {\r\n    await this.initializeFeatureItems();\r\n  }\r\n\r\n  /** Watch for whereclause change and update the features list */\r\n  private async whereClauseHandler(): Promise<void> {\r\n    await this.initializeFeatureItems();\r\n  }\r\n\r\n  /** Watch for filterByMapExtent change and update the features list */\r\n  private async filterByMapExtentWatchHandler(\r\n    enabled: boolean\r\n  ): Promise<void> {\r\n    if (enabled) {\r\n      this.initializeMapExtentFilter();\r\n    } else if (this._filterByMapExtentHandle) {\r\n      this._filterByMapExtentHandle.remove();\r\n    }\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Methods (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Refresh the feature list which will fetch the latest features and update the features list\r\n   *\r\n   * @param maintainPageState If true feature list page state will be maintained\r\n   * @returns Promise that resolves when the operation is complete\r\n   */\r\n  @method()\r\n  async refresh(\r\n    maintainPageState?: boolean\r\n  ): Promise<void> {\r\n    if (maintainPageState && this._pagination.value) {\r\n      const event = {\r\n        target: {\r\n          startItem: this._pagination.value.startItem,\r\n        },\r\n      };\r\n      await this.pageChanged(event);\r\n    } else if (this._searchExpression) {\r\n      await this._searchFullText();\r\n    } else {\r\n      await this.initializeFeatureItems();\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 feature is clicked using the list */\r\n  featureClick = createEvent();\r\n\r\n  /** Emitted on demand when feature is selected using the list */\r\n  featureSelect = createEvent<__esri.Graphic>();\r\n\r\n  /** Listen for changes in language and refreh the list  */\r\n  private async selectedLanguageUpdated(\r\n    _evt: CustomEvent\r\n  ): Promise<void> {\r\n    // Maintain the current page state when refreshing the list\r\n    if (this._pagination.value) {\r\n      const event = {\r\n        target: {\r\n          startItem: this._pagination.value.startItem\r\n        },\r\n      };\r\n      await this.pageChanged(event);\r\n    } else {\r\n      // If no pagination state is available, reinitialize the current list\r\n      await this.initializeFeatureItems();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Called once just after the component is first connected to the DOM.\r\n   *\r\n   * @returns Promise when complete\r\n   */\r\n  async load(): Promise<void> {\r\n    this._isLoading = this.showInitialLoading ? true : false;\r\n    this._popupUtils = new PopupUtils();\r\n    if (this.mapView && this.selectedLayerId) {\r\n      this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);\r\n      this._getFullTextSearchInfo();\r\n    }\r\n    if (this.filterByMapExtent) {\r\n      this.initializeMapExtentFilter();\r\n    }\r\n  }\r\n\r\n  /** Called once just after the component is fully loaded and the first render() occurs.\r\n  /** This lifecycle method is not expected to return a promise. The returned promise will be ignored by Lit rather than awaited. */\r\n  async loaded(): Promise<void> {\r\n    await this.initializeFeatureItems();\r\n  }\r\n\r\n  /** Renders the component. */\r\n  override render(): JsxNode {\r\n    const showSearch = this._canShowFullTextSearch();\r\n    return (\r\n      <calcite-panel>\r\n        {showSearch && (\r\n          <calcite-input\r\n            class={'search'}\r\n            clearable\r\n            icon='search'\r\n            oncalciteInputChange={this._searchTextChanged}\r\n            placeholder={this._searchPlaceHolder}\r\n            title={''}\r\n            type='search'\r\n          />\r\n        )}\r\n        {this._isLoading && <calcite-loader label='' scale='m' />}\r\n        {this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading && (\r\n          <calcite-notice class='notice-msg' icon='feature-details' kind='info' open>\r\n            <div slot='message'>\r\n              {\r\n                this.filterByMapExtent ?\r\n                  this._translations.featureErrorMsgInCurrentMapView :\r\n                  this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg :\r\n                    this._translations.featureErrorMsg\r\n              }\r\n            </div>\r\n          </calcite-notice>\r\n        )}\r\n        <calcite-list\r\n          class={this.textSize === 'small' && !this.showFullTitle ? 'overflow-hidden' : ''}\r\n          label=''\r\n          ref={this._calciteList}\r\n          selectionAppearance='border'\r\n          selectionMode='none'\r\n        >\r\n          {!this._isLoading && this._featureItems.length > 0 &&\r\n            <div>\r\n              {this.filterByMapExtent && this.getExtentNotice()}\r\n              {this._featureItems}\r\n            </div>}\r\n        </calcite-list>\r\n        {this.pageSize && (this._featuresCount > this.pageSize) && (\r\n          <div class='width-full' slot='footer'>\r\n            <calcite-pagination\r\n              class='pagination'\r\n              oncalcitePaginationChange={this.pageChanged}\r\n              pageSize={this.pageSize}\r\n              ref={this._pagination}\r\n              startItem={1}\r\n              totalItems={this._featuresCount}\r\n            />\r\n          </div>\r\n        )}\r\n      </calcite-panel>\r\n    );\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Functions (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Return the where condition string considering the defined where clause and layer's definition expression\r\n   *\r\n   * @private\r\n   */\r\n  private async getWhereCondition(): Promise<string> {\r\n    //By Default load all the features\r\n    let whereClause = '1=1';\r\n    //if where clause is defined use it\r\n    if (this.whereClause) {\r\n      whereClause = this.whereClause;\r\n    }\r\n    //if layer has definitionExpression append it to the where clause\r\n    if (this._selectedLayer?.definitionExpression) {\r\n      whereClause = whereClause + ' AND ' + this._selectedLayer.definitionExpression;\r\n    }\r\n    // if layerView has any applied filter, use it\r\n    if (this.applyLayerViewFilter) {\r\n      const selectedLayerView = this.mapView && await getFeatureLayerView(this.mapView, this.selectedLayerId);\r\n      if (selectedLayerView?.filter?.where) {\r\n        whereClause = whereClause + ' AND ' + selectedLayerView.filter.where;\r\n      }\r\n    }\r\n    return whereClause;\r\n  }\r\n\r\n  /**\r\n   * Initialize the features list using the selected layer\r\n   *\r\n   * @private\r\n   */\r\n  private async initializeFeatureItems(): Promise<void> {\r\n    if (this._selectedLayer) {\r\n      void this._pagination.value?.goTo('start');\r\n      this._isLoading = this.showInitialLoading ? true : false;\r\n      this._featureItems = await this.queryPage(0);\r\n      const whereCondition = await this.getWhereCondition();\r\n      const query: any = {\r\n        where: whereCondition,\r\n        geometry: this.filterByMapExtent ? this.mapView?.extent : null,\r\n      };\r\n      this._featuresCount = await this._selectedLayer.queryFeatureCount(query);\r\n      this._isLoading = false;\r\n    }\r\n  }\r\n\r\n  /** Updates the feature list based on map view extent */\r\n  private initializeMapExtentFilter(): void {\r\n    this._filterByMapExtentHandle = reactiveUtils.when(\r\n      () => this.mapView?.stationary,\r\n      () => {\r\n        void this.initializeFeatureItems();\r\n      },\r\n      {\r\n        initial: true,\r\n      },\r\n    );\r\n  }\r\n\r\n  /**\r\n   * On page change get the next updated feature list\r\n   *\r\n   * @param event page change event\r\n   * @private\r\n   */\r\n  private async pageChanged(\r\n    event: any\r\n  ): Promise<void> {\r\n    this._isLoading = true;\r\n\r\n    // TODO move these to auto cleanup if we can\r\n    if (this._highlightHandle) {\r\n      this._highlightHandle.remove();\r\n      this._highlightHandle = undefined;\r\n    }\r\n    const page = event.target.startItem - 1;\r\n    this._featureItems = await this.queryPage(page);\r\n    this._isLoading = false;\r\n  }\r\n\r\n  /**\r\n   * Validates if full text search is enabled and and indexes for fullTextSearch is set as display field on layer\r\n   *\r\n   * @private\r\n   */\r\n  private _canShowFullTextSearch(): boolean {\r\n    return (\r\n      (this._selectedLayer as any)?.capabilities?.query?.supportsFullTextSearch &&\r\n      (this._selectedLayer as any).indexes.items.filter((i: any) => i.indexType == 'FullText').length > 0\r\n    );\r\n  }\r\n\r\n  /** Create list of full text search info */\r\n  private _getFullTextSearchInfo(): void {\r\n    this._fullTextSearchInfo = [];\r\n    //combine all the fullText index\r\n    if ((this._selectedLayer as any)?.capabilities?.query?.supportsFullTextSearch) {\r\n      const fullTextIndexes = (this._selectedLayer as any).indexes?.filter((i: any) => i.indexType == 'FullText');\r\n      if (fullTextIndexes?.length) {\r\n        //create the search placeholder text\r\n        const onFields: any[] = [];\r\n        fullTextIndexes.forEach((index: any) => {\r\n          onFields.push(...index.fields.split(','));\r\n        });\r\n        //get field alias for fields\r\n        const fieldAlias: string[] = [];\r\n        onFields.forEach(fieldName => {\r\n          //We splitting the fields array so we get leading/trailing spaces, hence trim the fieldName\r\n          const fieldInfo = this._selectedLayer?.getField(fieldName.trim());\r\n          fieldAlias.push(fieldInfo?.alias || '');\r\n        });\r\n        this._searchPlaceHolder = this._translations.searchPlaceholder ?\r\n          this._translations.searchPlaceholder.replace('{{field_names}}', fieldAlias.join(', ')) : '';\r\n        this._fullTextSearchInfo.push({\r\n          onFields: ['*'],\r\n          searchTerm: '',\r\n          searchType: 'prefix',\r\n        });\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Search using the fullTextSearch on layer and filter the list\r\n   *\r\n   * @param event The input change event\r\n   * @private\r\n   */\r\n  private async _searchTextChanged(\r\n    event: any\r\n  ): Promise<void> {\r\n    this._fullTextSearchInfo.forEach(searchInfo => {\r\n      searchInfo.searchTerm = event.target.value;\r\n    });\r\n    await this._searchFullText();\r\n  }\r\n\r\n  /**\r\n   * Search using the fullTextSearch on layer\r\n   *\r\n   * @param event The input change event\r\n   * @private\r\n   */\r\n  private async _searchFullText(): Promise<void> {\r\n    //always clear previous search definition\r\n    if (this._searchExpression) {\r\n      this._clearSearchDefinitionExpression();\r\n    }\r\n    let searchedIds: any = [];\r\n    if (this._fullTextSearchInfo) {\r\n      if (this._fullTextSearchInfo[0].searchTerm) {\r\n        const searchQueryParams: any = this._selectedLayer?.createQuery();\r\n        if (searchQueryParams) {\r\n          (searchQueryParams as any).fullText = this._fullTextSearchInfo;\r\n          searchedIds = await this._selectedLayer?.queryObjectIds(searchQueryParams);\r\n          await this._updateSearchDefinitionExpression(searchedIds?.length ? searchedIds : [-1]);\r\n        }\r\n      }\r\n    }\r\n    await this.initializeFeatureItems();\r\n  }\r\n\r\n  /**\r\n   * Update the search expression in layer\r\n   *\r\n   * @param searchedIds Array of objectIds satisfying the full search text\r\n   * @private\r\n   */\r\n  private async _updateSearchDefinitionExpression(\r\n    searchedIds: number[]\r\n  ): Promise<void> {\r\n    if (this._selectedLayer) {\r\n      const defExp = this._selectedLayer.definitionExpression;\r\n      if (searchedIds?.length) {\r\n        const searchExp = `objectId in(${searchedIds})`;\r\n        this._selectedLayer.definitionExpression =\r\n          this._searchExpression && defExp && defExp?.indexOf(this._searchExpression) > -1 ?\r\n            defExp.replace(this._searchExpression, searchExp) : defExp ? `${defExp} AND (${searchExp})` : searchExp;\r\n        this._searchExpression = searchExp;\r\n      } else {\r\n        this._clearSearchDefinitionExpression();\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Clears the applied search expression on the layer\r\n   *\r\n   * @private\r\n   */\r\n  private _clearSearchDefinitionExpression(): void {\r\n    if (this._selectedLayer) {\r\n      const defExp = this._selectedLayer?.definitionExpression;\r\n      //remove previous search expression first\r\n      if (this._searchExpression && defExp && defExp?.indexOf(this._searchExpression) > -1) {\r\n        // eslint-disable-next-line unicorn/prefer-ternary\r\n        if (defExp?.indexOf(' AND (' + this._searchExpression) > -1) {\r\n          this._selectedLayer.definitionExpression = defExp.replace(` AND (${this._searchExpression})`, '');\r\n        } else {\r\n          this._selectedLayer.definitionExpression = defExp.replace(this._searchExpression, '');\r\n        }\r\n      }\r\n    }\r\n    this._searchExpression = '';\r\n  }\r\n\r\n  /**\r\n   * On feature click in feature list highlight the feature on the map\r\n   *\r\n   * @param event feature clicked event\r\n   * @param selectedFeature selected feature graphic\r\n   * @private\r\n   */\r\n  private async featureClicked(\r\n    event: any,\r\n    selectedFeature: __esri.Graphic\r\n  ): Promise<void> {\r\n    this.featureClick.emit();\r\n    //clear previous highlight and remove the highlightHandle\r\n    this.clearHighlights();\r\n    //highlight on map only if it is selected item\r\n    if (this.highlightOnMap) {\r\n      const selectedFeatureObjectId = Number(event.target.value);\r\n      const selectedLayerView = this.mapView && await getFeatureLayerView(this.mapView, this.selectedLayerId);\r\n      this._highlightHandle = selectedLayerView && this.mapView ?\r\n        await highlightFeatures([selectedFeatureObjectId], selectedLayerView, this.mapView, true) : undefined;\r\n    }\r\n    await this.emitSelectedFeature(selectedFeature);\r\n  }\r\n\r\n  /**\r\n   * Emit selected feature with its complete graphics and attributes\r\n   *\r\n   * @param graphic selected feature graphic\r\n   * @private\r\n   */\r\n  private async emitSelectedFeature(\r\n    graphic: __esri.Graphic\r\n  ): Promise<void> {\r\n    const layer = graphic.layer as __esri.FeatureLayer;\r\n    const query: any = layer.createQuery();\r\n    query.returnGeometry = true;\r\n    const id = Number(graphic.getObjectId());\r\n    if (!Number.isNaN(id) && query) {\r\n      query.objectIds = [id];\r\n      const completeGraphic = await layer.queryFeatures(query);\r\n      this.featureSelect.emit(completeGraphic.features[0]);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * On feature hover in feature list highlight the feature on the map\r\n   *\r\n   * @param selectedFeature mouse hovered feature graphic\r\n   * @private\r\n   */\r\n  private async onFeatureHover(\r\n    selectedFeature: __esri.Graphic\r\n  ): Promise<void> {\r\n    //clear previous highlight and remove the highlightHandle\r\n    this.clearHighlights();\r\n    if (this.highlightOnHover) {\r\n      const oId = Number(selectedFeature.getObjectId());\r\n      const selectedLayerView = this.mapView && await getFeatureLayerView(this.mapView, this.selectedLayerId);\r\n      if (selectedLayerView) {\r\n        this._highlightHandle = selectedLayerView.highlight([oId], { name: 'temporary' });\r\n      }\r\n    }\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   * Query the selected feature layer, in descending order of object id's\r\n   *\r\n   * @param page 0th page number in the pagination item\r\n   * @returns List of features items to be rendered\r\n   * @private\r\n   */\r\n  private async queryPage(\r\n    page: number\r\n  ): Promise<JsxNode> {\r\n    const featureLayer = this._selectedLayer;\r\n    if (featureLayer) {\r\n      const sortField: string = this.sortingInfo?.field ? this.sortingInfo.field : featureLayer.objectIdField;\r\n      const sortOrder: 'asc' | 'desc' = this.sortingInfo?.order ? this.sortingInfo.order : 'desc';\r\n      const whereCondition = await this.getWhereCondition();\r\n      const query: any = {\r\n        start: page,\r\n        num: this.pageSize,\r\n        outFields: ['*'],\r\n        returnGeometry: true,\r\n        where: whereCondition,\r\n        outSpatialReference: this.mapView?.spatialReference.toJSON(),\r\n        geometry: this.filterByMapExtent ? this.mapView?.extent : null,\r\n      };\r\n      //sort only when sort field and order is valid\r\n      if (sortField && sortOrder) {\r\n        query.orderByFields = [sortField.toString() + ' ' + sortOrder];\r\n      }\r\n      const featureSet = await featureLayer.queryFeatures(query);\r\n      return await this.createFeatureItem(featureSet);\r\n    } else {\r\n      return undefined;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Creates list of items using the popup titles\r\n   *\r\n   * @param featureSet Queried FeatureSet\r\n   * @returns List of features items to be rendered\r\n   * @private\r\n   */\r\n  private async createFeatureItem(\r\n    featureSet: any\r\n  ): Promise<JsxNode> {\r\n    const currentFeatures = featureSet?.features;\r\n    const showLikeCount = this.reportingOptions && this.reportingOptions[this.selectedLayerId].like;\r\n    const items = currentFeatures.map(async (feature: any) => {\r\n      const popupTitle = this.mapView?.map && await this._popupUtils?.getPopupTitle(feature, this.mapView.map) || '';\r\n      //fetch the feature creator user info to show the creator user image\r\n      let userInfo;\r\n      let featureSymbol;\r\n      if (this.showUserImageInList) {\r\n        const creatorField = this._selectedLayer?.editFieldsInfo?.creatorField;\r\n        // if feature's creator field is present then only we can fetch the information of user\r\n        if (creatorField) {\r\n          userInfo = await this.getUserInformation(feature);\r\n        }\r\n      }\r\n      if (this.showFeatureSymbol) {\r\n        featureSymbol = await this.getFeatureSymbol(feature);\r\n      }\r\n      if (showLikeCount) {\r\n        void this.getAbbreviatedLikeCount(feature);\r\n      }\r\n      return this.getFeatureItem(feature, popupTitle, featureSymbol, userInfo);\r\n    });\r\n    return Promise.all(items);\r\n  }\r\n\r\n  /**\r\n   * Get filter extent notice message\r\n   *\r\n   * @returns Filter extent notice message\r\n   */\r\n  private getExtentNotice(): JsxNode {\r\n    return (\r\n      <calcite-notice\r\n        class='notice-msg'\r\n        icon='extent-filter'\r\n        kind='brand'\r\n        open\r\n        scale='s'>\r\n        <div slot='message'>{this._translations.extentFilterMsg}</div>\r\n      </calcite-notice>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Displays the abbrivated like count on the feature list\r\n   *\r\n   * @param feature feature of the layer\r\n   * @private\r\n   */\r\n  private getAbbreviatedLikeCount(\r\n    feature: __esri.Graphic\r\n  ): void {\r\n    const selectedLayer = this._selectedLayer;\r\n    if (selectedLayer) {\r\n      const likeField = this.reportingOptions && this.reportingOptions[selectedLayer.id].likeField;\r\n      selectedLayer.fields.forEach((eachField: __esri.Field) => {\r\n        if (this._validFieldTypes.indexOf(eachField.type) > -1) {\r\n          if (eachField.name === likeField && this.reportingOptions && this.reportingOptions[selectedLayer.id].like) {\r\n            this._likeFieldAvailable = true;\r\n            let likes = feature.attributes[likeField] || 0;\r\n            if (likes > 999 && this._translations.millions_value && this._translations.thousands_value) {\r\n              likes =\r\n                likes > 999999\r\n                  ? this._translations.millions_value.replace('{{millions_value}}', Math.floor(likes / 1000000).toString())\r\n                  : this._translations.thousands_value.replace('{{thousands_value}}', Math.floor(likes / 1000).toString());\r\n            }\r\n            this._abbreviatedLikeCount = likes;\r\n          }\r\n        }\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get each feature item\r\n   *\r\n   * @param selectedFeature Each individual feature instance to be listed\r\n   * @param popupTitle feature popup title\r\n   * @param featureSymbol feature symbol preview html\r\n   * @returns individual feature item to be rendered\r\n   * @private\r\n   */\r\n  private getFeatureItem(\r\n    selectedFeature: __esri.Graphic,\r\n    popupTitle: string,\r\n    featureSymbol: HTMLDivElement | undefined,\r\n    userInfo: any\r\n  ): JsxNode {\r\n    if (this._selectedLayer?.id && this._calciteList.value) {\r\n      //get the object id value of the feature\r\n      const oId = selectedFeature.attributes[this._selectedLayer.objectIdField].toString();\r\n      //use object id if popupTitle is null or undefined\r\n      popupTitle = popupTitle ?? oId;\r\n      // get the formatted like count\r\n      const formattedLikeCount = Number(selectedFeature.attributes[this.reportingOptions?.[this._selectedLayer.id].likeField || '']).toLocaleString();\r\n      const popupTitleClass =\r\n        this.textSize === 'small' && !this.showFullTitle\r\n          ? 'feature-list-popup-title-small-ellipsis'\r\n          : this.textSize === 'small'\r\n            ? 'feature-list-popup-title-small'\r\n            : 'feature-list-popup-title';\r\n      // Set the width of the popuptitle class depending on calcite list width to avoid icon's overflow\r\n      const deductedWidth = this.showUserImageInList ? 115 : 65;\r\n      const width = this._calciteList.value.offsetWidth - deductedWidth;\r\n      return (\r\n        <calcite-list-item\r\n          onMouseLeave={() => {\r\n            void this.clearHighlights();\r\n          }}\r\n          onMouseOver={() => {\r\n            void this.onFeatureHover(selectedFeature);\r\n          }}\r\n          oncalciteListItemSelect={e => {\r\n            void this.featureClicked(e, selectedFeature);\r\n          }}\r\n          value={oId}\r\n        >\r\n          {this.showUserImageInList && (\r\n            <calcite-avatar\r\n              class={'profile-img'}\r\n              fullName={userInfo?.fullName}\r\n              scale='m'\r\n              slot='content-start'\r\n              thumbnail={userInfo?.userProfileUrl}\r\n              userId={userInfo?.id}\r\n              username={userInfo?.fullName ? userInfo.username : undefined}\r\n            />\r\n          )}\r\n\r\n          {this.showFeatureSymbol && featureSymbol && <div class={'feature-symbol'} ref={el => el && el.replaceChildren(featureSymbol)} slot='content-start' />}\r\n\r\n          <div class={`popup-title ${popupTitleClass}`} slot='content-start' style={{ maxWidth: this.textSize === 'large' ? 'none' : `${width}px` }}>\r\n            {popupTitle}\r\n          </div>\r\n\r\n          {this._likeFieldAvailable && (\r\n            <div class={'like-container'} id={oId.concat('like')} slot='content-end'>\r\n              <span>{this._abbreviatedLikeCount}</span>\r\n              <calcite-icon icon='thumbs-up' scale='s' />\r\n              <calcite-tooltip overlayPositioning='fixed' placement='top' referenceElement={oId.concat('like')}>\r\n                {formattedLikeCount}\r\n              </calcite-tooltip>\r\n            </div>\r\n          )}\r\n\r\n          <calcite-icon flipRtl icon='chevron-right' scale='s' slot='content-end' />\r\n        </calcite-list-item>\r\n      );\r\n    } else {\r\n      return undefined;\r\n    }\r\n  }\r\n\r\n  /**\r\n   *\r\n   * @param feature Each individual feature instance to be listed\r\n   * @returns user information\r\n   * @private\r\n   */\r\n  private async getUserInformation(\r\n    feature: __esri.Graphic\r\n  ): Promise<any> {\r\n    let creatorField = this._selectedLayer?.editFieldsInfo?.creatorField;\r\n    if (creatorField) {\r\n      if (feature.attributes.hasOwnProperty(creatorField.toLowerCase())) {\r\n        creatorField = creatorField.toLowerCase();\r\n      } else if (feature.attributes.hasOwnProperty(creatorField.toUpperCase())) {\r\n        creatorField = creatorField.toUpperCase();\r\n      }\r\n      //get the user information\r\n      let url = `${config.portalUrl}/sharing/rest/community/users/${feature.attributes[creatorField]}?f=json&returnUserLicensedItems=true`;\r\n      const userToken = (this.mapView?.map as any)?.portalItem.portal?.credential?.token;\r\n      if (userToken) {\r\n        url += `&token=${userToken}`;\r\n      }\r\n      const data = await fetch(url);\r\n      const userInfo = await data.json();\r\n      //construct the url to get the user profile image\r\n      const userName = userInfo?.username ?? feature.attributes[creatorField];\r\n      let userProfileUrl = `${config.portalUrl}/sharing/rest/community/users/${userName}/info/blob.png`;\r\n      if (userInfo?.access && userToken) {\r\n        userProfileUrl += `?token=${userToken}`;\r\n      }\r\n      userInfo.userProfileUrl = userProfileUrl;\r\n      return userInfo;\r\n    } else {\r\n      return undefined;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Creates a feature symbology\r\n   *\r\n   * @param feature Each individual feature\r\n   * @returns Feature symbology\r\n   * @private\r\n   */\r\n  private async getFeatureSymbol(\r\n    feature: __esri.Graphic\r\n  ): Promise<HTMLDivElement> {\r\n    const nodeHtml = document.createElement('div');\r\n    await symbolUtils?.getDisplayedSymbol(feature).then(\r\n      async (symbol: __esri.SymbolUnion | null | undefined) => {\r\n        symbol &&\r\n          (await symbolUtils?.renderPreviewHTML(symbol as any, {\r\n            node: nodeHtml,\r\n          }));\r\n        if (nodeHtml.children?.length) {\r\n          const imgOrSvgElm = nodeHtml.children[0];\r\n          if (imgOrSvgElm) {\r\n            const height = Number(imgOrSvgElm.getAttribute('height'));\r\n            const width = Number(imgOrSvgElm.getAttribute('width'));\r\n            if (width > 30) {\r\n              nodeHtml.setAttribute('width', '30');\r\n              imgOrSvgElm.setAttribute('width', '30');\r\n            }\r\n            if (height > 30) {\r\n              nodeHtml.setAttribute('height', '30');\r\n              imgOrSvgElm.setAttribute('height', '30');\r\n            }\r\n            imgOrSvgElm.setAttribute('viewBox', `0 0 ${width} ${height}`);\r\n            nodeHtml.setAttribute('viewBox', `0 0 ${width} ${height}`);\r\n          }\r\n        }\r\n      });\r\n    return nodeHtml;\r\n  }\r\n}\r\n"],"names":["ref$jsx"],"mappings":"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"}

package/dist/components/field-selection/customElement.d.ts

@@ -6,11 +6,11 @@ import { LayerTable } from '../layer-table/customElement.js';
 export declare class FieldSelection extends LitElement {
     /** Extra fields such as attachments and related fields from IA config */
     configExtraFields: any;
-    /** 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;
-    /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
+    /** esri/views/View: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
     mapView: __esri.MapView | undefined;
-    /** esri/widgets/FeatureTable: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-FeatureTable.html */
+    /** esri/widgets/FeatureTable: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-widgets-FeatureTable.html */
     table: __esri.FeatureTable | undefined;
     /** LayerTable reference to support column reorder */
     tableRef: HTMLLayerTableElement;

package/dist/components/field-selection/customElement.js

@@ -1,13 +1,13 @@
-import { c as f } from "../../chunks/runtime.js";
-import { ref as u } from "lit/directives/ref.js";
-import { css as b, html as y } from "lit";
-import { u as _ } from "../../chunks/useT9n.js";
-import { LitElement as T } from "@arcgis/lumina";
-import "../layer-table/customElement.js";
 /*! 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 v = b`/** @license
+v1.2.0-next.58 */
+import { c as customElement } from "../../chunks/runtime.js";
+import { ref } from "lit/directives/ref.js";
+import { css, html } from "lit";
+import { u as useT9n } from "../../chunks/useT9n.js";
+import { LitElement } from "@arcgis/lumina";
+import "../layer-table/customElement.js";
+const styles = css`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -21,194 +21,341 @@ const v = b`/** @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.
- */.height-51{height:51px}.width-51{width:51px}`;
-class C extends T {
+ */
+
+.height-51 {
+  height: 51px;
+}
+
+.width-51 {
+  width: 51px;
+}`;
+class FieldSelection extends LitElement {
   constructor() {
-    super(), this._translations = _({ name: "field-selection", blocking: !0 }), this._fieldSortOrder = "default", this._selectedFields = [], this._fieldVisibilityPopoverClickHandler = (e) => {
-      this._fieldVisibilityPopoverNode ? this._isInNode(e.target, "arcgis-field-pick-list") || (document.body.removeChild(this._fieldVisibilityPopoverNode), this._fieldVisibilityPopoverNode = void 0, document.removeEventListener("click", this._fieldVisibilityPopoverClickHandler)) : document.removeEventListener("click", this._fieldVisibilityPopoverClickHandler);
-    }, this.listenOn(window, "columnReorder", this.handleColumnReorder, { capture: !0 });
+    super();
+    this._translations = useT9n({ name: "field-selection", blocking: true });
+    this._fieldSortOrder = "default";
+    this._selectedFields = [];
+    this._fieldVisibilityPopoverClickHandler = (event) => {
+      if (!this._fieldVisibilityPopoverNode) {
+        document.removeEventListener("click", this._fieldVisibilityPopoverClickHandler);
+      } else if (!this._isInNode(event.target, "arcgis-field-pick-list")) {
+        document.body.removeChild(this._fieldVisibilityPopoverNode);
+        this._fieldVisibilityPopoverNode = void 0;
+        document.removeEventListener("click", this._fieldVisibilityPopoverClickHandler);
+      }
+    };
+    this.listenOn(window, "columnReorder", this.handleColumnReorder, { capture: true });
   }
   static {
-    this.properties = { configExtraFields: 1, layer: 0, mapView: 0, table: 0, tableRef: 0, _translations: 16 };
+    this.properties = { configExtraFields: 1, layer: [0, {}, { attribute: false }], mapView: [0, {}, { attribute: false }], table: [0, {}, { attribute: false }], tableRef: [0, {}, { attribute: false }], _translations: [16, {}, { state: true }] };
   }
   static {
-    this.styles = v;
+    this.styles = styles;
   }
   render() {
-    return y`<calcite-action appearance=solid class="height-51 width-51" id=solutions-field-selection .text=${this._translations.fieldVisibility} scale=m @click=${() => this._handleFieldVisibilityClick()} @mouseover=${() => this._addTableTooltip(this._fieldVisibilityActionNode, this._translations.fieldVisibility)} @mouseout=${() => this._removeTableTooltip()} @focus=${() => this._addTableTooltip(this._fieldVisibilityActionNode, this._translations.fieldVisibility)} ${u((e) => this._fieldVisibilityActionNode = e)}><calcite-icon scale=s icon=gear></calcite-icon></calcite-action>`;
+    return html`<calcite-action appearance=solid class="height-51 width-51" id=solutions-field-selection .text=${this._translations.fieldVisibility} scale=m @click=${() => this._handleFieldVisibilityClick()} @mouseover=${() => this._addTableTooltip(this._fieldVisibilityActionNode, this._translations.fieldVisibility)} @mouseout=${() => this._removeTableTooltip()} @focus=${() => this._addTableTooltip(this._fieldVisibilityActionNode, this._translations.fieldVisibility)} ${ref((node) => this._fieldVisibilityActionNode = node)}><calcite-icon scale=s icon=gear></calcite-icon></calcite-action>`;
   }
   handleColumnReorder() {
-    this._fieldSortOrder = "default", this._fieldVisibilityPopoverNode && (this.removeFieldsPickList(), this._handleFieldVisibilityClick());
+    this._fieldSortOrder = "default";
+    if (this._fieldVisibilityPopoverNode) {
+      this.removeFieldsPickList();
+      this._handleFieldVisibilityClick();
+    }
   }
   _handleFieldVisibilityClick() {
-    if (this._fieldVisibilityPopoverNode)
+    if (this._fieldVisibilityPopoverNode) {
       return;
-    const e = this.table?.tableTemplate?.columnTemplates;
-    if (this.layer && this.mapView && e && this._fieldVisibilityActionNode) {
+    }
+    const columnTemplates = this.table?.tableTemplate?.columnTemplates;
+    if (this.layer && this.mapView && columnTemplates && this._fieldVisibilityActionNode) {
       document.removeEventListener("click", this._fieldVisibilityPopoverClickHandler);
-      const i = this.table.fieldColumns.map((l) => ({
-        alias: l.field.alias,
-        description: l.field.description,
-        name: l.field.name,
-        type: l.field.type
-      }));
+      const fields = this.table.fieldColumns.map((c) => {
+        return {
+          alias: c.field.alias,
+          description: c.field.description,
+          name: c.field.name,
+          type: c.field.type
+        };
+      });
       if (this._hasAttachmentsEnabled(this.layer)) {
-        const l = "Attachments";
-        if (this._shouldShowField(l.toUpperCase(), !1)) {
-          if (!e.some((o) => o.fieldName.toUpperCase() === l.toUpperCase())) {
-            const o = {
-              fieldName: l,
+        const attachments = "Attachments";
+        if (this._shouldShowField(attachments.toUpperCase(), false)) {
+          if (!columnTemplates.some((ct) => ct.fieldName.toUpperCase() === attachments.toUpperCase())) {
+            const attachmentColumnTemplate = {
+              fieldName: attachments,
               type: "attachment",
-              visible: !0
+              visible: true
             };
-            e.push(o);
+            columnTemplates.push(attachmentColumnTemplate);
           }
-          i.push({
-            name: l,
+          fields.push({
+            name: attachments,
             alias: "Photos and files",
             type: "none",
-            description: l
+            description: attachments
           });
         }
       }
-      if (this.table.relatedRecordsEnabled && this.layer.relationships && this.layer.relationships.length > 0) {
-        const l = this.layer.parent;
-        this.layer.relationships.forEach((o) => {
-          let a, r = this._shouldShowField(o.name || "", !0);
-          if (!e.some((n) => n.fieldName.toLowerCase() === o.name?.toLowerCase() ? (a = o.name, !0) : !1))
-            if (o.name) {
-              a = o.name;
-              const n = {
-                fieldName: a,
+      const relationshipEnabled = this.table.relatedRecordsEnabled;
+      if (relationshipEnabled && this.layer.relationships && this.layer.relationships.length > 0) {
+        const parent = this.layer.parent;
+        this.layer.relationships.forEach((rel) => {
+          let name;
+          let shouldPush = this._shouldShowField(rel.name || "", true);
+          if (!columnTemplates.some((ct) => {
+            if (ct.fieldName.toLowerCase() === rel.name?.toLowerCase()) {
+              name = rel.name;
+              return true;
+            } else {
+              return false;
+            }
+          })) {
+            if (rel.name) {
+              name = rel.name;
+              const relationshipColumnTemplate = {
+                fieldName: name,
                 type: "relationship",
-                visible: !0
+                visible: true
               };
-              r = this._shouldShowField(a, !0), e.push(n);
+              shouldPush = this._shouldShowField(name, true);
+              columnTemplates.push(relationshipColumnTemplate);
             } else {
-              const n = [...l?.layers || [], ...l?.tables];
-              let d;
-              if (n.some((c) => c.layerId === o.relatedTableId ? (d = c, !0) : !1), d) {
-                a = d.title, o.name = a;
-                const c = {
-                  fieldName: a,
+              const allLayersAndTables = [...parent?.layers || [], ...parent?.tables];
+              let relItem;
+              allLayersAndTables.some((lt) => {
+                if (lt.layerId === rel.relatedTableId) {
+                  relItem = lt;
+                  return true;
+                }
+                return false;
+              });
+              if (relItem) {
+                name = relItem.title;
+                rel.name = name;
+                const relationshipColumnTemplate = {
+                  fieldName: name,
                   type: "relationship",
-                  visible: !0
+                  visible: true
                 };
-                r = this._shouldShowField(a, !0), e.push(c);
+                shouldPush = this._shouldShowField(name, true);
+                columnTemplates.push(relationshipColumnTemplate);
               }
             }
-          a && r && i.push({
-            name: a,
-            alias: `Related ${a}`,
-            type: "none",
-            description: `related:${a}`
-          });
+          }
+          if (name && shouldPush) {
+            fields.push({
+              name,
+              alias: `Related ${name}`,
+              type: "none",
+              description: `related:${name}`
+            });
+          }
         });
       }
-      const t = this._fieldVisibilityPopoverNode ? this._fieldVisibilityPopoverNode : document.createElement("arcgis-field-pick-list");
-      t.layer = this.layer, t.fields = i, t.showFieldInfo = !0, t.showFieldName = !0, t.showDescription = !1, t.showSelectionAll = !0, t.hideCancel = !0, t.hideSort = !1, t.showFilterLength = 5, t.multiple = !0, t.heading = this._translations.fieldVisibility, t.okBtnText = this._translations.doneWithFieldChanges, t.filterPlaceholderText = this._translations.filterFields, t.sortBy = this._fieldSortOrder ?? "default";
-      const p = this.table?.visibleColumns.map((l) => l.fieldName.startsWith("EsriFeatureTableRelationshipColumn") || l.fieldName.startsWith("EsriFeatureTableAttachmentsColumn") ? l.effectiveLabel : l.fieldName);
-      t.selectedFields = e.reduce((l, o) => ((p ? p.indexOf(o.fieldName) > -1 : o.visible) && l.push(o.fieldName), l), []), this._selectedFields = t.selectedFields, t.style.minHeight = "340px", t.popoverProps = {
+      const popover = !this._fieldVisibilityPopoverNode ? document.createElement("arcgis-field-pick-list") : this._fieldVisibilityPopoverNode;
+      popover.layer = this.layer;
+      popover.fields = fields;
+      popover.showFieldInfo = true;
+      popover.showFieldName = true;
+      popover.showDescription = false;
+      popover.showSelectionAll = true;
+      popover.hideCancel = true;
+      popover.hideSort = false;
+      popover.showFilterLength = 5;
+      popover.multiple = true;
+      popover.heading = this._translations.fieldVisibility;
+      popover.okBtnText = this._translations.doneWithFieldChanges;
+      popover.filterPlaceholderText = this._translations.filterFields;
+      popover.sortBy = this._fieldSortOrder ?? "default";
+      const visibleFields = this.table?.visibleColumns.map((vc) => {
+        return vc.fieldName.startsWith("EsriFeatureTableRelationshipColumn") ? vc.effectiveLabel : vc.fieldName.startsWith("EsriFeatureTableAttachmentsColumn") ? vc.effectiveLabel : vc.fieldName;
+      });
+      popover.selectedFields = columnTemplates.reduce((prev, cur) => {
+        if (visibleFields ? visibleFields.indexOf(cur.fieldName) > -1 : cur.visible) {
+          prev.push(cur.fieldName);
+        }
+        return prev;
+      }, []);
+      this._selectedFields = popover.selectedFields;
+      popover.style.minHeight = "340px";
+      popover.popoverProps = {
         refElement: this._fieldVisibilityActionNode,
         popoverWidth: 300,
         placement: "bottom-end",
         offsetDistance: -20,
-        triggerDisabled: !1,
-        autoClose: !1
-      }, t.addEventListener("arcgisChange", (l) => {
-        l.stopPropagation();
-        const o = l.detail.selectedFields, a = this._getDifference(o, this._selectedFields), r = this._getDifference(this._selectedFields, o);
-        a.concat(r).forEach((d) => {
-          const c = this.layer?.relationships?.map((m) => m.name) || [];
-          if (d === "Attachments") {
-            const m = this.table.columns.find((h) => "onShowAttachments" in h);
-            m.hidden = r.indexOf(d) > -1;
-          } else c.indexOf(d) > -1 ? this.table.columns.filter((h) => "relationshipId" in h).forEach((h) => {
-            r.indexOf(d) > -1, d == h.effectiveLabel && (h.hidden = r.indexOf(d) > -1);
-          }) : this.table.toggleColumnVisibility(d);
-        }), this._selectedFields = o, this._updateTable(this.table.tableTemplate);
-      }), t.addEventListener("arcgisSortByChange", (l) => {
-        l.stopPropagation(), this._fieldSortOrder = l.detail, this._sortFields(l.detail);
-      }), t.addEventListener("arcgisClose", () => {
-        this._closePopovers(), setTimeout(() => this._fieldVisibilityActionNode.setFocus(), 200);
-      }), document.body.appendChild(t), this._fieldVisibilityPopoverNode = t, setTimeout(() => document.addEventListener("click", this._fieldVisibilityPopoverClickHandler), 200);
+        triggerDisabled: false,
+        autoClose: false
+      };
+      popover.addEventListener("arcgisChange", (event) => {
+        event.stopPropagation();
+        const updatedFieldNames = event.detail.selectedFields;
+        const added = this._getDifference(updatedFieldNames, this._selectedFields);
+        const removed = this._getDifference(this._selectedFields, updatedFieldNames);
+        const diffs = added.concat(removed);
+        diffs.forEach((fieldName) => {
+          const relationships = this.layer?.relationships?.map((rel) => rel.name) || [];
+          if (fieldName === "Attachments") {
+            const attachmentsColumn = this.table.columns.find((column) => "onShowAttachments" in column);
+            attachmentsColumn.hidden = removed.indexOf(fieldName) > -1;
+          } else if (relationships.indexOf(fieldName) > -1) {
+            const relationshipColumns = this.table.columns.filter((column) => "relationshipId" in column);
+            relationshipColumns.forEach((relationshipColumn) => {
+              removed.indexOf(fieldName) > -1;
+              if (fieldName == relationshipColumn.effectiveLabel) {
+                relationshipColumn.hidden = removed.indexOf(fieldName) > -1;
+              }
+            });
+          } else {
+            this.table.toggleColumnVisibility(fieldName);
+          }
+        });
+        this._selectedFields = updatedFieldNames;
+        this._updateTable(this.table.tableTemplate);
+      });
+      popover.addEventListener("arcgisSortByChange", (event) => {
+        event.stopPropagation();
+        this._fieldSortOrder = event.detail;
+        this._sortFields(event.detail);
+      });
+      popover.addEventListener("arcgisClose", () => {
+        this._closePopovers();
+        setTimeout(() => this._fieldVisibilityActionNode.setFocus(), 200);
+      });
+      document.body.appendChild(popover);
+      this._fieldVisibilityPopoverNode = popover;
+      setTimeout(() => document.addEventListener("click", this._fieldVisibilityPopoverClickHandler), 200);
     }
   }
-  _shouldShowField(e, i) {
-    return (this.configExtraFields || []).some((s) => i ? s.replace("related:", "").toUpperCase() === e.toUpperCase() : s.toUpperCase() === e.toUpperCase());
+  _shouldShowField(name, isRelatedField) {
+    return (this.configExtraFields || []).some((f) => isRelatedField ? f.replace("related:", "").toUpperCase() === name.toUpperCase() : f.toUpperCase() === name.toUpperCase());
   }
   removeFieldsPickList() {
-    this._fieldVisibilityPopoverNode && (document.body.removeChild(this._fieldVisibilityPopoverNode), this._fieldVisibilityPopoverNode = void 0);
+    if (this._fieldVisibilityPopoverNode) {
+      document.body.removeChild(this._fieldVisibilityPopoverNode);
+      this._fieldVisibilityPopoverNode = void 0;
+    }
   }
-  _sortFields(e) {
-    const i = this.table.tableTemplate.columnTemplates, s = this._getSortOrder(e), p = i.filter((o) => o.type !== "attachment" && o.type !== "relationship").sort((o, a) => {
-      const r = s.indexOf(o.fieldName), n = s.indexOf(a.fieldName);
-      return r === -1 && n !== -1 ? 1 : r !== -1 && n === -1 ? -1 : r === -1 && n === -1 ? 0 : r - n;
-    }), l = i.filter((o) => o.type === "attachment" || o.type === "relationship");
-    this.tableRef.setColumnOrder([...p, ...l]), this._updateTable(this.table.tableTemplate);
+  _sortFields(type) {
+    const columnTemplates = this.table.tableTemplate.columnTemplates;
+    const order = this._getSortOrder(type);
+    const columns = columnTemplates.filter((_ct) => {
+      return _ct.type !== "attachment" && _ct.type !== "relationship";
+    });
+    const sortedColumns = columns.sort((a, b) => {
+      const indexA = order.indexOf(a.fieldName);
+      const indexB = order.indexOf(b.fieldName);
+      if (indexA === -1 && indexB !== -1)
+        return 1;
+      if (indexA !== -1 && indexB === -1)
+        return -1;
+      if (indexA === -1 && indexB === -1)
+        return 0;
+      return indexA - indexB;
+    });
+    const specialColumns = columnTemplates.filter((_ct) => {
+      return _ct.type === "attachment" || _ct.type === "relationship";
+    });
+    this.tableRef.setColumnOrder([...sortedColumns, ...specialColumns]);
+    this._updateTable(this.table.tableTemplate);
   }
-  _getSortOrder(e) {
-    const i = [...this.layer.fields];
-    return e === "display" ? i.sort((s, t) => s.alias.localeCompare(t.alias)) : e === "field" ? i.sort((s, t) => s.name.localeCompare(t.name)) : e === "type" && i.sort((s, t) => s.type.localeCompare(t.type)), i.map((s) => s.name);
+  _getSortOrder(lastSortBy) {
+    const tempSorted = [...this.layer.fields];
+    if (lastSortBy === "display") {
+      tempSorted.sort((a, b) => a.alias.localeCompare(b.alias));
+    } else if (lastSortBy === "field") {
+      tempSorted.sort((a, b) => a.name.localeCompare(b.name));
+    } else if (lastSortBy === "type") {
+      tempSorted.sort((a, b) => a.type.localeCompare(b.type));
+    }
+    return tempSorted.map((t) => t.name);
   }
-  _getDifference(e, i) {
-    return e.filter((s) => !i.includes(s));
+  _getDifference(a, b) {
+    return a.filter((s) => !b.includes(s));
   }
-  _updateTable(e) {
-    this.table.tableTemplate = e, this._isStandardView() && this._syncAttributeTableTemplate();
+  _updateTable(tableTemplate) {
+    this.table.tableTemplate = tableTemplate;
+    if (this._isStandardView()) {
+      this._syncAttributeTableTemplate();
+    }
   }
   async _syncAttributeTableTemplate() {
-    const e = this.table.layer;
-    if (e.attributeTableTemplate) {
-      const { _modules: i } = this, s = e.attributeTableTemplate.clone();
-      i?.attributeTableTemplateUtils.syncAttributeTableTemplate(this.table, s), JSON.stringify(s) !== JSON.stringify(e.attributeTableTemplate) && (e.attributeTableTemplate = s);
+    const layer = this.table.layer;
+    if (layer.attributeTableTemplate) {
+      const { _modules } = this;
+      const updatedAttributeTableTemplate = layer.attributeTableTemplate.clone();
+      _modules?.attributeTableTemplateUtils.syncAttributeTableTemplate(this.table, updatedAttributeTableTemplate);
+      if (JSON.stringify(updatedAttributeTableTemplate) !== JSON.stringify(layer.attributeTableTemplate)) {
+        layer.attributeTableTemplate = updatedAttributeTableTemplate;
+      }
     }
-    if (e.attributeTableTemplate?.orderByFields?.length > 1) {
-      const i = e.attributeTableTemplate.clone(), s = this.table.activeSortOrders[0];
-      i.orderByFields = [
-        { field: s.fieldName, order: s.direction }
-      ], e.attributeTableTemplate = i, this._syncColumnDirectionsWithOrderByFields();
+    if (layer.attributeTableTemplate?.orderByFields?.length > 1) {
+      const updatedAttributeTableTemplate = layer.attributeTableTemplate.clone();
+      const activeSortField = this.table.activeSortOrders[0];
+      updatedAttributeTableTemplate.orderByFields = [
+        { field: activeSortField.fieldName, order: activeSortField.direction }
+      ];
+      layer.attributeTableTemplate = updatedAttributeTableTemplate;
+      this._syncColumnDirectionsWithOrderByFields();
     }
   }
   _syncColumnDirectionsWithOrderByFields() {
-    const e = this.table.activeSortOrders[0]?.fieldName;
-    this.table.columns.forEach((i) => {
-      "fieldName" in i && i.fieldName !== e && (i.direction = void 0);
-    }), this.table.tableTemplate?.columnTemplates.forEach((i) => {
-      "fieldName" in i && i.fieldName !== e && (i.direction = void 0);
+    const currentSortFieldName = this.table.activeSortOrders[0]?.fieldName;
+    this.table.columns.forEach((column) => {
+      if ("fieldName" in column && column.fieldName !== currentSortFieldName) {
+        column.direction = void 0;
+      }
+    });
+    this.table.tableTemplate?.columnTemplates.forEach((template) => {
+      if ("fieldName" in template && template.fieldName !== currentSortFieldName) {
+        template.direction = void 0;
+      }
     });
   }
   _isStandardView() {
     return !this.table.relatedTable && !this.table.attachmentsViewOptions.objectId;
   }
   _closePopovers() {
-    document.removeEventListener("click", this._fieldVisibilityPopoverClickHandler), this._fieldVisibilityPopoverNode && (document.body.removeChild(this._fieldVisibilityPopoverNode), this._fieldVisibilityPopoverNode = void 0);
+    document.removeEventListener("click", this._fieldVisibilityPopoverClickHandler);
+    if (this._fieldVisibilityPopoverNode) {
+      document.body.removeChild(this._fieldVisibilityPopoverNode);
+      this._fieldVisibilityPopoverNode = void 0;
+    }
   }
-  _addTableTooltip(e, i) {
-    const s = document.createElement("calcite-tooltip");
-    s.className = "table-tooltip", s.referenceElement = e, s.placement = "trailing-start", s.open = !0;
-    const t = document.createElement("div");
-    t.className = "tooltip", t.innerHTML = i, s.append(t), document.body.append(s);
+  _addTableTooltip(node, message) {
+    const tooltip = document.createElement("calcite-tooltip");
+    tooltip.className = "table-tooltip";
+    tooltip.referenceElement = node;
+    tooltip.placement = "trailing-start";
+    tooltip.open = true;
+    const div = document.createElement("div");
+    div.className = "tooltip";
+    div.innerHTML = message;
+    tooltip.append(div);
+    document.body.append(tooltip);
   }
   _removeTableTooltip() {
-    document.querySelectorAll(".table-tooltip").forEach((e) => e.parentNode?.removeChild(e));
+    document.querySelectorAll(".table-tooltip").forEach((tooltip) => tooltip.parentNode?.removeChild(tooltip));
   }
-  _isInNode(e, i) {
-    for (; e; ) {
-      if (e.nodeName === i.toUpperCase())
-        return !0;
-      e = e.parentElement;
+  _isInNode(node, nodeName) {
+    while (node) {
+      if (node.nodeName === nodeName.toUpperCase()) {
+        return true;
+      }
+      node = node.parentElement;
     }
-    return !1;
+    return false;
   }
-  _hasAttachmentsEnabled(e) {
-    if (!e?.capabilities)
-      return !1;
-    const { capabilities: { data: { supportsAttachment: i }, operations: { supportsQueryAttachments: s } } } = e;
-    return i && s;
+  _hasAttachmentsEnabled(layer) {
+    if (!layer?.capabilities) {
+      return false;
+    }
+    const { capabilities: { data: { supportsAttachment }, operations: { supportsQueryAttachments } } } = layer;
+    return supportsAttachment && supportsQueryAttachments;
   }
 }
-f("field-selection", C);
+customElement("field-selection", FieldSelection);
 export {
-  C as FieldSelection
+  FieldSelection
 };
+//# sourceMappingURL=customElement.js.map