@esri/solutions-components 0.8.5 → 0.8.6-6.2

package/dist/components/core.js

@@ -0,0 +1,15 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+/**
+ * Do not edit directly
+ * Generated on Wed, 01 May 2024 00:07:10 GMT
+ */
+const calciteSize24 = "24px";
+const calciteSize32 = "32px";
+const calciteSize44 = "44px";
+const calciteSize48 = "48px";
+
+export { calciteSize32 as a, calciteSize44 as b, calciteSize24 as c, calciteSize48 as d };

package/dist/components/create-feature2.js

@@ -3,11 +3,13 @@
  * 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 { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
-import { a as getAllLayers } from './mapViewUtils.js';
+import { a as getAllLayers, g as getLayerOrTable } from './mapViewUtils.js';
+import { d as defineCustomElement$1 } from './loader.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 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}.search-widget{width:92% !important;margin:5px 0 20px 14px}.display-none{display:none !important}";
+const CreateFeatureStyle0 = createFeatureCss;
 
 const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature extends HTMLElement {
     constructor() {
@@ -17,9 +19,17 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         this.fail = createEvent(this, "fail", 7);
         this.drawComplete = createEvent(this, "drawComplete", 7);
         this.editingAttachment = createEvent(this, "editingAttachment", 7);
+        this.progressStatus = createEvent(this, "progressStatus", 7);
+        /**
+         * boolean: Flag to maintain form submission using submit button
+         */
+        this._isSubmitBtnClicked = false;
         this.mapView = undefined;
         this.selectedLayerId = undefined;
         this.customizeSubmit = false;
+        this.searchConfiguration = undefined;
+        this._editorLoading = false;
+        this._showSearchWidget = undefined;
     }
     //--------------------------------------------------------------------------
     //
@@ -27,13 +37,25 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
     //
     //--------------------------------------------------------------------------
     /**
-    * Called each time the mapView prop is changed.
-    */
+     * Called each time the mapView prop is changed.
+     */
     async mapViewWatchHandler() {
         await this.mapView.when(async () => {
             await this.init();
         });
     }
+    /**
+     * When _editorLoading is true the container node will be hidden while starting the create workflow
+     */
+    async _editorLoadingWatchHandler(v) {
+        var _a, _b;
+        if (v) {
+            (_a = this._container) === null || _a === void 0 ? void 0 : _a.classList.add("display-none");
+            await this.startCreate();
+            (_b = this._container) === null || _b === void 0 ? void 0 : _b.classList.remove("display-none");
+            this._editorLoading = false;
+        }
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
@@ -54,6 +76,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      */
     async submit() {
         if (this._editor) {
+            this._isSubmitBtnClicked = true;
             this._editor.viewModel.featureFormViewModel.submit();
         }
     }
@@ -79,7 +102,10 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      * Renders the component.
      */
     render() {
-        return (h(Host, { id: "feature-form" }));
+        const showSearchWidget = this._showSearchWidget ? '' : 'display-none';
+        const loaderClass = this._editorLoading ? "" : "display-none";
+        const featureFormClass = this._editorLoading ? "display-none" : "";
+        return (h(Fragment, { key: 'a4ccd565a52a4cde4e76439629425f19bd4c222e' }, h("calcite-loader", { key: '30e8a3753985a734dd7cba461f26691b51f49ab9', class: loaderClass, label: "", scale: "s" }), h("div", { key: '0845f1fa85a21b578fd18200b43d4a77c34e6808', class: featureFormClass, id: "feature-form" }), h("div", { key: 'af74b6337f5a0dcfdbd552145c88eae5282a3307', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref" })));
     }
     //--------------------------------------------------------------------------
     //
@@ -87,11 +113,12 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
     //
     //--------------------------------------------------------------------------
     /**
-     * Init Editor widget and starts the create workflow
+     * Init Editor widget and Search widget
      */
     async init() {
         if (this.mapView && this.selectedLayerId) {
             await this.createEditorWidget();
+            await this.createSearchWidget();
         }
     }
     /**
@@ -100,31 +127,35 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      * @protected
      */
     async initModules() {
-        const [Editor, reactiveUtils] = await loadModules([
+        const [Editor, reactiveUtils, Search] = await loadModules([
             "esri/widgets/Editor",
-            "esri/core/reactiveUtils"
+            "esri/core/reactiveUtils",
+            "esri/widgets/Search"
         ]);
         this.Editor = Editor;
         this.reactiveUtils = reactiveUtils;
+        this.Search = Search;
     }
     /**
      * Display editor widget to create the new feature
      * @protected
      */
     async createEditorWidget() {
+        var _a;
         if (this._editor) {
             this._editor.destroy();
         }
         const layerInfos = [];
-        const container = document.createElement("div");
+        this._container = document.createElement("div");
+        (_a = this._container) === null || _a === void 0 ? void 0 : _a.classList.add("display-none");
         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,
+                addEnabled: true, // default is true, set to false to disable the ability to add a new feature
+                updateEnabled: false, // default is true, set to false to disable the ability to edit an existing feature
                 deleteEnabled: false // default is true, set to false to disable the ability to delete features
             });
         });
@@ -135,9 +166,9 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
             visibleElements: {
                 snappingControls: false
             },
-            container
+            container: this._container
         });
-        this.el.appendChild(container);
+        this.el.appendChild(this._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') {
@@ -155,64 +186,172 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         //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.progressStatus.emit(0.5);
+                this._editorLoading = true;
             }
         });
         this._editor.viewModel.addHandles(handle);
+        //Add handle to watch featureFormViewModel ready state
+        const formHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.featureFormViewModel) === null || _a === void 0 ? void 0 : _a.state; }, (state) => {
+            if (state === 'ready') {
+                this._showSearchWidget = false;
+                this.progressStatus.emit(1);
+                this.drawComplete.emit();
+            }
+        });
+        this._editor.viewModel.addHandles(formHandle);
+        //Add handle to watch editor viewmodel state and then show the search widget
+        const createFeatureHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
+            if (state === 'creating-features') {
+                this._editorLoading = true;
+                this._showSearchWidget = true;
+            }
+        });
+        this._editor.viewModel.addHandles(createFeatureHandle);
     }
     /**
      * 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', () => {
+        return new Promise((resolve, reject) => {
+            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', () => {
+                    this.progressStatus.emit(0.75);
+                    setTimeout(() => {
+                        //on form submit
+                        this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
+                        //hides the header and footer elements in editor widget
+                        this.hideEditorsElements().then(() => {
+                            resolve({});
+                        }, e => reject(e));
+                    }, 700);
+                });
+                //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]);
+                }
+                const resolvePromise = items.length > 1;
+                this.hideEditorsElements().then(() => {
+                    if (resolvePromise) {
+                        resolve({});
+                    }
+                }, e => resolvePromise && reject(e));
+            }
+        });
+    }
+    /**
+     * Display search widget to search location
+     * @protected
+     */
+    async createSearchWidget() {
+        let searchOptions = {
+            view: this.mapView,
+        };
+        if (this.searchConfiguration) {
+            const searchConfiguration = this._getSearchConfig(this.searchConfiguration, this.mapView);
+            searchOptions = Object.assign({}, searchConfiguration);
+        }
+        this._search = new this.Search(searchOptions);
+        this._search.container = 'search-widget-ref';
+        this._search.popupEnabled = false;
+        this._search.resultGraphicEnabled = false;
+        const layer = await getLayerOrTable(this.mapView, this.selectedLayerId);
+        let pointGeometry = null;
+        // on search get the geometry of the searched location and pass it in sketchViewModel and go to featureForm page
+        this._search.on('search-complete', (e) => {
+            var _a;
+            void this.mapView.goTo(e.results[0].results[0].extent);
+            if (layer.geometryType === 'point') {
+                pointGeometry = (_a = e.results[0].results[0]) === null || _a === void 0 ? void 0 : _a.feature.geometry;
+            }
+        });
+        //Add handle to watch if search viewModel state is ready
+        const createFeatureHandle = this.reactiveUtils.watch(() => this._search.viewModel.state, (state) => {
+            if (state === 'ready') {
                 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]);
+                    if (this._editor.viewModel.sketchViewModel.createGraphic && pointGeometry) {
+                        this._editor.viewModel.sketchViewModel.createGraphic.set('geometry', pointGeometry);
+                        this._editor.viewModel.sketchViewModel.complete();
+                        void this.hideEditorsElements();
+                    }
+                }, 100);
             }
-            //hides the header and footer elements in editor widget
-            this.hideEditorsElements();
+        });
+        this._search.viewModel.addHandles(createFeatureHandle);
+    }
+    /**
+     * Initialize the search widget based on user defined configuration
+     *
+     * @param searchConfiguration search configuration defined by the user
+     * @param view the current map view
+     *
+     * @protected
+     */
+    _getSearchConfig(searchConfiguration, view) {
+        const INCLUDE_DEFAULT_SOURCES = "includeDefaultSources";
+        const sources = searchConfiguration.sources;
+        if ((sources === null || sources === void 0 ? void 0 : sources.length) > 0) {
+            searchConfiguration[INCLUDE_DEFAULT_SOURCES] = false;
+            sources.forEach((source) => {
+                var _a, _b;
+                const isLayerSource = source.hasOwnProperty("layer");
+                if (isLayerSource) {
+                    const layerSource = source;
+                    const layerId = (_a = layerSource.layer) === null || _a === void 0 ? void 0 : _a.id;
+                    const layerFromMap = layerId ? view.map.findLayerById(layerId) : null;
+                    const layerUrl = (_b = layerSource === null || layerSource === void 0 ? void 0 : layerSource.layer) === null || _b === void 0 ? void 0 : _b.url;
+                    if (layerFromMap) {
+                        layerSource.layer = layerFromMap;
+                    }
+                    else if (layerUrl) {
+                        layerSource.layer = new this.FeatureLayer(layerUrl);
+                    }
+                }
+            });
+            sources === null || sources === void 0 ? void 0 : sources.forEach((source) => {
+                const isLocatorSource = source.hasOwnProperty("locator");
+                if (isLocatorSource) {
+                    const locatorSource = source;
+                    if ((locatorSource === null || locatorSource === void 0 ? void 0 : locatorSource.name) === "ArcGIS World Geocoding Service") {
+                        const outFields = locatorSource.outFields || ["Addr_type", "Match_addr", "StAddr", "City"];
+                        locatorSource.outFields = outFields;
+                        locatorSource.singleLineFieldName = "SingleLine";
+                    }
+                    locatorSource.url = locatorSource.url;
+                    delete locatorSource.url;
+                }
+            });
+        }
+        else {
+            searchConfiguration = Object.assign(Object.assign({}, searchConfiguration), { includeDefaultSources: true });
         }
+        return searchConfiguration;
     }
     /**
      * Hides the elements of editor widget
      * @protected
      */
-    hideEditorsElements() {
+    async hideEditorsElements() {
+        var _a, _b;
         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);
+        await this.timeout(700);
+        //hides the header and footer on the featureForm
+        (_b = (_a = this.el.querySelector('.esri-editor')) === null || _a === void 0 ? void 0 : _a.querySelectorAll('calcite-flow-item')) === null || _b === void 0 ? void 0 : _b.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');
+        });
     }
     /**
      * On creation of feature emit the event that the feature is created
@@ -223,11 +362,13 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         var _a;
         //return if any attribute is invalid , focus will be shifted to the invalid attribute in feature form
         if (evt.invalid.length) {
+            this._isSubmitBtnClicked = false;
             return;
         }
         //Submit only when valid attributes
         //emit success or fail based on the result
-        if (evt.valid.length) {
+        if (evt.valid.length && this._isSubmitBtnClicked) {
+            this._isSubmitBtnClicked = false;
             try {
                 await this._editor.activeWorkflow.commit();
                 //throw errors if any failures
@@ -246,31 +387,49 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
             this.success.emit();
         }
     }
+    /**
+     * call setTimeout in Promise wrapper
+     * @param delay The time, in milliseconds that the timer should wait before the promise is resolved
+     * @protected
+     */
+    timeout(delay) {
+        return new Promise(resolve => setTimeout(resolve, delay));
+    }
     get el() { return this; }
     static get watchers() { return {
-        "mapView": ["mapViewWatchHandler"]
+        "mapView": ["mapViewWatchHandler"],
+        "_editorLoading": ["_editorLoadingWatchHandler"]
     }; }
-    static get style() { return createFeatureCss; }
+    static get style() { return CreateFeatureStyle0; }
 }, [0, "create-feature", {
         "mapView": [16],
         "selectedLayerId": [1, "selected-layer-id"],
         "customizeSubmit": [4, "customize-submit"],
+        "searchConfiguration": [16],
+        "_editorLoading": [32],
+        "_showSearchWidget": [32],
         "close": [64],
         "submit": [64]
     }, undefined, {
-        "mapView": ["mapViewWatchHandler"]
+        "mapView": ["mapViewWatchHandler"],
+        "_editorLoading": ["_editorLoadingWatchHandler"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["create-feature"];
+    const components = ["create-feature", "calcite-loader"];
     components.forEach(tagName => { switch (tagName) {
         case "create-feature":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, CreateFeature);
             }
             break;
+        case "calcite-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
     } });
 }
 defineCustomElement();

package/dist/components/create-related-feature.d.ts

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

package/dist/components/create-related-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 CreateRelatedFeature$1, d as defineCustomElement$1 } from './create-related-feature2.js';
+
+const CreateRelatedFeature = CreateRelatedFeature$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CreateRelatedFeature, defineCustomElement };