@esri/solutions-components 0.8.11 → 0.8.12

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

@@ -165,7 +165,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;
@@ -320,7 +323,7 @@ const LayerTable = class {
                 }
             });
             if (layerView) {
-                await mapViewUtils.goToSelection([oid], layerView, this.mapView, true);
+                await mapViewUtils.goToSelection([oid], layerView, this.mapView, true, undefined, this.zoomToScale);
             }
         }
     }
@@ -1191,13 +1194,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);
             });
         }
     }
@@ -1443,8 +1453,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 mapViewUtils.getFeatureLayerView(this.mapView, this._layer.id);
+            await mapViewUtils.goToSelection(this.selectedIds, selectedLayerView, this.mapView, true, undefined, this.zoomToScale);
+        }
     }
     /**
      * Handles layer selection change to show new table

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

@@ -74,6 +74,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;
@@ -180,9 +182,7 @@ const CrowdsourceManager = class {
      * Renders the component.
      */
     render() {
-        const borderClass = this._isMobile && this._hideTable ? "border-width-0" :
-            this._isMobile ? "border-bottom-width-0" : "";
-        return (index.h(index.Host, null, index.h("calcite-shell", { class: "position-relative" }, index.h("calcite-panel", { class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
+        return (index.h(index.Host, null, index.h("calcite-shell", { class: "position-relative" }, index.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
@@ -352,7 +352,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 (index.h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass}`, style: {
                 '--calcite-color-foreground-1': this.popupHeaderColor,
@@ -403,7 +403,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 (index.h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (index.h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, index.h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), index.h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, index.h("span", null, tooltip)))) : undefined, index.h("div", { class: `width-full height-full position-relative` }, index.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 (index.h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (index.h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, index.h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), index.h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, index.h("span", null, tooltip)))) : undefined, index.h("div", { class: `width-full height-full position-relative` }, index.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