@esri/solutions-components 0.7.30 → 0.7.31

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 };