@esri/solutions-components 0.7.30 → 0.7.31

package/dist/collection/collection-manifest.json

@@ -4,6 +4,7 @@
     "components/basemap-gallery/basemap-gallery.js",
     "components/buffer-tools/buffer-tools.js",
     "components/card-manager/card-manager.js",
+    "components/create-feature/create-feature.js",
     "components/crowdsource-manager/crowdsource-manager.js",
     "components/crowdsource-reporter/crowdsource-reporter.js",
     "components/deduct-calculator/deduct-calculator.js",

package/dist/collection/components/create-feature/create-feature.css

@@ -0,0 +1,23 @@
+/** @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;
+}
+
+.esri-editor__panel-toolbar {
+  display: none !important;
+}

package/dist/collection/components/create-feature/create-feature.js

@@ -0,0 +1,361 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+/** @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.
+ */
+import { Host, h } from "@stencil/core";
+import { loadModules } from "../../utils/loadModules";
+import { getLayerOrTable } from "../../utils/mapViewUtils";
+export class CreateFeature {
+    constructor() {
+        this.mapView = undefined;
+        this.selectedLayerId = undefined;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+    * Called each time the mapView prop is changed.
+    */
+    async mapViewWatchHandler() {
+        await this.mapView.when(async () => {
+            await this.init();
+        });
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Methods (public)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Destroy the Editor widget instance
+     * @returns Promise that resolves when the operation is complete
+     */
+    async close() {
+        if (this._editor) {
+            this._editor.destroy();
+        }
+    }
+    /**
+     * Submit the created feature
+     * @returns Promise that resolves when the operation is complete
+     */
+    async submit() {
+        if (this._editor) {
+            this._editor.viewModel.featureFormViewModel.submit();
+        }
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (lifecycle)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * StencilJS: Called once just after the component is first connected to the DOM.
+     * @returns Promise when complete
+     */
+    async componentWillLoad() {
+        await this.initModules();
+    }
+    /**
+     * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
+     */
+    async componentDidLoad() {
+        await this.init();
+    }
+    /**
+     * Renders the component.
+     */
+    render() {
+        return (h(Host, { id: "feature-form" }));
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Init Editor widget and starts the create workflow
+     */
+    async init() {
+        if (this.mapView) {
+            if (this.mapView && this.selectedLayerId) {
+                await getLayerOrTable(this.mapView, this.selectedLayerId);
+                await this.createEditorWidget();
+                await this.startCreate();
+                this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
+                setTimeout(() => {
+                    var _a, _b;
+                    this.el.querySelector('.esri-editor').querySelectorAll('calcite-flow-item')[1].shadowRoot.querySelector('calcite-panel').shadowRoot.querySelector('article').querySelector('header').setAttribute('style', 'display: none');
+                    (_b = (_a = this.el.querySelector('.esri-editor').querySelectorAll('calcite-flow-item')[1].shadowRoot.querySelector('calcite-panel').shadowRoot.querySelector('article')) === null || _a === void 0 ? void 0 : _a.querySelector('footer')) === null || _b === void 0 ? void 0 : _b.setAttribute('style', 'display: none');
+                }, 700);
+            }
+        }
+    }
+    /**
+     * Load esri javascript api modules
+     * @returns Promise resolving when function is done
+     * @protected
+     */
+    async initModules() {
+        const [Editor] = await loadModules([
+            "esri/widgets/Editor"
+        ]);
+        this.Editor = Editor;
+    }
+    /**
+     * Display editor widget to create the new feature
+     * @protected
+     */
+    async createEditorWidget() {
+        if (this._editor) {
+            this._editor.destroy();
+        }
+        const container = document.createElement("div");
+        const layer = await getLayerOrTable(this.mapView, this.selectedLayerId);
+        const selectedLayer = {
+            layer: layer
+        };
+        this._editor = new this.Editor({
+            allowedWorkflows: "create-features",
+            view: this.mapView,
+            layerInfos: [selectedLayer],
+            visibleElements: {
+                snappingControls: false,
+                snappingControlsElements: {
+                    featureEnabledToggle: false,
+                    layerList: false,
+                    enabledToggle: false
+                }
+            },
+            container,
+        });
+        this.el.appendChild(container);
+    }
+    /**
+     * Start creating the feature
+     * @protected
+     */
+    async startCreate() {
+        var _a, _b;
+        const layer = await getLayerOrTable(this.mapView, this.selectedLayerId);
+        if (layer) {
+            let template = layer.templates && layer.templates.length ? layer.templates[0] : {};
+            if (((_a = layer.sourceJSON) === null || _a === void 0 ? void 0 : _a.types.length) && ((_b = layer.sourceJSON.types[0].templates) === null || _b === void 0 ? void 0 : _b.length)) {
+                template = layer.sourceJSON.types[0].templates[0];
+            }
+            const creationInfo = {
+                layer: layer,
+                template: template
+            };
+            await this._editor.startCreateFeaturesWorkflowAtFeatureCreation(creationInfo);
+            this._editor.viewModel.sketchViewModel.on("create", (evt) => {
+                if (evt.state === "complete") {
+                    this.drawComplete.emit();
+                }
+            });
+        }
+    }
+    /**
+     * On creation of feature emit the event that the feature is created
+     * @param evt feature submit event
+     * @protected
+     */
+    async submitted(evt) {
+        var _a;
+        if (evt.invalid.length) {
+            return;
+        }
+        if (evt.valid.length) {
+            try {
+                await this._editor.activeWorkflow.commit();
+                //throw errors if any failures
+                if ((_a = this._editor.viewModel.failures) === null || _a === void 0 ? void 0 : _a.length) {
+                    this._editor.viewModel.failures.some((failure) => {
+                        if (failure.error) {
+                            throw (failure.error);
+                        }
+                    });
+                }
+            }
+            catch (e) {
+                this.fail.emit(e);
+                return;
+            }
+            this.success.emit();
+        }
+    }
+    static get is() { return "create-feature"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["create-feature.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["create-feature.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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"
+                }
+            },
+            "selectedLayerId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: Layer id of the feature layer in which the new feature is to be created"
+                },
+                "attribute": "selected-layer-id",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "success",
+                "name": "success",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on demand when the feature is created successfully"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "fail",
+                "name": "fail",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on demand when the feature creation is failed"
+                },
+                "complexType": {
+                    "original": "Error",
+                    "resolved": "Error",
+                    "references": {
+                        "Error": {
+                            "location": "global",
+                            "id": "global::Error"
+                        }
+                    }
+                }
+            }, {
+                "method": "drawComplete",
+                "name": "drawComplete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on demand when drawing is completed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Destroy the Editor widget instance",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise that resolves when the operation is complete"
+                        }]
+                }
+            },
+            "submit": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Submit the created feature",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise that resolves when the operation is complete"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "mapView",
+                "methodName": "mapViewWatchHandler"
+            }];
+    }
+}

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

@@ -44,6 +44,15 @@
   border: 1px solid var(--calcite-color-border-3);
 }
 
-.error-msg{
+.notice-msg{
   padding: 10px;
+  width: calc(100% - 20px);
+}
+
+.footer-top-button {
+  padding-bottom: 7px;
+}
+
+.footer-button {
+  height: 35px;
 }