@esri/solutions-components 0.10.39 → 0.10.40

package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.js

@@ -42,6 +42,7 @@ export class CrowdsourceReporter {
         this.layerExpressions = [];
         this.layerId = undefined;
         this.level = undefined;
+        this.locale = undefined;
         this.loginTitle = undefined;
         this.mapInfos = [];
         this.mapView = undefined;
@@ -234,6 +235,14 @@ export class CrowdsourceReporter {
     async isMobileWatchHandler() {
         this.updatePanelState(false, this._showFullPanel);
     }
+    /**
+     * 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.
      */
@@ -274,7 +283,7 @@ export class CrowdsourceReporter {
         if (this._editableLayerIds) {
             await this._updateFeatures();
             setTimeout(() => {
-                // refresh layer list when user is on layer list panel 
+                // refresh layer list when user is on layer list panel
                 if (this._flowItems[this._flowItems.length - 1] === "layer-list" && this._layerList) {
                     void this._layerList.refresh();
                 }
@@ -325,7 +334,7 @@ export class CrowdsourceReporter {
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, { key: 'c8f50d4d6004a875444a863a9e839442708f732b' }, this._reportSubmitted && h("calcite-alert", { key: '5f556d67fd9f04c6277b88c0ad0f774ec9216850', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '0204b9967307421fdfeafc61eca006db62f99aab', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: 'fd21dc9f77fddd3b5a1edcef8f4ac0983018fb97', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '3a33593f8c3285d38f651316ea2f4acc148606ec', slot: "title" }, this._translations.error), h("div", { key: '588890b6760a7657218282ddff9f3db94b9f73f6', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: 'b999711f77b1f5c94a84b4ca5f80d33a4d352ea2', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: 'ed7f7b1604d5dcdbf146fdbae108081742806587', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '4bbcb945e9cc232ba77b327247b37b4ca420a77c', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: 'b75dad85bd1a793232c99b7d870fc9df9ccc0303', slot: "title" }, this._translations.error), h("div", { key: 'f161f78d54beba9ecaeccedd69d8e019c88a48e4', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '43aea9a8138da6645ee420e9e2abe21a3cbe4c91' }, h("calcite-shell", { key: '5fd031aba8feed8d54e3118a7a99a5be8254c89f', "content-behind": true }, this._getReporter()))));
+        return (h(Host, { key: 'fbe7fdc13c462e0fe155107ac784f03b3922d624' }, this._reportSubmitted && h("calcite-alert", { key: '9bcf7856ad01e7bc59142a862c50b9d84c443268', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '7b81a7c8b3d66159a790ab3d13be9f1b65a6202e', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: 'ee2f17e3326ef7c60fb2ee06ed313fd28cf7084a', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: 'b356832ee6d4d16a84cdea0abb6b1c677f9ca1f6', slot: "title" }, this._translations.error), h("div", { key: '8aa16df1114b75b6a3e2a76de7fb5c7cbc5d3632', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: 'e99693c23ef18b62daf892fccaacbbfe2486702d', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '58ccda0d3782dbe70d346b973b7648f8ae4c8c8f', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: 'e49e9e3b33df17dd90b3263bec6c17566f6f7b1b', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: 'cfb88dd323ead1398cd73849f68a9c2846ef9d14', slot: "title" }, this._translations.error), h("div", { key: 'b27e8983a74c8613e569400b7c7ad0b14d43f323', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '7ac3d49d6383d2a88e54d91fa00e2c81aa91a890' }, h("calcite-shell", { key: '709e673f4e9261b4283c7593926d605c8a049abd', "content-behind": true }, this._getReporter()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -480,7 +489,7 @@ export class CrowdsourceReporter {
      */
     getLayerListFlowItem() {
         return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports &&
-            h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { applyLayerViewFilter: this.showMyReportsOnly, class: "height-full", layers: this._editableLayerIds?.length > 0 ? this._editableLayerIds : this._layers, mapView: this.mapView, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
+            h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { applyLayerViewFilter: this.showMyReportsOnly, class: "height-full", layers: this._editableLayerIds?.length > 0 ? this._editableLayerIds : this._layers, locale: this.locale, mapView: this.mapView, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
     }
     /**
      * Get the layer list for creating a report
@@ -491,7 +500,7 @@ export class CrowdsourceReporter {
         const onlyReportingLayers = this.reportingOptions ? Object.keys(this.reportingOptions).filter((layerId) => {
             return this.reportingOptions[layerId].visible && this.reportingOptions[layerId].reporting && this._layerItemsHash[layerId] && this._layerItemsHash[layerId].supportsAdd;
         }) : [];
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.chooseCategoryMsg)), h("layer-list", { class: "height-full", layers: onlyReportingLayers, mapView: this.mapView, onLayerSelect: this.navigateToCreateFeature.bind(this), showFeatureCount: false, showNextIcon: false }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.chooseCategoryMsg)), h("layer-list", { class: "height-full", layers: onlyReportingLayers, locale: this.locale, mapView: this.mapView, onLayerSelect: this.navigateToCreateFeature.bind(this), showFeatureCount: false, showNextIcon: false }))));
     }
     /**
      * Get Feature create form of the selected feature layer
@@ -499,7 +508,7 @@ export class CrowdsourceReporter {
      * @protected
      */
     getFeatureCreateFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("create-feature", { customizeSubmit: true, enableSearch: true, floorLevel: this.floorLevel, formElements: this._formElements.find(elm => elm.id === this._selectedLayerId), isMobile: this.isMobile, mapView: this.mapView, onDrawComplete: this.onFormReady.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onModeChanged: this.backFromCreateFeaturePanel.bind(this), onProgressStatus: this.updatedProgressStatus.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("create-feature", { customizeSubmit: true, enableSearch: true, floorLevel: this.floorLevel, formElements: this._formElements.find(elm => elm.id === this._selectedLayerId), isMobile: this.isMobile, locale: this.locale, mapView: this.mapView, onDrawComplete: this.onFormReady.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onModeChanged: this.backFromCreateFeaturePanel.bind(this), onProgressStatus: this.updatedProgressStatus.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId }))));
     }
     /**
      * Update the progress bar status when editor panel changes
@@ -851,7 +860,7 @@ export class CrowdsourceReporter {
         const canCreateReports = this._getLayersConfig(this._selectedLayerId)?.reporting && this._layerItemsHash[this._selectedLayerId].supportsAdd;
         const showFilterIcon = layerExpressions?.length > 0;
         return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this._toggleSort(), h("calcite-action", { icon: "sort-ascending-arrow", id: "sort-popover", slot: "header-actions-end", text: this._translations.sort, title: this._translations.sort }), showFilterIcon && h("calcite-action", { icon: "filter", indicator: this._filterActive, onClick: () => { this._flowItems = [...this._flowItems, "filter-panel"]; }, slot: "header-actions-end", text: this._translations.filter, title: this._translations.filter }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports && canCreateReports &&
-            h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { applyLayerViewFilter: this.showMyReportsOnly, class: "height-full", highlightOnHover: true, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, ref: el => this._featureList = el, reportingOptions: this.reportingOptions, selectedLayerId: layerId, showFeatureSymbol: this.showFeatureSymbol, sortingInfo: this._updatedSorting }))));
+            h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { applyLayerViewFilter: this.showMyReportsOnly, class: "height-full", highlightOnHover: true, locale: this.locale, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, ref: el => this._featureList = el, reportingOptions: this.reportingOptions, selectedLayerId: layerId, showFeatureSymbol: this.showFeatureSymbol, sortingInfo: this._updatedSorting }))));
     }
     /**
      * Returns the calcite-flow item for filter
@@ -868,7 +877,7 @@ export class CrowdsourceReporter {
      */
     getFeatureDetailsFlowItem() {
         const showCommentBtn = this._getLayersConfig(this._selectedLayerId)?.comment && this._selectedLayer.relationships.length > 0 && this._relatedTable;
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, class: "share-node", embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, removePopoverOffset: true, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", slot: "header-actions-end", socialMedia: true, view: this.mapView }), this._selectedFeature.length > 1 && this.getFeaturesPagination(), h("calcite-panel", null, h("feature-details", { class: 'full-height', graphics: this._selectedFeature, layerItemsHash: this._layerItemsHash, mapView: this.mapView, onAddComment: this.showAddCommentsPanel.bind(this), onCommentSelect: this.onCommentSelectFromList.bind(this), onFeatureSelectionChange: this.selectionChanged.bind(this), onLikeOrDislikeClicked: () => { void this._featureList.refresh(true); }, onLoadingStatus: (evt) => void this.updatingFeatureDetails(evt.detail), ref: el => this._featureDetails = el, reportingOptions: this.reportingOptions, showUserImageInCommentsList: this.showUserImageInCommentsList }), showCommentBtn &&
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, class: "share-node", embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, removePopoverOffset: true, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", slot: "header-actions-end", socialMedia: true, view: this.mapView }), this._selectedFeature.length > 1 && this.getFeaturesPagination(), h("calcite-panel", null, h("feature-details", { class: 'full-height', graphics: this._selectedFeature, layerItemsHash: this._layerItemsHash, locale: this.locale, mapView: this.mapView, onAddComment: this.showAddCommentsPanel.bind(this), onCommentSelect: this.onCommentSelectFromList.bind(this), onFeatureSelectionChange: this.selectionChanged.bind(this), onLikeOrDislikeClicked: () => { void this._featureList.refresh(true); }, onLoadingStatus: (evt) => void this.updatingFeatureDetails(evt.detail), ref: el => this._featureDetails = el, reportingOptions: this.reportingOptions, showUserImageInCommentsList: this.showUserImageInCommentsList }), showCommentBtn &&
             h("calcite-button", { appearance: "solid", onClick: this.showAddCommentsPanel.bind(this), slot: "footer", width: "full" }, this.commentButtonText || this._translations.comment))));
     }
     /**
@@ -884,14 +893,14 @@ export class CrowdsourceReporter {
      * @returns Node
      */
     getCommentDetailsFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, graphics: this._selectedRelatedFeature, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, paginationEnabled: false }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, graphics: this._selectedRelatedFeature, highlightEnabled: false, isLoading: false, isMobile: false, locale: this.locale, mapView: this.mapView, paginationEnabled: false }))));
     }
     /**
      * Returns the calcite-flow item for add comment
      * @returns Node
      */
     getAddCommentFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromCreateRelatedFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateRelatedFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateRelatedFeaturePanel.bind(this), width: "full" }, this._translations.cancel))), h("calcite-panel", null, h("create-related-feature", { customizeSubmit: true, mapView: this.mapView, onFail: this.addCommentFailed.bind(this), onFormReady: this.onFormReady.bind(this), onIsActionPending: this.showSubmitCancelButton.bind(this), onSuccess: this.onCommentSubmitted.bind(this), ref: el => this._createRelatedFeature = el, selectedFeature: this._currentFeature, table: this._relatedTable }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromCreateRelatedFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateRelatedFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateRelatedFeaturePanel.bind(this), width: "full" }, this._translations.cancel))), h("calcite-panel", null, h("create-related-feature", { customizeSubmit: true, locale: this.locale, mapView: this.mapView, onFail: this.addCommentFailed.bind(this), onFormReady: this.onFormReady.bind(this), onIsActionPending: this.showSubmitCancelButton.bind(this), onSuccess: this.onCommentSubmitted.bind(this), ref: el => this._createRelatedFeature = el, selectedFeature: this._currentFeature, table: this._relatedTable }))));
     }
     /**
      * Sets the selected features and updates the first feature as the current selected feature
@@ -1547,6 +1556,23 @@ export class CrowdsourceReporter {
                 "attribute": "level",
                 "reflect": 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
+            },
             "loginTitle": {
                 "type": "string",
                 "mutable": false,
@@ -1890,6 +1916,9 @@ export class CrowdsourceReporter {
         return [{
                 "propName": "isMobile",
                 "methodName": "isMobileWatchHandler"
+            }, {
+                "propName": "locale",
+                "methodName": "localeWatchHandler"
             }, {
                 "propName": "mapView",
                 "methodName": "mapViewWatchHandler"

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

@@ -93,7 +93,7 @@ export class DeductCalculator {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '3053ca7a4e457a5259622c3fd72c04f2f68c21be' }, h("div", { key: 'f6d4ffbd6811f4eae23a950afac0fd1c68b24c9d', class: "label-display" }, h("calcite-label", { key: 'acaa80f5f10a3343e7e73d9cb33948ae4481e09e', class: "label-display" }, "Density %", this._getDensityInput()), h("calcite-label", { key: '577ce996676878f7e7236308a191ea9db073d88e', class: "label-display" }, "Type", this._getTypeInput()), h("calcite-label", { key: '626db25056ce49eb7b4160aee3e9cf898dd5400a', class: "label-display" }, "Severity", this._getSeverityInput())), h("div", { key: 'fa95eac25a03f7e30770ebc9ac7df02cba8cd187' }, this._getCalculateInput())));
+        return (h(Host, { key: '021786cd4ccb8c826df0822983ba6e0e7fb3c890' }, h("div", { key: '6a55996f013e74b3f761c9fd4b141d60d9b0239f', class: "label-display" }, h("calcite-label", { key: '54108b452ef18af979148f069f56503db220cc60', class: "label-display" }, "Density %", this._getDensityInput()), h("calcite-label", { key: '011af5ed63f169b32905abd809ad0b8c6c21900c', class: "label-display" }, "Type", this._getTypeInput()), h("calcite-label", { key: '9f5f04799c26f1911f17bb046abd0b27c8d3ce01', class: "label-display" }, "Severity", this._getSeverityInput())), h("div", { key: '8cd00c331e1f1541c43a02b7e6d991ee41d864e6' }, this._getCalculateInput())));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/delete-button/delete-button.js

@@ -28,6 +28,7 @@ export class DeleteButton {
         this.icon = undefined;
         this.ids = [];
         this.layer = undefined;
+        this.locale = undefined;
         this._confirmDelete = false;
         this._deleteEndabled = false;
         this._supportsDelete = undefined;
@@ -61,6 +62,14 @@ export class DeleteButton {
     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)
@@ -92,7 +101,7 @@ export class DeleteButton {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '4ced17b35479900aaa01ebbd298eeae57194e358' }, this.buttonType === "button" ? (h("calcite-button", { appearance: "outline", disabled: !this._deleteEndabled, id: "solutions-delete", kind: "danger", onClick: () => this._delete(), width: "full" }, this._translations.deleteCount.replace("{{n}}", this.ids.length.toString()))) : (h("calcite-action", { appearance: "solid", compact: true, disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s", text: this._translations.delete }, h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage(), h("calcite-tooltip", { key: '04f82e726cf9142c403ee43cb8151027bb7b617f', placement: "bottom", "reference-element": this.buttonType === "button" ? "solutions-delete" : this.icon }, h("span", { key: 'f7852b2476dae4b18e82495c64a819b3db98696d' }, this._translations.delete))));
+        return (h(Host, { key: '1816da3d5cd7903b4e699dffa4ac4836dca722bb' }, this.buttonType === "button" ? (h("calcite-button", { appearance: "outline", disabled: !this._deleteEndabled, id: "solutions-delete", kind: "danger", onClick: () => this._delete(), width: "full" }, this._translations.deleteCount.replace("{{n}}", this.ids.length.toString()))) : (h("calcite-action", { appearance: "solid", compact: true, disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s", text: this._translations.delete }, h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage(), h("calcite-tooltip", { key: '26fc4d4b4ea02b7a6c5e3f87abe2c5b8f96a3654', placement: "bottom", "reference-element": this.buttonType === "button" ? "solutions-delete" : this.icon }, h("span", { key: 'c2f7b101bb3a99274fe7f364ad29365c212d856e' }, this._translations.delete))));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -126,7 +135,7 @@ export class DeleteButton {
      * @returns node to confirm or deny the delete operation
      */
     _deleteMessage() {
-        return this.deleteDialog ? this.deleteDialog : (h("delete-dialog", { id: "solution-delete-dialog", ids: this.ids, layer: this.layer, onDeleteDialogClose: () => this._confirmDelete = false, open: this._confirmDelete }));
+        return this.deleteDialog ? this.deleteDialog : (h("delete-dialog", { id: "solution-delete-dialog", ids: this.ids, layer: this.layer, locale: this.locale, onDeleteDialogClose: () => this._confirmDelete = false, open: this._confirmDelete }));
     }
     /**
      * Fetches the component's translations
@@ -263,6 +272,23 @@ export class DeleteButton {
                     "tags": [],
                     "text": "esri/views/layers/FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html"
                 }
+            },
+            "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
             }
         };
     }
@@ -306,6 +332,9 @@ export class DeleteButton {
             }, {
                 "propName": "layer",
                 "methodName": "layerWatchHandler"
+            }, {
+                "propName": "locale",
+                "methodName": "localeWatchHandler"
             }];
     }
 }

package/dist/collection/components/delete-dialog/delete-dialog.js

@@ -24,6 +24,7 @@ export class DeleteDialog {
     constructor() {
         this.ids = [];
         this.layer = undefined;
+        this.locale = undefined;
         this.open = false;
         this._isDeleting = false;
         this._translations = undefined;
@@ -44,6 +45,14 @@ export class DeleteDialog {
     //  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)
@@ -81,7 +90,7 @@ export class DeleteDialog {
     render() {
         const confirmMessage = this.ids.length === 1 ? this._translations?.confirmSingle :
             this._translations?.confirmMultiple;
-        return (h(Host, { key: '64cd1440f80a9609f90056b919fa807e975eff70' }, h("calcite-modal", { key: '022302455960cbcf894dc2f0079d88be6fb59367', "aria-labelledby": "modal-title", class: "delete-modal", kind: "danger", onCalciteModalClose: () => this._close(), open: this.open, widthScale: "s" }, h("div", { key: '7484caedbdd759efbe972182ddd41a6ebaa2bd64', class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations?.deleteFeature), h("div", { key: 'e31136a6eed46dd0cbc4d919deb732a623097fbf', slot: "content" }, confirmMessage), h("calcite-button", { key: '7de42845a99777bcec59221fb6ab863e72ca2654', appearance: "outline", kind: "danger", onClick: () => this._close(), slot: "secondary", width: "full" }, this._translations?.cancel), h("calcite-button", { key: '67921ff64fc5c4439e66833fd8502f7e95671b5d', kind: "danger", loading: this._isDeleting, onClick: () => void this._deleteFeatures(), slot: "primary", width: "full" }, this._translations?.delete))));
+        return (h(Host, { key: 'eafca7d4325c65ff21fbfeaa24ea14e95bc25a34' }, h("calcite-modal", { key: '745e52d7b23318492914662cc769a1206baefd28', "aria-labelledby": "modal-title", class: "delete-modal", kind: "danger", onCalciteModalClose: () => this._close(), open: this.open, widthScale: "s" }, h("div", { key: '363614f6eaf30c30c6c2ccde3875dfff5cd94088', class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations?.deleteFeature), h("div", { key: 'b3b6f74495894589b7fd8be54265c4a69ffaa62e', slot: "content" }, confirmMessage), h("calcite-button", { key: 'd325fcf12624bac39f56ec690f7e4e9660789891', appearance: "outline", kind: "danger", onClick: () => this._close(), slot: "secondary", width: "full" }, this._translations?.cancel), h("calcite-button", { key: '73a10546ad92065c949bfacca3eb3d508685030e', kind: "danger", loading: this._isDeleting, onClick: () => void this._deleteFeatures(), slot: "primary", width: "full" }, this._translations?.delete))));
     }
     //--------------------------------------------------------------------------
     //
@@ -170,6 +179,23 @@ export class DeleteDialog {
                     "text": "esri/views/layers/FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html"
                 }
             },
+            "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
+            },
             "open": {
                 "type": "boolean",
                 "mutable": false,
@@ -236,4 +262,10 @@ export class DeleteDialog {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "locale",
+                "methodName": "localeWatchHandler"
+            }];
+    }
 }

package/dist/collection/components/edit-card/edit-card.js

@@ -26,6 +26,7 @@ export class EditCard {
     constructor() {
         this.enableEditGeometry = false;
         this.graphics = undefined;
+        this.locale = undefined;
         this.mapView = undefined;
         this.open = false;
         this.graphicIndex = 0;
@@ -114,6 +115,14 @@ export class EditCard {
             await this._closeEdit(true);
         }
     }
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
     async openWatchHandler(v) {
         if (v && this.graphics?.length > 0 && this.graphicIndex > -1) {
             this._editorLoading = true;
@@ -198,7 +207,7 @@ export class EditCard {
             !this.graphics[0].layer.editingEnabled : true;
         const tableNodeClass = this._editorLoading ? "display-none" : "position-absolute";
         const loadingClass = this._editorLoading ? "" : "display-none";
-        return (h(Host, { key: 'ff6d1819cfd084e9f11a1c87d89c49d13035b289' }, h("div", { key: '797882acbcc26283719be4c08936e93b93931bcd', class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { key: '34ce92da0b7c452f0fbae98d9f557543da59f5b8', class: "position-absolute" }, h("div", { key: '81af3854249e193d0d508c022cb4075be63f052d', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: 'd7aa82424f87c47039a8a8f8c61240da7a5ca971', class: loadingClass, label: "", scale: "s" })))));
+        return (h(Host, { key: '15ae3de9c8ab0a66a0185ffaafc27f03e19c77b7' }, h("div", { key: 'bbaa7dbc405259b64dfceca89e45abf6372c76c3', class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { key: 'eb8b08fa0b08cf93581fb8e76d59bd8b5446770f', class: "position-absolute" }, h("div", { key: '03e525373c09fbcd4dad213738d97b99f1549975', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: '1cc46d8f6499a90736e05c2eed9bff71aff35d12', class: loadingClass, label: "", scale: "s" })))));
     }
     //--------------------------------------------------------------------------
     //
@@ -353,6 +362,23 @@ export class EditCard {
                     "text": "esri/Graphic[]: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html"
                 }
             },
+            "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,
@@ -475,6 +501,9 @@ export class EditCard {
         return [{
                 "propName": "graphics",
                 "methodName": "graphicsWatchHandler"
+            }, {
+                "propName": "locale",
+                "methodName": "localeWatchHandler"
             }, {
                 "propName": "open",
                 "methodName": "openWatchHandler"

package/dist/collection/components/feature-details/feature-details.js

@@ -27,6 +27,7 @@ export class FeatureDetails {
         this.graphics = undefined;
         this.reportingOptions = undefined;
         this.layerItemsHash = undefined;
+        this.locale = undefined;
         this.showUserImageInCommentsList = false;
         this._likeFieldAvailable = false;
         this._likeCount = 0;
@@ -180,12 +181,12 @@ export class FeatureDetails {
     render() {
         //When related features found show comments list of only those features else comments list will be empty
         const commentsListWhereClause = this._relatedFeaturesOIDs?.length > 0 ? `objectId in(${this._relatedFeaturesOIDs})` : '1=0';
-        return (h("calcite-panel", { key: 'e09b693348a5d446f6ea3c774af3c2fd14e66daf', "full-height": true }, h("info-card", { key: '4483a15e4e0bdd62c2c21bc4622d3bbddf3cd113', allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, onSelectionChanged: (e) => { this.featureSelectionChange.emit(e.detail); }, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el }), (this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) &&
-            h("div", { key: 'ac24bb5fd56a7561e78d90c3a1b10027cfab6b2b', class: "buttons-container" }, this._commentsAvailable &&
-                h("calcite-button", { key: '676c5da52465f295212668f8db9b353e219070f2', appearance: "transparent", iconEnd: "speech-bubble", kind: "neutral", onClick: () => { this.addComment.emit(); }, scale: 'm' }, this._relatedFeaturesOIDs.length), this._likeFieldAvailable &&
-                h("calcite-button", { key: 'b3fe54ea2fcf5361e6ec0a91bd52775d24408d77', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onLikeButtonClick.bind(this), scale: 'm' }, this._likeCount ?? this._selectedGraphic.attributes[this._likeField] ?? 0), this._dislikeFieldAvailable &&
-                h("calcite-button", { key: 'd83c9b9fdd287e07670ca9a5aeafd1a4cc38c0f8', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onDislikeButtonClick.bind(this), scale: 'm' }, this._disLikeCount ?? this._selectedGraphic.attributes[this._dislikeField] ?? 0)), this.relatedTableId && this._commentsAvailable &&
-            h("feature-list", { key: '9d72181a778e08b632d802689a66fa21924cd5b3', class: "height-full", mapView: this.mapView, onFeatureSelect: (e) => { this.commentSelect.emit(e.detail); }, pageSize: 5, ref: el => this._commentsList = el, selectedLayerId: this.relatedTableId, showErrorWhenNoFeatures: false, showInitialLoading: false, showUserImageInList: this.showUserImageInCommentsList, textSize: "small", whereClause: commentsListWhereClause })));
+        return (h("calcite-panel", { key: 'be7bebe9da698d963a2602fcacb95ac7206ac1e9', "full-height": true }, h("info-card", { key: '1e069f52d59d42f3e2b88463ea7c536c65a0a6b5', allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, locale: this.locale, mapView: this.mapView, onSelectionChanged: (e) => { this.featureSelectionChange.emit(e.detail); }, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el }), (this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) &&
+            h("div", { key: 'd53f5a1726e4c6299ffd04e266d84005181645f6', class: "buttons-container" }, this._commentsAvailable &&
+                h("calcite-button", { key: '4c2616cc9e0107258f5313b66ae96fa31fe582c5', appearance: "transparent", iconEnd: "speech-bubble", kind: "neutral", onClick: () => { this.addComment.emit(); }, scale: 'm' }, this._relatedFeaturesOIDs.length), this._likeFieldAvailable &&
+                h("calcite-button", { key: '7c87aa085df04a8b58625097c2ce70e5853b82f9', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onLikeButtonClick.bind(this), scale: 'm' }, this._likeCount ?? this._selectedGraphic.attributes[this._likeField] ?? 0), this._dislikeFieldAvailable &&
+                h("calcite-button", { key: '59eb48b91fc2a394cafdcbeeebf5baafae9a8c9b', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onDislikeButtonClick.bind(this), scale: 'm' }, this._disLikeCount ?? this._selectedGraphic.attributes[this._dislikeField] ?? 0)), this.relatedTableId && this._commentsAvailable &&
+            h("feature-list", { key: 'f34ee203202944666c40e14bdfdc59265414fbe1', class: "height-full", locale: this.locale, mapView: this.mapView, onFeatureSelect: (e) => { this.commentSelect.emit(e.detail); }, pageSize: 5, ref: el => this._commentsList = el, selectedLayerId: this.relatedTableId, showErrorWhenNoFeatures: false, showInitialLoading: false, showUserImageInList: this.showUserImageInCommentsList, textSize: "small", whereClause: commentsListWhereClause })));
     }
     /**
      * Load esri javascript api modules
@@ -549,6 +550,23 @@ export class FeatureDetails {
                     "text": "ILayerItemsHash: LayerDetailsHash for each layer in the map"
                 }
             },
+            "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
+            },
             "showUserImageInCommentsList": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/feature-list/feature-list.js

@@ -31,6 +31,7 @@ export class FeatureList {
         this.pageSize = 100;
         this.highlightOnMap = false;
         this.highlightOnHover = false;
+        this.locale = undefined;
         this.sortingInfo = undefined;
         this.whereClause = undefined;
         this.textSize = "large";
@@ -108,6 +109,14 @@ export class FeatureList {
     //  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();
+    }
     /**
      * Watch for selectedLayerId change and update layer instance and features list for new layerId
      */
@@ -187,9 +196,9 @@ export class FeatureList {
      * Renders the component.
      */
     render() {
-        return (h("calcite-panel", { key: '59289a87561105e3edcbd52bac96b974b1387a16', "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { key: '59629285e49227209761d2f16bdd62a90750538f', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
-            h("calcite-notice", { key: 'bc6c2e6e0fdf959374caf79f2027784e2fdaca15', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: '052207ce0b0e2d8030ac7a4a7985c718371a9667', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: '3f17ea85f2265717aa13c9c71f19c259470c9fcc', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
-            h("div", { key: 'ce3179bcdc7af254488dea909034c58db17ec565', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: 'd6a4b8c7a940918388b3b9891a666c4a142edae7', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, ref: el => this._pagination = el, "start-item": "1", "total-items": this._featuresCount }))));
+        return (h("calcite-panel", { key: '6b6214a3dba7df7c2035203750d547945407ecde', "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { key: '1b05d96de0b4d396b13f448311db76315e28b81b', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
+            h("calcite-notice", { key: 'abe755f0bc5c7ff064249159c3154c9ca1c27594', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: '5a8ead1d47151cf088ae9e359052cf35129b09d3', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: 'feb2f2fff276ad49d38ed35dbca41d1878f5e7a3', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
+            h("div", { key: 'e396ddcc3d43ae025d9bdb2cd021a2031606211d', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: '0c3c5bddc7ad418ab15136f0267a429cc0f4ef21', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, ref: el => this._pagination = el, "start-item": "1", "total-items": this._featuresCount }))));
     }
     //--------------------------------------------------------------------------
     //
@@ -617,6 +626,23 @@ export class FeatureList {
                 "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
+            },
             "sortingInfo": {
                 "type": "unknown",
                 "mutable": false,
@@ -851,6 +877,9 @@ export class FeatureList {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "locale",
+                "methodName": "localeWatchHandler"
+            }, {
                 "propName": "selectedLayerId",
                 "methodName": "selectedLayerWatchHandler"
             }, {

package/dist/collection/components/floor-filter/floor-filter.js

@@ -127,7 +127,7 @@ export class FloorFilter {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '7890927db517fe8e1133fce3e0fe977a441f2abf' }, h("div", { key: '34ad695eb04dd20a0b9893817a33df5020de7da1', ref: (el) => { this._floorFilterElement = el; } })));
+        return (h(Host, { key: '51da7a656e7f56ecc8cc4093d3dab856f77b5c7a' }, h("div", { key: 'd2fda7047f09a673216484f5c202f039fca20108', ref: (el) => { this._floorFilterElement = el; } })));
     }
     /**
      * StencilJS: Called once just after the component is first loaded.

package/dist/collection/components/info-card/info-card.js

@@ -31,6 +31,7 @@ export class InfoCard {
         this.mapView = undefined;
         this.allowEditing = true;
         this.highlightEnabled = true;
+        this.locale = undefined;
         this.paginationEnabled = true;
         this.position = 'absolute';
         this._alertOpen = false;
@@ -100,6 +101,19 @@ export class InfoCard {
     async isMobileWatchHandler() {
         await this._initFeaturesWidget();
     }
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+        if (this._features) {
+            const graphics = [...this.graphics];
+            this.graphics = [];
+            this.graphics = graphics;
+        }
+    }
     /**
      * Watch for changes to the mapView and re-init the Feature widget
      */
@@ -232,8 +246,8 @@ export class InfoCard {
         const id = this._features?.selectedFeature?.getObjectId();
         const ids = parseInt(id?.toString(), 10) > -1 ? [id] : [];
         const deleteEnabled = this._layer?.editingEnabled && this._layer?.capabilities?.operations?.supportsDelete;
-        return (h(Host, { key: 'e200fd8d903d1c3295247a45f352ae62394501d5' }, h("calcite-shell", { key: '0b467ed0b480944660ef2194b302070d56cb70e4', style: { position: this.position } }, this._getHeader(), h("calcite-loader", { key: 'cf6172f533f67274b04ac61af75f44ffe62cbc9e', class: loadingClass, label: this._translations.fetchingData }), h("div", { key: '06f3e0c61e14fe73c0fadd58c3cf2c7c03efff6d', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), h("div", { key: '0f964afa075abbd27db827f90d189b9bc2a7c9d4', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
-            h("div", { key: 'd518934d172425ecb46e6b28ea683427d8982382', class: "display-flex top-border padding-1-2" }, h("calcite-button", { key: '4d4f3583b6448e33e3d3ad1aba8c9178f71d75b8', appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { key: '5358ba4079f1906d23b6df5b1facb84eec9692d3', placement: "bottom", "reference-element": "solutions-edit" }, h("span", { key: '8466cfb97ce12e46a06ed665afe974377911e101' }, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { key: '61c551cc2b0c0a2981daa9bf67c7e13318508ca6', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { key: '379dc6697743caedf8fdbea16423b83e9e823a5b' }, h("calcite-button", { key: '616a52367d2f56db0104ce279951a81fcf60a376', appearance: 'transparent', disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { key: 'f7f83e145c25591de025650fd358ca6200c4b6c5', placement: "top", "reference-element": "solutions-back" }, h("span", { key: '8afbde57b91ee8597de237db87efda7eabc10d69' }, this._translations.back))), h("calcite-action", { key: '23344d4abac515d089b8770d63181a989971aa33', class: 'pagination-action', iconFlipRtl: true, onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { key: 'a4c784c5a2c7dfeb9442a58f86961a3242f55055', class: "pagination-count" }, this._count)), h("div", { key: '75e33452a93e9a77f30505957e87b8758ab8d2dd' }, h("calcite-button", { key: '0283a96c401e1929588e28d6ec014eb28b93d1f1', appearance: "transparent", disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { key: '658a26b1bca471b96799cb81ee941f0556619dc9', placement: "top", "reference-element": "solutions-next" }, h("span", { key: '9892d4ee61a1b5656711bb0a188282d9b46bd3f9' }, this._translations.next))))), h("edit-card", { key: '541268c24631ab526bf1b65313d39f3ca606cb6d', class: editClass, enableEditGeometry: this.enableEditGeometry, graphicIndex: this._features?.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { key: '1cdff00f5d7e72b5db220750d290593a1baf68c4', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { key: 'bb250c5906f0e998a794b5c02c22f9643fab16a9', slot: "title" }, this._translations.editDisabled), h("div", { key: 'd330d1ce74473fc76630d2607ab3ca2584aabbd7', slot: "message" }, this._translations.enableEditing)))));
+        return (h(Host, { key: '54e47d0ec2be9149c3e667c9e940842804d96964' }, h("calcite-shell", { key: '14bb280d394ceaa74463979886ab09cdf393b26e', style: { position: this.position } }, this._getHeader(), h("calcite-loader", { key: '3226709e73de16c795c348513183b26b88b7a726', class: loadingClass, label: this._translations.fetchingData }), h("div", { key: 'ba4b0c34620c60e849bdf0ada785b9976156dd1c', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), h("div", { key: '440a4d3c0530f97031df2e2ab9511ef6035fb5da', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+            h("div", { key: '172b2e2cc10bdfb104057376ceba5d7f5f19ad61', class: "display-flex top-border padding-1-2" }, h("calcite-button", { key: '242daf0ec6c3fe4fcc11be4bbc19f810836714ec', appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, locale: this.locale, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { key: '760f8fcd1bcff2060e0a98e84a222107e55fef22', placement: "bottom", "reference-element": "solutions-edit" }, h("span", { key: '30656b92e9bdbf3a9548586d91fc23bce2da9db3' }, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { key: '161902561c9686d74a511338dfc02efce0095af7', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { key: 'afd1459e3f69f60d96103854fe3dae71f18fc41e' }, h("calcite-button", { key: '59063d7fa2cf886afca66857cb1f74e42789e59f', appearance: 'transparent', disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { key: '412e00bc323494bb1e3a7dbeef59ab9bcd6ff8e0', placement: "top", "reference-element": "solutions-back" }, h("span", { key: '7c1512be35f16b4441c2a364e1b7a87e3c7caf97' }, this._translations.back))), h("calcite-action", { key: 'd4790efec0d13e6726ffe9d438683db6887d00b8', class: 'pagination-action', iconFlipRtl: true, onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { key: '98663d5c3b2f445db4e38cba98b8149c53cbc474', class: "pagination-count" }, this._count)), h("div", { key: '6ca88610950cf2852e2dc67588c77fd464ece3c5' }, h("calcite-button", { key: '577739ef819676dfd9cdee560a8cd22edcd9c6b7', appearance: "transparent", disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { key: '73a4f907d1a2f46a980c451572f1ba1e1b0b0596', placement: "top", "reference-element": "solutions-next" }, h("span", { key: 'd5f67497df866592b30d6c328f9f45716eb16153' }, this._translations.next))))), h("edit-card", { key: 'c8094993be5203f464cea4f632c14dbefa263a73', class: editClass, enableEditGeometry: this.enableEditGeometry, graphicIndex: this._features?.selectedFeatureIndex, graphics: this.graphics, locale: this.locale, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { key: '0b9fd2109d7c6b51b91088ecbec50956a2d8d3d8', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { key: 'c8b7b452430d6fedda5288fd58efae5526adeda7', slot: "title" }, this._translations.editDisabled), h("div", { key: 'b2dc954d43bb08908723f70796df5c77108d92d8', slot: "message" }, this._translations.enableEditing)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -541,6 +555,23 @@ export class InfoCard {
                 "reflect": false,
                 "defaultValue": "true"
             },
+            "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
+            },
             "paginationEnabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -755,6 +786,9 @@ export class InfoCard {
             }, {
                 "propName": "isMobile",
                 "methodName": "isMobileWatchHandler"
+            }, {
+                "propName": "locale",
+                "methodName": "localeWatchHandler"
             }, {
                 "propName": "mapView",
                 "methodName": "mapViewWatchHandler"