@esri/solutions-components 0.10.39 → 0.10.41

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

@@ -24,6 +24,7 @@ import { getLocaleComponentStrings } from "../../utils/locale";
 export class SolutionItemSharing {
     constructor() {
         this.groupId = "";
+        this.locale = undefined;
         this._translations = undefined;
         this.sharing = [];
     }
@@ -33,10 +34,23 @@ export class SolutionItemSharing {
     //
     //--------------------------------------------------------------------------
     el;
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
     itemIdWatchHandler() {
         const itemEdit = state.getItemInfo(this.groupId);
         this.sharing = itemEdit.groupDetails;
     }
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
     //--------------------------------------------------------------------------
     //
     //  Lifecycle
@@ -52,7 +66,7 @@ export class SolutionItemSharing {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '3b94a68c01079f717b1ff38b82f946a32cfcb3a4' }, h("div", { key: 'e2fd74849f827a5e9756182ead2c23b3ef9584b9', class: "container-border" }, h("calcite-label", { key: '4ac7e9adf98368d5f8b985519a8fd9d1ab24d5d6' }, this._translations.groupInfo), this._renderItems(this.sharing))));
+        return (h(Host, { key: '1c7dbee68fbf0eabf736fb783f173ade2f408122' }, h("div", { key: '3c3d88ab122d4a8bc69363224a2754c4a4b092ba', class: "container-border" }, h("calcite-label", { key: '137bb704b258a3cd1e5e5b7a18c53aca331d7f91' }, this._translations.groupInfo), this._renderItems(this.sharing))));
     }
     //--------------------------------------------------------------------------
     //
@@ -166,6 +180,23 @@ export class SolutionItemSharing {
                 "attribute": "group-id",
                 "reflect": true,
                 "defaultValue": "\"\""
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: Locale to use for translation of stings in the UI"
+                },
+                "attribute": "locale",
+                "reflect": false
             }
         };
     }
@@ -201,6 +232,9 @@ export class SolutionItemSharing {
         return [{
                 "propName": "groupId",
                 "methodName": "itemIdWatchHandler"
+            }, {
+                "propName": "locale",
+                "methodName": "localeWatchHandler"
             }];
     }
 }

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

@@ -22,6 +22,7 @@ import { Host, h } from "@stencil/core";
 import { getLocaleComponentStrings } from "../../utils/locale";
 export class SolutionOrganizationVariables {
     constructor() {
+        this.locale = undefined;
         this.value = "";
         this._organizationVariables = [];
         this._translations = undefined;
@@ -32,6 +33,19 @@ export class SolutionOrganizationVariables {
     //
     //--------------------------------------------------------------------------
     el;
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
     valueWatchHandler() {
         this._organizationVariables = JSON.parse(this.value);
     }
@@ -50,7 +64,7 @@ export class SolutionOrganizationVariables {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '0dd925da12c0eb9861637e78d74c75ad4a23c9f3' }, h("div", { key: '324cfdc588fce6ee5a69b7cd54956a0ab0ef0adf' }, h("h4", { key: '2fca69530272a3f0630b86d36bbc78ec651c45d1', class: "org-var-header" }, this._translations.orgVariables)), h("div", { key: '6f05088ebfaf50e4516c634f1a016275f4228c45', class: "container-border" }, h("calcite-tree", { key: '22585bb1a7cae978c3fbf7301d33b81b4fffb540', id: "variable-label" }, this._renderHierarchy(this._organizationVariables)))));
+        return (h(Host, { key: '3f72a5c1b8fb6bcdab858ee061eadb38cb9965d9' }, h("div", { key: '118c7cafc8330c44e72a59a76fd81ca0f39696e1' }, h("h4", { key: '86934bdf3cbf162a732a53579e324c5fff8beead', class: "org-var-header" }, this._translations.orgVariables)), h("div", { key: 'ed5c1df397286a7d1c8e61b5ce04623fa13d74cc', class: "container-border" }, h("calcite-tree", { key: '47f4f9bf5a81ded9a37a33a94fac6a230263e917', id: "variable-label" }, this._renderHierarchy(this._organizationVariables)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -119,6 +133,23 @@ export class SolutionOrganizationVariables {
     }
     static get properties() {
         return {
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: Locale to use for translation of stings in the UI"
+                },
+                "attribute": "locale",
+                "reflect": false
+            },
             "value": {
                 "type": "string",
                 "mutable": true,
@@ -166,6 +197,9 @@ export class SolutionOrganizationVariables {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "locale",
+                "methodName": "localeWatchHandler"
+            }, {
                 "propName": "value",
                 "methodName": "valueWatchHandler"
             }];

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

@@ -27,6 +27,7 @@ export class SolutionResourceItem {
     constructor() {
         this.authentication = undefined;
         this.itemId = "";
+        this.locale = undefined;
         this.resourceFilePaths = [];
         this.resources = [];
         this._translations = undefined;
@@ -37,6 +38,11 @@ export class SolutionResourceItem {
     //
     //--------------------------------------------------------------------------
     el;
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
     itemIdWatchHandler() {
         const item = state.getItemInfo(this.itemId);
         this.resourceFilePaths = item.resourceFilePaths;
@@ -45,6 +51,14 @@ export class SolutionResourceItem {
         // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
         (path) => path.substring(path.lastIndexOf("/") + 1));
     }
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
     //--------------------------------------------------------------------------
     //
     //  Lifecycle
@@ -61,7 +75,7 @@ export class SolutionResourceItem {
      */
     render() {
         const hasValidResources = this._hasValidResources();
-        return (h(Host, { key: '95659a6d3572354aef8a879694e41ab6821ca506' }, h("div", { key: 'fa34097cf27797000558b4ddb001ba7e89d8fe71', class: "resource-item" }, h("div", { key: 'a7797a17c4cef3e7189157b141fdbf5c3b34143c', class: "margin-bottom-1" }, h("calcite-button", { key: 'd6d70a4240348a12b2f4847abc3806ef46064871', appearance: "solid", class: "resource-button", color: "blue", onClick: () => this._addNewResource() }, this._translations.addResource), h("calcite-button", { key: 'c9a73c13a223b8120965bcf092ef63c6a9443f43', appearance: "solid", color: "blue", disabled: !hasValidResources, onClick: () => this._downloadAll() }, this._translations.downloadAll)), h("div", { key: '0eb74fd024fc421b94391984b842a4a7ffd491c5', class: "resources-container", style: { display: hasValidResources ? "inherit" : "none" } }, this._renderResourceList()))));
+        return (h(Host, { key: '13f2759a882d2eca48bf9dda58e74caade76142b' }, h("div", { key: '498ced2e29b8af9138a8aa9d77ec78e07e3c64de', class: "resource-item" }, h("div", { key: 'd76a967373a990906a67d88ea6466030c41401ff', class: "margin-bottom-1" }, h("calcite-button", { key: '96cd2ee08adadef9e1b29db12c38d4748b0689c0', appearance: "solid", class: "resource-button", color: "blue", onClick: () => this._addNewResource() }, this._translations.addResource), h("calcite-button", { key: '49326139cad065995512d3e3568c7d8e7f5cef4f', appearance: "solid", color: "blue", disabled: !hasValidResources, onClick: () => this._downloadAll() }, this._translations.downloadAll)), h("div", { key: '9c056d9ab7242ea10cbcf57eaabce4bd9777541e', class: "resources-container", style: { display: hasValidResources ? "inherit" : "none" } }, this._renderResourceList()))));
     }
     _removedResources = {};
     //--------------------------------------------------------------------------
@@ -334,6 +348,23 @@ export class SolutionResourceItem {
                 "attribute": "item-id",
                 "reflect": true,
                 "defaultValue": "\"\""
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: Locale to use for translation of stings in the UI"
+                },
+                "attribute": "locale",
+                "reflect": false
             }
         };
     }
@@ -349,6 +380,9 @@ export class SolutionResourceItem {
         return [{
                 "propName": "itemId",
                 "methodName": "itemIdWatchHandler"
+            }, {
+                "propName": "locale",
+                "methodName": "localeWatchHandler"
             }];
     }
 }

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

@@ -33,6 +33,7 @@ export class SolutionSpatialRef {
         this.enabled = false;
         this.enableDefault = false;
         this.featureServices = [];
+        this.locale = undefined;
         this._translations = undefined;
     }
     //--------------------------------------------------------------------------
@@ -49,6 +50,19 @@ export class SolutionSpatialRef {
     }
     //--------------------------------------------------------------------------
     //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
+    //--------------------------------------------------------------------------
+    //
     //  Lifecycle
     //
     //--------------------------------------------------------------------------
@@ -61,7 +75,7 @@ export class SolutionSpatialRef {
     }
     render() {
         this._updateUIFromStore();
-        return (h(Host, { key: '48e068d6c44084861637657ca39ee931d9550e12' }, h("label", { key: 'fbc865a92e0be089fc856706b300f10007219b20', class: "switch-label" }, h("calcite-switch", { key: '7dc37074873760a9128585ce05968e77713a6b24', checked: this.enabled, class: "spatial-ref-switch", onCalciteSwitchChange: (event) => this.enabled = event.target.checked, scale: "m" }), this._translations.enableSpatialReference), h("br", { key: '4ba07c8c584e34ebcfc19c125425edd6405dc9cc' }), h("div", { key: 'afe70ad8ae8d51c36bf81e7ca3ea49ba9464efde', class: "spatial-ref-component", id: "spatialRefDefn" }, this._renderFeatureServicesList(this.featureServices)), h("label", { key: '69cd00eadfbd656bb5a1a9182cbaba7a2bec970d', class: "switch-label spatial-ref-component" }, h("calcite-switch", { key: '2c1a9241d3e4e77cde61633a40c45003dcbb4052', checked: this.enableDefault, class: "spatial-ref-switch", disabled: !this.enabled, onCalciteSwitchChange: (event) => this.enableDefault = event.target.checked, scale: "m" }), this._translations.enableDefaultSpatialReference)));
+        return (h(Host, { key: 'c4d6b7debb3852da999002bd1d9394ba4a4f2da8' }, h("label", { key: 'e16a28157db4c3aece6a00460816c3394f1f9198', class: "switch-label" }, h("calcite-switch", { key: '48d3b1c12aa93c50ccf424ccaf0a810855227b8d', checked: this.enabled, class: "spatial-ref-switch", onCalciteSwitchChange: (event) => this.enabled = event.target.checked, scale: "m" }), this._translations.enableSpatialReference), h("br", { key: '0e7eb35accdccef9f17e0a24b17180d25c4f054a' }), h("div", { key: '257e130fdda5e42a8c40662f21c3d315f91562c7', class: "spatial-ref-component", id: "spatialRefDefn" }, this._renderFeatureServicesList(this.featureServices)), h("label", { key: 'd7581971bb310c6c4b0fb1015db59a359da54b90', class: "switch-label spatial-ref-component" }, h("calcite-switch", { key: '3045b179955101fc5baff8ca09cb10d0077e35ca', checked: this.enableDefault, class: "spatial-ref-switch", disabled: !this.enabled, onCalciteSwitchChange: (event) => this.enableDefault = event.target.checked, scale: "m" }), this._translations.enableDefaultSpatialReference)));
     }
     //--------------------------------------------------------------------------
     //
@@ -328,6 +342,23 @@ export class SolutionSpatialRef {
                     "text": "List of services the spatial reference should apply to"
                 },
                 "defaultValue": "[]"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: Locale to use for translation of stings in the UI"
+                },
+                "attribute": "locale",
+                "reflect": false
             }
         };
     }
@@ -450,6 +481,9 @@ export class SolutionSpatialRef {
             }, {
                 "propName": "enableDefault",
                 "methodName": "enableDefaultChanged"
+            }, {
+                "propName": "locale",
+                "methodName": "localeWatchHandler"
             }];
     }
     static get listeners() {

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

@@ -36,12 +36,26 @@ export class SolutionTemplateData {
     }
     //--------------------------------------------------------------------------
     //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
+    //--------------------------------------------------------------------------
+    //
     //  Lifecycle
     //
     //--------------------------------------------------------------------------
     constructor() {
         this.instanceid = "";
         this.itemId = "";
+        this.locale = undefined;
         this.organizationVariables = "";
         this.solutionVariables = "";
         this.varsOpen = true;
@@ -77,7 +91,7 @@ export class SolutionTemplateData {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '3e0a532158fffbba07faee43152573eb3577da84' }, h("div", { key: '5631eb64e45d31465361491e9585c8eddd04dce7', class: "solution-data-container" }, h("calcite-shell", { key: '9b065784804b86fa1c09c9d7e5f173a6ea793883', class: "light var-container", dir: "ltr" }, h("calcite-panel", { key: '254dcf1c48812c98a69bac8e7b6ca91a39eb9cff', class: "json-editor" }, h("div", { key: '86f686a03298bb06b8b855ae59a66e42cec25ad4', class: "solution-data-child-container calcite-match-height" }, h("json-editor", { key: '0549a48a16bb94ed7be3064f4b622b1a10563bfd', class: "solution-data-editor-container", instanceid: this.itemId + "|" + this.instanceid, value: this.value }))), h("calcite-shell-panel", { key: 'a3879f3d3b95d2878a5ec98265a6a120c78366f6', "height-scale": "l", position: "end", slot: "contextual-panel", "width-scale": "xs" }, h("div", { key: '4e8a2206eb7e57e8beb5e854f3cd66d7bae96101', class: this.varsOpen ? "solution-data-child-container" : "solution-data-child-container-collapsed" }, h("calcite-button", { key: '180bb9e0a1aff223625e3979930a9904dc778a1d', 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: 'a1064c394bb1a9c95493a052057bdfb2ccc7b20a', class: this.varsOpen ? "org-vars" : "org-vars display-none", id: "orgVars" }, h("solution-organization-variables", { key: '19ef108d689b875a329a22f0729f34bd3c5edbd1', value: this.organizationVariables })), h("div", { key: '3671681ffde2ef2aae1a84c608fbe08c0f4e7bcc', class: this.varsOpen ? "sol-vars" : "sol-vars display-none", id: "solVars" }, h("solution-variables", { key: '7bdbb7baedf02ff299e620741995a393c4bf976d', value: this.solutionVariables }))))))));
+        return (h(Host, { key: '3f853006c19509c8cf484d4420b3f687aaad5161' }, h("div", { key: 'f524e1ee3c8dc972779be0909372c11c26092dd0', class: "solution-data-container" }, h("calcite-shell", { key: '56797702bc53b08051360975dc529c884eb7d294', class: "light var-container", dir: "ltr" }, h("calcite-panel", { key: '6208ac7b63ab8b69bc29ad88abdb9bcdeaaa707a', class: "json-editor" }, h("div", { key: '66e99550359b5665b4dd04f794d8108e4ee34284', class: "solution-data-child-container calcite-match-height" }, h("json-editor", { key: '7a7f5afa5d424fb6099b7167f274ce211e791a56', class: "solution-data-editor-container", instanceid: this.itemId + "|" + this.instanceid, locale: this.locale, value: this.value }))), h("calcite-shell-panel", { key: '7cc8bac91bfc5be96018d005cc87be457278ed6d', "height-scale": "l", position: "end", slot: "contextual-panel", "width-scale": "xs" }, h("div", { key: '4ce0c251d30d5735781394f5c213523867205886', class: this.varsOpen ? "solution-data-child-container" : "solution-data-child-container-collapsed" }, h("calcite-button", { key: '814c8996b854102b022f7ac482498dd6aac36ec8', 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: '6b872cfc1c60870fb6262808f5d9f61cc35f0f44', class: this.varsOpen ? "org-vars" : "org-vars display-none", id: "orgVars" }, h("solution-organization-variables", { key: 'e8e9ee594b6dcb5ddaabd05c322fb33d568ac7b5', locale: this.locale, value: this.organizationVariables })), h("div", { key: '109d17a77a54a13818af6aa2a9beb92526100ea7', class: this.varsOpen ? "sol-vars" : "sol-vars display-none", id: "solVars" }, h("solution-variables", { key: '46902ed69897ed01334def99817fedafbda2e8d5', locale: this.locale, value: this.solutionVariables }))))))));
     }
     _initializing = false;
     //--------------------------------------------------------------------------
@@ -164,6 +178,23 @@ export class SolutionTemplateData {
                 "reflect": true,
                 "defaultValue": "\"\""
             },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: Locale to use for translation of stings in the UI"
+                },
+                "attribute": "locale",
+                "reflect": false
+            },
             "organizationVariables": {
                 "type": "string",
                 "mutable": true,
@@ -231,6 +262,9 @@ export class SolutionTemplateData {
         return [{
                 "propName": "itemId",
                 "methodName": "itemIdWatchHandler"
+            }, {
+                "propName": "locale",
+                "methodName": "localeWatchHandler"
             }];
     }
 }

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

@@ -23,6 +23,7 @@ import { getLocaleComponentStrings } from "../../utils/locale";
 export class SolutionVariables {
     constructor() {
         this.value = "";
+        this.locale = undefined;
         this._solutionVariables = [];
         this._translations = undefined;
     }
@@ -32,6 +33,19 @@ export class SolutionVariables {
     //
     //--------------------------------------------------------------------------
     el;
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
     valueWatchHandler() {
         this._solutionVariables = JSON.parse(this.value);
     }
@@ -50,7 +64,7 @@ export class SolutionVariables {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: 'a600c4dc88ee4ea3f9d7810695f71283f834933b' }, h("div", { key: 'c5c2abd0d19c778366c04dfd6b04f26bcb86b59b' }, h("h4", { key: '087db039abd818f71838c88ef09eafc46d18b5c8', class: "org-var-header" }, this._translations.solVariables)), h("div", { key: 'd524981a512342d18d616137c7951f7c0f3f870b', class: "container-border" }, h("calcite-tree", { key: '4630d4aa5a35d3e3a173e3aaae9b35b0dd636b4f', id: "variable-label" }, this._renderHierarchy(this._solutionVariables)))));
+        return (h(Host, { key: 'a90cdfc9a32279cb07938fc57f9dd7e38d822f6d' }, h("div", { key: '6826e3dd84034368f419ff759962a721a275dc9c' }, h("h4", { key: '5ebdf456e8c4dc006b036dc182fa75218aac0e01', class: "org-var-header" }, this._translations.solVariables)), h("div", { key: '06fc04c1e61dc1897989e3cc11df7b173f1fdb2a', class: "container-border" }, h("calcite-tree", { key: '15500194129af7440ec05dc495b060fc18f22324', id: "variable-label" }, this._renderHierarchy(this._solutionVariables)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -147,6 +161,23 @@ export class SolutionVariables {
                 "attribute": "value",
                 "reflect": true,
                 "defaultValue": "\"\""
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: Locale to use for translation of stings in the UI"
+                },
+                "attribute": "locale",
+                "reflect": false
             }
         };
     }
@@ -177,6 +208,9 @@ export class SolutionVariables {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "locale",
+                "methodName": "localeWatchHandler"
+            }, {
                 "propName": "value",
                 "methodName": "valueWatchHandler"
             }];

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

@@ -30,6 +30,19 @@ export class SpatialRef {
     //
     //--------------------------------------------------------------------------
     el;
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
     valueChanged(newValue) {
         this._spatialRef = this._createSpatialRefDisplay(newValue);
         const searchBox = document.getElementById("calcite-sr-search");
@@ -53,6 +66,7 @@ export class SpatialRef {
     constructor() {
         this.defaultWkid = 102100;
         this.disabled = false;
+        this.locale = undefined;
         this.value = this.defaultWkid.toString();
         this._cachedValue = this.defaultWkid.toString();
         this._spatialRef = undefined;
@@ -70,7 +84,7 @@ export class SpatialRef {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '1da00c18c49d769c98e236f73e648dd880df6e2a' }, h("div", { key: '61da287f6865c90a1b4b523cb13d689247255573' }, h("calcite-input", { key: 'e129b4a009fa12f9aff37384debe673dbed31774', disabled: this.disabled, id: "calcite-sr-search", onKeyUp: (evt) => this._searchInputKeyDown(evt), placeholder: this._translations.spatialReferencePlaceholder }), h("calcite-tree", { key: '125c006a62fda7fd1204c81374c119b562424e26', id: "calcite-sr-tree", slot: "children" }, this._getTreeContent()))));
+        return (h(Host, { key: '348d114f0c8c9571b4beff34a946a09b734083f9' }, h("div", { key: '2f6bb626834a50690fd523744a4c2adeddfb0f9f' }, h("calcite-input", { key: '4b3d9354f1c1983c49360eb9f3a0a921288f50c2', disabled: this.disabled, id: "calcite-sr-search", onKeyUp: (evt) => this._searchInputKeyDown(evt), placeholder: this._translations.spatialReferencePlaceholder }), h("calcite-tree", { key: '883819c424636a79957d375f0d613d32827e5ebe', id: "calcite-sr-tree", slot: "children" }, this._getTreeContent()))));
     }
     _lastHighlightedSref;
     //--------------------------------------------------------------------------
@@ -316,6 +330,23 @@ export class SpatialRef {
                 "reflect": true,
                 "defaultValue": "false"
             },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: Locale to use for translation of stings in the UI"
+                },
+                "attribute": "locale",
+                "reflect": false
+            },
             "value": {
                 "type": "string",
                 "mutable": true,
@@ -456,6 +487,9 @@ export class SpatialRef {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "locale",
+                "methodName": "localeWatchHandler"
+            }, {
                 "propName": "value",
                 "methodName": "valueChanged"
             }];

package/dist/collection/demos/crowdsource-manager.html

@@ -171,7 +171,6 @@
           }
         }]
       ];
-      //demo.hideMapOnLoad = true;
       demo.appLayout = "splitView";
       //demo.coverPageEnabled = true;
       //demo.introductionWindowEnabled = true;

package/dist/collection/demos/crowdsource-reporter.html

@@ -181,10 +181,10 @@
         // demo.mapView.ui.add(legend, "top-left");
       });
       demo.reportsHeader = "Reports";
-      demo.reportButtonText = "Report an incident";
+      //demo.reportButtonText = "Report an incident";
       demo.enableNewReports = true;
       demo.theme = "light";
-      demo.reportSubmittedMessage = "Thank you! Your request was successfully submitted";
+      //demo.reportSubmittedMessage = "Thank you! Your request was successfully submitted";
 
       //Set the zoomScale to be used when zooming to single point feature
       //demo.zoomToScale = 139596221; //World

package/dist/components/buffer-tools2.js

@@ -28,6 +28,7 @@ const BufferTools = /*@__PURE__*/ proxyCustomElement(class BufferTools extends H
         this.appearance = "text";
         this.distance = 0;
         this.geometries = [];
+        this.locale = undefined;
         this.max = undefined;
         this.min = 0;
         this.sliderTicks = 10;
@@ -74,6 +75,14 @@ const BufferTools = /*@__PURE__*/ proxyCustomElement(class BufferTools extends H
     disabledWatchHandler() {
         this._buffer();
     }
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
@@ -125,7 +134,7 @@ const BufferTools = /*@__PURE__*/ proxyCustomElement(class BufferTools extends H
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: 'fe60961aabf178fd32c4c85e8d52b9bc61a349d0' }, this.appearance === "text" ? this._getTextBoxDisplay() : this._getSliderDisplay()));
+        return (h(Host, { key: '4fbfb01938d285a2b022834f712013cea10945f9' }, this.appearance === "text" ? this._getTextBoxDisplay() : this._getSliderDisplay()));
     }
     //--------------------------------------------------------------------------
     //
@@ -290,13 +299,15 @@ const BufferTools = /*@__PURE__*/ proxyCustomElement(class BufferTools extends H
     }
     static get watchers() { return {
         "geometries": ["geometriesWatchHandler"],
-        "disabled": ["disabledWatchHandler"]
+        "disabled": ["disabledWatchHandler"],
+        "locale": ["localeWatchHandler"]
     }; }
     static get style() { return BufferToolsStyle0; }
 }, [1, "buffer-tools", {
         "appearance": [1025],
         "distance": [1026],
         "geometries": [1040],
+        "locale": [1],
         "max": [1026],
         "min": [1026],
         "sliderTicks": [1026, "slider-ticks"],
@@ -307,7 +318,8 @@ const BufferTools = /*@__PURE__*/ proxyCustomElement(class BufferTools extends H
         "getTranslatedUnit": [64]
     }, undefined, {
         "geometries": ["geometriesWatchHandler"],
-        "disabled": ["disabledWatchHandler"]
+        "disabled": ["disabledWatchHandler"],
+        "locale": ["localeWatchHandler"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {