@esri/solutions-components 0.10.12 → 0.10.13

package/dist/components/feature-list2.js

@@ -8,25 +8,26 @@ import { l as loadModules } from './loadModules.js';
 import { P as PopupUtils } from './popupUtils.js';
 import { g as getLayerOrTable, c as getFeatureLayerView, h as highlightFeatures } from './mapViewUtils.js';
 import { g as getLocaleComponentStrings } from './locale.js';
-import { d as defineCustomElement$h } from './action.js';
-import { d as defineCustomElement$g } from './action-menu.js';
-import { d as defineCustomElement$f } from './avatar.js';
-import { d as defineCustomElement$e } from './filter2.js';
-import { d as defineCustomElement$d } from './handle.js';
-import { d as defineCustomElement$c } from './icon.js';
-import { d as defineCustomElement$b } from './input.js';
-import { d as defineCustomElement$a } from './list.js';
-import { d as defineCustomElement$9 } from './list-item.js';
-import { d as defineCustomElement$8 } from './loader.js';
-import { d as defineCustomElement$7 } from './notice.js';
-import { d as defineCustomElement$6 } from './pagination.js';
-import { d as defineCustomElement$5 } from './panel.js';
-import { d as defineCustomElement$4 } from './popover.js';
-import { d as defineCustomElement$3 } from './progress.js';
-import { d as defineCustomElement$2 } from './scrim.js';
-import { d as defineCustomElement$1 } from './stack.js';
+import { d as defineCustomElement$i } from './action.js';
+import { d as defineCustomElement$h } from './action-menu.js';
+import { d as defineCustomElement$g } from './avatar.js';
+import { d as defineCustomElement$f } from './filter2.js';
+import { d as defineCustomElement$e } from './handle.js';
+import { d as defineCustomElement$d } from './icon.js';
+import { d as defineCustomElement$c } from './input.js';
+import { d as defineCustomElement$b } from './list.js';
+import { d as defineCustomElement$a } from './list-item.js';
+import { d as defineCustomElement$9 } from './loader.js';
+import { d as defineCustomElement$8 } from './notice.js';
+import { d as defineCustomElement$7 } from './pagination.js';
+import { d as defineCustomElement$6 } from './panel.js';
+import { d as defineCustomElement$5 } from './popover.js';
+import { d as defineCustomElement$4 } from './progress.js';
+import { d as defineCustomElement$3 } from './scrim.js';
+import { d as defineCustomElement$2 } from './stack.js';
+import { d as defineCustomElement$1 } from './tooltip.js';
 
-const featureListCss = ":host{display:block}.width-full{width:100%}.pagination{display:flex;justify-content:center}.error-msg{padding:10px;width:calc(100% - 20px)}.feature-list-popup-title{font-weight:500;white-space:pre-line}.feature-list-popup-title-small{font-size:small;white-space:pre-line}.feature-list-popup-title-padding{padding:10px 12px}.feature-list-popup-title-padding-reduced{padding:10px 0}.profile-img{margin:0 0.75rem;min-width:32px}";
+const featureListCss = ":host{display:block}.width-full{width:100%}.pagination{display:flex;justify-content:center}.error-msg{padding:10px;width:calc(100% - 20px)}.feature-list-popup-title{font-weight:500;white-space:pre-line}.feature-list-popup-title-small{font-size:small;white-space:pre-line}.feature-list-popup-title-padding{padding:10px 12px}.feature-list-popup-title-padding-reduced{padding:10px 0}.profile-img{margin:0 0.75rem;min-width:32px}.like-container{display:flex;align-items:center;gap:5px;color:gray !important;font-style:italic}.feature-symbol{padding:3px 10px;min-width:30px;display:flex;justify-content:center}";
 const FeatureListStyle0 = featureListCss;
 
 const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends HTMLElement {
@@ -46,6 +47,9 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
         this.showInitialLoading = true;
         this.showErrorWhenNoFeatures = true;
         this.showUserImageInList = false;
+        this.showFeatureSymbol = false;
+        this.applyLayerViewFilter = false;
+        this.reportingOptions = undefined;
         this._featureItems = [];
         this._featuresCount = 0;
         this._isLoading = false;
@@ -67,6 +71,11 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
      * Esri config
      */
     esriConfig;
+    /**
+     * "esri/symbols/support/symbolUtils": https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-support-symbolUtils.html
+     * Symbol utils
+     */
+    symbolUtils;
     /**
      * IPopupUtils: To fetch the list label using popup titles
      */
@@ -83,6 +92,18 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
      * HTMLCalcitePaginationElement: Calcite pagination element instance
      */
     _pagination;
+    /**
+     * string[]: Valid field types for like
+     */
+    _validFieldTypes = ["small-integer", "integer", "big-integer", "single", "long"];
+    /**
+     * string: Abbrivated like count of the feature
+     */
+    _abbreviatedLikeCount;
+    /**
+     * boolean: When true configured like field is available in selected layer
+     */
+    _likeFieldAvailable = false;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -156,9 +177,9 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
      * Renders the component.
      */
     render() {
-        return (h("calcite-panel", { key: 'ace7bcabf497e9a61d261fd7ea29dc664ee0a526', "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { key: '675c7f5be7f8456954acdf353f357bac6145c390', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
-            h("calcite-notice", { key: 'b2e6537acdec801ef066a74c78a2c4a13dbbc44b', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: '7697470234b396a904906b80e4fc8df3a0cc732b', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: 'd2b40c9a5e1bf009cb78d640351a16b24711ff59', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
-            h("div", { key: '15b0dae0fb914faf053a4b0cbea6e35ef7abc038', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: '04f8eb02535f8cff8de0c111ac2d4bfa883ac128', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, ref: el => this._pagination = el, "start-item": "1", "total-items": this._featuresCount }))));
+        return (h("calcite-panel", { key: 'b84cbd9d8c0f4d9d84fe7a49d149b67e88e46c53', "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { key: '91ee86a3223b55141206be0d3f20bca1b777e4db', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
+            h("calcite-notice", { key: '3c3b4a35c45715a86bd17630e8f3f9b566592c27', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: '63a35389ac64f66c706fa05e92fb8f1af8dd0b69', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: 'a237f97a0d286af17cce837bfbdd3c0d868ea023', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
+            h("div", { key: '9cb166b5095167a2004e93217240bea6789e9039', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: 'a413b26dd30fdc89be1d65ef06995604f1430a18', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, ref: el => this._pagination = el, "start-item": "1", "total-items": this._featuresCount }))));
     }
     //--------------------------------------------------------------------------
     //
@@ -166,23 +187,25 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
     //
     //--------------------------------------------------------------------------
     /**
-   * Load esri javascript api modules
-   * @returns Promise resolving when function is done
-   * @protected
-   */
+     * Load esri javascript api modules
+     * @returns Promise resolving when function is done
+     * @protected
+     */
     async initModules() {
-        const [Color, esriConfig] = await loadModules([
+        const [Color, esriConfig, symbolUtils] = await loadModules([
             "esri/Color",
             "esri/config",
+            "esri/symbols/support/symbolUtils"
         ]);
         this.Color = Color;
         this.esriConfig = esriConfig;
+        this.symbolUtils = symbolUtils;
     }
     /**
      * Return the where condition string considering the defined where clause and layer's definition expression
      * @protected
      */
-    getWhereCondition() {
+    async getWhereCondition() {
         //By Default load all the features
         let whereClause = '1=1';
         //if where clause is defined use it
@@ -193,6 +216,13 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
         if (this._selectedLayer?.definitionExpression) {
             whereClause = whereClause + ' AND ' + this._selectedLayer.definitionExpression;
         }
+        // if layerview has any applied filter, use it
+        if (this.applyLayerViewFilter) {
+            const selectedLayerView = await getFeatureLayerView(this.mapView, this.selectedLayerId);
+            if (selectedLayerView?.filter?.where) {
+                whereClause = whereClause + ' AND ' + selectedLayerView.filter.where;
+            }
+        }
         return whereClause;
     }
     /**
@@ -204,8 +234,9 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
             void this._pagination?.goTo("start");
             this._isLoading = this.showInitialLoading;
             this._featureItems = await this.queryPage(0);
+            const whereCondition = await this.getWhereCondition();
             const query = {
-                where: this.getWhereCondition()
+                where: whereCondition
             };
             this._featuresCount = await this._selectedLayer.queryFeatureCount(query);
             this._isLoading = false;
@@ -291,12 +322,13 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
         const featureLayer = this._selectedLayer;
         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,
             num: this.pageSize,
             outFields: ["*"],
             returnGeometry: true,
-            where: this.getWhereCondition(),
+            where: whereCondition,
             outSpatialReference: this.mapView.spatialReference.toJSON()
         };
         //sort only when sort field and order is valid
@@ -314,10 +346,12 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
      */
     async createFeatureItem(featureSet) {
         const currentFeatures = featureSet?.features;
+        const showLikeCount = this.reportingOptions && this.reportingOptions[this.selectedLayerId].like;
         const items = currentFeatures.map(async (feature) => {
             const popupTitle = await this._popupUtils.getPopupTitle(feature, this.mapView.map);
             //fetch the feature creator user info to show the creator user image
             let userInfo;
+            let featureSymbol;
             if (this.showUserImageInList) {
                 const creatorField = this._selectedLayer.editFieldsInfo?.creatorField.toLowerCase();
                 // if feature's creator field is present then only we can fetch the information of user
@@ -325,10 +359,37 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
                     userInfo = await this.getUserInformation(feature, creatorField);
                 }
             }
-            return this.getFeatureItem(feature, popupTitle, userInfo);
+            if (this.showFeatureSymbol) {
+                featureSymbol = await this.getFeatureSymbol(feature);
+            }
+            if (showLikeCount) {
+                void this.getAbbreviatedLikeCount(feature);
+            }
+            return this.getFeatureItem(feature, popupTitle, featureSymbol, userInfo);
         });
         return Promise.all(items);
     }
+    /**
+     * Displays the abbrivated like count on the feature list
+     * @param feature feature of the layer
+     * @protected
+     */
+    getAbbreviatedLikeCount(feature) {
+        const selectedLayer = this._selectedLayer;
+        const likeField = this.reportingOptions[selectedLayer.id].likeField;
+        selectedLayer.fields.forEach((eachField) => {
+            if (this._validFieldTypes.indexOf(eachField.type) > -1) {
+                if (eachField.name === likeField && this.reportingOptions[selectedLayer.id].like) {
+                    this._likeFieldAvailable = true;
+                    let likes = feature.attributes[likeField] || 0;
+                    if (likes > 999) {
+                        likes = likes > 999999 ? this._translations.millionsAbbreviation.replace("{{abbreviated_value}}", Math.floor(likes / 1000000).toString()) : this._translations.thousandsAbbreviation.replace("{{abbreviated_value}}", Math.floor(likes / 1000).toString());
+                    }
+                    this._abbreviatedLikeCount = likes;
+                }
+            }
+        });
+    }
     /**
      * Get each feature item
      * @param selectedFeature Each individual feature instance to be listed
@@ -336,15 +397,19 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
      * @returns individual feature item to be rendered
      * @protected
      */
-    getFeatureItem(selectedFeature, popupTitle, userInfo) {
+    getFeatureItem(selectedFeature, popupTitle, featureSymbol, userInfo) {
         //get the object id value of the feature
         const oId = selectedFeature.attributes[this._selectedLayer.objectIdField].toString();
         //use object id if popupTitle is null or undefined
         popupTitle = popupTitle ?? oId;
+        // get the formatted like count
+        const formattedLikeCount = Number(selectedFeature.attributes[this.reportingOptions?.[this._selectedLayer.id].likeField]).toLocaleString();
         const popupTitleClass = this.textSize === 'small' ? 'feature-list-popup-title-small' : 'feature-list-popup-title';
-        const popupTitlePaddingClass = this.showUserImageInList ? 'feature-list-popup-title-padding-reduced' : 'feature-list-popup-title-padding';
+        const popupTitlePaddingClass = this.showUserImageInList || this.showFeatureSymbol ? 'feature-list-popup-title-padding-reduced' : 'feature-list-popup-title-padding';
         return (h("calcite-list-item", { onCalciteListItemSelect: (e) => { void this.featureClicked(e, selectedFeature); }, onMouseLeave: () => { void this.clearHighlights(); }, onMouseOver: () => { void this.onFeatureHover(selectedFeature); }, value: oId }, this.showUserImageInList &&
-            h("calcite-avatar", { class: 'profile-img', "full-name": userInfo?.fullName, id: userInfo?.id, scale: "m", slot: "content-start", thumbnail: userInfo?.userProfileUrl, username: userInfo?.username }), h("div", { class: `${popupTitleClass} ${popupTitlePaddingClass}`, slot: "content-start" }, popupTitle), h("calcite-icon", { flipRtl: true, icon: "chevron-right", scale: "s", slot: "content-end" })));
+            h("calcite-avatar", { class: 'profile-img', "full-name": userInfo?.fullName, id: userInfo?.id, scale: "m", slot: "content-start", thumbnail: userInfo?.userProfileUrl, username: userInfo?.username }), this.showFeatureSymbol &&
+            h("div", { class: 'feature-symbol', ref: (el) => el && el.appendChild(featureSymbol), slot: "content-start" }), h("div", { class: `${popupTitleClass} ${popupTitlePaddingClass}`, slot: "content-start" }, popupTitle), this._likeFieldAvailable &&
+            h("div", { class: "like-container", id: oId.concat("like"), slot: "content-end" }, h("span", null, this._abbreviatedLikeCount), h("calcite-icon", { icon: "thumbs-up", scale: 's' }), h("calcite-tooltip", { "reference-element": oId.concat("like") }, formattedLikeCount)), h("calcite-icon", { flipRtl: true, icon: "chevron-right", scale: "s", slot: "content-end" })));
     }
     /**
      *
@@ -371,6 +436,35 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
         userInfo.userProfileUrl = userProfileUrl;
         return userInfo;
     }
+    /**
+     * Creates a feature symbology
+     * @param feature Each individual feature
+     * @returns Feature symbology
+     * @protected
+     */
+    async getFeatureSymbol(feature) {
+        const nodeHtml = document.createElement('div');
+        await this.symbolUtils.getDisplayedSymbol(feature).then(async (symbol) => {
+            symbol && await this.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) {
+                        imgOrSvgElm.setAttribute('width', '30');
+                    }
+                    else if (width < 19) {
+                        imgOrSvgElm.setAttribute('width', '20');
+                    }
+                    imgOrSvgElm.setAttribute('viewBox', `0 0 ${width} ${height}`);
+                }
+            }
+        });
+        return nodeHtml;
+    }
     /**
      * Fetches the component's translations
      * @returns Promise when complete
@@ -399,6 +493,9 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
         "showInitialLoading": [4, "show-initial-loading"],
         "showErrorWhenNoFeatures": [4, "show-error-when-no-features"],
         "showUserImageInList": [4, "show-user-image-in-list"],
+        "showFeatureSymbol": [4, "show-feature-symbol"],
+        "applyLayerViewFilter": [4, "apply-layer-view-filter"],
+        "reportingOptions": [16],
         "_featureItems": [32],
         "_featuresCount": [32],
         "_isLoading": [32],
@@ -413,7 +510,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["feature-list", "calcite-action", "calcite-action-menu", "calcite-avatar", "calcite-filter", "calcite-handle", "calcite-icon", "calcite-input", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-notice", "calcite-pagination", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-stack"];
+    const components = ["feature-list", "calcite-action", "calcite-action-menu", "calcite-avatar", "calcite-filter", "calcite-handle", "calcite-icon", "calcite-input", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-notice", "calcite-pagination", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-stack", "calcite-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "feature-list":
             if (!customElements.get(tagName)) {
@@ -422,85 +519,90 @@ function defineCustomElement() {
             break;
         case "calcite-action":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$i();
             }
             break;
         case "calcite-action-menu":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$h();
             }
             break;
         case "calcite-avatar":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$g();
             }
             break;
         case "calcite-filter":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$f();
             }
             break;
         case "calcite-handle":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$e();
             }
             break;
         case "calcite-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$d();
             }
             break;
         case "calcite-input":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$c();
             }
             break;
         case "calcite-list":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "calcite-list-item":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "calcite-loader":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "calcite-notice":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "calcite-pagination":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "calcite-panel":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "calcite-popover":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "calcite-progress":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "calcite-scrim":
             if (!customElements.get(tagName)) {
-                defineCustomElement$2();
+                defineCustomElement$3();
             }
             break;
         case "calcite-stack":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "calcite-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

package/dist/components/layer-list2.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
-import { d as getMapLayerHash, a as getAllLayers } from './mapViewUtils.js';
+import { d as getMapLayerHash, a as getAllLayers, c as getFeatureLayerView } from './mapViewUtils.js';
 import { f as formatNumber, g as getLocaleComponentStrings } from './locale.js';
 import { d as defineCustomElement$c } from './action.js';
 import { d as defineCustomElement$b } from './filter2.js';
@@ -32,6 +32,7 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
         this.layers = undefined;
         this.showFeatureCount = true;
         this.showNextIcon = false;
+        this.applyLayerViewFilter = false;
         this._noLayersToDisplay = false;
         this._mapLayerIds = [];
         this._isLoading = false;
@@ -102,9 +103,9 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
      * Renders the component.
      */
     render() {
-        return (h(Fragment, { key: '9366302a704c1dbdd7a65aef5c43d0ad84a44b23' }, this._isLoading && h("calcite-loader", { key: '69974a23fd42bc37ef13816efbe6d06e28cb2749', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
-            h("calcite-notice", { key: 'a93abb55b4db09727b3634cb1935e482c377d662', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { key: 'b9046685353b8894e6c6094cff47fab7a8e07ffa', slot: "title" }, this._translations.error), h("div", { key: '90a052e1d80779a09a32fdd35563a1ce21d582e0', slot: "message" }, this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
-            h("calcite-list", { key: '709c1b8edd5710a2476ecef638199c2f929b4165', "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
+        return (h(Fragment, { key: '19f68b9a5d0b6c85832544e4281e1c4a1707ba86' }, this._isLoading && h("calcite-loader", { key: 'c908f311165f8f520f267a0dcde0bd954863ba6b', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
+            h("calcite-notice", { key: '56dfb252f998333ed6a671cccddd5683f08ad63d', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { key: 'a27ad45ac2b1984152af5a80da36583f7c375be6', slot: "title" }, this._translations.error), h("div", { key: 'a9466cb560b6ee2c72ebd18130ce21371f9e7cdf', slot: "message" }, this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
+            h("calcite-list", { key: '40e54ba92d2f48a97dd0987808f4b7fdefd266bb', "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
     }
     //--------------------------------------------------------------------------
     //
@@ -131,10 +132,20 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
         this._layerItemsHash = await getMapLayerHash(this.mapView, true);
         const allMapLayers = await getAllLayers(this.mapView);
         // eslint-disable-next-line @typescript-eslint/no-misused-promises
-        allMapLayers.forEach(async (eachLayer) => {
+        for (const eachLayer of allMapLayers) {
             if (eachLayer?.type === "feature") {
                 if (this.showFeatureCount) {
                     const q = eachLayer.createQuery();
+                    //if layer has definitionExpression append it to the where clause
+                    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;
+                        }
+                    }
                     const result = eachLayer.queryFeatureCount(q);
                     def.push(result);
                     void result.then(async (resCount) => {
@@ -147,7 +158,7 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
                     });
                 }
             }
-        });
+        }
         await Promise.all(def).then(() => {
             const editableLayerIds = this.getLayersToBeShownInList(this._layerItemsHash);
             this._mapLayerIds = editableLayerIds.reverse();
@@ -224,6 +235,7 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
         "layers": [16],
         "showFeatureCount": [4, "show-feature-count"],
         "showNextIcon": [4, "show-next-icon"],
+        "applyLayerViewFilter": [4, "apply-layer-view-filter"],
         "_noLayersToDisplay": [32],
         "_mapLayerIds": [32],
         "_isLoading": [32],

package/dist/components/popupUtils.js

@@ -72,7 +72,7 @@ class PopupUtils {
             }
         }
         //Format field values
-        if (layer.popupTemplate.fieldInfos) {
+        if (layer.popupTemplate?.fieldInfos) {
             layer.fields.forEach((field) => {
                 const attributeValue = graphic.attributes[field.name];
                 //get the field info from popupTemplate

package/dist/esm/calcite-alert_4.entry.js

@@ -13,7 +13,7 @@ import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as
 import { K as KindIcons } from './resources-5ba50a1d.js';
 import { g as getLocaleComponentStrings, l as loadModules } from './locale-b1d53fb1.js';
 import { a as getAllLayers } from './mapViewUtils-3e3d33ea.js';
-import { P as PopupUtils } from './popupUtils-00c655fb.js';
+import { P as PopupUtils } from './popupUtils-349a26e6.js';
 import './guid-4c746a7f.js';
 import './resources-defbb49f.js';
 import './browser-552eb2d0.js';