@esri/solutions-components 0.6.6 → 0.6.7

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

@@ -1,302 +1,300 @@
-/*!
- * 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 { loadModules } from "../../utils/loadModules";
-import { getLocaleComponentStrings } from "../../utils/locale";
-export class EditCard {
-  constructor() {
-    /**
-     * boolean: When true the Editor widget should be closed
-     */
-    this._shouldClose = false;
-    this.graphics = undefined;
-    this.mapView = undefined;
-    this.open = false;
-    this.graphicIndex = 0;
-    this._translations = undefined;
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Watch handlers
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Watch for changes to the graphics and update the feature widget
-   */
-  graphicIndexWatchHandler() {
-    this._initEditorWidget();
-  }
-  /**
-   * Watch for changes to the graphics and update the feature widget
-   */
-  graphicsWatchHandler() {
-    this._initEditorWidget();
-  }
-  /**
-   * Watch for changes to the mapView and re-init the Feature widget
-   */
-  mapViewWatchHandler() {
-    this._initEditorWidget();
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Functions (lifecycle)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * StencilJS: Called once just after the component is first connected to the DOM.
-   *
-   * @returns Promise when complete
-   */
-  async componentWillLoad() {
-    await this._initModules();
-    await this._getTranslations();
-  }
-  /**
-   * Special handeling when used with layer-table.
-   * This allows us to only fetch graphics when the modal is opened rather than with every render of the layer-table.
-   *
-   * @returns Promise when complete
-   */
-  async componentWillRender() {
-    var _a, _b;
-    const layerTableElements = document.getElementsByTagName("layer-table");
-    if (layerTableElements.length === 1) {
-      const layerTable = layerTableElements[0];
-      this.graphics = await layerTable.getSelectedGraphics();
-    }
-    if (((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((_b = this.graphics[0]) === null || _b === void 0 ? void 0 : _b.layer)) {
-      this._layer = this.graphics[0].layer;
-    }
-  }
-  /**
-   * Renders the component.
-   */
-  render() {
-    var _a;
-    // This is a temp workaround hopefully...this._editingDisabled should reflect the current state but does not
-    // when you use MULTI edit mode...is fine in SINGLE
-    const editDisabled = ((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.graphics[0] ?
-      !this.graphics[0].layer.editingEnabled : true;
-    return (h(Host, null, h("div", { class: "position-relative" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { slot: "content" }, h("div", { id: "feature-form", ref: (el) => this._editContainer = el })))));
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Functions (protected)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Load esri javascript api modules
-   *
-   * @returns Promise resolving when function is done
-   */
-  async _initModules() {
-    const [Editor, reactiveUtils] = await loadModules([
-      "esri/widgets/Editor",
-      "esri/core/reactiveUtils"
-    ]);
-    this.Editor = Editor;
-    this.reactiveUtils = reactiveUtils;
-  }
-  /**
-   * Init the Editor widget so we can display the popup content
-   *
-   * @returns void
-   */
-  _initEditorWidget() {
-    if (this.mapView && this.graphics && this.graphics.length > 0 && this.graphics[0]) {
-      if (this._editor) {
-        this._editor.destroy();
-      }
-      const container = document.createElement("div");
-      this._editor = new this.Editor({
-        allowedWorkflows: "update",
-        view: this.mapView,
-        visibleElements: {
-          snappingControls: false,
-          sketchTooltipControls: false
-        },
-        container
-      });
-      if (this._editHandle && this._attachmentHandle && this._activeWorkflowHandle) {
-        this._editHandle.remove();
-        this._attachmentHandle.remove();
-        this._activeWorkflowHandle.remove();
-      }
-      this._attachmentHandle = this.reactiveUtils.when(() => this._editor.viewModel.state === "adding-attachment" || this._editor.viewModel.state === "editing-attachment", () => {
-        this._shouldClose = false;
-      });
-      this._editHandle = this.reactiveUtils.when(() => this._editor.viewModel.state === "ready", () => {
-        if (this._shouldClose) {
-          this.closeEdit.emit();
-          this._shouldClose = false;
-        }
-        if (this.graphicIndex > -1 && this.graphics.length > 0 && this.open && !this._shouldClose) {
-          void this._editor.startUpdateWorkflowAtFeatureEdit(this.graphics[this.graphicIndex]);
-          this._shouldClose = true;
-        }
-      });
-      this._activeWorkflowHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.activeWorkflow) === null || _a === void 0 ? void 0 : _a.activeWorkflow; }, (activeWorkflow) => {
-        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;
-        }
-      });
-      // had issues with destroy before adding like this
-      this._editContainer.appendChild(container);
-    }
-  }
-  /**
-   * Fetches the component's translations
-   *
-   * @returns Promise when complete
-   */
-  async _getTranslations() {
-    const messages = await getLocaleComponentStrings(this.el);
-    this._translations = messages[0];
-  }
-  static get is() { return "edit-card"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["edit-card.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["edit-card.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "graphics": {
-        "type": "unknown",
-        "mutable": true,
-        "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"
-        }
-      },
-      "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"
-        }
-      },
-      "open": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "When true the component is displayed"
-        },
-        "attribute": "open",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "graphicIndex": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The index of the current graphic"
-        },
-        "attribute": "graphic-index",
-        "reflect": false,
-        "defaultValue": "0"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "_translations": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "closeEdit",
-        "name": "closeEdit",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted on demand when the Editor widget should be closed"
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "graphicIndex",
-        "methodName": "graphicIndexWatchHandler"
-      }, {
-        "propName": "graphics",
-        "methodName": "graphicsWatchHandler"
-      }, {
-        "propName": "mapView",
-        "methodName": "mapViewWatchHandler"
-      }];
-  }
-}
+/*!
+ * 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 { loadModules } from "../../utils/loadModules";
+import { getLocaleComponentStrings } from "../../utils/locale";
+export class EditCard {
+  constructor() {
+    /**
+     * boolean: When true the Editor widget should be closed
+     */
+    this._shouldClose = false;
+    this.graphics = undefined;
+    this.mapView = undefined;
+    this.open = false;
+    this.graphicIndex = 0;
+    this._translations = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Watch for changes to the graphics and update the feature widget
+   */
+  graphicIndexWatchHandler() {
+    this._initEditorWidget();
+  }
+  /**
+   * Watch for changes to the graphics and update the feature widget
+   */
+  graphicsWatchHandler() {
+    this._initEditorWidget();
+  }
+  /**
+   * Watch for changes to the mapView and re-init the Feature widget
+   */
+  mapViewWatchHandler() {
+    this._initEditorWidget();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   *
+   * @returns Promise when complete
+   */
+  async componentWillLoad() {
+    await this._initModules();
+    await this._getTranslations();
+  }
+  /**
+   * Special handeling when used with layer-table.
+   * This allows us to only fetch graphics when the modal is opened rather than with every render of the layer-table.
+   *
+   * @returns Promise when complete
+   */
+  async componentWillRender() {
+    var _a, _b;
+    const layerTableElements = document.getElementsByTagName("layer-table");
+    if (layerTableElements.length === 1) {
+      const layerTable = layerTableElements[0];
+      this.graphics = await layerTable.getSelectedGraphics();
+    }
+    if (((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((_b = this.graphics[0]) === null || _b === void 0 ? void 0 : _b.layer)) {
+      this._layer = this.graphics[0].layer;
+    }
+  }
+  /**
+   * Renders the component.
+   */
+  render() {
+    var _a;
+    // This is a temp workaround hopefully...this._editingDisabled should reflect the current state but does not
+    // when you use MULTI edit mode...is fine in SINGLE
+    const editDisabled = ((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.graphics[0] ?
+      !this.graphics[0].layer.editingEnabled : true;
+    return (h(Host, null, h("div", { class: "position-relative" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { slot: "content" }, h("div", { id: "feature-form", ref: (el) => this._editContainer = el })))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Load esri javascript api modules
+   *
+   * @returns Promise resolving when function is done
+   */
+  async _initModules() {
+    const [Editor, reactiveUtils] = await loadModules([
+      "esri/widgets/Editor",
+      "esri/core/reactiveUtils"
+    ]);
+    this.Editor = Editor;
+    this.reactiveUtils = reactiveUtils;
+  }
+  /**
+   * Init the Editor widget so we can display the popup content
+   *
+   * @returns void
+   */
+  _initEditorWidget() {
+    if (this.mapView && this.graphics && this.graphics.length > 0 && this.graphics[0]) {
+      if (this._editor) {
+        this._editor.destroy();
+      }
+      const container = document.createElement("div");
+      this._editor = new this.Editor({
+        allowedWorkflows: "update",
+        view: this.mapView,
+        visibleElements: {
+          snappingControls: false,
+          sketchTooltipControls: false
+        },
+        container
+      });
+      if (this._editHandle && this._attachmentHandle && this._activeWorkflowHandle) {
+        this._editHandle.remove();
+        this._attachmentHandle.remove();
+        this._activeWorkflowHandle.remove();
+      }
+      this._attachmentHandle = this.reactiveUtils.when(() => this._editor.viewModel.state === "adding-attachment" || this._editor.viewModel.state === "editing-attachment", () => {
+        this._shouldClose = false;
+      });
+      this._editHandle = this.reactiveUtils.when(() => this._editor.viewModel.state === "ready", () => {
+        if (this._shouldClose) {
+          this.closeEdit.emit();
+          this._shouldClose = false;
+        }
+        if (this.graphicIndex > -1 && this.graphics.length > 0 && this.open && !this._shouldClose) {
+          void this._editor.startUpdateWorkflowAtFeatureEdit(this.graphics[this.graphicIndex]);
+          this._shouldClose = true;
+        }
+      });
+      this._activeWorkflowHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.activeWorkflow) === null || _a === void 0 ? void 0 : _a.activeWorkflow; }, (activeWorkflow) => {
+        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;
+        }
+      });
+      // had issues with destroy before adding like this
+      this._editContainer.appendChild(container);
+    }
+  }
+  /**
+   * Fetches the component's translations
+   *
+   * @returns Promise when complete
+   */
+  async _getTranslations() {
+    const messages = await getLocaleComponentStrings(this.el);
+    this._translations = messages[0];
+  }
+  static get is() { return "edit-card"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["edit-card.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["edit-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "graphics": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "__esri.Graphic[]",
+          "resolved": "Graphic[]",
+          "references": {
+            "___esri": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "esri/Graphic[]: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html"
+        }
+      },
+      "mapView": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "__esri.MapView",
+          "resolved": "MapView",
+          "references": {
+            "___esri": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
+        }
+      },
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true the component is displayed"
+        },
+        "attribute": "open",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "graphicIndex": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The index of the current graphic"
+        },
+        "attribute": "graphic-index",
+        "reflect": false,
+        "defaultValue": "0"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_translations": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "closeEdit",
+        "name": "closeEdit",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted on demand when the Editor widget should be closed"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "graphicIndex",
+        "methodName": "graphicIndexWatchHandler"
+      }, {
+        "propName": "graphics",
+        "methodName": "graphicsWatchHandler"
+      }, {
+        "propName": "mapView",
+        "methodName": "mapViewWatchHandler"
+      }];
+  }
+}