@esri/solutions-components 0.6.9 → 0.6.10

package/dist/assets/t9n/crowdsource-manager/resources.json

@@ -1,5 +1,6 @@
 {
 	"header": "Crowdsource Manager",
 	"open": "Open",
-	"close": "Close"
+	"close": "Close",
+	"information": "Information"
 }

package/dist/assets/t9n/crowdsource-manager/resources_en.json

@@ -1,5 +1,6 @@
 {
   "header": "Crowdsource Manager",
 	"open": "Open",
-	"close": "Close"
+	"close": "Close",
+	"information": "Information"
 }

package/dist/assets/t9n/info-card/resources.json

@@ -2,5 +2,8 @@
   "fetchingData": "Fetching data",
   "edit": "Edit",
   "enableEditing": "Update capability must be enabled on the layer.",
-  "editDisabled": "Editing Disabled"
+  "editDisabled": "Editing Disabled",
+  "next": "Next",
+  "back": "Back",
+  "indexOfTotal": "{{index}} of {{total}}"
 }

package/dist/assets/t9n/info-card/resources_en.json

@@ -2,5 +2,8 @@
   "fetchingData": "Fetching data",
   "edit": "Edit",
   "enableEditing": "Update capability must be enabled on the layer.",
-  "editDisabled": "Editing Disabled"
+  "editDisabled": "Editing Disabled",
+  "next": "Next",
+  "back": "Back",
+  "indexOfTotal": "{{index}} of {{total}}"
 }

package/dist/assets/t9n/layer-table/resources.json

@@ -16,5 +16,6 @@
   "deleteRows": "Delete Data",
   "deleteDisabled": "Delete Disabled",
   "editMultipleDisabled": "Edit Multiple Disabled",
-  "showAll": "Show all"
+  "showAll": "Show all",
+  "recordsSelected": "{{total}} records, {{selected}} selected"
 }

package/dist/assets/t9n/layer-table/resources_en.json

@@ -16,5 +16,6 @@
   "deleteRows": "Delete Data",
   "deleteDisabled": "Delete Disabled",
   "editMultipleDisabled": "Edit Multiple Disabled",
-  "showAll": "Show all"
+  "showAll": "Show all",
+  "recordsSelected": "{{total}} records, {{selected}} selected"
 }

package/dist/assets/t9n/map-tools/resources.json

@@ -1,9 +1,6 @@
 {
-  "home": "Home",
   "legend": "Legend",
   "search": "Search",
-  "zoomIn": "Zoom In",
-  "zoomOut": "Zoom Out",
   "expand": "Expand",
   "basemap": "Basemap"
 }

package/dist/assets/t9n/map-tools/resources_en.json

@@ -1,9 +1,6 @@
 {
-  "home": "Home",
   "legend": "Legend",
   "search": "Search",
-  "zoomIn": "Zoom In",
-  "zoomOut": "Zoom Out",
   "expand": "Expand",
   "basemap": "Basemap"
 }

package/dist/cjs/basemap-gallery_5.cjs.entry.js

@@ -193,7 +193,7 @@ const MapLegend = class {
 };
 MapLegend.style = mapLegendCss;
 
-const mapPickerCss = ":host{display:block}.width-full{width:100%}.height-full{height:100%}.display-flex{display:flex}.border-bottom-1{border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}.action-bar-size{height:51px;width:100%}.map-list{position:absolute;display:flex;flex-direction:column;overflow:hidden;animation:calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;background-color:var(--calcite-scrim-background);z-index:1;width:100%;height:-moz-fit-content;height:fit-content}.display-none{display:none}";
+const mapPickerCss = ":host{display:block}.width-full{width:100%}.height-full{height:100%}.display-flex{display:flex}.border-bottom-1{border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}.action-bar-size{height:51px;width:100%}.map-list{position:absolute;display:flex;flex-direction:column;overflow:hidden;animation:calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;background-color:var(--calcite-scrim-background);z-index:1000;width:100%;height:-moz-fit-content;height:fit-content}.display-none{display:none}.action-bar-color{background-color:var(--calcite-ui-border-3) !important}";
 
 const MapPicker = class {
   constructor(hostRef) {
@@ -273,7 +273,7 @@ const MapPicker = class {
   _getMapPicker() {
     var _a;
     const mapListIcon = this._mapListExpanded ? "chevron-up" : "chevron-down";
-    return (index.h("calcite-button", { alignment: "icon-end-space-between", appearance: "solid", class: "width-full height-full", iconEnd: mapListIcon, kind: "neutral", onClick: () => this._chooseMap(), width: "full" }, (_a = this._webMapInfo) === null || _a === void 0 ? void 0 : _a.name));
+    return (index.h("calcite-button", { alignment: "icon-end-space-between", appearance: "transparent", class: "width-full height-full", iconEnd: mapListIcon, kind: "neutral", onClick: () => this._chooseMap(), width: "full" }, (_a = this._webMapInfo) === null || _a === void 0 ? void 0 : _a.name));
   }
   /**
    * Create the toolbar (controls used for map and app interactions)
@@ -283,7 +283,7 @@ const MapPicker = class {
    * @protected
    */
   _getToolbar() {
-    return (index.h("div", { class: "display-flex" }, index.h("calcite-action-bar", { class: "border-bottom-1 action-bar-size", "expand-disabled": true, layout: "horizontal", slot: "header" }, this._getMapPicker())));
+    return (index.h("div", { class: "display-flex" }, index.h("calcite-action-bar", { class: "action-bar-color border-bottom-1 action-bar-size", "expand-disabled": true, layout: "horizontal", slot: "header" }, this._getMapPicker())));
   }
   /**
    * Get a pick list for all maps in mapInfos
@@ -500,7 +500,7 @@ const MapSearch = class {
 };
 MapSearch.style = mapSearchCss;
 
-const mapToolsCss = ":host{display:block}.display-none{display:none}.border{border:1px solid var(--calcite-ui-border-3)}.margin-top-1-2{margin-top:0.5rem}";
+const mapToolsCss = ":host{display:block}.display-none{display:none}.border{border:1px solid var(--calcite-ui-border-3)}.margin-top-1-2{margin-top:0.5rem}.square-40{width:40px;height:40px}.width-40{width:40px}.square-40-41{width:40px;height:41px}";
 
 const MapTools = class {
   constructor(hostRef) {
@@ -520,14 +520,6 @@ const MapTools = class {
   //  Watch handlers
   //
   //--------------------------------------------------------------------------
-  /**
-   * Store the home extent when the map view changes
-   */
-  async mapViewWatchHandler() {
-    await this.mapView.when(() => {
-      this._homeExtent = this.mapView.extent;
-    });
-  }
   /**
    * When the _showBasemapWidget property is true display the basemap gallery
    */
@@ -590,7 +582,7 @@ const MapTools = class {
     const searchClass = this._showSearchWidget ? "" : "display-none";
     const basemapClass = this._showBasemapWidget ? "" : "display-none";
     const legendClass = this._showLegendWidget ? "" : "display-none";
-    return (index.h(index.Host, null, index.h("div", null, index.h("calcite-action", { alignment: "center", class: "border", compact: false, icon: toggleIcon, onClick: () => { this._toggleTools(); }, text: "" }), index.h("calcite-action-bar", { class: `border margin-top-1-2 ${toolsClass}`, "expand-disabled": true, layout: this.layout }, this._getActionGroup("home", false, this._translations.home, () => void this._goHome()), this._getActionGroup("plus", false, this._translations.zoomIn, () => void this._zoomIn()), this._getActionGroup("minus", false, this._translations.zoomOut, () => void this._zoomOut()), this._getActionGroup("legend", false, this._translations.legend, () => this._showLegend()), this._getActionGroup("magnifying-glass", false, this._translations.search, () => this._search()), this._getActionGroup("expand", false, this._translations.expand, () => this._expand()), this._getActionGroup("basemap", false, this._translations.basemap, () => this._toggleBasemapPicker()))), index.h("basemap-gallery", { class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), index.h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, searchConfiguration: this.searchConfiguration }), index.h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } })));
+    return (index.h(index.Host, null, index.h("div", null, index.h("calcite-action", { alignment: "center", class: "border square-40", compact: false, icon: toggleIcon, onClick: () => { this._toggleTools(); }, scale: "s", text: "" }), index.h("calcite-action-bar", { class: `width-40 border margin-top-1-2 ${toolsClass}`, "expand-disabled": true, layout: this.layout }, this._getActionGroup("legend", false, this._translations.legend, () => this._showLegend()), this._getActionGroup("magnifying-glass", false, this._translations.search, () => this._search()), this._getActionGroup("expand", false, this._translations.expand, () => this._expand()), this._getActionGroup("basemap", false, this._translations.basemap, () => this._toggleBasemapPicker()))), index.h("basemap-gallery", { class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), index.h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, searchConfiguration: this.searchConfiguration }), index.h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } })));
   }
   //--------------------------------------------------------------------------
   //
@@ -610,17 +602,7 @@ const MapTools = class {
    * @protected
    */
   _getActionGroup(icon, disabled, tip, func) {
-    return (index.h("calcite-action-group", null, index.h("calcite-action", { alignment: "center", compact: false, disabled: disabled, icon: icon, id: icon, onClick: func, text: "" }, index.h("calcite-icon", { icon: "cheveron-up", scale: "s", slot: "icon" })), index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, index.h("span", null, tip))));
-  }
-  /**
-   * Go to the exent that was first used when loading the map
-   *
-   * @returns void
-   *
-   * @protected
-   */
-  async _goHome() {
-    await this.mapView.goTo(this._homeExtent);
+    return (index.h("calcite-action-group", { class: "square-40-41" }, index.h("calcite-action", { alignment: "center", class: "square-40", compact: false, disabled: disabled, icon: icon, id: icon, onClick: func, scale: "s", text: "" }, index.h("calcite-icon", { icon: "cheveron-up", scale: "s", slot: "icon" })), index.h("calcite-tooltip", { label: "", placement: "trailing", "reference-element": icon }, index.h("span", null, tip))));
   }
   // need to discuss this with the team
   _showLegend() {
@@ -632,42 +614,6 @@ const MapTools = class {
     this._showSearchWidget = !this._showSearchWidget;
     this._showTools = false;
   }
-  /**
-   * Fixed zoom in
-   *
-   * @returns void
-   *
-   * @protected
-   */
-  async _zoomIn() {
-    await this._zoom(this.mapView.zoom + 1);
-  }
-  /**
-   * Fixed zoom out
-   *
-   * @returns void
-   *
-   * @protected
-   */
-  async _zoomOut() {
-    await this._zoom(this.mapView.zoom - 1);
-  }
-  /**
-   * Zoom in/out at the maps current center point
-   *
-   * @param zoom Number to zoom level to go to
-   *
-   * @returns void
-   *
-   * @protected
-   */
-  async _zoom(zoom) {
-    var _a;
-    await ((_a = this.mapView) === null || _a === void 0 ? void 0 : _a.goTo({
-      target: this.mapView.center,
-      zoom
-    }));
-  }
   /**
    * Show/Hide the basemap picker
    *
@@ -716,7 +662,6 @@ const MapTools = class {
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
-    "mapView": ["mapViewWatchHandler"],
     "_showBasemapWidget": ["_showBasemapWidgetWatchHandler"],
     "_showLegendWidget": ["_showLegendWidgetWatchHandler"],
     "_showSearchWidget": ["_showSearchWidgetWatchHandler"]

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

@@ -11,7 +11,7 @@ const index = require('./index-0e50040c.js');
 const locale = require('./locale-88c21da2.js');
 const mapViewUtils = require('./mapViewUtils-9da2dddd.js');
 const loadModules = require('./loadModules-c5490589.js');
-const downloadUtils = require('./downloadUtils-1f057ec0.js');
+const downloadUtils = require('./downloadUtils-471a6a2d.js');
 require('./_commonjsHelpers-384729db.js');
 require('./interfaces-d539e30c.js');
 
@@ -80,7 +80,7 @@ const CardManager = class {
     var _a, _b;
     const featuresClass = ((_a = this._graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "" : "display-none";
     const messageClass = ((_b = this._graphics) === null || _b === void 0 ? void 0 : _b.length) > 0 ? "display-none" : "";
-    return (index.h(index.Host, null, index.h("div", { class: "border-rounded overflow-auto height-full" }, index.h("calcite-shell", { class: "position-relative padding-1 " + featuresClass }, index.h("div", null, index.h("info-card", { graphics: this._graphics, isLoading: this._cardLoading, mapView: this.mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))), index.h("div", { class: "padding-1 " + messageClass }, index.h("calcite-notice", { icon: "table", open: true }, index.h("div", { slot: "message" }, this._translations.selectFeaturesToStart))))));
+    return (index.h(index.Host, null, index.h("div", { class: "border-rounded overflow-auto height-full" }, index.h("calcite-shell", { class: "position-relative " + featuresClass }, index.h("div", null, index.h("info-card", { graphics: this._graphics, isLoading: this._cardLoading, mapView: this.mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))), index.h("div", { class: "padding-1 " + messageClass }, index.h("calcite-notice", { icon: "table", open: true }, index.h("div", { slot: "message" }, this._translations.selectFeaturesToStart))))));
   }
   //--------------------------------------------------------------------------
   //
@@ -101,7 +101,7 @@ const CardManager = class {
 };
 CardManager.style = cardManagerCss;
 
-const layerTableCss = ":host{display:block}.height-full{height:100%}.width-full{width:100%}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-ui-border-2)}.border-end{border-inline-end:1px solid var(--calcite-ui-border-2)}.padding-5{padding:5px}.height-51{height:51px}";
+const layerTableCss = ":host{display:block}.height-full{height:100%}.width-full{width:100%}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-ui-border-2)}.border-end{border-inline-end:1px solid var(--calcite-ui-border-2)}.padding-5{padding:5px}.height-51{height:51px}.bottom-left{position:absolute;left:0;bottom:0}html[dir=\"rtl\"] .bottom-left{position:absolute;right:0;bottom:0}.background{background-color:var(--calcite-ui-background)}.text-color{color:var(--calcite-ui-text-1)}";
 
 const LayerTable = class {
   constructor(hostRef) {
@@ -234,7 +234,11 @@ const LayerTable = class {
     const tableNodeClass = this._fetchingData ? "display-none" : "";
     const loadingClass = this._fetchingData ? "" : "display-none";
     const alertActionClass = this._alertShowAction ? "" : "display-none";
-    return (index.h(index.Host, null, index.h("calcite-shell", null, this._getTableControlRow("header"), index.h("div", { class: "height-full width-full" }, index.h("calcite-panel", { class: "height-full width-full" }, index.h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), index.h("div", { class: tableNodeClass, ref: this.onTableNodeCreate }))), index.h("calcite-alert", { icon: this._alertIcon, kind: this._alertKind, label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, index.h("div", { slot: "title" }, this._alertTitle), index.h("div", { slot: "message" }, this._alertMessage), index.h("calcite-link", { class: alertActionClass, onClick: this._alertActionFunction, slot: "link" }, this._alertActionText)))));
+    const total = this._allIds.length.toString();
+    const selected = this._selectedIndexes.length.toString();
+    return (index.h(index.Host, null, index.h("calcite-shell", null, this._getTableControlRow("header"), index.h("div", { class: "height-full width-full" }, index.h("calcite-panel", { class: "height-full width-full" }, index.h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), index.h("div", { class: tableNodeClass, ref: this.onTableNodeCreate })), index.h("div", { class: "bottom-left background text-color" }, this._translations.recordsSelected
+      .replace("{{total}}", total)
+      .replace("{{selected}}", selected))), index.h("calcite-alert", { icon: this._alertIcon, kind: this._alertKind, label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, index.h("div", { slot: "title" }, this._alertTitle), index.h("div", { slot: "message" }, this._alertMessage), index.h("calcite-link", { class: alertActionClass, onClick: this._alertActionFunction, slot: "link" }, this._alertActionText)))));
   }
   //--------------------------------------------------------------------------
   //
@@ -589,7 +593,7 @@ const LayerTable = class {
 };
 LayerTable.style = layerTableCss;
 
-const mapCardCss = ":host{display:block;--calcite-label-margin-bottom:0;--calcite-block-padding:0}.map-height{height:calc(100% - 58px)}.esri-zoom{display:none !important}";
+const mapCardCss = ":host{display:block;--calcite-label-margin-bottom:0;--calcite-block-padding:0}.map-height{height:calc(100% - 58px)}";
 
 const MapCard = class {
   constructor(hostRef) {
@@ -640,12 +644,14 @@ const MapCard = class {
    * @protected
    */
   async _initModules() {
-    const [WebMap, MapView] = await loadModules.loadModules([
+    const [WebMap, MapView, Home] = await loadModules.loadModules([
       "esri/WebMap",
-      "esri/views/MapView"
+      "esri/views/MapView",
+      "esri/widgets/Home"
     ]);
     this.WebMap = WebMap;
     this.MapView = MapView;
+    this.Home = Home;
   }
   /**
    * Load the webmap for the provided webMapInfo
@@ -671,13 +677,17 @@ const MapCard = class {
         map: webMap,
         resizeAlign: "top-left"
       });
+      this._loadedId = id;
+      this._searchConfiguration = this._webMapInfo.searchConfiguration;
+      this.mapChanged.emit({
+        id: id,
+        mapView: this.mapView
+      });
       await this.mapView.when(() => {
-        this._loadedId = id;
-        this._searchConfiguration = this._webMapInfo.searchConfiguration;
-        this.mapChanged.emit({
-          id: id,
-          mapView: this.mapView
+        const home = new this.Home({
+          view: this.mapView
         });
+        this.mapView.ui.add(home, { position: "top-left", index: 3 });
         this.mapView.ui.add(this._mapTools, { position: "top-right", index: 0 });
       });
     }

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

@@ -12,7 +12,7 @@ const locale = require('./locale-88c21da2.js');
 const interfaces = require('./interfaces-d539e30c.js');
 require('./_commonjsHelpers-384729db.js');
 
-const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px}.padding-1-2{padding:0.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-ui-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-3)}.position-relative{position:relative}.height-50{height:50%}.adjusted-height-50{height:calc(50% - 0.5rem)}.adjusted-height-100{height:calc(100% - 1rem)}.display-none{display:none}.height-53{height:53px}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}";
+const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px}.padding-1-2{padding:0.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-ui-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-3)}.position-relative{position:relative}.height-50{height:50%}.adjusted-height-50{height:calc(50% - 0.5rem - 25px)}.adjusted-height-100{height:calc(100% - 1rem - 50px)}.adjusted-height-100-50{height:calc(100% - 50px)}.display-none{display:none}.height-53{height:53px}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}.height-49-px{height:49px}.height-50-px{height:50px}.padding-inline-end-75{padding-inline-end:0.75rem}.align-items-center{align-items:center}";
 
 const CrowdsourceManager = class {
   constructor(hostRef) {
@@ -23,6 +23,7 @@ const CrowdsourceManager = class {
     this.mapInfos = [];
     this.searchConfiguration = undefined;
     this.zoomAndScrollToSelected = false;
+    this._expandPopup = false;
     this._translations = undefined;
     this._layoutMode = interfaces.ELayoutMode.GRID;
     this._mapView = undefined;
@@ -54,6 +55,9 @@ const CrowdsourceManager = class {
    */
   async mapChanged(evt) {
     const mapChange = evt.detail;
+    // close popup by default when the map changes otherwise other components that rely on the view don't work since it
+    // doesn't seem to fully load when it's not visible
+    this._expandPopup = false;
     this._mapInfo = this._getMapInfo(mapChange.id);
     this._mapView = mapChange.mapView;
     this._mapView.popupEnabled = false;
@@ -190,7 +194,7 @@ const CrowdsourceManager = class {
    */
   _getMapAndCard(layoutMode, panelOpen, hideMap) {
     const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen);
-    return this.classicGrid ? (index.h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getCardNode(layoutMode, hideMap), this._getMapNode(layoutMode, hideMap))) : (index.h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(layoutMode, hideMap), this._getCardNode(layoutMode, hideMap)));
+    return this.classicGrid ? (index.h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getCardNode(layoutMode, hideMap), this._getMapNode(layoutMode, hideMap))) : (index.h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(layoutMode, hideMap), this._getPopupExpandNode(), this._getCardNode(layoutMode, hideMap)));
   }
   /**
    * Get the map node based for the current layout options
@@ -204,9 +208,27 @@ const CrowdsourceManager = class {
   _getMapNode(layoutMode, hideMap) {
     const mapDisplayClass = this.classicGrid && layoutMode === interfaces.ELayoutMode.GRID ? "display-flex height-full width-1-2" :
       layoutMode === interfaces.ELayoutMode.GRID && !hideMap ? "" : "display-none";
-    const mapContainerClass = this.classicGrid && layoutMode === interfaces.ELayoutMode.GRID ? "width-full" : "adjusted-height-50";
+    const mapContainerClass = this.classicGrid && layoutMode === interfaces.ELayoutMode.GRID ? "width-full" : this._expandPopup ? "height-50-px" : "adjusted-height-50";
     return (index.h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, index.h("map-card", { class: "width-full", mapInfos: this.mapInfos })));
   }
+  /**
+   * Get the expand node for the popup information
+   *
+   * @returns the expand node
+   * @protected
+   */
+  _getPopupExpandNode() {
+    const icon = this._expandPopup ? "chevrons-down" : "chevrons-up";
+    return (index.h("div", { class: "height-49-px calcite-mode-dark" }, index.h("calcite-panel", null, index.h("div", { class: "display-flex align-items-center", slot: "header-content" }, index.h("calcite-icon", { class: "padding-inline-end-75", icon: "information", scale: "s" }), index.h("div", null, this._translations.information)), index.h("calcite-action", { class: "height-49-px", icon: icon, onClick: () => this._togglePopup(), slot: "header-actions-end" }))));
+  }
+  /**
+   * Toggle the popup information
+   *
+   * @protected
+   */
+  _togglePopup() {
+    this._expandPopup = !this._expandPopup;
+  }
   /**
    * Get the card node based for the current layout options
    *
@@ -218,9 +240,9 @@ const CrowdsourceManager = class {
    */
   _getCardNode(layoutMode, hideMap) {
     const cardManagerHeight = this.classicGrid && layoutMode === interfaces.ELayoutMode.GRID ? "" :
-      layoutMode === interfaces.ELayoutMode.GRID && !hideMap ? "adjusted-height-50" : "adjusted-height-100";
+      layoutMode === interfaces.ELayoutMode.GRID && !this._expandPopup && !hideMap ? "adjusted-height-50" : "adjusted-height-100";
     const cardManagerContainer = this.classicGrid && layoutMode === interfaces.ELayoutMode.GRID ?
-      "width-full adjusted-height-100" : "width-50 height-full";
+      "width-full adjusted-height-100" : this._expandPopup ? "width-50 adjusted-height-100-50" : "width-50 height-full";
     return (index.h("div", { class: `padding-1-2 ${cardManagerContainer}` }, index.h("card-manager", { class: `${cardManagerHeight} width-full`, mapView: this === null || this === void 0 ? void 0 : this._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
   }
   /**

package/dist/cjs/{downloadUtils-1f057ec0.js → downloadUtils-471a6a2d.js}

@@ -1507,7 +1507,7 @@ function(t){var e=function(t){for(var e=t.length,r=new Uint8Array(e),n=0;n<e;n++
  * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  * ====================================================================
  */
-function(t){function e(){return (n.canvg?Promise.resolve(n.canvg):Promise.resolve().then(function () { return require('./index.es-a1507f1c.js'); })).catch((function(t){return Promise.reject(new Error("Could not load canvg: "+t))})).then((function(t){return t.default?t.default:t}))}E.API.addSvgAsImage=function(t,r,n,i,o,s,c,u){if(isNaN(r)||isNaN(n))throw a.error("jsPDF.addSvgAsImage: Invalid coordinates",arguments),new Error("Invalid coordinates passed to jsPDF.addSvgAsImage");if(isNaN(i)||isNaN(o))throw a.error("jsPDF.addSvgAsImage: Invalid measurements",arguments),new Error("Invalid measurements (width and/or height) passed to jsPDF.addSvgAsImage");var h=document.createElement("canvas");h.width=i,h.height=o;var l=h.getContext("2d");l.fillStyle="#fff",l.fillRect(0,0,h.width,h.height);var f={ignoreMouse:!0,ignoreAnimation:!0,ignoreDimensions:!0},d=this;return e().then((function(e){return e.fromString(l,t,f)}),(function(){return Promise.reject(new Error("Could not load canvg."))})).then((function(t){return t.render(f)})).then((function(){d.addImage(h.toDataURL("image/jpeg",1),r,n,i,o,c,u);}))};}(),E.API.putTotalPages=function(t){var e,r=0;parseInt(this.internal.getFont().id.substr(1),10)<15?(e=new RegExp(t,"g"),r=this.internal.getNumberOfPages()):(e=new RegExp(this.pdfEscape16(t,this.internal.getFont()),"g"),r=this.pdfEscape16(this.internal.getNumberOfPages()+"",this.internal.getFont()));for(var n=1;n<=this.internal.getNumberOfPages();n++)for(var i=0;i<this.internal.pages[n].length;i++)this.internal.pages[n][i]=this.internal.pages[n][i].replace(e,r);return this},E.API.viewerPreferences=function(e,r){var n;e=e||{},r=r||!1;var i,a,o,s={HideToolbar:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.3},HideMenubar:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.3},HideWindowUI:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.3},FitWindow:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.3},CenterWindow:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.3},DisplayDocTitle:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.4},NonFullScreenPageMode:{defaultValue:"UseNone",value:"UseNone",type:"name",explicitSet:!1,valueSet:["UseNone","UseOutlines","UseThumbs","UseOC"],pdfVersion:1.3},Direction:{defaultValue:"L2R",value:"L2R",type:"name",explicitSet:!1,valueSet:["L2R","R2L"],pdfVersion:1.3},ViewArea:{defaultValue:"CropBox",value:"CropBox",type:"name",explicitSet:!1,valueSet:["MediaBox","CropBox","TrimBox","BleedBox","ArtBox"],pdfVersion:1.4},ViewClip:{defaultValue:"CropBox",value:"CropBox",type:"name",explicitSet:!1,valueSet:["MediaBox","CropBox","TrimBox","BleedBox","ArtBox"],pdfVersion:1.4},PrintArea:{defaultValue:"CropBox",value:"CropBox",type:"name",explicitSet:!1,valueSet:["MediaBox","CropBox","TrimBox","BleedBox","ArtBox"],pdfVersion:1.4},PrintClip:{defaultValue:"CropBox",value:"CropBox",type:"name",explicitSet:!1,valueSet:["MediaBox","CropBox","TrimBox","BleedBox","ArtBox"],pdfVersion:1.4},PrintScaling:{defaultValue:"AppDefault",value:"AppDefault",type:"name",explicitSet:!1,valueSet:["AppDefault","None"],pdfVersion:1.6},Duplex:{defaultValue:"",value:"none",type:"name",explicitSet:!1,valueSet:["Simplex","DuplexFlipShortEdge","DuplexFlipLongEdge","none"],pdfVersion:1.7},PickTrayByPDFSize:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.7},PrintPageRange:{defaultValue:"",value:"",type:"array",explicitSet:!1,valueSet:null,pdfVersion:1.7},NumCopies:{defaultValue:1,value:1,type:"integer",explicitSet:!1,valueSet:null,pdfVersion:1.7}},c=Object.keys(s),u=[],h=0,l=0,f=0;function d(t,e){var r,n=!1;for(r=0;r<t.length;r+=1)t[r]===e&&(n=!0);return n}if(void 0===this.internal.viewerpreferences&&(this.internal.viewerpreferences={},this.internal.viewerpreferences.configuration=JSON.parse(JSON.stringify(s)),this.internal.viewerpreferences.isSubscribed=!1),n=this.internal.viewerpreferences.configuration,"reset"===e||!0===r){var p=c.length;for(f=0;f<p;f+=1)n[c[f]].value=n[c[f]].defaultValue,n[c[f]].explicitSet=!1;}if("object"===t(e))for(a in e)if(o=e[a],d(c,a)&&void 0!==o){if("boolean"===n[a].type&&"boolean"==typeof o)n[a].value=o;else if("name"===n[a].type&&d(n[a].valueSet,o))n[a].value=o;else if("integer"===n[a].type&&Number.isInteger(o))n[a].value=o;else if("array"===n[a].type){for(h=0;h<o.length;h+=1)if(i=!0,1===o[h].length&&"number"==typeof o[h][0])u.push(String(o[h]-1));else if(o[h].length>1){for(l=0;l<o[h].length;l+=1)"number"!=typeof o[h][l]&&(i=!1);!0===i&&u.push([o[h][0]-1,o[h][1]-1].join(" "));}n[a].value="["+u.join(" ")+"]";}else n[a].value=n[a].defaultValue;n[a].explicitSet=!0;}return !1===this.internal.viewerpreferences.isSubscribed&&(this.internal.events.subscribe("putCatalog",(function(){var t,e=[];for(t in n)!0===n[t].explicitSet&&("name"===n[t].type?e.push("/"+t+" /"+n[t].value):e.push("/"+t+" "+n[t].value));0!==e.length&&this.internal.write("/ViewerPreferences\n<<\n"+e.join("\n")+"\n>>");})),this.internal.viewerpreferences.isSubscribed=!0),this.internal.viewerpreferences.configuration=n,this},
+function(t){function e(){return (n.canvg?Promise.resolve(n.canvg):Promise.resolve().then(function () { return require('./index.es-33154f03.js'); })).catch((function(t){return Promise.reject(new Error("Could not load canvg: "+t))})).then((function(t){return t.default?t.default:t}))}E.API.addSvgAsImage=function(t,r,n,i,o,s,c,u){if(isNaN(r)||isNaN(n))throw a.error("jsPDF.addSvgAsImage: Invalid coordinates",arguments),new Error("Invalid coordinates passed to jsPDF.addSvgAsImage");if(isNaN(i)||isNaN(o))throw a.error("jsPDF.addSvgAsImage: Invalid measurements",arguments),new Error("Invalid measurements (width and/or height) passed to jsPDF.addSvgAsImage");var h=document.createElement("canvas");h.width=i,h.height=o;var l=h.getContext("2d");l.fillStyle="#fff",l.fillRect(0,0,h.width,h.height);var f={ignoreMouse:!0,ignoreAnimation:!0,ignoreDimensions:!0},d=this;return e().then((function(e){return e.fromString(l,t,f)}),(function(){return Promise.reject(new Error("Could not load canvg."))})).then((function(t){return t.render(f)})).then((function(){d.addImage(h.toDataURL("image/jpeg",1),r,n,i,o,c,u);}))};}(),E.API.putTotalPages=function(t){var e,r=0;parseInt(this.internal.getFont().id.substr(1),10)<15?(e=new RegExp(t,"g"),r=this.internal.getNumberOfPages()):(e=new RegExp(this.pdfEscape16(t,this.internal.getFont()),"g"),r=this.pdfEscape16(this.internal.getNumberOfPages()+"",this.internal.getFont()));for(var n=1;n<=this.internal.getNumberOfPages();n++)for(var i=0;i<this.internal.pages[n].length;i++)this.internal.pages[n][i]=this.internal.pages[n][i].replace(e,r);return this},E.API.viewerPreferences=function(e,r){var n;e=e||{},r=r||!1;var i,a,o,s={HideToolbar:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.3},HideMenubar:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.3},HideWindowUI:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.3},FitWindow:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.3},CenterWindow:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.3},DisplayDocTitle:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.4},NonFullScreenPageMode:{defaultValue:"UseNone",value:"UseNone",type:"name",explicitSet:!1,valueSet:["UseNone","UseOutlines","UseThumbs","UseOC"],pdfVersion:1.3},Direction:{defaultValue:"L2R",value:"L2R",type:"name",explicitSet:!1,valueSet:["L2R","R2L"],pdfVersion:1.3},ViewArea:{defaultValue:"CropBox",value:"CropBox",type:"name",explicitSet:!1,valueSet:["MediaBox","CropBox","TrimBox","BleedBox","ArtBox"],pdfVersion:1.4},ViewClip:{defaultValue:"CropBox",value:"CropBox",type:"name",explicitSet:!1,valueSet:["MediaBox","CropBox","TrimBox","BleedBox","ArtBox"],pdfVersion:1.4},PrintArea:{defaultValue:"CropBox",value:"CropBox",type:"name",explicitSet:!1,valueSet:["MediaBox","CropBox","TrimBox","BleedBox","ArtBox"],pdfVersion:1.4},PrintClip:{defaultValue:"CropBox",value:"CropBox",type:"name",explicitSet:!1,valueSet:["MediaBox","CropBox","TrimBox","BleedBox","ArtBox"],pdfVersion:1.4},PrintScaling:{defaultValue:"AppDefault",value:"AppDefault",type:"name",explicitSet:!1,valueSet:["AppDefault","None"],pdfVersion:1.6},Duplex:{defaultValue:"",value:"none",type:"name",explicitSet:!1,valueSet:["Simplex","DuplexFlipShortEdge","DuplexFlipLongEdge","none"],pdfVersion:1.7},PickTrayByPDFSize:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.7},PrintPageRange:{defaultValue:"",value:"",type:"array",explicitSet:!1,valueSet:null,pdfVersion:1.7},NumCopies:{defaultValue:1,value:1,type:"integer",explicitSet:!1,valueSet:null,pdfVersion:1.7}},c=Object.keys(s),u=[],h=0,l=0,f=0;function d(t,e){var r,n=!1;for(r=0;r<t.length;r+=1)t[r]===e&&(n=!0);return n}if(void 0===this.internal.viewerpreferences&&(this.internal.viewerpreferences={},this.internal.viewerpreferences.configuration=JSON.parse(JSON.stringify(s)),this.internal.viewerpreferences.isSubscribed=!1),n=this.internal.viewerpreferences.configuration,"reset"===e||!0===r){var p=c.length;for(f=0;f<p;f+=1)n[c[f]].value=n[c[f]].defaultValue,n[c[f]].explicitSet=!1;}if("object"===t(e))for(a in e)if(o=e[a],d(c,a)&&void 0!==o){if("boolean"===n[a].type&&"boolean"==typeof o)n[a].value=o;else if("name"===n[a].type&&d(n[a].valueSet,o))n[a].value=o;else if("integer"===n[a].type&&Number.isInteger(o))n[a].value=o;else if("array"===n[a].type){for(h=0;h<o.length;h+=1)if(i=!0,1===o[h].length&&"number"==typeof o[h][0])u.push(String(o[h]-1));else if(o[h].length>1){for(l=0;l<o[h].length;l+=1)"number"!=typeof o[h][l]&&(i=!1);!0===i&&u.push([o[h][0]-1,o[h][1]-1].join(" "));}n[a].value="["+u.join(" ")+"]";}else n[a].value=n[a].defaultValue;n[a].explicitSet=!0;}return !1===this.internal.viewerpreferences.isSubscribed&&(this.internal.events.subscribe("putCatalog",(function(){var t,e=[];for(t in n)!0===n[t].explicitSet&&("name"===n[t].type?e.push("/"+t+" /"+n[t].value):e.push("/"+t+" "+n[t].value));0!==e.length&&this.internal.write("/ViewerPreferences\n<<\n"+e.join("\n")+"\n>>");})),this.internal.viewerpreferences.isSubscribed=!0),this.internal.viewerpreferences.configuration=n,this},
 /** ====================================================================
  * @license
  * jsPDF XMP metadata plugin
@@ -2522,8 +2522,8 @@ function _getFieldNamesFromFieldExpressions(fieldExpressions) {
  * all attributes are exported
  * @param attributeFormats Empty object to hold the formats for each attribute in a feature; the object is filled
  * with formats by this function
- * @returns A Promise resolving to the format of a single label, e.g., for ILabelFormat type "pattern":
- * "{NAME}|{STREET}|{CITY}, {STATE} {ZIP}"
+ * @returns A Promise resolving to the format of a single label with fields coerced to lowercase, e.g.,
+ * for ILabelFormat type "pattern": "{name}|{street}|{city}, {state} {zip}"
  */
 async function _getLabelFormat(layer, formatUsingLayerPopup, attributeFormats) {
   var _a, _b, _c, _d, _e, _f;
@@ -2536,7 +2536,7 @@ async function _getLabelFormat(layer, formatUsingLayerPopup, attributeFormats) {
     // Extract any format info that we have
     fieldInfo => {
       if (fieldInfo.format) {
-        attributeFormats[fieldInfo.fieldName] = fieldInfo.format;
+        attributeFormats[fieldInfo.fieldName.toLowerCase()] = fieldInfo.format;
       }
     });
     // What is the nature of the label content?
@@ -2645,11 +2645,14 @@ async function _prepareLabels(layer, ids, formatUsingLayerPopup = true, includeH
   // Get the features to export
   const featureSet = await mapViewUtils.queryFeaturesByID(ids, layer, [], false);
   // Get field data types. Do we have any domain-based fields?
+  const attributeOrigNames = {};
   const attributeTypes = {};
   const attributeDomains = {};
   layer.fields.forEach(field => {
-    attributeTypes[field.name] = field.type;
-    attributeDomains[field.name] = field.domain;
+    const lowercaseFieldname = field.name.toLowerCase();
+    attributeOrigNames[lowercaseFieldname] = field.name;
+    attributeDomains[lowercaseFieldname] = field.domain;
+    attributeTypes[lowercaseFieldname] = field.type;
   });
   const attributeFormats = {};
   // Get the label formatting, if any
@@ -2660,7 +2663,7 @@ async function _prepareLabels(layer, ids, formatUsingLayerPopup = true, includeH
     await _prepareLabelsFromAll(featureSet, attributeTypes, attributeDomains, includeHeaderNames)
     : labelFormat.type == "pattern" ?
       // Export attributes in format
-      await _prepareLabelsFromPattern(featureSet, attributeTypes, attributeDomains, attributeFormats, labelFormat.format, includeHeaderNames)
+      await _prepareLabelsFromPattern(featureSet, attributeOrigNames, attributeTypes, attributeDomains, attributeFormats, labelFormat.format, includeHeaderNames)
       :
         // Export attributes in expression
         await _prepareLabelsUsingExecutor(featureSet, labelFormat.format);
@@ -2680,7 +2683,8 @@ async function _prepareLabelsFromAll(featureSet, attributeTypes, attributeDomain
   // Export all attributes
   const labels = featureSet.map(feature => {
     return Object.keys(feature.attributes).map((attributeName) => {
-      return _prepareAttributeValue(feature.attributes[attributeName], attributeTypes[attributeName], attributeDomains[attributeName], null, intl);
+      const lowercaseFieldname = attributeName.toLowerCase();
+      return _prepareAttributeValue(feature.attributes[attributeName], attributeTypes[lowercaseFieldname], attributeDomains[lowercaseFieldname], null, intl);
     });
   });
   // Add header names
@@ -2698,6 +2702,7 @@ async function _prepareLabelsFromAll(featureSet, attributeTypes, attributeDomain
  * Creates labels from attributes in a layer popup.
  *
  * @param featureSet Features to convert to labels
+ * @param attributeOrigNames Mapping from lowercase field names to original field names
  * @param attributeTypes Type for each attribute in a feature
  * @param attributeDomains Domains for each attribute in a feature
  * @param attributeFormats Formats for each attribute in a feature
@@ -2705,7 +2710,7 @@ async function _prepareLabelsFromAll(featureSet, attributeTypes, attributeDomain
  * @param includeHeaderNames Add the label format at the front of the list of generated labels
  * @returns Promise resolving with list of labels, each of which is a list of label lines
  */
-async function _prepareLabelsFromPattern(featureSet, attributeTypes, attributeDomains, attributeFormats, labelFormat, includeHeaderNames = false) {
+async function _prepareLabelsFromPattern(featureSet, attributeOrigNames, attributeTypes, attributeDomains, attributeFormats, labelFormat, includeHeaderNames = false) {
   const [intl] = await loadModules.loadModules(["esri/intl"]);
   // Find the label fields that we need to replace with values
   const attributeExpressionMatches = _getFieldExpressionsFromLabel(labelFormat);
@@ -2715,7 +2720,8 @@ async function _prepareLabelsFromPattern(featureSet, attributeTypes, attributeDo
     let labelPrep = labelFormat;
     // Replace non-Arcade fields in this feature
     attributeNames.forEach((attributeName, i) => {
-      const value = _prepareAttributeValue(feature.attributes[attributeName], attributeTypes[attributeName], attributeDomains[attributeName], attributeFormats[attributeName], intl);
+      const lowercaseFieldname = attributeName.toLowerCase();
+      const value = _prepareAttributeValue(feature.attributes[attributeOrigNames[lowercaseFieldname]], attributeTypes[lowercaseFieldname], attributeDomains[lowercaseFieldname], attributeFormats[lowercaseFieldname], intl);
       labelPrep = labelPrep.replace(attributeExpressionMatches[i], value);
     });
     // Split label into lines

package/dist/cjs/edit-card_2.cjs.entry.js

@@ -176,7 +176,7 @@ const EditCard = class {
 };
 EditCard.style = editCardCss;
 
-const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:8px}tr:nth-child(odd){background:var(--calcite-ui-foreground-2)}.bottom-border{padding-bottom:0.5rem;border-bottom:1px solid var(--calcite-ui-border-1)}.padding-1-2{padding:0.5rem}.padding-top-1-2{padding-top:0.5rem}.font-color-3{color:var(--calcite-ui-text-3)}.display-none{display:none}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.edit-btn{z-index:999;position:absolute;width:50px}.edit-btn-position{right:0}html[dir=\"rtl\"] .edit-btn-position{left:0}";
+const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:8px}tr:nth-child(odd){background:var(--calcite-ui-foreground-2)}.bottom-border{padding-bottom:0.5rem;border-bottom:1px solid var(--calcite-ui-border-1)}.padding-1-2{padding:0.5rem}.padding-top-1-2{padding-top:0.5rem}.font-color-3{color:var(--calcite-ui-text-3)}.display-none{display:none}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.edit-btn{z-index:999;position:absolute}.edit-btn-position{right:0.5rem;top:0.5rem}html[dir=\"rtl\"] .edit-btn-position{left:0}.esri-features__footer{display:none !important}.button-container{justify-content:space-between;align-items:center}.min-width-100{min-width:100px}";
 
 const InfoCard = class {
   constructor(hostRef) {
@@ -187,6 +187,7 @@ const InfoCard = class {
     this.mapView = undefined;
     this.zoomAndScrollToSelected = undefined;
     this._alertOpen = false;
+    this._count = "";
     this._editRecordOpen = false;
     this._translations = undefined;
   }
@@ -264,7 +265,7 @@ const InfoCard = class {
     const featureNodeClass = this.isLoading || this._editRecordOpen ? "display-none" : "position-absolute";
     const editClass = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none";
     const editButtonClass = !this.isLoading && this._editRecordOpen ? "display-none" : "";
-    return (index.h(index.Host, null, index.h("calcite-shell", null, index.h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), index.h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), index.h("div", { class: `${editButtonClass} edit-btn edit-btn-position` }, index.h("calcite-action", { appearance: "transparent", icon: "pencil", id: "solutions-edit", onClick: () => this._openEditRecord(), scale: "m" }), index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, index.h("span", null, this._translations.edit))), index.h("edit-card", { class: editClass, graphicIndex: (_a = this._features) === null || _a === void 0 ? void 0 : _a.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), index.h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, index.h("div", { slot: "title" }, this._translations.editDisabled), index.h("div", { slot: "message" }, this._translations.enableEditing)))));
+    return (index.h(index.Host, null, index.h("calcite-shell", null, index.h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), index.h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), index.h("div", { class: `${editButtonClass} display-flex padding-1-2 button-container`, slot: "footer" }, index.h("div", { class: "min-width-100" }, index.h("calcite-button", { appearance: "outline", id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), index.h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, index.h("span", null, this._translations.back))), index.h("div", null, this._getCount()), index.h("div", { class: "min-width-100" }, index.h("calcite-button", { appearance: "outline", id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), index.h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, index.h("span", null, this._translations.next)))), index.h("div", { class: `${editButtonClass} edit-btn edit-btn-position` }, index.h("calcite-button", { appearance: "outline", "icon-start": "pencil", id: "solutions-edit", onClick: () => this._openEditRecord() }, this._translations.edit), index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, index.h("span", null, this._translations.edit))), index.h("edit-card", { class: editClass, graphicIndex: (_a = this._features) === null || _a === void 0 ? void 0 : _a.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), index.h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, index.h("div", { slot: "title" }, this._translations.editDisabled), index.h("div", { slot: "message" }, this._translations.enableEditing)))));
   }
   //--------------------------------------------------------------------------
   //
@@ -345,6 +346,37 @@ const InfoCard = class {
       this._alertOpen = true;
     }
   }
+  /**
+   * Go to the previous feature in the features widget
+   *
+   * @returns void
+   */
+  _back() {
+    this._features.previous();
+    this._count = this._getCount();
+  }
+  /**
+   * Go to the next feature in the features widget
+   *
+   * @returns void
+   */
+  _next() {
+    this._features.next();
+    this._count = this._getCount();
+  }
+  /**
+   * Get the current index of total string
+   *
+   * @returns the index of total string
+   */
+  _getCount() {
+    var _a, _b, _c;
+    const index = (((_a = this._features) === null || _a === void 0 ? void 0 : _a.viewModel.selectedFeatureIndex) + 1).toString();
+    const total = (_c = (_b = this._features) === null || _b === void 0 ? void 0 : _b.features) === null || _c === void 0 ? void 0 : _c.length.toString();
+    return this._translations.indexOfTotal
+      .replace("{{index}}", index)
+      .replace("{{total}}", total);
+  }
   /**
    * Fetches the component's translations
    *

package/dist/cjs/{index.es-a1507f1c.js → index.es-33154f03.js}

@@ -6,7 +6,7 @@
 'use strict';
 
 const _commonjsHelpers = require('./_commonjsHelpers-384729db.js');
-const downloadUtils = require('./downloadUtils-1f057ec0.js');
+const downloadUtils = require('./downloadUtils-471a6a2d.js');
 require('./index-0e50040c.js');
 require('./loadModules-c5490589.js');
 require('./locale-88c21da2.js');