@esri/solutions-components 0.10.39 → 0.10.41

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"],

package/dist/esm/buffer-tools_3.entry.js

@@ -26,6 +26,7 @@ const BufferTools = class {
         this.appearance = "text";
         this.distance = 0;
         this.geometries = [];
+        this.locale = undefined;
         this.max = undefined;
         this.min = 0;
         this.sliderTicks = 10;
@@ -72,6 +73,14 @@ const BufferTools = class {
     disabledWatchHandler() {
         this._buffer();
     }
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
@@ -123,7 +132,7 @@ const BufferTools = class {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: 'fe60961aabf178fd32c4c85e8d52b9bc61a349d0' }, this.appearance === "text" ? this._getTextBoxDisplay() : this._getSliderDisplay()));
+        return (h(Host, { key: '4fbfb01938d285a2b022834f712013cea10945f9' }, this.appearance === "text" ? this._getTextBoxDisplay() : this._getSliderDisplay()));
     }
     //--------------------------------------------------------------------------
     //
@@ -288,7 +297,8 @@ const BufferTools = class {
     }
     static get watchers() { return {
         "geometries": ["geometriesWatchHandler"],
-        "disabled": ["disabledWatchHandler"]
+        "disabled": ["disabledWatchHandler"],
+        "locale": ["localeWatchHandler"]
     }; }
 };
 BufferTools.style = BufferToolsStyle0;
@@ -362,6 +372,7 @@ const MapDrawTools = class {
         this.drawMode = EDrawMode.SKETCH;
         this.editGraphicsEnabled = true;
         this.graphics = undefined;
+        this.locale = undefined;
         this.mapView = undefined;
         this.pointSymbol = undefined;
         this.polylineSymbol = undefined;
@@ -422,6 +433,14 @@ const MapDrawTools = class {
             this._sketchGraphicsLayer.addMany(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 mapView prop is changed.
      */
@@ -511,7 +530,7 @@ const MapDrawTools = class {
             "border" : "border esri-widget esri-sketch__panel";
         const undoRedoClass = this.drawMode === EDrawMode.SKETCH ?
             "display-none" : "esri-widget esri-sketch__panel border-left esri-sketch__section";
-        return (h(Host, { key: 'c6717ea80242f622168f49efeaf2cebf497ca09e' }, h("div", { key: '2dd805c704381cb411d69b757072371d91fb243d', class: containerClass }, h("div", { key: '28b81cb37f3e11f66656195fc10b4c170f8d8fe9', ref: (el) => { this._sketchElement = el; } }), h("div", { key: 'a6de7ee6dbf4f02eb355c032c7bd9bf4ec4426e9', class: undoRedoClass }, h("calcite-action", { key: '2efeab5db057e1657c3639a39ae4d4150d331776', disabled: !this.undoEnabled, icon: "undo", onClick: () => this._undo(), scale: "s", text: this._translations.undo }), h("calcite-action", { key: '770693e30a6cfb58f593bb471342ea34556fc8d4', disabled: !this.redoEnabled, icon: "redo", onClick: () => this._redo(), scale: "s", text: this._translations.redo })))));
+        return (h(Host, { key: 'c94ac0dde3ba21569ef86cb3ba5e92a427acd10f' }, h("div", { key: 'c699bf597d5a28d62dbba20fa6ddca38f406294f', class: containerClass }, h("div", { key: '78058d9155a650bb59e59ab9064a0286b7479759', ref: (el) => { this._sketchElement = el; } }), h("div", { key: '8cfc53dda2d1b272841acf40bd70b951111c359e', class: undoRedoClass }, h("calcite-action", { key: '5a8f0d0429f7d3df587957ae77ed935b0f99a5a0', disabled: !this.undoEnabled, icon: "undo", onClick: () => this._undo(), scale: "s", text: this._translations.undo }), h("calcite-action", { key: '163067cba4a163dc32d23c2d96cb2d9d967d287e', disabled: !this.redoEnabled, icon: "redo", onClick: () => this._redo(), scale: "s", text: this._translations.redo })))));
     }
     //--------------------------------------------------------------------------
     //
@@ -744,6 +763,7 @@ const MapDrawTools = class {
     }
     static get watchers() { return {
         "graphics": ["graphicsWatchHandler"],
+        "locale": ["localeWatchHandler"],
         "mapView": ["mapViewWatchHandler"]
     }; }
 };

package/dist/esm/calcite-alert_5.entry.js

@@ -586,6 +586,7 @@ const CreateFeature = class {
         this.mapView = undefined;
         this.selectedLayerId = undefined;
         this.customizeSubmit = false;
+        this.locale = undefined;
         this.searchConfiguration = undefined;
         this.isMobile = undefined;
         this.floorLevel = undefined;
@@ -689,6 +690,14 @@ const CreateFeature = 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();
+    }
     /**
      * Called each time the mapView prop is changed.
      */
@@ -835,8 +844,8 @@ const CreateFeature = class {
         else if (this._currentPage === 'featureForm') {
             guidingMsg = this._translations.provideDetailsMsg;
         }
-        return (h(Fragment, { key: '89634bf5707ea8390416d3087bfbe4e747bafcd7' }, showGuidingMsg && h("calcite-notice", { key: '4269224c2904f29060081f6cb8f383f1cf8d741d', class: "notice-msg", icon: "lightbulb", kind: "success", open: true, ref: el => this._calciteNotice = el }, h("div", { key: 'ecc3cca85c81d1cb7ab7cdc89b99e31afcb55f76', slot: "message" }, guidingMsg)), h("calcite-loader", { key: '34e492c0c469b39d4cfbcda17c4ba196ccb39eb8', class: loaderClass, label: "", scale: "s" }), h("div", { key: 'b2073ef4b6124b54038de34798cdf83337626023', class: featureFormClass, id: "feature-form" }), this.enableSearch &&
-            h("div", { key: 'cd13e98b6a40d5d89d271b5785f797e9bfc19900', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref", ref: el => this._searchDiv = el }), h("div", { key: '2575b2d20f7713b05a2024e77452af93eb64e147', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
+        return (h(Fragment, { key: '788b2ebb85b603452d4b4de05711510f7480c895' }, showGuidingMsg && h("calcite-notice", { key: 'cf41e701f5a7605531fa6351acf13ea20e219f7a', class: "notice-msg", icon: "lightbulb", kind: "success", open: true, ref: el => this._calciteNotice = el }, h("div", { key: '1bb493a8e5a962c8a8c75ac37156edbf866c3916', slot: "message" }, guidingMsg)), h("calcite-loader", { key: '5d2e9a465cb7c6dbde8d941497fda87b4fc7c258', class: loaderClass, label: "", scale: "s" }), h("div", { key: '23b8651f4040443ba731173d1818b515b718b754', class: featureFormClass, id: "feature-form" }), this.enableSearch &&
+            h("div", { key: '7f628d09111295d46fbf7b9605999c2ef88c258d', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref", ref: el => this._searchDiv = el }), h("div", { key: '3def9aaab0a2f03076a6c4c645cf5a080bbb9e75', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -1241,6 +1250,7 @@ const CreateFeature = class {
         this._translations = messages[0];
     }
     static get watchers() { return {
+        "locale": ["localeWatchHandler"],
         "mapView": ["mapViewWatchHandler"],
         "isMobile": ["isMobileHandler"],
         "_editorLoading": ["_editorLoadingWatchHandler"]
@@ -1259,6 +1269,7 @@ const EditCard = class {
         this.refreshGraphics = createEvent(this, "refreshGraphics", 7);
         this.enableEditGeometry = false;
         this.graphics = undefined;
+        this.locale = undefined;
         this.mapView = undefined;
         this.open = false;
         this.graphicIndex = 0;
@@ -1342,6 +1353,14 @@ const EditCard = class {
             await this._closeEdit(true);
         }
     }
+    /**
+     * 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 openWatchHandler(v) {
         if (v && this.graphics?.length > 0 && this.graphicIndex > -1) {
             this._editorLoading = true;
@@ -1426,7 +1445,7 @@ const EditCard = class {
             !this.graphics[0].layer.editingEnabled : true;
         const tableNodeClass = this._editorLoading ? "display-none" : "position-absolute";
         const loadingClass = this._editorLoading ? "" : "display-none";
-        return (h(Host, { key: 'ff6d1819cfd084e9f11a1c87d89c49d13035b289' }, h("div", { key: '797882acbcc26283719be4c08936e93b93931bcd', class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { key: '34ce92da0b7c452f0fbae98d9f557543da59f5b8', class: "position-absolute" }, h("div", { key: '81af3854249e193d0d508c022cb4075be63f052d', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: 'd7aa82424f87c47039a8a8f8c61240da7a5ca971', class: loadingClass, label: "", scale: "s" })))));
+        return (h(Host, { key: '15ae3de9c8ab0a66a0185ffaafc27f03e19c77b7' }, h("div", { key: 'bbaa7dbc405259b64dfceca89e45abf6372c76c3', class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { key: 'eb8b08fa0b08cf93581fb8e76d59bd8b5446770f', class: "position-absolute" }, h("div", { key: '03e525373c09fbcd4dad213738d97b99f1549975', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: '1cc46d8f6499a90736e05c2eed9bff71aff35d12', class: loadingClass, label: "", scale: "s" })))));
     }
     //--------------------------------------------------------------------------
     //
@@ -1532,6 +1551,7 @@ const EditCard = class {
     }
     static get watchers() { return {
         "graphics": ["graphicsWatchHandler"],
+        "locale": ["localeWatchHandler"],
         "open": ["openWatchHandler"]
     }; }
 };
@@ -1552,6 +1572,7 @@ const InfoCard = class {
         this.mapView = undefined;
         this.allowEditing = true;
         this.highlightEnabled = true;
+        this.locale = undefined;
         this.paginationEnabled = true;
         this.position = 'absolute';
         this._alertOpen = false;
@@ -1616,6 +1637,19 @@ const InfoCard = class {
     async isMobileWatchHandler() {
         await this._initFeaturesWidget();
     }
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+        if (this._features) {
+            const graphics = [...this.graphics];
+            this.graphics = [];
+            this.graphics = graphics;
+        }
+    }
     /**
      * Watch for changes to the mapView and re-init the Feature widget
      */
@@ -1748,8 +1782,8 @@ const InfoCard = class {
         const id = this._features?.selectedFeature?.getObjectId();
         const ids = parseInt(id?.toString(), 10) > -1 ? [id] : [];
         const deleteEnabled = this._layer?.editingEnabled && this._layer?.capabilities?.operations?.supportsDelete;
-        return (h(Host, { key: 'e200fd8d903d1c3295247a45f352ae62394501d5' }, h("calcite-shell", { key: '0b467ed0b480944660ef2194b302070d56cb70e4', style: { position: this.position } }, this._getHeader(), h("calcite-loader", { key: 'cf6172f533f67274b04ac61af75f44ffe62cbc9e', class: loadingClass, label: this._translations.fetchingData }), h("div", { key: '06f3e0c61e14fe73c0fadd58c3cf2c7c03efff6d', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), h("div", { key: '0f964afa075abbd27db827f90d189b9bc2a7c9d4', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
-            h("div", { key: 'd518934d172425ecb46e6b28ea683427d8982382', class: "display-flex top-border padding-1-2" }, h("calcite-button", { key: '4d4f3583b6448e33e3d3ad1aba8c9178f71d75b8', appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { key: '5358ba4079f1906d23b6df5b1facb84eec9692d3', placement: "bottom", "reference-element": "solutions-edit" }, h("span", { key: '8466cfb97ce12e46a06ed665afe974377911e101' }, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { key: '61c551cc2b0c0a2981daa9bf67c7e13318508ca6', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { key: '379dc6697743caedf8fdbea16423b83e9e823a5b' }, h("calcite-button", { key: '616a52367d2f56db0104ce279951a81fcf60a376', appearance: 'transparent', disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { key: 'f7f83e145c25591de025650fd358ca6200c4b6c5', placement: "top", "reference-element": "solutions-back" }, h("span", { key: '8afbde57b91ee8597de237db87efda7eabc10d69' }, this._translations.back))), h("calcite-action", { key: '23344d4abac515d089b8770d63181a989971aa33', class: 'pagination-action', iconFlipRtl: true, onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { key: 'a4c784c5a2c7dfeb9442a58f86961a3242f55055', class: "pagination-count" }, this._count)), h("div", { key: '75e33452a93e9a77f30505957e87b8758ab8d2dd' }, h("calcite-button", { key: '0283a96c401e1929588e28d6ec014eb28b93d1f1', appearance: "transparent", disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { key: '658a26b1bca471b96799cb81ee941f0556619dc9', placement: "top", "reference-element": "solutions-next" }, h("span", { key: '9892d4ee61a1b5656711bb0a188282d9b46bd3f9' }, this._translations.next))))), h("edit-card", { key: '541268c24631ab526bf1b65313d39f3ca606cb6d', class: editClass, enableEditGeometry: this.enableEditGeometry, graphicIndex: this._features?.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { key: '1cdff00f5d7e72b5db220750d290593a1baf68c4', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { key: 'bb250c5906f0e998a794b5c02c22f9643fab16a9', slot: "title" }, this._translations.editDisabled), h("div", { key: 'd330d1ce74473fc76630d2607ab3ca2584aabbd7', slot: "message" }, this._translations.enableEditing)))));
+        return (h(Host, { key: '54e47d0ec2be9149c3e667c9e940842804d96964' }, h("calcite-shell", { key: '14bb280d394ceaa74463979886ab09cdf393b26e', style: { position: this.position } }, this._getHeader(), h("calcite-loader", { key: '3226709e73de16c795c348513183b26b88b7a726', class: loadingClass, label: this._translations.fetchingData }), h("div", { key: 'ba4b0c34620c60e849bdf0ada785b9976156dd1c', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), h("div", { key: '440a4d3c0530f97031df2e2ab9511ef6035fb5da', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+            h("div", { key: '172b2e2cc10bdfb104057376ceba5d7f5f19ad61', class: "display-flex top-border padding-1-2" }, h("calcite-button", { key: '242daf0ec6c3fe4fcc11be4bbc19f810836714ec', appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, locale: this.locale, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { key: '760f8fcd1bcff2060e0a98e84a222107e55fef22', placement: "bottom", "reference-element": "solutions-edit" }, h("span", { key: '30656b92e9bdbf3a9548586d91fc23bce2da9db3' }, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { key: '161902561c9686d74a511338dfc02efce0095af7', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { key: 'afd1459e3f69f60d96103854fe3dae71f18fc41e' }, h("calcite-button", { key: '59063d7fa2cf886afca66857cb1f74e42789e59f', appearance: 'transparent', disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { key: '412e00bc323494bb1e3a7dbeef59ab9bcd6ff8e0', placement: "top", "reference-element": "solutions-back" }, h("span", { key: '7c1512be35f16b4441c2a364e1b7a87e3c7caf97' }, this._translations.back))), h("calcite-action", { key: 'd4790efec0d13e6726ffe9d438683db6887d00b8', class: 'pagination-action', iconFlipRtl: true, onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { key: '98663d5c3b2f445db4e38cba98b8149c53cbc474', class: "pagination-count" }, this._count)), h("div", { key: '6ca88610950cf2852e2dc67588c77fd464ece3c5' }, h("calcite-button", { key: '577739ef819676dfd9cdee560a8cd22edcd9c6b7', appearance: "transparent", disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { key: '73a4f907d1a2f46a980c451572f1ba1e1b0b0596', placement: "top", "reference-element": "solutions-next" }, h("span", { key: 'd5f67497df866592b30d6c328f9f45716eb16153' }, this._translations.next))))), h("edit-card", { key: 'c8094993be5203f464cea4f632c14dbefa263a73', class: editClass, enableEditGeometry: this.enableEditGeometry, graphicIndex: this._features?.selectedFeatureIndex, graphics: this.graphics, locale: this.locale, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { key: '0b9fd2109d7c6b51b91088ecbec50956a2d8d3d8', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { key: 'c8b7b452430d6fedda5288fd58efae5526adeda7', slot: "title" }, this._translations.editDisabled), h("div", { key: 'b2dc954d43bb08908723f70796df5c77108d92d8', slot: "message" }, this._translations.enableEditing)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -1918,6 +1952,7 @@ const InfoCard = class {
     static get watchers() { return {
         "graphics": ["graphicsWatchHandler"],
         "isMobile": ["isMobileWatchHandler"],
+        "locale": ["localeWatchHandler"],
         "mapView": ["mapViewWatchHandler"]
     }; }
 };