@esri/solutions-components 0.10.39 → 0.10.41

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

@@ -1514,6 +1514,7 @@ const InstantAppsFilterList = class {
         registerInstance(this, hostRef);
         this.filterListReset = createEvent(this, "filterListReset", 7);
         this.filterUpdate = createEvent(this, "filterUpdate", 7);
+        this.isLayerExpUpdated = false;
         this.layerExpressions = undefined;
         this.autoUpdateUrl = false;
         this.closeBtn = false;
@@ -1534,7 +1535,6 @@ const InstantAppsFilterList = class {
         this.messages = undefined;
         this.baseClass = baseClassLight;
         this.disabled = true;
-        this.hasLayerExpression = false;
         this.initDefExpressions = undefined;
         this.initMapImageExpressions = undefined;
         this.initPointCloudFilters = undefined;
@@ -1543,11 +1543,9 @@ const InstantAppsFilterList = class {
         this.handleWhenView();
     }
     watchLayerExpressions() {
-        if (!this.hasLayerExpression) {
-            this.filterLayerExpressions = structuredClone(this.layerExpressions);
-            this.handleLayerExpressionsUpdate();
-            this.hasLayerExpression = true;
-        }
+        this.resetAllFilters();
+        this.filterLayerExpressions = structuredClone(this.layerExpressions);
+        this.handleLayerExpressionsUpdate();
     }
     getFilterInitState() {
         return Promise.resolve({
@@ -1557,7 +1555,6 @@ const InstantAppsFilterList = class {
         });
     }
     forceReset() {
-        this.filterLayerExpressions = structuredClone(this.layerExpressions);
         this.handleResetFilter();
         return this.initExpressions();
     }
@@ -1572,28 +1569,28 @@ const InstantAppsFilterList = class {
         }
         return this.initExpressions();
     }
+    connectedCallback() {
+        var _a;
+        if (this.layerExpressions == null && this.view == null)
+            return;
+        this.isLayerExpUpdated = true;
+        this.filterLayerExpressions = structuredClone(this.layerExpressions);
+        this.disabled = ((_a = this.filterLayerExpressions) === null || _a === void 0 ? void 0 : _a.length) ? undefined : true;
+        this.handleLayerExpressionsUpdate();
+    }
     async componentWillLoad() {
         var _a;
         this.baseClass = getMode(this.el) === 'dark' ? baseClassDark : baseClassLight;
         await this.initializeModules();
         getMessages(this);
-        this.hasLayerExpression = this.layerExpressions != null;
+        if (this.isLayerExpUpdated)
+            return;
+        this.isLayerExpUpdated = true;
         this.filterLayerExpressions = this.layerExpressions != null ? structuredClone(this.layerExpressions) : [];
         this.disabled = ((_a = this.filterLayerExpressions) === null || _a === void 0 ? void 0 : _a.length) ? undefined : true;
-        this.reactiveUtils.whenOnce(() => this.view).then(() => this.handleLayerExpressionsUpdate());
-    }
-    componentShouldUpdate(newValue, _oldValue, name) {
-        if (name === 'view' && newValue != null) {
-            this.handleWhenView();
-        }
-        else if (name === 'layerExpressions') {
-            if (this.hasLayerExpression) {
-                this.resetAllFilters();
-            }
-            this.filterLayerExpressions = structuredClone(this.layerExpressions);
-            this.handleLayerExpressionsUpdate();
-            this.hasLayerExpression = true;
-        }
+        if (this.view == null)
+            return;
+        this.handleLayerExpressionsUpdate();
     }
     componentWillRender() {
         var _a;
@@ -1601,21 +1598,21 @@ const InstantAppsFilterList = class {
     }
     disconnectedCallback() {
         if (this.resetFiltersOnDisconnect) {
+            this.isLayerExpUpdated = false;
             this.filterLayerExpressions = structuredClone(this.layerExpressions);
             this.resetAllFilters();
         }
     }
     async initializeModules() {
-        const [intl, geometryJsonUtils, reactiveUtils] = await loadModules(['esri/intl', 'esri/geometry/support/jsonUtils', 'esri/core/reactiveUtils']);
+        const [intl, geometryJsonUtils] = await loadModules(['esri/intl', 'esri/geometry/support/jsonUtils']);
         this.geometryJsonUtils = geometryJsonUtils;
-        this.reactiveUtils = reactiveUtils;
         this.locale = intl.getLocale();
         this.intl = intl;
     }
     render() {
         const filterConfig = this.loading ? this.renderLoading() : this.initFilterConfig();
-        const footer = this.renderFooter(this.closeBtn, this.resetBtn);
-        return (h(Host, { key: '80c4918bd3bdf65d541ed6cf4cf4843ab0f0df01' }, h("calcite-panel", { key: 'f1da101b071420df42da5eb8f5478d0719b40cec', class: this.baseClass, ref: el => (this.panelEl = el) }, h("slot", { key: '8ebdbf20767027459470fa85fe4238e69bc47ab8', slot: "header-content", name: "filter-header-content" }), h("slot", { key: '177f8db80aa842eeb200344cd7b398cd51ca23f3', slot: "header-actions-end", name: "filter-header-actions-end" }), h("div", { key: "filter-container", class: CSS$1.filterContainer }, filterConfig, footer))));
+        const footer = this.renderFooter();
+        return (h(Host, { key: '055d2a02c5118e59462af8759c6bf2f39304fd75' }, h("calcite-panel", { key: '0335c9b28101257551902737ef373543aebee1f6', class: this.baseClass, ref: el => (this.panelEl = el) }, h("slot", { key: '4b471e66583b3f2fd733688d65ce8d3b2acbeb66', slot: "header-content", name: "filter-header-content" }), h("slot", { key: 'f5832075687a6812b902643fd057587b438b38cf', slot: "header-actions-end", name: "filter-header-actions-end" }), h("div", { key: "filter-container", class: CSS$1.filterContainer }, filterConfig, footer))));
     }
     renderLoading() {
         return h("calcite-loader", { label: "Loading filters..." });
@@ -1684,10 +1681,11 @@ const InstantAppsFilterList = class {
         const check = min != null && max != null;
         return check ? (h("label", { class: CSS$1.filterUIItemContainer }, h("span", null, expression === null || expression === void 0 ? void 0 : expression.name), h("div", { class: CSS$1.dateInputContainer }, h("calcite-input-date-picker", { id: expression === null || expression === void 0 ? void 0 : expression.id.toString(), onCalciteInputDatePickerChange: this.handleDatePickerRangeChange.bind(this, expression, layerExpression), min: min, max: max, "overlay-positioning": "fixed", lang: (_c = this.locale) !== null && _c !== void 0 ? _c : 'en', layout: "vertical", value: value, range: true }), h("calcite-action", { onClick: this.handleResetDatePicker.bind(this, expression, layerExpression), icon: "reset", text: (_d = this.messages) === null || _d === void 0 ? void 0 : _d.resetDatePicker, scale: "s" })))) : null;
     }
-    renderFooter(closeBtn, resetBtn) {
+    renderFooter() {
         var _a, _b, _c;
         const closeText = this.closeBtnText != null ? this.closeBtnText : (_a = this.messages) === null || _a === void 0 ? void 0 : _a.close;
-        return (h("div", { class: CSS$1.footer, slot: "footer" }, resetBtn ? (h("calcite-button", { appearance: "outline", width: "half", disabled: this.disabled, onClick: this.handleResetFilter.bind(this) }, (_b = this.messages) === null || _b === void 0 ? void 0 : _b.resetFilter)) : undefined, closeBtn ? (h("calcite-button", { appearance: "solid", width: "half", kind: "brand", onClick: (_c = this.closeBtnOnClick) === null || _c === void 0 ? void 0 : _c.bind(this) }, closeText)) : undefined));
+        const btnWidth = this.closeBtn && this.resetBtn ? 'half' : 'full';
+        return (h("div", { class: CSS$1.footer, slot: "footer" }, this.resetBtn ? (h("calcite-button", { appearance: "outline", width: btnWidth, disabled: this.disabled, onClick: this.handleResetFilter.bind(this) }, (_b = this.messages) === null || _b === void 0 ? void 0 : _b.resetFilter)) : undefined, this.closeBtn ? (h("calcite-button", { appearance: "solid", width: btnWidth, kind: "brand", onClick: (_c = this.closeBtnOnClick) === null || _c === void 0 ? void 0 : _c.bind(this) }, closeText)) : undefined));
     }
     renderZoomTo(layerExpression) {
         var _a;
@@ -1718,23 +1716,21 @@ const InstantAppsFilterList = class {
     }
     async initExpressions() {
         this.loading = true;
-        if (this.filterLayerExpressions == null)
+        if (this.filterLayerExpressions == null || this.view == null)
             return;
-        const tmpLE = await this.processExpressions();
+        await this.processExpressions();
         this.loading = false;
-        this.filterLayerExpressions = [...tmpLE];
     }
     async processExpressions() {
         var _a;
         if (!this.filterLayerExpressions)
-            return [];
+            return;
         for (const layerExpression of this.filterLayerExpressions) {
             for (const expression of layerExpression.expressions || []) {
                 expression.active = (_a = expression.active) !== null && _a !== void 0 ? _a : expression.definitionExpression != null;
                 await this.setInitExpression(layerExpression, expression);
             }
         }
-        return this.filterLayerExpressions;
     }
     handleResetFilter() {
         var _a;
@@ -1804,6 +1800,8 @@ const InstantAppsFilterList = class {
     }
     resetAllFilters() {
         var _a, _b, _c, _d, _e;
+        if (this.initDefExpressions == null)
+            return;
         const allLayersAndTables = (_c = (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.allLayers) === null || _c === void 0 ? void 0 : _c.concat((_e = (_d = this.view) === null || _d === void 0 ? void 0 : _d.map) === null || _e === void 0 ? void 0 : _e.allTables);
         allLayersAndTables === null || allLayersAndTables === void 0 ? void 0 : allLayersAndTables.forEach(layer => {
             var _a, _b;
@@ -1905,18 +1903,19 @@ const InstantAppsFilterList = class {
         }
         return false;
     }
-    updateCodedValueExpression(expression, layerField) {
+    async updateCodedValueExpression(layerExpression, expression, layerField) {
         var _a, _b;
         if (!(layerField === null || layerField === void 0 ? void 0 : layerField.domain) || ((_a = layerField === null || layerField === void 0 ? void 0 : layerField.domain) === null || _a === void 0 ? void 0 : _a.type) !== 'coded-value') {
             return false;
         }
+        const layer = this.findFilterLayer(layerExpression);
+        await this.getFeatureAttributes(layer, expression);
         const domain = layerField.domain;
         const codedValuesMap = domain.codedValues.reduce((acc, { code, name }) => {
             acc[code] = name;
             return acc;
         }, {});
         expression.codedValues = codedValuesMap;
-        expression.fields = Object.keys(codedValuesMap);
         if ((_b = expression.selectedFields) === null || _b === void 0 ? void 0 : _b.length) {
             const selectedFieldsExpression = expression.selectedFields.map((field) => (typeof field === 'number' ? field : `'${handleSingleQuote(field)}'`)).join(',');
             expression.definitionExpression = `${expression.field} IN (${selectedFieldsExpression})`;
@@ -1985,7 +1984,7 @@ const InstantAppsFilterList = class {
         if (features === null || features === void 0 ? void 0 : features.length) {
             expression.fields = [...new Set(features)];
             if (expression.type === 'string') {
-                expression.fields = expression.fields.sort();
+                expression.fields = expression.fields.sort((a, b) => a.localeCompare(b));
             }
             else if (expression.type === 'number') {
                 expression.fields = expression.fields.sort((a, b) => a - b);
@@ -2014,8 +2013,15 @@ const InstantAppsFilterList = class {
                     expression.fields.push(...features);
                 }
             });
-            expression.fields = [...new Set(expression.fields)].sort();
-            this.filterLayerExpressions = [...this.filterLayerExpressions];
+            if (expression.type === 'string') {
+                expression.fields = [...new Set(expression.fields)].sort((a, b) => a.localeCompare(b));
+            }
+            else if (expression.type === 'number') {
+                expression.fields = [...new Set(expression.fields)].sort((a, b) => a - b);
+            }
+            else {
+                expression.fields = [...new Set(expression.fields)].sort();
+            }
         });
     }
     async queryForFeatures(layer, query, field) {
@@ -2098,13 +2104,14 @@ const InstantAppsFilterList = class {
             case 'number':
                 return await this.updateNumberExpression(layerExpression, expression);
             case 'date':
-                return this.updateDateExpressionBasedOnDisplayOption(layerExpression, expression);
+                return await this.updateDateExpressionBasedOnDisplayOption(layerExpression, expression);
             case 'coded-value':
-                return this.updateCodedValueExpression(expression, layerField);
+                return await this.updateCodedValueExpression(layerExpression, expression, layerField);
             case 'range':
-                return this.updateRangeExpressionBasedOnDisplayOption(layerExpression, expression, layerField);
+                return await this.updateRangeExpressionBasedOnDisplayOption(layerExpression, expression, layerField);
             case 'checkbox':
             case null:
+            case undefined:
                 return (_a = expression.active) !== null && _a !== void 0 ? _a : false;
             default:
                 return false;
@@ -2304,31 +2311,9 @@ const InstantAppsFilterList = class {
         this.handleLayerExpressionsUpdate();
     }
     async handleLayerExpressionsUpdate() {
-        if (this.view == null)
-            return;
-        const map = this.view.map;
-        this.initDefExpressions = {};
-        this.initPointCloudFilters = {};
-        this.initMapImageExpressions = {};
-        map.allLayers.concat(map.allTables).forEach(layer => {
-            if (!supportedTypes.includes(layer.type))
-                return;
-            const fl = layer;
-            if (fl.type === 'point-cloud') {
-                this.initPointCloudFilters[fl.id] = fl.filters;
-            }
-            else if (fl.type === 'map-image') {
-                this.initMapImageExpressions[fl.id] = fl.allSublayers.reduce((acc, sublayer) => {
-                    acc[sublayer.id] = sublayer.definitionExpression;
-                    return acc;
-                }, {});
-            }
-            else {
-                this.initDefExpressions[fl.id] = fl.definitionExpression;
-            }
-        });
-        this.initExpressions();
+        this.updateInitExpressions();
         this.handleURLParams();
+        this.initExpressions();
     }
     async handleZoomTo(layerExpression) {
         const zoomId = (layerExpression === null || layerExpression === void 0 ? void 0 : layerExpression.sublayerId) ? `#zoom-to-${layerExpression.id}-${layerExpression.sublayerId}` : `#zoom-to-${layerExpression.id}`;
@@ -2499,6 +2484,31 @@ const InstantAppsFilterList = class {
         query.geometry = geometry;
         query.spatialRelationship = 'intersects';
     }
+    updateInitExpressions() {
+        if (this.view == null)
+            return;
+        const map = this.view.map;
+        this.initDefExpressions = {};
+        this.initPointCloudFilters = {};
+        this.initMapImageExpressions = {};
+        map.allLayers.concat(map.allTables).forEach(layer => {
+            if (!supportedTypes.includes(layer.type))
+                return;
+            const fl = layer;
+            if (fl.type === 'point-cloud') {
+                this.initPointCloudFilters[fl.id] = fl.filters;
+            }
+            else if (fl.type === 'map-image') {
+                this.initMapImageExpressions[fl.id] = fl.allSublayers.reduce((acc, sublayer) => {
+                    acc[sublayer.id] = sublayer.definitionExpression;
+                    return acc;
+                }, {});
+            }
+            else {
+                this.initDefExpressions[fl.id] = fl.definitionExpression;
+            }
+        });
+    }
     get el() { return getElement(this); }
     static get watchers() { return {
         "view": ["watchViewHandler"],

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

@@ -1217,6 +1217,7 @@ const MapLayerPicker = class {
         this.enabledTableIds = [];
         this.height = undefined;
         this.isMobile = undefined;
+        this.locale = undefined;
         this.mapView = undefined;
         this.onlyShowUpdatableLayers = undefined;
         this.placeholderIcon = "";
@@ -1260,6 +1261,14 @@ const MapLayerPicker = 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();
+    }
     /**
      * Called each time the mapView prop is changed.
      */
@@ -1341,7 +1350,7 @@ const MapLayerPicker = class {
         const id = "map-layer-picker";
         let style = this.height > 0 ? { "height": `${this.height.toString()}px` } : {};
         style = { ...style, "display": this.display };
-        return (h(Host, { key: 'a876ec719aede5ec43af1b40f09e4c9e6b693f34' }, h("div", { key: '78e720facdf3c124208ff8dbde18a056234e63ac', class: "map-layer-picker-container", style: style }, h("div", { key: '6bb47ccb7c28565b140d79b6af6399a235e3ccf9', class: "map-layer-picker", style: style }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
+        return (h(Host, { key: '33b19dbf87019ad071242aaa688e49f35e2c2808' }, h("div", { key: '85e781782fc529acae68b1137f8ec1a317b452a0', class: "map-layer-picker-container", style: style }, h("div", { key: 'c257b179b56939d998650c676e835c9976d9fb21', class: "map-layer-picker", style: style }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
             !this._hasMultipleLayers && this.showSingleLayerAsLabel ? this._getSingleLayerPlaceholder() :
                 this.type === "combobox" ? this._getCombobox(id) :
                     this.type === "select" ? this._getSelect(id) : this._getDropdown(id)))));
@@ -1592,6 +1601,7 @@ const MapLayerPicker = class {
         this._translations = messages[0];
     }
     static get watchers() { return {
+        "locale": ["localeWatchHandler"],
         "mapView": ["mapViewWatchHandler"]
     }; }
 };

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

@@ -161,6 +161,7 @@ const CreateRelatedFeature = class {
         this.fail = createEvent(this, "fail", 7);
         this.isActionPending = createEvent(this, "isActionPending", 7);
         this.formReady = createEvent(this, "formReady", 7);
+        this.locale = undefined;
         this.mapView = undefined;
         this.table = undefined;
         this.selectedFeature = undefined;
@@ -206,6 +207,14 @@ const CreateRelatedFeature = 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();
+    }
     /**
     * Called each time the mapView prop is changed.
     */
@@ -296,7 +305,7 @@ const CreateRelatedFeature = class {
     }
     render() {
         const loaderClass = this._editorLoading ? "" : "display-none";
-        return (h(Fragment, { key: '641b4f6f51bce04b6263a1d7dc72a31839df970d' }, this.showGuidingMsg && h("calcite-notice", { key: '1a6e577bcc0632a7bc69dd411a692062a7ad176e', class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { key: '55c5836314fcca69a259be3a36e34c527edcabf3', slot: "message" }, this._translations.provideDetailsMsg)), h("calcite-loader", { key: '18c5603a4a75c67a160a71caa15e94790f66d60b', class: loaderClass, label: "", scale: "s" })));
+        return (h(Fragment, { key: '48fffd1e9dd429d339d9a72e35f5c31561fc076f' }, this.showGuidingMsg && h("calcite-notice", { key: '9a6f700c135bb7593e4338981a30531e3d9fba8a', class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { key: '7044e923a9fab833a7a6fe0bb97fa688d7e6eecc', slot: "message" }, this._translations.provideDetailsMsg)), h("calcite-loader", { key: '15599ae77e451d220689c13098a31c5788714306', class: loaderClass, label: "", scale: "s" })));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -483,6 +492,7 @@ const CreateRelatedFeature = class {
         this._translations = messages[0];
     }
     static get watchers() { return {
+        "locale": ["localeWatchHandler"],
         "mapView": ["mapViewWatchHandler"],
         "_editorLoading": ["_editorLoadingWatchHandler"]
     }; }
@@ -504,6 +514,7 @@ const FeatureDetails = class {
         this.graphics = undefined;
         this.reportingOptions = undefined;
         this.layerItemsHash = undefined;
+        this.locale = undefined;
         this.showUserImageInCommentsList = false;
         this._likeFieldAvailable = false;
         this._likeCount = 0;
@@ -652,12 +663,12 @@ const FeatureDetails = class {
     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
@@ -942,6 +953,7 @@ const LayerList = class {
         this.layersListLoaded = createEvent(this, "layersListLoaded", 7);
         this.mapView = undefined;
         this.layers = undefined;
+        this.locale = undefined;
         this.showFeatureCount = true;
         this.showNextIcon = false;
         this.applyLayerViewFilter = false;
@@ -965,6 +977,14 @@ const LayerList = 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)
@@ -1013,9 +1033,9 @@ const LayerList = class {
      * Renders the component.
      */
     render() {
-        return (h(Fragment, { key: 'f8e0c21d4ff87d663a1e0f00f1d9ef1123091db9' }, this._isLoading && h("calcite-loader", { key: '42058be6b41126e58d33895bc237b174e55a16ed', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
-            h("calcite-notice", { key: '89d9073a156f07379699cc5b67bf9ba54654cc68', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { key: '730b8dcca79bd45a7a6eecb5030626d1dcd01238', slot: "title" }, this._translations.error), h("div", { key: '656e8276ffab75734909348f49f11492de1d5a8b', slot: "message" }, this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
-            h("calcite-list", { key: '1d2206d3163b6c5ed8511e32ab296f0025889824', "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
+        return (h(Fragment, { key: 'a151c8fd65c50aacb23dcd0c858e52c0c7cd7e5e' }, this._isLoading && h("calcite-loader", { key: '544a134bccc29048ca80b996844cc944bcd97a24', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
+            h("calcite-notice", { key: '7557f91c8c3349c120c043ea59458b4c834dce2e', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { key: 'ea8b20f8c7da5053641cfad56e3395ae3c6286f5', slot: "title" }, this._translations.error), h("div", { key: '38aaed7b456aba0b1dd70183be03e9133834dfb4', slot: "message" }, this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
+            h("calcite-list", { key: '817de422b8387cafb7f9a17515cf9b3c13998522', "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
     }
     //--------------------------------------------------------------------------
     //
@@ -1141,6 +1161,9 @@ const LayerList = class {
         const messages = await getLocaleComponentStrings(this.el);
         this._translations = messages[0];
     }
+    static get watchers() { return {
+        "locale": ["localeWatchHandler"]
+    }; }
 };
 LayerList.style = LayerListStyle0;