@esri/solutions-components 0.10.12 → 0.10.13

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

@@ -9,7 +9,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5a0af791.js');
 const locale = require('./locale-a09603ee.js');
-const popupUtils = require('./popupUtils-92e52dbf.js');
+const popupUtils = require('./popupUtils-47bd97e7.js');
 const mapViewUtils = require('./mapViewUtils-8d4da732.js');
 require('./esri-loader-08dc41bd.js');
 require('./_commonjsHelpers-baf43783.js');
@@ -18,7 +18,7 @@ require('./solution-resource-16c7510c.js');
 require('./restHelpersGet-88ba0e25.js');
 require('./interfaces-09c4c40e.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 {
@@ -37,6 +37,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;
@@ -58,6 +61,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
      */
@@ -74,6 +82,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
@@ -147,9 +167,9 @@ const FeatureList = class {
      * Renders the component.
      */
     render() {
-        return (index.h("calcite-panel", { key: 'ace7bcabf497e9a61d261fd7ea29dc664ee0a526', "full-height": true, "full-width": true }, this._isLoading && index.h("calcite-loader", { key: '675c7f5be7f8456954acdf353f357bac6145c390', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
-            index.h("calcite-notice", { key: 'b2e6537acdec801ef066a74c78a2c4a13dbbc44b', class: "error-msg", icon: "feature-details", kind: "info", open: true }, index.h("div", { key: '7697470234b396a904906b80e4fc8df3a0cc732b', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), index.h("calcite-list", { key: 'd2b40c9a5e1bf009cb78d640351a16b24711ff59', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
-            index.h("div", { key: '15b0dae0fb914faf053a4b0cbea6e35ef7abc038', class: "width-full", slot: "footer" }, index.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 (index.h("calcite-panel", { key: 'b84cbd9d8c0f4d9d84fe7a49d149b67e88e46c53', "full-height": true, "full-width": true }, this._isLoading && index.h("calcite-loader", { key: '91ee86a3223b55141206be0d3f20bca1b777e4db', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
+            index.h("calcite-notice", { key: '3c3b4a35c45715a86bd17630e8f3f9b566592c27', class: "error-msg", icon: "feature-details", kind: "info", open: true }, index.h("div", { key: '63a35389ac64f66c706fa05e92fb8f1af8dd0b69', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), index.h("calcite-list", { key: 'a237f97a0d286af17cce837bfbdd3c0d868ea023', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
+            index.h("div", { key: '9cb166b5095167a2004e93217240bea6789e9039', class: "width-full", slot: "footer" }, index.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 }))));
     }
     //--------------------------------------------------------------------------
     //
@@ -157,23 +177,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 locale.loadModules([
+        const [Color, esriConfig, symbolUtils] = await locale.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
@@ -184,6 +206,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 mapViewUtils.getFeatureLayerView(this.mapView, this.selectedLayerId);
+            if (selectedLayerView?.filter?.where) {
+                whereClause = whereClause + ' AND ' + selectedLayerView.filter.where;
+            }
+        }
         return whereClause;
     }
     /**
@@ -195,8 +224,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;
@@ -282,12 +312,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
@@ -305,10 +336,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
@@ -316,10 +349,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
@@ -327,15 +387,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 (index.h("calcite-list-item", { onCalciteListItemSelect: (e) => { void this.featureClicked(e, selectedFeature); }, onMouseLeave: () => { void this.clearHighlights(); }, onMouseOver: () => { void this.onFeatureHover(selectedFeature); }, value: oId }, this.showUserImageInList &&
-            index.h("calcite-avatar", { class: 'profile-img', "full-name": userInfo?.fullName, id: userInfo?.id, scale: "m", slot: "content-start", thumbnail: userInfo?.userProfileUrl, username: userInfo?.username }), index.h("div", { class: `${popupTitleClass} ${popupTitlePaddingClass}`, slot: "content-start" }, popupTitle), index.h("calcite-icon", { flipRtl: true, icon: "chevron-right", scale: "s", slot: "content-end" })));
+            index.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 &&
+            index.h("div", { class: 'feature-symbol', ref: (el) => el && el.appendChild(featureSymbol), slot: "content-start" }), index.h("div", { class: `${popupTitleClass} ${popupTitlePaddingClass}`, slot: "content-start" }, popupTitle), this._likeFieldAvailable &&
+            index.h("div", { class: "like-container", id: oId.concat("like"), slot: "content-end" }, index.h("span", null, this._abbreviatedLikeCount), index.h("calcite-icon", { icon: "thumbs-up", scale: 's' }), index.h("calcite-tooltip", { "reference-element": oId.concat("like") }, formattedLikeCount)), index.h("calcite-icon", { flipRtl: true, icon: "chevron-right", scale: "s", slot: "content-end" })));
     }
     /**
      *
@@ -362,6 +426,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