@esri/solutions-components 5.1.0-next.49 → 5.1.0-next.50

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

@@ -1,153 +1,33 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as customElement } from "../../chunks/runtime.js";
-import { P as PopupUtils } from "../../chunks/popupUtils.js";
-import { g as getLayerOrTable, c as getFeatureLayerView, h as highlightFeatures } from "../../chunks/mapViewUtils.js";
-import { u as useT9n } from "../../chunks/useT9n.js";
-import { css, html, nothing } from "lit";
-import { createRef, ref } from "lit-html/directives/ref.js";
-import { LitElement, createEvent, noShadowRoot, safeClassMap, safeStyleMap } from "@arcgis/lumina";
-import config from "@arcgis/core/config";
-import * as symbolUtils from "@arcgis/core/symbols/support/symbolUtils";
-import * as reactiveUtils from "@arcgis/core/core/reactiveUtils";
-const styles = css`@layer{
-/** @license
- * Copyright 2025 Esri
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * 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;
-}
-
-.width-full {
-  width: 100%;
-}
-
-.pagination {
-  display: flex;
-  justify-content: center;
-}
-
-.notice-msg {
-  padding: 10px;
-  width: calc(100% - 20px);
-}
-
-.feature-list-popup-title {
-  font-weight: 500;
-}
-
-.feature-list-popup-title-small {
-  font-size: small;
-}
-
-.feature-list-popup-title-small-ellipsis {
-  font-size: small;
-  white-space: nowrap !important;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.popup-title {
-  padding: 0 5px;
-  word-break: break-word;
-}
-
-.profile-img {
-  margin: 0 5px;
-  min-width: 32px;
-}
-
-.like-container {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  color: gray !important;
-  font-style: italic;
-}
-
-.feature-symbol {
-  padding: 0 3px;
-  min-width: 30px;
-  display: flex;
-  justify-content: center;
-}
-
-.search {
-  padding: 10px;
-  background-color: var(--calcite-color-surface-2) !important;
-  border-block-end: 1px solid var(--calcite-color-border-3);
-}
-}`;
-class FeatureList extends LitElement {
+import { c as _ } from "../../chunks/runtime.js";
+import { P as w } from "../../chunks/popupUtils.js";
+import { g as u, c, h as x } from "../../chunks/mapViewUtils.js";
+import { u as L } from "../../chunks/useT9n.js";
+import { css as I, html as l, nothing as v } from "lit";
+import { createRef as f, ref as d } from "lit-html/directives/ref.js";
+import { LitElement as F, createEvent as g, noShadowRoot as b, safeClassMap as E, safeStyleMap as S } from "@arcgis/lumina";
+import m from "@arcgis/core/config";
+import * as y from "@arcgis/core/symbols/support/symbolUtils";
+import * as $ from "@arcgis/core/core/reactiveUtils";
+const C = I`@layer{:host{display:block}.width-full{width:100%}.pagination{display:flex;justify-content:center}.notice-msg{padding:10px;width:calc(100% - 20px)}.feature-list-popup-title{font-weight:500}.feature-list-popup-title-small{font-size:small}.feature-list-popup-title-small-ellipsis{font-size:small;white-space:nowrap!important;text-overflow:ellipsis;overflow:hidden}.popup-title{padding:0 5px;word-break:break-word}.profile-img{margin:0 5px;min-width:32px}.like-container{display:flex;align-items:center;gap:5px;color:gray!important;font-style:italic}.feature-symbol{padding:0 3px;min-width:30px;display:flex;justify-content:center}.search{padding:10px;background-color:var(--calcite-color-surface-2)!important;border-block-end:1px solid var(--calcite-color-border-3)}}`;
+class T extends F {
   constructor() {
-    super();
-    this.selectedLayerId = "";
-    this.noFeaturesFoundMsg = "";
-    this.pageSize = 100;
-    this.highlightOnMap = false;
-    this.highlightOnHover = false;
-    this.textSize = "large";
-    this.showInitialLoading = true;
-    this.showErrorWhenNoFeatures = false;
-    this.showUserImageInList = false;
-    this.showFeatureSymbol = false;
-    this.applyLayerViewFilter = false;
-    this.showFullTitle = true;
-    this.filterByMapExtent = false;
-    this._featureItems = [];
-    this._featuresCount = 0;
-    this._isLoading = false;
-    this._searchPlaceHolder = "";
-    this._fullTextSearchInfo = [];
-    this._translations = useT9n({ name: "feature-list", blocking: true });
-    this._pagination = createRef();
-    this._calciteList = createRef();
-    this._validFieldTypes = ["small-integer", "integer", "big-integer", "single", "long"];
-    this._abbreviatedLikeCount = "";
-    this._likeFieldAvailable = false;
-    this._searchExpression = "";
-    this.featureClick = createEvent();
-    this.featureSelect = createEvent();
-    this.listenOn(window, "selectedLanguageUpdated", this.selectedLanguageUpdated);
+    super(), this.selectedLayerId = "", this.noFeaturesFoundMsg = "", this.pageSize = 100, this.highlightOnMap = !1, this.highlightOnHover = !1, this.textSize = "large", this.showInitialLoading = !0, this.showErrorWhenNoFeatures = !1, this.showUserImageInList = !1, this.showFeatureSymbol = !1, this.applyLayerViewFilter = !1, this.showFullTitle = !0, this.filterByMapExtent = !1, this._featureItems = [], this._featuresCount = 0, this._isLoading = !1, this._searchPlaceHolder = "", this._fullTextSearchInfo = [], this._translations = L({ name: "feature-list", blocking: !0 }), this._pagination = f(), this._calciteList = f(), this._validFieldTypes = ["small-integer", "integer", "big-integer", "single", "long"], this._abbreviatedLikeCount = "", this._likeFieldAvailable = !1, this._searchExpression = "", this.featureClick = g(), this.featureSelect = g(), this.listenOn(window, "selectedLanguageUpdated", this.selectedLanguageUpdated);
   }
   static {
-    this.properties = { selectedLayerId: 1, mapView: [0, {}, { attribute: false }], noFeaturesFoundMsg: 1, pageSize: [9, {}, { type: Number }], highlightOnMap: [5, {}, { type: Boolean }], highlightOnHover: [5, {}, { type: Boolean }], sortingInfo: [0, {}, { attribute: false }], whereClause: 1, textSize: 1, showInitialLoading: [5, {}, { type: Boolean }], showErrorWhenNoFeatures: [5, {}, { type: Boolean }], showUserImageInList: [5, {}, { type: Boolean }], showFeatureSymbol: [5, {}, { type: Boolean }], applyLayerViewFilter: [5, {}, { type: Boolean }], reportingOptions: [0, {}, { attribute: false }], showFullTitle: [5, {}, { type: Boolean }], filterByMapExtent: [5, {}, { type: Boolean }], _featureItems: [16, {}, { state: true }], _featuresCount: [16, {}, { state: true }], _isLoading: [16, {}, { state: true }], _searchPlaceHolder: [16, {}, { state: true }], _fullTextSearchInfo: [16, {}, { state: true }], _translations: [16, {}, { state: true }] };
+    this.properties = { selectedLayerId: 1, mapView: 0, noFeaturesFoundMsg: 1, pageSize: 9, highlightOnMap: 5, highlightOnHover: 5, sortingInfo: 0, whereClause: 1, textSize: 1, showInitialLoading: 5, showErrorWhenNoFeatures: 5, showUserImageInList: 5, showFeatureSymbol: 5, applyLayerViewFilter: 5, reportingOptions: 0, showFullTitle: 5, filterByMapExtent: 5, _featureItems: 16, _featuresCount: 16, _isLoading: 16, _searchPlaceHolder: 16, _fullTextSearchInfo: 16, _translations: 16 };
   }
   static {
-    this.styles = styles;
+    this.styles = C;
   }
   static {
-    this.shadowRootOptions = noShadowRoot;
+    this.shadowRootOptions = b;
   }
-  willUpdate(changes) {
-    if (changes.has("selectedLayerId")) {
-      void this.selectedLayerWatchHandler();
-    }
-    if (changes.has("sortingInfo")) {
-      void this.sortingInfoWatchHandler();
-    }
-    if (changes.has("whereClause")) {
-      void this.whereClauseHandler();
-    }
-    if (changes.has("filterByMapExtent") && this.hasUpdated) {
-      void this.filterByMapExtentWatchHandler(this.filterByMapExtent);
-    }
+  willUpdate(t) {
+    t.has("selectedLayerId") && this.selectedLayerWatchHandler(), t.has("sortingInfo") && this.sortingInfoWatchHandler(), t.has("whereClause") && this.whereClauseHandler(), t.has("filterByMapExtent") && this.hasUpdated && this.filterByMapExtentWatchHandler(this.filterByMapExtent);
   }
   async selectedLayerWatchHandler() {
-    this._selectedLayer = this.mapView && await getLayerOrTable(this.mapView, this.selectedLayerId);
-    await this.initializeFeatureItems();
+    this._selectedLayer = this.mapView && await u(this.mapView, this.selectedLayerId), await this.initializeFeatureItems();
   }
   async sortingInfoWatchHandler() {
     await this.initializeFeatureItems();
@@ -155,123 +35,86 @@ class FeatureList extends LitElement {
   async whereClauseHandler() {
     await this.initializeFeatureItems();
   }
-  async filterByMapExtentWatchHandler(enabled) {
-    if (enabled) {
-      this.initializeMapExtentFilter();
-    } else if (this._filterByMapExtentHandle) {
-      this._filterByMapExtentHandle.remove();
-    }
+  async filterByMapExtentWatchHandler(t) {
+    t ? this.initializeMapExtentFilter() : this._filterByMapExtentHandle && this._filterByMapExtentHandle.remove();
   }
-  async refresh(maintainPageState) {
-    if (maintainPageState && this._pagination.value) {
-      const event = {
+  async refresh(t) {
+    if (t && this._pagination.value) {
+      const e = {
         target: {
           startItem: this._pagination.value.startItem
         }
       };
-      await this.pageChanged(event);
-    } else if (this._searchExpression) {
-      await this._searchFullText();
-    } else {
-      await this.initializeFeatureItems();
-    }
+      await this.pageChanged(e);
+    } else this._searchExpression ? await this._searchFullText() : await this.initializeFeatureItems();
   }
-  async selectedLanguageUpdated(_evt) {
+  async selectedLanguageUpdated(t) {
     if (this._pagination.value) {
-      const event = {
+      const e = {
         target: {
           startItem: this._pagination.value.startItem
         }
       };
-      await this.pageChanged(event);
-    } else {
+      await this.pageChanged(e);
+    } else
       await this.initializeFeatureItems();
-    }
   }
   async load() {
-    this._isLoading = this.showInitialLoading ? true : false;
-    this._popupUtils = new PopupUtils();
-    if (this.mapView && this.selectedLayerId) {
-      this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
-      this._getFullTextSearchInfo();
-    }
-    if (this.filterByMapExtent) {
-      this.initializeMapExtentFilter();
-    }
+    this._isLoading = !!this.showInitialLoading, this._popupUtils = new w(), this.mapView && this.selectedLayerId && (this._selectedLayer = await u(this.mapView, this.selectedLayerId), this._getFullTextSearchInfo()), this.filterByMapExtent && this.initializeMapExtentFilter();
   }
   async loaded() {
     await this.initializeFeatureItems();
   }
   render() {
-    const showSearch = this._canShowFullTextSearch();
-    return html`<calcite-panel>${showSearch && html`<calcite-input class=search clearable icon=search @calciteInputChange=${this._searchTextChanged} .placeholder=${this._searchPlaceHolder} title type=search></calcite-input>` || ""}${this._isLoading && html`<calcite-loader label scale=m></calcite-loader>` || ""}${this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading && html`<calcite-notice class="notice-msg" icon=feature-details kind=info open><div slot=message>${this.filterByMapExtent ? this._translations.featureErrorMsgInCurrentMapView : this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg}</div></calcite-notice>` || ""}<calcite-list class=${safeClassMap(this.textSize === "small" && !this.showFullTitle ? "overflow-hidden" : "")} label selection-appearance=border selection-mode=none ${ref(this._calciteList)}>${!this._isLoading && this._featureItems.length > 0 && html`<div>${this.filterByMapExtent && this.getExtentNotice() || ""}${this._featureItems}</div>` || ""}</calcite-list>${this.pageSize && this._featuresCount > this.pageSize && html`<div class="width-full" slot=footer><calcite-pagination class="pagination" @calcitePaginationChange=${this.pageChanged} .pageSize=${this.pageSize} start-item=1 .totalItems=${this._featuresCount} ${ref(this._pagination)}></calcite-pagination></div>` || ""}</calcite-panel>`;
+    const t = this._canShowFullTextSearch();
+    return l`<calcite-panel>${t && l`<calcite-input class=search clearable icon=search @calciteInputChange=${this._searchTextChanged} .placeholder=${this._searchPlaceHolder} title type=search></calcite-input>` || ""}${this._isLoading && l`<calcite-loader label scale=m></calcite-loader>` || ""}${this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading && l`<calcite-notice class="notice-msg" icon=feature-details kind=info open><div slot=message>${this.filterByMapExtent ? this._translations.featureErrorMsgInCurrentMapView : this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg}</div></calcite-notice>` || ""}<calcite-list class=${E(this.textSize === "small" && !this.showFullTitle ? "overflow-hidden" : "")} label selection-appearance=border selection-mode=none ${d(this._calciteList)}>${!this._isLoading && this._featureItems.length > 0 && l`<div>${this.filterByMapExtent && this.getExtentNotice() || ""}${this._featureItems}</div>` || ""}</calcite-list>${this.pageSize && this._featuresCount > this.pageSize && l`<div class="width-full" slot=footer><calcite-pagination class="pagination" @calcitePaginationChange=${this.pageChanged} .pageSize=${this.pageSize} start-item=1 .totalItems=${this._featuresCount} ${d(this._pagination)}></calcite-pagination></div>` || ""}</calcite-panel>`;
   }
   async getWhereCondition() {
-    let whereClause = "1=1";
-    if (this.whereClause) {
-      whereClause = this.whereClause;
-    }
-    if (this._selectedLayer?.definitionExpression) {
-      whereClause = whereClause + " AND " + this._selectedLayer.definitionExpression;
-    }
-    if (this.applyLayerViewFilter) {
-      const selectedLayerView = this.mapView && await getFeatureLayerView(this.mapView, this.selectedLayerId);
-      if (selectedLayerView?.filter?.where) {
-        whereClause = whereClause + " AND " + selectedLayerView.filter.where;
-      }
+    let t = "1=1";
+    if (this.whereClause && (t = this.whereClause), this._selectedLayer?.definitionExpression && (t = t + " AND " + this._selectedLayer.definitionExpression), this.applyLayerViewFilter) {
+      const e = this.mapView && await c(this.mapView, this.selectedLayerId);
+      e?.filter?.where && (t = t + " AND " + e.filter.where);
     }
-    return whereClause;
+    return t;
   }
   async initializeFeatureItems() {
     if (this._selectedLayer) {
-      void this._pagination.value?.goTo("start");
-      this._isLoading = this.showInitialLoading ? true : false;
-      this._featureItems = await this.queryPage(0);
-      const whereCondition = await this.getWhereCondition();
-      const query = {
-        where: whereCondition,
+      this._pagination.value?.goTo("start"), this._isLoading = !!this.showInitialLoading, this._featureItems = await this.queryPage(0);
+      const e = {
+        where: await this.getWhereCondition(),
         geometry: this.filterByMapExtent ? this.mapView?.extent : null
       };
-      this._featuresCount = await this._selectedLayer.queryFeatureCount(query);
-      this._isLoading = false;
+      this._featuresCount = await this._selectedLayer.queryFeatureCount(e), this._isLoading = !1;
     }
   }
   initializeMapExtentFilter() {
-    this._filterByMapExtentHandle = reactiveUtils.when(() => this.mapView?.stationary, () => {
-      void this.initializeFeatureItems();
+    this._filterByMapExtentHandle = $.when(() => this.mapView?.stationary, () => {
+      this.initializeFeatureItems();
     }, {
-      initial: true
+      initial: !0
     });
   }
-  async pageChanged(event) {
-    this._isLoading = true;
-    if (this._highlightHandle) {
-      this._highlightHandle.remove();
-      this._highlightHandle = void 0;
-    }
-    const page = event.target.startItem - 1;
-    this._featureItems = await this.queryPage(page);
-    this._isLoading = false;
+  async pageChanged(t) {
+    this._isLoading = !0, this._highlightHandle && (this._highlightHandle.remove(), this._highlightHandle = void 0);
+    const e = t.target.startItem - 1;
+    this._featureItems = await this.queryPage(e), this._isLoading = !1;
   }
   _canShowFullTextSearch() {
-    return this._selectedLayer?.capabilities?.query?.supportsFullTextSearch && this._selectedLayer.indexes.items.filter((i) => i.indexType == "FullText").length > 0;
+    return this._selectedLayer?.capabilities?.query?.supportsFullTextSearch && this._selectedLayer.indexes.items.filter((t) => t.indexType == "FullText").length > 0;
   }
   _getFullTextSearchInfo() {
-    this._fullTextSearchInfo = [];
-    if (this._selectedLayer?.capabilities?.query?.supportsFullTextSearch) {
-      const fullTextIndexes = this._selectedLayer.indexes?.filter((i) => i.indexType == "FullText");
-      if (fullTextIndexes?.length) {
-        const onFields = [];
-        fullTextIndexes.forEach((index) => {
-          onFields.push(...index.fields.split(","));
-        });
-        const fieldAlias = [];
-        onFields.forEach((fieldName) => {
-          const fieldInfo = this._selectedLayer?.getField(fieldName.trim());
-          fieldAlias.push(fieldInfo?.alias || "");
+    if (this._fullTextSearchInfo = [], this._selectedLayer?.capabilities?.query?.supportsFullTextSearch) {
+      const t = this._selectedLayer.indexes?.filter((e) => e.indexType == "FullText");
+      if (t?.length) {
+        const e = [];
+        t.forEach((i) => {
+          e.push(...i.fields.split(","));
         });
-        this._searchPlaceHolder = this._translations.searchPlaceholder ? this._translations.searchPlaceholder.replace("{{field_names}}", fieldAlias.join(", ")) : "";
-        this._fullTextSearchInfo.push({
+        const s = [];
+        e.forEach((i) => {
+          const a = this._selectedLayer?.getField(i.trim());
+          s.push(a?.alias || "");
+        }), this._searchPlaceHolder = this._translations.searchPlaceholder ? this._translations.searchPlaceholder.replace("{{field_names}}", s.join(", ")) : "", this._fullTextSearchInfo.push({
           onFields: ["*"],
           searchTerm: "",
           searchType: "prefix"
@@ -279,231 +122,149 @@ class FeatureList extends LitElement {
       }
     }
   }
-  async _searchTextChanged(event) {
-    this._fullTextSearchInfo.forEach((searchInfo) => {
-      searchInfo.searchTerm = event.target.value;
-    });
-    await this._searchFullText();
+  async _searchTextChanged(t) {
+    this._fullTextSearchInfo.forEach((e) => {
+      e.searchTerm = t.target.value;
+    }), await this._searchFullText();
   }
   async _searchFullText() {
-    if (this._searchExpression) {
-      this._clearSearchDefinitionExpression();
-    }
-    let searchedIds = [];
-    if (this._fullTextSearchInfo) {
-      if (this._fullTextSearchInfo[0].searchTerm) {
-        const searchQueryParams = this._selectedLayer?.createQuery();
-        if (searchQueryParams) {
-          searchQueryParams.fullText = this._fullTextSearchInfo;
-          searchedIds = await this._selectedLayer?.queryObjectIds(searchQueryParams);
-          await this._updateSearchDefinitionExpression(searchedIds?.length ? searchedIds : [-1]);
-        }
-      }
+    this._searchExpression && this._clearSearchDefinitionExpression();
+    let t = [];
+    if (this._fullTextSearchInfo && this._fullTextSearchInfo[0].searchTerm) {
+      const e = this._selectedLayer?.createQuery();
+      e && (e.fullText = this._fullTextSearchInfo, t = await this._selectedLayer?.queryObjectIds(e), await this._updateSearchDefinitionExpression(t?.length ? t : [-1]));
     }
     await this.initializeFeatureItems();
   }
-  async _updateSearchDefinitionExpression(searchedIds) {
+  async _updateSearchDefinitionExpression(t) {
     if (this._selectedLayer) {
-      const defExp = this._selectedLayer.definitionExpression;
-      if (searchedIds?.length) {
-        const searchExp = `objectId in(${searchedIds})`;
-        this._selectedLayer.definitionExpression = this._searchExpression && defExp && defExp?.indexOf(this._searchExpression) > -1 ? defExp.replace(this._searchExpression, searchExp) : defExp ? `${defExp} AND (${searchExp})` : searchExp;
-        this._searchExpression = searchExp;
-      } else {
+      const e = this._selectedLayer.definitionExpression;
+      if (t?.length) {
+        const s = `objectId in(${t})`;
+        this._selectedLayer.definitionExpression = this._searchExpression && e && e?.indexOf(this._searchExpression) > -1 ? e.replace(this._searchExpression, s) : e ? `${e} AND (${s})` : s, this._searchExpression = s;
+      } else
         this._clearSearchDefinitionExpression();
-      }
     }
   }
   _clearSearchDefinitionExpression() {
     if (this._selectedLayer) {
-      const defExp = this._selectedLayer?.definitionExpression;
-      if (this._searchExpression && defExp && defExp?.indexOf(this._searchExpression) > -1) {
-        if (defExp?.indexOf(" AND (" + this._searchExpression) > -1) {
-          this._selectedLayer.definitionExpression = defExp.replace(` AND (${this._searchExpression})`, "");
-        } else {
-          this._selectedLayer.definitionExpression = defExp.replace(this._searchExpression, "");
-        }
-      }
+      const t = this._selectedLayer?.definitionExpression;
+      this._searchExpression && t && t?.indexOf(this._searchExpression) > -1 && (t?.indexOf(" AND (" + this._searchExpression) > -1 ? this._selectedLayer.definitionExpression = t.replace(` AND (${this._searchExpression})`, "") : this._selectedLayer.definitionExpression = t.replace(this._searchExpression, ""));
     }
     this._searchExpression = "";
   }
-  async featureClicked(event, selectedFeature) {
-    this.featureClick.emit();
-    this.clearHighlights();
-    if (this.highlightOnMap) {
-      const selectedFeatureObjectId = Number(event.target.value);
-      const selectedLayerView = this.mapView && await getFeatureLayerView(this.mapView, this.selectedLayerId);
-      this._highlightHandle = selectedLayerView && this.mapView ? await highlightFeatures([selectedFeatureObjectId], selectedLayerView, this.mapView, true) : void 0;
+  async featureClicked(t, e) {
+    if (this.featureClick.emit(), this.clearHighlights(), this.highlightOnMap) {
+      const s = Number(t.target.value), i = this.mapView && await c(this.mapView, this.selectedLayerId);
+      this._highlightHandle = i && this.mapView ? await x([s], i, this.mapView, !0) : void 0;
     }
-    await this.emitSelectedFeature(selectedFeature);
-  }
-  async emitSelectedFeature(graphic) {
-    const layer = graphic.layer;
-    const query = layer.createQuery();
-    query.returnGeometry = true;
-    const id = Number(graphic.getObjectId());
-    if (!Number.isNaN(id) && query) {
-      query.objectIds = [id];
-      const completeGraphic = await layer.queryFeatures(query);
-      this.featureSelect.emit(completeGraphic.features[0]);
+    await this.emitSelectedFeature(e);
+  }
+  async emitSelectedFeature(t) {
+    const e = t.layer, s = e.createQuery();
+    s.returnGeometry = !0;
+    const i = Number(t.getObjectId());
+    if (!Number.isNaN(i) && s) {
+      s.objectIds = [i];
+      const a = await e.queryFeatures(s);
+      this.featureSelect.emit(a.features[0]);
     }
   }
-  async onFeatureHover(selectedFeature) {
-    this.clearHighlights();
-    if (this.highlightOnHover) {
-      const oId = Number(selectedFeature.getObjectId());
-      const selectedLayerView = this.mapView && await getFeatureLayerView(this.mapView, this.selectedLayerId);
-      if (selectedLayerView) {
-        this._highlightHandle = selectedLayerView.highlight([oId], { name: "temporary" });
-      }
+  async onFeatureHover(t) {
+    if (this.clearHighlights(), this.highlightOnHover) {
+      const e = Number(t.getObjectId()), s = this.mapView && await c(this.mapView, this.selectedLayerId);
+      s && (this._highlightHandle = s.highlight([e], { name: "temporary" }));
     }
   }
   clearHighlights() {
-    if (this._highlightHandle) {
-      this._highlightHandle.remove();
-    }
+    this._highlightHandle && this._highlightHandle.remove();
   }
-  async queryPage(page) {
-    const featureLayer = this._selectedLayer;
-    if (featureLayer) {
-      const sortField = this.sortingInfo?.field ? this.sortingInfo.field : featureLayer.objectIdField;
-      const sortOrder = this.sortingInfo?.order ? this.sortingInfo.order : "desc";
-      const whereCondition = await this.getWhereCondition();
-      const query = {
-        start: page,
+  async queryPage(t) {
+    const e = this._selectedLayer;
+    if (e) {
+      const s = this.sortingInfo?.field ? this.sortingInfo.field : e.objectIdField, i = this.sortingInfo?.order ? this.sortingInfo.order : "desc", a = await this.getWhereCondition(), r = {
+        start: t,
         num: this.pageSize,
         outFields: ["*"],
-        returnGeometry: true,
-        where: whereCondition,
+        returnGeometry: !0,
+        where: a,
         outSpatialReference: this.mapView?.spatialReference.toJSON(),
         geometry: this.filterByMapExtent ? this.mapView?.extent : null
       };
-      if (sortField && sortOrder) {
-        query.orderByFields = [sortField.toString() + " " + sortOrder];
-      }
-      const featureSet = await featureLayer.queryFeatures(query);
-      return await this.createFeatureItem(featureSet);
-    } else {
-      return void 0;
-    }
-  }
-  async createFeatureItem(featureSet) {
-    const currentFeatures = featureSet?.features;
-    const showLikeCount = this.reportingOptions && this.reportingOptions[this.selectedLayerId].like;
-    const items = currentFeatures.map(async (feature) => {
-      const popupTitle = this.mapView?.map && await this._popupUtils?.getPopupTitle(feature, this.mapView.map) || "";
-      let userInfo;
-      let featureSymbol;
-      if (this.showUserImageInList) {
-        const creatorField = this._selectedLayer?.editFieldsInfo?.creatorField;
-        if (creatorField) {
-          userInfo = await this.getUserInformation(feature);
-        }
-      }
-      if (this.showFeatureSymbol) {
-        featureSymbol = await this.getFeatureSymbol(feature);
-      }
-      if (showLikeCount) {
-        void this.getAbbreviatedLikeCount(feature);
-      }
-      return this.getFeatureItem(feature, popupTitle, featureSymbol, userInfo);
+      s && i && (r.orderByFields = [s.toString() + " " + i]);
+      const n = await e.queryFeatures(r);
+      return await this.createFeatureItem(n);
+    } else
+      return;
+  }
+  async createFeatureItem(t) {
+    const e = t?.features, s = this.reportingOptions && this.reportingOptions[this.selectedLayerId].like, i = e.map(async (a) => {
+      const r = this.mapView?.map && await this._popupUtils?.getPopupTitle(a, this.mapView.map) || "";
+      let n, o;
+      return this.showUserImageInList && this._selectedLayer?.editFieldsInfo?.creatorField && (n = await this.getUserInformation(a)), this.showFeatureSymbol && (o = await this.getFeatureSymbol(a)), s && this.getAbbreviatedLikeCount(a), this.getFeatureItem(a, r, o, n);
     });
-    return Promise.all(items);
+    return Promise.all(i);
   }
   getExtentNotice() {
-    return html`<calcite-notice class="notice-msg" icon=extent-filter kind=brand open scale=s><div slot=message>${this._translations.extentFilterMsg}</div></calcite-notice>`;
-  }
-  getAbbreviatedLikeCount(feature) {
-    const selectedLayer = this._selectedLayer;
-    if (selectedLayer) {
-      const likeField = this.reportingOptions && this.reportingOptions[selectedLayer.id].likeField;
-      selectedLayer.fields.forEach((eachField) => {
-        if (this._validFieldTypes.indexOf(eachField.type) > -1) {
-          if (eachField.name === likeField && this.reportingOptions && this.reportingOptions[selectedLayer.id].like) {
-            this._likeFieldAvailable = true;
-            let likes = feature.attributes[likeField] || 0;
-            if (likes > 999 && this._translations.millions_value && this._translations.thousands_value) {
-              likes = likes > 999999 ? this._translations.millions_value.replace("{{millions_value}}", Math.floor(likes / 1e6).toString()) : this._translations.thousands_value.replace("{{thousands_value}}", Math.floor(likes / 1e3).toString());
-            }
-            this._abbreviatedLikeCount = likes;
-          }
+    return l`<calcite-notice class="notice-msg" icon=extent-filter kind=brand open scale=s><div slot=message>${this._translations.extentFilterMsg}</div></calcite-notice>`;
+  }
+  getAbbreviatedLikeCount(t) {
+    const e = this._selectedLayer;
+    if (e) {
+      const s = this.reportingOptions && this.reportingOptions[e.id].likeField;
+      e.fields.forEach((i) => {
+        if (this._validFieldTypes.indexOf(i.type) > -1 && i.name === s && this.reportingOptions && this.reportingOptions[e.id].like) {
+          this._likeFieldAvailable = !0;
+          let a = t.attributes[s] || 0;
+          a > 999 && this._translations.millions_value && this._translations.thousands_value && (a = a > 999999 ? this._translations.millions_value.replace("{{millions_value}}", Math.floor(a / 1e6).toString()) : this._translations.thousands_value.replace("{{thousands_value}}", Math.floor(a / 1e3).toString())), this._abbreviatedLikeCount = a;
         }
       });
     }
   }
-  getFeatureItem(selectedFeature, popupTitle, featureSymbol, userInfo) {
+  getFeatureItem(t, e, s, i) {
     if (this._selectedLayer?.id && this._calciteList.value) {
-      const oId = selectedFeature.attributes[this._selectedLayer.objectIdField].toString();
-      popupTitle = popupTitle ?? oId;
-      const formattedLikeCount = Number(selectedFeature.attributes[this.reportingOptions?.[this._selectedLayer.id].likeField || ""]).toLocaleString();
-      const popupTitleClass = this.textSize === "small" && !this.showFullTitle ? "feature-list-popup-title-small-ellipsis" : this.textSize === "small" ? "feature-list-popup-title-small" : "feature-list-popup-title";
-      const deductedWidth = this.showUserImageInList ? 115 : 65;
-      const width = this._calciteList.value.offsetWidth - deductedWidth;
-      return html`<calcite-list-item @mouseleave=${() => {
-        void this.clearHighlights();
+      const a = t.attributes[this._selectedLayer.objectIdField].toString();
+      e = e ?? a;
+      const r = Number(t.attributes[this.reportingOptions?.[this._selectedLayer.id].likeField || ""]).toLocaleString(), n = this.textSize === "small" && !this.showFullTitle ? "feature-list-popup-title-small-ellipsis" : this.textSize === "small" ? "feature-list-popup-title-small" : "feature-list-popup-title", o = this.showUserImageInList ? 115 : 65, p = this._calciteList.value.offsetWidth - o;
+      return l`<calcite-list-item @mouseleave=${() => {
+        this.clearHighlights();
       }} @mouseover=${() => {
-        void this.onFeatureHover(selectedFeature);
-      }} @calciteListItemSelect=${(e) => {
-        void this.featureClicked(e, selectedFeature);
-      }} .value=${oId}>${this.showUserImageInList && html`<calcite-avatar class=profile-img .fullName=${userInfo?.fullName} scale=m slot=content-start .thumbnail=${userInfo?.userProfileUrl} .userId=${userInfo?.id} .username=${userInfo?.fullName ? userInfo.username : void 0}></calcite-avatar>` || ""}${this.showFeatureSymbol && featureSymbol && html`<div class=feature-symbol slot=content-start ${ref((el) => el && el.replaceChildren(featureSymbol))}></div>` || ""}<div class=${`popup-title ${popupTitleClass}`} slot=content-start style=${safeStyleMap({ maxWidth: this.textSize === "large" ? "none" : `${width}px` })}>${popupTitle}</div>${this._likeFieldAvailable && html`<div class=like-container id=${oId.concat("like") ?? nothing} slot=content-end><span>${this._abbreviatedLikeCount}</span><calcite-icon icon=thumbs-up scale=s></calcite-icon><calcite-tooltip overlay-positioning=fixed placement=top .referenceElement=${oId.concat("like")}>${formattedLikeCount}</calcite-tooltip></div>` || ""}<calcite-icon flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon></calcite-list-item>`;
-    } else {
-      return void 0;
-    }
-  }
-  async getUserInformation(feature) {
-    let creatorField = this._selectedLayer?.editFieldsInfo?.creatorField;
-    if (creatorField) {
-      if (feature.attributes.hasOwnProperty(creatorField.toLowerCase())) {
-        creatorField = creatorField.toLowerCase();
-      } else if (feature.attributes.hasOwnProperty(creatorField.toUpperCase())) {
-        creatorField = creatorField.toUpperCase();
-      }
-      let url = `${config.portalUrl}/sharing/rest/community/users/${feature.attributes[creatorField]}?f=json&returnUserLicensedItems=true`;
-      const userToken = this.mapView?.map?.portalItem.portal?.credential?.token;
-      if (userToken) {
-        url += `&token=${userToken}`;
-      }
-      const data = await fetch(url);
-      const userInfo = await data.json();
-      const userName = userInfo?.username ?? feature.attributes[creatorField];
-      let userProfileUrl = `${config.portalUrl}/sharing/rest/community/users/${userName}/info/blob.png`;
-      if (userInfo?.access && userToken) {
-        userProfileUrl += `?token=${userToken}`;
-      }
-      userInfo.userProfileUrl = userProfileUrl;
-      return userInfo;
-    } else {
-      return void 0;
-    }
-  }
-  async getFeatureSymbol(feature) {
-    const nodeHtml = document.createElement("div");
-    await symbolUtils?.getDisplayedSymbol(feature).then(async (symbol) => {
-      symbol && await symbolUtils?.renderPreviewHTML(symbol, {
-        node: nodeHtml
-      });
-      if (nodeHtml.children?.length) {
-        const imgOrSvgElm = nodeHtml.children[0];
-        if (imgOrSvgElm) {
-          const height = Number(imgOrSvgElm.getAttribute("height"));
-          const width = Number(imgOrSvgElm.getAttribute("width"));
-          if (width > 30) {
-            nodeHtml.setAttribute("width", "30");
-            imgOrSvgElm.setAttribute("width", "30");
-          }
-          if (height > 30) {
-            nodeHtml.setAttribute("height", "30");
-            imgOrSvgElm.setAttribute("height", "30");
-          }
-          imgOrSvgElm.setAttribute("viewBox", `0 0 ${width} ${height}`);
-          nodeHtml.setAttribute("viewBox", `0 0 ${width} ${height}`);
+        this.onFeatureHover(t);
+      }} @calciteListItemSelect=${(h) => {
+        this.featureClicked(h, t);
+      }} .value=${a}>${this.showUserImageInList && l`<calcite-avatar class=profile-img .fullName=${i?.fullName} scale=m slot=content-start .thumbnail=${i?.userProfileUrl} .userId=${i?.id} .username=${i?.fullName ? i.username : void 0}></calcite-avatar>` || ""}${this.showFeatureSymbol && s && l`<div class=feature-symbol slot=content-start ${d((h) => h && h.replaceChildren(s))}></div>` || ""}<div class=${`popup-title ${n}`} slot=content-start style=${S({ maxWidth: this.textSize === "large" ? "none" : `${p}px` })}>${e}</div>${this._likeFieldAvailable && l`<div class=like-container id=${a.concat("like") ?? v} slot=content-end><span>${this._abbreviatedLikeCount}</span><calcite-icon icon=thumbs-up scale=s></calcite-icon><calcite-tooltip overlay-positioning=fixed placement=top .referenceElement=${a.concat("like")}>${r}</calcite-tooltip></div>` || ""}<calcite-icon flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon></calcite-list-item>`;
+    } else
+      return;
+  }
+  async getUserInformation(t) {
+    let e = this._selectedLayer?.editFieldsInfo?.creatorField;
+    if (e) {
+      t.attributes.hasOwnProperty(e.toLowerCase()) ? e = e.toLowerCase() : t.attributes.hasOwnProperty(e.toUpperCase()) && (e = e.toUpperCase());
+      let s = `${m.portalUrl}/sharing/rest/community/users/${t.attributes[e]}?f=json&returnUserLicensedItems=true`;
+      const i = this.mapView?.map?.portalItem.portal?.credential?.token;
+      i && (s += `&token=${i}`);
+      const r = await (await fetch(s)).json(), n = r?.username ?? t.attributes[e];
+      let o = `${m.portalUrl}/sharing/rest/community/users/${n}/info/blob.png`;
+      return r?.access && i && (o += `?token=${i}`), r.userProfileUrl = o, r;
+    } else
+      return;
+  }
+  async getFeatureSymbol(t) {
+    const e = document.createElement("div");
+    return await y?.getDisplayedSymbol(t).then(async (s) => {
+      if (s && await y?.renderPreviewHTML(s, {
+        node: e
+      }), e.children?.length) {
+        const i = e.children[0];
+        if (i) {
+          const a = Number(i.getAttribute("height")), r = Number(i.getAttribute("width"));
+          r > 30 && (e.setAttribute("width", "30"), i.setAttribute("width", "30")), a > 30 && (e.setAttribute("height", "30"), i.setAttribute("height", "30")), i.setAttribute("viewBox", `0 0 ${r} ${a}`), e.setAttribute("viewBox", `0 0 ${r} ${a}`);
         }
       }
-    });
-    return nodeHtml;
+    }), e;
   }
 }
-customElement("feature-list", FeatureList);
+_("feature-list", T);
 export {
-  FeatureList
+  T as FeatureList
 };