@esri/solutions-components 0.7.22 → 0.7.24

package/dist/collection/components/delete-button/delete-button.css

@@ -0,0 +1,19 @@
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host {
+  display: block;
+}

package/dist/collection/components/delete-button/delete-button.js

@@ -0,0 +1,299 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Host, h } from "@stencil/core";
+import { getLocaleComponentStrings } from "../../utils/locale";
+export class DeleteButton {
+    constructor() {
+        this.buttonType = "button";
+        this.disabled = false;
+        this.icon = undefined;
+        this.ids = [];
+        this.layer = undefined;
+        this._confirmDelete = false;
+        this._deleteEndabled = false;
+        this._isDeleting = false;
+        this._supportsDelete = undefined;
+        this._translations = undefined;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Properties (protected)
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * watch for changes in layer view and verify if it has editing enabled
+     */
+    async idsWatchHandler() {
+        this._setDeleteEnabled();
+    }
+    /**
+     * watch for changes in layer view and verify if it has editing enabled
+     */
+    async layerWatchHandler() {
+        this._setDeleteEnabled();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (lifecycle)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * StencilJS: Called once just after the component is first connected to the DOM.
+     *
+     * @returns Promise when complete
+     */
+    async componentWillLoad() {
+        await this._getTranslations();
+    }
+    /**
+     * Renders the component.
+     */
+    render() {
+        return (h(Host, null, this.buttonType === "button" ? (h("calcite-button", { appearance: "outline", disabled: !this._deleteEndabled, id: "solutions-delete", kind: "danger", onClick: () => this._delete(), width: "full" }, this._translations.deleteCount.replace("{{n}}", this.ids.length.toString()))) : (h("calcite-action", { appearance: "solid", compact: true, disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s" }, h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage()));
+    }
+    /**
+     * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
+     */
+    async componentDidLoad() {
+        this._setDeleteEnabled();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Verify if the layer supports delete and that we have 1 or more ids
+     */
+    _setDeleteEnabled() {
+        var _a, _b, _c, _d;
+        this._supportsDelete = ((_a = this.layer) === null || _a === void 0 ? void 0 : _a.editingEnabled) && ((_d = (_c = (_b = this.layer) === null || _b === void 0 ? void 0 : _b.capabilities) === null || _c === void 0 ? void 0 : _c.operations) === null || _d === void 0 ? void 0 : _d.supportsDelete);
+        this._deleteEndabled = !this.disabled || this._supportsDelete && this.ids.length > 0;
+    }
+    /**
+     * Delete all selected records or shows an alert if the layer does not have editing enabled
+     *
+     * @returns a promise that will resolve when the operation is complete
+     */
+    _delete() {
+        this._confirmDelete = true;
+    }
+    /**
+     * Show delete confirmation message
+     *
+     * @returns node to confirm or deny the delete operation
+     */
+    _deleteMessage() {
+        const confirmMessage = this.ids.length === 1 ? this._translations.confirmSingle :
+            this._translations.confirmMultiple;
+        return (h("calcite-modal", { "aria-labelledby": "modal-title", kind: "danger", onCalciteModalClose: () => this._deleteClosed(), open: this._confirmDelete }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations.deleteFeature), h("div", { slot: "content" }, confirmMessage), h("calcite-button", { appearance: "outline", kind: "danger", onClick: () => this._deleteClosed(), slot: "secondary", width: "full" }, this._translations.cancel), h("calcite-button", { kind: "danger", loading: this._isDeleting, onClick: () => void this._deleteFeatures(), slot: "primary", width: "full" }, this._translations.delete)));
+    }
+    /**
+     * Delete the currently selected features
+     */
+    async _deleteFeatures() {
+        this._isDeleting = true;
+        const deleteFeatures = this.ids.map((objectId) => {
+            return { objectId };
+        });
+        await this.layer.applyEdits({
+            deleteFeatures
+        });
+        this._isDeleting = false;
+        this._deleteClosed();
+        this.editsComplete.emit("delete");
+    }
+    /**
+     * Set the alertOpen member to false when the alert is closed
+     */
+    _deleteClosed() {
+        this._confirmDelete = false;
+    }
+    /**
+     * Fetches the component's translations
+     *
+     * @returns Promise when complete
+     * @protected
+     */
+    async _getTranslations() {
+        const messages = await getLocaleComponentStrings(this.el);
+        this._translations = messages[0];
+    }
+    static get is() { return "delete-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["delete-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["delete-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "buttonType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonType",
+                    "resolved": "\"action\" | \"button\"",
+                    "references": {
+                        "ButtonType": {
+                            "location": "import",
+                            "path": "../../utils/interfaces",
+                            "id": "src/utils/interfaces.ts::ButtonType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ButtonType (button | action): Support usage as action or button"
+                },
+                "attribute": "button-type",
+                "reflect": false,
+                "defaultValue": "\"button\""
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: This overrides internal enable/disable logic that is based on checks if the layer supports delete"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: The icon to display in the component"
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "ids": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "number[]: The ids that would be deleted"
+                },
+                "defaultValue": "[]"
+            },
+            "layer": {
+                "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/views/layers/FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html"
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_confirmDelete": {},
+            "_deleteEndabled": {},
+            "_isDeleting": {},
+            "_supportsDelete": {},
+            "_translations": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "editsComplete",
+                "name": "editsComplete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on demand when features have been deleted"
+                },
+                "complexType": {
+                    "original": "EditType",
+                    "resolved": "\"add\" | \"delete\" | \"update\"",
+                    "references": {
+                        "EditType": {
+                            "location": "import",
+                            "path": "../../utils/interfaces",
+                            "id": "src/utils/interfaces.ts::EditType"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "ids",
+                "methodName": "idsWatchHandler"
+            }, {
+                "propName": "layer",
+                "methodName": "layerWatchHandler"
+            }];
+    }
+}

package/dist/collection/components/delete-button/test/delete-button.e2e.js

@@ -0,0 +1,29 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { newE2EPage } from "@stencil/core/testing";
+xdescribe('delete-button', () => {
+    it('renders', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<delete-button></delete-button>');
+        const element = await page.find('delete-button');
+        expect(element).toHaveClass('hydrated');
+    });
+});

package/dist/collection/components/delete-button/test/delete-button.spec.js

@@ -0,0 +1,37 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { DeleteButton } from "../delete-button";
+xdescribe('delete-button', () => {
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [DeleteButton],
+            html: `<delete-button></delete-button>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <delete-button>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </delete-button>
+    `);
+    });
+});

package/dist/collection/components/edit-card/edit-card.js

@@ -26,6 +26,7 @@ export class EditCard {
     constructor() {
         /**
          * boolean: When true the Editor widget should be closed
+         * Without this logic we are taken to the Editors "Select" workflow step
          */
         this._shouldClose = false;
         this.graphics = undefined;
@@ -44,8 +45,8 @@ export class EditCard {
      * Watch for changes to the graphics and update the feature widget
      */
     async graphicsWatchHandler() {
-        if (this.graphics.length === 0) {
-            await this._closeEdit();
+        if (this.graphics.length === 0 && this.open) {
+            await this._closeEdit(true);
         }
     }
     async openWatchHandler(v) {
@@ -59,11 +60,13 @@ export class EditCard {
             this._editorLoading = false;
         }
         if (!v) {
-            await this._closeEdit();
+            await this._closeEdit(true);
         }
     }
     async featureSelectionChange() {
-        await this._closeEdit();
+        if (this.open) {
+            await this._closeEdit(false);
+        }
     }
     //--------------------------------------------------------------------------
     //
@@ -94,7 +97,6 @@ export class EditCard {
             }
             this._layerEditHandle = this._layer.on("edits", () => {
                 this.editsComplete.emit();
-                this.open = false;
             });
         }
     }
@@ -109,7 +111,7 @@ export class EditCard {
             !this.graphics[0].layer.editingEnabled : true;
         const tableNodeClass = this._editorLoading ? "display-none" : "position-absolute";
         const loadingClass = this._editorLoading ? "" : "display-none";
-        return (h(Host, null, h("div", { class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { class: "position-absolute", slot: "content" }, h("div", { class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { class: loadingClass, label: "", scale: "s" })))));
+        return (h(Host, null, h("div", { class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { class: "position-absolute" }, h("div", { class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { class: loadingClass, label: "", scale: "s" })))));
     }
     //--------------------------------------------------------------------------
     //
@@ -164,10 +166,13 @@ export class EditCard {
                 this._shouldClose = false;
             });
             this._activeWorkflowHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.activeWorkflow) === null || _a === void 0 ? void 0 : _a.activeWorkflow; }, (activeWorkflow) => {
+                var _a, _b;
                 if ((activeWorkflow === null || activeWorkflow === void 0 ? void 0 : activeWorkflow.type) === "update-table-record" || (activeWorkflow === null || activeWorkflow === void 0 ? void 0 : activeWorkflow.type) === "create-features") {
                     this._shouldClose = false;
                 }
-                if (!(activeWorkflow === null || activeWorkflow === void 0 ? void 0 : activeWorkflow.type) && !(activeWorkflow === null || activeWorkflow === void 0 ? void 0 : activeWorkflow.hasPendingEdits)) {
+                // Handle back click and when feature is de-selected from the table
+                // this ensures that we are not shown the Editors "Select" workflow step
+                if ((!(activeWorkflow === null || activeWorkflow === void 0 ? void 0 : activeWorkflow.type) && !(activeWorkflow === null || activeWorkflow === void 0 ? void 0 : activeWorkflow.hasPendingEdits) && !this._editor.activeWorkflow) || !((_b = (_a = this._editor) === null || _a === void 0 ? void 0 : _a.activeWorkflow) === null || _b === void 0 ? void 0 : _b.started)) {
                     this.open = false;
                 }
             });
@@ -178,16 +183,21 @@ export class EditCard {
     /**
      * Close the edit widget
      */
-    async _closeEdit() {
+    async _closeEdit(destroyOnClose) {
         var _a, _b, _c, _d;
         this._shouldClose = true;
-        if ((_a = this._editor) === null || _a === void 0 ? void 0 : _a.activeWorkflow) {
-            await ((_b = this._editor) === null || _b === void 0 ? void 0 : _b.cancelWorkflow());
+        if (destroyOnClose && ((_a = this._editor) === null || _a === void 0 ? void 0 : _a.activeWorkflow)) {
+            if ((_c = (_b = this._editor.activeWorkflow) === null || _b === void 0 ? void 0 : _b.activeWorkflow) === null || _c === void 0 ? void 0 : _c.hasPendingEdits) {
+                await this._editor.activeWorkflow.reset();
+                await this._editor.cancelWorkflow();
+            }
+            this._editor.destroy();
         }
-        if (this.graphicIndex > -1 && ((_c = this.graphics) === null || _c === void 0 ? void 0 : _c.length) > 0) {
-            this.refreshGraphics.emit(this.graphics);
+        else {
+            if (this.graphicIndex > -1 && ((_d = this.graphics) === null || _d === void 0 ? void 0 : _d.length) > 0) {
+                this.refreshGraphics.emit(this.graphics);
+            }
         }
-        (_d = this._editor) === null || _d === void 0 ? void 0 : _d.destroy();
         this._shouldClose = false;
         this.closeEdit.emit();
     }

package/dist/collection/components/feature-list/feature-list.css

@@ -0,0 +1,38 @@
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+: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;
+}