@esri/solutions-components 0.6.7 → 0.6.8

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

@@ -1,357 +1,361 @@
-/*!
- * 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";
-import { loadModules } from "../../utils/loadModules";
-export class InfoCard {
-  constructor() {
-    this.graphics = undefined;
-    this.isLoading = false;
-    this.mapView = undefined;
-    this.zoomAndScrollToSelected = undefined;
-    this._alertOpen = false;
-    this._editRecordOpen = false;
-    this._translations = undefined;
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Watch handlers
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Watch for changes to the graphic and update the feature widget
-   */
-  async graphicsWatchHandler() {
-    var _a;
-    if (this.graphics.length > 0) {
-      this._editEnabled = ((_a = this.graphics[0]) === null || _a === void 0 ? void 0 : _a.layer).editingEnabled;
-      this._features.open({
-        features: this.graphics
-      });
-    }
-    else {
-      this._features.clear();
-      this._features.close();
-    }
-  }
-  /**
-   * Watch for changes to the mapView and re-init the Feature widget
-   */
-  async mapViewWatchHandler() {
-    await this.mapView.when(async () => {
-      await this._initFeaturesWidget();
-    });
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Methods (public)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Get the current selected feature from the Features widget
-   *
-   * @returns Promise resolving with the current feature
-   */
-  async getSelectedFeature() {
-    return this._features.selectedFeature;
-  }
-  /**
-   * Respond to and close the edit record display
-   *
-   * @returns a promise when the operation has completed
-   */
-  async closeEdit() {
-    this._editRecordOpen = false;
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  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();
-  }
-  /**
-   * Renders the component.
-   */
-  render() {
-    var _a;
-    const loadingClass = this.isLoading ? "" : "display-none";
-    const featureNodeClass = this.isLoading || this._editRecordOpen ? "display-none" : "position-absolute";
-    const editClass = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none";
-    const editButtonClass = !this.isLoading && this._editRecordOpen ? "display-none" : "";
-    return (h(Host, null, h("calcite-shell", null, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: "padding-1-2 display-flex " + editButtonClass, slot: "footer" }, h("calcite-button", { appearance: "outline", iconStart: "pencil", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit))), h("edit-card", { class: editClass, graphicIndex: (_a = this._features) === null || _a === void 0 ? void 0 : _a.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Functions (protected)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Load esri javascript api modules
-   *
-   * @returns Promise resolving when function is done
-   *
-   * @protected
-   */
-  async _initModules() {
-    const [Features, reactiveUtils] = await loadModules([
-      "esri/widgets/Features",
-      "esri/core/reactiveUtils"
-    ]);
-    this.Features = Features;
-    this.reactiveUtils = reactiveUtils;
-  }
-  /**
-   * Init the Feature widget so we can display the popup content
-   *
-   * @returns a promise when the operation has completed
-   *
-   * @protected
-   */
-  async _initFeaturesWidget() {
-    if (!this._features) {
-      this._features = new this.Features({
-        view: this.mapView,
-        container: "features-node",
-        visibleElements: {
-          actionBar: false,
-          closeButton: false,
-          heading: true
-        }
-      });
-      if (this.zoomAndScrollToSelected) {
-        this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (i) => {
-          if (i > -1) {
-            this.selectionChanged.emit(this._features.selectedFeature);
-          }
-        });
-      }
-    }
-    else {
-      this._features.view = this.mapView;
-    }
-  }
-  /**
-   * Set the alertOpen member to false when the alert is closed
-   *
-   * @returns void
-   */
-  _alertClosed() {
-    this._alertOpen = false;
-  }
-  /**
-   * Close the edit record
-   *
-   * @returns void
-   */
-  _editRecordClosed() {
-    this._editRecordOpen = false;
-  }
-  /**
-   * Open the edit record
-   *
-   * @returns void
-   */
-  _openEditRecord() {
-    if (this._editEnabled) {
-      this._editRecordOpen = true;
-    }
-    else {
-      this._alertOpen = true;
-    }
-  }
-  /**
-   * 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 "info-card"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["info-card.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["info-card.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "graphics": {
-        "type": "unknown",
-        "mutable": false,
-        "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"
-        }
-      },
-      "isLoading": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "boolean: when true a loading indicator will be shown"
-        },
-        "attribute": "is-loading",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "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"
-        }
-      },
-      "zoomAndScrollToSelected": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "boolean: When true the selected feature will zoomed to in the map and the row will be scrolled to within the table"
-        },
-        "attribute": "zoom-and-scroll-to-selected",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "_alertOpen": {},
-      "_editRecordOpen": {},
-      "_translations": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "selectionChanged",
-        "name": "selectionChanged",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted on demand when the selected index changes"
-        },
-        "complexType": {
-          "original": "__esri.Graphic",
-          "resolved": "Graphic",
-          "references": {
-            "___esri": {
-              "location": "global"
-            }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "getSelectedFeature": {
-        "complexType": {
-          "signature": "() => Promise<any>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<any>"
-        },
-        "docs": {
-          "text": "Get the current selected feature from the Features widget",
-          "tags": [{
-              "name": "returns",
-              "text": "Promise resolving with the current feature"
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "graphics",
-        "methodName": "graphicsWatchHandler"
-      }, {
-        "propName": "mapView",
-        "methodName": "mapViewWatchHandler"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "closeEdit",
-        "method": "closeEdit",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
+/*!
+ * 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";
+import { loadModules } from "../../utils/loadModules";
+export class InfoCard {
+  constructor() {
+    this.graphics = undefined;
+    this.isLoading = false;
+    this.mapView = undefined;
+    this.zoomAndScrollToSelected = undefined;
+    this._alertOpen = false;
+    this._editRecordOpen = false;
+    this._translations = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Watch for changes to the graphic and update the feature widget
+   */
+  async graphicsWatchHandler() {
+    var _a;
+    if (this.graphics.length > 0) {
+      this._editEnabled = ((_a = this.graphics[0]) === null || _a === void 0 ? void 0 : _a.layer).editingEnabled;
+      this._features.open({
+        features: this.graphics
+      });
+    }
+    else {
+      this._features.clear();
+      this._features.close();
+    }
+  }
+  /**
+   * Watch for changes to the mapView and re-init the Feature widget
+   */
+  async mapViewWatchHandler() {
+    await this.mapView.when(async () => {
+      await this._initFeaturesWidget();
+    });
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Methods (public)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Get the current selected feature from the Features widget
+   *
+   * @returns Promise resolving with the current feature
+   */
+  async getSelectedFeature() {
+    return this._features.selectedFeature;
+  }
+  /**
+   * Respond to and close the edit record display
+   *
+   * @returns a promise when the operation has completed
+   */
+  async closeEdit() {
+    this._editRecordOpen = false;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  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();
+  }
+  /**
+   * Renders the component.
+   */
+  render() {
+    var _a;
+    const loadingClass = this.isLoading ? "" : "display-none";
+    const featureNodeClass = this.isLoading || this._editRecordOpen ? "display-none" : "position-absolute";
+    const editClass = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none";
+    const editButtonClass = !this.isLoading && this._editRecordOpen ? "display-none" : "";
+    return (h(Host, null, h("calcite-shell", null, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: "padding-1-2 display-flex " + editButtonClass, slot: "footer" }, h("calcite-button", { appearance: "outline", iconStart: "pencil", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit))), h("edit-card", { class: editClass, graphicIndex: (_a = this._features) === null || _a === void 0 ? void 0 : _a.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Load esri javascript api modules
+   *
+   * @returns Promise resolving when function is done
+   *
+   * @protected
+   */
+  async _initModules() {
+    const [Features, reactiveUtils] = await loadModules([
+      "esri/widgets/Features",
+      "esri/core/reactiveUtils"
+    ]);
+    this.Features = Features;
+    this.reactiveUtils = reactiveUtils;
+  }
+  /**
+   * Init the Feature widget so we can display the popup content
+   *
+   * @returns a promise when the operation has completed
+   *
+   * @protected
+   */
+  async _initFeaturesWidget() {
+    if (!this._features) {
+      this._features = new this.Features({
+        view: this.mapView,
+        container: "features-node",
+        visibleElements: {
+          actionBar: false,
+          closeButton: false,
+          heading: true
+        }
+      });
+      if (this.zoomAndScrollToSelected) {
+        this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (i) => {
+          if (i > -1) {
+            this.selectionChanged.emit(this._features.selectedFeature);
+          }
+        });
+      }
+    }
+    else {
+      this._features.view = this.mapView;
+    }
+  }
+  /**
+   * Set the alertOpen member to false when the alert is closed
+   *
+   * @returns void
+   */
+  _alertClosed() {
+    this._alertOpen = false;
+  }
+  /**
+   * Close the edit record
+   *
+   * @returns void
+   */
+  _editRecordClosed() {
+    this._editRecordOpen = false;
+  }
+  /**
+   * Open the edit record
+   *
+   * @returns void
+   */
+  _openEditRecord() {
+    if (this._editEnabled) {
+      this._editRecordOpen = true;
+    }
+    else {
+      this._alertOpen = true;
+    }
+  }
+  /**
+   * 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 "info-card"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["info-card.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["info-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "graphics": {
+        "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"
+        }
+      },
+      "isLoading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true a loading indicator will be shown"
+        },
+        "attribute": "is-loading",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "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"
+        }
+      },
+      "zoomAndScrollToSelected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: When true the selected feature will zoomed to in the map and the row will be scrolled to within the table"
+        },
+        "attribute": "zoom-and-scroll-to-selected",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_alertOpen": {},
+      "_editRecordOpen": {},
+      "_translations": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "selectionChanged",
+        "name": "selectionChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted on demand when the selected index changes"
+        },
+        "complexType": {
+          "original": "__esri.Graphic",
+          "resolved": "Graphic",
+          "references": {
+            "___esri": {
+              "location": "global",
+              "id": "global::___esri"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "getSelectedFeature": {
+        "complexType": {
+          "signature": "() => Promise<any>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<any>"
+        },
+        "docs": {
+          "text": "Get the current selected feature from the Features widget",
+          "tags": [{
+              "name": "returns",
+              "text": "Promise resolving with the current feature"
+            }]
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "graphics",
+        "methodName": "graphicsWatchHandler"
+      }, {
+        "propName": "mapView",
+        "methodName": "mapViewWatchHandler"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "closeEdit",
+        "method": "closeEdit",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}