@esri/solutions-components 0.7.23 → 0.7.25

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

@@ -8,7 +8,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b8a649fc.js');
-const locale = require('./locale-9db09b63.js');
+const locale = require('./locale-a476e15d.js');
 const common = require('./common-4cd3537b.js');
 require('./esri-loader-a91c0ec1.js');
 require('./_commonjsHelpers-384729db.js');

package/dist/collection/collection-manifest.json

@@ -7,13 +7,16 @@
     "components/crowdsource-manager/crowdsource-manager.js",
     "components/crowdsource-reporter/crowdsource-reporter.js",
     "components/deduct-calculator/deduct-calculator.js",
+    "components/delete-button/delete-button.js",
     "components/edit-card/edit-card.js",
     "components/feature-comments/feature-comments.js",
     "components/feature-form-flow-item/feature-form-flow-item.js",
+    "components/feature-list/feature-list.js",
     "components/features-flow-item/features-flow-item.js",
     "components/floor-filter/floor-filter.js",
     "components/info-card/info-card.js",
     "components/json-editor/json-editor.js",
+    "components/layer-list/layer-list.js",
     "components/layer-table/layer-table.js",
     "components/layout-manager/layout-manager.js",
     "components/list-flow-item/list-flow-item.js",

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

@@ -21,6 +21,7 @@
 import { Host, h } from "@stencil/core";
 import { getLocaleComponentStrings } from "../../utils/locale";
 import { ELayoutMode } from "../../utils/interfaces";
+import { getLayerOrTable } from "../../utils/mapViewUtils";
 export class CrowdsourceManager {
     constructor() {
         /**
@@ -61,6 +62,7 @@ export class CrowdsourceManager {
         this._hideTable = false;
         this._isMobile = undefined;
         this._translations = undefined;
+        this._layer = undefined;
         this._layoutMode = ELayoutMode.GRID;
         this._mapInfo = undefined;
         this._mapView = undefined;
@@ -171,6 +173,16 @@ export class CrowdsourceManager {
             this._expandPopup = false;
         }
     }
+    /**
+     * Get the layer for the provided layer id
+     */
+    async layerSelectionChange(evt) {
+        const id = evt.detail[0];
+        const layer = await getLayerOrTable(this._mapView, id);
+        await layer.when(() => {
+            this._layer = layer;
+        });
+    }
     //--------------------------------------------------------------------------
     //
     //  Functions (lifecycle)
@@ -219,8 +231,10 @@ export class CrowdsourceManager {
      * @protected
      */
     _getFooter() {
+        var _a, _b, _c, _d;
         const hasSelectedFeatures = this._numSelected > 0;
-        return this._isMobile && hasSelectedFeatures && !this._hideFooter ? (h("div", { class: `width-100`, slot: "footer" }, h("div", { class: "display-flex padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-show", onClick: () => this.showHideMapPopupAndTable(true), width: "full" }, this._translations.view.replace("{{n}}", this._numSelected.toString())), 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 ? (h("div", { class: `width-100`, slot: "footer" }, h("div", { class: "display-flex padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-show", onClick: () => this.showHideMapPopupAndTable(true), width: "full" }, this._translations.view.replace("{{n}}", this._numSelected.toString())), deleteEnabled ? (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
@@ -382,7 +396,7 @@ export class CrowdsourceManager {
      * @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;
@@ -1019,6 +1033,7 @@ export class CrowdsourceManager {
             "_hideTable": {},
             "_isMobile": {},
             "_translations": {},
+            "_layer": {},
             "_layoutMode": {},
             "_mapInfo": {},
             "_mapView": {},
@@ -1086,6 +1101,12 @@ export class CrowdsourceManager {
                 "target": "window",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "layerSelectionChange",
+                "method": "layerSelectionChange",
+                "target": "window",
+                "capture": false,
+                "passive": false
             }];
     }
 }

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

@@ -16,4 +16,55 @@
 
 :host {
   display: block;
+  --calcite-label-margin-bottom: 0px;
+  --solutions-theme-foreground-color: var(--calcite-color-foreground-1);
+}
+
+.width-full {
+  width: 100% !important;
+}
+
+.width-0 {
+  width: 0;
+}
+
+.height-full {
+  height: 100% !important;
+}
+
+.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;
+}
+
+.collapsed-side-panel {
+  top: calc(100% - 55px);
+  height: 54px;
 }

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

@@ -19,9 +19,11 @@
  * limitations under the License.
  */
 import { Host, h } from "@stencil/core";
+import { getLocaleComponentStrings } from "../../utils/locale";
 export class CrowdsourceReporter {
     constructor() {
         this.description = undefined;
+        this.isMobile = undefined;
         this.enableAnonymousAccess = undefined;
         this.enableAnonymousComments = undefined;
         this.enableComments = undefined;
@@ -35,22 +37,39 @@ export class CrowdsourceReporter {
         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._flowItems = ["layer-list"];
+        this._sidePanelCollapsed = false;
+        this._translations = undefined;
+        this._hasValidLayers = false;
     }
     //--------------------------------------------------------------------------
     //
-    //  State (internal)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
-    //  Properties (protected)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
     //  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)
@@ -68,18 +87,17 @@ export class CrowdsourceReporter {
     //--------------------------------------------------------------------------
     /**
      * 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();
+    }
     /**
      * Renders the component.
      */
     render() {
-        return (h(Host, null, h("slot", null, this.loginTitle + this.description)));
+        return (h(Host, null, h("div", null, h("calcite-shell", { "content-behind": true }, this._getReporter()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -87,35 +105,131 @@ export class CrowdsourceReporter {
     //
     //--------------------------------------------------------------------------
     /**
-     * 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 (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" })));
+    }
+    /**
+     * Get the feature layer list
+     * @returns the layer list items
      * @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;
-    // }
+    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) }))));
+    }
+    /**
+     * 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
+     */
+    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 (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 }))));
+    }
+    /**
+     * Returns the action button to Expand/Collapse side panel in mobile mode
+     */
+    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 }));
+    }
+    /**
+     * Set the current map info when maps change
+     * @protected
+     */
+    async setMapView() {
+        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;
+        }
+    }
     /**
      * 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 getLocaleComponentStrings(this.el);
+        this._translations = messages[0];
     }
     static get is() { return "crowdsource-reporter"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["crowdsource-reporter.css"]
@@ -145,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,
@@ -370,8 +501,144 @@ export class CrowdsourceReporter {
                 },
                 "attribute": "show-comments",
                 "reflect": false
+            },
+            "defaultWebmap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: Item ID of the web map that should be selected by default"
+                },
+                "attribute": "default-webmap",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "enableSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: when true the search widget will be available"
+                },
+                "attribute": "enable-search",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "enableHome": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: when true the home widget will be available"
+                },
+                "attribute": "enable-home",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "mapInfos": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IMapInfo[]",
+                    "resolved": "IMapInfo[]",
+                    "references": {
+                        "IMapInfo": {
+                            "location": "import",
+                            "path": "../../utils/interfaces",
+                            "id": "src/utils/interfaces.ts::IMapInfo"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "IMapInfo[]: array of map infos (name and id)"
+                },
+                "defaultValue": "[]"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "theme",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {
+                        "theme": {
+                            "location": "import",
+                            "path": "../../utils/interfaces",
+                            "id": "src/utils/interfaces.ts::theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "theme: \"light\" | \"dark\" theme to be used"
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"light\""
+            },
+            "enableZoom": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: when true the zoom widget will be available"
+                },
+                "attribute": "enable-zoom",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }
+    static get states() {
+        return {
+            "_mapInfo": {},
+            "_flowItems": {},
+            "_sidePanelCollapsed": {},
+            "_translations": {},
+            "_hasValidLayers": {}
+        };
+    }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isMobile",
+                "methodName": "isMobileWatchHandler"
+            }, {
+                "propName": "mapView",
+                "methodName": "mapViewWatchHandler"
+            }];
+    }
 }

package/dist/{solutions-components/p-48ff9cea.js → collection/components/delete-button/delete-button.css}

@@ -1,21 +1,19 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-import{e as a}from"./p-d918ec36.js";
-/** @license
- * Copyright 2022 Esri
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */const s=async(s,o)=>(await a.loadModules(s,o)).map((a=>a.__esModule&&a.default?a.default:a));export{s as l}
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host {
+  display: block;
+}