@esri/solutions-components 0.10.39 → 0.10.41

package/dist/esm/calcite-shell-panel_14.entry.js

@@ -1765,11 +1765,25 @@ const JsonEditor = class {
         this.hasChanges = false;
         this.hasErrors = false;
         this.instanceid = "";
+        this.locale = undefined;
         this.value = "";
     }
     get el() { return getElement(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
     //
     //--------------------------------------------------------------------------
@@ -1836,7 +1850,7 @@ const JsonEditor = class {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '0c7531c8c816eb9be80d357b19b568ccdb22c407' }, h("div", { key: '866f82b68c2a750edfc80d801e4ea95a3f655100', id: `${this.instanceid}-editor-container`, class: "editor-container padding-right" }, h("div", { key: '5b9f15641f6a26daeb3847d8ef75c76b8be44fc5', class: "editor-controls" }, h("div", { key: 'd1e91eaa242ccd23d5dc1386b6a58d2fafeb4083', class: "editor-buttons" }, h("calcite-icon", { key: 'd9364f7dfdbc22a414b4711c8a22e145b533998e', id: `${this.instanceid}-errorFlag`, icon: "exclamation-mark-triangle", title: this._translations.errorFlag, scale: "s", class: "edit-error-flag" }), h("calcite-button", { key: '29750fc7cedf1f9caf556df3ff84dc45d6b922b9', id: `${this.instanceid}-undo`, color: "blue", appearance: "solid", title: this._translations.undo, onClick: () => this._undo(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: 'c95008b3fccb8bc33f01eb1bd204c84141850981', icon: "undo", scale: "s" })), h("calcite-button", { key: '49ac9ee70c58954f6dee34524f4c7ab6fa0d7a49', id: `${this.instanceid}-redo`, color: "blue", appearance: "solid", title: this._translations.redo, onClick: () => this._redo(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '2170c36d0fd236c989222991353324d50afa8ac0', icon: "redo", scale: "s" })), h("calcite-button", { key: 'c6e1a0f84fac6fb02d2590cc7b32aefffbc06d25', id: `${this.instanceid}-diff`, color: "blue", appearance: "solid", title: this._translations.diff, onClick: () => this._toggleEditor(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '88443cfd2a8888447acc75588ecff7938ade5273', icon: "compare", scale: "s" })), h("calcite-button", { key: '42dcd8f63600d4ddb77eaedd529321999cf537b3', id: `${this.instanceid}-search`, appearance: "outline", color: "blue", title: this._translations.search, onClick: () => this._search(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '31e8ced3f14f1475c62133fbd7730e34b2bc4028', icon: "search", scale: "s" })), h("calcite-button", { key: '769b268d7476f3fe1a8623e9432cfae56602db0c', id: `${this.instanceid}-reset`, color: "blue", appearance: "solid", disabled: true, title: this._translations.cancelEdits, onClick: () => this._reset(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '4a8ead1dbf8fefe8b4106a0f6f9c42fb5b875cd2', icon: "reset", scale: "s" })))), h("div", { key: '98f29030a0fa0ecbce0d165840a30edd655ba249', class: "edit-parent" }, h("div", { key: '1441e32a184bc24f2a0a25fcb855c41b40bd0cec', id: `${this.instanceid}-container`, class: "json-edit-container" }), h("div", { key: 'f0cf0a3bd11d3f8102c4cc8695ac1743bac36bbb', id: `${this.instanceid}-diff-container`, class: "json-edit-container display-none" })))));
+        return (h(Host, { key: 'ba7c8a397da913d86f5d294cdfbb5ec1b84d89de' }, h("div", { key: 'bc5c6d1ee443b2096cc44d0b66850d4ebe8462da', id: `${this.instanceid}-editor-container`, class: "editor-container padding-right" }, h("div", { key: 'dbaf682cba354ce7eef21b03a71832fd39911332', class: "editor-controls" }, h("div", { key: 'e454e1dd36aa620abf2ffb7877bebb9adc70ff15', class: "editor-buttons" }, h("calcite-icon", { key: '1de67e151c6e65b004a431d89dc785ca286a8e11', id: `${this.instanceid}-errorFlag`, icon: "exclamation-mark-triangle", title: this._translations.errorFlag, scale: "s", class: "edit-error-flag" }), h("calcite-button", { key: '33de20955d29287a3ec981e7650562a036343e3a', id: `${this.instanceid}-undo`, color: "blue", appearance: "solid", title: this._translations.undo, onClick: () => this._undo(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '9bed02f1e8a367ad2ed764747f044a4ce27de52b', icon: "undo", scale: "s" })), h("calcite-button", { key: '07562443286c4eeec28577a7cff0401e8cea0ba8', id: `${this.instanceid}-redo`, color: "blue", appearance: "solid", title: this._translations.redo, onClick: () => this._redo(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '5f24902a66eae644d0d358a4826a98d45e905493', icon: "redo", scale: "s" })), h("calcite-button", { key: '02f4f3f8ab93e5f1146176ec3699e2a6d25ecbeb', id: `${this.instanceid}-diff`, color: "blue", appearance: "solid", title: this._translations.diff, onClick: () => this._toggleEditor(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '0bcd20d28e9ec34f1736a2888d78bfcd9cb82a4d', icon: "compare", scale: "s" })), h("calcite-button", { key: 'cf3a7672ebd3ebef00123096ec304456b8f102fc', id: `${this.instanceid}-search`, appearance: "outline", color: "blue", title: this._translations.search, onClick: () => this._search(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '36aac5e89ebf593d8d1981d7b8f6267fbbadfd24', icon: "search", scale: "s" })), h("calcite-button", { key: 'cc981ff7580acfa3a3395c4ce7a96b3022bbbb4b', id: `${this.instanceid}-reset`, color: "blue", appearance: "solid", disabled: true, title: this._translations.cancelEdits, onClick: () => this._reset(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '3c4fc1da749f4b4f64d814fcd58dc035634f6b1b', icon: "reset", scale: "s" })))), h("div", { key: '6c33ec4851d804dac7fd9762e3c8c7e416a27cf4', class: "edit-parent" }, h("div", { key: 'a6e9721127bbd43f9974af65e0899489370e1868', id: `${this.instanceid}-container`, class: "json-edit-container" }), h("div", { key: 'c1d1ea305c0e451c24beddb8ac3f8e85a3fca088', id: `${this.instanceid}-diff-container`, class: "json-edit-container display-none" })))));
     }
     //--------------------------------------------------------------------------
     //
@@ -2150,6 +2164,9 @@ const JsonEditor = class {
         }
     }
     static get assetsDirs() { return ["assets"]; }
+    static get watchers() { return {
+        "locale": ["localeWatchHandler"]
+    }; }
 };
 JsonEditor.style = JsonEditorStyle0;
 
@@ -2160,6 +2177,7 @@ const SolutionItemDetails = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.itemId = "";
+        this.locale = undefined;
         this.itemDetails = {
             accessInformation: "",
             description: "",
@@ -2176,6 +2194,19 @@ const SolutionItemDetails = class {
     get el() { return getElement(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
     //
     //--------------------------------------------------------------------------
@@ -2197,7 +2228,7 @@ const SolutionItemDetails = class {
      * 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();
@@ -2342,6 +2373,9 @@ const SolutionItemDetails = class {
         const translations = await getLocaleComponentStrings(this.el);
         this._translations = translations[0];
     }
+    static get watchers() { return {
+        "locale": ["localeWatchHandler"]
+    }; }
 };
 SolutionItemDetails.style = SolutionItemDetailsStyle0;
 
@@ -2352,14 +2386,28 @@ const SolutionItemSharing = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.groupId = "";
+        this.locale = undefined;
         this._translations = undefined;
         this.sharing = [];
     }
     get el() { return getElement(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
@@ -2375,7 +2423,7 @@ const SolutionItemSharing = class {
      * 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))));
     }
     //--------------------------------------------------------------------------
     //
@@ -2459,7 +2507,8 @@ const SolutionItemSharing = class {
         this._translations = translations[0];
     }
     static get watchers() { return {
-        "groupId": ["itemIdWatchHandler"]
+        "groupId": ["itemIdWatchHandler"],
+        "locale": ["localeWatchHandler"]
     }; }
 };
 SolutionItemSharing.style = SolutionItemSharingStyle0;
@@ -2471,11 +2520,25 @@ const SolutionOrganizationVariables = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.organizationVariableSelected = createEvent(this, "organizationVariableSelected", 7);
+        this.locale = undefined;
         this.value = "";
         this._organizationVariables = [];
         this._translations = undefined;
     }
     get el() { return getElement(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);
     }
@@ -2494,7 +2557,7 @@ const SolutionOrganizationVariables = class {
      * 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)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -2550,6 +2613,7 @@ const SolutionOrganizationVariables = class {
         this._translations = translations[0];
     }
     static get watchers() { return {
+        "locale": ["localeWatchHandler"],
         "value": ["valueWatchHandler"]
     }; }
 };
@@ -2563,11 +2627,17 @@ const SolutionResourceItem = class {
         registerInstance(this, hostRef);
         this.authentication = undefined;
         this.itemId = "";
+        this.locale = undefined;
         this.resourceFilePaths = [];
         this.resources = [];
         this._translations = undefined;
     }
     get el() { return getElement(this); }
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
     itemIdWatchHandler() {
         const item = state.getItemInfo(this.itemId);
         this.resourceFilePaths = item.resourceFilePaths;
@@ -2576,6 +2646,14 @@ const SolutionResourceItem = class {
         // 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
@@ -2592,7 +2670,7 @@ const SolutionResourceItem = class {
      */
     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 = {};
     //--------------------------------------------------------------------------
@@ -2814,7 +2892,8 @@ const SolutionResourceItem = class {
         this._translations = translations[0];
     }
     static get watchers() { return {
-        "itemId": ["itemIdWatchHandler"]
+        "itemId": ["itemIdWatchHandler"],
+        "locale": ["localeWatchHandler"]
     }; }
 };
 SolutionResourceItem.style = SolutionResourceItemStyle0;
@@ -2832,6 +2911,19 @@ const SolutionTemplateData = 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();
+    }
+    //--------------------------------------------------------------------------
+    //
     //  Lifecycle
     //
     //--------------------------------------------------------------------------
@@ -2839,6 +2931,7 @@ const SolutionTemplateData = class {
         registerInstance(this, hostRef);
         this.instanceid = "";
         this.itemId = "";
+        this.locale = undefined;
         this.organizationVariables = "";
         this.solutionVariables = "";
         this.varsOpen = true;
@@ -2874,7 +2967,7 @@ const SolutionTemplateData = class {
      * 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;
     //--------------------------------------------------------------------------
@@ -2913,7 +3006,8 @@ const SolutionTemplateData = class {
         this._translations = translations[0];
     }
     static get watchers() { return {
-        "itemId": ["itemIdWatchHandler"]
+        "itemId": ["itemIdWatchHandler"],
+        "locale": ["localeWatchHandler"]
     }; }
 };
 SolutionTemplateData.style = SolutionTemplateDataStyle0;
@@ -2926,10 +3020,24 @@ const SolutionVariables = class {
         registerInstance(this, hostRef);
         this.solutionVariableSelected = createEvent(this, "solutionVariableSelected", 7);
         this.value = "";
+        this.locale = undefined;
         this._solutionVariables = [];
         this._translations = undefined;
     }
     get el() { return getElement(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);
     }
@@ -2948,7 +3056,7 @@ const SolutionVariables = class {
      * 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)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -3015,6 +3123,7 @@ const SolutionVariables = class {
         this._translations = translations[0];
     }
     static get watchers() { return {
+        "locale": ["localeWatchHandler"],
         "value": ["valueWatchHandler"]
     }; }
 };

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

@@ -215,6 +215,7 @@ const DeleteButton = class {
         this.icon = undefined;
         this.ids = [];
         this.layer = undefined;
+        this.locale = undefined;
         this._confirmDelete = false;
         this._deleteEndabled = false;
         this._supportsDelete = undefined;
@@ -243,6 +244,14 @@ const DeleteButton = class {
     async layerWatchHandler() {
         this._setDeleteEnabled();
     }
+    /**
+     * 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)
@@ -274,7 +283,7 @@ const DeleteButton = class {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '4ced17b35479900aaa01ebbd298eeae57194e358' }, this.buttonType === "button" ? (h("calcite-button", { appearance: "outline", disabled: !this._deleteEndabled, id: "solutions-delete", kind: "danger", onClick: () => this._delete(), width: "full" }, this._translations.deleteCount.replace("{{n}}", this.ids.length.toString()))) : (h("calcite-action", { appearance: "solid", compact: true, disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s", text: this._translations.delete }, h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage(), h("calcite-tooltip", { key: '04f82e726cf9142c403ee43cb8151027bb7b617f', placement: "bottom", "reference-element": this.buttonType === "button" ? "solutions-delete" : this.icon }, h("span", { key: 'f7852b2476dae4b18e82495c64a819b3db98696d' }, this._translations.delete))));
+        return (h(Host, { key: '1816da3d5cd7903b4e699dffa4ac4836dca722bb' }, this.buttonType === "button" ? (h("calcite-button", { appearance: "outline", disabled: !this._deleteEndabled, id: "solutions-delete", kind: "danger", onClick: () => this._delete(), width: "full" }, this._translations.deleteCount.replace("{{n}}", this.ids.length.toString()))) : (h("calcite-action", { appearance: "solid", compact: true, disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s", text: this._translations.delete }, h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage(), h("calcite-tooltip", { key: '26fc4d4b4ea02b7a6c5e3f87abe2c5b8f96a3654', placement: "bottom", "reference-element": this.buttonType === "button" ? "solutions-delete" : this.icon }, h("span", { key: 'c2f7b101bb3a99274fe7f364ad29365c212d856e' }, this._translations.delete))));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -308,7 +317,7 @@ const DeleteButton = class {
      * @returns node to confirm or deny the delete operation
      */
     _deleteMessage() {
-        return this.deleteDialog ? this.deleteDialog : (h("delete-dialog", { id: "solution-delete-dialog", ids: this.ids, layer: this.layer, onDeleteDialogClose: () => this._confirmDelete = false, open: this._confirmDelete }));
+        return this.deleteDialog ? this.deleteDialog : (h("delete-dialog", { id: "solution-delete-dialog", ids: this.ids, layer: this.layer, locale: this.locale, onDeleteDialogClose: () => this._confirmDelete = false, open: this._confirmDelete }));
     }
     /**
      * Fetches the component's translations
@@ -322,7 +331,8 @@ const DeleteButton = class {
     }
     static get watchers() { return {
         "ids": ["idsWatchHandler"],
-        "layer": ["layerWatchHandler"]
+        "layer": ["layerWatchHandler"],
+        "locale": ["localeWatchHandler"]
     }; }
 };
 DeleteButton.style = DeleteButtonStyle0;
@@ -337,6 +347,7 @@ const DeleteDialog = class {
         this.deleteDialogClose = createEvent(this, "deleteDialogClose", 7);
         this.ids = [];
         this.layer = undefined;
+        this.locale = undefined;
         this.open = false;
         this._isDeleting = false;
         this._translations = undefined;
@@ -352,6 +363,14 @@ const DeleteDialog = 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();
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
@@ -389,7 +408,7 @@ const DeleteDialog = class {
     render() {
         const confirmMessage = this.ids.length === 1 ? this._translations?.confirmSingle :
             this._translations?.confirmMultiple;
-        return (h(Host, { key: '64cd1440f80a9609f90056b919fa807e975eff70' }, h("calcite-modal", { key: '022302455960cbcf894dc2f0079d88be6fb59367', "aria-labelledby": "modal-title", class: "delete-modal", kind: "danger", onCalciteModalClose: () => this._close(), open: this.open, widthScale: "s" }, h("div", { key: '7484caedbdd759efbe972182ddd41a6ebaa2bd64', class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations?.deleteFeature), h("div", { key: 'e31136a6eed46dd0cbc4d919deb732a623097fbf', slot: "content" }, confirmMessage), h("calcite-button", { key: '7de42845a99777bcec59221fb6ab863e72ca2654', appearance: "outline", kind: "danger", onClick: () => this._close(), slot: "secondary", width: "full" }, this._translations?.cancel), h("calcite-button", { key: '67921ff64fc5c4439e66833fd8502f7e95671b5d', kind: "danger", loading: this._isDeleting, onClick: () => void this._deleteFeatures(), slot: "primary", width: "full" }, this._translations?.delete))));
+        return (h(Host, { key: 'eafca7d4325c65ff21fbfeaa24ea14e95bc25a34' }, h("calcite-modal", { key: '745e52d7b23318492914662cc769a1206baefd28', "aria-labelledby": "modal-title", class: "delete-modal", kind: "danger", onCalciteModalClose: () => this._close(), open: this.open, widthScale: "s" }, h("div", { key: '363614f6eaf30c30c6c2ccde3875dfff5cd94088', class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations?.deleteFeature), h("div", { key: 'b3b6f74495894589b7fd8be54265c4a69ffaa62e', slot: "content" }, confirmMessage), h("calcite-button", { key: 'd325fcf12624bac39f56ec690f7e4e9660789891', appearance: "outline", kind: "danger", onClick: () => this._close(), slot: "secondary", width: "full" }, this._translations?.cancel), h("calcite-button", { key: '73a10546ad92065c949bfacca3eb3d508685030e', kind: "danger", loading: this._isDeleting, onClick: () => void this._deleteFeatures(), slot: "primary", width: "full" }, this._translations?.delete))));
     }
     //--------------------------------------------------------------------------
     //
@@ -428,6 +447,9 @@ const DeleteDialog = class {
         const messages = await getLocaleComponentStrings(this.el);
         this._translations = messages[0];
     }
+    static get watchers() { return {
+        "locale": ["localeWatchHandler"]
+    }; }
 };
 DeleteDialog.style = DeleteDialogStyle0;
 

package/dist/esm/card-manager_3.entry.js

@@ -27,6 +27,7 @@ const CardManager = class {
         this.enableEditGeometry = false;
         this.isMobile = undefined;
         this.layer = undefined;
+        this.locale = undefined;
         this.mapView = undefined;
         this.zoomAndScrollToSelected = undefined;
         this.selectedFeaturesIds = undefined;
@@ -57,6 +58,14 @@ const CardManager = 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();
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
@@ -126,14 +135,14 @@ const CardManager = class {
         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);
@@ -198,6 +207,9 @@ const CardManager = class {
         const messages = await getLocaleComponentStrings(this.el);
         this._translations = messages[0];
     }
+    static get watchers() { return {
+        "locale": ["localeWatchHandler"]
+    }; }
 };
 CardManager.style = CardManagerStyle0;
 
@@ -219,6 +231,7 @@ const LayerTable = class {
         this.enableInlineEdit = undefined;
         this.enableShare = undefined;
         this.isMobile = undefined;
+        this.locale = undefined;
         this.mapHidden = undefined;
         this.mapInfo = undefined;
         this.mapView = undefined;
@@ -474,6 +487,14 @@ const LayerTable = class {
             }
         });
     }
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
     /**
      * Reset the toolInfos when mapHidden prop changes so we can show/hide any map dependant tool(s)
      */
@@ -706,10 +727,10 @@ const LayerTable = class {
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         const showSearch = this._canShowFullTextSearch();
         this._validateActiveActions();
-        return (h(Host, { key: '04fccaaa9862ed315d99ad74f7e1135dd5656613' }, h("calcite-shell", { key: 'e332d781be1499857a5e17e37ad2e058bba453b1' }, this._getTableControlRow("header"), h("div", { key: '6337e494f879c250494c5f5859daec627fdd0700', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: 'd0d437997906fd15f97765cb89c3917f66b20c37', class: "height-full width-full" }, showSearch &&
-            h("div", { key: '596a2d54fd707941d9e2ec167598313d9ee9b295', class: "search-container" }, h("calcite-input", { key: '31cd1ffb09bc2c6c9c1f9daf39f3e9549cbceeb2', class: "search", clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" })), h("calcite-loader", { key: 'b4ba3d32fb346134672e08d55428bd38ac43f40d', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '4fbac73935be7a1163643543e6d77a200534e5e3', class: tableNodeClass, ref: this.onTableNodeCreate }))), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (h(Host, { key: '5cbb5ba55c63eaf278666aac034a01d971d9f12a' }, h("calcite-shell", { key: '8a27d87fc002b72fe478d25885b2ab04261362ca' }, this._getTableControlRow("header"), h("div", { key: '250c356a30389b8cb95628953f3bb3ec5c88361d', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: '9d5dbb084031bdface1dbc3a1dbc2fa33eb163b5', class: "height-full width-full" }, showSearch &&
+            h("div", { key: '2d45ae4255a1d0e3cf14aa0f6a01915a38626bc7', class: "search-container" }, h("calcite-input", { key: 'c73546fef30db70d01cf8978a5daf9ea4193ddc2', class: "search", clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" })), h("calcite-loader", { key: '61621afb1e5fa67e25b878320c8497200b8265cd', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '0ef4fe0e4099ec60f4c38e2c421920c9a8fe3c4f', class: tableNodeClass, ref: this.onTableNodeCreate }))), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
             .replace("{{total}}", total)
-            .replace("{{selected}}", selected))) : undefined), this.createFilterModal && this._filterModal(), h("delete-dialog", { key: '3b0dba8bc391d777f4687ad6f4e905aeb1eb580b', id: "deleteDialogId", ids: this._getIds(), layer: this._layer, onDeleteDialogClose: () => this._deleteDialogOpen = false, open: this._deleteDialogOpen, ref: (el) => this._deleteDialog = el })));
+            .replace("{{selected}}", selected))) : undefined), this.createFilterModal && this._filterModal(), h("delete-dialog", { key: 'e2564b1d08476f762577247ffb41a00e5c41514c', id: "deleteDialogId", ids: this._getIds(), layer: this._layer, locale: this.locale, onDeleteDialogClose: () => this._deleteDialogOpen = false, open: this._deleteDialogOpen, ref: (el) => this._deleteDialog = el })));
     }
     _deleteDialog;
     /**
@@ -885,7 +906,7 @@ const LayerTable = class {
     _getActionBar() {
         const containerClass = this.isMobile ? "width-full" : "";
         const mobileClass = this.isMobile ? "border-top" : "";
-        return (h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, mapView: this.mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", selectedIds: this._layer ? [this._layer?.id] : [], showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), !this.isMobile ? this._getActions() : undefined));
+        return (h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, locale: this.locale, mapView: this.mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", selectedIds: this._layer ? [this._layer?.id] : [], showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), !this.isMobile ? this._getActions() : undefined));
     }
     /**
      * Get the actions that are used for various interactions with the table
@@ -1364,7 +1385,7 @@ const LayerTable = class {
      */
     _getDangerAction(icon, label, func, disabled) {
         const _disabled = this._layer === undefined ? true : disabled;
-        return (h("div", { class: "display-flex", id: this._getId(icon) }, icon === "trash" ? (h("delete-button", { buttonType: "action", class: "display-flex", disabled: _disabled, icon: icon, id: "solutions-delete", ids: this._getIds(), layer: this._layer })) : (h("calcite-action", { appearance: "solid", disabled: _disabled, id: icon, onClick: func, text: label }, h("calcite-button", { appearance: "transparent", iconStart: icon, kind: "danger" }, label))), this._getToolTip("bottom", icon, label)));
+        return (h("div", { class: "display-flex", id: this._getId(icon) }, icon === "trash" ? (h("delete-button", { buttonType: "action", class: "display-flex", disabled: _disabled, icon: icon, id: "solutions-delete", ids: this._getIds(), layer: this._layer, locale: this.locale })) : (h("calcite-action", { appearance: "solid", disabled: _disabled, id: icon, onClick: func, text: label }, h("calcite-button", { appearance: "transparent", iconStart: icon, kind: "danger" }, label))), this._getToolTip("bottom", icon, label)));
     }
     /**
      * Return all currently selected IDs from the table
@@ -2078,6 +2099,7 @@ const LayerTable = class {
         "enableInlineEdit": ["enableInlineEditWatchHandler"],
         "enableShare": ["enableShareWatchHandler"],
         "_controlsThatFit": ["_controlsThatFitWatchHandler"],
+        "locale": ["localeWatchHandler"],
         "mapHidden": ["mapHiddenWatchHandler"],
         "isMobile": ["isMobileWatchHandler"],
         "mapInfo": ["mapInfoWatchHandler"],
@@ -2154,6 +2176,7 @@ const MapCard = class {
         this.homeZoomIndex = 3;
         this.homeZoomPosition = "top-left";
         this.homeZoomToolsSize = "m";
+        this.locale = undefined;
         this.mapInfos = [];
         this.mapWidgetsIndex = 0;
         this.mapWidgetsPosition = "top-right";
@@ -2303,6 +2326,14 @@ const MapCard = class {
             this._updateToolbar();
         }
     }
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
     /**
      * watch for changes in map view and get the first layer
      */
@@ -2435,7 +2466,7 @@ const MapCard = class {
         const mapHeightClass = this.mapInfos?.length > 1 || this.isMapLayout ? "map-height" : "height-full";
         const progressClass = this.isMapLayout ? "" : "display-none";
         this._validateActiveActions();
-        return (h(Host, { key: 'd4e5ff9c4aa08a4effe19a54a1a48463cb8b3774' }, h("div", { key: '51ee35d267d5ef081a4c160de3e03b1790d328c8', class: `${mapContainerClass} width-full`, ref: (el) => this._toolbar = el }, this._getActionBar(), !this.isMobile && this.isMapLayout && this._getDropdown("more-table-options"), this.enableShare && !this.isMobile && this.isMapLayout ? this._getShare("share") : undefined), h("calcite-progress", { key: '70a5c232aae8a9ff6740fd326e6ba6fe61936541', class: progressClass, value: 0 }), h("div", { key: 'c399acc019d7f0a16dbb644eee4cfdd1e6e83c7c', class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { key: 'c6a88ccfa140fe9b0d059f74b9254af6ef0997ce', basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: this.enableSingleExpand, homeZoomToolsSize: this.homeZoomToolsSize, mapView: this.mapView, mapWidgetsSize: this.mapWidgetsSize, position: this.mapWidgetsPosition, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration, stackTools: this.stackTools, toolOrder: this.toolOrder })));
+        return (h(Host, { key: '0b617eeb40229e49a32f5e4a557bfa0f88588fae' }, h("div", { key: 'd93aa32cd31279e468e4570af231a3f3788b9897', class: `${mapContainerClass} width-full`, ref: (el) => this._toolbar = el }, this._getActionBar(), !this.isMobile && this.isMapLayout && this._getDropdown("more-table-options"), this.enableShare && !this.isMobile && this.isMapLayout ? this._getShare("share") : undefined), h("calcite-progress", { key: '0ac01b19752ded5ddf0b06723b30fa669b2f6933', class: progressClass, value: 0 }), h("div", { key: '256bc38d71e3de4ab7ba7328ce12c32fa9ef0d2b', class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { key: 'e86f179871e8b315ff8d6ecb87545d9af8222590', basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: this.enableSingleExpand, homeZoomToolsSize: this.homeZoomToolsSize, locale: this.locale, mapView: this.mapView, mapWidgetsSize: this.mapWidgetsSize, position: this.mapWidgetsPosition, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration, stackTools: this.stackTools, toolOrder: this.toolOrder })));
     }
     /**
      * Called each time after the component is loaded
@@ -2662,7 +2693,7 @@ const MapCard = class {
         const containerClass = this.isMapLayout ? "display-flex" : "display-block";
         const mobileClass = this.isMobile ? "border-top" : "";
         const headerElements = this.isMapLayout ? "" : "display-none";
-        return (h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("map-picker", { class: mapPickerClass, isMapLayout: this.isMapLayout, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), h("div", { class: `mapView-header display-flex ${headerElements}` }, h("div", { class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, this.mapView && h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, mapView: this.mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", ref: (el) => this._mapLayerPicker = el, scale: "l", selectedIds: this.selectedLayer ? [this.selectedLayer.id] : [], showSingleLayerAsLabel: true, showTables: true, showTablesDisabled: true, type: "dropdown" }))), !this.isMobile && this.isMapLayout ? this._getActions() : undefined));
+        return (h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("map-picker", { class: mapPickerClass, isMapLayout: this.isMapLayout, locale: this.locale, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), h("div", { class: `mapView-header display-flex ${headerElements}` }, h("div", { class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, this.mapView && h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, locale: this.locale, mapView: this.mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", ref: (el) => this._mapLayerPicker = el, scale: "l", selectedIds: this.selectedLayer ? [this.selectedLayer.id] : [], showSingleLayerAsLabel: true, showTables: true, showTablesDisabled: true, type: "dropdown" }))), !this.isMobile && this.isMapLayout ? this._getActions() : undefined));
     }
     /**
      * Get a list of toolInfos that should display in the dropdown
@@ -3000,6 +3031,7 @@ const MapCard = class {
         "appLayout": ["appLayoutWatchHandler"],
         "enableHome": ["enableHomeWatchHandler"],
         "enableShare": ["enableShareWatchHandler"],
+        "locale": ["localeWatchHandler"],
         "mapView": ["mapViewWatchHandler"],
         "selectedLayer": ["selectedLayerWatchHandler"],
         "selectedFeaturesIds": ["selectedFeaturesIdsWatchHandler"],