@esri/solutions-components 0.8.6-6.3 → 0.8.6

package/dist/collection/components/solution-item-details/solution-item-details.js

@@ -61,7 +61,7 @@ export class SolutionItemDetails {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: 'd4443b28db9314e9c6976d97af02e7af14d2a5ff' }, h("div", { key: 'bd2969f299df5fab6bab10a6cd6dbe7c7213aba4', class: "parent-container" }, h("div", { key: 'd7226027bddc89eb4ff89899ee45728534331a5d', class: "inputBottomSeparation" }, h("calcite-input", { key: '9fcd5e9c9d5fe7ac652fff4fa06801fec240380f', id: "item-title", value: this.itemDetails.title })), h("div", { key: '9542faf04236ec293eff1f1abf0667ee4d26ab45', class: "inputBottomSeparation" }, h("input", { key: '9a431fef50c9be4f084b33003c6be4cab65a7da0', accept: ".jpg,.gif,.png,image/jpg,image/gif,image/png", class: "display-none", onChange: (event) => (this._updateThumbnail(event)), ref: (el) => (this.browseForThumbnail = el), type: "file" }), h("button", { key: '9ed82a0e807acd0344bd52bcef653728419d3fc1', class: "font-size--3 btn-link inline-block trailer-quarter", onClick: () => this._getThumbnail() }, h("svg", { key: '230d6a270cd61f4785b7f39e951e996a7b37a1ca', class: "icon-inline icon-inline--on-left", height: "16", viewBox: "0 0 16 16", width: "16" }, h("path", { key: '96a6c77691e152072aa0de03f63d8ec82f1ca051', d: "M14.792 2.666l-1.414-1.413a.965.965 0 0 0-1.385-.03l-1.444 1.444-8.763 8.72L.03 15.481a.371.371 0 0 0 .488.488l4.096-1.756 8.763-8.72-.001-.001.002.002 1.443-1.444a.965.965 0 0 0-.03-1.385zM1.569 14.431l.554-1.293.74.739zm2.338-.924l-1.414-1.414 7.963-7.92 1.414 1.415zm8.67-8.626l-1.413-1.414 1.29-1.29a.306.306 0 0 1 .433 0l.981.98a.306.306 0 0 1 0 .433z" })), this._translations.editThumbnail), h("div", { key: 'de04396607c0a61eb1e13bb56581aae9e939b286', class: "flex" }, h("div", { key: '3df8a6cde94bc275b85db55375aaa351453c46fb', class: "img-container", ref: (el) => (this.thumbnailContainer = el) }, h("img", { key: 'a5084eff2ebee0514c5cac6acf4e1b8dcaaf47d5', class: "scale-down", height: "133", id: "item-thumbnail", ref: (el) => (this.thumbnail = el), width: "200" })), h("div", { key: '73199d7582082575282f36ecb6afed3ee6bd900e', class: "snippet-count-container" }, h("calcite-input", { key: '7aa7c61d42be36c237c6bd9b72e4ec24ef6dc07d', id: "item-snippet", maxLength: 250, type: "textarea", value: this.itemDetails.snippet }), h("label", { key: '9ae2f293b2cb64a475a0969b7e00951a1b55e251', class: "font-size--3", id: "item-snippet-count", ref: (el) => (this.itemSnippetCount = el) })))), h("calcite-label", { key: '98cf6dd0f1f53e15c857baeb4f3a580586935762' }, this._translations.description, h("label", { key: '2f54c0fd6d75e4b08e74cf5b30d9794d0375a267', id: "item-description-label" }, h("calcite-input", { key: '91cf40b10f1bed0cd4bc83a988d9a4151ddec2e6', id: "item-description", type: "textarea", value: this.itemDetails.description }))), h("calcite-label", { key: '4261ff6e21385fb681cb6a52dbaa8e3d75973d8b' }, this._translations.tags, h("label", { key: 'cde48f34fd18fe530dea6be06c8fb5e602048266', id: "item-tags-label" }, h("calcite-input", { key: 'e11931c90df113bd512bab39be092257ffd92e42', id: "item-tags", value: (this.itemDetails.tags && Array.isArray(this.itemDetails.tags) ? this.itemDetails.tags : [this.itemDetails.tags]).join(",") }))), this.itemType !== "Group" ? h("calcite-label", null, this._translations.credits, h("label", { id: "item-credits-label" }, h("calcite-input", { id: "item-credits", value: this.itemDetails.accessInformation }))) : null, this.itemType !== "Group" ? h("calcite-label", null, h("label", { id: "item-terms-label" }, this._translations.termsOfUse, h("calcite-input", { id: "item-terms", type: "textarea", value: this.itemDetails.licenseInfo }))) : null)));
+        return (h(Host, null, h("div", { class: "parent-container" }, h("div", { class: "inputBottomSeparation" }, h("calcite-input", { id: "item-title", value: this.itemDetails.title })), h("div", { class: "inputBottomSeparation" }, h("input", { accept: ".jpg,.gif,.png,image/jpg,image/gif,image/png", class: "display-none", onChange: (event) => (this._updateThumbnail(event)), ref: (el) => (this.browseForThumbnail = el), type: "file" }), h("button", { class: "font-size--3 btn-link inline-block trailer-quarter", onClick: () => this._getThumbnail() }, h("svg", { class: "icon-inline icon-inline--on-left", height: "16", viewBox: "0 0 16 16", width: "16" }, h("path", { d: "M14.792 2.666l-1.414-1.413a.965.965 0 0 0-1.385-.03l-1.444 1.444-8.763 8.72L.03 15.481a.371.371 0 0 0 .488.488l4.096-1.756 8.763-8.72-.001-.001.002.002 1.443-1.444a.965.965 0 0 0-.03-1.385zM1.569 14.431l.554-1.293.74.739zm2.338-.924l-1.414-1.414 7.963-7.92 1.414 1.415zm8.67-8.626l-1.413-1.414 1.29-1.29a.306.306 0 0 1 .433 0l.981.98a.306.306 0 0 1 0 .433z" })), this._translations.editThumbnail), h("div", { class: "flex" }, h("div", { class: "img-container", ref: (el) => (this.thumbnailContainer = el) }, h("img", { class: "scale-down", height: "133", id: "item-thumbnail", ref: (el) => (this.thumbnail = el), width: "200" })), h("div", { class: "snippet-count-container" }, h("calcite-input", { id: "item-snippet", maxLength: 250, type: "textarea", value: this.itemDetails.snippet }), h("label", { class: "font-size--3", id: "item-snippet-count", ref: (el) => (this.itemSnippetCount = el) })))), h("calcite-label", null, this._translations.description, h("label", { id: "item-description-label" }, h("calcite-input", { id: "item-description", type: "textarea", value: this.itemDetails.description }))), h("calcite-label", null, this._translations.tags, h("label", { id: "item-tags-label" }, h("calcite-input", { id: "item-tags", value: (this.itemDetails.tags && Array.isArray(this.itemDetails.tags) ? this.itemDetails.tags : [this.itemDetails.tags]).join(",") }))), this.itemType !== "Group" ? h("calcite-label", null, this._translations.credits, h("label", { id: "item-credits-label" }, h("calcite-input", { id: "item-credits", value: this.itemDetails.accessInformation }))) : null, this.itemType !== "Group" ? h("calcite-label", null, h("label", { id: "item-terms-label" }, this._translations.termsOfUse, h("calcite-input", { id: "item-terms", type: "textarea", value: this.itemDetails.licenseInfo }))) : null)));
     }
     componentDidRender() {
         this._loadThumb();

package/dist/collection/components/solution-item-icon/solution-item-icon.js

@@ -34,7 +34,7 @@ export class SolutionItemIcon {
      * Renders the component.
      */
     render() {
-        return h("div", { key: '3b732e3c889dc83eb649af9d66742304e549d229', title: this.type }, h("img", { key: '262f4891209996264e8c0248c926a60f71b9e674', class: "item-type-icon item-type-icon-margin", height: "16", src: this._getIconUrl(this.type, this.typeKeywords), width: "16" }));
+        return h("div", { title: this.type }, h("img", { class: "item-type-icon item-type-icon-margin", height: "16", src: this._getIconUrl(this.type, this.typeKeywords), width: "16" }));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/solution-item-sharing/solution-item-sharing.js

@@ -46,7 +46,7 @@ export class SolutionItemSharing {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '7042ab9382712488f9184b305e417dd93379422f' }, h("div", { key: '00baf7fac31f03b249592eb8603a74d6f93f2615', class: "container-border" }, h("calcite-label", { key: '5328280b6ee86819366800e43eda0c44b55ca277' }, this._translations.groupInfo), this._renderItems(this.sharing))));
+        return (h(Host, null, h("div", { class: "container-border" }, h("calcite-label", null, this._translations.groupInfo), this._renderItems(this.sharing))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/solution-organization-variables/solution-organization-variables.js

@@ -44,7 +44,7 @@ export class SolutionOrganizationVariables {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: 'a4456905e1abde8eca22dfb6f3da81959d509b75' }, h("div", { key: '8fc37e2a59237ed0cca05b096f901a82da696151' }, h("h4", { key: '7bdd9e95f37297c51778a866542517048622e5ca', class: "org-var-header" }, this._translations.orgVariables)), h("div", { key: '10bfcebd83ddc363f04149a03298b0c5247fd265', class: "container-border" }, h("calcite-tree", { key: '1d168ebbceaf566fb8f4ddea85acba39c08bbd53', id: "variable-label" }, this._renderHierarchy(this._organizationVariables)))));
+        return (h(Host, null, h("div", null, h("h4", { class: "org-var-header" }, this._translations.orgVariables)), h("div", { class: "container-border" }, h("calcite-tree", { id: "variable-label" }, this._renderHierarchy(this._organizationVariables)))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/solution-resource-item/solution-resource-item.js

@@ -56,7 +56,7 @@ export class SolutionResourceItem {
      */
     render() {
         const hasValidResources = this._hasValidResources();
-        return (h(Host, { key: 'c36fddfce9c4c97b281281ec11dfa017d496141e' }, h("div", { key: 'e1166173669689e9acee92cc7e53747ebcec0c09', class: "resource-item" }, h("div", { key: '86c8e1d498d7b84e9587cdcf4a3bb971fc1ecaad', class: "margin-bottom-1" }, h("calcite-button", { key: 'f382275e75efeb5beadef582ddd343a283f014e2', appearance: "solid", class: "resource-button", color: "blue", onClick: () => this._addNewResource() }, this._translations.addResource), h("calcite-button", { key: 'c487e618472b047f8db71e8989f849c844682080', appearance: "solid", color: "blue", disabled: !hasValidResources, onClick: () => this._downloadAll() }, this._translations.downloadAll)), h("div", { key: '08733ba234cba9b5ea19455256fa961d23ae933b', class: "resources-container", style: { display: hasValidResources ? "inherit" : "none" } }, this._renderResourceList()))));
+        return (h(Host, null, h("div", { class: "resource-item" }, h("div", { class: "margin-bottom-1" }, h("calcite-button", { appearance: "solid", class: "resource-button", color: "blue", onClick: () => this._addNewResource() }, this._translations.addResource), h("calcite-button", { appearance: "solid", color: "blue", disabled: !hasValidResources, onClick: () => this._downloadAll() }, this._translations.downloadAll)), h("div", { class: "resources-container", style: { display: hasValidResources ? "inherit" : "none" } }, this._renderResourceList()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -300,7 +300,7 @@ export class SolutionResourceItem {
                         "UserSession": {
                             "location": "import",
                             "path": "@esri/solution-common",
-                            "id": "node_modules::UserSession"
+                            "id": ""
                         }
                     }
                 },

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

@@ -42,6 +42,7 @@
 }
 
 .switch-label {
+  margin: 0.25rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
@@ -54,15 +55,4 @@
 .spatial-ref-desc {
   padding-bottom: 0.5rem;
   padding-inline-start: 0.25rem;
-}
-
-.spatial-ref-services-list {
-  margin-block-start: 0.5em;
-  margin-block-end: 0.5em;
-  list-style-type: none;
-  padding-inline-start: 0;
-}
-
-.spatial-ref-services-list-item {
-  margin-top: 0.25rem;
 }

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

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 /** @license
- * Copyright 2021 Esri
+ * 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.
@@ -18,9 +18,9 @@
  * 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 state from "../../utils/solution-store";
+import { h, Host } from "@stencil/core";
 import { getLocaleComponentStrings } from "../../utils/locale";
 import { nodeListToArray } from "../../utils/common";
 export class SolutionSpatialRef {
@@ -30,6 +30,7 @@ export class SolutionSpatialRef {
         this.locked = true;
         this.services = [];
         this.value = this.defaultWkid.toString();
+        this._srSearchText = undefined;
         this._translations = undefined;
     }
     lockedChanged(newLocked) {
@@ -52,21 +53,17 @@ export class SolutionSpatialRef {
     componentWillLoad() {
         return this._getTranslations();
     }
+    /**
+     * Renders the component.
+     */
     render() {
-        return (h(Host, { key: '8c5f34b7d44429ed0395ae48956161caf7e62111' }, h("label", { key: '69f1178da58409888f0b5b15ae4ffd224bb999d4', class: "switch-label" }, h("calcite-switch", { key: '279795c5e21b914c595ea95219e3f589f7270ac4', checked: !this.locked, class: "spatial-ref-switch", onCalciteSwitchChange: (event) => this._updateLocked(event), scale: "m" }), this._translations.specifyParam), h("div", { key: '516e621ad3e2f6f881b0fbc0a80d98f1f3b7eecd', class: "spatial-ref-component", id: "spatialRefDefn" }, h("calcite-label", { key: '19b05ffa3e80d5e33521d0b6ee8438d882f9481d' }, this._translations.spatialReferenceInfo, h("label", { key: '0766edb36aa3e8853bfd4754b9ea7aa955d7d987', class: "spatial-ref-default" }, h("spatial-ref", { key: '9f1b37a12e18b5ba3c2d2b4b372f01a4f69ded28', defaultWkid: this.defaultWkid, disabled: this.locked, value: this.value }))), this._getFeatureServices(this.services))));
-    }
-    solutionStoreHasChanges() {
-        this.services = state.getStoreInfo("featureServices").map(service => service.name);
+        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)))));
     }
     /**
      * Saves changes to the embedded spatial reference value
      */
     spatialReferenceChange(event) {
         this.value = event.detail.newValue;
-        state.setStoreInfo("defaultWkid", event.detail.newValue);
-        const spatialReferenceInfo = state.getStoreInfo("spatialReferenceInfo");
-        spatialReferenceInfo.spatialReference = event.detail.newValue;
-        state.setStoreInfo("spatialReferenceInfo", spatialReferenceInfo);
     }
     //--------------------------------------------------------------------------
     //
@@ -79,19 +76,22 @@ export class SolutionSpatialRef {
     //
     //--------------------------------------------------------------------------
     /**
-     * Create a switch control for each of the services
-     *
-     * @param services List of feature services
-     * @returns a node to control each feature service
+     * Toggles the ability to set the default spatial reference.
      */
-    _getFeatureServices(services) {
-        // verify they are in state
-        const spatialReferenceInfo = state.getStoreInfo("spatialReferenceInfo");
-        const _services = services.filter(serviceName => {
-            return Object.keys(spatialReferenceInfo.services).some(srefServiceName => srefServiceName === serviceName);
-        });
-        return _services.length > 0 ? (h("div", null, h("label", { class: "spatial-ref-item-title" }, this._translations.featureServicesHeading), h("ul", { class: "spatial-ref-services-list" }, _services.map(name => (h("li", { class: "spatial-ref-services-list-item" }, h("label", { class: "switch-label" }, h("calcite-switch", { checked: spatialReferenceInfo.services[name], class: "spatial-ref-item-switch", disabled: this.locked, onCalciteSwitchChange: (event) => this._updateEnabledServices(event, name), scale: "m" }), name))))))) : (null);
+    _updateLocked(event) {
+        this.locked = !event.target.checked;
+        this._updateStore();
+        if (!this.loaded) {
+            // when this is switched on when loading we have reloaded a solution that
+            // has a custom wkid param and we should honor the settings they already have in the templates
+            if (event.target.checked) {
+                // By default enable all Feature Services on first load
+                this._setFeatureServiceDefaults(this.services);
+            }
+            this.loaded = true;
+        }
     }
+    ;
     /**
      * Enable spatial reference variable for all feature services.
      *
@@ -104,40 +104,19 @@ export class SolutionSpatialRef {
         services.forEach(name => this._updateEnabledServices({ detail: { switched: true } }, name));
     }
     /**
-     * Updates the enabled/disabled state of the service in spatialReferenceInfo.
+     * Create a switch control for each of the services
+     *
+     * @param services List of feature services
+     * @returns a node to control each feature service
      */
-    _updateEnabledServices(event, name) {
-        var _a, _b;
+    _getFeatureServices(services) {
+        // verify they are in state
         const spatialReferenceInfo = state.getStoreInfo("spatialReferenceInfo");
-        const enabled = ((_a = event.detail) === null || _a === void 0 ? void 0 : _a.switched) !== undefined // internal event
-            ? event.detail.switched
-            : ((_b = event.target) === null || _b === void 0 ? void 0 : _b.checked) !== undefined // calcite event
-                ? event.target.checked
-                : true;
-        spatialReferenceInfo.services[name] = enabled;
-        state.setStoreInfo("spatialReferenceInfo", spatialReferenceInfo);
-        this.featureServiceSpatialReferenceChange.emit({
-            name,
-            enabled
+        const _services = services.filter(s => {
+            return Object.keys(spatialReferenceInfo.services).some(stateService => stateService === s);
         });
+        return _services && _services.length > 0 ? (h("div", null, h("label", { class: "spatial-ref-item-title" }, this._translations.featureServicesHeading), _services.map(name => (h("label", { class: "switch-label" }, h("calcite-switch", { checked: spatialReferenceInfo.services[name], class: "spatial-ref-item-switch", disabled: this.locked, onCalciteSwitchChange: (event) => this._updateEnabledServices(event, name), scale: "m" }), name))))) : (null);
     }
-    /**
-     * Toggles the ability to set the default spatial reference.
-     */
-    _updateLocked(event) {
-        this.locked = !event.target.checked;
-        this._updateStore();
-        if (!this.loaded) {
-            // when this is switched on when loading we have reloaded a solution that
-            // has a custom wkid param and we should honor the settings they already have in the templates
-            if (event.target.checked) {
-                // By default enable all Feature Services on first load
-                this._setFeatureServiceDefaults(this.services);
-            }
-            this.loaded = true;
-        }
-    }
-    ;
     /**
      * Updates the enabled and spatialReference prop in spatialReferenceInfo.
      */
@@ -147,6 +126,18 @@ export class SolutionSpatialRef {
         spatialReferenceInfo.spatialReference = this.value;
         state.setStoreInfo("spatialReferenceInfo", spatialReferenceInfo);
     }
+    /**
+     * Updates the enabled/disabled state of the service in spatialReferenceInfo.
+     */
+    _updateEnabledServices(event, name) {
+        const spatialReferenceInfo = state.getStoreInfo("spatialReferenceInfo");
+        spatialReferenceInfo.services[name] = event.target.checked;
+        state.setStoreInfo("spatialReferenceInfo", spatialReferenceInfo);
+        this.featureServiceSpatialReferenceChange.emit({
+            name,
+            enabled: event.target.checked
+        });
+    }
     /**
      * Fetches the component's translations
      *
@@ -187,24 +178,6 @@ export class SolutionSpatialRef {
                 "reflect": true,
                 "defaultValue": "102100"
             },
-            "loaded": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Indicates if the control has been enabled.\r\nThe first time Spatial Reference has been enabled it should enable all feature services."
-                },
-                "attribute": "loaded",
-                "reflect": true,
-                "defaultValue": "false"
-            },
             "locked": {
                 "type": "boolean",
                 "mutable": true,
@@ -261,6 +234,8 @@ export class SolutionSpatialRef {
     }
     static get states() {
         return {
+            "loaded": {},
+            "_srSearchText": {},
             "_translations": {}
         };
     }
@@ -276,14 +251,9 @@ export class SolutionSpatialRef {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "IFeatureServiceSpatialReferenceChange",
-                    "resolved": "IFeatureServiceSpatialReferenceChange",
-                    "references": {
-                        "IFeatureServiceSpatialReferenceChange": {
-                            "location": "global",
-                            "id": "global::IFeatureServiceSpatialReferenceChange"
-                        }
-                    }
+                    "original": "{ name: string, enabled: boolean }",
+                    "resolved": "{ name: string; enabled: boolean; }",
+                    "references": {}
                 }
             }, {
                 "method": "lockedSpatialReferenceChange",
@@ -311,12 +281,6 @@ export class SolutionSpatialRef {
     }
     static get listeners() {
         return [{
-                "name": "solutionStoreHasChanges",
-                "method": "solutionStoreHasChanges",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
                 "name": "spatialReferenceChange",
                 "method": "spatialReferenceChange",
                 "target": "window",

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

@@ -0,0 +1,45 @@
+/*!
+ * 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";
+describe('solution-spatial-ref', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+    });
+    it('renders', async () => {
+        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();
+        const solution_spatial_ref = await page.find('solution-spatial-ref');
+        expect(await solution_spatial_ref.getProperty('value')).toBe(newSpatialRef);
+    });
+});

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

@@ -0,0 +1,79 @@
+/*!
+ * 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 * as locale from "../../../utils/locale";
+import state from "../../../utils/solution-store";
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { SolutionSpatialRef } from "../solution-spatial-ref";
+describe('solution-spatial-ref', () => {
+    beforeEach(() => {
+        jest.spyOn(locale, 'getLocaleComponentStrings').mockImplementation(() => Promise.resolve([{ "spatialReferencePlaceholder": "Search for spatial reference using name or WKID" }, "en"]));
+        state._testAccess("_emptyTheStore");
+        state.setStoreInfo("spatialReferenceInfo", {
+            enabled: true,
+            services: {
+                "Feature Service 1": true,
+                "Feature Service 2": false
+            },
+            spatialReference: undefined
+        });
+    });
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [SolutionSpatialRef],
+            supportsShadowDom: false,
+            template: () => (h("solution-spatial-ref", { services: ["Feature Service 1", "Feature Service 2"] }))
+        });
+        expect(page.root).toEqualHtml(`
+      <solution-spatial-ref default-wkid="102100" locked="" value="102100">
+        <div class="spatial-ref">
+          <div class="spatial-ref-desc">
+            <calcite-label></calcite-label>
+          </div>
+          <label class="switch-label">
+            <calcite-switch class="spatial-ref-switch" scale="m"></calcite-switch>
+          </label>
+          <div class="spatial-ref-component" id="spatialRefDefn">
+            <calcite-label>
+              <label class="spatial-ref-default">
+                <spatial-ref defaultwkid="102100" disabled="" value="102100"></spatial-ref>
+              </label>
+            </calcite-label>
+            <div>
+              <label class="spatial-ref-item-title"></label>
+              <label class="switch-label">
+                <calcite-switch checked="" class="spatial-ref-item-switch" disabled="" scale="m"></calcite-switch>
+                Feature Service 1
+              </label>
+              <label class="switch-label">
+                <calcite-switch class="spatial-ref-item-switch" disabled="" scale="m"></calcite-switch>
+                Feature Service 2
+              </label>
+            </div>
+          </div>
+        </div>
+      </solution-spatial-ref>
+    `);
+    });
+});

package/dist/collection/components/solution-template-data/solution-template-data.js

@@ -72,7 +72,7 @@ export class SolutionTemplateData {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '5a417f81d9b0d98ad28f9139406fee4b37204169' }, h("div", { key: '0dd5d77a961473bf45f7654ccb2e0507b492a6c7', class: "solution-data-container" }, h("calcite-shell", { key: '3b839b36a89f1a9db10a6ad8b3f7d088248770bc', class: "light var-container", dir: "ltr" }, h("calcite-panel", { key: '9f6ce42fdad56cf7a9f6b2f9ccac707eb655f4f1', class: "json-editor" }, h("div", { key: 'a1ba50c8fd13cf6d4934aa72083c0519c317721d', class: "solution-data-child-container calcite-match-height" }, h("json-editor", { key: '8f832aecde35b6b82e16b3d201b738fe202e86a3', class: "solution-data-editor-container", instanceid: this.itemId + "|" + this.instanceid, value: this.value }))), h("calcite-shell-panel", { key: 'c24f19fcc440884123f59842b392063925b5cbf6', "height-scale": "l", position: "end", slot: "contextual-panel", "width-scale": "xs" }, h("div", { key: '8d9c25baada3e2ca03ee192f44121d7bdab85432', class: this.varsOpen ? "solution-data-child-container" : "solution-data-child-container-collapsed" }, h("calcite-button", { key: '247b542336578c5404c7246552424c16030d90a7', appearance: "transparent", class: "collapse-btn", "icon-start": this.varsOpen ? "chevrons-right" : "chevrons-left", id: "collapse-vars", onClick: () => this._toggleVars(), scale: "s", title: this.varsOpen ? this._translations.collapse : this._translations.expand }), h("div", { key: '963c1802c7828557cec5493602c3a1669e21683c', class: this.varsOpen ? "org-vars" : "org-vars display-none", id: "orgVars" }, h("solution-organization-variables", { key: '566f672a97401d77ed7180d5fc7b2367027fcc57', value: this.organizationVariables })), h("div", { key: '79508bfcde2ac8507acd40bbc3edceb944c3e717', class: this.varsOpen ? "sol-vars" : "sol-vars display-none", id: "solVars" }, h("solution-variables", { key: '51756082f8d13c73d7ae1349fc5625994a3354bb', value: this.solutionVariables }))))))));
+        return (h(Host, null, h("div", { class: "solution-data-container" }, h("calcite-shell", { class: "light var-container", dir: "ltr" }, h("calcite-panel", { class: "json-editor" }, h("div", { class: "solution-data-child-container calcite-match-height" }, h("json-editor", { class: "solution-data-editor-container", instanceid: this.itemId + "|" + this.instanceid, value: this.value }))), h("calcite-shell-panel", { "height-scale": "l", position: "end", slot: "contextual-panel", "width-scale": "xs" }, h("div", { class: this.varsOpen ? "solution-data-child-container" : "solution-data-child-container-collapsed" }, h("calcite-button", { appearance: "transparent", class: "collapse-btn", "icon-start": this.varsOpen ? "chevrons-right" : "chevrons-left", id: "collapse-vars", onClick: () => this._toggleVars(), scale: "s", title: this.varsOpen ? this._translations.collapse : this._translations.expand }), h("div", { class: this.varsOpen ? "org-vars" : "org-vars display-none", id: "orgVars" }, h("solution-organization-variables", { value: this.organizationVariables })), h("div", { class: this.varsOpen ? "sol-vars" : "sol-vars display-none", id: "solVars" }, h("solution-variables", { value: this.solutionVariables }))))))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/solution-variables/solution-variables.js

@@ -44,7 +44,7 @@ export class SolutionVariables {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '4367694cf20a2063b57679f1a955ef827eea1c05' }, h("div", { key: '875e6e1532e7406ddf6cca804e421980aa23b7cd' }, h("h4", { key: 'b6798506cf71d3c84e2c33a3d12a0729591a73a7', class: "org-var-header" }, this._translations.solVariables)), h("div", { key: '413d3c7ebae5afa05a8cb5c87f766db64f43e106', class: "container-border" }, h("calcite-tree", { key: 'ba5bf27e005ce7536cdfe0c8022c96cd0b4ad920', id: "variable-label" }, this._renderHierarchy(this._solutionVariables)))));
+        return (h(Host, null, h("div", null, h("h4", { class: "org-var-header" }, this._translations.solVariables)), h("div", { class: "container-border" }, h("calcite-tree", { id: "variable-label" }, this._renderHierarchy(this._solutionVariables)))));
     }
     //--------------------------------------------------------------------------
     //

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

@@ -64,7 +64,7 @@ export class SpatialRef {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '23f3f6ff3d7eeeaeb8fb916532302a241fdbc078' }, h("div", { key: 'ea7631c0c26d451a72bd68e24ccb3ac757cf73f3' }, h("calcite-input", { key: '32d27336b3bc34ee6cd0d3c7ac3e52de7ee8011e', disabled: this.disabled, id: "calcite-sr-search", onKeyUp: (evt) => this._searchInputKeyDown(evt), placeholder: this._translations.spatialReferencePlaceholder }), h("calcite-tree", { key: '927f03277a45d5cf256306a2246bccffc0d296cb', id: "calcite-sr-tree", slot: "children" }, this._getTreeContent()))));
+        return (h(Host, null, h("div", null, h("calcite-input", { disabled: this.disabled, id: "calcite-sr-search", onKeyUp: (evt) => this._searchInputKeyDown(evt), placeholder: this._translations.spatialReferencePlaceholder }), h("calcite-tree", { id: "calcite-sr-tree", slot: "children" }, this._getTreeContent()))));
     }
     //--------------------------------------------------------------------------
     //

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

@@ -0,0 +1,71 @@
+/*!
+ * 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";
+describe('spatial-ref', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+    });
+    it('renders', async () => {
+        await page.setContent('<spatial-ref/>');
+        const spatial_ref = await page.find('spatial-ref');
+        expect(spatial_ref).toHaveClass('hydrated');
+        expect(await spatial_ref.getProperty('defaultWkid')).toBe(102100);
+        expect(await spatial_ref.getProperty('value')).toBe('102100');
+    });
+    it('select first value after typing in search field', async () => {
+        await page.setContent('<spatial-ref/>');
+        const spatial_ref = await page.find('spatial-ref');
+        expect(await spatial_ref.getProperty('value')).toBe('102100');
+        const input = await page.find('calcite-input >>> input');
+        await input.focus();
+        await page.keyboard.type('wyoming');
+        await page.waitForChanges();
+        await page.keyboard.press('Enter');
+        await page.waitForChanges();
+        expect(await spatial_ref.getProperty('value')).toBe('2862');
+    });
+    xit('select tabbed-to value after typing in search field', async () => {
+        await page.setContent('<spatial-ref/>');
+        const spatial_ref = await page.find('spatial-ref');
+        expect(await spatial_ref.getProperty('value')).toBe('102100');
+        const input = await page.find('calcite-input >>> input');
+        await input.focus();
+        await page.keyboard.type('wyoming');
+        await page.waitForChanges();
+        // Enter the list of suggested projections
+        await page.keyboard.press('Tab');
+        await page.waitForChanges();
+        // And tab down to one of them
+        await page.keyboard.press('Tab');
+        await page.waitForChanges();
+        await page.keyboard.press('Tab');
+        await page.waitForChanges();
+        await page.keyboard.press('Tab');
+        await page.waitForChanges();
+        // Select it, and use second selection to make it the current projection
+        await page.keyboard.press('Enter');
+        await page.waitForChanges();
+        await page.keyboard.press('Enter');
+        await page.waitForChanges();
+        expect(await spatial_ref.getProperty('value')).toBe('2865');
+    });
+});