@esri/solutions-components 0.6.16 → 0.6.18

package/dist/collection/components/solution-spatial-ref/solution-spatial-ref.css

@@ -17,7 +17,7 @@
   margin-inline-end: 0.5rem;
 }
 
-.spatial-ref-switch-title {
+.spatial-ref-component {
   margin-top: 0.625rem;
   margin-inline-start: 2.5rem;
 }
@@ -52,12 +52,6 @@
   opacity: 0.4;
 }
 
-.spatial-ref-container {
-  max-height: 200px;
-  margin-bottom: 1rem;
-  overflow-y: auto;
-}
-
 .spatial-ref-desc {
   padding-bottom: 0.5rem;
   padding-inline-start: 0.25rem;

package/dist/collection/components/solution-spatial-ref/solution-spatial-ref.js

@@ -18,39 +18,26 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { h, Host } from "@stencil/core";
 import "@esri/calcite-components";
-import { wkids } from "./spatialreferences";
 import state from "../../utils/solution-store";
-import { nodeListToArray } from "../../utils/common";
+import { h, Host } from "@stencil/core";
 import { getLocaleComponentStrings } from "../../utils/locale";
+import { nodeListToArray } from "../../utils/common";
 export class SolutionSpatialRef {
-  valueChanged(newValue) {
-    this.spatialRef = this._createSpatialRefDisplay(newValue);
-    this._updateStore();
-    const searchBox = document.getElementById("calcite-sr-search");
-    if (searchBox) {
-      searchBox.value = this._srSearchText = "";
-    }
-    this._clearSelection();
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
   constructor() {
     this.defaultWkid = 102100;
+    this.loaded = false;
     this.locked = true;
-    this.value = this.defaultWkid.toString();
     this.services = [];
-    this.loaded = false;
-    this.spatialRef = undefined;
+    this.value = this.defaultWkid.toString();
     this._srSearchText = undefined;
     this._translations = undefined;
-    this.spatialRef = this._createSpatialRefDisplay(this.value);
-    this.locked = typeof this.value === "undefined";
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
   /**
    * StencilJS: Called once just after the component is first connected to the DOM.
    */
@@ -61,77 +48,24 @@ export class SolutionSpatialRef {
    * Renders the component.
    */
   render() {
-    return (h(Host, null, h("div", { class: "spatial-ref-desc" }, h("calcite-label", null, this._translations.paramDescription)), h("label", { class: "switch-label" }, h("calcite-switch", { checked: !this.locked, class: "spatial-ref-switch", onCalciteSwitchChange: (event) => this._updateLocked(event), scale: "m" }), this._translations.specifyParam), h("div", { class: "spatial-ref-switch-title", id: "spatialRefDefn" }, h("calcite-label", null, this._translations.spatialReferenceInfo, h("label", { class: "spatial-ref-default" }, h("calcite-input", { disabled: this.locked, id: "calcite-sr-search", onCalciteInputInput: (evt) => this._searchSpatialReferences(evt), onKeyDown: (evt) => this._inputKeyDown(evt), placeholder: this._translations.spatialReferencePlaceholder }))), h("div", { class: this.locked ? 'disabled-div' : '' }, h("calcite-tree", { id: "calcite-sr-tree", slot: "children" }, this._getTreeContent())), this._getFeatureServices(this.services))));
+    return (h(Host, null, h("div", { class: "spatial-ref" }, h("div", { class: "spatial-ref-desc" }, h("calcite-label", null, this._translations.paramDescription)), h("label", { class: "switch-label" }, h("calcite-switch", { checked: !this.locked, class: "spatial-ref-switch", onCalciteSwitchChange: (event) => this._updateLocked(event), scale: "m" }), this._translations.specifyParam), h("div", { class: "spatial-ref-component", id: "spatialRefDefn" }, h("calcite-label", null, this._translations.spatialReferenceInfo, h("label", { class: "spatial-ref-default" }, h("spatial-ref", { defaultWkid: this.defaultWkid, disabled: this.locked, value: this.value }))), this._getFeatureServices(this.services)))));
+  }
+  /**
+   * Handle changes to the buffer distance value
+   */
+  spatialReferenceChange(event) {
+    this.value = event.detail.newValue;
   }
   //--------------------------------------------------------------------------
   //
   //  Public Methods (async)
   //
   //--------------------------------------------------------------------------
-  /**
-   * Returns the spatial reference description of the supplied value.
-   * (Exposes protected method `_createSpatialRefDisplay` for testing.)
-   *
-   * @param value WKID or WKT or null for default
-   * @returns If component is using a WKID, description using WKID; otherwise, the WKT; defaults to 102100
-   */
-  async createSpatialRefDisplay(value) {
-    return this._createSpatialRefDisplay(value);
-  }
-  /**
-   * Returns the current spatial reference description.
-   * (Exposes protected variable `spatialRef` for testing.)
-   */
-  async getSpatialRef() {
-    return this.spatialRef;
-  }
-  /**
-   * Converts a WKID into a spatial reference description.
-   * (Exposes protected method `_wkidToDisplay` for testing.)
-   *
-   * @param wkid WKID to look up
-   * @returns Description, or "WKID <wkid>" if a description doesn't exist for the WKID
-   */
-  async wkidToDisplay(wkid) {
-    return this._wkidToDisplay(wkid);
-  }
   //--------------------------------------------------------------------------
   //
   //  Private Methods
   //
   //--------------------------------------------------------------------------
-  /**
-   * Returns the spatial reference description of the supplied value.
-   *
-   * @param value WKID or WKT or null for default
-   * @returns If component is using a WKID, description using WKID; otherwise, the WKT; defaults to 102100
-   */
-  _createSpatialRefDisplay(value) {
-    let spatialRef;
-    if (!value) {
-      spatialRef = {
-        display: this._wkidToDisplay(this.defaultWkid),
-        usingWkid: true,
-        wkid: this.defaultWkid,
-        wkt: ""
-      };
-    }
-    else {
-      const wkid = Number.parseInt(value);
-      spatialRef = isNaN(wkid) ? {
-        display: value,
-        usingWkid: false,
-        wkid: 0,
-        wkt: value
-      } : {
-        display: this._wkidToDisplay(wkid),
-        usingWkid: true,
-        wkid: wkid,
-        wkt: ""
-      };
-    }
-    return spatialRef;
-  }
   /**
    * Toggles the ability to set the default spatial reference.
    */
@@ -160,24 +94,6 @@ export class SolutionSpatialRef {
     fsNodes.forEach((node) => node.checked = true);
     services.forEach(name => this._updateEnabledServices({ detail: { switched: true } }, name));
   }
-  /**
-   * Stores the wkid as the components value.
-   */
-  _setSpatialRef(wkid) {
-    if (this.value !== wkid) {
-      this.value = wkid;
-    }
-  }
-  /**
-   * Converts a WKID into a spatial reference description.
-   *
-   * @param wkid WKID to look up
-   * @returns Description, or "WKID <wkid>" if a description doesn't exist for the WKID
-   */
-  _wkidToDisplay(wkid) {
-    const description = wkids[wkid];
-    return description ? description.label + " (" + wkid.toString() + ")" : "WKID " + wkid.toString();
-  }
   /**
    * Create a switch control for each of the services
    *
@@ -198,7 +114,7 @@ export class SolutionSpatialRef {
   _updateStore() {
     const spatialReferenceInfo = state.getStoreInfo("spatialReferenceInfo");
     spatialReferenceInfo.enabled = !this.locked;
-    spatialReferenceInfo.spatialReference = this.spatialRef.wkid;
+    spatialReferenceInfo.spatialReference = this.value;
     state.setStoreInfo("spatialReferenceInfo", spatialReferenceInfo);
   }
   /**
@@ -213,89 +129,6 @@ export class SolutionSpatialRef {
       enabled: event.detail.switched
     });
   }
-  /**
-   * Select the first child on Enter key click
-   * OR
-   * Clear any selection while user is entering values and use the default wkid
-   *
-   * @param event The keyboard event
-   */
-  _inputKeyDown(event) {
-    var _a;
-    if (event.key === "Enter") {
-      this._selectFirstChild(true);
-    }
-    else {
-      if (((_a = this._srSearchText) === null || _a === void 0 ? void 0 : _a.length) > 1) {
-        this._clearSelection();
-        this._setSpatialRef(this.defaultWkid.toString());
-      }
-    }
-  }
-  /**
-   * Clear any selected items in the elements tree.
-   *
-   */
-  _clearSelection() {
-    const selectedItems = nodeListToArray(this.el.querySelectorAll("calcite-tree-item[selected]"));
-    selectedItems.forEach((treeItem) => {
-      treeItem.selected = false;
-    });
-  }
-  /**
-   * Select the first child from the tree.
-   *
-   * @param autoFocus Boolean to indicate if focus should also be shifted to the first child.
-   *
-   */
-  _selectFirstChild(autoFocus) {
-    const wkidContainer = document.getElementById("solution-wkid-container");
-    if (wkidContainer && wkidContainer.firstChild) {
-      const firstChild = wkidContainer.firstChild;
-      firstChild.selected = true;
-      this._setSpatialRef(firstChild.id);
-      if (autoFocus) {
-        firstChild.focus();
-      }
-    }
-  }
-  /**
-   * Set the search text State and cause render.
-   *
-   * @param event the event to get the value from
-   *
-   */
-  _searchSpatialReferences(event) {
-    this._srSearchText = event.detail.value;
-  }
-  /**
-   * Get the tree items for the current spatial reference search
-   *
-   */
-  _getTreeContent() {
-    const id = "solution-wkid-container";
-    const containerClass = "spatial-ref-container";
-    if (this._srSearchText && this._srSearchText !== "" && this._srSearchText.length > 1) {
-      const regEx = new RegExp(`${this._srSearchText}`, 'gi');
-      const matches = Object.keys(wkids).filter(wkid => {
-        return regEx.test(wkid.toString()) || regEx.test(wkids[wkid].label);
-      });
-      return matches.length > 0 ? (h("div", { class: containerClass, id: id }, matches.map((wkid) => this._getTreeItem(wkid, false)))) : (null);
-    }
-    else {
-      return (h("div", { class: containerClass, id: id }, this._getTreeItem(this.value.toString(), true)));
-    }
-  }
-  /**
-   * Get the individual spatial reference tree item
-   *
-   * @param wkid The wkid for the spatial reference that will be displayed.
-   * @param selected Should the item be selected by default.
-   *
-   */
-  _getTreeItem(wkid, selected) {
-    return (h("calcite-tree-item", { "aria-selected": selected, id: wkid, onClick: () => this._setSpatialRef(wkid), selected: selected }, h("div", null, `${wkids[wkid].label} (${wkid})`)));
-  }
   /**
    * Fetches the component's translations
    *
@@ -354,46 +187,45 @@ export class SolutionSpatialRef {
         "reflect": true,
         "defaultValue": "true"
       },
-      "value": {
-        "type": "string",
+      "services": {
+        "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "string[]",
+          "resolved": "string[]",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Contains the public value for this component, which is a wkid or a wkt."
+          "text": "List of service names the spatial reference should apply to"
         },
-        "attribute": "value",
-        "reflect": true,
-        "defaultValue": "this.defaultWkid.toString()"
+        "defaultValue": "[]"
       },
-      "services": {
-        "type": "unknown",
+      "value": {
+        "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "List of service names the spatial reference should apply to"
+          "text": "Contains the public value for this component, which is a wkid or a wkt."
         },
-        "defaultValue": "[]"
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "this.defaultWkid.toString()"
       }
     };
   }
   static get states() {
     return {
       "loaded": {},
-      "spatialRef": {},
       "_srSearchText": {},
       "_translations": {}
     };
@@ -416,100 +248,14 @@ export class SolutionSpatialRef {
         }
       }];
   }
-  static get methods() {
-    return {
-      "createSpatialRefDisplay": {
-        "complexType": {
-          "signature": "(value: string) => Promise<ISpatialRefRepresentation>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "value WKID or WKT or null for default"
-                }],
-              "text": "WKID or WKT or null for default"
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "ISpatialRefRepresentation": {
-              "location": "import",
-              "path": "../../utils/interfaces",
-              "id": "src/utils/interfaces.ts::ISpatialRefRepresentation"
-            }
-          },
-          "return": "Promise<ISpatialRefRepresentation>"
-        },
-        "docs": {
-          "text": "Returns the spatial reference description of the supplied value.\r\n(Exposes protected method `_createSpatialRefDisplay` for testing.)",
-          "tags": [{
-              "name": "param",
-              "text": "value WKID or WKT or null for default"
-            }, {
-              "name": "returns",
-              "text": "If component is using a WKID, description using WKID; otherwise, the WKT; defaults to 102100"
-            }]
-        }
-      },
-      "getSpatialRef": {
-        "complexType": {
-          "signature": "() => Promise<ISpatialRefRepresentation>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "ISpatialRefRepresentation": {
-              "location": "import",
-              "path": "../../utils/interfaces",
-              "id": "src/utils/interfaces.ts::ISpatialRefRepresentation"
-            }
-          },
-          "return": "Promise<ISpatialRefRepresentation>"
-        },
-        "docs": {
-          "text": "Returns the current spatial reference description.\r\n(Exposes protected variable `spatialRef` for testing.)",
-          "tags": []
-        }
-      },
-      "wkidToDisplay": {
-        "complexType": {
-          "signature": "(wkid: number) => Promise<string>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "wkid WKID to look up"
-                }],
-              "text": "WKID to look up"
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<string>"
-        },
-        "docs": {
-          "text": "Converts a WKID into a spatial reference description.\r\n(Exposes protected method `_wkidToDisplay` for testing.)",
-          "tags": [{
-              "name": "param",
-              "text": "wkid WKID to look up"
-            }, {
-              "name": "returns",
-              "text": "Description, or \"WKID &lt;wkid&gt;\" if a description doesn't exist for the WKID"
-            }]
-        }
-      }
-    };
-  }
   static get elementRef() { return "el"; }
-  static get watchers() {
+  static get listeners() {
     return [{
-        "propName": "value",
-        "methodName": "valueChanged"
+        "name": "spatialReferenceChange",
+        "method": "spatialReferenceChange",
+        "target": "window",
+        "capture": false,
+        "passive": false
       }];
   }
 }

package/dist/collection/components/solution-spatial-ref/test/solution-spatial-ref.e2e.js

@@ -18,19 +18,31 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-// import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from "@stencil/core/testing";
 describe('solution-spatial-ref', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+  });
   it('renders', async () => {
-    //TEST commented out for now.
-    // need to work out how we pass translations
-    // e2e tests don't seem to support a similar apporach to the unit tests where we can use template to load JSX
-    // could flatten the translations further so it would contain no sub groups
-    // could set default translations for each file
-    //  and could still have a test to compare the default with the actual as a way to verify
-    expect("a").toEqual("a");
-    // const page = await newE2EPage();
-    // await page.setContent('<solution-spatial-ref></solution-spatial-ref>');
-    // const element = await page.find('solution-spatial-ref');
-    // expect(element).toHaveClass('hydrated');
+    await page.setContent('<solution-spatial-ref/>');
+    const solution_spatial_ref = await page.find('solution-spatial-ref');
+    expect(solution_spatial_ref).toHaveClass('hydrated');
+    expect(await solution_spatial_ref.getProperty('defaultWkid')).toBe(102100);
+    expect(await solution_spatial_ref.getProperty('value')).toBe('102100');
+  });
+  it('echoes value of contained spatial-ref component', async () => {
+    await page.setContent('<solution-spatial-ref/>');
+    await page.waitForChanges();
+    const newSpatialRef = '2243';
+    const spatial_ref = await page.find('spatial-ref');
+    await page.waitForChanges();
+    await spatial_ref.setProperty('value', newSpatialRef);
+    await page.waitForChanges();
+    /*
+    expect(await spatial_ref.getProperty('value')).toBe(newSpatialRef);
+    */
+    const solution_spatial_ref = await page.find('solution-spatial-ref');
+    expect(await solution_spatial_ref.getProperty('value')).toBe(newSpatialRef);
   });
 });