@esri/solutions-components 0.10.38 → 0.10.40

package/dist/components/solution-item-sharing2.js

@@ -19,14 +19,28 @@ const SolutionItemSharing = /*@__PURE__*/ proxyCustomElement(class SolutionItemS
         this.__registerHost();
         this.__attachShadow();
         this.groupId = "";
+        this.locale = undefined;
         this._translations = undefined;
         this.sharing = [];
     }
     get el() { return this; }
+    //--------------------------------------------------------------------------
+    //
+    //  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
@@ -42,7 +56,7 @@ const SolutionItemSharing = /*@__PURE__*/ proxyCustomElement(class SolutionItemS
      * 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))));
     }
     //--------------------------------------------------------------------------
     //
@@ -126,16 +140,19 @@ const SolutionItemSharing = /*@__PURE__*/ proxyCustomElement(class SolutionItemS
         this._translations = translations[0];
     }
     static get watchers() { return {
-        "groupId": ["itemIdWatchHandler"]
+        "groupId": ["itemIdWatchHandler"],
+        "locale": ["localeWatchHandler"]
     }; }
     static get style() { return SolutionItemSharingStyle0; }
 }, [1, "solution-item-sharing", {
         "groupId": [1537, "group-id"],
+        "locale": [1],
         "_translations": [32],
         "sharing": [32],
         "getShareInfo": [64]
     }, undefined, {
-        "groupId": ["itemIdWatchHandler"]
+        "groupId": ["itemIdWatchHandler"],
+        "locale": ["localeWatchHandler"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/solution-item2.js

@@ -48,6 +48,7 @@ const SolutionItem = /*@__PURE__*/ proxyCustomElement(class SolutionItem extends
         this.__registerHost();
         this.authentication = undefined;
         this.itemId = "";
+        this.locale = undefined;
         this.solutionVariables = "";
         this.organizationVariables = "";
         this.itemType = undefined;
@@ -60,6 +61,19 @@ const SolutionItem = /*@__PURE__*/ proxyCustomElement(class SolutionItem extends
     }
     //--------------------------------------------------------------------------
     //
+    //  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
     //
     //--------------------------------------------------------------------------
@@ -73,7 +87,7 @@ const SolutionItem = /*@__PURE__*/ proxyCustomElement(class SolutionItem extends
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '25113cc21fc2c6ffa30daff180f2ee95bfb1c619' }, h("div", { key: '30c87a13e5fe1c39a521401cb3d63677f412629b', class: "configuration-container" }, h("div", { key: '41f787b8c0964c3aa5b6d629ca73aa271edef540', class: "configuration" }, this._showGroupTabs(this.itemType === "Group"), this._showItemTabs(this.itemType !== "Group")))));
+        return (h(Host, { key: '3fe864ad8d8bcf7bc276feafc60ce7e9fd7e803b' }, h("div", { key: '90f327cc0736d8c9c13bf8b65d69e3835b4dae7b', class: "configuration-container" }, h("div", { key: '10536f9927ba2b5745f1b5ae3b154a3aac902d47', class: "configuration" }, this._showGroupTabs(this.itemType === "Group"), this._showItemTabs(this.itemType !== "Group")))));
     }
     //--------------------------------------------------------------------------
     //
@@ -101,7 +115,7 @@ const SolutionItem = /*@__PURE__*/ proxyCustomElement(class SolutionItem extends
      * @param visible Should the current tab be visible
      */
     _showGroupTabs(visible) {
-        return h("calcite-tabs", { class: "config-tabs", style: { display: visible ? "inherit" : "none" } }, h("calcite-tab-nav", { slot: "tab-nav" }, h("calcite-tab-title", null, this._translations.groupDetailsTab), h("calcite-tab-title", null, this._translations.sharingTab)), h("calcite-tab", { class: "config-tab", id: "group-tab", selected: true }, h("solution-item-details", { "item-id": this.itemId })), h("calcite-tab", { class: "config-tab", id: "share-tab" }, h("solution-item-sharing", { "group-id": this.itemId })));
+        return h("calcite-tabs", { class: "config-tabs", style: { display: visible ? "inherit" : "none" } }, h("calcite-tab-nav", { slot: "tab-nav" }, h("calcite-tab-title", null, this._translations.groupDetailsTab), h("calcite-tab-title", null, this._translations.sharingTab)), h("calcite-tab", { class: "config-tab", id: "group-tab", selected: true }, h("solution-item-details", { "item-id": this.itemId, locale: this.locale })), h("calcite-tab", { class: "config-tab", id: "share-tab" }, h("solution-item-sharing", { "group-id": this.itemId, locale: this.locale })));
     }
     /**
      * Render tabs based for an items details, data, and props section from a template
@@ -109,7 +123,7 @@ const SolutionItem = /*@__PURE__*/ proxyCustomElement(class SolutionItem extends
      * @param visible Should the current tab be visible
      */
     _showItemTabs(visible) {
-        return h("calcite-tabs", { class: "config-tabs", style: { display: visible ? "inherit" : "none" } }, h("calcite-tab-nav", { slot: "tab-nav" }, h("calcite-tab-title", null, this._translations.itemDetailsTab), h("calcite-tab-title", null, this._translations.dataTab), h("calcite-tab-title", null, this._translations.propertiesTab), h("calcite-tab-title", null, this._translations.resourcesTab)), h("calcite-tab", { class: "config-tab", selected: true }, h("solution-item-details", { "item-id": this.itemId })), h("calcite-tab", { class: "config-tab", id: "data-tab" }, h("solution-template-data", { instanceid: "data", "item-id": this.itemId, "organization-variables": this.organizationVariables, "solution-variables": this.solutionVariables })), h("calcite-tab", { class: "config-tab", id: "props-tab" }, h("solution-template-data", { instanceid: "properties", "item-id": this.itemId, "organization-variables": this.organizationVariables, "solution-variables": this.solutionVariables })), h("calcite-tab", { class: "config-tab", id: "resources-tab" }, h("solution-resource-item", { authentication: this.authentication, class: "solutions-resource-container", "item-id": this.itemId })));
+        return h("calcite-tabs", { class: "config-tabs", style: { display: visible ? "inherit" : "none" } }, h("calcite-tab-nav", { slot: "tab-nav" }, h("calcite-tab-title", null, this._translations.itemDetailsTab), h("calcite-tab-title", null, this._translations.dataTab), h("calcite-tab-title", null, this._translations.propertiesTab), h("calcite-tab-title", null, this._translations.resourcesTab)), h("calcite-tab", { class: "config-tab", selected: true }, h("solution-item-details", { "item-id": this.itemId, locale: this.locale })), h("calcite-tab", { class: "config-tab", id: "data-tab" }, h("solution-template-data", { instanceid: "data", "item-id": this.itemId, locale: this.locale, "organization-variables": this.organizationVariables, "solution-variables": this.solutionVariables })), h("calcite-tab", { class: "config-tab", id: "props-tab" }, h("solution-template-data", { instanceid: "properties", "item-id": this.itemId, locale: this.locale, "organization-variables": this.organizationVariables, "solution-variables": this.solutionVariables })), h("calcite-tab", { class: "config-tab", id: "resources-tab" }, h("solution-resource-item", { authentication: this.authentication, class: "solutions-resource-container", "item-id": this.itemId, locale: this.locale })));
     }
     /**
      * Fetches the component's translations
@@ -121,18 +135,21 @@ const SolutionItem = /*@__PURE__*/ proxyCustomElement(class SolutionItem extends
         this._translations = translations[0];
     }
     static get watchers() { return {
-        "itemId": ["itemIdWatchHandler"]
+        "itemId": ["itemIdWatchHandler"],
+        "locale": ["localeWatchHandler"]
     }; }
     static get style() { return SolutionItemStyle0; }
 }, [0, "solution-item", {
         "authentication": [1040],
         "itemId": [1537, "item-id"],
+        "locale": [1],
         "solutionVariables": [1537, "solution-variables"],
         "organizationVariables": [1537, "organization-variables"],
         "itemType": [32],
         "_translations": [32]
     }, undefined, {
-        "itemId": ["itemIdWatchHandler"]
+        "itemId": ["itemIdWatchHandler"],
+        "locale": ["localeWatchHandler"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/solution-organization-variables2.js

@@ -18,11 +18,25 @@ const SolutionOrganizationVariables = /*@__PURE__*/ proxyCustomElement(class Sol
         this.__registerHost();
         this.__attachShadow();
         this.organizationVariableSelected = createEvent(this, "organizationVariableSelected", 7);
+        this.locale = undefined;
         this.value = "";
         this._organizationVariables = [];
         this._translations = undefined;
     }
     get el() { return this; }
+    //--------------------------------------------------------------------------
+    //
+    //  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);
     }
@@ -41,7 +55,7 @@ const SolutionOrganizationVariables = /*@__PURE__*/ proxyCustomElement(class Sol
      * 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)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -97,14 +111,17 @@ const SolutionOrganizationVariables = /*@__PURE__*/ proxyCustomElement(class Sol
         this._translations = translations[0];
     }
     static get watchers() { return {
+        "locale": ["localeWatchHandler"],
         "value": ["valueWatchHandler"]
     }; }
     static get style() { return SolutionOrganizationVariablesStyle0; }
 }, [1, "solution-organization-variables", {
+        "locale": [1],
         "value": [1537],
         "_organizationVariables": [32],
         "_translations": [32]
     }, undefined, {
+        "locale": ["localeWatchHandler"],
         "value": ["valueWatchHandler"]
     }]);
 function defineCustomElement() {

package/dist/components/solution-resource-item2.js

@@ -30,11 +30,17 @@ const SolutionResourceItem = /*@__PURE__*/ proxyCustomElement(class SolutionReso
         this.__attachShadow();
         this.authentication = undefined;
         this.itemId = "";
+        this.locale = undefined;
         this.resourceFilePaths = [];
         this.resources = [];
         this._translations = undefined;
     }
     get el() { return this; }
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
     itemIdWatchHandler() {
         const item = state.getItemInfo(this.itemId);
         this.resourceFilePaths = item.resourceFilePaths;
@@ -43,6 +49,14 @@ const SolutionResourceItem = /*@__PURE__*/ proxyCustomElement(class SolutionReso
         // 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
@@ -59,7 +73,7 @@ const SolutionResourceItem = /*@__PURE__*/ proxyCustomElement(class SolutionReso
      */
     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 = {};
     //--------------------------------------------------------------------------
@@ -281,17 +295,20 @@ const SolutionResourceItem = /*@__PURE__*/ proxyCustomElement(class SolutionReso
         this._translations = translations[0];
     }
     static get watchers() { return {
-        "itemId": ["itemIdWatchHandler"]
+        "itemId": ["itemIdWatchHandler"],
+        "locale": ["localeWatchHandler"]
     }; }
     static get style() { return SolutionResourceItemStyle0; }
 }, [1, "solution-resource-item", {
         "authentication": [1040],
         "itemId": [1537, "item-id"],
+        "locale": [1],
         "resourceFilePaths": [32],
         "resources": [32],
         "_translations": [32]
     }, undefined, {
-        "itemId": ["itemIdWatchHandler"]
+        "itemId": ["itemIdWatchHandler"],
+        "locale": ["localeWatchHandler"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/solution-spatial-ref2.js

@@ -27,6 +27,7 @@ const SolutionSpatialRef = /*@__PURE__*/ proxyCustomElement(class SolutionSpatia
         this.enabled = false;
         this.enableDefault = false;
         this.featureServices = [];
+        this.locale = undefined;
         this._translations = undefined;
     }
     get el() { return this; }
@@ -38,6 +39,19 @@ const SolutionSpatialRef = /*@__PURE__*/ proxyCustomElement(class SolutionSpatia
     }
     //--------------------------------------------------------------------------
     //
+    //  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
     //
     //--------------------------------------------------------------------------
@@ -50,7 +64,7 @@ const SolutionSpatialRef = /*@__PURE__*/ proxyCustomElement(class SolutionSpatia
     }
     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)));
     }
     //--------------------------------------------------------------------------
     //
@@ -249,18 +263,21 @@ const SolutionSpatialRef = /*@__PURE__*/ proxyCustomElement(class SolutionSpatia
     }
     static get watchers() { return {
         "enabled": ["enabledChanged"],
-        "enableDefault": ["enableDefaultChanged"]
+        "enableDefault": ["enableDefaultChanged"],
+        "locale": ["localeWatchHandler"]
     }; }
     static get style() { return SolutionSpatialRefStyle0; }
 }, [0, "solution-spatial-ref", {
         "enabled": [1540],
         "enableDefault": [1540, "enable-default"],
         "featureServices": [1040],
+        "locale": [1],
         "_translations": [32],
         "_testAccess": [64]
     }, [[8, "solutionStoreHasChanges", "solutionStoreHasChanges"]], {
         "enabled": ["enabledChanged"],
-        "enableDefault": ["enableDefaultChanged"]
+        "enableDefault": ["enableDefaultChanged"],
+        "locale": ["localeWatchHandler"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/solution-template-data2.js

@@ -36,6 +36,19 @@ const SolutionTemplateData = /*@__PURE__*/ proxyCustomElement(class SolutionTemp
     }
     //--------------------------------------------------------------------------
     //
+    //  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
     //
     //--------------------------------------------------------------------------
@@ -44,6 +57,7 @@ const SolutionTemplateData = /*@__PURE__*/ proxyCustomElement(class SolutionTemp
         this.__registerHost();
         this.instanceid = "";
         this.itemId = "";
+        this.locale = undefined;
         this.organizationVariables = "";
         this.solutionVariables = "";
         this.varsOpen = true;
@@ -79,7 +93,7 @@ const SolutionTemplateData = /*@__PURE__*/ proxyCustomElement(class SolutionTemp
      * 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;
     //--------------------------------------------------------------------------
@@ -118,19 +132,22 @@ const SolutionTemplateData = /*@__PURE__*/ proxyCustomElement(class SolutionTemp
         this._translations = translations[0];
     }
     static get watchers() { return {
-        "itemId": ["itemIdWatchHandler"]
+        "itemId": ["itemIdWatchHandler"],
+        "locale": ["localeWatchHandler"]
     }; }
     static get style() { return SolutionTemplateDataStyle0; }
 }, [0, "solution-template-data", {
         "instanceid": [1537],
         "itemId": [1537, "item-id"],
+        "locale": [1],
         "organizationVariables": [1537, "organization-variables"],
         "solutionVariables": [1537, "solution-variables"],
         "varsOpen": [1540, "vars-open"],
         "_translations": [32],
         "value": [32]
     }, undefined, {
-        "itemId": ["itemIdWatchHandler"]
+        "itemId": ["itemIdWatchHandler"],
+        "locale": ["localeWatchHandler"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/solution-variables2.js

@@ -20,10 +20,24 @@ const SolutionVariables = /*@__PURE__*/ proxyCustomElement(class SolutionVariabl
         this.__attachShadow();
         this.solutionVariableSelected = createEvent(this, "solutionVariableSelected", 7);
         this.value = "";
+        this.locale = undefined;
         this._solutionVariables = [];
         this._translations = undefined;
     }
     get el() { return this; }
+    //--------------------------------------------------------------------------
+    //
+    //  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);
     }
@@ -42,7 +56,7 @@ const SolutionVariables = /*@__PURE__*/ proxyCustomElement(class SolutionVariabl
      * 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)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -109,14 +123,17 @@ const SolutionVariables = /*@__PURE__*/ proxyCustomElement(class SolutionVariabl
         this._translations = translations[0];
     }
     static get watchers() { return {
+        "locale": ["localeWatchHandler"],
         "value": ["valueWatchHandler"]
     }; }
     static get style() { return SolutionVariablesStyle0; }
 }, [1, "solution-variables", {
         "value": [1537],
+        "locale": [1],
         "_solutionVariables": [32],
         "_translations": [32]
     }, undefined, {
+        "locale": ["localeWatchHandler"],
         "value": ["valueWatchHandler"]
     }]);
 function defineCustomElement() {

package/dist/components/spatial-ref.js

@@ -21059,6 +21059,19 @@ const SpatialRefStyle0 = spatialRefCss;
 
 const SpatialRef$1 = /*@__PURE__*/ proxyCustomElement(class SpatialRef extends HTMLElement {
     get el() { return this; }
+    //--------------------------------------------------------------------------
+    //
+    //  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");
@@ -21085,6 +21098,7 @@ const SpatialRef$1 = /*@__PURE__*/ proxyCustomElement(class SpatialRef extends H
         this.spatialReferenceChange = createEvent(this, "spatialReferenceChange", 7);
         this.defaultWkid = 102100;
         this.disabled = false;
+        this.locale = undefined;
         this.value = this.defaultWkid.toString();
         this._cachedValue = this.defaultWkid.toString();
         this._spatialRef = undefined;
@@ -21102,7 +21116,7 @@ const SpatialRef$1 = /*@__PURE__*/ proxyCustomElement(class SpatialRef extends H
      * 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;
     //--------------------------------------------------------------------------
@@ -21300,12 +21314,14 @@ const SpatialRef$1 = /*@__PURE__*/ proxyCustomElement(class SpatialRef extends H
         this._translations = translations[0];
     }
     static get watchers() { return {
+        "locale": ["localeWatchHandler"],
         "value": ["valueChanged"]
     }; }
     static get style() { return SpatialRefStyle0; }
 }, [0, "spatial-ref", {
         "defaultWkid": [1538, "default-wkid"],
         "disabled": [1540],
+        "locale": [1],
         "value": [1537],
         "_cachedValue": [32],
         "_spatialRef": [32],
@@ -21315,6 +21331,7 @@ const SpatialRef$1 = /*@__PURE__*/ proxyCustomElement(class SpatialRef extends H
         "getSpatialRef": [64],
         "wkidToDisplay": [64]
     }, undefined, {
+        "locale": ["localeWatchHandler"],
         "value": ["valueChanged"]
     }]);
 function defineCustomElement$1() {

package/dist/esm/basemap-gallery_7.entry.js

@@ -257,7 +257,7 @@ const FloorFilter = class {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '7890927db517fe8e1133fce3e0fe977a441f2abf' }, h("div", { key: '34ad695eb04dd20a0b9893817a33df5020de7da1', ref: (el) => { this._floorFilterElement = el; } })));
+        return (h(Host, { key: '51da7a656e7f56ecc8cc4093d3dab856f77b5c7a' }, h("div", { key: 'd2fda7047f09a673216484f5c202f039fca20108', ref: (el) => { this._floorFilterElement = el; } })));
     }
     /**
      * StencilJS: Called once just after the component is first loaded.
@@ -424,7 +424,7 @@ const MapFullscreen = class {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '350ebb01c52631c9441b6554f5b8e26f8ca1418e' }, h("div", { key: 'b09344b721da2cc18b74fb21f8017446ba5baa03', class: "fullscreen-widget", ref: (el) => { this._fullscreenElement = el; } })));
+        return (h(Host, { key: '28d49dabefbb64024028bd6d7b7a104fafd81eae' }, h("div", { key: '443af45e3ce2c83a797ebfaac9e442d57d05c34c', class: "fullscreen-widget", ref: (el) => { this._fullscreenElement = el; } })));
     }
     /**
      * StencilJS: Called just after the component updates.
@@ -551,7 +551,7 @@ const MapLegend = class {
      * StencilJS: Renders the component.
      */
     render() {
-        return (h(Host, { key: '2c5cfbfd4048347ace5ff3cf17d411e85454be7a' }, h("div", { key: '3927ef8af3a4a93fbd558480a96f982ca5b477a2', ref: (el) => { this._legendElement = el; } })));
+        return (h(Host, { key: '6b8c415650cb42727d7f09d3d4d92f8aebc7526b' }, h("div", { key: '36fd4c49d4ab19411fe309822e5b87104736282a', ref: (el) => { this._legendElement = el; } })));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -609,6 +609,7 @@ const MapPicker = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.mapInfoChange = createEvent(this, "mapInfoChange", 7);
+        this.locale = undefined;
         this.mapInfos = [];
         this.isMapLayout = undefined;
         this._mapListExpanded = false;
@@ -643,6 +644,14 @@ const MapPicker = class {
             this.mapInfoChange.emit(v);
         }
     }
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
     /**
      * Called each time the mapInfos prop is changed.
      */
@@ -702,7 +711,7 @@ const MapPicker = class {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '84cc43e195045e28fe01e35fe2f6f06cbe28fefd' }, this._getToolbar(), this._getMapNameList(this._mapListExpanded)));
+        return (h(Host, { key: 'c6f59dfac8acfc06775a3a38cefa1fd2c2708722' }, this._getToolbar(), this._getMapNameList(this._mapListExpanded)));
     }
     /**
      * Called once after the component has loaded
@@ -788,6 +797,7 @@ const MapPicker = class {
     }
     static get watchers() { return {
         "_webMapInfo": ["_webMapInfoWatchHandler"],
+        "locale": ["localeWatchHandler"],
         "mapInfos": ["mapInfosWatchHandler"]
     }; }
 };
@@ -886,7 +896,7 @@ const MapSearch = class {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '482d8d891f8c6905eefee8b26f0837a4c7c2e525' }, h("div", { key: '9a3993ab8a7506299cf2bdbfab23b47ac7fe3037', class: "search-widget", ref: (el) => { this._searchElement = el; } })));
+        return (h(Host, { key: '3464734a35e8cf89f033d508d21831eef665c9b2' }, h("div", { key: 'bf79025ba97e9f26681a6c6200dcdbc2ea227ce8', class: "search-widget", ref: (el) => { this._searchElement = el; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -1009,6 +1019,7 @@ const MapTools = class {
         this.enableSingleExpand = undefined;
         this.homeZoomToolsSize = "m";
         this.layout = "vertical";
+        this.locale = undefined;
         this.mapView = undefined;
         this.mapWidgetsSize = "m";
         this.position = "top-right";
@@ -1064,6 +1075,14 @@ const MapTools = class {
     //  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();
+    }
     /**
      * When the mapView loads check if it supports floor awareness
      */
@@ -1184,7 +1203,7 @@ const MapTools = class {
         const toolMarginClass = this.enableSingleExpand ? "margin-top-1-2" : "";
         const toolOrder = this.toolOrder ? this.toolOrder : ["legend", "search", "fullscreen", "floorfilter"];
         const shadowClass = this.stackTools ? "box-shadow" : "";
-        return (h(Host, { key: '224b99c53e7f8ac9c072efbd2c2093c6c9684a9a' }, h("div", { key: 'ead56063c6aa28146d4c50044b6e7c98fd2ed1ab', class: containerClass }, this.enableSingleExpand ? (h("div", { class: "box-shadow" }, this._getActionGroup(toggleIcon, false, expandTip, () => this._toggleTools()))) : undefined, h("div", { key: '3fd7a2bd6225c10b89e282d4521486ad7eb5802a', class: `${toolMarginClass} ${shadowClass} ${toolsClass}` }, this._getMapWidgets(toolOrder))), h("basemap-gallery", { key: '43063099ee4b3a72d96b2ae6e4ca750dff109ae2', basemapConfig: this.basemapConfig, class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { key: '5c149ea67f2a2450864e968a50acce565d95e0b6', class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, resultGraphicEnabled: true, searchConfiguration: this.searchConfiguration }), h("map-legend", { key: 'd3add3a5f820c5d654fec793d3e6e46b6a8919a3', class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), h("map-fullscreen", { key: 'e18a3a5d021d76e7c8fa9ecf3903105d5a43bed2', class: fullscreenClass, mapView: this.mapView, onFullscreenStateChange: (evt) => this._fullscreenStateChange(evt.detail), ref: (el) => { this._fullscreenElement = el; } }), h("floor-filter", { key: 'cb5d92e503248818e9627ba4ee8d70c81495599d', class: floorFilterClass, enabled: this.enableFloorFilter, mapView: this.mapView, ref: (el) => { this._floorFilterElement = el; } })));
+        return (h(Host, { key: '6287cfedcd109c621812cc823ee75487a166f7c0' }, h("div", { key: '6f3f1a8ff1fb9c1d671be044143eec4ca6708062', class: containerClass }, this.enableSingleExpand ? (h("div", { class: "box-shadow" }, this._getActionGroup(toggleIcon, false, expandTip, () => this._toggleTools()))) : undefined, h("div", { key: '156511461a6b6c4a98b47c62460754405f101574', class: `${toolMarginClass} ${shadowClass} ${toolsClass}` }, this._getMapWidgets(toolOrder))), h("basemap-gallery", { key: '7975fa8c2db0c3fc10534d538bc593f8543b330e', basemapConfig: this.basemapConfig, class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { key: 'd7df2b0010bc62b9d2a9601018a962d3e8df2561', class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, resultGraphicEnabled: true, searchConfiguration: this.searchConfiguration }), h("map-legend", { key: '1bd19b87e9def0b81251aa422ef0024a938bd93d', class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), h("map-fullscreen", { key: 'c5a68a86acc284af7659f467f2fe98c6168b619e', class: fullscreenClass, mapView: this.mapView, onFullscreenStateChange: (evt) => this._fullscreenStateChange(evt.detail), ref: (el) => { this._fullscreenElement = el; } }), h("floor-filter", { key: '8d596ddeb353ac85635aa3ef550708e4ec4d5706', class: floorFilterClass, enabled: this.enableFloorFilter, mapView: this.mapView, ref: (el) => { this._floorFilterElement = el; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -1367,6 +1386,7 @@ const MapTools = class {
         this._translations = messages[0];
     }
     static get watchers() { return {
+        "locale": ["localeWatchHandler"],
         "mapView": ["mapViewWatchHandler"],
         "_showBasemapWidget": ["_showBasemapWidgetWatchHandler"],
         "_showFloorFilter": ["_showFloorFilterWatchHandler"],