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

package/dist/components/info-card/customElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"customElement.js","sources":["../../../src/components/info-card/info-card.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 { PopupUtils } from '../../utils/popupUtils';\r\nimport type { IPopupUtils } 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  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 './info-card.css';\r\nimport Features from '@arcgis/core/widgets/Features';\r\nimport * as reactiveUtils from '@arcgis/core/core/reactiveUtils';\r\n\r\ndeclare global {\r\n  interface DeclareElements {\r\n    'info-card': InfoCard;\r\n  }\r\n}\r\n\r\nexport class InfoCard 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(window, 'closeEdit', this.closeEdit);\r\n    this.listenOn(window, 'layerSelectionChange', this.layerSelectionChange);\r\n    this.listenOn<CustomEvent>(window, 'refreshGraphics', this.refreshGraphics);\r\n    this.listenOn(window, 'editMultipleFeatures', this.editMultipleFeatures);\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    if (changes.has('graphics')) {\r\n      void this.graphicsWatchHandler();\r\n    }\r\n\r\n    if (changes.has('isMobile')) {\r\n      void this.isMobileWatchHandler();\r\n    }\r\n\r\n    if (changes.has('mapView')) {\r\n      void this.mapViewWatchHandler();\r\n    }\r\n\r\n    if (changes.has('_translations')) {\r\n      const newLang = this._translations._lang;\r\n      const oldLang = changes.get('_translations')?._lang;\r\n      if (newLang && oldLang && newLang !== oldLang) {\r\n        if (this._features) {\r\n          const graphics = [...this.graphics];\r\n          this.graphics = [];\r\n          this.graphics = graphics;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** When true the geometry of the current feature will be editable */\r\n  @property() enableEditGeometry = false;\r\n\r\n  /** When true the snapping options will be exposed */\r\n  @property() enableSnapping = false;\r\n\r\n  /** esri/Graphic: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html */\r\n  @property() graphics: __esri.Graphic[] = [];\r\n\r\n  /** boolean: when true a loading indicator will be shown */\r\n  @property() isLoading = false;\r\n\r\n  /** When true the component will render an optimized view for mobile devices */\r\n  @property() isMobile = false;\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  /** boolean: If true will show edit button */\r\n  @property() allowEditing? = false;\r\n\r\n  /** boolean: If true will highlights the features on map using Features Widget */\r\n  @property() highlightEnabled? = true;\r\n\r\n  /** boolean: If true will show the pagination for multiple features */\r\n  @property() paginationEnabled? = true;\r\n\r\n  /** string: Set the position of the feature info */\r\n  @property() position? = 'absolute';\r\n\r\n  /** boolean: If true show close button on the feature info */\r\n  @property() showCloseBtn? = false;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  State (internal)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** boolean: When true a alert will be shown to indicate a problem or confirm the current action */\r\n  @state() _alertOpen = false;\r\n\r\n  /**\r\n   * string: Current index of total string\r\n   * This value is not displayed but will force a render if it changes\r\n   */\r\n  @state() _count = '';\r\n\r\n  /** When true the add record modal will be displayed */\r\n  @state() _editRecordOpen = false;\r\n\r\n  /** boolean: When true allow multiple features for editing */\r\n  @state() _isMultipleEdits = false;\r\n\r\n  /**\r\n   * When isMobile is true we will handle the display of the title so\r\n   * we can display beside a custom back button\r\n   */\r\n  @state() _mobileTitle = '';\r\n\r\n  /** When true the features list view will be displayed */\r\n  @state() _showListView = 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: 'info-card', blocking: true });\r\n\r\n  /** boolean: When true user has been navigated to related feature */\r\n  @state() _navigatedToRelatedFeature = false;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** boolean: When false alerts will be shown to indicate that the layer must have editing enabled for edit actions */\r\n  private _editEnabled = false;\r\n\r\n  /**\r\n   * esri/widgets/Feature: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Feature.html\r\n   * used for widget instance\r\n   */\r\n  private _features: __esri.Features | undefined;\r\n\r\n  /** esri/widgets/FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html */\r\n  private _layer: __esri.FeatureLayer | undefined;\r\n\r\n  /** IPopupUtils: When false alerts will be shown to indicate that the layer must have editing enabled for edit actions */\r\n  private _popupUtils: IPopupUtils | undefined;\r\n\r\n  /** string: unique id for the features node */\r\n  private _featuresNodeId = `features-node${new Date().getMilliseconds().toString()}`;\r\n\r\n  /** __esri.Graphic: Related feature selected from the features widget */\r\n  private _relatedFeature: __esri.Graphic | undefined;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Watch handlers\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Watch for changes to the graphic and update the feature widget */\r\n  private async graphicsWatchHandler(): Promise<void> {\r\n    // if user has been navigated to related record and graphics is changed then close the feature widget and then set graphics to avoid blank popup issue\r\n    // https://github.com/Esri/solutions-components/issues/1113\r\n    if (this._navigatedToRelatedFeature && this._features) {\r\n      this._features.clear();\r\n      this._features.close();\r\n      this._count = '';\r\n      this._navigatedToRelatedFeature = false;\r\n    }\r\n    await this.setGraphics();\r\n  }\r\n\r\n  /**\r\n   * Watch for changes to the isMobile prop then init the Features widget\r\n   * We need to know if the title should be displayed by the widget (non mobile)\r\n   * or by us (mobile)\r\n   */\r\n  private async isMobileWatchHandler(): Promise<void> {\r\n    await this._initFeaturesWidget();\r\n  }\r\n\r\n  /** Watch for changes to the mapView and re-init the Feature widget */\r\n  private async mapViewWatchHandler(): Promise<void> {\r\n    return await this._initFeaturesWidget();\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Methods (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Get the current selected feature from the Features widget\r\n   *\r\n   * @returns Promise resolving with the current feature\r\n   */\r\n  @method()\r\n  async getSelectedFeature(): Promise<any> {\r\n    return this._features?.selectedFeature;\r\n  }\r\n\r\n  /**\r\n   * Refresh the feature info\r\n   *\r\n   * @returns Promise when complete\r\n   */\r\n  @method()\r\n  async refresh(): Promise<any> {\r\n    await this.setGraphics();\r\n  }\r\n\r\n  /** Go to the previous feature in the features widget */\r\n  @method()\r\n  async back(): Promise<void> {\r\n    this._features?.previous();\r\n    this._count = this._getCount();\r\n  }\r\n\r\n  /** Go to the next feature in the features widget */\r\n  @method()\r\n  async next(): Promise<void> {\r\n    this._features?.next();\r\n    this._count = this._getCount();\r\n  }\r\n\r\n  /** Toggle the visibility of the features list view */\r\n  @method()\r\n  async toggleListView(): Promise<void> {\r\n    this._showListView = !this._showListView;\r\n    if (this._features) {\r\n      const i = this._features.selectedFeatureIndex;\r\n      this._features.open({\r\n        features: this.graphics,\r\n        featureMenuOpen: this._showListView,\r\n      });\r\n      this._features.selectedFeatureIndex = i;\r\n    }\r\n  }\r\n\r\n  /** update the current graphics to the features widget */\r\n  @method()\r\n  async updateCurrentGraphic(\r\n    selectedGraphic: __esri.Graphic\r\n  ): Promise<void> {\r\n    if (this._features?.selectedFeatureWidget) {\r\n      console.log(selectedGraphic);\r\n      // TODO\r\n      //this._features.selectedFeatureWidget.graphic = selectedGraphic;\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 popup is closed */\r\n  popupClosed = createEvent();\r\n\r\n  /** Emitted on demand when close button is clicked */\r\n  clearSelection = createEvent();\r\n\r\n  /** Emitted on demand when the selected index changes */\r\n  selectionChanged = createEvent<{ selectedFeature: __esri.Graphic[]; selectedFeatureIndex: number }>();\r\n\r\n  /**\r\n   * Respond to and close the edit record display\r\n   *\r\n   * @returns a promise when the operation has completed\r\n   */\r\n  private async closeEdit(): Promise<void> {\r\n    this._editRecordOpen = false;\r\n    this._isMultipleEdits = false;\r\n  }\r\n\r\n  /** Reset key properties when the layer selection changes */\r\n  private async layerSelectionChange(): Promise<void> {\r\n    this._showListView = false;\r\n    if (this._features?.viewModel) {\r\n      (this._features.viewModel as any).featureMenuOpen = false;\r\n      this._features.close();\r\n    }\r\n  }\r\n\r\n  /** Refresh the info-card graphics */\r\n  private async refreshGraphics(\r\n    _evt: CustomEvent\r\n  ): Promise<void> {\r\n    // if if user is not navigated to related feature then only update the graphics otherwise the related feature will shown instead of selected feature\r\n    if (!this._navigatedToRelatedFeature) {\r\n      this.graphics = [..._evt.detail];\r\n    }\r\n  }\r\n\r\n  /** Edits multiple graphics */\r\n  private async editMultipleFeatures(\r\n    _evt: CustomEvent\r\n  ): Promise<void> {\r\n    this._isMultipleEdits = true;\r\n    this._openEditRecord();\r\n  }\r\n\r\n  /** Listen for changes in language and refresh the info card */\r\n  private async selectedLanguageUpdated(\r\n    _evt: CustomEvent\r\n  ): Promise<void> {\r\n    // re-initialize the features widget to update the new language\r\n    this._features?.clear();\r\n    this._features?.close();\r\n    await this._initFeaturesWidget();\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._popupUtils = new PopupUtils();\r\n  }\r\n\r\n  /**\r\n   * Called once just after the component is fully loaded and the first render() occurs.\r\n   *\r\n   * @returns Promise when complete\r\n   */\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    if (this.graphics?.length > 0) {\r\n      await this.setGraphics();\r\n    }\r\n  }\r\n\r\n  /** Renders the component. */\r\n  override render(): JsxNode {\r\n    const loadingClass = this.isLoading ? '' : 'display-none';\r\n    const featureNodeClass = this.isLoading || this._editRecordOpen ? 'visibility-hidden' : 'position-absolute';\r\n    const editClass = !this.isLoading && this._editRecordOpen ? 'position-absolute' : 'display-none';\r\n    const editButtonClass = (!this.isLoading && this._editRecordOpen) || this._showListView ? 'display-none' : '';\r\n    const nextBackDisabled = this._features?.features && this._features.features.length < 2 || this._navigatedToRelatedFeature;\r\n    const id = Number(this._features?.selectedFeature?.getObjectId());\r\n    const ids = Number.isNaN(id) ? [] : [id];\r\n    const deleteEnabled = this._layer?.editingEnabled && this._layer?.capabilities?.operations?.supportsDelete;\r\n    // if user has navigated to the related feature then pass the related feature to the graphics\r\n    const graphics = this._relatedFeature ? [this._relatedFeature] : this.graphics;\r\n    const selectedFeatureIndex = this._navigatedToRelatedFeature ? 0 : this._features?.selectedFeatureIndex;\r\n    const toolTipClass = this.isMobile ? 'display-none' : '';\r\n    return (\r\n      <calcite-shell\r\n        class='z-index-1'\r\n        style={{ position: this.position }}\r\n      >\r\n        {this._getHeader()}\r\n        <calcite-loader\r\n          class={loadingClass}\r\n          label={this._translations.fetchingData}\r\n        />\r\n        <div\r\n          class={'esri-widget feature-node ' + featureNodeClass}\r\n          id={this._featuresNodeId}\r\n        />\r\n        <div\r\n          class={`${editButtonClass} width-100`}\r\n          slot='footer'\r\n        >\r\n          {this.allowEditing ? (\r\n            <div class='display-flex top-border padding-1-2'>\r\n              <calcite-button\r\n                appearance='solid'\r\n                id='solutions-edit'\r\n                onClick={() => this._openEditRecord()}\r\n                width='full'\r\n              >\r\n                {this._translations.edit}\r\n              </calcite-button>\r\n              {this.isMobile && deleteEnabled ? (\r\n                <delete-button\r\n                  class='padding-inline-start-1 width-100'\r\n                  id='solutions-delete'\r\n                  ids={ids}\r\n                  layer={this._layer}\r\n                  oneditsComplete={() => this._closePopup()}\r\n                  showDeleteCount={false}\r\n                />\r\n              ) : undefined}\r\n              <calcite-tooltip\r\n                class={toolTipClass}\r\n                placement='bottom'\r\n                referenceElement='solutions-edit'\r\n              >\r\n                <span>\r\n                  {this._translations.edit}\r\n                </span>\r\n              </calcite-tooltip>\r\n              {this.isMobile && deleteEnabled ? (\r\n                <calcite-tooltip\r\n                  class={toolTipClass}\r\n                  placement='bottom'\r\n                  referenceElement='solutions-delete'\r\n                >\r\n                  <span>\r\n                    {this._translations.delete}\r\n                  </span>\r\n                </calcite-tooltip>\r\n              ) : undefined}\r\n            </div>\r\n          ) : <></>}\r\n          {this.paginationEnabled && !nextBackDisabled && (\r\n            <div class={`display-flex padding-1-2 button-container top-border`}>\r\n              <div>\r\n                <calcite-button\r\n                  appearance='transparent'\r\n                  disabled={nextBackDisabled}\r\n                  iconFlipRtl='both'\r\n                  iconStart='chevron-left'\r\n                  id='solutions-back'\r\n                  onClick={() => this._back()}\r\n                  width='full'\r\n                />\r\n                <calcite-tooltip\r\n                  class={toolTipClass}\r\n                  placement='top'\r\n                  referenceElement='solutions-back'\r\n                >\r\n                  <span>\r\n                    {this._translations.back}\r\n                  </span>\r\n                </calcite-tooltip>\r\n              </div>\r\n              <calcite-action\r\n                appearance='solid'\r\n                class='pagination-action'\r\n                iconFlipRtl\r\n                onClick={() => this._toggleListView()}\r\n                scale='s'\r\n                text=''\r\n                textEnabled={true}\r\n              >\r\n                <span class='pagination-count'>\r\n                  {this._count}\r\n                </span>\r\n              </calcite-action>\r\n              <div>\r\n                <calcite-button\r\n                  appearance='transparent'\r\n                  disabled={nextBackDisabled}\r\n                  iconFlipRtl='both'\r\n                  iconStart='chevron-right'\r\n                  id='solutions-next'\r\n                  onClick={() => this._next()}\r\n                  width='full'\r\n                />\r\n                <calcite-tooltip\r\n                  class={toolTipClass}\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        </div>\r\n        <edit-card\r\n          allowMultipleEditing={this._isMultipleEdits}\r\n          class={editClass}\r\n          enableEditGeometry={this.enableEditGeometry}\r\n          enableSnapping={this.enableSnapping}\r\n          graphicIndex={selectedFeatureIndex}\r\n          graphics={graphics}\r\n          mapView={this.mapView}\r\n          open={this._editRecordOpen}\r\n        />\r\n        <calcite-alert\r\n          icon={'layer-broken'}\r\n          kind={'warning'}\r\n          label=''\r\n          oncalciteAlertClose={() => this._alertClosed()}\r\n          open={this._alertOpen}\r\n          placement='top'\r\n        >\r\n          <div slot='title'>\r\n            {this._translations.editDisabled}\r\n          </div>\r\n          <div slot='message'>\r\n            {this._translations.enableEditing}\r\n          </div>\r\n        </calcite-alert>\r\n      </calcite-shell>\r\n    );\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Functions (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Initializes the features widget if not created and updates the feature widget and other required states\r\n   *\r\n   * @private\r\n   */\r\n  private async setGraphics(): Promise<void> {\r\n    if (!this._features) {\r\n      await this._initFeaturesWidget();\r\n    }\r\n    if (this.graphics.length > 0) {\r\n      this._layer = this.graphics[0]?.layer as __esri.FeatureLayer;\r\n      this._editEnabled = this._layer.editingEnabled && this._layer.capabilities?.operations.supportsUpdate ? true : false;\r\n      this._mobileTitle = this.mapView?.map && await this._popupUtils?.getPopupTitle(this.graphics[0], this.mapView.map) || '';\r\n      this._features?.open({\r\n        features: this.graphics,\r\n      });\r\n    } else {\r\n      this._features?.clear();\r\n      this._features?.close();\r\n    }\r\n    this._count = this._getCount();\r\n  }\r\n\r\n  /**\r\n   * Init the Feature widget so we can display the popup content\r\n   *\r\n   * @returns a promise when the operation has completed\r\n   * @private\r\n   */\r\n  private async _initFeaturesWidget(): Promise<void> {\r\n    return this.isMobile !== undefined\r\n      ? await this.mapView?.when(() => {\r\n        if (!this._features) {\r\n          this._features = new Features({\r\n            view: this.mapView,\r\n            container: this._featuresNodeId,\r\n            visibleElements: {\r\n              actionBar: false,\r\n              closeButton: this.showCloseBtn,\r\n              featureMenuHeading: false,\r\n              heading: !this.isMobile,\r\n            },\r\n          });\r\n          if (this._features) {\r\n            // TODO has to be a better way to avoid truthy/falsey to explicit\r\n            this._features.viewModel.highlightEnabled = this.highlightEnabled ? true : false;\r\n            reactiveUtils.watch(\r\n              () => (this._features?.viewModel as any).featureMenuOpen,\r\n              (isOpen: boolean) => {\r\n                void this._updateCount();\r\n                if (!isOpen) {\r\n                  this._showListView = isOpen;\r\n                }\r\n              },\r\n            );\r\n            reactiveUtils.watch(\r\n              () => this._features?.selectedFeatureIndex,\r\n              (i: number | undefined) => {\r\n                if (i !== undefined && i > -1) {\r\n                  if (this._features?.selectedFeature) {\r\n                    this.selectionChanged.emit({\r\n                      selectedFeature: [this._features.selectedFeature],\r\n                      selectedFeatureIndex: this._features.selectedFeatureIndex\r\n                    });\r\n                  }\r\n                }\r\n              },\r\n            );\r\n\r\n            // watch for changes to the selected drill in feature\r\n            // and update the related feature if it exists\r\n            // if it does not exist then set the related feature to undefined\r\n            reactiveUtils?.watch(\r\n              () => (this._features as any).selectedDrillInFeature,\r\n              (f: any) => {\r\n                if (f) {\r\n                  this._relatedFeature = f;\r\n                  this._navigatedToRelatedFeature = true;\r\n                } else {\r\n                  this._relatedFeature = undefined;\r\n                  this._navigatedToRelatedFeature = false;\r\n                }\r\n              },\r\n            );\r\n\r\n            // get the info card node element and emit clear selection while clicking the close button\r\n            const infoCard = this.el.querySelector('#' + this._featuresNodeId);\r\n            this.listenOn(infoCard, 'calciteFlowItemClose', () => {\r\n              this.clearSelection.emit();\r\n            });\r\n          }\r\n        } else {\r\n          this._features.view = this.mapView;\r\n          this._features.visibleElements.actionBar = false;\r\n          this._features.visibleElements.closeButton = this.showCloseBtn ? true : false;\r\n          this._features.visibleElements.heading = !this.isMobile;\r\n        }\r\n      })\r\n      : Promise.resolve();\r\n  }\r\n\r\n  /**\r\n   * Get the mobile header\r\n   *\r\n   * @returns the header node to display when in mobile mode\r\n   * @private\r\n   */\r\n  private _getHeader(): JsxNode {\r\n    return this.isMobile && !this._editRecordOpen ? (\r\n      <calcite-panel\r\n        class='border-width-0'\r\n        slot='header'\r\n      >\r\n        <calcite-action\r\n          appearance='solid'\r\n          class='end-border'\r\n          icon={'chevron-left'}\r\n          iconFlipRtl={true}\r\n          onClick={() => this._closePopup()}\r\n          scale='s'\r\n          slot='header-actions-start'\r\n          text=''\r\n        />\r\n        <span\r\n          class='font-bold'\r\n          slot='header-content'\r\n        >\r\n          {this._mobileTitle}\r\n        </span>\r\n      </calcite-panel>\r\n    ) : undefined;\r\n  }\r\n\r\n  /** Close the popup and emit the selected features */\r\n  private _closePopup(): void {\r\n    this.popupClosed.emit();\r\n  }\r\n\r\n  /** Set the alertOpen member to false when the alert is closed */\r\n  private _alertClosed(): void {\r\n    this._alertOpen = false;\r\n  }\r\n\r\n  /** Open the edit record */\r\n  private _openEditRecord(): void {\r\n    if (this._editEnabled) {\r\n      this._editRecordOpen = true;\r\n    } else {\r\n      this._alertOpen = true;\r\n    }\r\n  }\r\n\r\n  /** Go to the previous feature in the features widget */\r\n  private async _back(): Promise<void> {\r\n    this._features?.previous();\r\n    await this._updateCount();\r\n  }\r\n\r\n  /** Go to the next feature in the features widget */\r\n  private async _next(): Promise<void> {\r\n    this._features?.next();\r\n    await this._updateCount();\r\n  }\r\n\r\n  /**\r\n   * Updates the popup title and pagination count\r\n   */\r\n  private async _updateCount(): Promise<void> {\r\n    const i = this._features?.selectedFeatureIndex;\r\n    if (this._popupUtils && this.mapView && this.mapView.map && i !== undefined) {\r\n      this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[i], this.mapView.map);\r\n    }\r\n    this._count = this._getCount();\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   */\r\n  private _getCount(): string {\r\n    const index = this._features?.viewModel && (this._features?.viewModel.selectedFeatureIndex + 1).toString() || '';\r\n    const total = this._features?.features?.length.toString() || '';\r\n    return this._translations.indexOfTotal.replace('{{index}}', index).replace('{{total}}', total) || '';\r\n  }\r\n\r\n  /** Toggle the visibility of the features list view */\r\n  private _toggleListView(): void {\r\n    this._showListView = !this._showListView;\r\n    if (this._features) {\r\n      const i = this._features.selectedFeatureIndex;\r\n      this._features.open({\r\n        features: this.graphics,\r\n        featureMenuOpen: this._showListView,\r\n      });\r\n      this._features.selectedFeatureIndex = i;\r\n    }\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

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

@@ -4,7 +4,7 @@ import { PropertyValues } from 'lit';
 import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
 
 export declare class LayerList extends LitElement {
-    /** 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;
     /** string[]: If passed will show only these layers in the list if they are present in map and are editable */
     layers: string[];

package/dist/components/layer-list/customElement.js

@@ -1,21 +1,24 @@
-import { c as y } from "../../chunks/runtime.js";
-import { e as d, j as p, g as m } from "../../chunks/mapViewUtils.js";
-import * as l from "@arcgis/core/intl";
-import { u as L } from "../../chunks/useT9n.js";
-import { css as f, html as a } from "lit";
-import { LitElement as u, createEvent as h, noShadowRoot as w } from "@arcgis/lumina";
-import * as g from "@arcgis/core/core/reactiveUtils";
 /*! 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.57 */
-async function _(n, e) {
-  const { style: s = "decimal", places: t = 2 } = e || {}, i = l.convertNumberFormatToIntlOptions({
-    places: t,
-    digitSeparator: !0
+v1.2.0-next.58 */
+import { c as customElement } from "../../chunks/runtime.js";
+import { e as getMapLayerHash, j as getAllFeatureLayers, g as getFeatureLayerView } from "../../chunks/mapViewUtils.js";
+import * as intl from "@arcgis/core/intl";
+import { u as useT9n } from "../../chunks/useT9n.js";
+import { css, html } from "lit";
+import { LitElement, createEvent, noShadowRoot } from "@arcgis/lumina";
+import * as reactiveUtils from "@arcgis/core/core/reactiveUtils";
+async function formatNumber(number, options) {
+  const { style = "decimal", places = 2 } = options || {};
+  const numberFormatIntlOptions = intl.convertNumberFormatToIntlOptions({
+    places,
+    digitSeparator: true
   });
-  return i.style = s, l.formatNumber(n, i);
+  numberFormatIntlOptions.style = style;
+  return intl.formatNumber(number, numberFormatIntlOptions);
 }
-const I = f`@layer{/** @license
+const styles = css`@layer{
+/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -29,111 +32,179 @@ const I = f`@layer{/** @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}.notice-msg{width:calc(100% - 20px);padding:10px}.layer-name{font-weight:500;word-break:break-word}.feature-count{padding:0 10px}}`;
-class x extends u {
+ */
+
+:host {
+  display: block;
+}
+
+.notice-msg {
+  width: calc(100% - 20px);
+  padding: 10px;
+}
+
+.layer-name {
+  font-weight: 500;
+  word-break: break-word;
+}
+
+.feature-count {
+  padding: 0 10px;
+}
+}`;
+class LayerList extends LitElement {
   constructor() {
-    super(), this.layers = [], this.showFeatureCount = !0, this.showNextIcon = !1, this.applyLayerViewFilter = !1, this.filterByMapExtent = !1, this._noLayersToDisplay = !1, this._mapLayerIds = [], this._isLoading = !1, this._translations = L({ name: "layer-list", blocking: !0 }), this.layerSelect = h(), this.layersListLoaded = h(), this.listenOn(window, "selectedLanguageUpdated", this.selectedLanguageUpdated);
+    super();
+    this.layers = [];
+    this.showFeatureCount = true;
+    this.showNextIcon = false;
+    this.applyLayerViewFilter = false;
+    this.filterByMapExtent = false;
+    this._noLayersToDisplay = false;
+    this._mapLayerIds = [];
+    this._isLoading = false;
+    this._translations = useT9n({ name: "layer-list", blocking: true });
+    this.layerSelect = createEvent();
+    this.layersListLoaded = createEvent();
+    this.listenOn(window, "selectedLanguageUpdated", this.selectedLanguageUpdated);
   }
   static {
-    this.properties = { mapView: 0, layers: 0, showFeatureCount: 5, showNextIcon: 5, applyLayerViewFilter: 5, filterByMapExtent: 5, _noLayersToDisplay: 16, _mapLayerIds: 16, _isLoading: 16, _translations: 16 };
+    this.properties = { mapView: [0, {}, { attribute: false }], layers: [0, {}, { attribute: false }], showFeatureCount: [5, {}, { type: Boolean }], showNextIcon: [5, {}, { type: Boolean }], applyLayerViewFilter: [5, {}, { type: Boolean }], filterByMapExtent: [5, {}, { type: Boolean }], _noLayersToDisplay: [16, {}, { state: true }], _mapLayerIds: [16, {}, { state: true }], _isLoading: [16, {}, { state: true }], _translations: [16, {}, { state: true }] };
   }
   static {
-    this.styles = I;
+    this.styles = styles;
   }
   static {
-    this.shadowRootOptions = w;
+    this.shadowRootOptions = noShadowRoot;
   }
-  willUpdate(e) {
-    e.has("filterByMapExtent") && this.hasUpdated && this.filterByMapExtentWatchHandler(this.filterByMapExtent);
+  willUpdate(changes) {
+    if (changes.has("filterByMapExtent") && this.hasUpdated) {
+      this.filterByMapExtentWatchHandler(this.filterByMapExtent);
+    }
   }
-  filterByMapExtentWatchHandler(e) {
-    e ? this.initializeMapExtentFilter() : this._filterByMapExtentHandle && this._filterByMapExtentHandle.remove();
+  filterByMapExtentWatchHandler(enabled) {
+    if (enabled) {
+      this.initializeMapExtentFilter();
+    } else if (this._filterByMapExtentHandle) {
+      this._filterByMapExtentHandle.remove();
+    }
   }
   async refresh() {
     await this.setLayers();
   }
-  async selectedLanguageUpdated(e) {
+  async selectedLanguageUpdated(_evt) {
     await this.setLayers();
   }
   async load() {
-    this.filterByMapExtent && this.initializeMapExtentFilter();
+    if (this.filterByMapExtent) {
+      this.initializeMapExtentFilter();
+    }
   }
   async loaded() {
     await this.setLayers();
   }
   render() {
-    return a`${this._isLoading && a`<calcite-loader label scale=m></calcite-loader>` || ""}${!this._isLoading && this.mapView && this._noLayersToDisplay && a`<calcite-notice class="notice-msg" icon=layers-reference kind=danger open><div slot=title>${this._translations.error}</div><div slot=message>${this._translations.noLayerToDisplayErrorMsg}</div></calcite-notice>` || ""}${!this._isLoading && this.mapView && a`<calcite-list label selection-appearance=border selection-mode=none>${this.filterByMapExtent && this._mapLayerIds.length > 0 && this.getExtentNotice() || ""}${this.renderLayerList()}</calcite-list>` || ""}`;
+    return html`${this._isLoading && html`<calcite-loader label scale=m></calcite-loader>` || ""}${!this._isLoading && this.mapView && this._noLayersToDisplay && html`<calcite-notice class="notice-msg" icon=layers-reference kind=danger open><div slot=title>${this._translations.error}</div><div slot=message>${this._translations.noLayerToDisplayErrorMsg}</div></calcite-notice>` || ""}${!this._isLoading && this.mapView && html`<calcite-list label selection-appearance=border selection-mode=none>${this.filterByMapExtent && this._mapLayerIds.length > 0 && this.getExtentNotice() || ""}${this.renderLayerList()}</calcite-list>` || ""}`;
   }
   initializeMapExtentFilter() {
-    this._filterByMapExtentHandle = g.when(() => this.mapView?.stationary, () => {
-      this.setLayers();
+    this._filterByMapExtentHandle = reactiveUtils.when(() => this.mapView?.stationary, () => {
+      void this.setLayers();
     }, {
-      initial: !0
+      initial: true
     });
   }
   async setLayers() {
-    this.mapView && (this._isLoading = !0, await this.initLayerHash(), this._isLoading = !1);
+    if (this.mapView) {
+      this._isLoading = true;
+      await this.initLayerHash();
+      this._isLoading = false;
+    }
   }
   async initLayerHash() {
-    const e = [];
+    const def = [];
     if (this.mapView) {
-      this._layerItemsHash = await d(this.mapView, !0);
-      const s = await p(this.mapView);
-      for (const t of s)
-        if (t?.type === "feature" && this.showFeatureCount) {
-          const i = t.createQuery();
-          if (t?.definitionExpression && (i.where = i.where + " AND " + t.definitionExpression), this.applyLayerViewFilter) {
-            const r = await m(this.mapView, t.id);
-            r?.filter?.where && (i.where = i.where ? i.where + " AND " + r.filter.where : r.filter.where);
-          }
-          i.geometry = this.filterByMapExtent ? this.mapView.extent : null;
-          const o = t.queryFeatureCount(i);
-          e.push(o), o.then(async (r) => {
-            const c = Number.isNaN(r) ? "" : await _(r, {
-              places: 0,
-              style: "decimal"
+      this._layerItemsHash = await getMapLayerHash(this.mapView, true);
+      const allMapLayers = await getAllFeatureLayers(this.mapView);
+      for (const eachLayer of allMapLayers) {
+        if (eachLayer?.type === "feature") {
+          if (this.showFeatureCount) {
+            const q = eachLayer.createQuery();
+            if (eachLayer?.definitionExpression) {
+              q.where = q.where + " AND " + eachLayer.definitionExpression;
+            }
+            if (this.applyLayerViewFilter) {
+              const featureLayerView = await getFeatureLayerView(this.mapView, eachLayer.id);
+              if (featureLayerView?.filter?.where) {
+                q.where = q.where ? q.where + " AND " + featureLayerView.filter.where : featureLayerView.filter.where;
+              }
+            }
+            q.geometry = this.filterByMapExtent ? this.mapView.extent : null;
+            const result = eachLayer.queryFeatureCount(q);
+            def.push(result);
+            void result.then(async (resCount) => {
+              const formattedCount = !Number.isNaN(resCount) ? await formatNumber(resCount, {
+                places: 0,
+                style: "decimal"
+              }) : "";
+              if (this._layerItemsHash) {
+                this._layerItemsHash[eachLayer.id].formattedFeatureCount = formattedCount;
+              }
             });
-            this._layerItemsHash && (this._layerItemsHash[t.id].formattedFeatureCount = c);
-          });
+          }
         }
-      await Promise.all(e).then(() => {
-        const t = this._layerItemsHash && this.getLayersToBeShownInList(this._layerItemsHash);
-        this._mapLayerIds = t?.reverse() || [], this.handleNoLayersToDisplay();
+      }
+      await Promise.all(def).then(() => {
+        const editableLayerIds = this._layerItemsHash && this.getLayersToBeShownInList(this._layerItemsHash);
+        this._mapLayerIds = editableLayerIds?.reverse() || [];
+        this.handleNoLayersToDisplay();
       }, () => {
-        this._mapLayerIds = [], this.handleNoLayersToDisplay();
+        this._mapLayerIds = [];
+        this.handleNoLayersToDisplay();
       });
     }
   }
   handleNoLayersToDisplay() {
-    this._noLayersToDisplay = !(this._mapLayerIds.length > 0), this.layersListLoaded.emit(this._mapLayerIds);
-  }
-  getLayersToBeShownInList(e) {
-    const s = this.layers?.length > 0 ? this.layers : [];
-    return Object.keys(e).reduce((t, i) => (s.indexOf(i) > -1 && t.push(i), t), []);
+    this._noLayersToDisplay = !(this._mapLayerIds.length > 0);
+    this.layersListLoaded.emit(this._mapLayerIds);
+  }
+  getLayersToBeShownInList(hash) {
+    const configuredLayers = this.layers?.length > 0 ? this.layers : [];
+    return Object.keys(hash).reduce((prev, cur) => {
+      if (configuredLayers.indexOf(cur) > -1) {
+        prev.push(cur);
+      }
+      return prev;
+    }, []);
   }
   renderLayerList() {
-    return this._mapLayerIds.length > 0 ? this._mapLayerIds.reduce((e, s) => {
-      if (this._layerItemsHash && this._layerItemsHash[s]) {
-        const t = this.getLayerListItem(s);
-        t && e.push(t);
+    return this._mapLayerIds.length > 0 ? this._mapLayerIds.reduce((prev, layerId) => {
+      if (this._layerItemsHash && this._layerItemsHash[layerId]) {
+        const li = this.getLayerListItem(layerId);
+        if (li) {
+          prev.push(li);
+        }
       }
-      return e;
+      return prev;
     }, []) : void 0;
   }
-  getLayerListItem(e) {
-    const s = this._layerItemsHash && this._layerItemsHash[e].name, t = this._layerItemsHash && this._layerItemsHash[e].formattedFeatureCount;
-    return a`<calcite-list-item @calciteListItemSelect=${() => {
-      this.onLayerItemSelected(e);
-    }}><div class="layer-name" slot=content-start>${s}</div>${this.showFeatureCount && t !== void 0 && t !== "" && a`<div class="feature-count" slot=content-end>${`(${t})`}</div>` || ""}${this.showNextIcon && a`<calcite-icon flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon>` || ""}</calcite-list-item>`;
+  getLayerListItem(layerId) {
+    const layerName = this._layerItemsHash && this._layerItemsHash[layerId].name;
+    const featureCount = this._layerItemsHash && this._layerItemsHash[layerId].formattedFeatureCount;
+    return html`<calcite-list-item @calciteListItemSelect=${() => {
+      this.onLayerItemSelected(layerId);
+    }}><div class="layer-name" slot=content-start>${layerName}</div>${this.showFeatureCount && featureCount !== void 0 && featureCount !== "" && html`<div class="feature-count" slot=content-end>${`(${featureCount})`}</div>` || ""}${this.showNextIcon && html`<calcite-icon flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon>` || ""}</calcite-list-item>`;
   }
   getExtentNotice() {
-    return a`<calcite-notice class="notice-msg" icon=extent-filter kind=brand open scale=s><div slot=message>${this._translations.extentFilterMsg}</div></calcite-notice>`;
+    return html`<calcite-notice class="notice-msg" icon=extent-filter kind=brand open scale=s><div slot=message>${this._translations.extentFilterMsg}</div></calcite-notice>`;
   }
-  onLayerItemSelected(e) {
-    this._layerItemsHash && this.layerSelect.emit({ layerId: e, layerName: this._layerItemsHash[e]?.name });
+  onLayerItemSelected(layerId) {
+    if (this._layerItemsHash) {
+      this.layerSelect.emit({ layerId, layerName: this._layerItemsHash[layerId]?.name });
+    }
   }
 }
-y("layer-list", x);
+customElement("layer-list", LayerList);
 export {
-  x as LayerList
+  LayerList
 };
+//# sourceMappingURL=customElement.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"customElement.js","sources":["../../../src/utils/languageUtil.ts","../../../src/components/layer-list/layer-list.tsx"],"sourcesContent":["/*\r\n *   Copyright (c) 2025 Esri\r\n *   All rights reserved.\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 *   http://www.apache.org/licenses/LICENSE-2.0\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 * as intl from '@arcgis/core/intl';\r\n\r\nexport const languageMap = new Map<string, string>([\r\n  ['ar', 'ar'],\r\n  ['bg', 'bg'],\r\n  ['bs', 'bs'],\r\n  ['ca', 'ca'],\r\n  ['cs', 'cs'],\r\n  ['da', 'da'],\r\n  ['de', 'de'],\r\n  ['el', 'el'],\r\n  ['en', 'en'],\r\n  ['es', 'es'],\r\n  ['et', 'et'],\r\n  ['fi', 'fi'],\r\n  ['fr', 'fr'],\r\n  ['he', 'he'],\r\n  ['hr', 'hr'],\r\n  ['hu', 'hu'],\r\n  ['id', 'id'],\r\n  ['it', 'it'],\r\n  ['ja', 'ja'],\r\n  ['ko', 'ko'],\r\n  ['lt', 'lt'],\r\n  ['lv', 'lv'],\r\n  ['nb', 'nb'],\r\n  ['nl', 'nl'],\r\n  ['pl', 'pl'],\r\n  ['pt-br', 'pt-BR'],\r\n  ['pt-pt', 'pt-PT'],\r\n  ['ro', 'ro'],\r\n  ['ru', 'ru'],\r\n  ['sk', 'sk'],\r\n  ['sl', 'sl'],\r\n  ['sr', 'sr'],\r\n  ['sv', 'sv'],\r\n  ['th', 'th'],\r\n  ['tr', 'tr'],\r\n  ['uk', 'uk'],\r\n  ['vi', 'vi'],\r\n  ['zh-cn', 'zh-CN'],\r\n  ['zh-hk', 'zh-HK'],\r\n  ['zh-tw', 'zh-TW'],\r\n]);\r\n\r\n// rtl\r\nexport function getElementDir(el: HTMLElement): 'ltr' | 'rtl' {\r\n  return getElementProp(el, 'dir', 'ltr');\r\n}\r\n\r\nfunction getElementProp(el: HTMLElement, prop: string, value: string): any {\r\n  const closestWithProp = el.closest(`[${prop}]`);\r\n  return closestWithProp ? closestWithProp.getAttribute(prop) : value;\r\n}\r\n\r\n// css\r\nexport const CSS_UTILITY = {\r\n  rtl: 'arcgis--rtl',\r\n} as const;\r\n\r\nexport async function formatNumber(\r\n  number: number,\r\n  options?: {\r\n    style: 'decimal' | 'percent';\r\n    places: number;\r\n  },\r\n): Promise<string> {\r\n  const { style = 'decimal', places = 2 } = options || {};\r\n  const numberFormatIntlOptions = intl.convertNumberFormatToIntlOptions({\r\n    places,\r\n    digitSeparator: true,\r\n  });\r\n  numberFormatIntlOptions.style = style;\r\n  return intl.formatNumber(number, numberFormatIntlOptions);\r\n}\r\n","/**\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 {\r\n  getAllFeatureLayers,\r\n  getFeatureLayerView,\r\n  getMapLayerHash\r\n} from '../../utils/mapViewUtils';\r\nimport type { ILayerItemsHash } from '../../utils/interfaces';\r\nimport type T9nStrings from './assets/t9n/messages.en.json';\r\nimport { formatNumber } from '../../utils/languageUtil';\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  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 './layer-list.css';\r\nimport * as reactiveUtils from '@arcgis/core/core/reactiveUtils';\r\n\r\ndeclare global {\r\n  interface DeclareElements {\r\n    'layer-list': LayerList;\r\n  }\r\n}\r\n\r\nexport class LayerList 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('filterByMapExtent') && this.hasUpdated) {\r\n      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  /** 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[]: If passed will show only these layers in the list if they are present in map and are editable */\r\n  @property() layers: string[] = [];\r\n\r\n  /** boolean: if true display's feature count for each layer */\r\n  @property() showFeatureCount? = true;\r\n\r\n  /** boolean: If true display's arrow icon on each layer item */\r\n  @property() showNextIcon? = 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  /** boolean: when true the features count 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  /** boolean: When true will display message no layers found */\r\n  @state() _noLayersToDisplay = false;\r\n\r\n  /** string[]: list of layer ids from the map which will be listed */\r\n  @state() _mapLayerIds: string[] = [];\r\n\r\n  /** boolean: When true display the loading indicator */\r\n  @state() _isLoading = 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: 'layer-list', blocking: true });\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** ILayerItemHash: id/name lookup */\r\n  private _layerItemsHash: ILayerItemsHash | undefined;\r\n\r\n  /** __esri.Handle: Handle for filter by map extent */\r\n  private _filterByMapExtentHandle: __esri.Handle | undefined;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Watch handlers\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Watch for filterByMapExtent change and update the layer list */\r\n  private filterByMapExtentWatchHandler(enabled: boolean): 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 layer list which will fetch the latest layer count and update the list\r\n   *\r\n   * @returns Promise that resolves when the operation is complete\r\n   */\r\n  @method()\r\n  async refresh(): Promise<void> {\r\n    await this.setLayers();\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 layer clicked with details layerId and layerName */\r\n  layerSelect = createEvent<{ layerId: string; layerName: string }>();\r\n\r\n  /**\r\n   * Emitted on demand when list of layers to be listed are created.\r\n   * When empty array received in this event means no valid layers are found to be listed\r\n   */\r\n  layersListLoaded = createEvent<string[]>();\r\n\r\n  /** Listen for changes in language and refreh the list  */\r\n  private async selectedLanguageUpdated(_evt: CustomEvent): Promise<void> {\r\n    await this.setLayers();\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    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.setLayers();\r\n  }\r\n\r\n  /** Renders the component. */\r\n  override render(): JsxNode {\r\n    return (\r\n      <>\r\n        {this._isLoading && <calcite-loader label='' scale='m' />}\r\n        {!this._isLoading && this.mapView && this._noLayersToDisplay && (\r\n          <calcite-notice\r\n            class='notice-msg'\r\n            icon='layers-reference'\r\n            kind='danger'\r\n            open\r\n          >\r\n            <div slot='title'>\r\n              {this._translations.error}\r\n            </div>\r\n            <div slot='message'>\r\n              {this._translations.noLayerToDisplayErrorMsg}\r\n            </div>\r\n          </calcite-notice>\r\n        )}\r\n        {!this._isLoading && this.mapView && (\r\n          <calcite-list\r\n            label=''\r\n            selectionAppearance='border'\r\n            selectionMode='none'\r\n          >\r\n            {this.filterByMapExtent && this._mapLayerIds.length > 0 && this.getExtentNotice()}\r\n            {this.renderLayerList()}\r\n          </calcite-list>\r\n        )}\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   * Updates the layer list based on map view extent\r\n   *\r\n   * @private\r\n   */\r\n  private initializeMapExtentFilter(): void {\r\n    this._filterByMapExtentHandle = reactiveUtils.when(\r\n      () => this.mapView?.stationary,\r\n      () => {\r\n        void this.setLayers();\r\n      },\r\n      {\r\n        initial: true,\r\n      },\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Fetch the ids of the layers from the map\r\n   *\r\n   * @returns Promise when the operation has completed\r\n   * @private\r\n   */\r\n  private async setLayers(): Promise<void> {\r\n    if (this.mapView) {\r\n      this._isLoading = true;\r\n      await this.initLayerHash();\r\n      this._isLoading = false;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Create a layer hash for layer name display\r\n   *\r\n   * @returns Promise when the operation has completed\r\n   * @private\r\n   */\r\n  private async initLayerHash(): Promise<void> {\r\n    const def = [];\r\n    if (this.mapView) {\r\n      this._layerItemsHash = (await getMapLayerHash(this.mapView, true)) as ILayerItemsHash;\r\n      const allMapLayers = await getAllFeatureLayers(this.mapView);\r\n      // eslint-disable-next-line @typescript-eslint/no-misused-promises\r\n      for (const eachLayer of allMapLayers as __esri.FeatureLayer[]) {\r\n        if (eachLayer?.type === 'feature') {\r\n          if (this.showFeatureCount) {\r\n            const q: any = eachLayer.createQuery();\r\n            //if layer has definitionExpression append it to the where clause\r\n            if (eachLayer?.definitionExpression) {\r\n              q.where = q.where + ' AND ' + eachLayer.definitionExpression;\r\n            }\r\n            if (this.applyLayerViewFilter) {\r\n              const featureLayerView = await getFeatureLayerView(this.mapView, eachLayer.id);\r\n              if (featureLayerView?.filter?.where) {\r\n                q.where = q.where ? q.where + ' AND ' + featureLayerView.filter.where : featureLayerView.filter.where;\r\n              }\r\n            }\r\n            q.geometry = this.filterByMapExtent ? this.mapView.extent : null;\r\n            const result = eachLayer.queryFeatureCount(q);\r\n            def.push(result);\r\n            void result.then(async resCount => {\r\n              const formattedCount = !Number.isNaN(resCount)\r\n                ? await formatNumber(resCount, {\r\n                  places: 0,\r\n                  style: 'decimal',\r\n                })\r\n                : '';\r\n              if (this._layerItemsHash) {\r\n                this._layerItemsHash[eachLayer.id].formattedFeatureCount = formattedCount;\r\n              }\r\n            });\r\n          }\r\n        }\r\n      }\r\n      await Promise.all(def).then(\r\n        () => {\r\n          const editableLayerIds = this._layerItemsHash && this.getLayersToBeShownInList(this._layerItemsHash);\r\n          this._mapLayerIds = editableLayerIds?.reverse() || [];\r\n          this.handleNoLayersToDisplay();\r\n        },\r\n        () => {\r\n          this._mapLayerIds = [];\r\n          this.handleNoLayersToDisplay();\r\n        },\r\n      );\r\n    }\r\n  }\r\n\r\n  /** Set no layers to display state and emit event */\r\n  private handleNoLayersToDisplay(): void {\r\n    this._noLayersToDisplay = !(this._mapLayerIds.length > 0);\r\n    this.layersListLoaded.emit(this._mapLayerIds);\r\n  }\r\n\r\n  /**\r\n   * Returns the ids of configured layers that needs to be shown in the list\r\n   *\r\n   * @param hash each layer item details\r\n   * @returns array of layer ids\r\n   */\r\n  private getLayersToBeShownInList(\r\n    hash: ILayerItemsHash\r\n  ): string[] {\r\n    const configuredLayers = this.layers?.length > 0 ? this.layers : [];\r\n    return Object.keys(hash).reduce((prev, cur) => {\r\n      if (configuredLayers.indexOf(cur) > -1) {\r\n        prev.push(cur);\r\n      }\r\n      return prev;\r\n    }, [] as string[]);\r\n  }\r\n\r\n  /**\r\n   * Render feature layer list\r\n   *\r\n   * @returns layer list\r\n   * @private\r\n   */\r\n  private renderLayerList(): JsxNode[] | undefined {\r\n    return this._mapLayerIds.length > 0 ? (\r\n      this._mapLayerIds.reduce((prev, layerId) => {\r\n        if (this._layerItemsHash && this._layerItemsHash[layerId]) {\r\n          const li: any = this.getLayerListItem(layerId);\r\n          if (li) {\r\n            prev.push(li);\r\n          }\r\n        }\r\n        return prev;\r\n      }, [] as any[])\r\n    ) : undefined;\r\n  }\r\n\r\n  /**\r\n   * Get each item\r\n   *\r\n   * @param layerId Layer id\r\n   * @returns individual item\r\n   * @private\r\n   */\r\n  private getLayerListItem(\r\n    layerId: string\r\n  ): JsxNode {\r\n    const layerName = this._layerItemsHash && this._layerItemsHash[layerId].name;\r\n    const featureCount = this._layerItemsHash && this._layerItemsHash[layerId].formattedFeatureCount;\r\n    return (\r\n      <calcite-list-item\r\n        oncalciteListItemSelect={() => {\r\n          this.onLayerItemSelected(layerId);\r\n        }}\r\n      >\r\n        {/* --TODO ellipsis--*/}\r\n        <div class='layer-name' slot='content-start'>\r\n          {layerName}\r\n        </div>\r\n        {this.showFeatureCount && featureCount !== undefined && featureCount !== '' && (\r\n          <div class='feature-count' slot='content-end'>\r\n            {`(${featureCount})`}\r\n          </div>\r\n        )}\r\n        {this.showNextIcon && <calcite-icon flipRtl icon='chevron-right' scale='s' slot='content-end' />}\r\n      </calcite-list-item>\r\n    );\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      >\r\n        <div slot='message'>\r\n          {this._translations.extentFilterMsg}\r\n        </div>\r\n      </calcite-notice>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * On click of layer list item emit the event along with the selected layerId and layerName\r\n   *\r\n   * @param layerId Layer id\r\n   * @private\r\n   */\r\n  private onLayerItemSelected(\r\n    layerId: string\r\n  ): void {\r\n    if (this._layerItemsHash) {\r\n      this.layerSelect.emit({ layerId, layerName: this._layerItemsHash[layerId]?.name });\r\n    }\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/components/layer-table/customElement.d.ts

@@ -79,7 +79,7 @@ export declare class LayerTable extends LitElement {
     mapHidden: boolean;
     /** IMapInfo: key configuration details about the current map */
     mapInfo: IMapInfo | 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;
     /**
      * boolean: When true only editable layers that support the update capability will be available