@esri/solutions-components 0.6.9 → 0.6.10

package/dist/components/info-card2.js

@@ -6,8 +6,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { l as loadModules } from './loadModules.js';
-import { d as defineCustomElement$9 } from './action.js';
-import { d as defineCustomElement$8 } from './alert.js';
+import { d as defineCustomElement$9 } from './alert.js';
+import { d as defineCustomElement$8 } from './button.js';
 import { d as defineCustomElement$7 } from './chip.js';
 import { d as defineCustomElement$6 } from './icon.js';
 import { d as defineCustomElement$5 } from './loader.js';
@@ -16,7 +16,7 @@ import { d as defineCustomElement$3 } from './shell.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 import { d as defineCustomElement$1 } from './edit-card2.js';
 
-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 = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLElement {
   constructor() {
@@ -28,6 +28,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
     this.mapView = undefined;
     this.zoomAndScrollToSelected = undefined;
     this._alertOpen = false;
+    this._count = "";
     this._editRecordOpen = false;
     this._translations = undefined;
   }
@@ -105,7 +106,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
     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 (h(Host, null, h("calcite-shell", null, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} edit-btn edit-btn-position` }, h("calcite-action", { appearance: "transparent", icon: "pencil", id: "solutions-edit", onClick: () => this._openEditRecord(), scale: "m" }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit))), 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 }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
+    return (h(Host, null, h("calcite-shell", null, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} display-flex padding-1-2 button-container`, slot: "footer" }, h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("div", null, this._getCount()), h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next)))), h("div", { class: `${editButtonClass} edit-btn edit-btn-position` }, h("calcite-button", { appearance: "outline", "icon-start": "pencil", id: "solutions-edit", onClick: () => this._openEditRecord() }, this._translations.edit), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit))), 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 }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
   }
   //--------------------------------------------------------------------------
   //
@@ -186,6 +187,37 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
       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
    *
@@ -208,6 +240,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
     "mapView": [16],
     "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
     "_alertOpen": [32],
+    "_count": [32],
     "_editRecordOpen": [32],
     "_translations": [32],
     "getSelectedFeature": [64]
@@ -216,19 +249,19 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["info-card", "calcite-action", "calcite-alert", "calcite-chip", "calcite-icon", "calcite-loader", "calcite-notice", "calcite-shell", "calcite-tooltip", "edit-card"];
+  const components = ["info-card", "calcite-alert", "calcite-button", "calcite-chip", "calcite-icon", "calcite-loader", "calcite-notice", "calcite-shell", "calcite-tooltip", "edit-card"];
   components.forEach(tagName => { switch (tagName) {
     case "info-card":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, InfoCard);
       }
       break;
-    case "calcite-action":
+    case "calcite-alert":
       if (!customElements.get(tagName)) {
         defineCustomElement$9();
       }
       break;
-    case "calcite-alert":
+    case "calcite-button":
       if (!customElements.get(tagName)) {
         defineCustomElement$8();
       }

package/dist/components/layer-table2.js

@@ -33,7 +33,7 @@ import { d as defineCustomElement$3 } from './shell.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 import { d as defineCustomElement$1 } from './map-layer-picker2.js';
 
-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 = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTMLElement {
   constructor() {
@@ -167,7 +167,11 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     const tableNodeClass = this._fetchingData ? "display-none" : "";
     const loadingClass = this._fetchingData ? "" : "display-none";
     const alertActionClass = this._alertShowAction ? "" : "display-none";
-    return (h(Host, null, h("calcite-shell", null, this._getTableControlRow("header"), h("div", { class: "height-full width-full" }, h("calcite-panel", { class: "height-full width-full" }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { class: tableNodeClass, ref: this.onTableNodeCreate }))), h("calcite-alert", { icon: this._alertIcon, kind: this._alertKind, label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._alertTitle), h("div", { slot: "message" }, this._alertMessage), 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 (h(Host, null, h("calcite-shell", null, this._getTableControlRow("header"), h("div", { class: "height-full width-full" }, h("calcite-panel", { class: "height-full width-full" }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { class: tableNodeClass, ref: this.onTableNodeCreate })), h("div", { class: "bottom-left background text-color" }, this._translations.recordsSelected
+      .replace("{{total}}", total)
+      .replace("{{selected}}", selected))), h("calcite-alert", { icon: this._alertIcon, kind: this._alertKind, label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._alertTitle), h("div", { slot: "message" }, this._alertMessage), h("calcite-link", { class: alertActionClass, onClick: this._alertActionFunction, slot: "link" }, this._alertActionText)))));
   }
   //--------------------------------------------------------------------------
   //

package/dist/components/map-card2.js

@@ -28,7 +28,7 @@ import { d as defineCustomElement$3 } from './map-picker2.js';
 import { d as defineCustomElement$2 } from './map-search2.js';
 import { d as defineCustomElement$1 } from './map-tools2.js';
 
-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 = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLElement {
   constructor() {
@@ -80,12 +80,14 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
    * @protected
    */
   async _initModules() {
-    const [WebMap, MapView] = await loadModules([
+    const [WebMap, MapView, Home] = await 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
@@ -111,13 +113,17 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
         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/components/map-picker2.js

@@ -21,7 +21,7 @@ import { d as defineCustomElement$3 } from './progress.js';
 import { d as defineCustomElement$2 } from './scrim.js';
 import { d as defineCustomElement$1 } from './stack.js';
 
-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 = /*@__PURE__*/ proxyCustomElement(class MapPicker extends HTMLElement {
   constructor() {
@@ -103,7 +103,7 @@ const MapPicker = /*@__PURE__*/ proxyCustomElement(class MapPicker extends HTMLE
   _getMapPicker() {
     var _a;
     const mapListIcon = this._mapListExpanded ? "chevron-up" : "chevron-down";
-    return (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 (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)
@@ -113,7 +113,7 @@ const MapPicker = /*@__PURE__*/ proxyCustomElement(class MapPicker extends HTMLE
    * @protected
    */
   _getToolbar() {
-    return (h("div", { class: "display-flex" }, h("calcite-action-bar", { class: "border-bottom-1 action-bar-size", "expand-disabled": true, layout: "horizontal", slot: "header" }, this._getMapPicker())));
+    return (h("div", { class: "display-flex" }, 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

package/dist/components/map-tools2.js

@@ -18,7 +18,7 @@ import { d as defineCustomElement$3 } from './tooltip.js';
 import { d as defineCustomElement$2 } from './map-legend2.js';
 import { d as defineCustomElement$1 } from './map-search2.js';
 
-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 = /*@__PURE__*/ proxyCustomElement(class MapTools extends HTMLElement {
   constructor() {
@@ -40,14 +40,6 @@ const MapTools = /*@__PURE__*/ proxyCustomElement(class MapTools extends HTMLEle
   //  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
    */
@@ -110,7 +102,7 @@ const MapTools = /*@__PURE__*/ proxyCustomElement(class MapTools extends HTMLEle
     const searchClass = this._showSearchWidget ? "" : "display-none";
     const basemapClass = this._showBasemapWidget ? "" : "display-none";
     const legendClass = this._showLegendWidget ? "" : "display-none";
-    return (h(Host, null, h("div", null, h("calcite-action", { alignment: "center", class: "border", compact: false, icon: toggleIcon, onClick: () => { this._toggleTools(); }, text: "" }), 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()))), h("basemap-gallery", { class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, searchConfiguration: this.searchConfiguration }), h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } })));
+    return (h(Host, null, h("div", null, h("calcite-action", { alignment: "center", class: "border square-40", compact: false, icon: toggleIcon, onClick: () => { this._toggleTools(); }, scale: "s", text: "" }), 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()))), h("basemap-gallery", { class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, searchConfiguration: this.searchConfiguration }), h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } })));
   }
   //--------------------------------------------------------------------------
   //
@@ -130,17 +122,7 @@ const MapTools = /*@__PURE__*/ proxyCustomElement(class MapTools extends HTMLEle
    * @protected
    */
   _getActionGroup(icon, disabled, tip, func) {
-    return (h("calcite-action-group", null, h("calcite-action", { alignment: "center", compact: false, disabled: disabled, icon: icon, id: icon, onClick: func, text: "" }, h("calcite-icon", { icon: "cheveron-up", scale: "s", slot: "icon" })), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, 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 (h("calcite-action-group", { class: "square-40-41" }, h("calcite-action", { alignment: "center", class: "square-40", compact: false, disabled: disabled, icon: icon, id: icon, onClick: func, scale: "s", text: "" }, h("calcite-icon", { icon: "cheveron-up", scale: "s", slot: "icon" })), h("calcite-tooltip", { label: "", placement: "trailing", "reference-element": icon }, h("span", null, tip))));
   }
   // need to discuss this with the team
   _showLegend() {
@@ -152,42 +134,6 @@ const MapTools = /*@__PURE__*/ proxyCustomElement(class MapTools extends HTMLEle
     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
    *
@@ -236,7 +182,6 @@ const MapTools = /*@__PURE__*/ proxyCustomElement(class MapTools extends HTMLEle
   }
   get el() { return this; }
   static get watchers() { return {
-    "mapView": ["mapViewWatchHandler"],
     "_showBasemapWidget": ["_showBasemapWidgetWatchHandler"],
     "_showLegendWidget": ["_showLegendWidgetWatchHandler"],
     "_showSearchWidget": ["_showSearchWidgetWatchHandler"]

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

@@ -189,7 +189,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) {
@@ -269,7 +269,7 @@ const MapPicker = class {
   _getMapPicker() {
     var _a;
     const mapListIcon = this._mapListExpanded ? "chevron-up" : "chevron-down";
-    return (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 (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)
@@ -279,7 +279,7 @@ const MapPicker = class {
    * @protected
    */
   _getToolbar() {
-    return (h("div", { class: "display-flex" }, h("calcite-action-bar", { class: "border-bottom-1 action-bar-size", "expand-disabled": true, layout: "horizontal", slot: "header" }, this._getMapPicker())));
+    return (h("div", { class: "display-flex" }, 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
@@ -496,7 +496,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) {
@@ -516,14 +516,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
    */
@@ -586,7 +578,7 @@ const MapTools = class {
     const searchClass = this._showSearchWidget ? "" : "display-none";
     const basemapClass = this._showBasemapWidget ? "" : "display-none";
     const legendClass = this._showLegendWidget ? "" : "display-none";
-    return (h(Host, null, h("div", null, h("calcite-action", { alignment: "center", class: "border", compact: false, icon: toggleIcon, onClick: () => { this._toggleTools(); }, text: "" }), 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()))), h("basemap-gallery", { class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, searchConfiguration: this.searchConfiguration }), h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } })));
+    return (h(Host, null, h("div", null, h("calcite-action", { alignment: "center", class: "border square-40", compact: false, icon: toggleIcon, onClick: () => { this._toggleTools(); }, scale: "s", text: "" }), 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()))), h("basemap-gallery", { class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, searchConfiguration: this.searchConfiguration }), h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } })));
   }
   //--------------------------------------------------------------------------
   //
@@ -606,17 +598,7 @@ const MapTools = class {
    * @protected
    */
   _getActionGroup(icon, disabled, tip, func) {
-    return (h("calcite-action-group", null, h("calcite-action", { alignment: "center", compact: false, disabled: disabled, icon: icon, id: icon, onClick: func, text: "" }, h("calcite-icon", { icon: "cheveron-up", scale: "s", slot: "icon" })), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, 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 (h("calcite-action-group", { class: "square-40-41" }, h("calcite-action", { alignment: "center", class: "square-40", compact: false, disabled: disabled, icon: icon, id: icon, onClick: func, scale: "s", text: "" }, h("calcite-icon", { icon: "cheveron-up", scale: "s", slot: "icon" })), h("calcite-tooltip", { label: "", placement: "trailing", "reference-element": icon }, h("span", null, tip))));
   }
   // need to discuss this with the team
   _showLegend() {
@@ -628,42 +610,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
    *
@@ -712,7 +658,6 @@ const MapTools = class {
   }
   get el() { return getElement(this); }
   static get watchers() { return {
-    "mapView": ["mapViewWatchHandler"],
     "_showBasemapWidget": ["_showBasemapWidgetWatchHandler"],
     "_showLegendWidget": ["_showLegendWidgetWatchHandler"],
     "_showSearchWidget": ["_showSearchWidgetWatchHandler"]

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

@@ -7,7 +7,7 @@ import { r as registerInstance, h, H as Host, g as getElement, c as createEvent
 import { g as getLocaleComponentStrings } from './locale-efad8f83.js';
 import { q as queryFeaturesByID, a as getLayer, b as getMapLayerIds, g as goToSelection, c as queryAllIds } from './mapViewUtils-f0c04325.js';
 import { l as loadModules } from './loadModules-f5f910b6.js';
-import { d as downloadCSV } from './downloadUtils-64c27514.js';
+import { d as downloadCSV } from './downloadUtils-8d4c13bb.js';
 import './_commonjsHelpers-d5f9d613.js';
 import './interfaces-5a2fe8b4.js';
 
@@ -76,7 +76,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 (h(Host, null, h("div", { class: "border-rounded overflow-auto height-full" }, h("calcite-shell", { class: "position-relative padding-1 " + featuresClass }, h("div", null, h("info-card", { graphics: this._graphics, isLoading: this._cardLoading, mapView: this.mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))), h("div", { class: "padding-1 " + messageClass }, h("calcite-notice", { icon: "table", open: true }, h("div", { slot: "message" }, this._translations.selectFeaturesToStart))))));
+    return (h(Host, null, h("div", { class: "border-rounded overflow-auto height-full" }, h("calcite-shell", { class: "position-relative " + featuresClass }, h("div", null, h("info-card", { graphics: this._graphics, isLoading: this._cardLoading, mapView: this.mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))), h("div", { class: "padding-1 " + messageClass }, h("calcite-notice", { icon: "table", open: true }, h("div", { slot: "message" }, this._translations.selectFeaturesToStart))))));
   }
   //--------------------------------------------------------------------------
   //
@@ -97,7 +97,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) {
@@ -230,7 +230,11 @@ const LayerTable = class {
     const tableNodeClass = this._fetchingData ? "display-none" : "";
     const loadingClass = this._fetchingData ? "" : "display-none";
     const alertActionClass = this._alertShowAction ? "" : "display-none";
-    return (h(Host, null, h("calcite-shell", null, this._getTableControlRow("header"), h("div", { class: "height-full width-full" }, h("calcite-panel", { class: "height-full width-full" }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { class: tableNodeClass, ref: this.onTableNodeCreate }))), h("calcite-alert", { icon: this._alertIcon, kind: this._alertKind, label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._alertTitle), h("div", { slot: "message" }, this._alertMessage), 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 (h(Host, null, h("calcite-shell", null, this._getTableControlRow("header"), h("div", { class: "height-full width-full" }, h("calcite-panel", { class: "height-full width-full" }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { class: tableNodeClass, ref: this.onTableNodeCreate })), h("div", { class: "bottom-left background text-color" }, this._translations.recordsSelected
+      .replace("{{total}}", total)
+      .replace("{{selected}}", selected))), h("calcite-alert", { icon: this._alertIcon, kind: this._alertKind, label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._alertTitle), h("div", { slot: "message" }, this._alertMessage), h("calcite-link", { class: alertActionClass, onClick: this._alertActionFunction, slot: "link" }, this._alertActionText)))));
   }
   //--------------------------------------------------------------------------
   //
@@ -585,7 +589,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) {
@@ -636,12 +640,14 @@ const MapCard = class {
    * @protected
    */
   async _initModules() {
-    const [WebMap, MapView] = await loadModules([
+    const [WebMap, MapView, Home] = await 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
@@ -667,13 +673,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/esm/crowdsource-manager.entry.js

@@ -8,7 +8,7 @@ import { g as getLocaleComponentStrings } from './locale-efad8f83.js';
 import { E as ELayoutMode } from './interfaces-5a2fe8b4.js';
 import './_commonjsHelpers-d5f9d613.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) {
@@ -19,6 +19,7 @@ const CrowdsourceManager = class {
     this.mapInfos = [];
     this.searchConfiguration = undefined;
     this.zoomAndScrollToSelected = false;
+    this._expandPopup = false;
     this._translations = undefined;
     this._layoutMode = ELayoutMode.GRID;
     this._mapView = undefined;
@@ -50,6 +51,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;
@@ -186,7 +190,7 @@ const CrowdsourceManager = class {
    */
   _getMapAndCard(layoutMode, panelOpen, hideMap) {
     const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen);
-    return this.classicGrid ? (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getCardNode(layoutMode, hideMap), this._getMapNode(layoutMode, hideMap))) : (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(layoutMode, hideMap), this._getCardNode(layoutMode, hideMap)));
+    return this.classicGrid ? (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getCardNode(layoutMode, hideMap), this._getMapNode(layoutMode, hideMap))) : (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
@@ -200,9 +204,27 @@ const CrowdsourceManager = class {
   _getMapNode(layoutMode, hideMap) {
     const mapDisplayClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "display-flex height-full width-1-2" :
       layoutMode === ELayoutMode.GRID && !hideMap ? "" : "display-none";
-    const mapContainerClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "width-full" : "adjusted-height-50";
+    const mapContainerClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "width-full" : this._expandPopup ? "height-50-px" : "adjusted-height-50";
     return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, 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 (h("div", { class: "height-49-px calcite-mode-dark" }, h("calcite-panel", null, h("div", { class: "display-flex align-items-center", slot: "header-content" }, h("calcite-icon", { class: "padding-inline-end-75", icon: "information", scale: "s" }), h("div", null, this._translations.information)), 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
    *
@@ -214,9 +236,9 @@ const CrowdsourceManager = class {
    */
   _getCardNode(layoutMode, hideMap) {
     const cardManagerHeight = this.classicGrid && layoutMode === ELayoutMode.GRID ? "" :
-      layoutMode === ELayoutMode.GRID && !hideMap ? "adjusted-height-50" : "adjusted-height-100";
+      layoutMode === ELayoutMode.GRID && !this._expandPopup && !hideMap ? "adjusted-height-50" : "adjusted-height-100";
     const cardManagerContainer = this.classicGrid && layoutMode === 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 (h("div", { class: `padding-1-2 ${cardManagerContainer}` }, h("card-manager", { class: `${cardManagerHeight} width-full`, mapView: this === null || this === void 0 ? void 0 : this._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
   }
   /**