@esri/solutions-components 0.8.14 → 0.8.15

package/dist/collection/components/deduct-calculator/deduct-calculator.js

@@ -41,7 +41,7 @@ export class DeductCalculator {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '4fde9075cfece4eb107c303c5425501663902e66' }, h("div", { key: '5c2d7e3116f87eb19d55cb4c207bfb658bcc9376', class: "label-display" }, h("calcite-label", { key: '924692372a5294dc8ab4cd8f5d83e879b48d33e7', class: "label-display" }, "Density %", this._getDensityInput()), h("calcite-label", { key: '6afaa68fef4a16718159a297ca421a11b0bd5f6b', class: "label-display" }, "Type", this._getTypeInput()), h("calcite-label", { key: 'e147fa289c58bad96e7affde75a5cc6a62739d70', class: "label-display" }, "Severity", this._getSeverityInput())), h("div", { key: 'd3562ae77e679866031fd1fb0f13c954591d5081' }, this._getCalculateInput())));
+        return (h(Host, { key: '68401afdbb18147910d55f13cae4c019bda9f020' }, h("div", { key: '88b89c1a9b260024f28315574539f47bd0bd0a3a', class: "label-display" }, h("calcite-label", { key: '8e81c5e65fe272c547addd3915ccc6a7da48a5b8', class: "label-display" }, "Density %", this._getDensityInput()), h("calcite-label", { key: 'f549369baa3b681922c07b2c91a626664e98309f', class: "label-display" }, "Type", this._getTypeInput()), h("calcite-label", { key: 'e850fbf5d9728f969c289946c3518a30316e88b9', class: "label-display" }, "Severity", this._getSeverityInput())), h("div", { key: '2485c0b0f0c2681b1af7cf55478ec34efb734a46' }, this._getCalculateInput())));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/delete-button/delete-button.js

@@ -72,7 +72,7 @@ export class DeleteButton {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '885179064344fde1e5387efcf7fe2807bd2786c9' }, this.buttonType === "button" ? (h("calcite-button", { appearance: "outline", disabled: !this._deleteEndabled, id: "solutions-delete", kind: "danger", onClick: () => this._delete(), width: "full" }, this._translations.deleteCount.replace("{{n}}", this.ids.length.toString()))) : (h("calcite-action", { appearance: "solid", compact: true, disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s", text: this._translations.delete }, h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage()));
+        return (h(Host, { key: '09821225eb29ad6eef021f81977cabc3b7852167' }, this.buttonType === "button" ? (h("calcite-button", { appearance: "outline", disabled: !this._deleteEndabled, id: "solutions-delete", kind: "danger", onClick: () => this._delete(), width: "full" }, this._translations.deleteCount.replace("{{n}}", this.ids.length.toString()))) : (h("calcite-action", { appearance: "solid", compact: true, disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s", text: this._translations.delete }, h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage()));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.

package/dist/collection/components/edit-card/edit-card.js

@@ -111,7 +111,7 @@ export class EditCard {
             !this.graphics[0].layer.editingEnabled : true;
         const tableNodeClass = this._editorLoading ? "display-none" : "position-absolute";
         const loadingClass = this._editorLoading ? "" : "display-none";
-        return (h(Host, { key: 'b806acb1c7ec5a72ce3eecf2260343a099d2afa2' }, h("div", { key: 'c4d10fd157da5b0974b240d37245eb67bca9cce9', class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { key: 'c1c66ecdb69497d9a376799f579fff913ac7bd52', class: "position-absolute" }, h("div", { key: 'a9aec76ba816e85ca50ce68beb355426da3bd16f', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: '2a745303bea886b223bc47aa06950d1ca8e39c1a', class: loadingClass, label: "", scale: "s" })))));
+        return (h(Host, { key: 'fbb55e4f99e4fde338fb1ca9debc6cd4eeb46787' }, h("div", { key: '10f7468920f81c1b97a2b23c8069e5b821683788', class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { key: '4badfa94e30d2a8108812c780ea6e636ca4e6e00', class: "position-absolute" }, h("div", { key: '7ce280938b7ae435fbffd358969a23577a0a8ce8', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: '13e23afb8e6d012f6abebad43b24485ac0e72805', class: loadingClass, label: "", scale: "s" })))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/feature-comments/feature-comments.js

@@ -56,7 +56,7 @@ export class FeatureComments {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: '2f5fccede034515212bdcfae66b1a050f63400d0' }, h("slot", { key: '3539f90873c3771e33c8655c12cce9adfbfa772b' })));
+        return (h(Host, { key: '388f7097c0cfc5b9c6cc6649ff00e9fd0be1c6aa' }, h("slot", { key: '31a2a3694358fe14a2195da82063f3be0500b3d8' })));
     }
     static get is() { return "feature-comments"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/feature-details/feature-details.css

@@ -2,11 +2,12 @@
   display: block;
 }
 
-.buttons{
+.buttons-container{
   align-items: center;
-  background-color: white;
   display: flex;
   padding: 10px 0 10px 15px;
+  color: var(--calcite-color-text-1) !important;
+  background-color: var(--calcite-color-foreground-1) !important;
   border-block-start: 1px solid var(--calcite-color-border-3);
   border-block-end: 1px solid var(--calcite-color-border-3);
 }
@@ -14,5 +15,7 @@
 .comment-btn{
   display: flex;
   gap: 5px;
-  width: 35px;
+  width: 37px;
+  font-size: var(--calcite-font-size--2);
+  align-items: center;
 }

package/dist/collection/components/feature-details/feature-details.js

@@ -5,6 +5,7 @@
  */
 import { h } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
+import { getAllTables } from "../../utils/mapViewUtils";
 export class FeatureDetails {
     constructor() {
         /**
@@ -18,8 +19,10 @@ export class FeatureDetails {
         this._likeCount = 0;
         this._disLikeCount = 0;
         this._dislikeFieldAvailable = false;
+        this._commentsAvailable = false;
         this._isLikeBtnClicked = false;
         this._isDislikeBtnClicked = false;
+        this._relatedFeaturesOIDs = undefined;
     }
     //--------------------------------------------------------------------------
     //
@@ -32,19 +35,23 @@ export class FeatureDetails {
     async graphicsWatchHandler() {
         await this.getCompleteGraphic(this.graphics[0]);
         this.checkLikeDislikeFields();
+        await this.processComments();
     }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
+    //
+    //--------------------------------------------------------------------------
     /**
      * Refresh the features comments which will fetch like, dislike and update the component
      * @returns Promise that resolves when the operation is complete
      */
     async refresh(graphic) {
+        await this.getCompleteGraphic(graphic);
+        await this.processComments();
         if (this.isLikeDislikeConfigured(graphic.layer)) {
             // in case of multiple features selected fetch complete feature and update like dislike for current feature 
             if (graphic && this.graphics.length > 1) {
-                await this.getCompleteGraphic(graphic);
                 this.checkLikeDislikeFields();
             }
         }
@@ -78,15 +85,21 @@ export class FeatureDetails {
      */
     async componentWillLoad() {
         await this._initModules();
+        //Apply query to get complete graphic with complete attributes
         await this.getCompleteGraphic(this.graphics[0]);
         this.checkLikeDislikeFields();
+        await this.processComments();
     }
     render() {
-        var _a, _b, _c, _d;
-        return (h("calcite-panel", { key: 'c37e61727e2d94fb11c1c82b68de90b63a68385c', "full-height": true }, h("info-card", { key: 'b8ee6ec6705ec1903800f42f9009d92e0ff41fcc', allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el, zoomAndScrollToSelected: true }), (this._likeFieldAvailable || this._dislikeFieldAvailable) &&
-            h("div", { key: '3a48acd141dbdcb921b2b24296587b130c4e0fcb', class: 'buttons' }, this._likeFieldAvailable &&
-                h("calcite-button", { key: 'cfde8c0825109ec48beb61348c1846596994f6d2', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", onClick: this.onLikeButtonClick.bind(this), scale: 's' }, (_b = (_a = this._likeCount) !== null && _a !== void 0 ? _a : this._selectedGraphic.attributes[this._likeField]) !== null && _b !== void 0 ? _b : 0), this._dislikeFieldAvailable &&
-                h("calcite-button", { key: 'e5e69fefa92a0189b955c4869b7755d0e68436c9', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", onClick: this.onDislikeButtonClick.bind(this), scale: 's' }, (_d = (_c = this._disLikeCount) !== null && _c !== void 0 ? _c : this._selectedGraphic.attributes[this._dislikeField]) !== null && _d !== void 0 ? _d : 0))));
+        var _a, _b, _c, _d, _e;
+        //When related features found show comments list of only those features else comments list will be empty
+        const commentsListWhereClause = ((_a = this._relatedFeaturesOIDs) === null || _a === void 0 ? void 0 : _a.length) > 0 ? `objectId in(${this._relatedFeaturesOIDs})` : '1=0';
+        return (h("calcite-panel", { key: 'c39c0eec021627b920972f7d4bce0d45bfe0a9c2', "full-height": true }, h("info-card", { key: 'e90cb427a1f874216afcfdf0a33804bf14fb6a2c', allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el, zoomAndScrollToSelected: true }), (this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) &&
+            h("div", { key: 'ecfdf111612c92eacfd97dae7bb3080b7ad50e96', class: "buttons-container" }, this._commentsAvailable &&
+                h("div", { key: '07a8213e11585041fb1c5f56254447a720033f04', class: "comment-btn" }, h("span", { key: 'f4071fbd03372a0e88857962e9c31530e2dc693a' }, this._relatedFeaturesOIDs.length), h("calcite-icon", { key: '30258e1daae5f1e00d18dd4ec052861de46b45bf', icon: "speech-bubble", scale: 's' })), this._likeFieldAvailable &&
+                h("calcite-button", { key: 'fa76245789a29e49be06482fd8cd0244f44d19ab', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", onClick: this.onLikeButtonClick.bind(this), scale: 's' }, (_c = (_b = this._likeCount) !== null && _b !== void 0 ? _b : this._selectedGraphic.attributes[this._likeField]) !== null && _c !== void 0 ? _c : 0), this._dislikeFieldAvailable &&
+                h("calcite-button", { key: 'ac9adc799a93f08319b2f0b797cd5d4773b1a6cb', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", onClick: this.onDislikeButtonClick.bind(this), scale: 's' }, (_e = (_d = this._disLikeCount) !== null && _d !== void 0 ? _d : this._selectedGraphic.attributes[this._dislikeField]) !== null && _e !== void 0 ? _e : 0)), this.relatedTableId && this._commentsAvailable &&
+            h("feature-list", { key: '165b2ac0af65cbbab945a0dfd4ac878cc41af56c', class: "height-full", mapView: this.mapView, pageSize: 5, ref: el => this._commentsList = el, selectedLayerId: this.relatedTableId, showInitialLoading: false, textSize: "small", whereClause: commentsListWhereClause })));
     }
     /**
      * Load esri javascript api modules
@@ -96,9 +109,11 @@ export class FeatureDetails {
      * @protected
      */
     async _initModules() {
-        const [Graphic] = await loadModules([
+        const [RelationshipQuery, Graphic] = await loadModules([
+            "esri/rest/support/RelationshipQuery",
             "esri/Graphic"
         ]);
+        this.RelationshipQuery = RelationshipQuery;
         this.Graphic = Graphic;
     }
     /**
@@ -113,6 +128,56 @@ export class FeatureDetails {
         const completeGraphic = await layer.queryFeatures(query);
         this._selectedGraphic = completeGraphic.features[0];
     }
+    /**
+     * Process the comments functionality.
+     * If comments are configured, fetches the related comments ans creates the input for comments list
+     * @protected
+     */
+    async processComments() {
+        var _a;
+        const selectedLayer = this._selectedGraphic.layer;
+        const commentsConfigured = this.reportingOptions[selectedLayer.id].comment && ((_a = selectedLayer.relationships) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        if (commentsConfigured) {
+            //Get comments table id from map
+            const relatedTableIdFromRelnship = selectedLayer.relationships[0].relatedTableId;
+            const allTables = await getAllTables(this.mapView);
+            const relatedTable = allTables.filter((table) => relatedTableIdFromRelnship === table.layerId);
+            this.relatedTableId = (relatedTable === null || relatedTable === void 0 ? void 0 : relatedTable.length) > 0 ? relatedTable[0].id : '';
+            //**Get the related records for the current selected feature**
+            if (this.relatedTableId) {
+                //current selected feature's objectId
+                const objectId = this._selectedGraphic.attributes[selectedLayer.objectIdField];
+                //create relationship query to get all the related records with the current selected feature
+                const relationshipQuery = new this.RelationshipQuery({
+                    objectIds: [objectId],
+                    outFields: ['*'],
+                    relationshipId: selectedLayer.relationships[0].id
+                });
+                const result = await selectedLayer.queryRelatedFeatures(relationshipQuery).catch((e) => {
+                    console.error(e);
+                });
+                const relatedOIDs = [];
+                if (result[objectId]) {
+                    result[objectId].features.forEach((feature) => {
+                        relatedOIDs.push(feature.attributes.OBJECTID);
+                    });
+                }
+                // Store the objectid's of the related features, this will be used to show the comments and its count
+                this._relatedFeaturesOIDs = relatedOIDs;
+                //Set comments available or not
+                this._commentsAvailable = true;
+            }
+            else {
+                this._relatedFeaturesOIDs = [];
+                this._commentsAvailable = false;
+            }
+        }
+        else {
+            this._relatedFeaturesOIDs = [];
+            this._commentsAvailable = false;
+            this.relatedTableId = '';
+        }
+    }
     /**
      * Checks if the layers is configured for like dislike or not
      * @param selectedLayer Feature layer
@@ -135,7 +200,6 @@ export class FeatureDetails {
                 return false;
             }
             //Check if selected layer have the configured like and dislike field and it is of integer types
-            ;
             selectedLayer.fields.forEach((eachField) => {
                 if (this._validFieldTypes.indexOf(eachField.type) > -1) {
                     if (eachField.name === likeField && this.reportingOptions[selectedLayer.id].like) {
@@ -385,8 +449,10 @@ export class FeatureDetails {
             "_likeCount": {},
             "_disLikeCount": {},
             "_dislikeFieldAvailable": {},
+            "_commentsAvailable": {},
             "_isLikeBtnClicked": {},
-            "_isDislikeBtnClicked": {}
+            "_isDislikeBtnClicked": {},
+            "_relatedFeaturesOIDs": {}
         };
     }
     static get events() {
@@ -405,6 +471,26 @@ export class FeatureDetails {
                     "resolved": "boolean",
                     "references": {}
                 }
+            }, {
+                "method": "featureSelect",
+                "name": "featureSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on demand when feature is selected using the list"
+                },
+                "complexType": {
+                    "original": "__esri.Graphic",
+                    "resolved": "Graphic",
+                    "references": {
+                        "___esri": {
+                            "location": "global",
+                            "id": "global::___esri"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {

package/dist/collection/components/feature-form-flow-item/feature-form-flow-item.js

@@ -56,7 +56,7 @@ export class FeatureFormFlowItem {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: 'eafd28a38226545f6e4047bd03fe7eaf0ec20cfa' }, h("slot", { key: '5ad9661525b0126f0848064f5d5bdae69c393d11' })));
+        return (h(Host, { key: '2607999cdad5fbe75eac4366256b589eeb33fe36' }, h("slot", { key: 'a9443a71e40b37449d01f4c40ca5f21b83bf005a' })));
     }
     static get is() { return "feature-form-flow-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/feature-list/feature-list.css

@@ -32,7 +32,12 @@
   width: calc(100% - 20px);
 }
 
-.popup-title {
+.feature-list-popup-title {
   font-weight: 500;
   padding: 10px 12px;
+}
+
+.feature-list-popup-title-small {
+  font-size: x-small;
+  padding: 10px 12px;
 }

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

@@ -31,6 +31,10 @@ export class FeatureList {
         this.pageSize = 100;
         this.highlightOnMap = false;
         this.highlightOnHover = false;
+        this.sortingInfo = undefined;
+        this.whereClause = undefined;
+        this.textSize = "large";
+        this.showInitialLoading = true;
         this._featureItems = [];
         this._featuresCount = 0;
         this._isLoading = false;
@@ -48,6 +52,18 @@ export class FeatureList {
         this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
         await this.initializeFeatureItems();
     }
+    /**
+     * Watch for sorting field or order change and update the features list
+     */
+    async sortingInfoWatchHandler() {
+        await this.initializeFeatureItems();
+    }
+    /**
+     * Watch for whereclause change and update the features list
+     */
+    async whereClauseHandler() {
+        await this.initializeFeatureItems();
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
@@ -70,7 +86,7 @@ export class FeatureList {
     async componentWillLoad() {
         await this.initModules();
         await this._getTranslations();
-        this._isLoading = true;
+        this._isLoading = this.showInitialLoading;
         this._popupUtils = new PopupUtils();
         if (this.mapView && this.selectedLayerId) {
             this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
@@ -86,9 +102,9 @@ export class FeatureList {
      * Renders the component.
      */
     render() {
-        return (h("calcite-panel", { key: '4cb73ad53f9ce1cced4c6001d45001523cb19c4a', "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { key: 'c88ac531c61ece3284c474a334f281507e69dad0', label: "", scale: "m" }), this._featureItems.length === 0 && !this._isLoading &&
-            h("calcite-notice", { key: '70dafc90052736c5b450f9c9c87ae5627f068b92', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: 'a0b9b2aafbdb12f945d87242e29271ca0ff732fc', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: 'a5dd1674092e74bedb06e32b739d14a949b92bea', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
-            h("div", { key: '35dc472ed2aa2bd8e83ca42cf12db0469c967505', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: 'da3acc4616f040d350b198ef759a3d081d06deee', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, "start-item": "1", "total-items": this._featuresCount }))));
+        return (h("calcite-panel", { key: '37f83a9c019e68213493f5e890324470389cd36f', "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { key: '671559375bb5fcdc8a01f9f10a82ab71edc0d836', label: "", scale: "m" }), this._featureItems.length === 0 && !this._isLoading &&
+            h("calcite-notice", { key: 'f6101de52464f2316bfbb83919036b4cf035f8b9', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: 'e49017399909f1d0b93ec4e24341b9042267977f', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: '2e90c0aec739fcce422ff730a39adc85b71a84cb', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
+            h("div", { key: '4b59248846c5b433bb88171c322070a13002f23d', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: '1ca5dbccdc59379999a94198d7ac6111e1ef547b', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, "start-item": "1", "total-items": this._featuresCount }))));
     }
     //--------------------------------------------------------------------------
     //
@@ -106,15 +122,36 @@ export class FeatureList {
         ]);
         this.Color = Color;
     }
+    /**
+     * Return the where condition string considering the defined where clause and layer's definition expression
+     * @protected
+     */
+    getWhereCondition() {
+        var _a;
+        //By Default load all the features
+        let whereClause = '1=1';
+        //if where clause is defined use it
+        if (this.whereClause) {
+            whereClause = this.whereClause;
+        }
+        //if layer has definitionExpression append it to the where clause
+        if ((_a = this._selectedLayer) === null || _a === void 0 ? void 0 : _a.definitionExpression) {
+            whereClause = whereClause + ' AND ' + this._selectedLayer.definitionExpression;
+        }
+        return whereClause;
+    }
     /**
      * Initialize the features list using the selected layer
      * @protected
      */
     async initializeFeatureItems() {
         if (this._selectedLayer) {
-            this._isLoading = true;
+            this._isLoading = this.showInitialLoading;
             this._featureItems = await this.queryPage(0);
-            this._featuresCount = await this._selectedLayer.queryFeatureCount();
+            const query = {
+                where: this.getWhereCondition()
+            };
+            this._featuresCount = await this._selectedLayer.queryFeatureCount(query);
             this._isLoading = false;
         }
     }
@@ -165,7 +202,7 @@ export class FeatureList {
     }
     /**
      * On feature hover in feature list highlight the feature on the map
-     * @param selectedFeature mouseovered feature graphic
+     * @param selectedFeature mouse hovered feature graphic
      * @protected
      */
     async onFeatureHover(selectedFeature) {
@@ -195,19 +232,21 @@ export class FeatureList {
      * @protected
      */
     async queryPage(page) {
+        var _a, _b;
         const featureLayer = this._selectedLayer;
-        const objectIdField = featureLayer.objectIdField;
+        const sortField = ((_a = this.sortingInfo) === null || _a === void 0 ? void 0 : _a.field) ? this.sortingInfo.field : featureLayer.objectIdField;
+        const sortOrder = ((_b = this.sortingInfo) === null || _b === void 0 ? void 0 : _b.order) ? this.sortingInfo.order : 'desc';
         const query = {
             start: page,
             num: this.pageSize,
             outFields: ["*"],
             returnGeometry: true,
-            where: featureLayer.definitionExpression,
+            where: this.getWhereCondition(),
             outSpatialReference: this.mapView.spatialReference.toJSON()
         };
-        //sort only when objectId field is found
-        if (objectIdField) {
-            query.orderByFields = [objectIdField.toString() + " DESC"];
+        //sort only when sort field and order is valid
+        if (sortField && sortOrder) {
+            query.orderByFields = [sortField.toString() + " " + sortOrder];
         }
         const featureSet = await featureLayer.queryFeatures(query);
         return await this.createFeatureItem(featureSet);
@@ -238,7 +277,8 @@ export class FeatureList {
         const oId = selectedFeature.attributes[this._selectedLayer.objectIdField].toString();
         //use object id if popupTitle is null or undefined
         popupTitle = popupTitle !== null && popupTitle !== void 0 ? popupTitle : oId;
-        return (h("calcite-list-item", { onCalciteListItemSelect: (e) => { void this.featureClicked(e, selectedFeature); }, onMouseLeave: () => { void this.clearHighlights(); }, onMouseOver: () => { void this.onFeatureHover(selectedFeature); }, value: oId }, h("div", { class: "popup-title", slot: "content-start" }, popupTitle), h("calcite-icon", { icon: "chevron-right", scale: "s", slot: "content-end" })));
+        const popupTitleClass = this.textSize === 'small' ? 'feature-list-popup-title-small' : 'feature-list-popup-title';
+        return (h("calcite-list-item", { onCalciteListItemSelect: (e) => { void this.featureClicked(e, selectedFeature); }, onMouseLeave: () => { void this.clearHighlights(); }, onMouseOver: () => { void this.onFeatureHover(selectedFeature); }, value: oId }, h("div", { class: popupTitleClass, slot: "content-start" }, popupTitle), h("calcite-icon", { icon: "chevron-right", scale: "s", slot: "content-end" })));
     }
     /**
      * Fetches the component's translations
@@ -369,6 +409,80 @@ export class FeatureList {
                 "attribute": "highlight-on-hover",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "sortingInfo": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ISortingInfo",
+                    "resolved": "ISortingInfo",
+                    "references": {
+                        "ISortingInfo": {
+                            "location": "import",
+                            "path": "../../utils/interfaces",
+                            "id": "src/utils/interfaces.ts::ISortingInfo"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ISortingInfo: Sorting field and order using which features list will be sorted"
+                }
+            },
+            "whereClause": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "string: where clause to filter the features list"
+                },
+                "attribute": "where-clause",
+                "reflect": false
+            },
+            "textSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"small\" | \"large\"",
+                    "resolved": "\"large\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "string(small/large): Controls the font size of the title"
+                },
+                "attribute": "text-size",
+                "reflect": false,
+                "defaultValue": "\"large\""
+            },
+            "showInitialLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: Show initial loading indicator when creating list"
+                },
+                "attribute": "show-initial-loading",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }
@@ -432,6 +546,12 @@ export class FeatureList {
         return [{
                 "propName": "selectedLayerId",
                 "methodName": "selectedLayerWatchHandler"
+            }, {
+                "propName": "sortingInfo",
+                "methodName": "sortingInfoWatchHandler"
+            }, {
+                "propName": "whereClause",
+                "methodName": "whereClauseHandler"
             }];
     }
 }

package/dist/collection/components/features-flow-item/features-flow-item.js

@@ -56,7 +56,7 @@ export class FeaturesFlowItem {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: '47fde9252d4b8eff91b413cf22282b8d61d127a7' }, h("slot", { key: '725e3a0a4ad6ef4827a5036187b2f0e59cf34ecd' })));
+        return (h(Host, { key: 'e0d4102af27d4ca25cb6257292797c2900337ec7' }, h("slot", { key: 'ea50a07d3d33ee0b67bc5a27a71bc7ea597fb008' })));
     }
     static get is() { return "features-flow-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/floor-filter/floor-filter.js

@@ -57,7 +57,7 @@ export class FloorFilter {
         return this._initModules();
     }
     render() {
-        return (h(Host, { key: '14268f8fb66eb28085ce60b782b15f41285bf923' }, h("div", { key: 'c428424b3d639fa043fef55523de35a9bf07bda0', ref: (el) => { this._floorFilterElement = el; } })));
+        return (h(Host, { key: '4b532bae1022d879f46022203a9ffa00c8e615a7' }, h("div", { key: 'd75ad603472d2f57ccd52725f1c3ed428bdd8173', ref: (el) => { this._floorFilterElement = el; } })));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/info-card/info-card.js

@@ -24,6 +24,10 @@ import { loadModules } from "../../utils/loadModules";
 import { PopupUtils } from "../../utils/popupUtils";
 export class InfoCard {
     constructor() {
+        /**
+         * string: unique id for the features node
+         */
+        this._featuresNodeId = 'features-node' + new Date().getMilliseconds().toString();
         this.graphics = undefined;
         this.isLoading = false;
         this.isMobile = undefined;
@@ -79,8 +83,8 @@ export class InfoCard {
         return this._features.selectedFeature;
     }
     /**
-     * Get the current selected feature from the Features widget
-     * @returns Promise resolving with the current feature
+     * Refresh the feature info
+     * @returns Promise when complete
      */
     async refresh() {
         await this.setGraphics();
@@ -181,8 +185,8 @@ export class InfoCard {
         const id = (_d = (_c = this._features) === null || _c === void 0 ? void 0 : _c.selectedFeature) === null || _d === void 0 ? void 0 : _d.getObjectId();
         const ids = parseInt(id === null || id === void 0 ? void 0 : id.toString(), 10) > -1 ? [id] : [];
         const deleteEnabled = ((_e = this._layer) === null || _e === void 0 ? void 0 : _e.editingEnabled) && ((_h = (_g = (_f = this._layer) === null || _f === void 0 ? void 0 : _f.capabilities) === null || _g === void 0 ? void 0 : _g.operations) === null || _h === void 0 ? void 0 : _h.supportsDelete);
-        return (h(Host, { key: 'daf1a2cd9ca191e31c0da05e429a621050d394a8' }, h("calcite-shell", { key: 'c59c1fc96447010119ca85e35e5310a1871b78c9', style: { position: this.position } }, this._getHeader(), h("calcite-loader", { key: '9fe212dc6bd95d98427e8c75143e20047a134189', class: loadingClass, label: this._translations.fetchingData }), h("div", { key: 'c84ab8459f438e46bcdcefd7c64fff30ab52ac5b', class: "esri-widget feature-node " + featureNodeClass, id: "features-node" }), h("div", { key: '93816adb6c20e64a559b111b9918c036588467b4', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
-            h("div", { key: 'e359866247284d36cb4e12476daa441c412e9244', class: "display-flex top-border padding-1-2" }, h("calcite-button", { key: '5d65952fd5908268117e67781ce719ac9baeee21', appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { key: 'b1b741cc4fcd1052b4402b9919fbb8bc21127ab1', placement: "bottom", "reference-element": "solutions-edit" }, h("span", { key: '9c5007aa3fc0ebef1d25ddd392e4d45973347609' }, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { key: 'd6388a8c5aa83b0a0f306f84843e137cb2ba4906', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { key: 'd9b9b88a240fb35b7c434f368a697040bd33c3b1' }, h("calcite-button", { key: '0c8afd3ce5e83c8c4e2b9c33fe053bc1a9831551', appearance: 'transparent', disabled: nextBackDisabled, iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { key: '7ef1b84c4262ab45450354959cbbf8a6914b014c', placement: "top", "reference-element": "solutions-back" }, h("span", { key: '990a06361d6006d93a01bdbb61fd5dc103bdf9b2' }, this._translations.back))), h("calcite-action", { key: '31a4270a35da974ab8216a203c44e6aeecf93224', class: 'pagination-action', onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { key: 'fe734c09dc59c9a8c7117cf19f1970aba0398d51', class: "pagination-count" }, this._count)), h("div", { key: '88a9e56d945ea53870baf87bead02cb03a0ac156' }, h("calcite-button", { key: '8b095fdb66d113a8b893259df3e3331451e7af8e', appearance: "transparent", disabled: nextBackDisabled, iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { key: '86ac1d32cb39c39bd0ebcc3d04702c5534f3992f', placement: "top", "reference-element": "solutions-next" }, h("span", { key: '0fad088ab4536dc235dec503fd28346575aad4ed' }, this._translations.next))))), h("edit-card", { key: 'b1d207f660bca7bb83ffaef3fb44819c25107a48', class: editClass, graphicIndex: (_j = this._features) === null || _j === void 0 ? void 0 : _j.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { key: '338be8157fe0163e5c3e529942f34dc80efb0721', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { key: 'b91e86a5c47bac031d7bb0053ff45f2e9dc3fb99', slot: "title" }, this._translations.editDisabled), h("div", { key: '8923e82d5992e860ac535a4111d9e77b01639549', slot: "message" }, this._translations.enableEditing)))));
+        return (h(Host, { key: '7b48c1dbd2c4e384c4bcba62a8cf35e4c62d2edb' }, h("calcite-shell", { key: 'a8387dfb3968ea07182cdd782a5a147bdcb1188a', style: { position: this.position } }, this._getHeader(), h("calcite-loader", { key: '1695d423a19876c6ccde5f4004f21ca26e305350', class: loadingClass, label: this._translations.fetchingData }), h("div", { key: 'd8870e95ba06ed713c5143c5b260ee4059275d81', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), h("div", { key: '84af335caa0f39890801faebc207bf8c794fe1e3', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+            h("div", { key: 'fa91c18424af38067c44e50635b9af55aacc84b8', class: "display-flex top-border padding-1-2" }, h("calcite-button", { key: 'c4565bda374ab4eb2afd2273c62256fae187d151', appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { key: '7175a74e7e1db0939fbbe4a229e7f6df6efb2768', placement: "bottom", "reference-element": "solutions-edit" }, h("span", { key: '6443c4d8274fe6003f5dcbd3b36f35057234c550' }, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { key: 'ff3d3dffd57bf118f7e71ec5a504bbcfda0de229', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { key: '1912bdf3dbad45ba66acf13ef8ad6894ced8caa2' }, h("calcite-button", { key: 'fe1e5032b764b3c0ac8ef619c9d365f8d781d6b3', appearance: 'transparent', disabled: nextBackDisabled, iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { key: 'a9928e72cc3dcebad2544ee5a347a0b70ebdae4b', placement: "top", "reference-element": "solutions-back" }, h("span", { key: '6d8cc94ae72deab6ae19d3314f5b0f7e1833bd3c' }, this._translations.back))), h("calcite-action", { key: '90d7951f0eacd4b77f8ebe3da79a12665a8b9f63', class: 'pagination-action', onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { key: '6c36eb43691a79b6a7c0da99663fa22c1d97e572', class: "pagination-count" }, this._count)), h("div", { key: '23758504ca1b4b97c4c488e88e61f0c3cdc10830' }, h("calcite-button", { key: '93efeff6e0cb54edd1817c3410806b009755618f', appearance: "transparent", disabled: nextBackDisabled, iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { key: '17afd49a3b167d9322d944a9d8ae6ffc249d202e', placement: "top", "reference-element": "solutions-next" }, h("span", { key: '0b15e569313961c53700d2ef6eb148b9c0efd778' }, this._translations.next))))), h("edit-card", { key: '2217a66105095ea1e5bd577dc8bf970b3fdeae10', class: editClass, graphicIndex: (_j = this._features) === null || _j === void 0 ? void 0 : _j.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { key: 'c59bd8d759ef1df763b3bbe513b7146cfa270057', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { key: '3733d543e7483037aa5130f0ca06f8da434eaf7e', slot: "title" }, this._translations.editDisabled), h("div", { key: 'eaace9548fd442015000f836d54e556c9859a3fc', slot: "message" }, this._translations.enableEditing)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -241,7 +245,7 @@ export class InfoCard {
             if (!this._features) {
                 this._features = new this.Features({
                     view: this.mapView,
-                    container: "features-node",
+                    container: this._featuresNodeId,
                     visibleElements: {
                         actionBar: false,
                         closeButton: false,
@@ -615,10 +619,10 @@ export class InfoCard {
                     "return": "Promise<any>"
                 },
                 "docs": {
-                    "text": "Get the current selected feature from the Features widget",
+                    "text": "Refresh the feature info",
                     "tags": [{
                             "name": "returns",
-                            "text": "Promise resolving with the current feature"
+                            "text": "Promise when complete"
                         }]
                 }
             },

package/dist/collection/components/json-editor/json-editor.js

@@ -132,7 +132,7 @@ export class JsonEditor {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '00ea91a9373e5cecbe52bd51ac7bf3b06b22ccc8' }, h("div", { key: '7afe9bd7953b0c06cd2a4eaf107dd9654a16c37e', id: `${this.instanceid}-editor-container`, class: "editor-container padding-right" }, h("div", { key: 'c9bed17775348e586366b81bb37ab1b959300b8c', class: "editor-controls" }, h("div", { key: '846a0f27a14fcf200e473575fa772d68cdc546e7', class: "editor-buttons" }, h("calcite-icon", { key: '723cdd672261b9439750e6fb05a270aa46d97789', id: `${this.instanceid}-errorFlag`, icon: "exclamation-mark-triangle", title: this._translations.errorFlag, scale: "s", class: "edit-error-flag" }), h("calcite-button", { key: '23edf0b33632971b33b47bafc52f7697bebb6eb5', id: `${this.instanceid}-undo`, color: "blue", appearance: "solid", title: this._translations.undo, onClick: () => this._undo(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: 'e423f0f1b8fad1db9bd2b94d53ce2a5625ee87d1', icon: "undo", scale: "s" })), h("calcite-button", { key: 'de336e52d61b8575c1ac83a7eef3663520db5e4c', id: `${this.instanceid}-redo`, color: "blue", appearance: "solid", title: this._translations.redo, onClick: () => this._redo(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: 'c864583f66374d5d1d63f630e4069a11a98b8bcd', icon: "redo", scale: "s" })), h("calcite-button", { key: 'c740d3ef25901d6e313d70fccaa35c40ecab9cb4', id: `${this.instanceid}-diff`, color: "blue", appearance: "solid", title: this._translations.diff, onClick: () => this._toggleEditor(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '8bf4e985982d227086d3b11ab94b58ad84657970', icon: "compare", scale: "s" })), h("calcite-button", { key: '0c2d9b1498eb41886b2716d182ba9833bbe9a528', id: `${this.instanceid}-search`, appearance: "outline", color: "blue", title: this._translations.search, onClick: () => this._search(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '1979a27bef07cfdd122e5bd0a2cb27c2ada29f6e', icon: "search", scale: "s" })), h("calcite-button", { key: '8b754884ef387235f57806310da7693a25a09699', id: `${this.instanceid}-reset`, color: "blue", appearance: "solid", disabled: true, title: this._translations.cancelEdits, onClick: () => this._reset(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: 'bfa24ac26db7ce6f8ed4ffa7cf39950fc8b959c9', icon: "reset", scale: "s" })))), h("div", { key: '671db1db990eedd2863cca9de51bc376e55085bf', class: "edit-parent" }, h("div", { key: 'a2cb3c42fb1edd5d26f8c52ee2ca2c0124e5d02a', id: `${this.instanceid}-container`, class: "json-edit-container" }), h("div", { key: '9ec65340bb37c54a77d82e47129b5e07ec7b37cc', id: `${this.instanceid}-diff-container`, class: "json-edit-container display-none" })))));
+        return (h(Host, { key: 'df3dd7531bfc6256919c3d5f14b5f2837fda5aac' }, h("div", { key: '9dd13f859e92b7cbe719da36f71428e9a44514aa', id: `${this.instanceid}-editor-container`, class: "editor-container padding-right" }, h("div", { key: '3762323a88ada57aeb6483d1f510ae7b64ed7095', class: "editor-controls" }, h("div", { key: '754caf059ecaffdc08f1bd46e496e44ea4cca274', class: "editor-buttons" }, h("calcite-icon", { key: '96620de487619db0a3f893ed91dbc7a0aff72517', id: `${this.instanceid}-errorFlag`, icon: "exclamation-mark-triangle", title: this._translations.errorFlag, scale: "s", class: "edit-error-flag" }), h("calcite-button", { key: 'ef437976e3a198319885ae42f241f19206f5675b', id: `${this.instanceid}-undo`, color: "blue", appearance: "solid", title: this._translations.undo, onClick: () => this._undo(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '168ad569ab54238f0cb7a9b3c33f2186ad44dbc5', icon: "undo", scale: "s" })), h("calcite-button", { key: 'f1fd90dccdc0f1e0645e383d547dd0d68e55bd93', id: `${this.instanceid}-redo`, color: "blue", appearance: "solid", title: this._translations.redo, onClick: () => this._redo(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: 'c3fe8f81cd0a383da9c0b7538b88b69995da83e8', icon: "redo", scale: "s" })), h("calcite-button", { key: '3a23491a976b9cc9e21df4f693044c16e0fa896a', id: `${this.instanceid}-diff`, color: "blue", appearance: "solid", title: this._translations.diff, onClick: () => this._toggleEditor(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '35fe88eaeb9af26991817d882691ee8462a131c5', icon: "compare", scale: "s" })), h("calcite-button", { key: '8091d794c5d9e0c1d7a7a6bd21cd690e3eaf83e5', id: `${this.instanceid}-search`, appearance: "outline", color: "blue", title: this._translations.search, onClick: () => this._search(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: 'bff6d836ca319f8c1fe440117d6d983c07dd8106', icon: "search", scale: "s" })), h("calcite-button", { key: '44e7d523d29fb3f92f6b10b101d43239b5c7919c', id: `${this.instanceid}-reset`, color: "blue", appearance: "solid", disabled: true, title: this._translations.cancelEdits, onClick: () => this._reset(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: 'e6bfea7cd2574929917204f74ed924dc8072befb', icon: "reset", scale: "s" })))), h("div", { key: 'a0cbb47b3f6ed02839fdbf65ab62d50c16a44107', class: "edit-parent" }, h("div", { key: '07ac2b80bd612fb86b8970cfbf9be080d1f574eb', id: `${this.instanceid}-container`, class: "json-edit-container" }), h("div", { key: 'd98d705059fd769906f695298f7dc11cc96ebc2a', id: `${this.instanceid}-diff-container`, class: "json-edit-container display-none" })))));
     }
     //--------------------------------------------------------------------------
     //