@esri/solutions-components 0.7.25 → 0.7.27

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

@@ -17,7 +17,7 @@ const t9n = require('./t9n-0556abcb.js');
 const resources = require('./resources-222ad22c.js');
 const locale$1 = require('./locale-a476e15d.js');
 const mapViewUtils = require('./mapViewUtils-8aa325de.js');
-const popupUtils = require('./popupUtils-a73902a6.js');
+const popupUtils = require('./popupUtils-7755782a.js');
 require('./guid-1a466ca6.js');
 require('./resources-6c60363a.js');
 require('./key-b8c05387.js');
@@ -813,7 +813,7 @@ const InfoCard = class {
         if (this.graphics.length > 0) {
             this._layer = (_a = this.graphics[0]) === null || _a === void 0 ? void 0 : _a.layer;
             this._editEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsUpdate;
-            this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0]);
+            this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0], this.mapView.map);
             this._features.open({
                 features: this.graphics
             });

package/dist/cjs/calcite-flow_4.cjs.entry.js

@@ -15,7 +15,7 @@ const interactive = require('./interactive-8aff886e.js');
 const locale = require('./locale-6a627639.js');
 const t9n = require('./t9n-0556abcb.js');
 const resources = require('./resources-8e3763a4.js');
-const popupUtils = require('./popupUtils-a73902a6.js');
+const popupUtils = require('./popupUtils-7755782a.js');
 const mapViewUtils = require('./mapViewUtils-8aa325de.js');
 const locale$1 = require('./locale-a476e15d.js');
 require('./guid-1a466ca6.js');
@@ -357,6 +357,18 @@ const FeatureList = class {
     }
     //--------------------------------------------------------------------------
     //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Watch for selectedLayerId change and update layer instance and features list for new layerId
+     */
+    async selectedLayerWatchHandler() {
+        this._selectedLayer = await mapViewUtils.getLayerOrTable(this.mapView, this.selectedLayerId);
+        await this.initializeFeatureItems();
+    }
+    //--------------------------------------------------------------------------
+    //
     //  Functions (lifecycle)
     //
     //--------------------------------------------------------------------------
@@ -368,23 +380,22 @@ const FeatureList = class {
         await this._getTranslations();
         this._isLoading = true;
         this._popupUtils = new popupUtils.PopupUtils();
-        this._selectedLayer = await mapViewUtils.getLayerOrTable(this.mapView, this.selectedLayerId);
+        if (this.mapView && this.selectedLayerId) {
+            this._selectedLayer = await mapViewUtils.getLayerOrTable(this.mapView, this.selectedLayerId);
+        }
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
      */
     async componentDidLoad() {
-        if (this._selectedLayer) {
-            this._featureItems = await this.queryPage(0);
-            this._featuresCount = await this._selectedLayer.queryFeatureCount();
-            this._isLoading = false;
-        }
+        await this.initializeFeatureItems();
     }
     /**
      * Renders the component.
      */
     render() {
-        return (index.h("calcite-panel", { "full-height": true, "full-width": true }, this._isLoading && index.h("calcite-loader", { scale: "m" }), this._featureItems.length === 0 && !this._isLoading && index.h("calcite-notice", { class: "error-msg", icon: "feature-details", kind: "info", open: true }, index.h("div", { slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), index.h("calcite-list", { "selection-appearance": "border", "selection-mode": "single" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
+        return (index.h("calcite-panel", { "full-height": true, "full-width": true }, this._isLoading && index.h("calcite-loader", { scale: "m" }), this._featureItems.length === 0 && !this._isLoading &&
+            index.h("calcite-notice", { class: "error-msg", icon: "feature-details", kind: "info", open: true }, index.h("div", { slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), index.h("calcite-list", { "selection-appearance": "border", "selection-mode": "single" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
             index.h("div", { class: "width-full", slot: "footer" }, index.h("calcite-pagination", { class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, "start-item": "1", "total-items": this._featuresCount }))));
     }
     //--------------------------------------------------------------------------
@@ -392,6 +403,17 @@ const FeatureList = class {
     //  Functions (protected)
     //
     //--------------------------------------------------------------------------
+    /**
+     * Initialize the features list using the selected layer
+     */
+    async initializeFeatureItems() {
+        if (this._selectedLayer) {
+            this._isLoading = true;
+            this._featureItems = await this.queryPage(0);
+            this._featuresCount = await this._selectedLayer.queryFeatureCount();
+            this._isLoading = false;
+        }
+    }
     /**
      * On page change get the next updated feature list
      * @param event page change event
@@ -436,14 +458,19 @@ const FeatureList = class {
      */
     async queryPage(page) {
         const featureLayer = this._selectedLayer;
+        const objectIdField = featureLayer.objectIdField;
         const query = {
             start: page,
             num: this.pageSize,
             outFields: ["*"],
-            orderByFields: [featureLayer.objectIdField + " DESC"],
             returnGeometry: true,
-            where: featureLayer.definitionExpression
+            where: featureLayer.definitionExpression,
+            outSpatialReference: this.mapView.spatialReference.toJSON()
         };
+        //sort only when objectId field is found
+        if (objectIdField) {
+            query.orderByFields = [objectIdField.toString() + " DESC"];
+        }
         const featureSet = await featureLayer.queryFeatures(query);
         return await this.createFeatureItem(featureSet);
     }
@@ -456,7 +483,7 @@ const FeatureList = class {
     async createFeatureItem(featureSet) {
         const currentFeatures = featureSet === null || featureSet === void 0 ? void 0 : featureSet.features;
         const items = currentFeatures.map(async (feature) => {
-            const popupTitle = await this._popupUtils.getPopupTitle(feature);
+            const popupTitle = await this._popupUtils.getPopupTitle(feature, this.mapView.map);
             return this.getFeatureItem(feature, popupTitle);
         });
         return Promise.all(items);
@@ -485,6 +512,9 @@ const FeatureList = class {
         this._translations = messages[0];
     }
     get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "selectedLayerId": ["selectedLayerWatchHandler"]
+    }; }
 };
 FeatureList.style = featureListCss;
 
@@ -527,7 +557,8 @@ const LayerList = class {
      * Renders the component.
      */
     render() {
-        return (index.h(index.Fragment, null, this._isLoading && index.h("calcite-loader", { scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay && index.h("calcite-notice", { class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, index.h("div", { slot: "title" }, this._translations.error), index.h("div", { slot: "message" }, this.noLayerErrorMsg ? this.noLayerErrorMsg : this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
+        return (index.h(index.Fragment, null, this._isLoading && index.h("calcite-loader", { scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
+            index.h("calcite-notice", { class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, index.h("div", { slot: "title" }, this._translations.error), index.h("div", { slot: "message" }, this.noLayerErrorMsg ? this.noLayerErrorMsg : this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
             index.h("calcite-list", null, this.renderLayerList())));
     }
     //--------------------------------------------------------------------------

package/dist/cjs/card-manager_3.cjs.entry.js

@@ -1194,7 +1194,7 @@ const LayerTable = class {
      */
     _filterModal() {
         var _a, _b, _c;
-        return (index.h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: async () => this._closeFilter(), open: this._filterOpen, widthScale: "s" }, index.h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, (_b = (_a = this._translations) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.replace("{{title}}", (_c = this._layer) === null || _c === void 0 ? void 0 : _c.title)), index.h("div", { slot: "content" }, index.h("instant-apps-filter-list", { autoUpdateUrl: true, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), layerExpressions: this._layerExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, view: this.mapView, zoomBtn: false }))));
+        return (index.h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: async () => this._closeFilter(), open: this._filterOpen, widthScale: "s" }, index.h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, (_b = (_a = this._translations) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.replace("{{title}}", (_c = this._layer) === null || _c === void 0 ? void 0 : _c.title)), index.h("div", { slot: "content" }, index.h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), layerExpressions: this._layerExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, view: this.mapView, zoomBtn: false }))));
     }
     /**
      * Reset the filter active prop
@@ -1295,6 +1295,8 @@ const LayerTable = class {
         var _a, _b;
         const layerExpressions = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filterConfig) === null || _b === void 0 ? void 0 : _b.layerExpressions;
         this._layerExpressions = layerExpressions ? layerExpressions.filter((exp) => exp.id === this._layer.id) : [];
+        this._filterList.layerExpressions = this._layerExpressions;
+        this._filterActive = false;
     }
     /**
      * Select all rows that are not currently selectd

package/dist/cjs/crowdsource-reporter.cjs.entry.js

@@ -12,11 +12,12 @@ const locale = require('./locale-a476e15d.js');
 require('./esri-loader-a91c0ec1.js');
 require('./_commonjsHelpers-384729db.js');
 
-const crowdsourceReporterCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.width-full{width:100% !important}.width-0{width:0}.height-full{height:100% !important}.height-0{height:0}.overflow-hidden{overflow:hidden}.border{border:1px solid var(--calcite-color-border-3)}.map-container{position:absolute;width:calc(100% - 390px);left:390px}.side-panel{padding:2px;width:390px;height:100%;position:absolute;top:0;left:0;z-index:60}.error-msg{padding:10px}.collapsed-side-panel{top:calc(100% - 55px);height:54px}";
+const crowdsourceReporterCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.width-full{width:100% !important}.width-0{width:0}.height-full{height:100% !important}.height-0{height:0}.overflow-hidden{overflow:hidden}.border{border:1px solid var(--calcite-color-border-3)}.error-msg{padding:10px}";
 
 const CrowdsourceReporter = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.togglePanel = index.createEvent(this, "togglePanel", 7);
         this.description = undefined;
         this.isMobile = undefined;
         this.enableAnonymousAccess = undefined;
@@ -53,9 +54,7 @@ const CrowdsourceReporter = class {
      * Called each time the mapView prop is changed.
      */
     async isMobileWatchHandler() {
-        if (this.isMobile) {
-            this._sidePanelCollapsed = false;
-        }
+        this._sidePanelCollapsed = false;
     }
     /**
      * Called each time the mapView prop is changed.
@@ -67,16 +66,6 @@ const CrowdsourceReporter = class {
     }
     //--------------------------------------------------------------------------
     //
-    //  Methods (public)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
-    //  Events (public)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
     //  Functions (lifecycle)
     //
     //--------------------------------------------------------------------------
@@ -118,13 +107,8 @@ const CrowdsourceReporter = class {
                     break;
             }
         });
-        let sidePanelClass = "side-panel";
-        //in case of mobile handle for collapsed styles of the panel
-        if (this.isMobile && this._sidePanelCollapsed) {
-            sidePanelClass += " collapsed-side-panel";
-        }
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (index.h("calcite-panel", { class: sidePanelClass + " width-full " + themeClass }, this.mapView
+        return (index.h("calcite-panel", { class: "width-full " + themeClass }, this.mapView
             ? index.h("calcite-flow", null, (renderLists === null || renderLists === void 0 ? void 0 : renderLists.length) > 0 && renderLists)
             : index.h("calcite-loader", { scale: "m" })));
     }
@@ -134,7 +118,10 @@ const CrowdsourceReporter = class {
      * @protected
      */
     getLayerListFlowItem() {
-        return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this._hasValidLayers && index.h("calcite-action", { icon: "sort-ascending-arrow", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this.isMobile }), this._hasValidLayers && index.h("calcite-action", { icon: "filter", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this.isMobile }), this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports && index.h("calcite-button", { appearance: "secondary", slot: "footer", width: "full" }, this.reportButtonText), index.h("calcite-panel", { "full-height": true, "full-width": true }, index.h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._translations.noLayerToDisplayErrorMsg, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this) }))));
+        return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this._hasValidLayers &&
+            index.h("calcite-action", { icon: "sort-ascending-arrow", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this.isMobile }), this._hasValidLayers &&
+            index.h("calcite-action", { icon: "filter", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this.isMobile }), this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports &&
+            index.h("calcite-button", { appearance: "secondary", slot: "footer", width: "full" }, this.reportButtonText), index.h("calcite-panel", { "full-height": true, "full-width": true }, index.h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._translations.noLayerToDisplayErrorMsg, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this) }))));
     }
     /**
      * When layer list is loaded, we will receive the list of layers, if its  means we don't have any valid layer to be listed
@@ -169,6 +156,7 @@ const CrowdsourceReporter = class {
      */
     toggleSidePanel() {
         this._sidePanelCollapsed = !this._sidePanelCollapsed;
+        this.togglePanel.emit(this._sidePanelCollapsed);
     }
     /**
      * When feature is selected from list store that and show feature details
@@ -185,7 +173,8 @@ const CrowdsourceReporter = class {
      * @protected
      */
     getFeatureListFlowItem(layerId, layerName) {
-        return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, onCalciteFlowItemBack: this.backFromFeatureList.bind(this) }, index.h("calcite-action", { icon: "sort-ascending-arrow", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this.isMobile }), index.h("calcite-action", { icon: "filter", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this.isMobile }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports && index.h("calcite-button", { appearance: "secondary", slot: "footer", width: "full" }, this.reportButtonText), index.h("calcite-panel", { "full-height": true }, index.h("feature-list", { class: "height-full", highlightOnMap: true, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 100, selectedLayerId: layerId }))));
+        return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, onCalciteFlowItemBack: this.backFromFeatureList.bind(this) }, index.h("calcite-action", { icon: "sort-ascending-arrow", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this.isMobile }), index.h("calcite-action", { icon: "filter", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this.isMobile }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports &&
+            index.h("calcite-button", { appearance: "secondary", slot: "footer", width: "full" }, this.reportButtonText), index.h("calcite-panel", { "full-height": true }, index.h("feature-list", { class: "height-full", highlightOnMap: true, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, selectedLayerId: layerId }))));
     }
     /**
      * Returns the calcite-flow item for feature details