@esri/solutions-components 0.10.12 → 0.10.13

package/dist/esm/feature-list.entry.js

@@ -5,7 +5,7 @@
  */
 import { r as registerInstance, c as createEvent, g as getElement, h } from './index-b793d9aa.js';
 import { l as loadModules, g as getLocaleComponentStrings } from './locale-b1d53fb1.js';
-import { P as PopupUtils } from './popupUtils-00c655fb.js';
+import { P as PopupUtils } from './popupUtils-349a26e6.js';
 import { g as getLayerOrTable, c as getFeatureLayerView, h as highlightFeatures } from './mapViewUtils-3e3d33ea.js';
 import './esri-loader-c6842c6b.js';
 import './_commonjsHelpers-089957fe.js';
@@ -14,7 +14,7 @@ import './solution-resource-966f8511.js';
 import './restHelpersGet-788d7f7b.js';
 import './interfaces-659e3836.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 = class {
@@ -33,6 +33,9 @@ const FeatureList = class {
         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;
@@ -54,6 +57,11 @@ const FeatureList = class {
      * 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
      */
@@ -70,6 +78,18 @@ const FeatureList = class {
      * 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
@@ -143,9 +163,9 @@ const FeatureList = class {
      * 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 }))));
     }
     //--------------------------------------------------------------------------
     //
@@ -153,23 +173,25 @@ const FeatureList = class {
     //
     //--------------------------------------------------------------------------
     /**
-   * 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
@@ -180,6 +202,13 @@ const FeatureList = class {
         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;
     }
     /**
@@ -191,8 +220,9 @@ const FeatureList = class {
             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;
@@ -278,12 +308,13 @@ const FeatureList = class {
         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
@@ -301,10 +332,12 @@ const FeatureList = class {
      */
     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
@@ -312,10 +345,37 @@ const FeatureList = class {
                     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
@@ -323,15 +383,19 @@ const FeatureList = class {
      * @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" })));
     }
     /**
      *
@@ -358,6 +422,35 @@ const FeatureList = class {
         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