@esri/solutions-components 0.10.39 → 0.10.41

package/dist/collection/components/map-tools/map-tools.js

@@ -33,6 +33,7 @@ export class MapTools {
         this.enableSingleExpand = undefined;
         this.homeZoomToolsSize = "m";
         this.layout = "vertical";
+        this.locale = undefined;
         this.mapView = undefined;
         this.mapWidgetsSize = "m";
         this.position = "top-right";
@@ -93,6 +94,14 @@ export class MapTools {
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
     /**
      * When the mapView loads check if it supports floor awareness
      */
@@ -213,7 +222,7 @@ export class MapTools {
         const toolMarginClass = this.enableSingleExpand ? "margin-top-1-2" : "";
         const toolOrder = this.toolOrder ? this.toolOrder : ["legend", "search", "fullscreen", "floorfilter"];
         const shadowClass = this.stackTools ? "box-shadow" : "";
-        return (h(Host, { key: '224b99c53e7f8ac9c072efbd2c2093c6c9684a9a' }, h("div", { key: 'ead56063c6aa28146d4c50044b6e7c98fd2ed1ab', class: containerClass }, this.enableSingleExpand ? (h("div", { class: "box-shadow" }, this._getActionGroup(toggleIcon, false, expandTip, () => this._toggleTools()))) : undefined, h("div", { key: '3fd7a2bd6225c10b89e282d4521486ad7eb5802a', class: `${toolMarginClass} ${shadowClass} ${toolsClass}` }, this._getMapWidgets(toolOrder))), h("basemap-gallery", { key: '43063099ee4b3a72d96b2ae6e4ca750dff109ae2', basemapConfig: this.basemapConfig, class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { key: '5c149ea67f2a2450864e968a50acce565d95e0b6', class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, resultGraphicEnabled: true, searchConfiguration: this.searchConfiguration }), h("map-legend", { key: 'd3add3a5f820c5d654fec793d3e6e46b6a8919a3', class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), h("map-fullscreen", { key: 'e18a3a5d021d76e7c8fa9ecf3903105d5a43bed2', class: fullscreenClass, mapView: this.mapView, onFullscreenStateChange: (evt) => this._fullscreenStateChange(evt.detail), ref: (el) => { this._fullscreenElement = el; } }), h("floor-filter", { key: 'cb5d92e503248818e9627ba4ee8d70c81495599d', class: floorFilterClass, enabled: this.enableFloorFilter, mapView: this.mapView, ref: (el) => { this._floorFilterElement = el; } })));
+        return (h(Host, { key: '6287cfedcd109c621812cc823ee75487a166f7c0' }, h("div", { key: '6f3f1a8ff1fb9c1d671be044143eec4ca6708062', class: containerClass }, this.enableSingleExpand ? (h("div", { class: "box-shadow" }, this._getActionGroup(toggleIcon, false, expandTip, () => this._toggleTools()))) : undefined, h("div", { key: '156511461a6b6c4a98b47c62460754405f101574', class: `${toolMarginClass} ${shadowClass} ${toolsClass}` }, this._getMapWidgets(toolOrder))), h("basemap-gallery", { key: '7975fa8c2db0c3fc10534d538bc593f8543b330e', basemapConfig: this.basemapConfig, class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { key: 'd7df2b0010bc62b9d2a9601018a962d3e8df2561', class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, resultGraphicEnabled: true, searchConfiguration: this.searchConfiguration }), h("map-legend", { key: '1bd19b87e9def0b81251aa422ef0024a938bd93d', class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), h("map-fullscreen", { key: 'c5a68a86acc284af7659f467f2fe98c6168b619e', class: fullscreenClass, mapView: this.mapView, onFullscreenStateChange: (evt) => this._fullscreenStateChange(evt.detail), ref: (el) => { this._fullscreenElement = el; } }), h("floor-filter", { key: '8d596ddeb353ac85635aa3ef550708e4ec4d5706', class: floorFilterClass, enabled: this.enableFloorFilter, mapView: this.mapView, ref: (el) => { this._floorFilterElement = el; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -587,6 +596,23 @@ export class MapTools {
                 "reflect": false,
                 "defaultValue": "\"vertical\""
             },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: Locale to use for translation of stings in the UI"
+                },
+                "attribute": "locale",
+                "reflect": false
+            },
             "mapView": {
                 "type": "unknown",
                 "mutable": false,
@@ -719,6 +745,9 @@ export class MapTools {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "locale",
+                "methodName": "localeWatchHandler"
+            }, {
                 "propName": "mapView",
                 "methodName": "mapViewWatchHandler"
             }, {

package/dist/collection/components/pci-calculator/pci-calculator.js

@@ -70,7 +70,7 @@ export class PciCalculator {
     render() {
         const pciClass = !this.showAddDeduct ? "display-grid" : "display-none";
         const deductClass = this.showAddDeduct ? "position-relative" : "display-none";
-        return (h(Host, { key: '25ddbf1fb00f5af4c91cda2b11d7f0e10f3a4272' }, h("div", { key: 'c13a5d8278ced35b481186cd98f2f2d3d18690bc', class: pciClass }, h("div", { key: '3203231a8fdd3cd733c99f980035cfa113acbdd9', class: "label-display" }, h("calcite-label", { key: '2737467a3e3b28b76cecf0aaf7e60be0a585b3d8', class: "label-display" }, "Enter comma delimited deduct values", this._getDeductValuesInput())), h("div", { key: '0ee41c12738a53e914920122a57c70f20925e71d' }, this._getCalculateButton())), h("div", { key: '469feebb033359a3dbbc30175b88605c25a4d0d5', class: deductClass }, h("div", { key: '4615ba630e031b7f0166fa67e5e88ea5c1f1537b', class: "position-right" }, h("calcite-action", { key: 'afde404a2f1d3cbf63f6d28a8eb8bfde64da7daa', appearance: 'transparent', class: "float-end", icon: "x", onClick: () => this._toggleShowAddDeduct(), scale: "s", text: '' })), h("deduct-calculator", { key: 'd383b7ee41a508adab58e2dfdadfb1c7a85e4c25', class: "display-grid padding-top-1", onDeductValueComplete: (evt) => this._addDeductValue(evt) }))));
+        return (h(Host, { key: '0a27b15813b9f82035a8c7b4c080f5ec77379959' }, h("div", { key: '88ce37117354223c9264678a3928485dc8e1d890', class: pciClass }, h("div", { key: 'e0c9f6402c74c7e28749717ab78ac542dc2476f7', class: "label-display" }, h("calcite-label", { key: '5bad9788cbd44419f051e3108d18e530a5819267', class: "label-display" }, "Enter comma delimited deduct values", this._getDeductValuesInput())), h("div", { key: 'bca334a6b4dc0920b880210c03e6d57dcdcae4e2' }, this._getCalculateButton())), h("div", { key: 'a401fa9e71ee5ed376445829d83528fd9e02ed2c', class: deductClass }, h("div", { key: 'c5d16b77848e0b024022cad7b10d75ac9acf53b7', class: "position-right" }, h("calcite-action", { key: '479efde007ee63b86c2e4cb2243afd0d1ee5fc4d', appearance: 'transparent', class: "float-end", icon: "x", onClick: () => this._toggleShowAddDeduct(), scale: "s", text: '' })), h("deduct-calculator", { key: '40c6f7839584f0edcfe77f08d5e895ece6ba7119', class: "display-grid padding-top-1", onDeductValueComplete: (evt) => this._addDeductValue(evt) }))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/pdf-download/pdf-download.js

@@ -28,6 +28,7 @@ export class PdfDownload {
     constructor() {
         this.defaultNumLabelsPerPage = undefined;
         this.disabled = false;
+        this.locale = undefined;
         this._translations = undefined;
     }
     //--------------------------------------------------------------------------
@@ -54,6 +55,14 @@ export class PdfDownload {
     //  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)
@@ -106,7 +115,7 @@ export class PdfDownload {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '3d3fa11ecc4cf7a49c4b3831a6c4c19abd6c9ed9' }, h("calcite-select", { key: '74e76d8854fd582d2ed214c1b8f52c5744be8167', disabled: this.disabled, label: "", ref: (el) => { this._labelInfoElement = el; } })));
+        return (h(Host, { key: '019e3669b3c0f1c9532b3c3a5d578a8fe3c2eb4c' }, h("calcite-select", { key: 'b23425e171aea621dfdc6b3a97c38edc4b477696', disabled: this.disabled, label: "", ref: (el) => { this._labelInfoElement = el; } })));
     }
     componentDidLoad() {
         // Render the options outside of Stencil's rendering so that it doesn't mangle RTL text with embedded LTR
@@ -225,6 +234,23 @@ export class PdfDownload {
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: Locale to use for translation of stings in the UI"
+                },
+                "attribute": "locale",
+                "reflect": false
             }
         };
     }
@@ -363,4 +389,10 @@ export class PdfDownload {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "locale",
+                "methodName": "localeWatchHandler"
+            }];
+    }
 }

package/dist/collection/components/public-notification/public-notification.js

@@ -139,6 +139,14 @@ export class PublicNotification {
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
     /**
      * Called each time the mapView prop is changed.
      */
@@ -265,7 +273,7 @@ export class PublicNotification {
      */
     render() {
         const headerSlot = this._isMobile ? "footer" : "header";
-        return (h(Host, { key: '8b22f6b45144705e9ff5b230ca8075f68985165b' }, h("calcite-shell", { key: '774731e643edb5b52bf565349fdfe58dae1e845e' }, h("calcite-action-bar", { key: '5e3bcc6ba2f53d25ee2bd972ce67108c0ab808f4', class: "border-bottom-1 action-bar-size", "expand-disabled": true, layout: "horizontal", slot: headerSlot }, this._getActionGroup("list-check", EPageType.LIST, this._translations.myLists), this.showRefineSelection ? this._getActionGroup("test-data", EPageType.REFINE, this._translations.refineSelection) : null, this._getActionGroup("export", EPageType.EXPORT, this._translations.export)), this._getPage(this._pageType))));
+        return (h(Host, { key: '1955aa1e3791004b62c7d6d51fbd7dabacbe6cc6' }, h("calcite-shell", { key: '5d269f036d96fd8364dab1dcf1c820e5516c6236' }, h("calcite-action-bar", { key: '1ab0388a35fccbe9b293279a61384e30065b193d', class: "border-bottom-1 action-bar-size", "expand-disabled": true, layout: "horizontal", slot: headerSlot }, this._getActionGroup("list-check", EPageType.LIST, this._translations.myLists), this.showRefineSelection ? this._getActionGroup("test-data", EPageType.REFINE, this._translations.refineSelection) : null, this._getActionGroup("export", EPageType.EXPORT, this._translations.export)), this._getPage(this._pageType))));
     }
     /**
      * StencilJS: Called once just after the component is first loaded.
@@ -635,7 +643,7 @@ export class PublicNotification {
         const graphicsOptionsClass = this._addMap ? "display-flex" : "display-none";
         const title = this._titleValue ? this._titleValue : this.defaultExportTitle ? this.defaultExportTitle : "";
         const formatOptionsClass = this._addResults ? "" : "display-none";
-        return (h("div", { class: displayClass }, this._getLabel(this._translations.pdfOptions, true), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addResults, onCalciteCheckboxChange: () => this._addResults = !this._addResults }), this._translations.addResults)), h("div", { class: `padding-top-sides-1 ${formatOptionsClass}` }, h("calcite-label", { class: "label-margin-0" }, this._translations.selectPDFLabelOption)), h("div", { class: `padding-sides-1 ${formatOptionsClass}` }, h("pdf-download", { defaultNumLabelsPerPage: parseInt(this.defaultNumLabelsPerPage.toString(), 10), disabled: !this._downloadActive, ref: (el) => { this._downloadTools = el; } })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addTitle, onCalciteCheckboxChange: () => this._addTitle = !this._addTitle }), this._translations.title)), h("div", { class: titleOptionsClass }, this._getLabel(this._translations.title, true, ""), h("calcite-input-text", { class: "padding-sides-1", onCalciteInputTextInput: () => this._changeTitle(), placeholder: this._translations.titlePlaceholder, ref: (el) => { this._titleElement = el; }, value: title })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addMap, onCalciteCheckboxChange: () => this._handleAddMapChange() }), this._translations.includeMap)), h("div", { class: `padding-top-sides-1 ${graphicsOptionsClass}` }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._exportGraphics, onCalciteCheckboxChange: () => this._handleExportGraphicsChange() }), this._translations.listGraphics), h("calcite-icon", { class: "padding-start-1-2 icon", flipRtl: !(this.locale?.toLowerCase() === "he"), icon: "question", id: "list-graphics-icon", scale: "s" }), h("calcite-popover", { closable: true, label: "", referenceElement: "list-graphics-icon" }, h("span", { class: "tooltip-message" }, this._translations.listGraphicsTip)))));
+        return (h("div", { class: displayClass }, this._getLabel(this._translations.pdfOptions, true), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addResults, onCalciteCheckboxChange: () => this._addResults = !this._addResults }), this._translations.addResults)), h("div", { class: `padding-top-sides-1 ${formatOptionsClass}` }, h("calcite-label", { class: "label-margin-0" }, this._translations.selectPDFLabelOption)), h("div", { class: `padding-sides-1 ${formatOptionsClass}` }, h("pdf-download", { defaultNumLabelsPerPage: parseInt(this.defaultNumLabelsPerPage.toString(), 10), disabled: !this._downloadActive, locale: this.locale, ref: (el) => { this._downloadTools = el; } })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addTitle, onCalciteCheckboxChange: () => this._addTitle = !this._addTitle }), this._translations.title)), h("div", { class: titleOptionsClass }, this._getLabel(this._translations.title, true, ""), h("calcite-input-text", { class: "padding-sides-1", onCalciteInputTextInput: () => this._changeTitle(), placeholder: this._translations.titlePlaceholder, ref: (el) => { this._titleElement = el; }, value: title })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addMap, onCalciteCheckboxChange: () => this._handleAddMapChange() }), this._translations.includeMap)), h("div", { class: `padding-top-sides-1 ${graphicsOptionsClass}` }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._exportGraphics, onCalciteCheckboxChange: () => this._handleExportGraphicsChange() }), this._translations.listGraphics), h("calcite-icon", { class: "padding-start-1-2 icon", flipRtl: !(this.locale?.toLowerCase() === "he"), icon: "question", id: "list-graphics-icon", scale: "s" }), h("calcite-popover", { closable: true, label: "", referenceElement: "list-graphics-icon" }, h("span", { class: "tooltip-message" }, this._translations.listGraphicsTip)))));
     }
     /**
      * Toggle the _addMap state variable and update the graphics on the map
@@ -1586,6 +1594,9 @@ export class PublicNotification {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "locale",
+                "methodName": "localeWatchHandler"
+            }, {
                 "propName": "mapView",
                 "methodName": "mapViewWatchHandler"
             }, {

package/dist/collection/components/refine-selection/refine-selection.js

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

package/dist/collection/components/share-item/share-item.js

@@ -62,7 +62,7 @@ export class ShareItem {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: 'f75bf37744be419135dc159befbf2abed84855dc' }, h("slot", { key: '7607ea33ff10e828c2f2f7e2d3d360491ca2e482' })));
+        return (h(Host, { key: 'a8d200d4f119571b482fa8c9f87d759458157fe3' }, h("slot", { key: 'fcac9d578b04a4330016dfbb09c0a38735d7f2e7' })));
     }
     static get is() { return "share-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,11 +39,25 @@ export class SolutionConfiguration {
     }
     //--------------------------------------------------------------------------
     //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
+    //--------------------------------------------------------------------------
+    //
     //  Lifecycle
     //
     //--------------------------------------------------------------------------
     constructor() {
         this.authentication = new UserSession({});
+        this.locale = undefined;
         this.serializedAuthentication = "";
         this.solutionItemId = "";
         this.showLoading = false;
@@ -86,12 +100,12 @@ export class SolutionConfiguration {
         const solutionData = state.getStoreInfo("solutionData");
         this._solutionVariables = JSON.stringify(utils.getSolutionVariables(solutionData.templates, this._translations));
         this._organizationVariables = JSON.stringify(utils.getOrganizationVariables(this._translations));
-        return (h(Host, { key: '08cdec33157c18874228bb7bcda82fd901945d02' }, !this._solutionIsLoaded
+        return (h(Host, { key: 'd80cc0f64b56dd3a8c09d6e024e069d24c12293d' }, !this._solutionIsLoaded
             ? h("calcite-loader", { label: '' })
-            : null, h("div", { key: 'd0879082066b862e136e13986c4794d33f454b72', class: "configuration-container" }, h("div", { key: '499fb11ca6715151d6099aa24cfc0a7514c0fa84', class: "configuration" }, h("calcite-tabs", { key: '3376e20f7d1145f6c0afb4e888f55c93e971c2b2', class: "config-tabs" }, h("calcite-tab-nav", { key: 'f35ab50ff86a62b7ba6c96c23a2541622555bdf5', slot: "tab-nav" }, h("calcite-tab-title", { key: '1ee9c1381b78a8f644c1b830a86c9b5a531f6f72' }, this._translations.definitionTab), hasServices ?
+            : null, h("div", { key: 'f24cf4b573829ccd47e7d3a7751724d08e132415', class: "configuration-container" }, h("div", { key: 'd64771a9775435e9eb5ed9aeb52449c363486376', class: "configuration" }, h("calcite-tabs", { key: 'a8aab9934676aee18425a67fbd599887c4d87f36', class: "config-tabs" }, h("calcite-tab-nav", { key: '69cbb95f6a50d9886ab97b8f3c05a00ea51b937a', slot: "tab-nav" }, h("calcite-tab-title", { key: '911bb46f0bb14981347b1d30a30ef3451184f987' }, this._translations.definitionTab), hasServices ?
             h("calcite-tab-title", null, this._translations.spatialReferenceTab) :
-            null), h("calcite-tab", { key: '0a7df1b0a81334da90d2d04a7f7867d529aaa55d', class: "config-tab", selected: true }, h("div", { key: '024773d4bd5fcf8c83af8a7a07b0193231bb2e24', class: "config-solution" }, h("div", { key: '37cea9d9565b489357aaf1c11c6fb5f7d2746cfd', class: this._treeOpen ? "config-inventory" : "config-inventory-hide" }, h("solution-contents", { id: "configInventory", key: `${this.solutionItemId}-contents`, ref: (el) => (this._solutionContentsComponent = el) })), h("calcite-button", { key: '140bcd46e2c4ca519311ae4d9ea62a5f9ac36c29', appearance: "transparent", class: "collapse-btn", "icon-start": this._treeOpen ? "chevrons-left" : "chevrons-right", id: "collapse-vars", onClick: () => this._toggleTree(), scale: "s", title: this._treeOpen ? this._translations.collapse : this._translations.expand }), h("div", { key: 'c727ebda3f2efe5dd85a5e3b3b1625b1ff56769e', class: "config-item" }, h("solution-item", { authentication: this.authentication, "item-id": this._currentEditItemId, key: `${this.solutionItemId}-item`, "organization-variables": this._organizationVariables, "solution-item-id": this.solutionItemId, "solution-variables": this._solutionVariables })))), hasServices
-            ? h("calcite-tab", { class: "config-tab" }, h("div", { class: "config-solution" }, h("solution-spatial-ref", { enableDefault: !!spatialReferenceInfo.default, enabled: spatialReferenceInfo?.enabled, featureServices: state.getStoreInfo("featureServices").map(fs => fs.name), id: "configure-solution-spatial-ref", key: `${this.solutionItemId}-spatial-ref` })))
+            null), h("calcite-tab", { key: 'db3f2b1102a7e47183904c2c17dededdfba7f863', class: "config-tab", selected: true }, h("div", { key: '7e7651392f73499e9454ccd2b5ed335d63d02db6', class: "config-solution" }, h("div", { key: '36d895fadc1e6509a16537a4628d51dd9f7153eb', class: this._treeOpen ? "config-inventory" : "config-inventory-hide" }, h("solution-contents", { id: "configInventory", key: `${this.solutionItemId}-contents`, ref: (el) => (this._solutionContentsComponent = el) })), h("calcite-button", { key: 'aa965867d04aebd46dbaae4ddd34f655dc77dd40', appearance: "transparent", class: "collapse-btn", "icon-start": this._treeOpen ? "chevrons-left" : "chevrons-right", id: "collapse-vars", onClick: () => this._toggleTree(), scale: "s", title: this._treeOpen ? this._translations.collapse : this._translations.expand }), h("div", { key: 'a02de6d666c1017f7d3ad08878ecc381d01e4632', class: "config-item" }, h("solution-item", { authentication: this.authentication, "item-id": this._currentEditItemId, key: `${this.solutionItemId}-item`, locale: this.locale, "organization-variables": this._organizationVariables, "solution-item-id": this.solutionItemId, "solution-variables": this._solutionVariables })))), hasServices
+            ? h("calcite-tab", { class: "config-tab" }, h("div", { class: "config-solution" }, h("solution-spatial-ref", { enableDefault: !!spatialReferenceInfo.default, enabled: spatialReferenceInfo?.enabled, featureServices: state.getStoreInfo("featureServices").map(fs => fs.name), id: "configure-solution-spatial-ref", key: `${this.solutionItemId}-spatial-ref`, locale: this.locale })))
             : null)))));
     }
     _solutionStoreHasChanges = false;
@@ -601,6 +615,23 @@ export class SolutionConfiguration {
                 },
                 "defaultValue": "new UserSession({})"
             },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: Locale to use for translation of stings in the UI"
+                },
+                "attribute": "locale",
+                "reflect": false
+            },
             "serializedAuthentication": {
                 "type": "string",
                 "mutable": true,
@@ -737,6 +768,9 @@ export class SolutionConfiguration {
             }, {
                 "propName": "solutionItemId",
                 "methodName": "valueWatchHandler"
+            }, {
+                "propName": "locale",
+                "methodName": "localeWatchHandler"
             }];
     }
     static get listeners() {

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

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

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

@@ -26,6 +26,7 @@ export class SolutionItem {
     constructor() {
         this.authentication = undefined;
         this.itemId = "";
+        this.locale = undefined;
         this.solutionVariables = "";
         this.organizationVariables = "";
         this.itemType = undefined;
@@ -43,6 +44,19 @@ export class SolutionItem {
     }
     //--------------------------------------------------------------------------
     //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
+    //--------------------------------------------------------------------------
+    //
     //  Lifecycle
     //
     //--------------------------------------------------------------------------
@@ -56,7 +70,7 @@ export class SolutionItem {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '25113cc21fc2c6ffa30daff180f2ee95bfb1c619' }, h("div", { key: '30c87a13e5fe1c39a521401cb3d63677f412629b', class: "configuration-container" }, h("div", { key: '41f787b8c0964c3aa5b6d629ca73aa271edef540', class: "configuration" }, this._showGroupTabs(this.itemType === "Group"), this._showItemTabs(this.itemType !== "Group")))));
+        return (h(Host, { key: '3fe864ad8d8bcf7bc276feafc60ce7e9fd7e803b' }, h("div", { key: '90f327cc0736d8c9c13bf8b65d69e3835b4dae7b', class: "configuration-container" }, h("div", { key: '10536f9927ba2b5745f1b5ae3b154a3aac902d47', class: "configuration" }, this._showGroupTabs(this.itemType === "Group"), this._showItemTabs(this.itemType !== "Group")))));
     }
     //--------------------------------------------------------------------------
     //
@@ -84,7 +98,7 @@ export class SolutionItem {
      * @param visible Should the current tab be visible
      */
     _showGroupTabs(visible) {
-        return h("calcite-tabs", { class: "config-tabs", style: { display: visible ? "inherit" : "none" } }, h("calcite-tab-nav", { slot: "tab-nav" }, h("calcite-tab-title", null, this._translations.groupDetailsTab), h("calcite-tab-title", null, this._translations.sharingTab)), h("calcite-tab", { class: "config-tab", id: "group-tab", selected: true }, h("solution-item-details", { "item-id": this.itemId })), h("calcite-tab", { class: "config-tab", id: "share-tab" }, h("solution-item-sharing", { "group-id": this.itemId })));
+        return h("calcite-tabs", { class: "config-tabs", style: { display: visible ? "inherit" : "none" } }, h("calcite-tab-nav", { slot: "tab-nav" }, h("calcite-tab-title", null, this._translations.groupDetailsTab), h("calcite-tab-title", null, this._translations.sharingTab)), h("calcite-tab", { class: "config-tab", id: "group-tab", selected: true }, h("solution-item-details", { "item-id": this.itemId, locale: this.locale })), h("calcite-tab", { class: "config-tab", id: "share-tab" }, h("solution-item-sharing", { "group-id": this.itemId, locale: this.locale })));
     }
     /**
      * Render tabs based for an items details, data, and props section from a template
@@ -92,7 +106,7 @@ export class SolutionItem {
      * @param visible Should the current tab be visible
      */
     _showItemTabs(visible) {
-        return h("calcite-tabs", { class: "config-tabs", style: { display: visible ? "inherit" : "none" } }, h("calcite-tab-nav", { slot: "tab-nav" }, h("calcite-tab-title", null, this._translations.itemDetailsTab), h("calcite-tab-title", null, this._translations.dataTab), h("calcite-tab-title", null, this._translations.propertiesTab), h("calcite-tab-title", null, this._translations.resourcesTab)), h("calcite-tab", { class: "config-tab", selected: true }, h("solution-item-details", { "item-id": this.itemId })), h("calcite-tab", { class: "config-tab", id: "data-tab" }, h("solution-template-data", { instanceid: "data", "item-id": this.itemId, "organization-variables": this.organizationVariables, "solution-variables": this.solutionVariables })), h("calcite-tab", { class: "config-tab", id: "props-tab" }, h("solution-template-data", { instanceid: "properties", "item-id": this.itemId, "organization-variables": this.organizationVariables, "solution-variables": this.solutionVariables })), h("calcite-tab", { class: "config-tab", id: "resources-tab" }, h("solution-resource-item", { authentication: this.authentication, class: "solutions-resource-container", "item-id": this.itemId })));
+        return h("calcite-tabs", { class: "config-tabs", style: { display: visible ? "inherit" : "none" } }, h("calcite-tab-nav", { slot: "tab-nav" }, h("calcite-tab-title", null, this._translations.itemDetailsTab), h("calcite-tab-title", null, this._translations.dataTab), h("calcite-tab-title", null, this._translations.propertiesTab), h("calcite-tab-title", null, this._translations.resourcesTab)), h("calcite-tab", { class: "config-tab", selected: true }, h("solution-item-details", { "item-id": this.itemId, locale: this.locale })), h("calcite-tab", { class: "config-tab", id: "data-tab" }, h("solution-template-data", { instanceid: "data", "item-id": this.itemId, locale: this.locale, "organization-variables": this.organizationVariables, "solution-variables": this.solutionVariables })), h("calcite-tab", { class: "config-tab", id: "props-tab" }, h("solution-template-data", { instanceid: "properties", "item-id": this.itemId, locale: this.locale, "organization-variables": this.organizationVariables, "solution-variables": this.solutionVariables })), h("calcite-tab", { class: "config-tab", id: "resources-tab" }, h("solution-resource-item", { authentication: this.authentication, class: "solutions-resource-container", "item-id": this.itemId, locale: this.locale })));
     }
     /**
      * Fetches the component's translations
@@ -155,6 +169,23 @@ export class SolutionItem {
                 "reflect": true,
                 "defaultValue": "\"\""
             },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: Locale to use for translation of stings in the UI"
+                },
+                "attribute": "locale",
+                "reflect": false
+            },
             "solutionVariables": {
                 "type": "string",
                 "mutable": true,
@@ -204,6 +235,9 @@ export class SolutionItem {
         return [{
                 "propName": "itemId",
                 "methodName": "itemIdWatchHandler"
+            }, {
+                "propName": "locale",
+                "methodName": "localeWatchHandler"
             }];
     }
 }

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

@@ -22,6 +22,7 @@ import { Host, h } from "@stencil/core";
 import { getLocaleComponentStrings } from "../../utils/locale";
 export class SolutionItemAccordion {
     constructor() {
+        this.locale = undefined;
         this.templateInfos = [];
         this._sortedTemplateInfos = [];
         this._translations = undefined;
@@ -84,6 +85,14 @@ export class SolutionItemAccordion {
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
     async templateInfosWatchHandler() {
         this._types = [];
         this._sortedTemplateInfos = this._sortTemplates();
@@ -121,7 +130,7 @@ export class SolutionItemAccordion {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '8e51f89ed52cd292aae82ed819c61ec4f1e1e5fb' }, this._getAccordion()));
+        return (h(Host, { key: '22a8a6f89fac420848c1279439e0b02121e694d9' }, this._getAccordion()));
     }
     //--------------------------------------------------------------------------
     //
@@ -293,6 +302,23 @@ export class SolutionItemAccordion {
     }
     static get properties() {
         return {
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: Locale to use for translation of stings in the UI"
+                },
+                "attribute": "locale",
+                "reflect": false
+            },
             "templateInfos": {
                 "type": "unknown",
                 "mutable": false,
@@ -326,6 +352,9 @@ export class SolutionItemAccordion {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "locale",
+                "methodName": "localeWatchHandler"
+            }, {
                 "propName": "templateInfos",
                 "methodName": "templateInfosWatchHandler"
             }];

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

@@ -25,6 +25,7 @@ import { getLocaleComponentStrings } from "../../utils/locale";
 export class SolutionItemDetails {
     constructor() {
         this.itemId = "";
+        this.locale = undefined;
         this.itemDetails = {
             accessInformation: "",
             description: "",
@@ -46,6 +47,19 @@ export class SolutionItemDetails {
     el;
     //--------------------------------------------------------------------------
     //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
+    //--------------------------------------------------------------------------
+    //
     //  Lifecycle
     //
     //--------------------------------------------------------------------------
@@ -67,7 +81,7 @@ export class SolutionItemDetails {
      * 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();
@@ -242,6 +256,23 @@ export class SolutionItemDetails {
                 "attribute": "item-id",
                 "reflect": true,
                 "defaultValue": "\"\""
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: Locale to use for translation of stings in the UI"
+                },
+                "attribute": "locale",
+                "reflect": false
             }
         };
     }
@@ -255,6 +286,12 @@ export class SolutionItemDetails {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "locale",
+                "methodName": "localeWatchHandler"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "calciteInputInput",

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

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