@esri/solutions-components 0.10.39 → 0.10.40

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

@@ -1769,11 +1769,25 @@ const JsonEditor = class {
         this.hasChanges = false;
         this.hasErrors = false;
         this.instanceid = "";
+        this.locale = undefined;
         this.value = "";
     }
     get el() { return index.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
     //
     //--------------------------------------------------------------------------
@@ -1840,7 +1854,7 @@ const JsonEditor = class {
      * Renders the component.
      */
     render() {
-        return (index.h(index.Host, { key: '0c7531c8c816eb9be80d357b19b568ccdb22c407' }, index.h("div", { key: '866f82b68c2a750edfc80d801e4ea95a3f655100', id: `${this.instanceid}-editor-container`, class: "editor-container padding-right" }, index.h("div", { key: '5b9f15641f6a26daeb3847d8ef75c76b8be44fc5', class: "editor-controls" }, index.h("div", { key: 'd1e91eaa242ccd23d5dc1386b6a58d2fafeb4083', class: "editor-buttons" }, index.h("calcite-icon", { key: 'd9364f7dfdbc22a414b4711c8a22e145b533998e', id: `${this.instanceid}-errorFlag`, icon: "exclamation-mark-triangle", title: this._translations.errorFlag, scale: "s", class: "edit-error-flag" }), index.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" }, index.h("calcite-icon", { key: 'c95008b3fccb8bc33f01eb1bd204c84141850981', icon: "undo", scale: "s" })), index.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" }, index.h("calcite-icon", { key: '2170c36d0fd236c989222991353324d50afa8ac0', icon: "redo", scale: "s" })), index.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" }, index.h("calcite-icon", { key: '88443cfd2a8888447acc75588ecff7938ade5273', icon: "compare", scale: "s" })), index.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" }, index.h("calcite-icon", { key: '31e8ced3f14f1475c62133fbd7730e34b2bc4028', icon: "search", scale: "s" })), index.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" }, index.h("calcite-icon", { key: '4a8ead1dbf8fefe8b4106a0f6f9c42fb5b875cd2', icon: "reset", scale: "s" })))), index.h("div", { key: '98f29030a0fa0ecbce0d165840a30edd655ba249', class: "edit-parent" }, index.h("div", { key: '1441e32a184bc24f2a0a25fcb855c41b40bd0cec', id: `${this.instanceid}-container`, class: "json-edit-container" }), index.h("div", { key: 'f0cf0a3bd11d3f8102c4cc8695ac1743bac36bbb', id: `${this.instanceid}-diff-container`, class: "json-edit-container display-none" })))));
+        return (index.h(index.Host, { key: 'ba7c8a397da913d86f5d294cdfbb5ec1b84d89de' }, index.h("div", { key: 'bc5c6d1ee443b2096cc44d0b66850d4ebe8462da', id: `${this.instanceid}-editor-container`, class: "editor-container padding-right" }, index.h("div", { key: 'dbaf682cba354ce7eef21b03a71832fd39911332', class: "editor-controls" }, index.h("div", { key: 'e454e1dd36aa620abf2ffb7877bebb9adc70ff15', class: "editor-buttons" }, index.h("calcite-icon", { key: '1de67e151c6e65b004a431d89dc785ca286a8e11', id: `${this.instanceid}-errorFlag`, icon: "exclamation-mark-triangle", title: this._translations.errorFlag, scale: "s", class: "edit-error-flag" }), index.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" }, index.h("calcite-icon", { key: '9bed02f1e8a367ad2ed764747f044a4ce27de52b', icon: "undo", scale: "s" })), index.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" }, index.h("calcite-icon", { key: '5f24902a66eae644d0d358a4826a98d45e905493', icon: "redo", scale: "s" })), index.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" }, index.h("calcite-icon", { key: '0bcd20d28e9ec34f1736a2888d78bfcd9cb82a4d', icon: "compare", scale: "s" })), index.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" }, index.h("calcite-icon", { key: '36aac5e89ebf593d8d1981d7b8f6267fbbadfd24', icon: "search", scale: "s" })), index.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" }, index.h("calcite-icon", { key: '3c4fc1da749f4b4f64d814fcd58dc035634f6b1b', icon: "reset", scale: "s" })))), index.h("div", { key: '6c33ec4851d804dac7fd9762e3c8c7e416a27cf4', class: "edit-parent" }, index.h("div", { key: 'a6e9721127bbd43f9974af65e0899489370e1868', id: `${this.instanceid}-container`, class: "json-edit-container" }), index.h("div", { key: 'c1d1ea305c0e451c24beddb8ac3f8e85a3fca088', id: `${this.instanceid}-diff-container`, class: "json-edit-container display-none" })))));
     }
     //--------------------------------------------------------------------------
     //
@@ -2154,6 +2168,9 @@ const JsonEditor = class {
         }
     }
     static get assetsDirs() { return ["assets"]; }
+    static get watchers() { return {
+        "locale": ["localeWatchHandler"]
+    }; }
 };
 JsonEditor.style = JsonEditorStyle0;
 
@@ -2164,6 +2181,7 @@ const SolutionItemDetails = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.itemId = "";
+        this.locale = undefined;
         this.itemDetails = {
             accessInformation: "",
             description: "",
@@ -2180,6 +2198,19 @@ const SolutionItemDetails = class {
     get el() { return index.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
     //
     //--------------------------------------------------------------------------
@@ -2201,7 +2232,7 @@ const SolutionItemDetails = class {
      * Renders the component.
      */
     render() {
-        return (index.h(index.Host, { key: 'fd7cc19c2f682b43c71d43d1ec1313348345b415' }, index.h("div", { key: 'd38fbcb57a2cf536b99a50d73f7cb67791774419', class: "parent-container" }, index.h("div", { key: 'e6b97716b8ae90de71af758b07b055adc6d2a4d4', class: "inputBottomSeparation" }, index.h("calcite-input", { key: '6bb7bc4c0cb1eb082a3862582e2a1c72c8499d48', id: "item-title", value: this.itemDetails.title })), index.h("div", { key: 'daa80a28b1ee9a282048d57c3d1583fb0c1bd6c4', class: "inputBottomSeparation" }, index.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" }), index.h("button", { key: '8bdedcdf27d0ee7d0db030404940a4a6c7f6f586', class: "font-size--3 btn-link inline-block trailer-quarter", onClick: () => this._getThumbnail() }, index.h("svg", { key: 'e08bd937cdadd627a3a618a112cf1e617718deb4', class: "icon-inline icon-inline--on-left", height: "16", viewBox: "0 0 16 16", width: "16" }, index.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), index.h("div", { key: '44f12983273cfcda9720f34daf4bfa85952de2f1', class: "flex" }, index.h("div", { key: 'cb5d60f3164874dfc964b5727be89c7a37c31dec', class: "img-container", ref: (el) => (this.thumbnailContainer = el) }, index.h("img", { key: '0b1c39af99a3ecb3e558a77bd91ed0a751756e32', class: "scale-down", height: "133", id: "item-thumbnail", ref: (el) => (this.thumbnail = el), width: "200" })), index.h("div", { key: '751954b3200fe4133dca864212aba924bb547817', class: "snippet-count-container" }, index.h("calcite-input", { key: '071d1595f9b71b45ed12ee3cff8b5613e96acae7', id: "item-snippet", maxLength: 250, type: "textarea", value: this.itemDetails.snippet }), index.h("label", { key: '69238efe97f605880cde5f59dd967414c08b94a2', class: "font-size--3", id: "item-snippet-count", ref: (el) => (this.itemSnippetCount = el) })))), index.h("calcite-label", { key: 'd94607358c364fba61bc781b79f4919f50082db2' }, this._translations.description, index.h("label", { key: 'dbc9f48ee0ca4ad0150629635d027998b17101af', id: "item-description-label" }, index.h("calcite-input", { key: '152612af16b43f8ed4ad98405c885c11fec6cad7', id: "item-description", type: "textarea", value: this.itemDetails.description }))), index.h("calcite-label", { key: '0bec1e2c5464da93ebd49f0790cd573ef28e6e00' }, this._translations.tags, index.h("label", { key: '03957c08d3a9bc3a2707e65ae3a8d2870449b54f', id: "item-tags-label" }, index.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" ? index.h("calcite-label", null, this._translations.credits, index.h("label", { id: "item-credits-label" }, index.h("calcite-input", { id: "item-credits", value: this.itemDetails.accessInformation }))) : null, this.itemType !== "Group" ? index.h("calcite-label", null, index.h("label", { id: "item-terms-label" }, this._translations.termsOfUse, index.h("calcite-input", { id: "item-terms", type: "textarea", value: this.itemDetails.licenseInfo }))) : null)));
+        return (index.h(index.Host, { key: '9a0ddf363cb5e8abc5cbfd45ec0958befd81415d' }, index.h("div", { key: '0efb572f551fe4962ea9114bd32dc2004d47e00a', class: "parent-container" }, index.h("div", { key: '57ba57b956322c3339ea9265640def266717493b', class: "inputBottomSeparation" }, index.h("calcite-input", { key: 'e359cea6b2e94823970bbf8beb93e117963fa730', id: "item-title", value: this.itemDetails.title })), index.h("div", { key: 'c7b490a6f1f64ec2b10e8796ad3826d88e25280c', class: "inputBottomSeparation" }, index.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" }), index.h("button", { key: '12ece37e4d8ae802cb4fc2dbd3e1843496c674cb', class: "font-size--3 btn-link inline-block trailer-quarter", onClick: () => this._getThumbnail() }, index.h("svg", { key: '5301bac0dd37771122384b968aca05eb9a714a12', class: "icon-inline icon-inline--on-left", height: "16", viewBox: "0 0 16 16", width: "16" }, index.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), index.h("div", { key: 'c07d1d3b4f38672855b2a4f3cfd66b91d85ad050', class: "flex" }, index.h("div", { key: '7de852550f467b8bb0bd8fa87c72552747d7397b', class: "img-container", ref: (el) => (this.thumbnailContainer = el) }, index.h("img", { key: '7111cafeabac088b5ff729eed71746966ea66ae2', class: "scale-down", height: "133", id: "item-thumbnail", ref: (el) => (this.thumbnail = el), width: "200" })), index.h("div", { key: '4b0be864e8c38b9a8185ba301582a742cbf8188a', class: "snippet-count-container" }, index.h("calcite-input", { key: '9e307dc8a67f77dc61e0deeaf3aa528007921b1b', id: "item-snippet", maxLength: 250, type: "textarea", value: this.itemDetails.snippet }), index.h("label", { key: '83c0d63adc182afcb83f45bcbcec778552768b65', class: "font-size--3", id: "item-snippet-count", ref: (el) => (this.itemSnippetCount = el) })))), index.h("calcite-label", { key: '1e17c1ae545adb010e216ac566e9cba5eec1fc1a' }, this._translations.description, index.h("label", { key: 'c0e125cd881b013af6da14de78635f9922163e39', id: "item-description-label" }, index.h("calcite-input", { key: '1cf2cb27f67edfee86fc9a36ae296f81ef6c4429', id: "item-description", type: "textarea", value: this.itemDetails.description }))), index.h("calcite-label", { key: '1f61dee7f09260a0277af8a8e3d620e229ce4225' }, this._translations.tags, index.h("label", { key: '73820279fa0134328f24741857e028c89b5caebc', id: "item-tags-label" }, index.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" ? index.h("calcite-label", null, this._translations.credits, index.h("label", { id: "item-credits-label" }, index.h("calcite-input", { id: "item-credits", value: this.itemDetails.accessInformation }))) : null, this.itemType !== "Group" ? index.h("calcite-label", null, index.h("label", { id: "item-terms-label" }, this._translations.termsOfUse, index.h("calcite-input", { id: "item-terms", type: "textarea", value: this.itemDetails.licenseInfo }))) : null)));
     }
     componentDidRender() {
         this._loadThumb();
@@ -2346,6 +2377,9 @@ const SolutionItemDetails = class {
         const translations = await locale$1.getLocaleComponentStrings(this.el);
         this._translations = translations[0];
     }
+    static get watchers() { return {
+        "locale": ["localeWatchHandler"]
+    }; }
 };
 SolutionItemDetails.style = SolutionItemDetailsStyle0;
 
@@ -2356,14 +2390,28 @@ const SolutionItemSharing = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.groupId = "";
+        this.locale = undefined;
         this._translations = undefined;
         this.sharing = [];
     }
     get el() { return index.getElement(this); }
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
     itemIdWatchHandler() {
         const itemEdit = solutionStore.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
@@ -2379,7 +2427,7 @@ const SolutionItemSharing = class {
      * Renders the component.
      */
     render() {
-        return (index.h(index.Host, { key: '3b94a68c01079f717b1ff38b82f946a32cfcb3a4' }, index.h("div", { key: 'e2fd74849f827a5e9756182ead2c23b3ef9584b9', class: "container-border" }, index.h("calcite-label", { key: '4ac7e9adf98368d5f8b985519a8fd9d1ab24d5d6' }, this._translations.groupInfo), this._renderItems(this.sharing))));
+        return (index.h(index.Host, { key: '1c7dbee68fbf0eabf736fb783f173ade2f408122' }, index.h("div", { key: '3c3d88ab122d4a8bc69363224a2754c4a4b092ba', class: "container-border" }, index.h("calcite-label", { key: '137bb704b258a3cd1e5e5b7a18c53aca331d7f91' }, this._translations.groupInfo), this._renderItems(this.sharing))));
     }
     //--------------------------------------------------------------------------
     //
@@ -2463,7 +2511,8 @@ const SolutionItemSharing = class {
         this._translations = translations[0];
     }
     static get watchers() { return {
-        "groupId": ["itemIdWatchHandler"]
+        "groupId": ["itemIdWatchHandler"],
+        "locale": ["localeWatchHandler"]
     }; }
 };
 SolutionItemSharing.style = SolutionItemSharingStyle0;
@@ -2475,11 +2524,25 @@ const SolutionOrganizationVariables = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.organizationVariableSelected = index.createEvent(this, "organizationVariableSelected", 7);
+        this.locale = undefined;
         this.value = "";
         this._organizationVariables = [];
         this._translations = undefined;
     }
     get el() { return index.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);
     }
@@ -2498,7 +2561,7 @@ const SolutionOrganizationVariables = class {
      * Renders the component.
      */
     render() {
-        return (index.h(index.Host, { key: '0dd925da12c0eb9861637e78d74c75ad4a23c9f3' }, index.h("div", { key: '324cfdc588fce6ee5a69b7cd54956a0ab0ef0adf' }, index.h("h4", { key: '2fca69530272a3f0630b86d36bbc78ec651c45d1', class: "org-var-header" }, this._translations.orgVariables)), index.h("div", { key: '6f05088ebfaf50e4516c634f1a016275f4228c45', class: "container-border" }, index.h("calcite-tree", { key: '22585bb1a7cae978c3fbf7301d33b81b4fffb540', id: "variable-label" }, this._renderHierarchy(this._organizationVariables)))));
+        return (index.h(index.Host, { key: '3f72a5c1b8fb6bcdab858ee061eadb38cb9965d9' }, index.h("div", { key: '118c7cafc8330c44e72a59a76fd81ca0f39696e1' }, index.h("h4", { key: '86934bdf3cbf162a732a53579e324c5fff8beead', class: "org-var-header" }, this._translations.orgVariables)), index.h("div", { key: 'ed5c1df397286a7d1c8e61b5ce04623fa13d74cc', class: "container-border" }, index.h("calcite-tree", { key: '47f4f9bf5a81ded9a37a33a94fac6a230263e917', id: "variable-label" }, this._renderHierarchy(this._organizationVariables)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -2554,6 +2617,7 @@ const SolutionOrganizationVariables = class {
         this._translations = translations[0];
     }
     static get watchers() { return {
+        "locale": ["localeWatchHandler"],
         "value": ["valueWatchHandler"]
     }; }
 };
@@ -2567,11 +2631,17 @@ const SolutionResourceItem = class {
         index.registerInstance(this, hostRef);
         this.authentication = undefined;
         this.itemId = "";
+        this.locale = undefined;
         this.resourceFilePaths = [];
         this.resources = [];
         this._translations = undefined;
     }
     get el() { return index.getElement(this); }
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
     itemIdWatchHandler() {
         const item = solutionStore.state.getItemInfo(this.itemId);
         this.resourceFilePaths = item.resourceFilePaths;
@@ -2580,6 +2650,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
@@ -2596,7 +2674,7 @@ const SolutionResourceItem = class {
      */
     render() {
         const hasValidResources = this._hasValidResources();
-        return (index.h(index.Host, { key: '95659a6d3572354aef8a879694e41ab6821ca506' }, index.h("div", { key: 'fa34097cf27797000558b4ddb001ba7e89d8fe71', class: "resource-item" }, index.h("div", { key: 'a7797a17c4cef3e7189157b141fdbf5c3b34143c', class: "margin-bottom-1" }, index.h("calcite-button", { key: 'd6d70a4240348a12b2f4847abc3806ef46064871', appearance: "solid", class: "resource-button", color: "blue", onClick: () => this._addNewResource() }, this._translations.addResource), index.h("calcite-button", { key: 'c9a73c13a223b8120965bcf092ef63c6a9443f43', appearance: "solid", color: "blue", disabled: !hasValidResources, onClick: () => this._downloadAll() }, this._translations.downloadAll)), index.h("div", { key: '0eb74fd024fc421b94391984b842a4a7ffd491c5', class: "resources-container", style: { display: hasValidResources ? "inherit" : "none" } }, this._renderResourceList()))));
+        return (index.h(index.Host, { key: '13f2759a882d2eca48bf9dda58e74caade76142b' }, index.h("div", { key: '498ced2e29b8af9138a8aa9d77ec78e07e3c64de', class: "resource-item" }, index.h("div", { key: 'd76a967373a990906a67d88ea6466030c41401ff', class: "margin-bottom-1" }, index.h("calcite-button", { key: '96cd2ee08adadef9e1b29db12c38d4748b0689c0', appearance: "solid", class: "resource-button", color: "blue", onClick: () => this._addNewResource() }, this._translations.addResource), index.h("calcite-button", { key: '49326139cad065995512d3e3568c7d8e7f5cef4f', appearance: "solid", color: "blue", disabled: !hasValidResources, onClick: () => this._downloadAll() }, this._translations.downloadAll)), index.h("div", { key: '9c056d9ab7242ea10cbcf57eaabce4bd9777541e', class: "resources-container", style: { display: hasValidResources ? "inherit" : "none" } }, this._renderResourceList()))));
     }
     _removedResources = {};
     //--------------------------------------------------------------------------
@@ -2818,7 +2896,8 @@ const SolutionResourceItem = class {
         this._translations = translations[0];
     }
     static get watchers() { return {
-        "itemId": ["itemIdWatchHandler"]
+        "itemId": ["itemIdWatchHandler"],
+        "locale": ["localeWatchHandler"]
     }; }
 };
 SolutionResourceItem.style = SolutionResourceItemStyle0;
@@ -2836,6 +2915,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
     //
     //--------------------------------------------------------------------------
@@ -2843,6 +2935,7 @@ const SolutionTemplateData = class {
         index.registerInstance(this, hostRef);
         this.instanceid = "";
         this.itemId = "";
+        this.locale = undefined;
         this.organizationVariables = "";
         this.solutionVariables = "";
         this.varsOpen = true;
@@ -2878,7 +2971,7 @@ const SolutionTemplateData = class {
      * Renders the component.
      */
     render() {
-        return (index.h(index.Host, { key: '3e0a532158fffbba07faee43152573eb3577da84' }, index.h("div", { key: '5631eb64e45d31465361491e9585c8eddd04dce7', class: "solution-data-container" }, index.h("calcite-shell", { key: '9b065784804b86fa1c09c9d7e5f173a6ea793883', class: "light var-container", dir: "ltr" }, index.h("calcite-panel", { key: '254dcf1c48812c98a69bac8e7b6ca91a39eb9cff', class: "json-editor" }, index.h("div", { key: '86f686a03298bb06b8b855ae59a66e42cec25ad4', class: "solution-data-child-container calcite-match-height" }, index.h("json-editor", { key: '0549a48a16bb94ed7be3064f4b622b1a10563bfd', class: "solution-data-editor-container", instanceid: this.itemId + "|" + this.instanceid, value: this.value }))), index.h("calcite-shell-panel", { key: 'a3879f3d3b95d2878a5ec98265a6a120c78366f6', "height-scale": "l", position: "end", slot: "contextual-panel", "width-scale": "xs" }, index.h("div", { key: '4e8a2206eb7e57e8beb5e854f3cd66d7bae96101', class: this.varsOpen ? "solution-data-child-container" : "solution-data-child-container-collapsed" }, index.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 }), index.h("div", { key: 'a1064c394bb1a9c95493a052057bdfb2ccc7b20a', class: this.varsOpen ? "org-vars" : "org-vars display-none", id: "orgVars" }, index.h("solution-organization-variables", { key: '19ef108d689b875a329a22f0729f34bd3c5edbd1', value: this.organizationVariables })), index.h("div", { key: '3671681ffde2ef2aae1a84c608fbe08c0f4e7bcc', class: this.varsOpen ? "sol-vars" : "sol-vars display-none", id: "solVars" }, index.h("solution-variables", { key: '7bdbb7baedf02ff299e620741995a393c4bf976d', value: this.solutionVariables }))))))));
+        return (index.h(index.Host, { key: '3f853006c19509c8cf484d4420b3f687aaad5161' }, index.h("div", { key: 'f524e1ee3c8dc972779be0909372c11c26092dd0', class: "solution-data-container" }, index.h("calcite-shell", { key: '56797702bc53b08051360975dc529c884eb7d294', class: "light var-container", dir: "ltr" }, index.h("calcite-panel", { key: '6208ac7b63ab8b69bc29ad88abdb9bcdeaaa707a', class: "json-editor" }, index.h("div", { key: '66e99550359b5665b4dd04f794d8108e4ee34284', class: "solution-data-child-container calcite-match-height" }, index.h("json-editor", { key: '7a7f5afa5d424fb6099b7167f274ce211e791a56', class: "solution-data-editor-container", instanceid: this.itemId + "|" + this.instanceid, locale: this.locale, value: this.value }))), index.h("calcite-shell-panel", { key: '7cc8bac91bfc5be96018d005cc87be457278ed6d', "height-scale": "l", position: "end", slot: "contextual-panel", "width-scale": "xs" }, index.h("div", { key: '4ce0c251d30d5735781394f5c213523867205886', class: this.varsOpen ? "solution-data-child-container" : "solution-data-child-container-collapsed" }, index.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 }), index.h("div", { key: '6b872cfc1c60870fb6262808f5d9f61cc35f0f44', class: this.varsOpen ? "org-vars" : "org-vars display-none", id: "orgVars" }, index.h("solution-organization-variables", { key: 'e8e9ee594b6dcb5ddaabd05c322fb33d568ac7b5', locale: this.locale, value: this.organizationVariables })), index.h("div", { key: '109d17a77a54a13818af6aa2a9beb92526100ea7', class: this.varsOpen ? "sol-vars" : "sol-vars display-none", id: "solVars" }, index.h("solution-variables", { key: '46902ed69897ed01334def99817fedafbda2e8d5', locale: this.locale, value: this.solutionVariables }))))))));
     }
     _initializing = false;
     //--------------------------------------------------------------------------
@@ -2917,7 +3010,8 @@ const SolutionTemplateData = class {
         this._translations = translations[0];
     }
     static get watchers() { return {
-        "itemId": ["itemIdWatchHandler"]
+        "itemId": ["itemIdWatchHandler"],
+        "locale": ["localeWatchHandler"]
     }; }
 };
 SolutionTemplateData.style = SolutionTemplateDataStyle0;
@@ -2930,10 +3024,24 @@ const SolutionVariables = class {
         index.registerInstance(this, hostRef);
         this.solutionVariableSelected = index.createEvent(this, "solutionVariableSelected", 7);
         this.value = "";
+        this.locale = undefined;
         this._solutionVariables = [];
         this._translations = undefined;
     }
     get el() { return index.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);
     }
@@ -2952,7 +3060,7 @@ const SolutionVariables = class {
      * Renders the component.
      */
     render() {
-        return (index.h(index.Host, { key: 'a600c4dc88ee4ea3f9d7810695f71283f834933b' }, index.h("div", { key: 'c5c2abd0d19c778366c04dfd6b04f26bcb86b59b' }, index.h("h4", { key: '087db039abd818f71838c88ef09eafc46d18b5c8', class: "org-var-header" }, this._translations.solVariables)), index.h("div", { key: 'd524981a512342d18d616137c7951f7c0f3f870b', class: "container-border" }, index.h("calcite-tree", { key: '4630d4aa5a35d3e3a173e3aaae9b35b0dd636b4f', id: "variable-label" }, this._renderHierarchy(this._solutionVariables)))));
+        return (index.h(index.Host, { key: 'a90cdfc9a32279cb07938fc57f9dd7e38d822f6d' }, index.h("div", { key: '6826e3dd84034368f419ff759962a721a275dc9c' }, index.h("h4", { key: '5ebdf456e8c4dc006b036dc182fa75218aac0e01', class: "org-var-header" }, this._translations.solVariables)), index.h("div", { key: '06fc04c1e61dc1897989e3cc11df7b173f1fdb2a', class: "container-border" }, index.h("calcite-tree", { key: '15500194129af7440ec05dc495b060fc18f22324', id: "variable-label" }, this._renderHierarchy(this._solutionVariables)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -3019,6 +3127,7 @@ const SolutionVariables = class {
         this._translations = translations[0];
     }
     static get watchers() { return {
+        "locale": ["localeWatchHandler"],
         "value": ["valueWatchHandler"]
     }; }
 };

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

@@ -219,6 +219,7 @@ const DeleteButton = class {
         this.icon = undefined;
         this.ids = [];
         this.layer = undefined;
+        this.locale = undefined;
         this._confirmDelete = false;
         this._deleteEndabled = false;
         this._supportsDelete = undefined;
@@ -247,6 +248,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)
@@ -278,7 +287,7 @@ const DeleteButton = class {
      * Renders the component.
      */
     render() {
-        return (index.h(index.Host, { key: '4ced17b35479900aaa01ebbd298eeae57194e358' }, this.buttonType === "button" ? (index.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()))) : (index.h("calcite-action", { appearance: "solid", compact: true, disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s", text: this._translations.delete }, index.h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage(), index.h("calcite-tooltip", { key: '04f82e726cf9142c403ee43cb8151027bb7b617f', placement: "bottom", "reference-element": this.buttonType === "button" ? "solutions-delete" : this.icon }, index.h("span", { key: 'f7852b2476dae4b18e82495c64a819b3db98696d' }, this._translations.delete))));
+        return (index.h(index.Host, { key: '1816da3d5cd7903b4e699dffa4ac4836dca722bb' }, this.buttonType === "button" ? (index.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()))) : (index.h("calcite-action", { appearance: "solid", compact: true, disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s", text: this._translations.delete }, index.h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage(), index.h("calcite-tooltip", { key: '26fc4d4b4ea02b7a6c5e3f87abe2c5b8f96a3654', placement: "bottom", "reference-element": this.buttonType === "button" ? "solutions-delete" : this.icon }, index.h("span", { key: 'c2f7b101bb3a99274fe7f364ad29365c212d856e' }, this._translations.delete))));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -312,7 +321,7 @@ const DeleteButton = class {
      * @returns node to confirm or deny the delete operation
      */
     _deleteMessage() {
-        return this.deleteDialog ? this.deleteDialog : (index.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 : (index.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
@@ -326,7 +335,8 @@ const DeleteButton = class {
     }
     static get watchers() { return {
         "ids": ["idsWatchHandler"],
-        "layer": ["layerWatchHandler"]
+        "layer": ["layerWatchHandler"],
+        "locale": ["localeWatchHandler"]
     }; }
 };
 DeleteButton.style = DeleteButtonStyle0;
@@ -341,6 +351,7 @@ const DeleteDialog = class {
         this.deleteDialogClose = index.createEvent(this, "deleteDialogClose", 7);
         this.ids = [];
         this.layer = undefined;
+        this.locale = undefined;
         this.open = false;
         this._isDeleting = false;
         this._translations = undefined;
@@ -356,6 +367,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)
@@ -393,7 +412,7 @@ const DeleteDialog = class {
     render() {
         const confirmMessage = this.ids.length === 1 ? this._translations?.confirmSingle :
             this._translations?.confirmMultiple;
-        return (index.h(index.Host, { key: '64cd1440f80a9609f90056b919fa807e975eff70' }, index.h("calcite-modal", { key: '022302455960cbcf894dc2f0079d88be6fb59367', "aria-labelledby": "modal-title", class: "delete-modal", kind: "danger", onCalciteModalClose: () => this._close(), open: this.open, widthScale: "s" }, index.h("div", { key: '7484caedbdd759efbe972182ddd41a6ebaa2bd64', class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations?.deleteFeature), index.h("div", { key: 'e31136a6eed46dd0cbc4d919deb732a623097fbf', slot: "content" }, confirmMessage), index.h("calcite-button", { key: '7de42845a99777bcec59221fb6ab863e72ca2654', appearance: "outline", kind: "danger", onClick: () => this._close(), slot: "secondary", width: "full" }, this._translations?.cancel), index.h("calcite-button", { key: '67921ff64fc5c4439e66833fd8502f7e95671b5d', kind: "danger", loading: this._isDeleting, onClick: () => void this._deleteFeatures(), slot: "primary", width: "full" }, this._translations?.delete))));
+        return (index.h(index.Host, { key: 'eafca7d4325c65ff21fbfeaa24ea14e95bc25a34' }, index.h("calcite-modal", { key: '745e52d7b23318492914662cc769a1206baefd28', "aria-labelledby": "modal-title", class: "delete-modal", kind: "danger", onCalciteModalClose: () => this._close(), open: this.open, widthScale: "s" }, index.h("div", { key: '363614f6eaf30c30c6c2ccde3875dfff5cd94088', class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations?.deleteFeature), index.h("div", { key: 'b3b6f74495894589b7fd8be54265c4a69ffaa62e', slot: "content" }, confirmMessage), index.h("calcite-button", { key: 'd325fcf12624bac39f56ec690f7e4e9660789891', appearance: "outline", kind: "danger", onClick: () => this._close(), slot: "secondary", width: "full" }, this._translations?.cancel), index.h("calcite-button", { key: '73a10546ad92065c949bfacca3eb3d508685030e', kind: "danger", loading: this._isDeleting, onClick: () => void this._deleteFeatures(), slot: "primary", width: "full" }, this._translations?.delete))));
     }
     //--------------------------------------------------------------------------
     //
@@ -432,6 +451,9 @@ const DeleteDialog = class {
         const messages = await locale.getLocaleComponentStrings(this.el);
         this._translations = messages[0];
     }
+    static get watchers() { return {
+        "locale": ["localeWatchHandler"]
+    }; }
 };
 DeleteDialog.style = DeleteDialogStyle0;