@esri/solutions-components 0.10.38 → 0.10.40

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/buffer-tools2.js

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

package/dist/components/card-manager2.js

@@ -42,6 +42,7 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
         this.enableEditGeometry = false;
         this.isMobile = undefined;
         this.layer = undefined;
+        this.locale = undefined;
         this.mapView = undefined;
         this.zoomAndScrollToSelected = undefined;
         this.selectedFeaturesIds = undefined;
@@ -72,6 +73,14 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
     //  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)
@@ -141,14 +150,14 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
         const heading = isTable ? this._translations.createRecord : this._translations.createFeature;
         const guideMsg = this.customInfoText ? this.customInfoText : this.selectingFeatureFromMap ? this._translations.selectFeaturesFromMapToStart : this._translations.selectFeaturesToStart;
         const showCreateFeatureOrRecordBtn = this.enableCreateFeatures && this.layer?.capabilities?.operations?.supportsAdd;
-        return (h(Host, { key: '7360aa9c48dd0c3e4a14fe0833b99c301388f93c' }, h("div", { key: '9d610f0c4728c238eceb790e97a4e06b77f1a2d1', class: "overflow-auto height-full" }, h("calcite-shell", { key: '4b6a02205a971c7ff61aab567b2f2a3c5d288f8d', class: "position-relative " + featuresClass }, h("div", { key: '96ee8ce138265dd4b562ac0a33b79a0db4497842', class: "position-static z-index-500" }, h("info-card", { key: '7db359bc1016281fd01b737dc5c424fe78995422', enableEditGeometry: this.enableEditGeometry, graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView }))), h("calcite-shell", { key: 'afc8d06e9aa3213a9ca10c929497ed4618a28e91', class: "position-relative " + messageClass }, h("calcite-flow-item", { key: '46db92a6e259eefea3293310e3e2f43d7639db97' }, h("calcite-panel", { key: 'd2bc23ae7bcf2b7b7b48a35efc0697e0d1f9e23e' }, h("div", { key: '8f7fd13f9ec99beec1d7231dda03eba403a70a69', class: "padding-1" }, h("calcite-notice", { key: '2fbe94292c1dd91ee1691b8e3d295225ff5b534b', icon: this.selectingFeatureFromMap ? "map" : "table", iconFlipRtl: true, open: true }, h("div", { key: '9f91099e4bfa0675c5b098a73b2f132b80ee76b0', slot: "message" }, guideMsg))), !this.isMobile && showCreateFeatureOrRecordBtn && h("calcite-button", { key: 'c1b04e776f3750712992d736e09726cc26eae5db', disabled: !this.layer, onClick: () => this._createFeatureBtnClicked(), slot: "footer", width: "full" }, isTable ? this._translations.createRecord : this._translations.createFeature)))), h("calcite-shell", { key: 'a71d4b0abd1ec1a4ed14a2cb3dcb10a075f54bf0', class: "position-relative " + createFeatureClass }, h("calcite-flow-item", { key: '85047b527f5995a912b527325f287c3596caf630' }, h("calcite-panel", { key: 'd335be81502e0feb803ee9ad4e501d4c85f184f5', heading: heading }, h("calcite-action", { key: 'b179c3185dbada3bd052d38b98b75cf29240655c', class: "back-button hydrated", icon: "chevron-left", onClick: this._backFromCreateFeature.bind(this), scale: "s", slot: "header-actions-start", text: "" }), this.getEditorComponent(), this._showSubmitBtn && h("calcite-button", { key: 'f3b6655e3effdb6b09e64acd651a09d6028a6df9', appearance: "solid", class: "footer-top-button footer-button", onClick: () => void this._createFeature.submit(), slot: "footer", width: "full" }, this._translations.create)))))));
+        return (h(Host, { key: '1dc448368b85b83ccc2f76f59cff83559d1d1285' }, h("div", { key: '7c058f7a4ca2db84f0ad35efba90a1485e5c7989', class: "overflow-auto height-full" }, h("calcite-shell", { key: '1388666d3d11efee37efc1524011594237cccc35', class: "position-relative " + featuresClass }, h("div", { key: '3f93c4de344e49eec16e447bc1ca44cb280f84cc', class: "position-static z-index-500" }, h("info-card", { key: 'c5b8cafef2595b8ae85725d583caebf9754ce1fb', enableEditGeometry: this.enableEditGeometry, graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, locale: this.locale, mapView: this.mapView }))), h("calcite-shell", { key: 'bfa2f41e657f390335545f46ab744d4d980c3926', class: "position-relative " + messageClass }, h("calcite-flow-item", { key: 'bf19ce4b69b52c5652629f38859e03a0a99f8374' }, h("calcite-panel", { key: '1ea46998a73ad636ad2a956e72181a0570edd5d0' }, h("div", { key: 'd853f429c30daa5abcfe6576b7242fa48251ae53', class: "padding-1" }, h("calcite-notice", { key: 'dffa52ec3fa7a22494b6dadd7b1c6d512e25c192', icon: this.selectingFeatureFromMap ? "map" : "table", iconFlipRtl: true, open: true }, h("div", { key: '728b56c9281dfe09d1604882635a53803c5f4253', slot: "message" }, guideMsg))), !this.isMobile && showCreateFeatureOrRecordBtn && h("calcite-button", { key: '260042d84c529d5508630bca7bdb39db1c2408cb', disabled: !this.layer, onClick: () => this._createFeatureBtnClicked(), slot: "footer", width: "full" }, isTable ? this._translations.createRecord : this._translations.createFeature)))), h("calcite-shell", { key: 'c30cbc2dc6e70319440bf9ed7c3d7f7ede38c3a1', class: "position-relative " + createFeatureClass }, h("calcite-flow-item", { key: '901c5a407a8418c34ee72c4dd4b16443c3766819' }, h("calcite-panel", { key: 'a6faf502cd08060a42582cbd95d7354b1e192a43', heading: heading }, h("calcite-action", { key: '23e9c295f7476f935055c30227774e173315194d', class: "back-button hydrated", icon: "chevron-left", onClick: this._backFromCreateFeature.bind(this), scale: "s", slot: "header-actions-start", text: "" }), this.getEditorComponent(), this._showSubmitBtn && h("calcite-button", { key: '3ee5c310e5fad8aa5d6abd8ae1347c46d3ada1be', appearance: "solid", class: "footer-top-button footer-button", onClick: () => void this._createFeature.submit(), slot: "footer", width: "full" }, this._translations.create)))))));
     }
     /**
    * Returns the editor component for adding feature
    * @returns Node
    */
     getEditorComponent() {
-        return (h("div", null, this._showCreateFeatureComponent && h("create-feature", { customizeSubmit: true, mapView: this.mapView, onDrawComplete: () => { this._showSubmitBtn = true; }, onEditingAttachment: (evt) => { this._showSubmitBtn = !evt.detail; }, onProgressStatus: () => {
+        return (h("div", null, this._showCreateFeatureComponent && h("create-feature", { customizeSubmit: true, locale: this.locale, mapView: this.mapView, onDrawComplete: () => { this._showSubmitBtn = true; }, onEditingAttachment: (evt) => { this._showSubmitBtn = !evt.detail; }, onProgressStatus: () => {
                 setTimeout(() => {
                     this._isFeatureCreated = false;
                 }, 2000);
@@ -213,12 +222,16 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
         const messages = await getLocaleComponentStrings(this.el);
         this._translations = messages[0];
     }
+    static get watchers() { return {
+        "locale": ["localeWatchHandler"]
+    }; }
     static get style() { return CardManagerStyle0; }
 }, [0, "card-manager", {
         "customInfoText": [1, "custom-info-text"],
         "enableEditGeometry": [4, "enable-edit-geometry"],
         "isMobile": [4, "is-mobile"],
         "layer": [1040],
+        "locale": [1],
         "mapView": [16],
         "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
         "selectedFeaturesIds": [16],
@@ -229,7 +242,9 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
         "_showCreateFeatureComponent": [32],
         "_showSubmitBtn": [32],
         "_translations": [32]
-    }, [[8, "featureSelectionChange", "featureSelectionChange"], [8, "layerSelectionChange", "layerSelectionChange"]]]);
+    }, [[8, "featureSelectionChange", "featureSelectionChange"], [8, "layerSelectionChange", "layerSelectionChange"]], {
+        "locale": ["localeWatchHandler"]
+    }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/consent-manager.js

@@ -622,6 +622,7 @@ const ConsentManager$1 = /*@__PURE__*/ proxyCustomElement(class ConsentManager e
         this.__attachShadow();
         this.consentGranted = createEvent(this, "consentGranted", 7);
         this.firstUseVar = undefined;
+        this.locale = undefined;
         this.measurementIds = undefined;
         this.portal = undefined;
         this._shouldRender = undefined;
@@ -651,6 +652,14 @@ const ConsentManager$1 = /*@__PURE__*/ proxyCustomElement(class ConsentManager 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)
@@ -772,14 +781,20 @@ const ConsentManager$1 = /*@__PURE__*/ proxyCustomElement(class ConsentManager e
         const messages = await getLocaleComponentStrings(this.el);
         this._translations = messages[0];
     }
+    static get watchers() { return {
+        "locale": ["localeWatchHandler"]
+    }; }
     static get style() { return ConsentManagerStyle0; }
 }, [1, "consent-manager", {
         "firstUseVar": [1, "first-use-var"],
+        "locale": [1],
         "measurementIds": [16],
         "portal": [16],
         "_shouldRender": [32],
         "_translations": [32],
         "getInstance": [64]
+    }, undefined, {
+        "locale": ["localeWatchHandler"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/create-feature2.js

@@ -27,6 +27,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         this.mapView = undefined;
         this.selectedLayerId = undefined;
         this.customizeSubmit = false;
+        this.locale = undefined;
         this.searchConfiguration = undefined;
         this.isMobile = undefined;
         this.floorLevel = undefined;
@@ -130,6 +131,14 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
     //  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.
      */
@@ -276,8 +285,8 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         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; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -682,6 +691,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         this._translations = messages[0];
     }
     static get watchers() { return {
+        "locale": ["localeWatchHandler"],
         "mapView": ["mapViewWatchHandler"],
         "isMobile": ["isMobileHandler"],
         "_editorLoading": ["_editorLoadingWatchHandler"]
@@ -691,6 +701,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         "mapView": [16],
         "selectedLayerId": [1, "selected-layer-id"],
         "customizeSubmit": [4, "customize-submit"],
+        "locale": [1],
         "searchConfiguration": [16],
         "isMobile": [4, "is-mobile"],
         "floorLevel": [1, "floor-level"],
@@ -704,6 +715,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         "submit": [64],
         "refresh": [64]
     }, undefined, {
+        "locale": ["localeWatchHandler"],
         "mapView": ["mapViewWatchHandler"],
         "isMobile": ["isMobileHandler"],
         "_editorLoading": ["_editorLoadingWatchHandler"]