@esri/solutions-components 0.6.6 → 0.6.8

package/dist/collection/components/basemap-gallery/test/basemap-gallery.spec.js

@@ -0,0 +1,37 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { BasemapGallery } from "../basemap-gallery";
+xdescribe('basemap-gallery', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [BasemapGallery],
+      html: `<basemap-gallery></basemap-gallery>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <basemap-gallery>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </basemap-gallery>
+    `);
+  });
+});

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

@@ -24,9 +24,11 @@ import { ELayoutMode } from "../../utils/interfaces";
 export class CrowdsourceManager {
   constructor() {
     this.classicGrid = false;
+    this.showNewestFirst = false;
     this.hideHeader = true;
     this.hideMap = false;
     this.mapInfos = [];
+    this.searchConfiguration = undefined;
     this.zoomAndScrollToSelected = false;
     this._translations = undefined;
     this._layoutMode = ELayoutMode.GRID;
@@ -83,7 +85,7 @@ export class CrowdsourceManager {
    * Renders the component.
    */
   render() {
-    return (h(Host, null, h("calcite-shell", null, h("calcite-panel", { class: "width-full height-full", heading: this.hideHeader ? undefined : this._translations.header }, this.hideHeader ? undefined : (h("layout-manager", { slot: "header-actions-end" })), this._getBody(this._layoutMode, this._panelOpen, this.hideMap)))));
+    return (h(Host, null, h("calcite-shell", { class: "position-relative" }, h("calcite-panel", { class: "width-full height-full", heading: this.hideHeader ? undefined : this._translations.header }, this.hideHeader ? undefined : (h("layout-manager", { slot: "header-actions-end" })), this._getBody(this._layoutMode, this._panelOpen, this.hideMap)))));
   }
   //--------------------------------------------------------------------------
   //
@@ -249,7 +251,7 @@ export class CrowdsourceManager {
     const toggleSlot = this.classicGrid && layoutMode !== ELayoutMode.VERTICAL ? "footer" :
       this.classicGrid && layoutMode === ELayoutMode.VERTICAL ? "panel-end" :
         layoutMode === ELayoutMode.HORIZONTAL ? "header" : "panel-start";
-    return (h("calcite-shell", { class: tableSizeClass + " border-bottom" }, h("calcite-action-bar", { class: "border", 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))), h("div", { class: "width-full height-full position-relative" }, h("layer-table", { mapView: this === null || this === void 0 ? void 0 : this._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
+    return (h("calcite-shell", { class: tableSizeClass + " border-bottom" }, h("calcite-action-bar", { class: "border", 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))), h("div", { class: "width-full height-full position-relative" }, h("layer-table", { mapView: this === null || this === void 0 ? void 0 : this._mapView, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
   }
   /**
    * Open/Close the appropriate panel.
@@ -302,6 +304,24 @@ export class CrowdsourceManager {
         "reflect": false,
         "defaultValue": "false"
       },
+      "showNewestFirst": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the table will be sorted by objectid in descending order by default"
+        },
+        "attribute": "show-newest-first",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "hideHeader": {
         "type": "boolean",
         "mutable": false,
@@ -360,6 +380,27 @@ export class CrowdsourceManager {
         },
         "defaultValue": "[]"
       },
+      "searchConfiguration": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ISearchConfiguration",
+          "resolved": "ISearchConfiguration",
+          "references": {
+            "ISearchConfiguration": {
+              "location": "import",
+              "path": "../../utils/interfaces",
+              "id": "src/utils/interfaces.ts::ISearchConfiguration"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ISearchConfiguration: Configuration details for the Search widget"
+        }
+      },
       "zoomAndScrollToSelected": {
         "type": "boolean",
         "mutable": false,

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

@@ -30,6 +30,10 @@ export class LayerTable {
      * number[]: A list of all IDs for the current layer
      */
     this._allIds = [];
+    /**
+     * bool: When true the table is being sorted
+     */
+    this._tableSorting = false;
     /**
      * Store a reference to the table node after it's first created
      * and initializes the FeatureTable
@@ -40,15 +44,16 @@ export class LayerTable {
      */
     this.onTableNodeCreate = (node) => {
       this._tableNode = node;
-      this._getTable(node);
     };
     this.mapView = undefined;
+    this.showNewestFirst = undefined;
     this.zoomAndScrollToSelected = undefined;
     this._alertOpen = false;
     this._fetchingData = false;
     this._layer = undefined;
     this._selectedIndexes = [];
     this._showOnlySelected = false;
+    this._sortActive = false;
     this._translations = undefined;
   }
   //--------------------------------------------------------------------------
@@ -63,7 +68,6 @@ export class LayerTable {
     this._fetchingData = true;
     const mapLayerIds = await getMapLayerIds(this.mapView);
     this._layer = await getLayer(this.mapView, mapLayerIds[0]);
-    this._resetTable();
     this.reactiveUtils.on(() => this.mapView, "click", (event) => {
       void this._mapClicked(event);
     });
@@ -74,9 +78,17 @@ export class LayerTable {
    */
   async _layerWatchHandler() {
     this._fetchingData = true;
-    this._resetTable();
+    await this._resetTable();
     this._fetchingData = false;
   }
+  /**
+   * When sortActive is false the user has not defined a sort and we should use the default sort
+   */
+  async _sortActiveWatchHandler() {
+    if (!this._sortActive) {
+      await this._sortTable();
+    }
+  }
   //--------------------------------------------------------------------------
   //
   //  Methods (public)
@@ -181,31 +193,39 @@ export class LayerTable {
    *
    * @returns void
    */
-  _getTable(node) {
+  async _getTable(node) {
     if (this._layer) {
-      this._table = new this.FeatureTable({
-        layer: this._layer,
-        view: this.mapView,
-        //editingEnabled: this._editEnabled,
-        highlightEnabled: true,
-        multiSortEnabled: false,
-        visibleElements: {
-          header: false,
-          menu: false
-        },
-        container: node
-      });
-      this._table.highlightIds.on("change", () => {
-        this._selectedIndexes = this._table.highlightIds.toArray();
-        if (this._showOnlySelected) {
-          if (this._selectedIndexes.length > 0) {
-            this._table.filterBySelection();
-          }
-          else {
-            this._toggleShowSelected();
-          }
-        }
-        this.featureSelectionChange.emit(this._selectedIndexes);
+      await this._layer.when(async () => {
+        this._table = new this.FeatureTable({
+          layer: this._layer,
+          view: this.mapView,
+          //editingEnabled: this._editEnabled,
+          highlightEnabled: true,
+          multiSortEnabled: false,
+          visibleElements: {
+            header: false,
+            menu: false
+          },
+          container: node
+        });
+        await this._table.when(async () => {
+          this._table.highlightIds.on("change", () => {
+            this._selectedIndexes = this._table.highlightIds.toArray();
+            if (this._showOnlySelected) {
+              if (this._selectedIndexes.length > 0) {
+                this._table.filterBySelection();
+              }
+              else {
+                this._toggleShowSelected();
+              }
+            }
+            this.featureSelectionChange.emit(this._selectedIndexes);
+          });
+          this.reactiveUtils.watch(() => this._table.activeSortOrders, (sortOrders) => {
+            var _a, _b;
+            this._sortActive = sortOrders.length > 0 && ((_a = sortOrders[0]) === null || _a === void 0 ? void 0 : _a.direction) === "asc" || ((_b = sortOrders[0]) === null || _b === void 0 ? void 0 : _b.direction) === "desc";
+          });
+        });
       });
     }
   }
@@ -214,9 +234,10 @@ export class LayerTable {
    *
    * @returns void
    */
-  _resetTable() {
+  async _resetTable() {
     if (this._layer && this._table) {
       this._clearSelection();
+      this._allIds = [];
       this.featureSelectionChange.emit(this._selectedIndexes);
       this._table.layer = this._layer;
       this._editEnabled = this._layer.editingEnabled;
@@ -224,6 +245,26 @@ export class LayerTable {
       this._table.editingEnabled = this._editEnabled;
       this._table.clearSelectionFilter();
       this._showOnlySelected = false;
+      this._sortActive = false;
+      await this._sortTable();
+    }
+  }
+  /**
+   * Sort the objectid field in descending order
+   *
+   * @returns void
+   */
+  async _sortTable() {
+    if (this._table && this._layer && !this._sortActive) {
+      if (!this._tableSorting && this.showNewestFirst) {
+        this._tableSorting = true;
+        await this._table.when(async () => {
+          await this._layer.when(async () => {
+            this._table.sortColumn(this._layer.objectIdField, "desc");
+            this._tableSorting = false;
+          });
+        });
+      }
     }
   }
   /**
@@ -402,14 +443,21 @@ export class LayerTable {
     const id = evt.detail[0];
     if (id !== this._layer.id || this._allIds.length === 0) {
       this._fetchingData = true;
-      this._table.highlightIds.removeAll();
       this._layer = await getLayer(this.mapView, id);
       this._allIds = await queryAllIds(this._layer);
+      if (!this._table) {
+        await this._getTable(this._tableNode);
+      }
+      await this._table.when(() => {
+        this._table.highlightIds.removeAll();
+      });
       this._selectedIndexes = [];
       this._table.layer = this._layer;
       this._table.render();
-      this._fetchingData = false;
     }
+    this._sortActive = false;
+    await this._sortTable();
+    this._fetchingData = false;
   }
   /**
    * Fetches the component's translations
@@ -454,6 +502,23 @@ export class LayerTable {
           "text": "esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
         }
       },
+      "showNewestFirst": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the table will be sorted by objectid in descending order by default"
+        },
+        "attribute": "show-newest-first",
+        "reflect": false
+      },
       "zoomAndScrollToSelected": {
         "type": "boolean",
         "mutable": false,
@@ -480,6 +545,7 @@ export class LayerTable {
       "_layer": {},
       "_selectedIndexes": {},
       "_showOnlySelected": {},
+      "_sortActive": {},
       "_translations": {}
     };
   }
@@ -537,6 +603,9 @@ export class LayerTable {
       }, {
         "propName": "_layer",
         "methodName": "_layerWatchHandler"
+      }, {
+        "propName": "_sortActive",
+        "methodName": "_sortActiveWatchHandler"
       }];
   }
   static get listeners() {

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

@@ -30,10 +30,3 @@
 .esri-zoom {
   display: none !important;
 }
-
-.map-tools {
-  position: absolute;
-  top: 40px;
-  right: 0px;
-  padding: 1rem;
-}

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

@@ -23,8 +23,7 @@ import { loadModules } from "../../utils/loadModules";
 // TODO navigation and accessability isn't right for the map list
 //   tab does not go into the list when it's open
 //   focus is not set when it opens
-// TODO clarify what the Home and List buttons are supposed to do
-// TODO handle zoom in/out
+// TODO clarify what the List button is supposed to do
 // TODO map list button tooltip does not work
 // TODO map list should close if the user clicks something else...hope this will be easy when I figure out how to set focus when it opens
 export class MapCard {
@@ -35,13 +34,14 @@ export class MapCard {
     this._loadedId = "";
     this.mapInfos = [];
     this.mapView = undefined;
+    this._searchConfiguration = undefined;
     this._webMapInfo = undefined;
   }
   /**
    * Listen for changes to map info and load the appropriate map
    */
   async mapInfoChange(evt) {
-    this._loadMap(evt.detail);
+    await this._loadMap(evt.detail);
   }
   //--------------------------------------------------------------------------
   //
@@ -58,7 +58,7 @@ export class MapCard {
    * Renders the component.
    */
   render() {
-    return (h(Host, null, h("map-picker", { mapInfos: this.mapInfos }), h("div", { class: "map-height", ref: (el) => (this._mapDiv = el) }), h("map-tools", { class: "map-tools" })));
+    return (h(Host, null, h("map-picker", { mapInfos: this.mapInfos }), h("div", { class: "map-height", ref: (el) => (this._mapDiv = el) }), h("map-tools", { mapView: this.mapView, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration })));
   }
   //--------------------------------------------------------------------------
   //
@@ -89,7 +89,7 @@ export class MapCard {
    *
    * @protected
    */
-  _loadMap(webMapInfo) {
+  async _loadMap(webMapInfo) {
     let id = webMapInfo === null || webMapInfo === void 0 ? void 0 : webMapInfo.id;
     // on the first render use the first child of the provided mapInfos
     this._webMapInfo = (id === "" || !id) && this.mapInfos.length > 0 ?
@@ -104,8 +104,12 @@ export class MapCard {
         map: webMap,
         resizeAlign: "top-left"
       });
-      this._loadedId = id;
-      this.mapChanged.emit(this.mapView);
+      await this.mapView.when(() => {
+        this._loadedId = id;
+        this._searchConfiguration = this._webMapInfo.searchConfiguration;
+        this.mapChanged.emit(this.mapView);
+        this.mapView.ui.add(this._mapTools, { position: "top-right", index: 0 });
+      });
     }
   }
   static get is() { return "map-card"; }
@@ -167,6 +171,7 @@ export class MapCard {
   }
   static get states() {
     return {
+      "_searchConfiguration": {},
       "_webMapInfo": {}
     };
   }

package/dist/collection/components/map-search/map-search.css

@@ -0,0 +1,24 @@
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host {
+  display: block;
+}
+
+.search-widget {
+  width: 100% !important;
+  border: 1px solid var(--calcite-ui-border-input);
+}