@esri/solutions-components 0.10.39 → 0.10.40

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

@@ -31,6 +31,7 @@ const CardManager = class {
         this.enableEditGeometry = false;
         this.isMobile = undefined;
         this.layer = undefined;
+        this.locale = undefined;
         this.mapView = undefined;
         this.zoomAndScrollToSelected = undefined;
         this.selectedFeaturesIds = undefined;
@@ -61,6 +62,14 @@ const CardManager = class {
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
@@ -130,14 +139,14 @@ const CardManager = class {
         const heading = isTable ? this._translations.createRecord : this._translations.createFeature;
         const guideMsg = this.customInfoText ? this.customInfoText : this.selectingFeatureFromMap ? this._translations.selectFeaturesFromMapToStart : this._translations.selectFeaturesToStart;
         const showCreateFeatureOrRecordBtn = this.enableCreateFeatures && this.layer?.capabilities?.operations?.supportsAdd;
-        return (index.h(index.Host, { key: '7360aa9c48dd0c3e4a14fe0833b99c301388f93c' }, index.h("div", { key: '9d610f0c4728c238eceb790e97a4e06b77f1a2d1', class: "overflow-auto height-full" }, index.h("calcite-shell", { key: '4b6a02205a971c7ff61aab567b2f2a3c5d288f8d', class: "position-relative " + featuresClass }, index.h("div", { key: '96ee8ce138265dd4b562ac0a33b79a0db4497842', class: "position-static z-index-500" }, index.h("info-card", { key: '7db359bc1016281fd01b737dc5c424fe78995422', enableEditGeometry: this.enableEditGeometry, graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView }))), index.h("calcite-shell", { key: 'afc8d06e9aa3213a9ca10c929497ed4618a28e91', class: "position-relative " + messageClass }, index.h("calcite-flow-item", { key: '46db92a6e259eefea3293310e3e2f43d7639db97' }, index.h("calcite-panel", { key: 'd2bc23ae7bcf2b7b7b48a35efc0697e0d1f9e23e' }, index.h("div", { key: '8f7fd13f9ec99beec1d7231dda03eba403a70a69', class: "padding-1" }, index.h("calcite-notice", { key: '2fbe94292c1dd91ee1691b8e3d295225ff5b534b', icon: this.selectingFeatureFromMap ? "map" : "table", iconFlipRtl: true, open: true }, index.h("div", { key: '9f91099e4bfa0675c5b098a73b2f132b80ee76b0', slot: "message" }, guideMsg))), !this.isMobile && showCreateFeatureOrRecordBtn && index.h("calcite-button", { key: 'c1b04e776f3750712992d736e09726cc26eae5db', disabled: !this.layer, onClick: () => this._createFeatureBtnClicked(), slot: "footer", width: "full" }, isTable ? this._translations.createRecord : this._translations.createFeature)))), index.h("calcite-shell", { key: 'a71d4b0abd1ec1a4ed14a2cb3dcb10a075f54bf0', class: "position-relative " + createFeatureClass }, index.h("calcite-flow-item", { key: '85047b527f5995a912b527325f287c3596caf630' }, index.h("calcite-panel", { key: 'd335be81502e0feb803ee9ad4e501d4c85f184f5', heading: heading }, index.h("calcite-action", { key: 'b179c3185dbada3bd052d38b98b75cf29240655c', class: "back-button hydrated", icon: "chevron-left", onClick: this._backFromCreateFeature.bind(this), scale: "s", slot: "header-actions-start", text: "" }), this.getEditorComponent(), this._showSubmitBtn && index.h("calcite-button", { key: 'f3b6655e3effdb6b09e64acd651a09d6028a6df9', appearance: "solid", class: "footer-top-button footer-button", onClick: () => void this._createFeature.submit(), slot: "footer", width: "full" }, this._translations.create)))))));
+        return (index.h(index.Host, { key: '1dc448368b85b83ccc2f76f59cff83559d1d1285' }, index.h("div", { key: '7c058f7a4ca2db84f0ad35efba90a1485e5c7989', class: "overflow-auto height-full" }, index.h("calcite-shell", { key: '1388666d3d11efee37efc1524011594237cccc35', class: "position-relative " + featuresClass }, index.h("div", { key: '3f93c4de344e49eec16e447bc1ca44cb280f84cc', class: "position-static z-index-500" }, index.h("info-card", { key: 'c5b8cafef2595b8ae85725d583caebf9754ce1fb', enableEditGeometry: this.enableEditGeometry, graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, locale: this.locale, mapView: this.mapView }))), index.h("calcite-shell", { key: 'bfa2f41e657f390335545f46ab744d4d980c3926', class: "position-relative " + messageClass }, index.h("calcite-flow-item", { key: 'bf19ce4b69b52c5652629f38859e03a0a99f8374' }, index.h("calcite-panel", { key: '1ea46998a73ad636ad2a956e72181a0570edd5d0' }, index.h("div", { key: 'd853f429c30daa5abcfe6576b7242fa48251ae53', class: "padding-1" }, index.h("calcite-notice", { key: 'dffa52ec3fa7a22494b6dadd7b1c6d512e25c192', icon: this.selectingFeatureFromMap ? "map" : "table", iconFlipRtl: true, open: true }, index.h("div", { key: '728b56c9281dfe09d1604882635a53803c5f4253', slot: "message" }, guideMsg))), !this.isMobile && showCreateFeatureOrRecordBtn && index.h("calcite-button", { key: '260042d84c529d5508630bca7bdb39db1c2408cb', disabled: !this.layer, onClick: () => this._createFeatureBtnClicked(), slot: "footer", width: "full" }, isTable ? this._translations.createRecord : this._translations.createFeature)))), index.h("calcite-shell", { key: 'c30cbc2dc6e70319440bf9ed7c3d7f7ede38c3a1', class: "position-relative " + createFeatureClass }, index.h("calcite-flow-item", { key: '901c5a407a8418c34ee72c4dd4b16443c3766819' }, index.h("calcite-panel", { key: 'a6faf502cd08060a42582cbd95d7354b1e192a43', heading: heading }, index.h("calcite-action", { key: '23e9c295f7476f935055c30227774e173315194d', class: "back-button hydrated", icon: "chevron-left", onClick: this._backFromCreateFeature.bind(this), scale: "s", slot: "header-actions-start", text: "" }), this.getEditorComponent(), this._showSubmitBtn && index.h("calcite-button", { key: '3ee5c310e5fad8aa5d6abd8ae1347c46d3ada1be', appearance: "solid", class: "footer-top-button footer-button", onClick: () => void this._createFeature.submit(), slot: "footer", width: "full" }, this._translations.create)))))));
     }
     /**
    * Returns the editor component for adding feature
    * @returns Node
    */
     getEditorComponent() {
-        return (index.h("div", null, this._showCreateFeatureComponent && index.h("create-feature", { customizeSubmit: true, mapView: this.mapView, onDrawComplete: () => { this._showSubmitBtn = true; }, onEditingAttachment: (evt) => { this._showSubmitBtn = !evt.detail; }, onProgressStatus: () => {
+        return (index.h("div", null, this._showCreateFeatureComponent && index.h("create-feature", { customizeSubmit: true, locale: this.locale, mapView: this.mapView, onDrawComplete: () => { this._showSubmitBtn = true; }, onEditingAttachment: (evt) => { this._showSubmitBtn = !evt.detail; }, onProgressStatus: () => {
                 setTimeout(() => {
                     this._isFeatureCreated = false;
                 }, 2000);
@@ -202,6 +211,9 @@ const CardManager = class {
         const messages = await locale.getLocaleComponentStrings(this.el);
         this._translations = messages[0];
     }
+    static get watchers() { return {
+        "locale": ["localeWatchHandler"]
+    }; }
 };
 CardManager.style = CardManagerStyle0;
 
@@ -223,6 +235,7 @@ const LayerTable = class {
         this.enableInlineEdit = undefined;
         this.enableShare = undefined;
         this.isMobile = undefined;
+        this.locale = undefined;
         this.mapHidden = undefined;
         this.mapInfo = undefined;
         this.mapView = undefined;
@@ -478,6 +491,14 @@ const LayerTable = class {
             }
         });
     }
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
     /**
      * Reset the toolInfos when mapHidden prop changes so we can show/hide any map dependant tool(s)
      */
@@ -710,10 +731,10 @@ const LayerTable = class {
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         const showSearch = this._canShowFullTextSearch();
         this._validateActiveActions();
-        return (index.h(index.Host, { key: '04fccaaa9862ed315d99ad74f7e1135dd5656613' }, index.h("calcite-shell", { key: 'e332d781be1499857a5e17e37ad2e058bba453b1' }, this._getTableControlRow("header"), index.h("div", { key: '6337e494f879c250494c5f5859daec627fdd0700', class: `width-full ${tableHeightClass}` }, index.h("calcite-panel", { key: 'd0d437997906fd15f97765cb89c3917f66b20c37', class: "height-full width-full" }, showSearch &&
-            index.h("div", { key: '596a2d54fd707941d9e2ec167598313d9ee9b295', class: "search-container" }, index.h("calcite-input", { key: '31cd1ffb09bc2c6c9c1f9daf39f3e9549cbceeb2', class: "search", clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" })), index.h("calcite-loader", { key: 'b4ba3d32fb346134672e08d55428bd38ac43f40d', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), index.h("div", { key: '4fbac73935be7a1163643543e6d77a200534e5e3', class: tableNodeClass, ref: this.onTableNodeCreate }))), !this.isMobile ? (index.h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (index.h(index.Host, { key: '5cbb5ba55c63eaf278666aac034a01d971d9f12a' }, index.h("calcite-shell", { key: '8a27d87fc002b72fe478d25885b2ab04261362ca' }, this._getTableControlRow("header"), index.h("div", { key: '250c356a30389b8cb95628953f3bb3ec5c88361d', class: `width-full ${tableHeightClass}` }, index.h("calcite-panel", { key: '9d5dbb084031bdface1dbc3a1dbc2fa33eb163b5', class: "height-full width-full" }, showSearch &&
+            index.h("div", { key: '2d45ae4255a1d0e3cf14aa0f6a01915a38626bc7', class: "search-container" }, index.h("calcite-input", { key: 'c73546fef30db70d01cf8978a5daf9ea4193ddc2', class: "search", clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" })), index.h("calcite-loader", { key: '61621afb1e5fa67e25b878320c8497200b8265cd', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), index.h("div", { key: '0ef4fe0e4099ec60f4c38e2c421920c9a8fe3c4f', class: tableNodeClass, ref: this.onTableNodeCreate }))), !this.isMobile ? (index.h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
             .replace("{{total}}", total)
-            .replace("{{selected}}", selected))) : undefined), this.createFilterModal && this._filterModal(), index.h("delete-dialog", { key: '3b0dba8bc391d777f4687ad6f4e905aeb1eb580b', id: "deleteDialogId", ids: this._getIds(), layer: this._layer, onDeleteDialogClose: () => this._deleteDialogOpen = false, open: this._deleteDialogOpen, ref: (el) => this._deleteDialog = el })));
+            .replace("{{selected}}", selected))) : undefined), this.createFilterModal && this._filterModal(), index.h("delete-dialog", { key: 'e2564b1d08476f762577247ffb41a00e5c41514c', id: "deleteDialogId", ids: this._getIds(), layer: this._layer, locale: this.locale, onDeleteDialogClose: () => this._deleteDialogOpen = false, open: this._deleteDialogOpen, ref: (el) => this._deleteDialog = el })));
     }
     _deleteDialog;
     /**
@@ -889,7 +910,7 @@ const LayerTable = class {
     _getActionBar() {
         const containerClass = this.isMobile ? "width-full" : "";
         const mobileClass = this.isMobile ? "border-top" : "";
-        return (index.h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, index.h("div", { class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, index.h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, mapView: this.mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", selectedIds: this._layer ? [this._layer?.id] : [], showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), !this.isMobile ? this._getActions() : undefined));
+        return (index.h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, index.h("div", { class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, index.h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, locale: this.locale, mapView: this.mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", selectedIds: this._layer ? [this._layer?.id] : [], showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), !this.isMobile ? this._getActions() : undefined));
     }
     /**
      * Get the actions that are used for various interactions with the table
@@ -1368,7 +1389,7 @@ const LayerTable = class {
      */
     _getDangerAction(icon, label, func, disabled) {
         const _disabled = this._layer === undefined ? true : disabled;
-        return (index.h("div", { class: "display-flex", id: this._getId(icon) }, icon === "trash" ? (index.h("delete-button", { buttonType: "action", class: "display-flex", disabled: _disabled, icon: icon, id: "solutions-delete", ids: this._getIds(), layer: this._layer })) : (index.h("calcite-action", { appearance: "solid", disabled: _disabled, id: icon, onClick: func, text: label }, index.h("calcite-button", { appearance: "transparent", iconStart: icon, kind: "danger" }, label))), this._getToolTip("bottom", icon, label)));
+        return (index.h("div", { class: "display-flex", id: this._getId(icon) }, icon === "trash" ? (index.h("delete-button", { buttonType: "action", class: "display-flex", disabled: _disabled, icon: icon, id: "solutions-delete", ids: this._getIds(), layer: this._layer, locale: this.locale })) : (index.h("calcite-action", { appearance: "solid", disabled: _disabled, id: icon, onClick: func, text: label }, index.h("calcite-button", { appearance: "transparent", iconStart: icon, kind: "danger" }, label))), this._getToolTip("bottom", icon, label)));
     }
     /**
      * Return all currently selected IDs from the table
@@ -2082,6 +2103,7 @@ const LayerTable = class {
         "enableInlineEdit": ["enableInlineEditWatchHandler"],
         "enableShare": ["enableShareWatchHandler"],
         "_controlsThatFit": ["_controlsThatFitWatchHandler"],
+        "locale": ["localeWatchHandler"],
         "mapHidden": ["mapHiddenWatchHandler"],
         "isMobile": ["isMobileWatchHandler"],
         "mapInfo": ["mapInfoWatchHandler"],
@@ -2158,6 +2180,7 @@ const MapCard = class {
         this.homeZoomIndex = 3;
         this.homeZoomPosition = "top-left";
         this.homeZoomToolsSize = "m";
+        this.locale = undefined;
         this.mapInfos = [];
         this.mapWidgetsIndex = 0;
         this.mapWidgetsPosition = "top-right";
@@ -2307,6 +2330,14 @@ const MapCard = class {
             this._updateToolbar();
         }
     }
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
     /**
      * watch for changes in map view and get the first layer
      */
@@ -2439,7 +2470,7 @@ const MapCard = class {
         const mapHeightClass = this.mapInfos?.length > 1 || this.isMapLayout ? "map-height" : "height-full";
         const progressClass = this.isMapLayout ? "" : "display-none";
         this._validateActiveActions();
-        return (index.h(index.Host, { key: 'd4e5ff9c4aa08a4effe19a54a1a48463cb8b3774' }, index.h("div", { key: '51ee35d267d5ef081a4c160de3e03b1790d328c8', class: `${mapContainerClass} width-full`, ref: (el) => this._toolbar = el }, this._getActionBar(), !this.isMobile && this.isMapLayout && this._getDropdown("more-table-options"), this.enableShare && !this.isMobile && this.isMapLayout ? this._getShare("share") : undefined), index.h("calcite-progress", { key: '70a5c232aae8a9ff6740fd326e6ba6fe61936541', class: progressClass, value: 0 }), index.h("div", { key: 'c399acc019d7f0a16dbb644eee4cfdd1e6e83c7c', class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), index.h("map-tools", { key: 'c6a88ccfa140fe9b0d059f74b9254af6ef0997ce', basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: this.enableSingleExpand, homeZoomToolsSize: this.homeZoomToolsSize, mapView: this.mapView, mapWidgetsSize: this.mapWidgetsSize, position: this.mapWidgetsPosition, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration, stackTools: this.stackTools, toolOrder: this.toolOrder })));
+        return (index.h(index.Host, { key: '0b617eeb40229e49a32f5e4a557bfa0f88588fae' }, index.h("div", { key: 'd93aa32cd31279e468e4570af231a3f3788b9897', class: `${mapContainerClass} width-full`, ref: (el) => this._toolbar = el }, this._getActionBar(), !this.isMobile && this.isMapLayout && this._getDropdown("more-table-options"), this.enableShare && !this.isMobile && this.isMapLayout ? this._getShare("share") : undefined), index.h("calcite-progress", { key: '0ac01b19752ded5ddf0b06723b30fa669b2f6933', class: progressClass, value: 0 }), index.h("div", { key: '256bc38d71e3de4ab7ba7328ce12c32fa9ef0d2b', class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), index.h("map-tools", { key: 'e86f179871e8b315ff8d6ecb87545d9af8222590', basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: this.enableSingleExpand, homeZoomToolsSize: this.homeZoomToolsSize, locale: this.locale, mapView: this.mapView, mapWidgetsSize: this.mapWidgetsSize, position: this.mapWidgetsPosition, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration, stackTools: this.stackTools, toolOrder: this.toolOrder })));
     }
     /**
      * Called each time after the component is loaded
@@ -2666,7 +2697,7 @@ const MapCard = class {
         const containerClass = this.isMapLayout ? "display-flex" : "display-block";
         const mobileClass = this.isMobile ? "border-top" : "";
         const headerElements = this.isMapLayout ? "" : "display-none";
-        return (index.h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, index.h("map-picker", { class: mapPickerClass, isMapLayout: this.isMapLayout, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), index.h("div", { class: `mapView-header display-flex ${headerElements}` }, index.h("div", { class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, this.mapView && index.h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, mapView: this.mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", ref: (el) => this._mapLayerPicker = el, scale: "l", selectedIds: this.selectedLayer ? [this.selectedLayer.id] : [], showSingleLayerAsLabel: true, showTables: true, showTablesDisabled: true, type: "dropdown" }))), !this.isMobile && this.isMapLayout ? this._getActions() : undefined));
+        return (index.h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, index.h("map-picker", { class: mapPickerClass, isMapLayout: this.isMapLayout, locale: this.locale, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), index.h("div", { class: `mapView-header display-flex ${headerElements}` }, index.h("div", { class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, this.mapView && index.h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, locale: this.locale, mapView: this.mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", ref: (el) => this._mapLayerPicker = el, scale: "l", selectedIds: this.selectedLayer ? [this.selectedLayer.id] : [], showSingleLayerAsLabel: true, showTables: true, showTablesDisabled: true, type: "dropdown" }))), !this.isMobile && this.isMapLayout ? this._getActions() : undefined));
     }
     /**
      * Get a list of toolInfos that should display in the dropdown
@@ -3004,6 +3035,7 @@ const MapCard = class {
         "appLayout": ["appLayoutWatchHandler"],
         "enableHome": ["enableHomeWatchHandler"],
         "enableShare": ["enableShareWatchHandler"],
+        "locale": ["localeWatchHandler"],
         "mapView": ["mapViewWatchHandler"],
         "selectedLayer": ["selectedLayerWatchHandler"],
         "selectedFeaturesIds": ["selectedFeaturesIdsWatchHandler"],

package/dist/cjs/consent-manager.cjs.entry.js

@@ -617,6 +617,7 @@ const ConsentManager = class {
         index.registerInstance(this, hostRef);
         this.consentGranted = index.createEvent(this, "consentGranted", 7);
         this.firstUseVar = undefined;
+        this.locale = undefined;
         this.measurementIds = undefined;
         this.portal = undefined;
         this._shouldRender = undefined;
@@ -646,6 +647,14 @@ const ConsentManager = class {
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
@@ -767,6 +776,9 @@ const ConsentManager = class {
         const messages = await locale.getLocaleComponentStrings(this.el);
         this._translations = messages[0];
     }
+    static get watchers() { return {
+        "locale": ["localeWatchHandler"]
+    }; }
 };
 ConsentManager.style = ConsentManagerStyle0;
 

package/dist/cjs/crowdsource-manager.cjs.entry.js

@@ -46,7 +46,7 @@ const CrowdsourceManager = class {
         this.enableSearch = true;
         this.enableShare = false;
         this.enableZoom = true;
-        this.hideMapOnLoad = false;
+        this.locale = undefined;
         this.mapInfos = [];
         this.onlyShowUpdatableLayers = true;
         this.popupHeaderColor = undefined;
@@ -158,10 +158,12 @@ const CrowdsourceManager = class {
         this._initMapZoom();
     }
     /**
-     * When true and no appLayout is defined the map will be hidden on load
+     * Fetch translations when the locale is updated
      */
-    hideMapOnLoadWatchHandler() {
-        console.warn("hideMapOnLoad will be removed. Please use appLayout to control layout options.");
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
     }
     //--------------------------------------------------------------------------
     //
@@ -252,7 +254,7 @@ const CrowdsourceManager = class {
     render() {
         // only avoid border when we have a header color that is not white
         const borderClass = this.popupHeaderColor && this.popupHeaderColor !== "#FFFFFF" ? "border-width-0" : "";
-        return (index.h(index.Host, { key: '371cd0aa659657a8f20666356a1eebe72f145a25' }, index.h("calcite-shell", { key: '8a040e66961a614fdc8324f2c991b03b5f938154', class: "position-relative" }, index.h("calcite-panel", { key: '82037c9739af7cf2c7edefeb732736f3e3e18da8', class: `width-full height-full ${borderClass}`, loading: this._isLoading }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter()), this._filterModal()));
+        return (index.h(index.Host, { key: '8fd887051b4437477f1413843dfc6d938304364a' }, index.h("calcite-shell", { key: 'a9989a1698b268db75cdbcadcd3956d944daa25c', class: "position-relative" }, index.h("calcite-panel", { key: '88c5631e21b5ccb6a958e016c274e3aa746a6af1', class: `width-full height-full ${borderClass}`, loading: this._isLoading }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter()), this._filterModal()));
     }
     /**
      * Called after each render
@@ -275,9 +277,6 @@ const CrowdsourceManager = class {
             this._defaultAppLayoutHonored = true;
             this.appLayout = this.defaultAppLayout;
         }
-        else if (this.hideMapOnLoad && !this.appLayout) {
-            this.appLayout = 'tableView';
-        }
         else if (!this.appLayout) {
             this.appLayout = 'splitView';
         }
@@ -298,7 +297,7 @@ const CrowdsourceManager = class {
     _getFooter() {
         const hasSelectedFeatures = this._numSelected > 0;
         const deleteEnabled = this._layer?.editingEnabled && this._layer?.capabilities?.operations?.supportsDelete;
-        return this._isPortraitMobile && hasSelectedFeatures && !this._hideFooter ? (index.h("div", { class: `width-100`, slot: "footer" }, index.h("div", { class: "display-flex padding-1-2" }, index.h("calcite-button", { appearance: "solid", id: "solutions-show", onClick: () => this.showHideMapPopupAndTable(true), width: "full" }, this._translations.view.replace("{{n}}", this._numSelected.toString())), deleteEnabled ? (index.h("delete-button", { class: "padding-inline-start-1 width-full", id: "solutions-delete", ids: this._layerTable.selectedIds, layer: this._layer })) : undefined))) : undefined;
+        return this._isPortraitMobile && hasSelectedFeatures && !this._hideFooter ? (index.h("div", { class: `width-100`, slot: "footer" }, index.h("div", { class: "display-flex padding-1-2" }, index.h("calcite-button", { appearance: "solid", id: "solutions-show", onClick: () => this.showHideMapPopupAndTable(true), width: "full" }, this._translations.view.replace("{{n}}", this._numSelected.toString())), deleteEnabled ? (index.h("delete-button", { class: "padding-inline-start-1 width-full", id: "solutions-delete", ids: this._layerTable.selectedIds, layer: this._layer, locale: this.locale })) : undefined))) : undefined;
     }
     /**
      * sets the active layout to render
@@ -451,7 +450,7 @@ const CrowdsourceManager = class {
         const isTableLayout = this.appLayout === 'tableView';
         const mapContainerClass = (isMapLayout || isTableLayout) ? "position-absolute-0" : this._layoutMode === interfaces.ELayoutMode.HORIZONTAL && (!this._isPortraitMobile || panelOpen) ? "" : "adjusted-height-50";
         const hasMapAndLayer = this.defaultWebmap && this.defaultLayer;
-        return (index.h("div", { class: `${mapContainerClass} overflow-hidden`, id: "card-mapView" }, index.h("map-card", { appLayout: this.appLayout, appProxies: this.appProxies, basemapConfig: this.basemapConfig, class: "width-full", defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultWebmapId: this.defaultWebmap, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableShare: this.enableShare, enableSingleExpand: true, hidden: !this._isPortraitMobile && isTableLayout, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", isMapLayout: isMapLayout, isMobile: this._isMobile, mapInfo: this._mapInfo, mapInfos: this.mapInfos?.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", onToggleFilter: this._toggleFilter.bind(this), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._mapCard = el, selectedFeaturesIds: this._layerTable?.selectedIds, selectedLayer: this._layer, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"], zoomToScale: this.zoomToScale })));
+        return (index.h("div", { class: `${mapContainerClass} overflow-hidden`, id: "card-mapView" }, index.h("map-card", { appLayout: this.appLayout, appProxies: this.appProxies, basemapConfig: this.basemapConfig, class: "width-full", defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultWebmapId: this.defaultWebmap, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableShare: this.enableShare, enableSingleExpand: true, hidden: !this._isPortraitMobile && isTableLayout, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", isMapLayout: isMapLayout, isMobile: this._isMobile, locale: this.locale, mapInfo: this._mapInfo, mapInfos: this.mapInfos?.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", onToggleFilter: this._toggleFilter.bind(this), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._mapCard = el, selectedFeaturesIds: this._layerTable?.selectedIds, selectedLayer: this._layer, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"], zoomToScale: this.zoomToScale })));
     }
     /**
      * Get the expand node for the popup information
@@ -484,7 +483,7 @@ const CrowdsourceManager = class {
         const isTableLayout = this.appLayout === 'tableView';
         const cardManagerHeight = isTableLayout && this.mapInfos?.length > 1 ? "adjusted-height-100-51" : isMapLayout || isTableLayout ? "height-full" : (this._numSelected > 0 && !this._isMobile) ? "height-50" : !this._showInformationHeader ? "adjusted-height-50_25" : !this._isPortraitMobile ? "height-50" : "height-full";
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (index.h("div", { class: `width-50 height-full ${themeClass}` }, index.h("card-manager", { class: `${cardManagerHeight} width-full`, customInfoText: this.customInfoText, enableCreateFeatures: this._enableCreateFeatures && !this._isMobile, enableEditGeometry: this?._mapInfo?.enableEditGeometry, isMobile: this._isPortraitMobile, layer: this._layer, mapView: this?._mapView, onBackFromCreateWorkFlow: () => {
+        return (index.h("div", { class: `width-50 height-full ${themeClass}` }, index.h("card-manager", { class: `${cardManagerHeight} width-full`, customInfoText: this.customInfoText, enableCreateFeatures: this._enableCreateFeatures && !this._isMobile, enableEditGeometry: this?._mapInfo?.enableEditGeometry, isMobile: this._isPortraitMobile, layer: this._layer, locale: this.locale, mapView: this?._mapView, onBackFromCreateWorkFlow: () => {
                 this._showInformationHeader = true;
             }, onCreateWorkFlowStarted: () => {
                 this.appLayout = this._layer.isTable ? "tableView" : "mapView";
@@ -513,7 +512,7 @@ const CrowdsourceManager = class {
             this.defaultGlobalId?.indexOf(",") > -1 ? this.defaultGlobalId.split(",") : [this.defaultGlobalId];
         const defaultOid = !this.defaultOid ? undefined :
             this.defaultOid?.indexOf(",") > -1 ? this.defaultOid.split(",").map(o => parseInt(o, 10)) : [parseInt(this.defaultOid, 10)];
-        return (index.h("calcite-shell", { class: `${tableSizeClass} border-bottom` }, !this._isMobile ? (index.h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, this.getActions(layoutMode, panelOpen))) : undefined, index.h("div", { class: `width-full height-full position-relative z-index-0 ${tableClass}` }, index.h("layer-table", { appLayout: this.appLayout, createFilterModal: false, defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this?._mapInfo?.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isPortraitMobile, mapHidden: isTableLayout, mapInfo: this._mapInfo, mapView: this?._mapView, onToggleFilter: this._toggleFilter.bind(this), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected, zoomToScale: this.zoomToScale })), index.h("div", { class: mapClass, id: "full-map-view" })));
+        return (index.h("calcite-shell", { class: `${tableSizeClass} border-bottom` }, !this._isMobile ? (index.h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, this.getActions(layoutMode, panelOpen))) : undefined, index.h("div", { class: `width-full height-full position-relative z-index-0 ${tableClass}` }, index.h("layer-table", { appLayout: this.appLayout, createFilterModal: false, defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this?._mapInfo?.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isPortraitMobile, locale: this.locale, mapHidden: isTableLayout, mapInfo: this._mapInfo, mapView: this?._mapView, onToggleFilter: this._toggleFilter.bind(this), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected, zoomToScale: this.zoomToScale })), index.h("div", { class: mapClass, id: "full-map-view" })));
     }
     /**
      * Returns the Actions for table's node
@@ -721,7 +720,7 @@ const CrowdsourceManager = class {
     static get watchers() { return {
         "appLayout": ["appLayoutWatchHandler"],
         "enableZoom": ["enableZoomWatchHandler"],
-        "hideMapOnLoad": ["hideMapOnLoadWatchHandler"]
+        "locale": ["localeWatchHandler"]
     }; }
 };
 CrowdsourceManager.style = CrowdsourceManagerStyle0;

package/dist/cjs/crowdsource-reporter.cjs.entry.js

@@ -38,6 +38,7 @@ const CrowdsourceReporter = class {
         this.layerExpressions = [];
         this.layerId = undefined;
         this.level = undefined;
+        this.locale = undefined;
         this.loginTitle = undefined;
         this.mapInfos = [];
         this.mapView = undefined;
@@ -225,6 +226,14 @@ const CrowdsourceReporter = class {
     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.
      */
@@ -265,7 +274,7 @@ const CrowdsourceReporter = class {
         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();
                 }
@@ -316,7 +325,7 @@ const CrowdsourceReporter = class {
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (index.h(index.Host, { key: 'c8f50d4d6004a875444a863a9e839442708f732b' }, this._reportSubmitted && index.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" }, index.h("div", { key: '0204b9967307421fdfeafc61eca006db62f99aab', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && index.h("calcite-alert", { key: 'fd21dc9f77fddd3b5a1edcef8f4ac0983018fb97', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, index.h("div", { key: '3a33593f8c3285d38f651316ea2f4acc148606ec', slot: "title" }, this._translations.error), index.h("div", { key: '588890b6760a7657218282ddff9f3db94b9f73f6', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && index.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" }, index.h("div", { key: 'ed7f7b1604d5dcdbf146fdbae108081742806587', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && index.h("calcite-alert", { key: '4bbcb945e9cc232ba77b327247b37b4ca420a77c', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, index.h("div", { key: 'b75dad85bd1a793232c99b7d870fc9df9ccc0303', slot: "title" }, this._translations.error), index.h("div", { key: 'f161f78d54beba9ecaeccedd69d8e019c88a48e4', slot: "message" }, this._translations.addingCommentFailedMsg)), index.h("div", { key: '43aea9a8138da6645ee420e9e2abe21a3cbe4c91' }, index.h("calcite-shell", { key: '5fd031aba8feed8d54e3118a7a99a5be8254c89f', "content-behind": true }, this._getReporter()))));
+        return (index.h(index.Host, { key: 'fbe7fdc13c462e0fe155107ac784f03b3922d624' }, this._reportSubmitted && index.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" }, index.h("div", { key: '7b81a7c8b3d66159a790ab3d13be9f1b65a6202e', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && index.h("calcite-alert", { key: 'ee2f17e3326ef7c60fb2ee06ed313fd28cf7084a', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, index.h("div", { key: 'b356832ee6d4d16a84cdea0abb6b1c677f9ca1f6', slot: "title" }, this._translations.error), index.h("div", { key: '8aa16df1114b75b6a3e2a76de7fb5c7cbc5d3632', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && index.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" }, index.h("div", { key: '58ccda0d3782dbe70d346b973b7648f8ae4c8c8f', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && index.h("calcite-alert", { key: 'e49e9e3b33df17dd90b3263bec6c17566f6f7b1b', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, index.h("div", { key: 'cfb88dd323ead1398cd73849f68a9c2846ef9d14', slot: "title" }, this._translations.error), index.h("div", { key: 'b27e8983a74c8613e569400b7c7ad0b14d43f323', slot: "message" }, this._translations.addingCommentFailedMsg)), index.h("div", { key: '7ac3d49d6383d2a88e54d91fa00e2c81aa91a890' }, index.h("calcite-shell", { key: '709e673f4e9261b4283c7593926d605c8a049abd', "content-behind": true }, this._getReporter()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -471,7 +480,7 @@ const CrowdsourceReporter = class {
      */
     getLayerListFlowItem() {
         return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports &&
-            index.h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), index.h("calcite-panel", { "full-height": true, "full-width": true }, index.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 }))));
+            index.h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), index.h("calcite-panel", { "full-height": true, "full-width": true }, index.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
@@ -482,7 +491,7 @@ const CrowdsourceReporter = class {
         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 (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, index.h("calcite-panel", { "full-height": true, "full-width": true }, index.h("div", { class: "progress-bar" }, index.h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), index.h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, index.h("div", { slot: "message" }, this._translations.chooseCategoryMsg)), index.h("layer-list", { class: "height-full", layers: onlyReportingLayers, mapView: this.mapView, onLayerSelect: this.navigateToCreateFeature.bind(this), showFeatureCount: false, showNextIcon: false }))));
+        return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, index.h("calcite-panel", { "full-height": true, "full-width": true }, index.h("div", { class: "progress-bar" }, index.h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), index.h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, index.h("div", { slot: "message" }, this._translations.chooseCategoryMsg)), index.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
@@ -490,7 +499,7 @@ const CrowdsourceReporter = class {
      * @protected
      */
     getFeatureCreateFlowItem() {
-        return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this._showSubmitCancelButton && index.h("div", { class: "width-full", slot: "footer" }, index.h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), index.h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), index.h("calcite-panel", { "full-height": true, "full-width": true }, index.h("div", { class: "progress-bar" }, index.h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), index.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 (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this._showSubmitCancelButton && index.h("div", { class: "width-full", slot: "footer" }, index.h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), index.h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), index.h("calcite-panel", { "full-height": true, "full-width": true }, index.h("div", { class: "progress-bar" }, index.h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), index.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
@@ -842,7 +851,7 @@ const CrowdsourceReporter = class {
         const canCreateReports = this._getLayersConfig(this._selectedLayerId)?.reporting && this._layerItemsHash[this._selectedLayerId].supportsAdd;
         const showFilterIcon = layerExpressions?.length > 0;
         return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this._toggleSort(), index.h("calcite-action", { icon: "sort-ascending-arrow", id: "sort-popover", slot: "header-actions-end", text: this._translations.sort, title: this._translations.sort }), showFilterIcon && index.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 &&
-            index.h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), index.h("calcite-panel", { "full-height": true }, index.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 }))));
+            index.h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), index.h("calcite-panel", { "full-height": true }, index.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
@@ -859,7 +868,7 @@ const CrowdsourceReporter = class {
      */
     getFeatureDetailsFlowItem() {
         const showCommentBtn = this._getLayersConfig(this._selectedLayerId)?.comment && this._selectedLayer.relationships.length > 0 && this._relatedTable;
-        return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), index.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(), index.h("calcite-panel", null, index.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 (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), index.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(), index.h("calcite-panel", null, index.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 &&
             index.h("calcite-button", { appearance: "solid", onClick: this.showAddCommentsPanel.bind(this), slot: "footer", width: "full" }, this.commentButtonText || this._translations.comment))));
     }
     /**
@@ -875,14 +884,14 @@ const CrowdsourceReporter = class {
      * @returns Node
      */
     getCommentDetailsFlowItem() {
-        return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), index.h("calcite-panel", { "full-height": true }, index.h("info-card", { allowEditing: false, graphics: this._selectedRelatedFeature, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, paginationEnabled: false }))));
+        return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), index.h("calcite-panel", { "full-height": true }, index.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 (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromCreateRelatedFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), index.h("div", { class: "width-full", slot: "footer" }, this._showSubmitCancelButton && index.h("div", { class: "width-full", slot: "footer" }, index.h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateRelatedFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), index.h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateRelatedFeaturePanel.bind(this), width: "full" }, this._translations.cancel))), index.h("calcite-panel", null, index.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 (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromCreateRelatedFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), index.h("div", { class: "width-full", slot: "footer" }, this._showSubmitCancelButton && index.h("div", { class: "width-full", slot: "footer" }, index.h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateRelatedFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), index.h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateRelatedFeaturePanel.bind(this), width: "full" }, this._translations.cancel))), index.h("calcite-panel", null, index.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
@@ -1229,6 +1238,7 @@ const CrowdsourceReporter = class {
     }
     static get watchers() { return {
         "isMobile": ["isMobileWatchHandler"],
+        "locale": ["localeWatchHandler"],
         "mapView": ["mapViewWatchHandler"],
         "floorLevel": ["floorLevelWatchHandler"],
         "showMyReportsOnly": ["showMyReportsOnlyWatchHandler"]

package/dist/cjs/deduct-calculator.cjs.entry.js

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

package/dist/cjs/feature-list.cjs.entry.js

@@ -32,6 +32,7 @@ const FeatureList = class {
         this.pageSize = 100;
         this.highlightOnMap = false;
         this.highlightOnHover = false;
+        this.locale = undefined;
         this.sortingInfo = undefined;
         this.whereClause = undefined;
         this.textSize = "large";
@@ -104,6 +105,14 @@ const FeatureList = class {
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
     /**
      * Watch for selectedLayerId change and update layer instance and features list for new layerId
      */
@@ -183,9 +192,9 @@ const FeatureList = class {
      * Renders the component.
      */
     render() {
-        return (index.h("calcite-panel", { key: '59289a87561105e3edcbd52bac96b974b1387a16', "full-height": true, "full-width": true }, this._isLoading && index.h("calcite-loader", { key: '59629285e49227209761d2f16bdd62a90750538f', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
-            index.h("calcite-notice", { key: 'bc6c2e6e0fdf959374caf79f2027784e2fdaca15', class: "error-msg", icon: "feature-details", kind: "info", open: true }, index.h("div", { key: '052207ce0b0e2d8030ac7a4a7985c718371a9667', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), index.h("calcite-list", { key: '3f17ea85f2265717aa13c9c71f19c259470c9fcc', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
-            index.h("div", { key: 'ce3179bcdc7af254488dea909034c58db17ec565', class: "width-full", slot: "footer" }, index.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 (index.h("calcite-panel", { key: '6b6214a3dba7df7c2035203750d547945407ecde', "full-height": true, "full-width": true }, this._isLoading && index.h("calcite-loader", { key: '1b05d96de0b4d396b13f448311db76315e28b81b', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
+            index.h("calcite-notice", { key: 'abe755f0bc5c7ff064249159c3154c9ca1c27594', class: "error-msg", icon: "feature-details", kind: "info", open: true }, index.h("div", { key: '5a8ead1d47151cf088ae9e359052cf35129b09d3', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), index.h("calcite-list", { key: 'feb2f2fff276ad49d38ed35dbca41d1878f5e7a3', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
+            index.h("div", { key: 'e396ddcc3d43ae025d9bdb2cd021a2031606211d', class: "width-full", slot: "footer" }, index.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 }))));
     }
     //--------------------------------------------------------------------------
     //
@@ -493,6 +502,7 @@ const FeatureList = class {
         this._translations = messages[0];
     }
     static get watchers() { return {
+        "locale": ["localeWatchHandler"],
         "selectedLayerId": ["selectedLayerWatchHandler"],
         "sortingInfo": ["sortingInfoWatchHandler"],
         "whereClause": ["whereClauseHandler"]