@esri/solutions-components 0.7.23 → 0.7.24

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

@@ -8,8 +8,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b8a649fc.js');
-const locale = require('./locale-9db09b63.js');
+const locale = require('./locale-1ff119f5.js');
 const interfaces = require('./interfaces-7cd0a48a.js');
+const mapViewUtils = require('./mapViewUtils-8aa325de.js');
+require('./loadModules-46d14e81.js');
 require('./esri-loader-a91c0ec1.js');
 require('./_commonjsHelpers-384729db.js');
 
@@ -56,6 +58,7 @@ const CrowdsourceManager = class {
         this._hideTable = false;
         this._isMobile = undefined;
         this._translations = undefined;
+        this._layer = undefined;
         this._layoutMode = interfaces.ELayoutMode.GRID;
         this._mapInfo = undefined;
         this._mapView = undefined;
@@ -166,6 +169,16 @@ const CrowdsourceManager = class {
             this._expandPopup = false;
         }
     }
+    /**
+     * Get the layer for the provided layer id
+     */
+    async layerSelectionChange(evt) {
+        const id = evt.detail[0];
+        const layer = await mapViewUtils.getLayerOrTable(this._mapView, id);
+        await layer.when(() => {
+            this._layer = layer;
+        });
+    }
     //--------------------------------------------------------------------------
     //
     //  Functions (lifecycle)
@@ -214,8 +227,10 @@ const CrowdsourceManager = class {
      * @protected
      */
     _getFooter() {
+        var _a, _b, _c, _d;
         const hasSelectedFeatures = this._numSelected > 0;
-        return this._isMobile && hasSelectedFeatures && !this._hideFooter ? (index.h("div", { class: `width-100`, slot: "footer" }, index.h("div", { class: "display-flex padding-1-2" }, index.h("calcite-button", { appearance: "solid", id: "solutions-show", onClick: () => this.showHideMapPopupAndTable(true), width: "full" }, this._translations.view.replace("{{n}}", this._numSelected.toString())), index.h("calcite-button", { appearance: "outline", class: "padding-inline-start-1", id: "solutions-delete", kind: "danger", onClick: () => this._layerTable.deleteFeatures(), width: "full" }, this._translations.delete.replace("{{n}}", this._numSelected.toString()))))) : undefined;
+        const deleteEnabled = ((_a = this._layer) === null || _a === void 0 ? void 0 : _a.editingEnabled) && ((_d = (_c = (_b = this._layer) === null || _b === void 0 ? void 0 : _b.capabilities) === null || _c === void 0 ? void 0 : _c.operations) === null || _d === void 0 ? void 0 : _d.supportsDelete);
+        return this._isMobile && hasSelectedFeatures && !this._hideFooter ? (index.h("div", { class: `width-100`, slot: "footer" }, index.h("div", { class: "display-flex padding-1-2" }, index.h("calcite-button", { appearance: "solid", id: "solutions-show", onClick: () => this.showHideMapPopupAndTable(true), width: "full" }, this._translations.view.replace("{{n}}", this._numSelected.toString())), deleteEnabled ? (index.h("delete-button", { class: "padding-inline-start-1 width-full", id: "solutions-delete", ids: this._layerTable.selectedIds, layer: this._layer })) : undefined))) : undefined;
     }
     /**
      * Get the icon name to use for the divider icon based on the current layout
@@ -377,7 +392,7 @@ const CrowdsourceManager = class {
      * @protected
      */
     _getTable(layoutMode, panelOpen, hideTable) {
-        const tableClass = hideTable ? "visibility-hidden" : "";
+        const tableClass = hideTable && this._isMobile ? "visibility-hidden" : "";
         const tableSizeClass = this._getTableSizeClass(layoutMode, panelOpen);
         const icon = this._getDividerIcon(layoutMode, panelOpen);
         const tooltip = panelOpen ? this._translations.close : this._translations.open;

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

@@ -8,8 +8,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b8a649fc.js');
+const locale = require('./locale-1ff119f5.js');
+require('./loadModules-46d14e81.js');
+require('./esri-loader-a91c0ec1.js');
+require('./_commonjsHelpers-384729db.js');
 
-const crowdsourceReporterCss = ":host{display:block}";
+const crowdsourceReporterCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.width-full{width:100%}.width-0{width:0}.height-full{height:100%}.height-0{height:0}.overflow-hidden{overflow:hidden}.border{border:1px solid var(--calcite-color-border-3)}.map-container{position:absolute;width:calc(100% - 390px);left:390px}.side-panel{padding:2px;width:390px;height:100%;position:absolute;top:0;left:0;z-index:60}.error-msg{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}}";
 
 const CrowdsourceReporter = class {
     constructor(hostRef) {
@@ -22,25 +26,27 @@ const CrowdsourceReporter = class {
         this.enableNewReports = undefined;
         this.layers = undefined;
         this.loginTitle = undefined;
-        this.mapView = undefined;
         this.reportButtonText = undefined;
         this.reportsHeader = undefined;
         this.reportSubmittedMessage = undefined;
         this.searchConfiguration = undefined;
         this.showComments = undefined;
+        this.defaultWebmap = "";
+        this.enableSearch = true;
+        this.enableHome = true;
+        this.mapInfos = [];
+        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;
+        this._hasValidLayers = false;
     }
     //--------------------------------------------------------------------------
     //
-    //  State (internal)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
-    //  Properties (protected)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
@@ -54,6 +60,15 @@ const CrowdsourceReporter = class {
     //  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)
@@ -61,18 +76,32 @@ const CrowdsourceReporter = class {
     //--------------------------------------------------------------------------
     /**
      * StencilJS: Called once just after the component is first connected to the DOM.
-     *
+     * Create component translations and monitor the mediaQuery change to detect mobile/desktop mode
      * @returns Promise when complete
      */
-    // async componentWillLoad(): Promise<void> {
-    //   await this._getTranslations();
-    //   await this._initModules();
-    // }
+    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() {
-        return (index.h(index.Host, null, index.h("slot", null, this.loginTitle + this.description)));
+        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 (index.h(index.Host, null, index.h("div", null, validConfiguration &&
+            index.h("calcite-shell", { "content-behind": true }, this._getReporter(), this._getMapNode()), !validConfiguration &&
+            index.h("calcite-notice", { class: "error-msg", icon: "configure", kind: "danger", open: true }, index.h("div", { slot: "title" }, this._translations.error), index.h("div", { slot: "message" }, this._translations.invalidConfigurationErrorMsg)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -80,32 +109,182 @@ const CrowdsourceReporter = class {
     //
     //--------------------------------------------------------------------------
     /**
-     * Load esri javascript api modules
-     *
-     * @returns Promise resolving when function is done
-     *
+     * Get the reporter app functionality
+     * @protected
+     */
+    _getReporter() {
+        const renderLists = [];
+        this._flowItems.forEach((item) => {
+            switch (item) {
+                case "layer-list":
+                    renderLists.push(this.getLayerListFlowItem());
+                    break;
+                case "feature-list":
+                    renderLists.push(this.getFeatureListFlowItem(this._selectedLayerId, this._selectedLayerName));
+                    break;
+                case "feature-details":
+                    renderLists.push(this.getFeatureDetailsFlowItem());
+                    break;
+            }
+        });
+        let sidePanelClass = "side-panel";
+        //in case of mobile handle for collapsed styles of the panel
+        if (this._isMobile && this._sidePanelCollapsed) {
+            sidePanelClass += " collapsed-side-panel";
+        }
+        const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
+        return (index.h("calcite-panel", { class: sidePanelClass + " " + themeClass }, this._mapView
+            ? index.h("calcite-flow", null, (renderLists === null || renderLists === void 0 ? void 0 : renderLists.length) > 0 && renderLists)
+            : index.h("calcite-loader", { scale: "m" })));
+    }
+    /**
+     * Get the feature layer list
+     * @returns the layer list items
+     * @protected
+     */
+    getLayerListFlowItem() {
+        return (index.h("calcite-flow-item", { collapsed: this._isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this._hasValidLayers && index.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 && index.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 && index.h("calcite-button", { appearance: "secondary", slot: "footer", width: "full" }, this.reportButtonText), index.h("calcite-panel", { "full-height": true, "full-width": true }, index.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
+     * @param evt Event which has list of layers
+     * @protected
+     */
+    layerListLoaded(evt) {
+        const layersListed = evt.detail;
+        this._hasValidLayers = layersListed.length > 0;
+    }
+    /**On click of layer list item show feature list
+     * @param evt Event which has details of selected layerId and layerName
+     * @protected
+     */
+    displayFeaturesList(evt) {
+        this._selectedLayerId = evt.detail.layerId;
+        this._selectedLayerName = evt.detail.layerName;
+        this._flowItems = [...this._flowItems, "feature-list"];
+    }
+    /**
+     * On back from feature list navigate to the Layer list panel
+     * @protected
+     */
+    backFromFeatureList() {
+        const updatedFlowItems = [...this._flowItems];
+        updatedFlowItems.pop();
+        this._flowItems = [...updatedFlowItems];
+    }
+    /**
+     * Toggle side panel in case of mobile mode
      * @protected
      */
-    // protected async _initModules(): Promise<void> {
-    //   const [geometryEngine, jsonUtils]: [
-    //     __esri.geometryEngine,
-    //     __esri.symbolsSupportJsonUtils
-    //   ] = await loadModules([
-    //     "esri/geometry/geometryEngine",
-    //     "esri/symbols/support/jsonUtils"
-    //   ]);
-    //   this._geometryEngine = geometryEngine;
-    //   this._jsonUtils = jsonUtils;
-    // }
+    toggleSidePanel() {
+        this._sidePanelCollapsed = !this._sidePanelCollapsed;
+    }
+    /**
+     * When feature is selected from list store that and show feature details
+     * @param evt Event which has details of selected feature
+     */
+    async onFeatureSelectFromList(evt) {
+        this._selectedFeature = [evt.detail];
+        this._flowItems = [...this._flowItems, "feature-details"];
+    }
+    /**
+     * Get feature list of the selected feature layer
+     * @param layerId Layer id
+     * @returns feature list node
+     * @protected
+     */
+    getFeatureListFlowItem(layerId, layerName) {
+        return (index.h("calcite-flow-item", { collapsed: this._isMobile && this._sidePanelCollapsed, heading: layerName, onCalciteFlowItemBack: this.backFromFeatureList.bind(this) }, index.h("calcite-action", { icon: "sort-ascending-arrow", slot: this._isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this._isMobile }), index.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 && index.h("calcite-button", { appearance: "secondary", slot: "footer", width: "full" }, this.reportButtonText), index.h("calcite-panel", { "full-height": true }, index.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 (index.h("calcite-flow-item", { collapsed: this._isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromFeatureList.bind(this) }, this._isMobile && this.getActionToExpandCollapsePanel(), index.h("calcite-action", { icon: "share", slot: "header-actions-end", text: this._translations.share }), index.h("calcite-panel", { "full-height": true }, index.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
+     */
+    getActionToExpandCollapsePanel() {
+        return (index.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 (index.h("div", { class: mapContainerClass }, index.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;
+        if (this._defaultCenter && this._defaultLevel) {
+            await this._mapView.goTo({
+                center: this._defaultCenter,
+                zoom: this._defaultLevel
+            });
+            this._defaultCenter = undefined;
+            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
      * @protected
      */
     async _getTranslations() {
-        // const messages = await getLocaleComponentStrings(this.el);
-        // this._translations = messages[0] as typeof BufferTools_T9n;
+        const messages = await locale.getLocaleComponentStrings(this.el);
+        this._translations = messages[0];
     }
     get el() { return index.getElement(this); }
 };