@esri/solutions-components 0.7.29 → 0.7.31

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

@@ -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
@@ -156,20 +171,20 @@
         //on change update the prop for is mobile
         mediaQueryList.onchange = (e) => {
           demo.isMobile = e.matches;
-          togglePanel({detail:false})
+          togglePanel({ detail: false })
         }
         //listen to togglePanel event
         demo.addEventListener('togglePanel', togglePanel);
       });
 
-      function togglePanel(evt){
+      function togglePanel(evt) {
         const state = evt.detail;
         const viewDiv = document.getElementById("viewDiv");
         const demo = document.getElementById("demo");
-        if(state){
+        if (state) {
           demo.classList.add("column-collapsed");
           viewDiv.classList.add("map-with-panel-collapsed");
-        } else{
+        } else {
           demo.classList.remove("column-collapsed");
           viewDiv.classList.remove("map-with-panel-collapsed");
         }

package/dist/collection/demos/feature-list.html

@@ -77,7 +77,7 @@
         view.when(function () {
           const demo = document.getElementById("demo");
           demo.mapView = view;
-          demo.selectedLayerId = 'BirdObservationTryItLive_2797'
+          demo.selectedLayerId = 'BirdObservationTryItLive_2797';
           demo.pageSize = 30;
         })
       });

package/dist/collection/utils/downloadUtils.js

@@ -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

@@ -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

@@ -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

@@ -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

@@ -0,0 +1,226 @@
+/*!
+ * 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 { g as getLayerOrTable } from './mapViewUtils.js';
+
+const createFeatureCss = ":host{display:block}.esri-editor__panel-toolbar{display:none !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.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();
+        }
+    }
+    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"],
+        "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 };