@esri/solutions-components 0.7.9 → 0.7.11

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

@@ -60,6 +60,7 @@ export class CrowdsourceManager {
         this._expandPopup = false;
         this._translations = undefined;
         this._layoutMode = ELayoutMode.GRID;
+        this._mapInfo = undefined;
         this._mapView = undefined;
         this._panelOpen = true;
         this._tableOnly = false;
@@ -388,7 +389,7 @@ export class CrowdsourceManager {
                 return true;
             }
         });
-        return mapInfo;
+        return Object.assign({}, mapInfo);
     }
     /**
      * Set the current map info when maps change
@@ -992,6 +993,7 @@ export class CrowdsourceManager {
             "_expandPopup": {},
             "_translations": {},
             "_layoutMode": {},
+            "_mapInfo": {},
             "_mapView": {},
             "_panelOpen": {},
             "_tableOnly": {}

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

@@ -22,7 +22,7 @@ import { Host, h } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
 import { getLocaleComponentStrings } from "../../utils/locale";
 import { getLayerOrTable, goToSelection } from "../../utils/mapViewUtils";
-import { queryAllIds, queryFeaturesByGlobalID } from "../../utils/queryUtils";
+import { queryAllIds, queryFeatureIds, queryFeaturesByGlobalID } from "../../utils/queryUtils";
 import * as downloadUtils from "../../utils/downloadUtils";
 import "@esri/instant-apps-components/dist/components/instant-apps-social-share";
 export class LayerTable {
@@ -31,6 +31,10 @@ export class LayerTable {
          * number[]: A list of all IDs for the current layer
          */
         this._allIds = [];
+        /**
+         * boolean: When true the ctrl key is currently pressed
+         */
+        this._ctrlIsPressed = false;
         /**
          * boolean: When true the default global id provided via url param has been honored and should now be ignored
          */
@@ -39,6 +43,14 @@ export class LayerTable {
          * boolean: When true the default OID provided via url param has been honored and should now be ignored
          */
         this._defaultOidHonored = false;
+        /**
+         * boolean: When true the shift key is currently pressed
+         */
+        this._shiftIsPressed = false;
+        /**
+         * boolean: When true any onChange handeling will be skipped
+         */
+        this._skipOnChange = false;
         /**
          * bool: When true the table is being sorted
          */
@@ -129,6 +141,15 @@ export class LayerTable {
             }
         });
     }
+    /**
+     * watch for changes in map info and recheck the tool infos
+     */
+    async mapInfoWatchHandler() {
+        var _a;
+        if (((_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            this._initToolInfos();
+        }
+    }
     /**
      * watch for changes in map view and get the first layer
      */
@@ -243,6 +264,8 @@ export class LayerTable {
     async componentDidLoad() {
         this._resizeObserver.observe(this._toolbar);
         document.onclick = (e) => this._handleDocumentClick(e);
+        document.onkeydown = (e) => this._handleKeyDown(e);
+        document.onkeyup = (e) => this._handleKeyUp(e);
     }
     /**
      * Called after the component is rendered
@@ -722,18 +745,8 @@ export class LayerTable {
             this._initColumnsInfo();
             this._checkEditEnabled();
             await this._table.when(() => {
-                this._table.highlightIds.on("change", () => {
-                    // https://github.com/Esri/solutions-components/issues/365
-                    this._selectedIndexes = this._table.highlightIds.toArray().reverse();
-                    if (this._showOnlySelected) {
-                        if (this._featuresSelected()) {
-                            this._table.filterBySelection();
-                        }
-                        else {
-                            this._toggleShowSelected();
-                        }
-                    }
-                    this.featureSelectionChange.emit(this._selectedIndexes);
+                this._table.highlightIds.on("change", (evt) => {
+                    void this._handleOnChange(evt);
                 });
                 this.reactiveUtils.watch(() => this._table.activeSortOrders, (sortOrders) => {
                     var _a, _b, _c, _d;
@@ -743,6 +756,93 @@ export class LayerTable {
             });
         }
     }
+    async _handleOnChange(evt) {
+        const ids = [...this._table.highlightIds.toArray()];
+        if (!this._skipOnChange) {
+            if (!this._ctrlIsPressed && !this._shiftIsPressed) {
+                if (this._selectedIndexes.length > 0) {
+                    this._skipOnChange = true;
+                    // only readd in specific case where we have multiple selected and then click one of the currently selected
+                    const reAdd = this._selectedIndexes.length > 1 && evt.removed.length === 1;
+                    const newIndexes = reAdd ? evt.removed : ids.filter(id => this._selectedIndexes.indexOf(id) < 0);
+                    this._clearSelection();
+                    this._selectedIndexes = [...newIndexes];
+                    if (newIndexes.length > 0) {
+                        this._table.highlightIds.add(newIndexes[0]);
+                    }
+                }
+                else {
+                    // https://github.com/Esri/solutions-components/issues/365
+                    this._selectedIndexes = ids.reverse();
+                }
+            }
+            else if (this._ctrlIsPressed) {
+                this._selectedIndexes = ids.reverse();
+            }
+            else if (this._shiftIsPressed) {
+                this._skipOnChange = true;
+                this._previousCurrentId = this._currentId;
+                this._currentId = [...this._table.highlightIds.toArray()].reverse()[0];
+                if (this._previousCurrentId !== this._currentId) {
+                    // query the layer based on current sort and filters then grab between the current id and previous id
+                    const orderBy = this._table.activeSortOrders.reduce((prev, cur) => {
+                        prev.push(`${cur.fieldName} ${cur.direction}`);
+                        return prev;
+                    }, []);
+                    const oids = await queryFeatureIds(this._layer, this._layer.definitionExpression, orderBy);
+                    let isBetween = false;
+                    const _start = this._table.viewModel.getObjectIdIndex(this._previousCurrentId);
+                    const _end = this._table.viewModel.getObjectIdIndex(this._currentId);
+                    const startIndex = _start < _end ? _start : _end;
+                    const endIndex = _end > _start ? _end : _start;
+                    this._selectedIndexes = oids.reduce((prev, cur) => {
+                        const id = cur;
+                        const index = this._table.viewModel.getObjectIdIndex(id);
+                        if ((id === this._currentId || id === this._previousCurrentId)) {
+                            isBetween = !isBetween;
+                            if (prev.indexOf(id) < 0) {
+                                prev.push(id);
+                            }
+                        }
+                        // The oids are sorted so after we have reached the start or end oid add all ids even if the index is -1.
+                        // Index of -1 will occur for features between the start and and oid if
+                        // you select a row then scroll faster than the FeatureTable loads the data to select the next id
+                        if (isBetween && prev.indexOf(id) < 0) {
+                            prev.push(id);
+                        }
+                        // Also add index based check.
+                        // In some cases the FeatureTable and Layer query will have differences in how null/undefined field values are sorted
+                        if ((this._selectedIndexes.indexOf(id) > -1 || (index >= startIndex && index <= endIndex)) && prev.indexOf(id) < 0 && index > -1) {
+                            prev.push(id);
+                        }
+                        return prev;
+                    }, []);
+                    this._table.highlightIds.addMany(this._selectedIndexes.filter(i => ids.indexOf(i) < 0));
+                }
+            }
+            this._finishOnChange();
+        }
+        else {
+            this._skipOnChange = false;
+        }
+        this._currentId = [...this._table.highlightIds.toArray()].reverse()[0];
+    }
+    /**
+     * Handle any updates after a selection change has occured and emit the results
+     *
+     * @returns void
+     */
+    _finishOnChange() {
+        if (this._showOnlySelected) {
+            if (this._featuresSelected()) {
+                this._table.filterBySelection();
+            }
+            else {
+                this._toggleShowSelected();
+            }
+        }
+        this.featureSelectionChange.emit(this._selectedIndexes);
+    }
     /**
      * Reset basic table props
      *
@@ -878,6 +978,24 @@ export class LayerTable {
             }
         }
     }
+    /**
+     * Keep track of key down for ctrl and shift
+     *
+     * @returns void
+     */
+    _handleKeyDown(e) {
+        this._ctrlIsPressed = e.ctrlKey;
+        this._shiftIsPressed = e.shiftKey;
+    }
+    /**
+     * Keep track of key up for ctrl and shift
+     *
+     * @returns void
+     */
+    _handleKeyUp(e) {
+        this._ctrlIsPressed = e.ctrlKey;
+        this._shiftIsPressed = e.shiftKey;
+    }
     /**
      * Show filter component in modal
      *
@@ -885,15 +1003,19 @@ export class LayerTable {
      */
     _filterModal() {
         var _a, _b, _c;
-        return (h("calcite-modal", { "aria-labelledby": "modal-title", kind: "brand", onCalciteModalClose: () => this._closeFilter(), open: this._filterOpen, widthScale: "s" }, 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)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: () => this._closeFilter(), layerExpressions: this._layerExpressions, ref: (el) => this._filterList = el, view: this.mapView }))));
+        return (h("calcite-modal", { "aria-labelledby": "modal-title", kind: "brand", onCalciteModalClose: async () => this._closeFilter(), open: this._filterOpen, widthScale: "s" }, 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)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), layerExpressions: this._layerExpressions, ref: (el) => this._filterList = el, view: this.mapView }))));
     }
     /**
      * Close the filter modal
      *
      * @returns void
      */
-    _closeFilter() {
-        this._filterOpen = false;
+    async _closeFilter() {
+        if (this._filterOpen) {
+            // reset allIds
+            this._allIds = await queryAllIds(this._layer);
+            this._filterOpen = false;
+        }
     }
     /**
      * Show delete confirmation message
@@ -966,8 +1088,10 @@ export class LayerTable {
     _selectAll() {
         const ids = this._allIds;
         this._table.highlightIds.removeAll();
+        this._skipOnChange = true;
         this._table.highlightIds.addMany(ids);
         this._selectedIndexes = ids;
+        this._finishOnChange();
     }
     /**
      * Toggle the show only selected flag
@@ -1027,8 +1151,10 @@ export class LayerTable {
             }
             return prev;
         }, []).sort((a, b) => a - b);
+        this._skipOnChange = true;
         this._table.highlightIds.addMany(ids);
         this._selectedIndexes = ids;
+        this._finishOnChange();
     }
     /**
      * Export all selected rows as CSV
@@ -1513,6 +1639,9 @@ export class LayerTable {
             }, {
                 "propName": "_controlsThatFit",
                 "methodName": "_controlsThatFitWatchHandler"
+            }, {
+                "propName": "mapInfo",
+                "methodName": "mapInfoWatchHandler"
             }, {
                 "propName": "mapView",
                 "methodName": "mapViewWatchHandler"

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

@@ -126,6 +126,7 @@ export class MapCard {
         // on the first render use the default webmap id if provided otherwise use the first child of the provided mapInfos
         const loadDefaultMap = !this._defaultWebmapHonored && this.defaultWebmapId;
         const defaultMap = (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(i => i.id === this.defaultWebmapId);
+        const mapConfigChanged = JSON.stringify(webMapInfo) !== JSON.stringify(this._webMapInfo);
         this._webMapInfo = loadDefaultMap && defaultMap ? defaultMap[0] :
             !(webMapInfo === null || webMapInfo === void 0 ? void 0 : webMapInfo.id) && this.mapInfos.length > 0 ? this.mapInfos[0] : webMapInfo;
         const id = this._webMapInfo.id;
@@ -156,6 +157,15 @@ export class MapCard {
             this._defaultWebmapHonored = true;
             this._mapPicker.setMapByID(id);
         }
+        else if (mapConfigChanged) {
+            // Map is the same so no need to reload but we need to update for any changes from the config
+            this._searchConfiguration = this._webMapInfo.searchConfiguration;
+            this.beforeMapChanged.emit();
+            this.mapChanged.emit({
+                id: id,
+                mapView: this.mapView
+            });
+        }
     }
     /**
      * Add/remove the home widget base on enableHome prop

package/dist/collection/components/map-picker/map-picker.js

@@ -132,7 +132,7 @@ export class MapPicker {
      * @protected
      */
     _getMapNameList(show) {
-        const listClass = show ? "map-list" : "display-none";
+        const listClass = show ? "map-list border-bottom-1" : "display-none";
         return (h("div", { class: listClass }, h("calcite-list", { id: "mapList", ref: (el) => this._list = el, selectionAppearance: "border", selectionMode: "single" }, this.mapInfos.map(mapInfo => {
             return (h("calcite-list-item", { label: mapInfo.name, onClick: () => this._webMapSelected(mapInfo), selected: mapInfo.id === this._loadedId, value: mapInfo.id }));
         }))));

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

@@ -94,10 +94,10 @@
                   operator: " AND ",
                   expressions: [
                     {
-                      definitionExpression: "OBJECTID > 700",
+                      definitionExpression: "OBJECTID > 690",
                       id: 1701793260225,
                       index: 0,
-                      name: "greater than 700",
+                      name: "greater than 690",
                       active: false
                     }
                   ]
@@ -145,7 +145,25 @@
           }, {
             id: "b422923b7a4c4958b9788118255f2f0a",
             name: "Floor aware map"
-          }]
+          }, {
+            id: "5dc8ae351ff34280a75f7ffe1115b36b",
+            name: "Standalone table",
+            filterConfig: {
+              "mapId": "5dc8ae351ff34280a75f7ffe1115b36b",
+              "layerExpressions": [{
+                "id": "18c4a8cda15-layer-2",
+                "title": "Table_1",
+                "operator": " AND ",
+                "expressions": [{
+                  "definitionExpression": "OBJECTID > 14",
+                  "id": 1702486334825,
+                  "index": 0,
+                  "name": "> 14",
+                  "active": false
+                }]
+              }]
+            }
+          }, ]
         ];
       }
     </script>

package/dist/collection/utils/queryUtils.js

@@ -165,6 +165,22 @@ export async function queryFeaturesByGeometry(start, layer, geometry, featuresCo
         queryFeaturesByGeometry(start += num, layer, geometry, featuresCollection) :
         Promise.resolve(featuresCollection);
 }
+/**
+ * Query the layer for feature ids that match the provided where clause.
+ * If no where clause is provided all features will be returned.
+ *
+ * @param layer the layer to retrieve features from
+ * @param where the where clause for the query
+ * @param orderBy any sort order to apply to the query
+ *
+ * @returns Promise with the ids from the layer that match the where and are sorted as defined by orderBy
+ */
+export async function queryFeatureIds(layer, where, orderBy) {
+    const query = layer.createQuery();
+    query.where = where ? where : "1=1";
+    query.orderByFields = orderBy;
+    return await layer.queryObjectIds(query);
+}
 /**
  * Query the layer for the extent of features with the provided OIDs
  *

package/dist/collection/utils/queryUtils.ts

@@ -212,6 +212,27 @@ export async function queryFeaturesByGeometry(
     Promise.resolve(featuresCollection);
 }
 
+/**
+ * Query the layer for feature ids that match the provided where clause.
+ * If no where clause is provided all features will be returned.
+ *
+ * @param layer the layer to retrieve features from
+ * @param where the where clause for the query
+ * @param orderBy any sort order to apply to the query
+ *
+ * @returns Promise with the ids from the layer that match the where and are sorted as defined by orderBy
+ */
+export async function queryFeatureIds(
+  layer: any,
+  where: any,
+  orderBy: any
+): Promise<number[]> {
+  const query = layer.createQuery();
+  query.where = where ? where : "1=1";
+  query.orderByFields = orderBy;
+  return await layer.queryObjectIds(query);
+}
+
 /**
  * Query the layer for the extent of features with the provided OIDs
  *

package/dist/components/crowdsource-manager.js

@@ -106,6 +106,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         this._expandPopup = false;
         this._translations = undefined;
         this._layoutMode = ELayoutMode.GRID;
+        this._mapInfo = undefined;
         this._mapView = undefined;
         this._panelOpen = true;
         this._tableOnly = false;
@@ -434,7 +435,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
                 return true;
             }
         });
-        return mapInfo;
+        return Object.assign({}, mapInfo);
     }
     /**
      * Set the current map info when maps change
@@ -524,6 +525,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         "_expandPopup": [32],
         "_translations": [32],
         "_layoutMode": [32],
+        "_mapInfo": [32],
         "_mapView": [32],
         "_panelOpen": [32],
         "_tableOnly": [32]