@esri/solutions-components 0.7.30 → 0.7.32

package/dist/assets/t9n/crowdsource-reporter/resources.json

@@ -6,15 +6,17 @@
   "expand": "Expand",
   "collapse": "Collapse",
   "next": "Next",
+  "submit": "Submit",
   "cancel": "Cancel",
   "back": "Back",
   "error": "Error",
   "invalidConfigurationErrorMsg": "Invalid configuration",
-  "noLayerToDisplayErrorMsg": "Configured web map don't have any editable feature layer",
-  "chooseCategoryMsg": "Choose a category for the problem you're reporting",
-  "featureErrorMsg": "Features not found",
-  "featureEditFormInfoMsg": "Please provide the details for the incident you are reporting.",
+  "noLayerToDisplayErrorMsg": "Configured web map don't have any editable feature layer.",
+  "chooseCategoryMsg": "Choose a category for your report.",
+  "featureErrorMsg": "Features not found.",
+  "featureEditFormInfoMsg": "Please provide the details for your report.",
   "currentLocationMsg": "Use my current location",
+  "addLocationMsg": "Add the location for your report.",
   "reportSubmit": "Report Submitted.",
-  "submitMsg": "Thank you! Your report was successfully submitted"
+  "submitMsg": "Thank you! Your report was successfully submitted."
 }

package/dist/assets/t9n/crowdsource-reporter/resources_en.json

@@ -6,15 +6,17 @@
   "expand": "Expand",
   "collapse": "Collapse",
   "next": "Next",
+  "submit": "Submit",
   "cancel": "Cancel",
   "back": "Back",
   "error": "Error",
   "invalidConfigurationErrorMsg": "Invalid configuration",
-  "noLayerToDisplayErrorMsg": "Configured web map don't have any editable feature layer",
-  "chooseCategoryMsg": "Choose a category for the problem you're reporting",
-  "featureErrorMsg": "Features not found",
-  "featureEditFormInfoMsg": "Please provide the details for the incident you are reporting.",
+  "noLayerToDisplayErrorMsg": "Configured web map don't have any editable feature layer.",
+  "chooseCategoryMsg": "Choose a category for your report.",
+  "featureErrorMsg": "Features not found.",
+  "featureEditFormInfoMsg": "Please provide the details for your report.",
   "currentLocationMsg": "Use my current location",
+  "addLocationMsg": "Add the location for your report.",
   "reportSubmit": "Report Submitted.",
-  "submitMsg": "Thank you! Your report was successfully submitted"
+  "submitMsg": "Thank you! Your report was successfully submitted."
 }

package/dist/assets/t9n/feature-list/resources.json

@@ -1,4 +1,4 @@
 {
   "error": "Error",
-  "featureErrorMsg": "Features not found"
+  "featureErrorMsg": "Features not found."
 }

package/dist/assets/t9n/feature-list/resources_en.json

@@ -1,4 +1,4 @@
 {
   "error": "Error",
-  "featureErrorMsg": "Features not found"
+  "featureErrorMsg": "Features not found."
 }

package/dist/assets/t9n/layer-list/resources.json

@@ -1,4 +1,4 @@
 {
   "error": "Error",
-  "noLayerToDisplayErrorMsg": "Configured web map don't have any editable feature layer"
+  "noLayerToDisplayErrorMsg": "Configured web map don't have any editable feature layer."
 }

package/dist/assets/t9n/layer-list/resources_en.json

@@ -1,4 +1,4 @@
 {
   "error": "Error",
-  "noLayerToDisplayErrorMsg": "Configured web map don't have any editable feature layer"
+  "noLayerToDisplayErrorMsg": "Configured web map don't have any editable feature layer."
 }

package/dist/cjs/{calcite-flow_4.cjs.entry.js → calcite-flow_5.cjs.entry.js}

@@ -15,16 +15,16 @@ const interactive = require('./interactive-8aff886e.js');
 const locale = require('./locale-6a627639.js');
 const t9n = require('./t9n-0556abcb.js');
 const resources = require('./resources-8e3763a4.js');
-const popupUtils = require('./popupUtils-7755782a.js');
-const mapViewUtils = require('./mapViewUtils-8aa325de.js');
 const locale$1 = require('./locale-a476e15d.js');
+const mapViewUtils = require('./mapViewUtils-8aa325de.js');
+const popupUtils = require('./popupUtils-7755782a.js');
 require('./guid-1a466ca6.js');
 require('./resources-6c60363a.js');
 require('./browser-9a43b900.js');
 require('./key-b8c05387.js');
-require('./interfaces-7cd0a48a.js');
 require('./esri-loader-a91c0ec1.js');
 require('./_commonjsHelpers-384729db.js');
+require('./interfaces-7cd0a48a.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
@@ -339,6 +339,251 @@ const FlowItem = class {
 };
 FlowItem.style = flowItemCss;
 
+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 = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.success = index.createEvent(this, "success", 7);
+        this.fail = index.createEvent(this, "fail", 7);
+        this.drawComplete = index.createEvent(this, "drawComplete", 7);
+        this.editingAttachment = index.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 (index.h(index.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 locale$1.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 mapViewUtils.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 index.getElement(this); }
+    static get watchers() { return {
+        "mapView": ["mapViewWatchHandler"]
+    }; }
+};
+CreateFeature.style = createFeatureCss;
+
 const featureListCss = ":host{display:block}.width-full{width:100%}.pagination{display:flex;justify-content:center}.error-msg{padding:10px;width:calc(100% - 20px)}.popup-title{font-weight:500;padding:10px 12px}";
 
 const FeatureList = class {
@@ -405,6 +650,7 @@ const FeatureList = class {
     //--------------------------------------------------------------------------
     /**
      * Initialize the features list using the selected layer
+     * @protected
      */
     async initializeFeatureItems() {
         if (this._selectedLayer) {
@@ -538,6 +784,23 @@ const LayerList = class {
     }
     //--------------------------------------------------------------------------
     //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Methods (public)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Refresh the layer list which will fetch the latest layer count and update the list
+     * @returns Promise that resolves when the operation is complete
+     */
+    async refresh() {
+        await this.setLayers();
+    }
+    //--------------------------------------------------------------------------
+    //
     //  Functions (lifecycle)
     //
     //--------------------------------------------------------------------------
@@ -562,7 +825,7 @@ const LayerList = class {
     render() {
         return (index.h(index.Fragment, null, this._isLoading && index.h("calcite-loader", { scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
             index.h("calcite-notice", { class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, index.h("div", { slot: "title" }, this._translations.error), index.h("div", { slot: "message" }, this.noLayerErrorMsg ? this.noLayerErrorMsg : this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
-            index.h("calcite-list", { "selection-appearance": "border", "selection-mode": this.showNextIcon ? "none" : "single" }, this.renderLayerList())));
+            index.h("calcite-list", { "selection-appearance": "border", "selection-mode": this.showNextIcon ? "none" : "single-persist" }, this.renderLayerList())));
     }
     //--------------------------------------------------------------------------
     //
@@ -589,21 +852,24 @@ const LayerList = class {
         this._layerItemsHash = await mapViewUtils.getMapLayerHash(this.mapView, true);
         const allMapLayers = await mapViewUtils.getAllLayers(this.mapView);
         // eslint-disable-next-line @typescript-eslint/no-misused-promises
-        this.showFeatureCount && allMapLayers.forEach(async (eachLayer) => {
+        allMapLayers.forEach(async (eachLayer) => {
             var _a, _b;
             //TODO: checking editable condition could be configurable
-            if ((eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.type) === "feature" && (eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.editingEnabled) && ((_b = (_a = eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.capabilities) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.supportsUpdate)) {
-                const q = eachLayer.createQuery();
-                const result = eachLayer.queryFeatureCount(q);
-                def.push(result);
-                void result.then(async (resCount) => {
-                    const formattedCount = !isNaN(resCount) ? await locale$1.formatNumber(resCount, {
-                        places: 0,
-                        api: 4,
-                        type: "decimal"
-                    }) : "";
-                    this._layerItemsHash[eachLayer.id].formattedFeatureCount = formattedCount;
-                });
+            if ((eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.type) === "feature" && (eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.editingEnabled) && ((_b = (_a = eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.capabilities) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.supportsAdd)) {
+                this._layerItemsHash[eachLayer.id].supportsAdd = true;
+                if (this.showFeatureCount) {
+                    const q = eachLayer.createQuery();
+                    const result = eachLayer.queryFeatureCount(q);
+                    def.push(result);
+                    void result.then(async (resCount) => {
+                        const formattedCount = !isNaN(resCount) ? await locale$1.formatNumber(resCount, {
+                            places: 0,
+                            api: 4,
+                            type: "decimal"
+                        }) : "";
+                        this._layerItemsHash[eachLayer.id].formattedFeatureCount = formattedCount;
+                    });
+                }
             }
         });
         await Promise.all(def).then(() => {
@@ -631,9 +897,9 @@ const LayerList = class {
         var _a;
         const configuredLayers = ((_a = this.layers) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.layers : [];
         return Object.keys(hash).reduce((prev, cur) => {
-            let showLayer = hash[cur].supportsUpdate;
+            let showLayer = hash[cur].supportsAdd;
             if ((configuredLayers === null || configuredLayers === void 0 ? void 0 : configuredLayers.length) > 0) {
-                showLayer = configuredLayers.indexOf(cur) > -1 ? hash[cur].supportsUpdate : false;
+                showLayer = configuredLayers.indexOf(cur) > -1 ? hash[cur].supportsAdd : false;
             }
             if (showLayer) {
                 prev.push(cur);
@@ -687,5 +953,6 @@ LayerList.style = layerListCss;
 
 exports.calcite_flow = Flow;
 exports.calcite_flow_item = FlowItem;
+exports.create_feature = CreateFeature;
 exports.feature_list = FeatureList;
 exports.layer_list = LayerList;

package/dist/cjs/card-manager_3.cjs.entry.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b8a649fc.js');
 const locale = require('./locale-a476e15d.js');
 const mapViewUtils = require('./mapViewUtils-8aa325de.js');
-const downloadUtils = require('./downloadUtils-83c6d3c3.js');
+const downloadUtils = require('./downloadUtils-10e0de31.js');
 require('./esri-loader-a91c0ec1.js');
 require('./_commonjsHelpers-384729db.js');
 require('./interfaces-7cd0a48a.js');