npm - @esri/solutions-components - Versions diffs - 0.7.30 → 0.7.32 - Mend

@esri/solutions-components 0.7.30 → 0.7.32

Files changed (62) hide show

package/dist/collection/demos/create-feature.html ADDED Viewed

@@ -0,0 +1,90 @@
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="initial-scale=1,maximum-scale=1,user-scalable=no"
+    />
+    <title>Create Feature</title>
+    <!--
+      | 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.
+      -->
+    <style>
+      #viewDiv {
+        padding: 0;
+        margin: 0;
+        height: 100%;
+        width: calc(100% - 402px);
+      }
+      .over-map {
+        position: absolute;
+        top: 0;
+        right: 0px;
+        background-color: var(--calcite-color-foreground-1);
+      }
+      .column {
+        width: 400px;
+        height: 100%;
+        border: 1px solid var(--calcite-color-border-2);
+      }
+      .column[dir="rtl"] {
+        float: left;
+      }
+      .full-height {
+        height: 100%;
+      }
+    </style>
+    <link rel="stylesheet" href="https://jsdev.arcgis.com/4.29/esri/themes/light/main.css" />
+    <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
+    <link rel="stylesheet" href="../solutions-components.css" type="text/css">
+    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.0.0/calcite.css" />
+    <script src="https://jsdev.arcgis.com/4.29/"></script>
+    <script type="module" src="../solutions-components.esm.js"></script>
+    <script>
+      require(["esri/WebMap", "esri/views/MapView"], (
+        WebMap,
+        MapView
+      ) => {
+        var webMap = new WebMap({
+          portalItem: {
+            id: "024e8a5e73a34c5aade9632d651c5750"
+          }
+        });
+        var view = new MapView({
+          container: "viewDiv",
+          map: webMap
+        });
+        view.when(function () {
+          const demo = document.getElementById("demo");
+          demo.mapView = view;
+          demo.selectedLayerId = 'SE_attch_7327';
+        })
+      });
+    </script>
+  </head>
+  <body>
+    <div id="viewDiv"></div>
+    <create-feature id="demo" class="over-map column full-height"></create-feature>
+  </body>
+</html>

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

@@ -93,23 +93,38 @@
         const demo = document.getElementById("demo");
         let custom = null;
         let portal;
-        //Support webmap 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]) {
+        let locale = 'en'
+        //Support webmap, portal and locale URL parameter
+        //Also, set search params to reporter component - layerId, objectId, center, level etc.
+        let urlObj = new URL(window.location)
+        for (const [key, value] of urlObj.searchParams.entries()) {
+          switch (key) {
             case "webmap":
               custom = {
-                id: v
+                id: value
               };
               break;
             case "portal":
-              portal = v;
-            default:
+              portal = value;
+              break;
+            case "locale":
+              locale = value;
+              break;
+            case 'layerid':
+              demo.layerId = value;
+              break;
+            case 'oid':
+              demo.objectId = value;
+            case 'center' || 'level':
+              demo[key] = value;
               break;
           }
-        });
+        }
+        // Set the locale before the JSAPI loads
+        esriConfig.locale = locale;
+        demo.lang = locale;
         //update the portalUrl if found in urlParams
         //esriConfig.portalUrl = "https://solutions.mapsdevext.arcgis.com";
         if (portal) {
@@ -117,7 +132,6 @@
         }
         let portalItem = {
-          //id: "b5bdcb1e5d684dd3b21a2d44b8e4f928"
           //id: "f8c4d99deb3c483cac296cc261e18a25", //blank no layers
           //id: "a7e880f7afbb471991d43c8c4f1438ac" // Se mapping
           //id: "c720e337ff814fe4a83bc244c46f8e43" //15 Layers
@@ -125,6 +139,7 @@
           //id: "dda88d905a6748a5ab46bea5be795f33" // screening layers
           id: "b5bdcb1e5d684dd3b21a2d44b8e4f928" //Popup content
           //id: "d399ec39959a4aac8617ae4f05dd6785" //Arcade
+          //id: "024e8a5e73a34c5aade9632d651c5750" //Attachments
         }
         const webMap = new WebMap({
           portalItem: custom ?? portalItem

package/dist/collection/utils/downloadUtils.js CHANGED Viewed

@@ -540,7 +540,7 @@ export function _prepareAttributeValue(attributeValue, attributeType, attributeD
     if (attributeDomain && attributeDomain.type === "coded-value") {
         // "coded-value" domain field
         const value = attributeDomain.getName(attributeValue);
-        return value.toString();
+        return value === null || value === void 0 ? void 0 : value.toString();
     }
     else {
         // Non-domain field or unsupported domain type

package/dist/collection/utils/downloadUtils.ts CHANGED Viewed

@@ -769,7 +769,7 @@ export function _prepareAttributeValue(
   if (attributeDomain && (attributeDomain as __esri.CodedValueDomain).type === "coded-value") {
     // "coded-value" domain field
     const value = (attributeDomain as __esri.CodedValueDomain).getName(attributeValue);
-    return value.toString();
+    return value?.toString();
   } else {
     // Non-domain field or unsupported domain type
     let value = attributeValue;

package/dist/components/create-feature.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface CreateFeature extends Components.CreateFeature, HTMLElement {}
+export const CreateFeature: {
+    prototype: CreateFeature;
+    new (): CreateFeature;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/create-feature.js ADDED Viewed

@@ -0,0 +1,11 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { C as CreateFeature$1, d as defineCustomElement$1 } from './create-feature2.js';
+const CreateFeature = CreateFeature$1;
+const defineCustomElement = defineCustomElement$1;
+export { CreateFeature, defineCustomElement };

package/dist/components/create-feature2.js ADDED Viewed

@@ -0,0 +1,278 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { l as loadModules } from './loadModules.js';
+import { a as getAllLayers } from './mapViewUtils.js';
+const createFeatureCss = ":host{display:block}.esri-editor__panel-toolbar{display:none !important}.esri-editor__update-actions{display:none !important}.esri-editor__panel-content{padding-block:0px !important}.esri-editor .esri-item-list__group__header{display:none !important}.esri-editor__panel-content__section .esri-widget__heading{display:none !important}.esri-editor .esri-item-list__filter-container--sticky{padding-block:0px !important;padding-inline:10px !important}";
+const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.success = createEvent(this, "success", 7);
+        this.fail = createEvent(this, "fail", 7);
+        this.drawComplete = createEvent(this, "drawComplete", 7);
+        this.editingAttachment = createEvent(this, "editingAttachment", 7);
+        this.mapView = undefined;
+        this.selectedLayerId = undefined;
+        this.customizeSubmit = false;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  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 && this.selectedLayerId) {
+            await this.createEditorWidget();
+        }
+    }
+    /**
+     * Load esri javascript api modules
+     * @returns Promise resolving when function is done
+     * @protected
+     */
+    async initModules() {
+        const [Editor, reactiveUtils] = await loadModules([
+            "esri/widgets/Editor",
+            "esri/core/reactiveUtils"
+        ]);
+        this.Editor = Editor;
+        this.reactiveUtils = reactiveUtils;
+    }
+    /**
+     * Display editor widget to create the new feature
+     * @protected
+     */
+    async createEditorWidget() {
+        if (this._editor) {
+            this._editor.destroy();
+        }
+        const layerInfos = [];
+        const container = document.createElement("div");
+        const allMapLayers = await getAllLayers(this.mapView);
+        // eslint-disable-next-line @typescript-eslint/no-misused-promises
+        allMapLayers.forEach(async (eachLayer) => {
+            layerInfos.push({
+                layer: eachLayer,
+                enabled: (eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.type) === "feature" && (eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.id) === this.selectedLayerId,
+                addEnabled: true,
+                updateEnabled: false,
+                deleteEnabled: false // default is true, set to false to disable the ability to delete features
+            });
+        });
+        this._editor = new this.Editor({
+            allowedWorkflows: "create-features",
+            view: this.mapView,
+            layerInfos: layerInfos,
+            visibleElements: {
+                snappingControls: false
+            },
+            container
+        });
+        this.el.appendChild(container);
+        //Add handle to watch if attachments are added/edited
+        const attachmentHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
+            if (state === 'adding-attachment' || state === 'editing-attachment') {
+                this._addingAttachment = true;
+                this.editingAttachment.emit(true);
+            }
+            else {
+                if (this._addingAttachment) {
+                    this.editingAttachment.emit(false);
+                    this._addingAttachment = false;
+                }
+            }
+        });
+        this._editor.viewModel.addHandles(attachmentHandle);
+        //Add handle to watch featureTemplatesViewModel ready state and then start the creation
+        const handle = this.reactiveUtils.watch(() => this._editor.viewModel.featureTemplatesViewModel.state, (state) => {
+            if (state === 'ready') {
+                void this.startCreate();
+            }
+        });
+        this._editor.viewModel.addHandles(handle);
+    }
+    /**
+     * Start creating the feature
+     * @protected
+     */
+    async startCreate() {
+        var _a;
+        if ((_a = this._editor.viewModel.featureTemplatesViewModel.items) === null || _a === void 0 ? void 0 : _a.length) {
+            const items = this._editor.viewModel.featureTemplatesViewModel.items[0].get("items");
+            //once the feature template is selected handle the event for formSubmit and sketch complete
+            //also, hide the headers and footer in the editor as we will be showing our own submit and cancel button
+            this._editor.viewModel.featureTemplatesViewModel.on('select', () => {
+                setTimeout(() => {
+                    //on form submit
+                    this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
+                    //on sketch complete emit the event
+                    this._editor.viewModel.sketchViewModel.on("create", (evt) => {
+                        if (evt.state === "complete") {
+                            this.drawComplete.emit();
+                        }
+                    });
+                    this.hideEditorsElements();
+                }, 700);
+                this.hideEditorsElements();
+            });
+            //if only one feature template then directly start geometry creation for that
+            //else allow feature template selection to user
+            if (items.length === 1) {
+                this._editor.viewModel.featureTemplatesViewModel.select(items[0]);
+            }
+            //hides the header and footer elements in editor widget
+            this.hideEditorsElements();
+        }
+    }
+    /**
+     * Hides the elements of editor widget
+     * @protected
+     */
+    hideEditorsElements() {
+        if (!this.customizeSubmit) {
+            return;
+        }
+        setTimeout(() => {
+            var _a;
+            //hides the header and footer on the featureForm
+            (_a = this.el.querySelector('.esri-editor').querySelectorAll('calcite-flow-item')) === null || _a === void 0 ? void 0 : _a.forEach((flowItem) => {
+                var _a, _b, _c, _d, _e;
+                const article = (_c = (_b = (_a = flowItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('calcite-panel')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('article');
+                //hide the header
+                (_d = article === null || article === void 0 ? void 0 : article.querySelector('header')) === null || _d === void 0 ? void 0 : _d.setAttribute('style', 'display: none');
+                //hide the footer
+                (_e = article === null || article === void 0 ? void 0 : article.querySelector('footer')) === null || _e === void 0 ? void 0 : _e.setAttribute('style', 'display: none');
+            });
+        }, 700);
+    }
+    /**
+     * On creation of feature emit the event that the feature is created
+     * @param evt feature submit event
+     * @protected
+     */
+    async submitted(evt) {
+        var _a;
+        //return if any attribute is invalid , focus will be shifted to the invalid attribute in feature form
+        if (evt.invalid.length) {
+            return;
+        }
+        //Submit only when valid attributes
+        //emit success or fail based on the result
+        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();
+        }
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "mapView": ["mapViewWatchHandler"]
+    }; }
+    static get style() { return createFeatureCss; }
+}, [0, "create-feature", {
+        "mapView": [16],
+        "selectedLayerId": [1, "selected-layer-id"],
+        "customizeSubmit": [4, "customize-submit"],
+        "close": [64],
+        "submit": [64]
+    }, undefined, {
+        "mapView": ["mapViewWatchHandler"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["create-feature"];
+    components.forEach(tagName => { switch (tagName) {
+        case "create-feature":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CreateFeature);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+export { CreateFeature as C, defineCustomElement as d };