@esri/solutions-components 0.8.14 → 0.8.15

package/dist/cjs/spatial-ref.cjs.entry.js

@@ -21103,7 +21103,7 @@ const SpatialRef = class {
      * Renders the component.
      */
     render() {
-        return (index.h(index.Host, { key: '9a870119b767202e85876b5b9d00b1910072e42f' }, index.h("div", { key: '6500a791a9915f95eebe2174094edb0c47b0fa15' }, index.h("calcite-input", { key: '5bb156d8f3ee5ffc6de0d94bdd032a1d1ac11d7a', disabled: this.disabled, id: "calcite-sr-search", onKeyUp: (evt) => this._searchInputKeyDown(evt), placeholder: this._translations.spatialReferencePlaceholder }), index.h("calcite-tree", { key: 'd8527df97eb23fc90f231e566e54e3bef84efeb2', id: "calcite-sr-tree", slot: "children" }, this._getTreeContent()))));
+        return (index.h(index.Host, { key: '27a61b1cda7cc8137d1ec3a9d827292b62efc5eb' }, index.h("div", { key: '94ff017bc871c67753598ce1c76f0a4bcf804faf' }, index.h("calcite-input", { key: 'b45dce7defc94d27e100103effc1dcc5c7020b1f', disabled: this.disabled, id: "calcite-sr-search", onKeyUp: (evt) => this._searchInputKeyDown(evt), placeholder: this._translations.spatialReferencePlaceholder }), index.h("calcite-tree", { key: 'c23e9b041f81e5b49784e20a6d25e19ff8c4a135', id: "calcite-sr-tree", slot: "children" }, this._getTreeContent()))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/collection-manifest.json

@@ -6,6 +6,7 @@
     "components/card-manager/card-manager.js",
     "components/consent-manager/consent-manager.js",
     "components/create-feature/create-feature.js",
+    "components/create-related-feature/create-related-feature.js",
     "components/crowdsource-manager/crowdsource-manager.js",
     "components/layer-list/layer-list.js",
     "components/crowdsource-reporter/crowdsource-reporter.js",

package/dist/collection/components/create-related-feature/create-related-feature.css

@@ -0,0 +1,8 @@
+:host {
+  display: block;
+}
+
+/* Override to hide Editor settings panel collapsible */
+.esri-editor__panel-toolbar {
+  display: none !important;
+}

package/dist/collection/components/create-related-feature/create-related-feature.js

@@ -0,0 +1,426 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { Host, h } from "@stencil/core";
+import { loadModules } from "../../utils/loadModules";
+export class CreateRelatedFeature {
+    constructor() {
+        this.mapView = undefined;
+        this.table = undefined;
+        this.selectedFeature = 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
+     */
+    async close() {
+        if (this._editor) {
+            this._editor.destroy();
+        }
+    }
+    /**
+     * Submit the comment
+     */
+    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();
+    }
+    /**
+     * Init Editor widget and starts the create workflow
+     */
+    async init() {
+        if (this.mapView) {
+            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;
+    }
+    render() {
+        return (h(Host, { key: '383e8fac89d037f77241d856013202d1e04b28ba' }));
+    }
+    /**
+     * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
+     */
+    async componentDidLoad() {
+        await this.init();
+    }
+    /**
+     * Display editor widget to create the new feature
+     * @protected
+     */
+    async createEditorWidget() {
+        if (this._editor) {
+            this._editor.destroy();
+        }
+        const container = document.createElement("div");
+        this._editor = new this.Editor({
+            view: this.mapView,
+            visibleElements: {
+                snappingControls: false
+            },
+            container
+        });
+        this.el.appendChild(container);
+        //Add handle to watch featureFormViewModel ready state and hide the editor elements
+        const hideElementHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.featureFormViewModel) === null || _a === void 0 ? void 0 : _a.state; }, (state) => {
+            if (state === 'ready') {
+                this.hideEditorsElements();
+            }
+        });
+        this._editor.viewModel.addHandles(hideElementHandle);
+        //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);
+        // 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.isActionPending.emit(true);
+            }
+            else {
+                if (this._addingAttachment) {
+                    this.isActionPending.emit(false);
+                    this._addingAttachment = false;
+                }
+            }
+        });
+        this._editor.viewModel.addHandles(attachmentHandle);
+    }
+    /**
+     * Start creating the feature feature form
+     * @protected
+     */
+    async startCreate() {
+        const parentLayer = this.selectedFeature.layer;
+        const childTable = this.table;
+        const parentRelationship = parentLayer.relationships[0];
+        const childRelationship = childTable.relationships.find((rel) => parentLayer.layerId === rel.relatedTableId);
+        const queryResult = await parentLayer.queryFeatures({
+            objectIds: [this.selectedFeature.getObjectId()],
+            outFields: [parentLayer.objectIdField, parentRelationship.keyField],
+        });
+        const parentFeature = queryResult.features[0];
+        const template = childTable.templates[0];
+        const attributeOverrides = this.makeAttributesForRelatedFeature(parentFeature, parentRelationship, childRelationship);
+        const creationInfo = {
+            attributeOverrides,
+            layer: childTable,
+            template,
+        };
+        await this._editor.startCreateFeaturesWorkflowAtFeatureCreation(creationInfo);
+        // Emit an event to show submit cancel buttons
+        this.isActionPending.emit(false);
+        this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
+    }
+    /**
+     * 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);
+    }
+    /**
+     * Makes attributes for related feature
+     * @param parentFeature Parent feature
+     * @param parentRelationship Parent relationship
+     * @param childRelationship Child relationship
+     * @returns Attributes for related feature
+     */
+    makeAttributesForRelatedFeature(parentFeature, parentRelationship, childRelationship) {
+        const parentKeyField = parentRelationship.keyField;
+        const parentKeyValue = parentFeature.getAttribute(parentKeyField);
+        let childKeyField = childRelationship.keyField;
+        // get the field from table which name is same as childKeyField and use that field name as childKeyField
+        const field = this.table.fields.find((field) => field.name.toLocaleLowerCase() === childKeyField.toLocaleLowerCase());
+        childKeyField = field.name;
+        const childAttributes = {
+            [childKeyField]: parentKeyValue,
+        };
+        return childAttributes;
+    }
+    /**
+     * 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();
+        }
+    }
+    static get is() { return "create-related-feature"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["create-related-feature.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["create-related-feature.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mapView": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "__esri.MapView",
+                    "resolved": "MapView",
+                    "references": {
+                        "___esri": {
+                            "location": "global",
+                            "id": "global::___esri"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
+                }
+            },
+            "table": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "__esri.FeatureLayer",
+                    "resolved": "FeatureLayer",
+                    "references": {
+                        "___esri": {
+                            "location": "global",
+                            "id": "global::___esri"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "__esri.FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html"
+                }
+            },
+            "selectedFeature": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "__esri.Graphic",
+                    "resolved": "Graphic",
+                    "references": {
+                        "___esri": {
+                            "location": "global",
+                            "id": "global::___esri"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "__esri.Graphic: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html"
+                }
+            },
+            "customizeSubmit": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: Set this to true when have a custom submit button in the app.\r\nThis will hide the header and footer elements of the editor and user needs to execute the submit method manually."
+                },
+                "attribute": "customize-submit",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "success",
+                "name": "success",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on demand when the comment is submitted successfully"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "fail",
+                "name": "fail",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on demand when the comment submission is failed"
+                },
+                "complexType": {
+                    "original": "Error",
+                    "resolved": "Error",
+                    "references": {
+                        "Error": {
+                            "location": "global",
+                            "id": "global::Error"
+                        }
+                    }
+                }
+            }, {
+                "method": "isActionPending",
+                "name": "isActionPending",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on demand when any action is pending or completed"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Destroy the Editor widget instance",
+                    "tags": []
+                }
+            },
+            "submit": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Submit the comment",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "mapView",
+                "methodName": "mapViewWatchHandler"
+            }];
+    }
+}

package/dist/collection/components/create-related-feature/test/create-related-feature.e2e.js

@@ -0,0 +1,14 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { newE2EPage } from "@stencil/core/testing";
+xdescribe('create-related-feature', () => {
+    it('renders', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<create-related-feature></create-related-feature>');
+        const element = await page.find('create-related-feature');
+        expect(element).toHaveClass('hydrated');
+    });
+});

package/dist/collection/components/create-related-feature/test/create-related-feature.spec.js

@@ -0,0 +1,22 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { CreateRelatedFeature } from "../create-related-feature";
+xdescribe('create-related-feature', () => {
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [CreateRelatedFeature],
+            html: `<create-related-feature></create-related-feature>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <create-related-feature>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </create-related-feature>
+    `);
+    });
+});

package/dist/collection/components/crowdsource-manager/crowdsource-manager.js

@@ -186,7 +186,7 @@ export class CrowdsourceManager {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '528818cf99038897353a4390ccf60ed85b676f2e' }, h("calcite-shell", { key: '0389bc8f242c64983629840301b9da5cdb442673', class: "position-relative" }, h("calcite-panel", { key: 'bd0f33a38c6cc3cbd15e3adcbc76929682f6428e', class: `width-full height-full border-width-0` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
+        return (h(Host, { key: '68558824544553dd0c16832e4530afb4023ff421' }, h("calcite-shell", { key: '9369769a8ff35ab56b5317cde8b325e4635c817e', class: "position-relative" }, h("calcite-panel", { key: 'c2e5f3feb974a50039427f91e408c2add1b0cc4f', class: `width-full height-full border-width-0` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
     }
     /**
      * Called after each render

package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.css

@@ -71,6 +71,7 @@
   width: 32px;
   color: var(--calcite-color-brand);
   border-bottom: 1px solid var(--calcite-color-brand);
+  font-weight: bold;
 }
 
 .report-submitted-msg {