@esri/solutions-components 0.8.10 → 0.8.12

package/dist/collection/components/crowdsource-manager/crowdsource-manager.js

@@ -78,6 +78,8 @@ export class CrowdsourceManager {
         this.theme = "light";
         this.zoomAndScrollToSelected = false;
         this.zoomToScale = undefined;
+        this.sortField = undefined;
+        this.sortOrder = undefined;
         this._expandPopup = this.hideMapOnLoad;
         this._hideFooter = false;
         this._hideTable = false;
@@ -184,9 +186,7 @@ export class CrowdsourceManager {
      * Renders the component.
      */
     render() {
-        const borderClass = this._isMobile && this._hideTable ? "border-width-0" :
-            this._isMobile ? "border-bottom-width-0" : "";
-        return (h(Host, null, h("calcite-shell", { class: "position-relative" }, h("calcite-panel", { class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
+        return (h(Host, null, h("calcite-shell", { class: "position-relative" }, h("calcite-panel", { class: `width-full height-full border-width-0` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
     }
     /**
      * Called after each render
@@ -356,7 +356,7 @@ export class CrowdsourceManager {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
         const popupNodeClass = !this._expandPopup ? "height-full" : ((_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.length) === 1 || this._isMobile ? "position-absolute-0" : "position-absolute-50";
         const headerClass = this._isMobile ? "display-none height-0" : "";
-        const headerTheme = !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
+        const headerTheme = this.popupHeaderColor ? "" : !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
         const containerClass = this._isMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isMobile ? "display-none height-0" : "";
         return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass}`, style: {
                 '--calcite-color-foreground-1': this.popupHeaderColor,
@@ -407,7 +407,7 @@ export class CrowdsourceManager {
             ((_a = this.defaultGlobalId) === null || _a === void 0 ? void 0 : _a.indexOf(",")) > -1 ? this.defaultGlobalId.split(",") : [this.defaultGlobalId];
         const defaultOid = !this.defaultOid ? undefined :
             ((_b = this.defaultOid) === null || _b === void 0 ? void 0 : _b.indexOf(",")) > -1 ? this.defaultOid.split(",").map(o => parseInt(o, 10)) : [parseInt(this.defaultOid, 10)];
-        return (h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip)))) : undefined, h("div", { class: `width-full height-full position-relative` }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
+        return (h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip)))) : undefined, h("div", { class: `width-full height-full position-relative` }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, sortField: this.sortField, sortOrder: this.sortOrder, zoomAndScrollToSelected: this.zoomAndScrollToSelected, zoomToScale: this.zoomToScale }))));
     }
     /**
      * Update the component layout when its size changes
@@ -1137,6 +1137,40 @@ export class CrowdsourceManager {
                 },
                 "attribute": "zoom-to-scale",
                 "reflect": false
+            },
+            "sortField": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: Field using which table will be sorted"
+                },
+                "attribute": "sort-field",
+                "reflect": false
+            },
+            "sortOrder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'asc' | 'desc'",
+                    "resolved": "\"asc\" | \"desc\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string(asc/desc): Sorting order - Ascending or Descending"
+                },
+                "attribute": "sort-order",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.js

@@ -53,7 +53,7 @@ export class CrowdsourceReporter {
         this.theme = "light";
         this.enableZoom = true;
         this.zoomToScale = undefined;
-        this.layerExpressions = undefined;
+        this.layerExpressions = [];
         this._mapInfo = undefined;
         this._flowItems = [];
         this._sidePanelCollapsed = false;
@@ -96,7 +96,7 @@ export class CrowdsourceReporter {
         this.setCurrentFeature(evt.detail.selectedFeature[0]);
         void this.highlightOnMap(evt.detail.selectedFeature[0]);
         this.selectedFeatureIndex = evt.detail.selectedFeatureIndex;
-        //update the feature details to reflect the like dislike values 
+        //update the feature details to reflect the like dislike values
         await this._featureDetails.refresh(evt.detail.selectedFeature[0]);
     }
     //--------------------------------------------------------------------------
@@ -1239,7 +1239,8 @@ export class CrowdsourceReporter {
                 "docs": {
                     "tags": [],
                     "text": "ILayerExpression[]: Array of layer expressions for layers (filter configuration)"
-                }
+                },
+                "defaultValue": "[]"
             }
         };
     }

package/dist/collection/components/layer-table/layer-table.js

@@ -21,7 +21,7 @@
 import { Host, h } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
 import { getLocaleComponentStrings } from "../../utils/locale";
-import { getLayerOrTable, goToSelection } from "../../utils/mapViewUtils";
+import { getFeatureLayerView, getLayerOrTable, goToSelection } from "../../utils/mapViewUtils";
 import { queryAllIds, queryFeatureIds, queryFeaturesByGlobalID } from "../../utils/queryUtils";
 import * as downloadUtils from "../../utils/downloadUtils";
 import "@esri/instant-apps-components/dist/components/instant-apps-social-share";
@@ -80,7 +80,10 @@ export class LayerTable {
         this.shareIncludeEmbed = undefined;
         this.shareIncludeSocial = undefined;
         this.showNewestFirst = undefined;
+        this.sortField = undefined;
+        this.sortOrder = undefined;
         this.zoomAndScrollToSelected = undefined;
+        this.zoomToScale = undefined;
         this._allIds = [];
         this._controlsThatFit = undefined;
         this._csvExporting = false;
@@ -235,7 +238,7 @@ export class LayerTable {
                 }
             });
             if (layerView) {
-                await goToSelection([oid], layerView, this.mapView, true);
+                await goToSelection([oid], layerView, this.mapView, true, undefined, this.zoomToScale);
             }
         }
     }
@@ -1106,13 +1109,20 @@ export class LayerTable {
         this._deleteEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsDelete;
     }
     /**
-     * Sort the objectid field in descending order
+     * Sort the table with the configured field in the configured sort order
      */
     async _sortTable() {
-        if (this._table && this._layer && this.showNewestFirst) {
+        var _a, _b, _c, _d, _e, _f;
+        let sortField = this.sortField ? this.sortField : this._layer.objectIdField;
+        if (((_c = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.layerOptions) === null || _b === void 0 ? void 0 : _b.layers) === null || _c === void 0 ? void 0 : _c.length) > 0) {
+            const configuredLayer = (_d = this.mapInfo.layerOptions) === null || _d === void 0 ? void 0 : _d.layers.filter((layer) => layer.id === this._layer.id);
+            sortField = ((_f = (_e = configuredLayer[0]) === null || _e === void 0 ? void 0 : _e.fields) === null || _f === void 0 ? void 0 : _f.includes(this.sortField)) ? this.sortField : this._layer.objectIdField;
+        }
+        const sortOrder = this.sortOrder ? this.sortOrder : 'desc';
+        if (this._table && this._layer) {
             await this._table.when();
             await this._layer.when(() => {
-                this._table.sortColumn(this._layer.objectIdField, "desc");
+                this._table.sortColumn(sortField, sortOrder);
             });
         }
     }
@@ -1358,8 +1368,11 @@ export class LayerTable {
      *
      * @returns a promise that will resolve when the operation is complete
      */
-    _zoom() {
-        this._table.zoomToSelection();
+    async _zoom() {
+        if (this._layer) {
+            const selectedLayerView = await getFeatureLayerView(this.mapView, this._layer.id);
+            await goToSelection(this.selectedIds, selectedLayerView, this.mapView, true, undefined, this.zoomToScale);
+        }
     }
     /**
      * Handles layer selection change to show new table
@@ -1757,6 +1770,40 @@ export class LayerTable {
                 "attribute": "show-newest-first",
                 "reflect": false
             },
+            "sortField": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: Field using which table will be sorted"
+                },
+                "attribute": "sort-field",
+                "reflect": false
+            },
+            "sortOrder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'asc' | 'desc'",
+                    "resolved": "\"asc\" | \"desc\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string(asc/desc): Sorting order - Ascending or Descending"
+                },
+                "attribute": "sort-order",
+                "reflect": false
+            },
             "zoomAndScrollToSelected": {
                 "type": "boolean",
                 "mutable": false,
@@ -1773,6 +1820,23 @@ export class LayerTable {
                 },
                 "attribute": "zoom-and-scroll-to-selected",
                 "reflect": false
+            },
+            "zoomToScale": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "number: default scale to zoom to when zooming to a single point feature"
+                },
+                "attribute": "zoom-to-scale",
+                "reflect": false
             }
         };
     }

package/dist/collection/demos/crowdsource-manager.html

@@ -45,7 +45,6 @@
     // });
 
       function infoIconButtonClick(evt) {
-        alert('Info button Clicked');
       }
 
       function addValues() {

package/dist/components/crowdsource-manager.js

@@ -126,6 +126,8 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         this.theme = "light";
         this.zoomAndScrollToSelected = false;
         this.zoomToScale = undefined;
+        this.sortField = undefined;
+        this.sortOrder = undefined;
         this._expandPopup = this.hideMapOnLoad;
         this._hideFooter = false;
         this._hideTable = false;
@@ -232,9 +234,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      * Renders the component.
      */
     render() {
-        const borderClass = this._isMobile && this._hideTable ? "border-width-0" :
-            this._isMobile ? "border-bottom-width-0" : "";
-        return (h(Host, null, h("calcite-shell", { class: "position-relative" }, h("calcite-panel", { class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
+        return (h(Host, null, h("calcite-shell", { class: "position-relative" }, h("calcite-panel", { class: `width-full height-full border-width-0` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
     }
     /**
      * Called after each render
@@ -404,7 +404,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
         const popupNodeClass = !this._expandPopup ? "height-full" : ((_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.length) === 1 || this._isMobile ? "position-absolute-0" : "position-absolute-50";
         const headerClass = this._isMobile ? "display-none height-0" : "";
-        const headerTheme = !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
+        const headerTheme = this.popupHeaderColor ? "" : !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
         const containerClass = this._isMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isMobile ? "display-none height-0" : "";
         return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass}`, style: {
                 '--calcite-color-foreground-1': this.popupHeaderColor,
@@ -455,7 +455,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
             ((_a = this.defaultGlobalId) === null || _a === void 0 ? void 0 : _a.indexOf(",")) > -1 ? this.defaultGlobalId.split(",") : [this.defaultGlobalId];
         const defaultOid = !this.defaultOid ? undefined :
             ((_b = this.defaultOid) === null || _b === void 0 ? void 0 : _b.indexOf(",")) > -1 ? this.defaultOid.split(",").map(o => parseInt(o, 10)) : [parseInt(this.defaultOid, 10)];
-        return (h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip)))) : undefined, h("div", { class: `width-full height-full position-relative` }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
+        return (h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip)))) : undefined, h("div", { class: `width-full height-full position-relative` }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, sortField: this.sortField, sortOrder: this.sortOrder, zoomAndScrollToSelected: this.zoomAndScrollToSelected, zoomToScale: this.zoomToScale }))));
     }
     /**
      * Update the component layout when its size changes
@@ -593,6 +593,8 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         "theme": [1],
         "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
         "zoomToScale": [2, "zoom-to-scale"],
+        "sortField": [1, "sort-field"],
+        "sortOrder": [1, "sort-order"],
         "_expandPopup": [32],
         "_hideFooter": [32],
         "_hideTable": [32],

package/dist/components/crowdsource-reporter.js

@@ -6,7 +6,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { l as loadModules } from './loadModules.js';
-import { a as getAllLayers, e as getFeatureLayerView, h as highlightFeatures, c as getMapLayerHash, g as getLayerOrTable } from './mapViewUtils.js';
+import { a as getAllLayers, c as getFeatureLayerView, h as highlightFeatures, d as getMapLayerHash, g as getLayerOrTable } from './mapViewUtils.js';
 import { q as queryFeaturesByID } from './queryUtils.js';
 import { d as defineCustomElement$K } from './action.js';
 import { d as defineCustomElement$J } from './action-menu.js';
@@ -89,7 +89,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         this.theme = "light";
         this.enableZoom = true;
         this.zoomToScale = undefined;
-        this.layerExpressions = undefined;
+        this.layerExpressions = [];
         this._mapInfo = undefined;
         this._flowItems = [];
         this._sidePanelCollapsed = false;
@@ -132,7 +132,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         this.setCurrentFeature(evt.detail.selectedFeature[0]);
         void this.highlightOnMap(evt.detail.selectedFeature[0]);
         this.selectedFeatureIndex = evt.detail.selectedFeatureIndex;
-        //update the feature details to reflect the like dislike values 
+        //update the feature details to reflect the like dislike values
         await this._featureDetails.refresh(evt.detail.selectedFeature[0]);
     }
     //--------------------------------------------------------------------------

package/dist/components/feature-list2.js

@@ -6,7 +6,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
 import { P as PopupUtils } from './popupUtils.js';
-import { g as getLayerOrTable, e as getFeatureLayerView, h as highlightFeatures } from './mapViewUtils.js';
+import { g as getLayerOrTable, c as getFeatureLayerView, h as highlightFeatures } from './mapViewUtils.js';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { d as defineCustomElement$g } from './action.js';
 import { d as defineCustomElement$f } from './action-menu.js';

package/dist/components/layer-list2.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
-import { c as getMapLayerHash, a as getAllLayers } from './mapViewUtils.js';
+import { d as getMapLayerHash, a as getAllLayers } from './mapViewUtils.js';
 import { f as formatNumber, g as getLocaleComponentStrings } from './locale.js';
 import { d as defineCustomElement$c } from './action.js';
 import { d as defineCustomElement$b } from './filter2.js';

package/dist/components/layer-table2.js

@@ -6,7 +6,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
 import { g as getLocaleComponentStrings } from './locale.js';
-import { b as goToSelection, g as getLayerOrTable } from './mapViewUtils.js';
+import { b as goToSelection, c as getFeatureLayerView, g as getLayerOrTable } from './mapViewUtils.js';
 import { b as queryAllIds, c as queryFeatureIds, d as queryFeaturesByGlobalID } from './queryUtils.js';
 import { d as downloadCSV } from './downloadUtils.js';
 import { d as defineCustomElement$D } from './action.js';
@@ -109,7 +109,10 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         this.shareIncludeEmbed = undefined;
         this.shareIncludeSocial = undefined;
         this.showNewestFirst = undefined;
+        this.sortField = undefined;
+        this.sortOrder = undefined;
         this.zoomAndScrollToSelected = undefined;
+        this.zoomToScale = undefined;
         this._allIds = [];
         this._controlsThatFit = undefined;
         this._csvExporting = false;
@@ -264,7 +267,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
                 }
             });
             if (layerView) {
-                await goToSelection([oid], layerView, this.mapView, true);
+                await goToSelection([oid], layerView, this.mapView, true, undefined, this.zoomToScale);
             }
         }
     }
@@ -1135,13 +1138,20 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         this._deleteEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsDelete;
     }
     /**
-     * Sort the objectid field in descending order
+     * Sort the table with the configured field in the configured sort order
      */
     async _sortTable() {
-        if (this._table && this._layer && this.showNewestFirst) {
+        var _a, _b, _c, _d, _e, _f;
+        let sortField = this.sortField ? this.sortField : this._layer.objectIdField;
+        if (((_c = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.layerOptions) === null || _b === void 0 ? void 0 : _b.layers) === null || _c === void 0 ? void 0 : _c.length) > 0) {
+            const configuredLayer = (_d = this.mapInfo.layerOptions) === null || _d === void 0 ? void 0 : _d.layers.filter((layer) => layer.id === this._layer.id);
+            sortField = ((_f = (_e = configuredLayer[0]) === null || _e === void 0 ? void 0 : _e.fields) === null || _f === void 0 ? void 0 : _f.includes(this.sortField)) ? this.sortField : this._layer.objectIdField;
+        }
+        const sortOrder = this.sortOrder ? this.sortOrder : 'desc';
+        if (this._table && this._layer) {
             await this._table.when();
             await this._layer.when(() => {
-                this._table.sortColumn(this._layer.objectIdField, "desc");
+                this._table.sortColumn(sortField, sortOrder);
             });
         }
     }
@@ -1387,8 +1397,11 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      *
      * @returns a promise that will resolve when the operation is complete
      */
-    _zoom() {
-        this._table.zoomToSelection();
+    async _zoom() {
+        if (this._layer) {
+            const selectedLayerView = await getFeatureLayerView(this.mapView, this._layer.id);
+            await goToSelection(this.selectedIds, selectedLayerView, this.mapView, true, undefined, this.zoomToScale);
+        }
     }
     /**
      * Handles layer selection change to show new table
@@ -1530,7 +1543,10 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         "shareIncludeEmbed": [4, "share-include-embed"],
         "shareIncludeSocial": [4, "share-include-social"],
         "showNewestFirst": [4, "show-newest-first"],
+        "sortField": [1, "sort-field"],
+        "sortOrder": [1, "sort-order"],
         "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
+        "zoomToScale": [2, "zoom-to-scale"],
         "_allIds": [32],
         "_controlsThatFit": [32],
         "_csvExporting": [32],

package/dist/components/map-layer-picker2.js

@@ -5,7 +5,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getLocaleComponentStrings } from './locale.js';
-import { c as getMapLayerHash, d as getMapTableHash } from './mapViewUtils.js';
+import { d as getMapLayerHash, e as getMapTableHash } from './mapViewUtils.js';
 import { s as state } from './publicNotificationStore.js';
 import { d as defineCustomElement$f } from './action.js';
 import { d as defineCustomElement$e } from './button.js';

package/dist/components/map-select-tools2.js

@@ -5,7 +5,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
-import { b as goToSelection, h as highlightFeatures, e as getFeatureLayerView } from './mapViewUtils.js';
+import { b as goToSelection, h as highlightFeatures, c as getFeatureLayerView } from './mapViewUtils.js';
 import { e as queryObjectIds, g as getQueryGeoms, f as queryFeaturesByGeometry } from './queryUtils.js';
 import { E as EWorkflowType } from './interfaces.js';
 import { s as state } from './publicNotificationStore.js';

package/dist/components/mapViewUtils.js

@@ -264,4 +264,4 @@ async function goToSelection(ids, layerView, mapView, flashFeatures = true, feat
     }
 }
 
-export { getAllLayers as a, goToSelection as b, getMapLayerHash as c, getMapTableHash as d, getFeatureLayerView as e, getIdSets as f, getLayerOrTable as g, highlightFeatures as h, highlightAllFeatures as i };
+export { getAllLayers as a, goToSelection as b, getFeatureLayerView as c, getMapLayerHash as d, getMapTableHash as e, getIdSets as f, getLayerOrTable as g, highlightFeatures as h, highlightAllFeatures as i };

package/dist/components/refine-selection2.js

@@ -5,7 +5,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { e as ESelectionMode, b as EDrawMode, E as EWorkflowType } from './interfaces.js';
-import { e as getFeatureLayerView, f as getIdSets, i as highlightAllFeatures } from './mapViewUtils.js';
+import { c as getFeatureLayerView, f as getIdSets, i as highlightAllFeatures } from './mapViewUtils.js';
 import { f as queryFeaturesByGeometry } from './queryUtils.js';
 import { s as state } from './publicNotificationStore.js';
 import { g as getLocaleComponentStrings } from './locale.js';

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

@@ -5,7 +5,7 @@
  */
 import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-164d485a.js';
 import { g as getLocaleComponentStrings, l as loadModules } from './locale-bcbea4ef.js';
-import { q as queryFeaturesByID, g as getLayerOrTable, d as goToSelection, e as queryAllIds, f as queryFeatureIds, i as queryFeaturesByGlobalID } from './mapViewUtils-c83c03a4.js';
+import { q as queryFeaturesByID, g as getLayerOrTable, d as goToSelection, e as queryAllIds, f as queryFeatureIds, i as queryFeaturesByGlobalID, b as getFeatureLayerView } from './mapViewUtils-c83c03a4.js';
 import { d as downloadCSV } from './downloadUtils-25aa808f.js';
 import './esri-loader-1b324844.js';
 import './_commonjsHelpers-0f74c230.js';
@@ -161,7 +161,10 @@ const LayerTable = class {
         this.shareIncludeEmbed = undefined;
         this.shareIncludeSocial = undefined;
         this.showNewestFirst = undefined;
+        this.sortField = undefined;
+        this.sortOrder = undefined;
         this.zoomAndScrollToSelected = undefined;
+        this.zoomToScale = undefined;
         this._allIds = [];
         this._controlsThatFit = undefined;
         this._csvExporting = false;
@@ -316,7 +319,7 @@ const LayerTable = class {
                 }
             });
             if (layerView) {
-                await goToSelection([oid], layerView, this.mapView, true);
+                await goToSelection([oid], layerView, this.mapView, true, undefined, this.zoomToScale);
             }
         }
     }
@@ -1187,13 +1190,20 @@ const LayerTable = class {
         this._deleteEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsDelete;
     }
     /**
-     * Sort the objectid field in descending order
+     * Sort the table with the configured field in the configured sort order
      */
     async _sortTable() {
-        if (this._table && this._layer && this.showNewestFirst) {
+        var _a, _b, _c, _d, _e, _f;
+        let sortField = this.sortField ? this.sortField : this._layer.objectIdField;
+        if (((_c = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.layerOptions) === null || _b === void 0 ? void 0 : _b.layers) === null || _c === void 0 ? void 0 : _c.length) > 0) {
+            const configuredLayer = (_d = this.mapInfo.layerOptions) === null || _d === void 0 ? void 0 : _d.layers.filter((layer) => layer.id === this._layer.id);
+            sortField = ((_f = (_e = configuredLayer[0]) === null || _e === void 0 ? void 0 : _e.fields) === null || _f === void 0 ? void 0 : _f.includes(this.sortField)) ? this.sortField : this._layer.objectIdField;
+        }
+        const sortOrder = this.sortOrder ? this.sortOrder : 'desc';
+        if (this._table && this._layer) {
             await this._table.when();
             await this._layer.when(() => {
-                this._table.sortColumn(this._layer.objectIdField, "desc");
+                this._table.sortColumn(sortField, sortOrder);
             });
         }
     }
@@ -1439,8 +1449,11 @@ const LayerTable = class {
      *
      * @returns a promise that will resolve when the operation is complete
      */
-    _zoom() {
-        this._table.zoomToSelection();
+    async _zoom() {
+        if (this._layer) {
+            const selectedLayerView = await getFeatureLayerView(this.mapView, this._layer.id);
+            await goToSelection(this.selectedIds, selectedLayerView, this.mapView, true, undefined, this.zoomToScale);
+        }
     }
     /**
      * Handles layer selection change to show new table

package/dist/esm/crowdsource-manager.entry.js

@@ -70,6 +70,8 @@ const CrowdsourceManager = class {
         this.theme = "light";
         this.zoomAndScrollToSelected = false;
         this.zoomToScale = undefined;
+        this.sortField = undefined;
+        this.sortOrder = undefined;
         this._expandPopup = this.hideMapOnLoad;
         this._hideFooter = false;
         this._hideTable = false;
@@ -176,9 +178,7 @@ const CrowdsourceManager = class {
      * Renders the component.
      */
     render() {
-        const borderClass = this._isMobile && this._hideTable ? "border-width-0" :
-            this._isMobile ? "border-bottom-width-0" : "";
-        return (h(Host, null, h("calcite-shell", { class: "position-relative" }, h("calcite-panel", { class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
+        return (h(Host, null, h("calcite-shell", { class: "position-relative" }, h("calcite-panel", { class: `width-full height-full border-width-0` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
     }
     /**
      * Called after each render
@@ -348,7 +348,7 @@ const CrowdsourceManager = class {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
         const popupNodeClass = !this._expandPopup ? "height-full" : ((_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.length) === 1 || this._isMobile ? "position-absolute-0" : "position-absolute-50";
         const headerClass = this._isMobile ? "display-none height-0" : "";
-        const headerTheme = !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
+        const headerTheme = this.popupHeaderColor ? "" : !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
         const containerClass = this._isMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isMobile ? "display-none height-0" : "";
         return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass}`, style: {
                 '--calcite-color-foreground-1': this.popupHeaderColor,
@@ -399,7 +399,7 @@ const CrowdsourceManager = class {
             ((_a = this.defaultGlobalId) === null || _a === void 0 ? void 0 : _a.indexOf(",")) > -1 ? this.defaultGlobalId.split(",") : [this.defaultGlobalId];
         const defaultOid = !this.defaultOid ? undefined :
             ((_b = this.defaultOid) === null || _b === void 0 ? void 0 : _b.indexOf(",")) > -1 ? this.defaultOid.split(",").map(o => parseInt(o, 10)) : [parseInt(this.defaultOid, 10)];
-        return (h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip)))) : undefined, h("div", { class: `width-full height-full position-relative` }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
+        return (h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip)))) : undefined, h("div", { class: `width-full height-full position-relative` }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, sortField: this.sortField, sortOrder: this.sortOrder, zoomAndScrollToSelected: this.zoomAndScrollToSelected, zoomToScale: this.zoomToScale }))));
     }
     /**
      * Update the component layout when its size changes

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

@@ -44,7 +44,7 @@ const CrowdsourceReporter = class {
         this.theme = "light";
         this.enableZoom = true;
         this.zoomToScale = undefined;
-        this.layerExpressions = undefined;
+        this.layerExpressions = [];
         this._mapInfo = undefined;
         this._flowItems = [];
         this._sidePanelCollapsed = false;
@@ -87,7 +87,7 @@ const CrowdsourceReporter = class {
         this.setCurrentFeature(evt.detail.selectedFeature[0]);
         void this.highlightOnMap(evt.detail.selectedFeature[0]);
         this.selectedFeatureIndex = evt.detail.selectedFeatureIndex;
-        //update the feature details to reflect the like dislike values 
+        //update the feature details to reflect the like dislike values
         await this._featureDetails.refresh(evt.detail.selectedFeature[0]);
     }
     //--------------------------------------------------------------------------