@esri/solutions-components 0.10.39 → 0.10.41

package/dist/components/refine-selection2.js

@@ -98,6 +98,14 @@ const RefineSelection = /*@__PURE__*/ proxyCustomElement(class RefineSelection e
     //  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();
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
@@ -135,7 +143,7 @@ const RefineSelection = /*@__PURE__*/ proxyCustomElement(class RefineSelection e
      */
     render() {
         const layerPickerClass = this._enabledLayerIds.length > 1 ? "display-block" : "display-none";
-        return (h(Host, { key: 'b7322ad26466e7c710b08b1cd10edf3e82d18603' }, h("div", { key: '05289c139685611149306ade3b9217c374bf54e7', class: layerPickerClass + " padding-top-sides-1" }, h("div", { key: 'a24e1b1ffb921bb493fb4c0e06b455e564077ad2', class: "display-flex" }, h("calcite-label", { key: 'a6e25d7f0ad1a3aab589bd4731a1fbea87b08b5b', class: "font-bold width-full label-margin-0" }, h("div", { key: 'd1850cec01ff43a81dfe5d71dc0b88f4fb4de147', class: "display-flex" }, this._translations.inputLayer, h("calcite-icon", { key: 'ed94bff762eb431bef9207c1db6b9dd5f56d7132', class: "padding-start-1-2 icon", flipRtl: !(this.locale?.toLowerCase() === "he"), icon: "question", id: "refine-input-layer", scale: "s" })), h("map-layer-picker", { key: '5da6c655606a2b1ad4f723c13d0b2c5a50464029', enabledLayerIds: this._enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedIds: [this._refineLayer.layer.id], showTables: false })), h("calcite-popover", { key: '3bfe937cd5d2c8cc9a2e1b5628a86bc44b529963', closable: true, label: "", referenceElement: "refine-input-layer" }, h("span", { key: 'cc46053c7494631c07521857e90ae83dc3f440cc', class: "tooltip-message" }, this._translations.inputLayerTip)))), h("div", { key: '4ceced950b73cc06d28cac4f76d52126249bdbbd', class: "padding-1" }, h("div", { key: '5084d664578acd35c550c57d8c7a27cf97f06332', class: "padding-bottom-1" }, h("calcite-segmented-control", { key: '965f42a4b3b3c19401681be1f86ab41dcc58a24a', class: "w-100", width: "full" }, h("calcite-segmented-control-item", { key: 'dad9b9c04c8fcdda7d5cad7c044fb592b6f740bf', checked: this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, h("span", { key: '0cf895d959f14966736b22d4652f406c75af5c0e', class: "font-weight-500" }, this._translations.add)), h("calcite-segmented-control-item", { key: '6f0c8158159215d5a0929deb62c97db5058545a3', checked: !this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, h("span", { key: '77c66ccd25105c2be67178303d0652a90fa97e35', class: "font-weight-500" }, this._translations.remove)))), h("div", { key: '0e409d21bda555363c9a0e870cba3e2f9556bcbb' }, h("map-draw-tools", { key: 'd84888210ce4c31442a523dc5976fee6bd246b9c', active: true, drawMode: EDrawMode.REFINE, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: this._refineSelectionSet?.redoStack.length > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: this._refineSelectionSet?.undoStack.length > 0 })), h("br", { key: 'b66849ca294e717352e34ac647f69bef36ba9755' }), (h("calcite-list", { key: '8e13006094c5b9d5d63d467d5938e95d00e42ded', class: "list-border" }, this._getRefineSelectionSetList())))));
+        return (h(Host, { key: 'aea4bdb40d20a647b85507b5562066e9fc95643f' }, h("div", { key: 'ad152ef9fa550ad3e83bf0ee2faf228e74a0a593', class: layerPickerClass + " padding-top-sides-1" }, h("div", { key: '1d2d473ee3e272312d79a6e1e6a846e7f8930089', class: "display-flex" }, h("calcite-label", { key: 'c07ac179cd5a5f9e70ee9a4810a3b12e9db73bab', class: "font-bold width-full label-margin-0" }, h("div", { key: '191e9f753435bffd21d54902de08082e08499e9c', class: "display-flex" }, this._translations.inputLayer, h("calcite-icon", { key: '01a26439262b491a078616eec53d2e54f0429233', class: "padding-start-1-2 icon", flipRtl: !(this.locale?.toLowerCase() === "he"), icon: "question", id: "refine-input-layer", scale: "s" })), h("map-layer-picker", { key: 'a24e473d2070cd167cf85b8d3dc1f1f548474b01', enabledLayerIds: this._enabledLayerIds, locale: this.locale, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedIds: [this._refineLayer.layer.id], showTables: false })), h("calcite-popover", { key: '2b4612d32edcefe4cf7ab065e95dfac73d1a9f81', closable: true, label: "", referenceElement: "refine-input-layer" }, h("span", { key: '71623db558c11b7a7396b087f8d1bf9fadf4659d', class: "tooltip-message" }, this._translations.inputLayerTip)))), h("div", { key: 'c4e56c481333d8a7b287491409e2c0b25ea15fea', class: "padding-1" }, h("div", { key: '74086721141642031d93a9f4d8302f4fe684c4f8', class: "padding-bottom-1" }, h("calcite-segmented-control", { key: '3c241f48f3b382ea604b4077293ea672fb311b4d', class: "w-100", width: "full" }, h("calcite-segmented-control-item", { key: '99f0f4347964b29cb48e73071d7281d8126882a1', checked: this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, h("span", { key: '9317ad71a269261a59e979e138cbfd79d1e45b83', class: "font-weight-500" }, this._translations.add)), h("calcite-segmented-control-item", { key: 'fa21de5631e146fe231007bb558d3c42bb32b357', checked: !this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, h("span", { key: 'd89f90bd419f5587a66fb969db4c8164b6e7d5f8', class: "font-weight-500" }, this._translations.remove)))), h("div", { key: 'c9571fea587e25180e95cecc365ac6fe5f25e2d0' }, h("map-draw-tools", { key: 'bfe77a85d478119982581c3c6abc72c61ec7bf38', active: true, drawMode: EDrawMode.REFINE, locale: this.locale, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: this._refineSelectionSet?.redoStack.length > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: this._refineSelectionSet?.undoStack.length > 0 })), h("br", { key: '6333b619eeac52d5f8589bf006fbaa8baede51ff' }), (h("calcite-list", { key: '3909880545b784c7401f24ead3039b1b7947b699', class: "list-border" }, this._getRefineSelectionSetList())))));
     }
     //--------------------------------------------------------------------------
     //
@@ -459,6 +467,9 @@ const RefineSelection = /*@__PURE__*/ proxyCustomElement(class RefineSelection e
         }
         await this._highlightFeatures();
     }
+    static get watchers() { return {
+        "locale": ["localeWatchHandler"]
+    }; }
     static get style() { return RefineSelectionStyle0; }
 }, [0, "refine-selection", {
         "addresseeLayer": [16],
@@ -472,6 +483,8 @@ const RefineSelection = /*@__PURE__*/ proxyCustomElement(class RefineSelection e
         "_translations": [32],
         "_selectionMode": [32],
         "_refineLayer": [32]
+    }, undefined, {
+        "locale": ["localeWatchHandler"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/share-item.js

@@ -51,7 +51,7 @@ const ShareItem$1 = /*@__PURE__*/ proxyCustomElement(class ShareItem extends HTM
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: 'f75bf37744be419135dc159befbf2abed84855dc' }, h("slot", { key: '7607ea33ff10e828c2f2f7e2d3d360491ca2e482' })));
+        return (h(Host, { key: 'a8d200d4f119571b482fa8c9f87d759458157fe3' }, h("slot", { key: 'fcac9d578b04a4330016dfbb09c0a38735d7f2e7' })));
     }
     static get style() { return ShareItemStyle0; }
 }, [1, "share-item"]);

package/dist/components/solution-configuration.js

@@ -1143,6 +1143,19 @@ const SolutionConfiguration$1 = /*@__PURE__*/ proxyCustomElement(class SolutionC
     }
     //--------------------------------------------------------------------------
     //
+    //  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
     //
     //--------------------------------------------------------------------------
@@ -1150,6 +1163,7 @@ const SolutionConfiguration$1 = /*@__PURE__*/ proxyCustomElement(class SolutionC
         super();
         this.__registerHost();
         this.authentication = new UserSession({});
+        this.locale = undefined;
         this.serializedAuthentication = "";
         this.solutionItemId = "";
         this.showLoading = false;
@@ -1192,12 +1206,12 @@ const SolutionConfiguration$1 = /*@__PURE__*/ proxyCustomElement(class SolutionC
         const solutionData = state.getStoreInfo("solutionData");
         this._solutionVariables = JSON.stringify(getSolutionVariables(solutionData.templates, this._translations));
         this._organizationVariables = JSON.stringify(getOrganizationVariables(this._translations));
-        return (h(Host, { key: '08cdec33157c18874228bb7bcda82fd901945d02' }, !this._solutionIsLoaded
+        return (h(Host, { key: 'd80cc0f64b56dd3a8c09d6e024e069d24c12293d' }, !this._solutionIsLoaded
             ? h("calcite-loader", { label: '' })
-            : null, h("div", { key: 'd0879082066b862e136e13986c4794d33f454b72', class: "configuration-container" }, h("div", { key: '499fb11ca6715151d6099aa24cfc0a7514c0fa84', class: "configuration" }, h("calcite-tabs", { key: '3376e20f7d1145f6c0afb4e888f55c93e971c2b2', class: "config-tabs" }, h("calcite-tab-nav", { key: 'f35ab50ff86a62b7ba6c96c23a2541622555bdf5', slot: "tab-nav" }, h("calcite-tab-title", { key: '1ee9c1381b78a8f644c1b830a86c9b5a531f6f72' }, this._translations.definitionTab), hasServices ?
+            : null, h("div", { key: 'f24cf4b573829ccd47e7d3a7751724d08e132415', class: "configuration-container" }, h("div", { key: 'd64771a9775435e9eb5ed9aeb52449c363486376', class: "configuration" }, h("calcite-tabs", { key: 'a8aab9934676aee18425a67fbd599887c4d87f36', class: "config-tabs" }, h("calcite-tab-nav", { key: '69cbb95f6a50d9886ab97b8f3c05a00ea51b937a', slot: "tab-nav" }, h("calcite-tab-title", { key: '911bb46f0bb14981347b1d30a30ef3451184f987' }, this._translations.definitionTab), hasServices ?
             h("calcite-tab-title", null, this._translations.spatialReferenceTab) :
-            null), h("calcite-tab", { key: '0a7df1b0a81334da90d2d04a7f7867d529aaa55d', class: "config-tab", selected: true }, h("div", { key: '024773d4bd5fcf8c83af8a7a07b0193231bb2e24', class: "config-solution" }, h("div", { key: '37cea9d9565b489357aaf1c11c6fb5f7d2746cfd', class: this._treeOpen ? "config-inventory" : "config-inventory-hide" }, h("solution-contents", { id: "configInventory", key: `${this.solutionItemId}-contents`, ref: (el) => (this._solutionContentsComponent = el) })), h("calcite-button", { key: '140bcd46e2c4ca519311ae4d9ea62a5f9ac36c29', appearance: "transparent", class: "collapse-btn", "icon-start": this._treeOpen ? "chevrons-left" : "chevrons-right", id: "collapse-vars", onClick: () => this._toggleTree(), scale: "s", title: this._treeOpen ? this._translations.collapse : this._translations.expand }), h("div", { key: 'c727ebda3f2efe5dd85a5e3b3b1625b1ff56769e', class: "config-item" }, h("solution-item", { authentication: this.authentication, "item-id": this._currentEditItemId, key: `${this.solutionItemId}-item`, "organization-variables": this._organizationVariables, "solution-item-id": this.solutionItemId, "solution-variables": this._solutionVariables })))), hasServices
-            ? h("calcite-tab", { class: "config-tab" }, h("div", { class: "config-solution" }, h("solution-spatial-ref", { enableDefault: !!spatialReferenceInfo.default, enabled: spatialReferenceInfo?.enabled, featureServices: state.getStoreInfo("featureServices").map(fs => fs.name), id: "configure-solution-spatial-ref", key: `${this.solutionItemId}-spatial-ref` })))
+            null), h("calcite-tab", { key: 'db3f2b1102a7e47183904c2c17dededdfba7f863', class: "config-tab", selected: true }, h("div", { key: '7e7651392f73499e9454ccd2b5ed335d63d02db6', class: "config-solution" }, h("div", { key: '36d895fadc1e6509a16537a4628d51dd9f7153eb', class: this._treeOpen ? "config-inventory" : "config-inventory-hide" }, h("solution-contents", { id: "configInventory", key: `${this.solutionItemId}-contents`, ref: (el) => (this._solutionContentsComponent = el) })), h("calcite-button", { key: 'aa965867d04aebd46dbaae4ddd34f655dc77dd40', appearance: "transparent", class: "collapse-btn", "icon-start": this._treeOpen ? "chevrons-left" : "chevrons-right", id: "collapse-vars", onClick: () => this._toggleTree(), scale: "s", title: this._treeOpen ? this._translations.collapse : this._translations.expand }), h("div", { key: 'a02de6d666c1017f7d3ad08878ecc381d01e4632', class: "config-item" }, h("solution-item", { authentication: this.authentication, "item-id": this._currentEditItemId, key: `${this.solutionItemId}-item`, locale: this.locale, "organization-variables": this._organizationVariables, "solution-item-id": this.solutionItemId, "solution-variables": this._solutionVariables })))), hasServices
+            ? h("calcite-tab", { class: "config-tab" }, h("div", { class: "config-solution" }, h("solution-spatial-ref", { enableDefault: !!spatialReferenceInfo.default, enabled: spatialReferenceInfo?.enabled, featureServices: state.getStoreInfo("featureServices").map(fs => fs.name), id: "configure-solution-spatial-ref", key: `${this.solutionItemId}-spatial-ref`, locale: this.locale })))
             : null)))));
     }
     _solutionStoreHasChanges = false;
@@ -1674,11 +1688,13 @@ const SolutionConfiguration$1 = /*@__PURE__*/ proxyCustomElement(class SolutionC
     }
     static get watchers() { return {
         "serializedAuthentication": ["serializedAuthenticationWatchHandler"],
-        "solutionItemId": ["valueWatchHandler"]
+        "solutionItemId": ["valueWatchHandler"],
+        "locale": ["localeWatchHandler"]
     }; }
     static get style() { return SolutionConfigurationStyle0; }
 }, [0, "solution-configuration", {
         "authentication": [1040],
+        "locale": [1],
         "serializedAuthentication": [1025, "serialized-authentication"],
         "solutionItemId": [1537, "solution-item-id"],
         "showLoading": [1540, "show-loading"],
@@ -1695,7 +1711,8 @@ const SolutionConfiguration$1 = /*@__PURE__*/ proxyCustomElement(class SolutionC
         "unloadSolution": [64]
     }, [[8, "solutionItemSelected", "_solutionItemSelected"]], {
         "serializedAuthentication": ["serializedAuthenticationWatchHandler"],
-        "solutionItemId": ["valueWatchHandler"]
+        "solutionItemId": ["valueWatchHandler"],
+        "locale": ["localeWatchHandler"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/solution-contents2.js

@@ -38,7 +38,7 @@ const SolutionContents = /*@__PURE__*/ proxyCustomElement(class SolutionContents
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '756612330eb4802d2c00f86270518a22f129a559' }, h("calcite-tree", { key: 'ec6e7901373c3f3daa54ad0825fbc703034631d6' }, this.renderHierarchy(this.templateHierarchy))));
+        return (h(Host, { key: '98ca82042eb168779c0c373c9bf5136ae620ff70' }, h("calcite-tree", { key: 'c1c634c98e1a69c88c118a8f61036e04ea1b6b42' }, this.renderHierarchy(this.templateHierarchy))));
     }
     renderHierarchy(objs) {
         return objs.map((obj) => {

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

@@ -28,6 +28,7 @@ const SolutionItemAccordion$1 = /*@__PURE__*/ proxyCustomElement(class SolutionI
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.locale = undefined;
         this.templateInfos = [];
         this._sortedTemplateInfos = [];
         this._translations = undefined;
@@ -85,6 +86,14 @@ const SolutionItemAccordion$1 = /*@__PURE__*/ proxyCustomElement(class SolutionI
     //  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();
+    }
     async templateInfosWatchHandler() {
         this._types = [];
         this._sortedTemplateInfos = this._sortTemplates();
@@ -122,7 +131,7 @@ const SolutionItemAccordion$1 = /*@__PURE__*/ proxyCustomElement(class SolutionI
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '8e51f89ed52cd292aae82ed819c61ec4f1e1e5fb' }, this._getAccordion()));
+        return (h(Host, { key: '22a8a6f89fac420848c1279439e0b02121e694d9' }, this._getAccordion()));
     }
     //--------------------------------------------------------------------------
     //
@@ -281,14 +290,17 @@ const SolutionItemAccordion$1 = /*@__PURE__*/ proxyCustomElement(class SolutionI
         this._translations = messages[0];
     }
     static get watchers() { return {
+        "locale": ["localeWatchHandler"],
         "templateInfos": ["templateInfosWatchHandler"]
     }; }
     static get style() { return SolutionItemAccordionStyle0; }
 }, [1, "solution-item-accordion", {
+        "locale": [1],
         "templateInfos": [16],
         "_sortedTemplateInfos": [32],
         "_translations": [32]
     }, undefined, {
+        "locale": ["localeWatchHandler"],
         "templateInfos": ["templateInfosWatchHandler"]
     }]);
 function defineCustomElement$1() {

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

@@ -19,6 +19,7 @@ const SolutionItemDetails = /*@__PURE__*/ proxyCustomElement(class SolutionItemD
         super();
         this.__registerHost();
         this.itemId = "";
+        this.locale = undefined;
         this.itemDetails = {
             accessInformation: "",
             description: "",
@@ -35,6 +36,19 @@ const SolutionItemDetails = /*@__PURE__*/ proxyCustomElement(class SolutionItemD
     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();
+    }
+    //--------------------------------------------------------------------------
+    //
     //  Lifecycle
     //
     //--------------------------------------------------------------------------
@@ -56,7 +70,7 @@ const SolutionItemDetails = /*@__PURE__*/ proxyCustomElement(class SolutionItemD
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: 'fd7cc19c2f682b43c71d43d1ec1313348345b415' }, h("div", { key: 'd38fbcb57a2cf536b99a50d73f7cb67791774419', class: "parent-container" }, h("div", { key: 'e6b97716b8ae90de71af758b07b055adc6d2a4d4', class: "inputBottomSeparation" }, h("calcite-input", { key: '6bb7bc4c0cb1eb082a3862582e2a1c72c8499d48', id: "item-title", value: this.itemDetails.title })), h("div", { key: 'daa80a28b1ee9a282048d57c3d1583fb0c1bd6c4', class: "inputBottomSeparation" }, h("input", { key: 'afc61173cfa6545e688775b0aa439b11cee064ca', 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: '8bdedcdf27d0ee7d0db030404940a4a6c7f6f586', class: "font-size--3 btn-link inline-block trailer-quarter", onClick: () => this._getThumbnail() }, h("svg", { key: 'e08bd937cdadd627a3a618a112cf1e617718deb4', class: "icon-inline icon-inline--on-left", height: "16", viewBox: "0 0 16 16", width: "16" }, h("path", { key: '6047587bce5ffa4b6530c545d36f78a7f9deeebc', 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: '44f12983273cfcda9720f34daf4bfa85952de2f1', class: "flex" }, h("div", { key: 'cb5d60f3164874dfc964b5727be89c7a37c31dec', class: "img-container", ref: (el) => (this.thumbnailContainer = el) }, h("img", { key: '0b1c39af99a3ecb3e558a77bd91ed0a751756e32', class: "scale-down", height: "133", id: "item-thumbnail", ref: (el) => (this.thumbnail = el), width: "200" })), h("div", { key: '751954b3200fe4133dca864212aba924bb547817', class: "snippet-count-container" }, h("calcite-input", { key: '071d1595f9b71b45ed12ee3cff8b5613e96acae7', id: "item-snippet", maxLength: 250, type: "textarea", value: this.itemDetails.snippet }), h("label", { key: '69238efe97f605880cde5f59dd967414c08b94a2', class: "font-size--3", id: "item-snippet-count", ref: (el) => (this.itemSnippetCount = el) })))), h("calcite-label", { key: 'd94607358c364fba61bc781b79f4919f50082db2' }, this._translations.description, h("label", { key: 'dbc9f48ee0ca4ad0150629635d027998b17101af', id: "item-description-label" }, h("calcite-input", { key: '152612af16b43f8ed4ad98405c885c11fec6cad7', id: "item-description", type: "textarea", value: this.itemDetails.description }))), h("calcite-label", { key: '0bec1e2c5464da93ebd49f0790cd573ef28e6e00' }, this._translations.tags, h("label", { key: '03957c08d3a9bc3a2707e65ae3a8d2870449b54f', id: "item-tags-label" }, h("calcite-input", { key: '690cb769d8bb784ef33d30f43d4abb3b8b836894', 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, { key: '9a0ddf363cb5e8abc5cbfd45ec0958befd81415d' }, h("div", { key: '0efb572f551fe4962ea9114bd32dc2004d47e00a', class: "parent-container" }, h("div", { key: '57ba57b956322c3339ea9265640def266717493b', class: "inputBottomSeparation" }, h("calcite-input", { key: 'e359cea6b2e94823970bbf8beb93e117963fa730', id: "item-title", value: this.itemDetails.title })), h("div", { key: 'c7b490a6f1f64ec2b10e8796ad3826d88e25280c', class: "inputBottomSeparation" }, h("input", { key: '776e1efb6ee1e29e75727f984165fa77bc36515d', 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: '12ece37e4d8ae802cb4fc2dbd3e1843496c674cb', class: "font-size--3 btn-link inline-block trailer-quarter", onClick: () => this._getThumbnail() }, h("svg", { key: '5301bac0dd37771122384b968aca05eb9a714a12', class: "icon-inline icon-inline--on-left", height: "16", viewBox: "0 0 16 16", width: "16" }, h("path", { key: 'a73dbc1d758fa28afe87dfc36efb5085f115b09c', 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: 'c07d1d3b4f38672855b2a4f3cfd66b91d85ad050', class: "flex" }, h("div", { key: '7de852550f467b8bb0bd8fa87c72552747d7397b', class: "img-container", ref: (el) => (this.thumbnailContainer = el) }, h("img", { key: '7111cafeabac088b5ff729eed71746966ea66ae2', class: "scale-down", height: "133", id: "item-thumbnail", ref: (el) => (this.thumbnail = el), width: "200" })), h("div", { key: '4b0be864e8c38b9a8185ba301582a742cbf8188a', class: "snippet-count-container" }, h("calcite-input", { key: '9e307dc8a67f77dc61e0deeaf3aa528007921b1b', id: "item-snippet", maxLength: 250, type: "textarea", value: this.itemDetails.snippet }), h("label", { key: '83c0d63adc182afcb83f45bcbcec778552768b65', class: "font-size--3", id: "item-snippet-count", ref: (el) => (this.itemSnippetCount = el) })))), h("calcite-label", { key: '1e17c1ae545adb010e216ac566e9cba5eec1fc1a' }, this._translations.description, h("label", { key: 'c0e125cd881b013af6da14de78635f9922163e39', id: "item-description-label" }, h("calcite-input", { key: '1cf2cb27f67edfee86fc9a36ae296f81ef6c4429', id: "item-description", type: "textarea", value: this.itemDetails.description }))), h("calcite-label", { key: '1f61dee7f09260a0277af8a8e3d620e229ce4225' }, this._translations.tags, h("label", { key: '73820279fa0134328f24741857e028c89b5caebc', id: "item-tags-label" }, h("calcite-input", { key: '88dc8f7cd156dfa5f52ae8412241c2f0bfca357c', 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();
@@ -201,15 +215,21 @@ const SolutionItemDetails = /*@__PURE__*/ proxyCustomElement(class SolutionItemD
         const translations = await getLocaleComponentStrings(this.el);
         this._translations = translations[0];
     }
+    static get watchers() { return {
+        "locale": ["localeWatchHandler"]
+    }; }
     static get style() { return SolutionItemDetailsStyle0; }
 }, [0, "solution-item-details", {
         "itemId": [1537, "item-id"],
+        "locale": [1],
         "itemDetails": [32],
         "itemEdit": [32],
         "_translations": [32],
         "thumbnail": [32],
         "thumbnailContainer": [32]
-    }, [[0, "calciteInputInput", "inputReceivedHandler"]]]);
+    }, [[0, "calciteInputInput", "inputReceivedHandler"]], {
+        "locale": ["localeWatchHandler"]
+    }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

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

@@ -26,7 +26,7 @@ const SolutionItemIcon = /*@__PURE__*/ proxyCustomElement(class SolutionItemIcon
      * Renders the component.
      */
     render() {
-        return h("div", { key: '17d5be934c3f22a38a9b277f4b76790e616b3335', title: this.type }, h("img", { key: '3c42dd44b54c18a4a960669fc28330efcf23cab1', class: "item-type-icon item-type-icon-margin", height: "16", src: this._getIconUrl(this.type, this.typeKeywords), width: "16" }));
+        return h("div", { key: 'cc13e7bfc0a58ca1727651c3c31b0dc4e50f716a', title: this.type }, h("img", { key: '76808f6a3ced35a15626d4a4d30e7a2b8185d8d6', class: "item-type-icon item-type-icon-margin", height: "16", src: this._getIconUrl(this.type, this.typeKeywords), width: "16" }));
     }
     //--------------------------------------------------------------------------
     //

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") {