@esri/solutions-components 0.7.24 → 0.7.25

package/dist/cjs/spatial-ref.cjs.entry.js

@@ -8,9 +8,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b8a649fc.js');
-const locale = require('./locale-1ff119f5.js');
+const locale = require('./locale-a476e15d.js');
 const common = require('./common-4cd3537b.js');
-require('./loadModules-46d14e81.js');
 require('./esri-loader-a91c0ec1.js');
 require('./_commonjsHelpers-384729db.js');
 require('./solution-resource-abec7452.js');

package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.css

@@ -21,7 +21,7 @@
 }
 
 .width-full {
-  width: 100%;
+  width: 100% !important;
 }
 
 .width-0 {
@@ -29,7 +29,7 @@
 }
 
 .height-full {
-  height: 100%;
+  height: 100% !important;
 }
 
 .height-0 {
@@ -64,29 +64,7 @@
   padding: 10px;
 }
 
-@media screen and (max-width: 600px) {
-  .map-container {
-    left: 0;
-    height: 50%;
-    width: 100%;
-  }
-
-  .map-container-mobile {
-    height:  calc(100% - 100px);
-  }
-
-  .side-panel {
-    padding: 2px;
-    width: 100%;
-    height: 50%;
-    position: absolute;
-    top: 50%;
-    left: 0;
-    z-index: 60;
-  }
-
-  .collapsed-side-panel {
-    top: calc(100% - 100px);
-    height: 100px;
-  }
+.collapsed-side-panel {
+  top: calc(100% - 55px);
+  height: 54px;
 }

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

@@ -23,6 +23,7 @@ import { getLocaleComponentStrings } from "../../utils/locale";
 export class CrowdsourceReporter {
     constructor() {
         this.description = undefined;
+        this.isMobile = undefined;
         this.enableAnonymousAccess = undefined;
         this.enableAnonymousComments = undefined;
         this.enableComments = undefined;
@@ -30,6 +31,7 @@ export class CrowdsourceReporter {
         this.enableNewReports = undefined;
         this.layers = undefined;
         this.loginTitle = undefined;
+        this.mapView = undefined;
         this.reportButtonText = undefined;
         this.reportsHeader = undefined;
         this.reportSubmittedMessage = undefined;
@@ -42,8 +44,6 @@ export class CrowdsourceReporter {
         this.theme = "light";
         this.enableZoom = true;
         this._mapInfo = undefined;
-        this._mapView = undefined;
-        this._isMobile = false;
         this._flowItems = ["layer-list"];
         this._sidePanelCollapsed = false;
         this._translations = undefined;
@@ -54,6 +54,22 @@ export class CrowdsourceReporter {
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
+    /**
+     * Called each time the mapView prop is changed.
+     */
+    async isMobileWatchHandler() {
+        if (this.isMobile) {
+            this._sidePanelCollapsed = false;
+        }
+    }
+    /**
+     * Called each time the mapView prop is changed.
+     */
+    async mapViewWatchHandler() {
+        await this.mapView.when(async () => {
+            await this.setMapView();
+        });
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
@@ -64,15 +80,6 @@ export class CrowdsourceReporter {
     //  Events (public)
     //
     //--------------------------------------------------------------------------
-    /**
-     * Listen for mapChanged event to be fired then store the new mapView so components will be updated
-     */
-    async mapChanged(evt) {
-        this._mapChange = evt.detail;
-        await this._mapChange.mapView.when(async () => {
-            await this.setMapView();
-        });
-    }
     //--------------------------------------------------------------------------
     //
     //  Functions (lifecycle)
@@ -85,27 +92,12 @@ export class CrowdsourceReporter {
      */
     async componentWillLoad() {
         await this._getTranslations();
-        const mediaQueryList = window.matchMedia("screen and (max-width: 600px)");
-        this._isMobile = mediaQueryList.matches;
-        //on change update the state for is mobile and the sidePanelCollapsed
-        mediaQueryList.onchange = (e) => {
-            this._isMobile = e.matches;
-            this._sidePanelCollapsed = false;
-        };
     }
     /**
      * Renders the component.
      */
     render() {
-        var _a, _b;
-        let validConfiguration = true;
-        //Check if webMap id is configured
-        if (!this.mapInfos || this.mapInfos.length <= 0 || (((_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.length) > 0 && !((_b = this.mapInfos[0]) === null || _b === void 0 ? void 0 : _b.id))) {
-            validConfiguration = false;
-        }
-        return (h(Host, null, h("div", null, validConfiguration &&
-            h("calcite-shell", { "content-behind": true }, this._getReporter(), this._getMapNode()), !validConfiguration &&
-            h("calcite-notice", { class: "error-msg", icon: "configure", kind: "danger", open: true }, h("div", { slot: "title" }, this._translations.error), h("div", { slot: "message" }, this._translations.invalidConfigurationErrorMsg)))));
+        return (h(Host, null, h("div", null, h("calcite-shell", { "content-behind": true }, this._getReporter()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -133,11 +125,11 @@ export class CrowdsourceReporter {
         });
         let sidePanelClass = "side-panel";
         //in case of mobile handle for collapsed styles of the panel
-        if (this._isMobile && this._sidePanelCollapsed) {
+        if (this.isMobile && this._sidePanelCollapsed) {
             sidePanelClass += " collapsed-side-panel";
         }
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h("calcite-panel", { class: sidePanelClass + " " + themeClass }, this._mapView
+        return (h("calcite-panel", { class: sidePanelClass + " width-full " + themeClass }, this.mapView
             ? h("calcite-flow", null, (renderLists === null || renderLists === void 0 ? void 0 : renderLists.length) > 0 && renderLists)
             : h("calcite-loader", { scale: "m" })));
     }
@@ -147,7 +139,7 @@ export class CrowdsourceReporter {
      * @protected
      */
     getLayerListFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this._isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this._hasValidLayers && h("calcite-action", { icon: "sort-ascending-arrow", slot: this._isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this._isMobile }), this._hasValidLayers && h("calcite-action", { icon: "filter", slot: this._isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this._isMobile }), this._isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports && h("calcite-button", { appearance: "secondary", slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { class: "height-full", layers: this.layers, mapView: this._mapView, noLayerErrorMsg: this._translations.noLayerToDisplayErrorMsg, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this) }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this._hasValidLayers && h("calcite-action", { icon: "sort-ascending-arrow", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this.isMobile }), this._hasValidLayers && h("calcite-action", { icon: "filter", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this.isMobile }), this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports && h("calcite-button", { appearance: "secondary", slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._translations.noLayerToDisplayErrorMsg, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this) }))));
     }
     /**
      * When layer list is loaded, we will receive the list of layers, if its  means we don't have any valid layer to be listed
@@ -198,14 +190,14 @@ export class CrowdsourceReporter {
      * @protected
      */
     getFeatureListFlowItem(layerId, layerName) {
-        return (h("calcite-flow-item", { collapsed: this._isMobile && this._sidePanelCollapsed, heading: layerName, onCalciteFlowItemBack: this.backFromFeatureList.bind(this) }, h("calcite-action", { icon: "sort-ascending-arrow", slot: this._isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this._isMobile }), h("calcite-action", { icon: "filter", slot: this._isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this._isMobile }), this._isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports && h("calcite-button", { appearance: "secondary", slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { class: "height-full", highlightOnMap: true, mapView: this._mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 100, selectedLayerId: layerId }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, onCalciteFlowItemBack: this.backFromFeatureList.bind(this) }, h("calcite-action", { icon: "sort-ascending-arrow", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this.isMobile }), h("calcite-action", { icon: "filter", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this.isMobile }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports && h("calcite-button", { appearance: "secondary", slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { class: "height-full", highlightOnMap: true, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 100, selectedLayerId: layerId }))));
     }
     /**
      * Returns the calcite-flow item for feature details
      * @returns Node
      */
     getFeatureDetailsFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this._isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromFeatureList.bind(this) }, this._isMobile && this.getActionToExpandCollapsePanel(), h("calcite-action", { icon: "share", slot: "header-actions-end", text: this._translations.share }), h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, graphics: this._selectedFeature, isLoading: false, isMobile: false, mapView: this._mapView, zoomAndScrollToSelected: true }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromFeatureList.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-action", { icon: "share", slot: "header-actions-end", text: this._translations.share }), h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, graphics: this._selectedFeature, isLoading: false, isMobile: false, mapView: this.mapView, zoomAndScrollToSelected: true }))));
     }
     /**
      * Returns the action button to Expand/Collapse side panel in mobile mode
@@ -213,51 +205,14 @@ export class CrowdsourceReporter {
     getActionToExpandCollapsePanel() {
         return (h("calcite-action", { icon: this._sidePanelCollapsed ? "chevrons-up" : "chevrons-down", onClick: this.toggleSidePanel.bind(this), slot: "header-actions-end", text: this._sidePanelCollapsed ? this._translations.expand : this._translations.collapse }));
     }
-    /**
-     * Get the map node based for the current layout options
-     * @returns the map node
-     * @protected
-     */
-    _getMapNode() {
-        var _a;
-        let mapContainerClass = "overflow-hidden map-container";
-        if (this._isMobile) {
-            if (this._sidePanelCollapsed) {
-                mapContainerClass += " map-container-mobile";
-            }
-        }
-        else {
-            mapContainerClass += " height-full";
-        }
-        return (h("div", { class: mapContainerClass }, h("map-card", { class: "width-full", defaultWebmapId: this.defaultWebmap, enableBasemap: false, enableFloorFilter: false, enableFullscreen: false, enableHome: this.enableHome, enableLegend: true, enableSearch: this.enableSearch, enableSingleExpand: false, hidden: false, homeZoomIndex: 0, homeZoomPosition: "top-left", homeZoomToolsSize: "s", mapInfos: (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: this.enableHome ? 4 : 3, mapWidgetsPosition: "top-left", mapWidgetsSize: "s", stackTools: false, theme: this.theme, toolOrder: ["search", "legend", "fullscreen", "basemap", "floorfilter"] })));
-    }
-    /**
-     * Get the current map info (configuration details) when maps change
-     * @param id Id of the map to be returned
-     * @returns IMapInfo for the provided id
-     * @protected
-     */
-    getMapInfo(id) {
-        let mapInfo;
-        this.mapInfos.some(mi => {
-            if (mi.id === id) {
-                mapInfo = mi;
-                return true;
-            }
-        });
-        return Object.assign({}, mapInfo);
-    }
     /**
      * Set the current map info when maps change
      * @protected
      */
     async setMapView() {
-        this._mapInfo = this.getMapInfo(this._mapChange.id);
-        this._mapView = this._mapChange.mapView;
-        this.initMapZoom();
-        this._mapView.popupEnabled = false;
+        this.mapView.popupEnabled = false;
         if (this._defaultCenter && this._defaultLevel) {
-            await this._mapView.goTo({
+            await this.mapView.goTo({
                 center: this._defaultCenter,
                 zoom: this._defaultLevel
             });
@@ -265,22 +220,6 @@ export class CrowdsourceReporter {
             this._defaultLevel = undefined;
         }
     }
-    /**
-     * Add/remove zoom tools based on enableZoom prop
-     * @protected
-     */
-    initMapZoom() {
-        if (!this.enableZoom) {
-            this._mapView.ui.remove("zoom");
-        }
-        else if (this.enableZoom) {
-            this._mapView.ui.add({
-                component: "zoom",
-                position: "top-left",
-                index: 0
-            });
-        }
-    }
     /**
      * Fetches the component's translations
      * @returns Promise when complete
@@ -320,6 +259,23 @@ export class CrowdsourceReporter {
                 "attribute": "description",
                 "reflect": false
             },
+            "isMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: When true the application will be in mobile mode, controls the mobile or desktop view"
+                },
+                "attribute": "is-mobile",
+                "reflect": false
+            },
             "enableAnonymousAccess": {
                 "type": "boolean",
                 "mutable": false,
@@ -437,6 +393,26 @@ export class CrowdsourceReporter {
                 "attribute": "login-title",
                 "reflect": false
             },
+            "mapView": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "__esri.MapView",
+                    "resolved": "MapView",
+                    "references": {
+                        "___esri": {
+                            "location": "global",
+                            "id": "global::___esri"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
+                }
+            },
             "reportButtonText": {
                 "type": "string",
                 "mutable": false,
@@ -649,8 +625,6 @@ export class CrowdsourceReporter {
     static get states() {
         return {
             "_mapInfo": {},
-            "_mapView": {},
-            "_isMobile": {},
             "_flowItems": {},
             "_sidePanelCollapsed": {},
             "_translations": {},
@@ -658,13 +632,13 @@ export class CrowdsourceReporter {
         };
     }
     static get elementRef() { return "el"; }
-    static get listeners() {
+    static get watchers() {
         return [{
-                "name": "mapChanged",
-                "method": "mapChanged",
-                "target": "window",
-                "capture": false,
-                "passive": false
+                "propName": "isMobile",
+                "methodName": "isMobileWatchHandler"
+            }, {
+                "propName": "mapView",
+                "methodName": "mapViewWatchHandler"
             }];
     }
 }

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

@@ -22,9 +22,34 @@
     | limitations under the License.
     -->
     <style>
-      .reporter {
-        height: 100vh;
-        width: 100vw;
+      #viewDiv {
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        bottom: 0px;
+        left: 390px;
+      }
+      #viewDiv[dir="rtl"] {
+        right: 390px;
+        left: 0px;
+      }
+      .over-map {
+        position: absolute;
+        left: 0px;
+        background-color: var(--calcite-color-foreground-1);
+      }
+      .over-map[dir="rtl"] {
+        right: 0px;
+      }
+      .column {
+        width: 360px;
+        padding: 1rem;
+        border: 1px solid var(--calcite-color-border-2);
+        height: -webkit-fill-available;
+        height: 100%;
+      }
+      .column[dir="rtl"] {
+        float: right;
       }
     </style>
 
@@ -37,64 +62,90 @@
     <script type="module" src="../solutions-components.esm.js"></script>
 
     <script>
-      function addValues() {
+      require(["esri/WebMap", "esri/views/MapView", "esri/widgets/Legend", "esri/config"], (
+        WebMap,
+        MapView,
+        Legend,
+        esriConfig
+      ) => {
         const demo = document.getElementById("demo");
 
-        let headerSet = false;
-        let custom = [];
-        let portal;
-        //Support id and portal URL parameter
-        var vars = window.location.search.substring(1).split("&");
-        vars.forEach((param) => {
-          let vals = param.split("=");
-          const v = vals[1];
-          switch (vals[0]) {
-            case "id":
-              custom = [{
-                id: v,
-                name: "Map from URL"
-              }];
-              break;
-            case "portal":
-              portal = v;
-            default:
-              break;
+        // let headerSet = false;
+        // let custom = [];
+        // let portal;
+        // //Support id and portal URL parameter
+        // var vars = window.location.search.substring(1).split("&");
+        // vars.forEach((param) => {
+        //   let vals = param.split("=");
+        //   const v = vals[1];
+        //   switch (vals[0]) {
+        //     case "id":
+        //       custom = [{
+        //         id: v,
+        //         name: "Map from URL"
+        //       }];
+        //       break;
+        //     case "portal":
+        //       portal = v;
+        //     default:
+        //       break;
+        //   }
+        // });
+
+        // if (portal) {
+        //   esriConfig.portalUrl = portal;
+        // }
+
+        // demo.mapInfos = [{
+        //   //id: "f8c4d99deb3c483cac296cc261e18a25", //blank no layers
+        //   //id: "a7e880f7afbb471991d43c8c4f1438ac" // Se mapping
+        //   //id: "c720e337ff814fe4a83bc244c46f8e43" //15 Layers
+        //   //id: "f5186c798b9e40dab1078658ddbc28cf" // 30K features
+        //   //id: "dda88d905a6748a5ab46bea5be795f33" // screening layers
+        //   id: "b5bdcb1e5d684dd3b21a2d44b8e4f928" //Popup content
+        // }];
+        // //if id is passed in the url parameter use that mapInfos
+        // if (custom?.length > 0) {
+        //   demo.mapInfos = custom;
+        // }
+
+        //esriConfig.portalUrl = "https://solutions.mapsdevext.arcgis.com";
+        var webMap = new WebMap({
+          portalItem: {
+            id: "b5bdcb1e5d684dd3b21a2d44b8e4f928"
           }
         });
 
-        if (portal) {
-          esriConfig.portalUrl = portal;
-        }
+        demo.mapView = new MapView({
+          container: "viewDiv",
+          map: webMap
+        });
+
+        demo.mapView.when(() => {
+        //   const legend = new Legend({
+        //     view: demo.mapView
+        //   });
+        //   demo.mapView.ui.add(legend, "top-left");
+        });
 
-        demo.mapInfos = [{
-          //id: "f8c4d99deb3c483cac296cc261e18a25", //blank no layers
-          //id: "a7e880f7afbb471991d43c8c4f1438ac" // Se mapping
-          //id: "c720e337ff814fe4a83bc244c46f8e43" //15 Layers
-          //id: "f5186c798b9e40dab1078658ddbc28cf" // 30K features
-          //id: "dda88d905a6748a5ab46bea5be795f33" // screening layers
-          id: "b5bdcb1e5d684dd3b21a2d44b8e4f928" //Popup content
-        }];
-        //if id is passed in the url parameter use that mapInfos
-        if (custom?.length > 0) {
-          demo.mapInfos = custom;
-        }
-        demo.enableHome = true;
-        demo.enableSearch = true;
-        demo.enableZoom = true;
+        // demo.enableHome = true;
+        // demo.enableSearch = true;
+        // demo.enableZoom = true;
         demo.reportsHeader = "Reports";
         demo.reportButtonText = "Report an incident";
         demo.enableNewReports = true;
-        //Select reporting layers - 
+        //Select reporting layers -
         //demo.layers = ['SE_field_mapping_9688', 'SE_field_mapping_5784', 'SE_field_mapping_1853'];
         //demo.layers = ['Three_Layers_nested_4042', 'SE_sort_2889', 'SE_sort_756']; //screening layers
         demo.theme = "light";
         demo.reportSubmittedMessage = "Thank you";
-      }
+      });
     </script>
   </head>
 
   <!-- <body class="calcite-mode-dark"> -->
-  <body onload="addValues()">
-    <crowdsource-reporter id="demo" class="reporter"></crowdsource-reporter>
+  <body>
+    <div id="viewDiv"></div>
+    <crowdsource-reporter id="demo" class="over-map column"></crowdsource-reporter>
   </body>
 </html>