@esri/solutions-components 0.8.22 → 0.8.23

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

@@ -86,7 +86,7 @@ export class CardManager {
         var _a, _b;
         const featuresClass = ((_a = this._graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "" : "display-none";
         const messageClass = ((_b = this._graphics) === null || _b === void 0 ? void 0 : _b.length) > 0 ? "display-none" : "";
-        return (h(Host, { key: 'c4b71cefeb5eec1e1312104c519dfb9ef1398d71' }, h("div", { key: '6c1539db40060f9295c8aa72af29eac5f9c67d8d', class: "overflow-auto height-full" }, h("calcite-shell", { key: '2a4f7b47e01e3f27528dbce5fe236187a0f57dab', class: "position-relative " + featuresClass }, h("div", { key: '4b226239c5b80210aa3d42d422bbc50a66bdcf59' }, h("info-card", { key: '23ec16e93def6ebf81ed86109a55aa3e667fb958', graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))), h("calcite-shell", { key: '8b385e91e35cfa4dc14aa67f300badf627119c39', class: "position-relative " + messageClass }, h("div", { key: 'a4cca3a463dbe115638c3b15d4613f7d719f153f', class: "padding-1" }, h("calcite-notice", { key: '91047393ac4f19864179f97631ffcdf48aaa47c1', icon: "table", open: true }, h("div", { key: 'c81f06e628d2811c3cedbae6a3e38fb972d0a759', slot: "message" }, this._translations.selectFeaturesToStart)))))));
+        return (h(Host, { key: 'c4b71cefeb5eec1e1312104c519dfb9ef1398d71' }, h("div", { key: '6c1539db40060f9295c8aa72af29eac5f9c67d8d', class: "overflow-auto height-full" }, h("calcite-shell", { key: '2a4f7b47e01e3f27528dbce5fe236187a0f57dab', class: "position-relative " + featuresClass }, h("div", { key: '4b226239c5b80210aa3d42d422bbc50a66bdcf59' }, h("info-card", { key: '55561c22c8685c3ba3daa25c51053fa47d553ba9', graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView }))), h("calcite-shell", { key: '8f9156bf9c08920e7731f50daeecb031e9135281', class: "position-relative " + messageClass }, h("div", { key: '0529f9a60349337716ba53f10551b08a34c48209', class: "padding-1" }, h("calcite-notice", { key: '812047f7628598fa6b20e3df00355efee584bb71', icon: "table", open: true }, h("div", { key: 'd7c1b7ab03de1fb30e8e84a6d331d43e69a9946e', slot: "message" }, this._translations.selectFeaturesToStart)))))));
     }
     //--------------------------------------------------------------------------
     //

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

@@ -53,7 +53,7 @@ export class CrowdsourceManager {
         this.defaultLevel = "";
         this.defaultOid = "";
         this.defaultWebmap = "";
-        this.introductionPageEnabled = false;
+        this.introductionWindowEnabled = false;
         this.enableAutoRefresh = false;
         this.enableBasemap = true;
         this.enableColumnReorder = true;
@@ -202,7 +202,7 @@ export class CrowdsourceManager {
     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 (h(Host, { key: 'aa063ae3fc59a7f3969aaa5b569fbd0ef09a1766' }, h("calcite-shell", { key: 'd5d5cdb201c24f2123089c5cd5f70f973aa24e78', class: "position-relative" }, h("calcite-panel", { key: 'c95bb56946b85574825160acf1411fdf7308cc8c', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
+        return (h(Host, { key: 'adf6957871aa364f3c0d65f949eb94587f065780' }, h("calcite-shell", { key: 'cbe60dd48a1ffb16ca5bf4d7bf7ee96272fed7a5', class: "position-relative" }, h("calcite-panel", { key: '19e98d7bd25c939f3d8860d68c61a5168730eb00', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
     }
     /**
      * Called after each render
@@ -323,13 +323,20 @@ export class CrowdsourceManager {
         const contentClass = layoutMode === ELayoutMode.HORIZONTAL ? "" : "display-flex";
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
         return (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideTable), this._getTable(layoutMode, panelOpen, hideTable)), this.coverPageEnabled &&
+            h("div", { class: "floating-container", onClick: this.coverPageButtonClick.bind(this) }, h("calcite-button", { appearance: "solid", class: `floating-button ${themeClass}`, "icon-start": "content-minimal", kind: "neutral", label: "", round: true, scale: "l", "split-child": "primary", width: "auto" })), this.introductionWindowEnabled &&
             h("div", { class: "floating-container", onClick: this.infoButtonClick.bind(this) }, h("calcite-button", { appearance: "solid", class: `floating-button ${themeClass}`, "icon-start": "information-letter", kind: "neutral", label: "", round: true, scale: "l", "split-child": "primary", width: "auto" }))));
     }
     /**
      * Emit the event when info button clicked
      */
     infoButtonClick() {
-        this.infoIconButtonClick.emit();
+        this.showIntroductionWindow.emit();
+    }
+    /**
+   * Emit the event when cover page button clicked
+   */
+    coverPageButtonClick() {
+        this.showCoverPage.emit();
     }
     /**
      * Get the map and card nodes based for the current layout options
@@ -698,7 +705,7 @@ export class CrowdsourceManager {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
-            "introductionPageEnabled": {
+            "introductionWindowEnabled": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -710,9 +717,9 @@ export class CrowdsourceManager {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "boolean: When true a introduction page has been enabled in the consuming application.\r\nAlso when true a floating button will be shown in the lower right of the window that\r\nwill emit an event when clicked that the consuming application can respond to that will open the introduction page."
+                    "text": "boolean: When true a introduction window has been enabled in the consuming application.\r\nAlso when true a floating button will be shown in the lower right of the window that\r\nwill emit an event when clicked that the consuming application can respond to that will open the introduction window."
                 },
-                "attribute": "introduction-page-enabled",
+                "attribute": "introduction-window-enabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
@@ -1210,8 +1217,8 @@ export class CrowdsourceManager {
     }
     static get events() {
         return [{
-                "method": "infoIconButtonClick",
-                "name": "infoIconButtonClick",
+                "method": "showIntroductionWindow",
+                "name": "showIntroductionWindow",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -1224,6 +1231,21 @@ export class CrowdsourceManager {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "showCoverPage",
+                "name": "showCoverPage",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on demand when a cover page button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "el"; }

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

@@ -575,7 +575,7 @@ export class CrowdsourceReporter {
      * @returns Node
      */
     getCommentDetailsFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, graphics: this._selectedRelatedFeature, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, paginationEnabled: false, zoomAndScrollToSelected: false }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, graphics: this._selectedRelatedFeature, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, paginationEnabled: false }))));
     }
     /**
      * Returns the calcite-flow item for add comment

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

@@ -5,7 +5,7 @@
 .buttons-container{
   align-items: center;
   display: flex;
-  padding: 10px 0 10px 15px;
+  padding: 10px;
   color: var(--calcite-color-text-1) !important;
   background-color: var(--calcite-color-foreground-1) !important;
   border-block-start: 1px solid var(--calcite-color-border-3);
@@ -15,7 +15,7 @@
 .comment-btn{
   display: flex;
   gap: 5px;
-  width: 37px;
   font-size: var(--calcite-font-size--2);
   align-items: center;
+  padding: 0 0.5rem;
 }

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

@@ -109,12 +109,12 @@ export class FeatureDetails {
         var _a, _b, _c, _d, _e;
         //When related features found show comments list of only those features else comments list will be empty
         const commentsListWhereClause = ((_a = this._relatedFeaturesOIDs) === null || _a === void 0 ? void 0 : _a.length) > 0 ? `objectId in(${this._relatedFeaturesOIDs})` : '1=0';
-        return (h("calcite-panel", { key: 'b8d1cc9d4d9040665be3c892f5738a179ab64eaf', "full-height": true }, h("info-card", { key: '0a31a068a4e80e34ba2435a7d8d8faaea271dac8', allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el, zoomAndScrollToSelected: true }), (this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) &&
-            h("div", { key: '8e27d13341a9b4ad37f87778e046a4e8e0b2778e', class: "buttons-container" }, this._commentsAvailable &&
-                h("div", { key: '3dd02fdbc107e7ce04e8aabb96a6748b68eeec6b', class: "comment-btn" }, h("span", { key: '5601fdb24ff385e0b6d2b9e5b86bde06b3c2d1b8' }, this._relatedFeaturesOIDs.length), h("calcite-icon", { key: '97a517d117a4d5a8c6798da9c9c82e46c39c25f8', icon: "speech-bubble", scale: 's' })), this._likeFieldAvailable &&
-                h("calcite-button", { key: '0d1ff14be9396ab3ff634e92208792f5fd3b8d36', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", onClick: this.onLikeButtonClick.bind(this), scale: 's' }, (_c = (_b = this._likeCount) !== null && _b !== void 0 ? _b : this._selectedGraphic.attributes[this._likeField]) !== null && _c !== void 0 ? _c : 0), this._dislikeFieldAvailable &&
-                h("calcite-button", { key: '34e362e083dbc13dffae7ad5544aa33a0421a51a', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", onClick: this.onDislikeButtonClick.bind(this), scale: 's' }, (_e = (_d = this._disLikeCount) !== null && _d !== void 0 ? _d : this._selectedGraphic.attributes[this._dislikeField]) !== null && _e !== void 0 ? _e : 0)), this.relatedTableId && this._commentsAvailable &&
-            h("feature-list", { key: '4abc53ab7679b07f0dd7413b97f447da736e5002', class: "height-full", mapView: this.mapView, pageSize: 5, ref: el => this._commentsList = el, selectedLayerId: this.relatedTableId, showInitialLoading: false, textSize: "small", whereClause: commentsListWhereClause })));
+        return (h("calcite-panel", { key: 'b8d1cc9d4d9040665be3c892f5738a179ab64eaf', "full-height": true }, h("info-card", { key: 'a4c7771bdf84f85b88bd6bf2544e2a1a985fdbbe', allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el }), (this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) &&
+            h("div", { key: '2d405f3f722eb4fe0de4212ec4ff3e4b8588db40', class: "buttons-container" }, this._commentsAvailable &&
+                h("div", { key: '9454b0cb93e665de20fafb4ca75e1a6d3198a03a', class: "comment-btn" }, h("span", { key: '8c682aa73f9c28b9db5266cfb5ad970f15535241' }, this._relatedFeaturesOIDs.length), h("calcite-icon", { key: 'd920e63f8d1d447afa732bd336f6a09e18ccbd2a', icon: "speech-bubble", scale: 's' })), this._likeFieldAvailable &&
+                h("calcite-button", { key: '6b68adcc0b24b1e8d71148182339fa1b6d7922a1', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", onClick: this.onLikeButtonClick.bind(this), scale: 's' }, (_c = (_b = this._likeCount) !== null && _b !== void 0 ? _b : this._selectedGraphic.attributes[this._likeField]) !== null && _c !== void 0 ? _c : 0), this._dislikeFieldAvailable &&
+                h("calcite-button", { key: '7c365fdaf5a3de12745e4a7b7a79dc8ec5e37cc0', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", onClick: this.onDislikeButtonClick.bind(this), scale: 's' }, (_e = (_d = this._disLikeCount) !== null && _d !== void 0 ? _d : this._selectedGraphic.attributes[this._dislikeField]) !== null && _e !== void 0 ? _e : 0)), this.relatedTableId && this._commentsAvailable &&
+            h("feature-list", { key: '7b2b92b001dcdeb51d7ae1c1b39dc263f5ed1934', class: "height-full", mapView: this.mapView, pageSize: 5, ref: el => this._commentsList = el, selectedLayerId: this.relatedTableId, showInitialLoading: false, textSize: "small", whereClause: commentsListWhereClause })));
     }
     /**
      * Load esri javascript api modules

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

@@ -38,6 +38,6 @@
 }
 
 .feature-list-popup-title-small {
-  font-size: x-small;
+  font-size: small;
   padding: 10px 12px;
 }

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

@@ -280,7 +280,7 @@ export class FeatureList {
         //use object id if popupTitle is null or undefined
         popupTitle = popupTitle !== null && popupTitle !== void 0 ? popupTitle : oId;
         const popupTitleClass = this.textSize === 'small' ? 'feature-list-popup-title-small' : 'feature-list-popup-title';
-        return (h("calcite-list-item", { onCalciteListItemSelect: (e) => { void this.featureClicked(e, selectedFeature); }, onMouseLeave: () => { void this.clearHighlights(); }, onMouseOver: () => { void this.onFeatureHover(selectedFeature); }, value: oId }, h("div", { class: popupTitleClass, slot: "content-start" }, popupTitle), h("calcite-icon", { icon: "chevron-right", scale: "s", slot: "content-end" })));
+        return (h("calcite-list-item", { onCalciteListItemSelect: (e) => { void this.featureClicked(e, selectedFeature); }, onMouseLeave: () => { void this.clearHighlights(); }, onMouseOver: () => { void this.onFeatureHover(selectedFeature); }, value: oId }, h("div", { class: popupTitleClass, slot: "content-start" }, popupTitle), h("calcite-icon", { flipRtl: true, icon: "chevron-right", scale: "s", slot: "content-end" })));
     }
     /**
      * Fetches the component's translations

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

@@ -32,7 +32,6 @@ export class InfoCard {
         this.isLoading = false;
         this.isMobile = undefined;
         this.mapView = undefined;
-        this.zoomAndScrollToSelected = undefined;
         this.allowEditing = true;
         this.highlightEnabled = true;
         this.paginationEnabled = true;
@@ -185,8 +184,8 @@ export class InfoCard {
         const id = (_d = (_c = this._features) === null || _c === void 0 ? void 0 : _c.selectedFeature) === null || _d === void 0 ? void 0 : _d.getObjectId();
         const ids = parseInt(id === null || id === void 0 ? void 0 : id.toString(), 10) > -1 ? [id] : [];
         const deleteEnabled = ((_e = this._layer) === null || _e === void 0 ? void 0 : _e.editingEnabled) && ((_h = (_g = (_f = this._layer) === null || _f === void 0 ? void 0 : _f.capabilities) === null || _g === void 0 ? void 0 : _g.operations) === null || _h === void 0 ? void 0 : _h.supportsDelete);
-        return (h(Host, { key: '7b48c1dbd2c4e384c4bcba62a8cf35e4c62d2edb' }, h("calcite-shell", { key: 'a8387dfb3968ea07182cdd782a5a147bdcb1188a', style: { position: this.position } }, this._getHeader(), h("calcite-loader", { key: '1695d423a19876c6ccde5f4004f21ca26e305350', class: loadingClass, label: this._translations.fetchingData }), h("div", { key: 'd8870e95ba06ed713c5143c5b260ee4059275d81', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), h("div", { key: '84af335caa0f39890801faebc207bf8c794fe1e3', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
-            h("div", { key: 'fa91c18424af38067c44e50635b9af55aacc84b8', class: "display-flex top-border padding-1-2" }, h("calcite-button", { key: 'c4565bda374ab4eb2afd2273c62256fae187d151', appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { key: '7175a74e7e1db0939fbbe4a229e7f6df6efb2768', placement: "bottom", "reference-element": "solutions-edit" }, h("span", { key: '6443c4d8274fe6003f5dcbd3b36f35057234c550' }, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { key: 'ff3d3dffd57bf118f7e71ec5a504bbcfda0de229', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { key: '1912bdf3dbad45ba66acf13ef8ad6894ced8caa2' }, h("calcite-button", { key: 'fe1e5032b764b3c0ac8ef619c9d365f8d781d6b3', appearance: 'transparent', disabled: nextBackDisabled, iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { key: 'a9928e72cc3dcebad2544ee5a347a0b70ebdae4b', placement: "top", "reference-element": "solutions-back" }, h("span", { key: '6d8cc94ae72deab6ae19d3314f5b0f7e1833bd3c' }, this._translations.back))), h("calcite-action", { key: '90d7951f0eacd4b77f8ebe3da79a12665a8b9f63', class: 'pagination-action', onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { key: '6c36eb43691a79b6a7c0da99663fa22c1d97e572', class: "pagination-count" }, this._count)), h("div", { key: '23758504ca1b4b97c4c488e88e61f0c3cdc10830' }, h("calcite-button", { key: '93efeff6e0cb54edd1817c3410806b009755618f', appearance: "transparent", disabled: nextBackDisabled, iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { key: '17afd49a3b167d9322d944a9d8ae6ffc249d202e', placement: "top", "reference-element": "solutions-next" }, h("span", { key: '0b15e569313961c53700d2ef6eb148b9c0efd778' }, this._translations.next))))), h("edit-card", { key: '2217a66105095ea1e5bd577dc8bf970b3fdeae10', class: editClass, graphicIndex: (_j = this._features) === null || _j === void 0 ? void 0 : _j.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { key: 'c59bd8d759ef1df763b3bbe513b7146cfa270057', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { key: '3733d543e7483037aa5130f0ca06f8da434eaf7e', slot: "title" }, this._translations.editDisabled), h("div", { key: 'eaace9548fd442015000f836d54e556c9859a3fc', slot: "message" }, this._translations.enableEditing)))));
+        return (h(Host, { key: 'ab22ed392db6e8bad11758f39d6bd1738c10a229' }, h("calcite-shell", { key: 'f97bdc21cb5e667b1973353a45297f9536252fcd', style: { position: this.position } }, this._getHeader(), h("calcite-loader", { key: '82b78360be903de1be044406735db84122399f49', class: loadingClass, label: this._translations.fetchingData }), h("div", { key: '168d0310daf7eca08c4891283b8a9865eda102bc', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), h("div", { key: '258b913cfdc4f1269dcc250a473643878d97f8bd', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+            h("div", { key: 'c6fd569640410dd3a106f27f49eb6553c9ea0167', class: "display-flex top-border padding-1-2" }, h("calcite-button", { key: '3dbe007feb1104d53c47298ae1308c776e3ec5cf', appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { key: '094e52e8d2945125096856a8c5249babdbbd1eec', placement: "bottom", "reference-element": "solutions-edit" }, h("span", { key: 'da9edbf6bdb39ce1a287894287d69f2767bb18de' }, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { key: '5badbe8009a3a64e3b471ce4e63f4a7d2ae68acc', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { key: '17b287e0f0405ead48a9460423e5371e102de38a' }, h("calcite-button", { key: '4277d8e56528475c5cea369811c9c3c8a0cdd5c7', appearance: 'transparent', disabled: nextBackDisabled, iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { key: 'c8ee8c81d9de098290f35075b0c6ac3ee2f46afc', placement: "top", "reference-element": "solutions-back" }, h("span", { key: '3321af9ca1a78efe28249872be05433d9d79f51b' }, this._translations.back))), h("calcite-action", { key: '5ce96bff1e1e1bd77f364d8ceb297e0db7453a29', class: 'pagination-action', onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { key: 'd558026468f5aeb0797efcfa1843f515fed2b451', class: "pagination-count" }, this._count)), h("div", { key: '52fd57812fda98ad244a1f60aa4ec2f31efce78d' }, h("calcite-button", { key: '3582c2ea725fe9eb36f1846fbb06acaedcb3ebe1', appearance: "transparent", disabled: nextBackDisabled, iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { key: '1212e990b6ae4e7979f2a1571b461cf063e55b9d', placement: "top", "reference-element": "solutions-next" }, h("span", { key: '2284b042fdfeebc86441119c404c5905fb84f367' }, this._translations.next))))), h("edit-card", { key: 'ae9f73223bdffa5c3ec85e3ebdf4b314cd91d1c7', class: editClass, graphicIndex: (_j = this._features) === null || _j === void 0 ? void 0 : _j.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { key: '1927a41a8c9fbb6373490d554cf8128a93fe8e71', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { key: '33ba87f5b72019c2795fe12485aa51429115b74d', slot: "title" }, this._translations.editDisabled), h("div", { key: 'd45970a653b416bbdd5e5b97040b23e54eaf98a5', slot: "message" }, this._translations.enableEditing)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -259,13 +258,11 @@ export class InfoCard {
                         this._showListView = isOpen;
                     }
                 });
-                if (this.zoomAndScrollToSelected) {
-                    this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (i) => {
-                        if (i > -1) {
-                            this.selectionChanged.emit({ selectedFeature: [this._features.selectedFeature], selectedFeatureIndex: this._features.selectedFeatureIndex });
-                        }
-                    });
-                }
+                this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (i) => {
+                    if (i > -1) {
+                        this.selectionChanged.emit({ selectedFeature: [this._features.selectedFeature], selectedFeatureIndex: this._features.selectedFeatureIndex });
+                    }
+                });
             }
             else {
                 this._features.view = this.mapView;
@@ -445,23 +442,6 @@ export class InfoCard {
                     "text": "esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
                 }
             },
-            "zoomAndScrollToSelected": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "boolean: When true the selected feature will zoomed to in the map and the row will be scrolled to within the table"
-                },
-                "attribute": "zoom-and-scroll-to-selected",
-                "reflect": false
-            },
             "allowEditing": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -180,7 +180,7 @@ export class LayerList {
     getLayerListItem(layerId) {
         const layerName = this._layerItemsHash[layerId].name;
         const featureCount = this._layerItemsHash[layerId].formattedFeatureCount;
-        return (h("calcite-list-item", { onCalciteListItemSelect: () => { this.onLayerItemSelected(layerId); } }, h("div", { class: "layer-name", slot: "content-start" }, layerName), this.showFeatureCount && featureCount !== undefined && featureCount !== "" && h("div", { class: !this.showNextIcon ? "feature-count" : "", slot: "content-end" }, "(" + featureCount + ")"), this.showNextIcon && h("calcite-icon", { icon: "chevron-right", scale: "s", slot: "content-end" })));
+        return (h("calcite-list-item", { onCalciteListItemSelect: () => { this.onLayerItemSelected(layerId); } }, h("div", { class: "layer-name", slot: "content-start" }, layerName), this.showFeatureCount && featureCount !== undefined && featureCount !== "" && h("div", { class: !this.showNextIcon ? "feature-count" : "", slot: "content-end" }, "(" + featureCount + ")"), this.showNextIcon && h("calcite-icon", { flipRtl: true, icon: "chevron-right", scale: "s", slot: "content-end" })));
     }
     /**On click of layer list item emit the event along with the selected layerId and layerName
      * @param layerId Layer id

package/dist/collection/components/layer-table/layer-table.js

@@ -224,6 +224,12 @@ export class LayerTable {
     async selectionChanged(evt) {
         const g = evt.detail.selectedFeature[0];
         const oid = g.getObjectId();
+        //Highlight the current selected feature in the table using rowHighlightIds
+        const table = this._table;
+        if (table.rowHighlightIds.length) {
+            table.rowHighlightIds.removeAll();
+        }
+        table.rowHighlightIds.add(oid);
         if (this.zoomAndScrollToSelected) {
             const i = this._table.viewModel.getObjectIdIndex(oid);
             this._table.scrollToIndex(i);
@@ -308,7 +314,7 @@ export class LayerTable {
         const selected = this.selectedIds.length.toString();
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         this._validateActiveActions();
-        return (h(Host, { key: 'a8110680363000bcec4eb6f0b4a94ee2f677dcca' }, h("calcite-shell", { key: '3c4471daca709db284ede134712933ada2213bdd' }, this._getTableControlRow("header"), h("div", { key: 'fce44e957e4490d6fd9cbcff02beec8cf1a780f4', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: 'e75572b0f313f99489268f6d63b27b78c8722331', class: "height-full width-full" }, h("calcite-loader", { key: '2a34bd84408d1aff552f2818976e03c487443215', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '0823308992c61fa803cf5a526d903b629327c251', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (h(Host, { key: '92b88fc87d2c0a0eaaef9587d2324a63665b1cc2' }, h("calcite-shell", { key: 'fcc7190ee18fe6f20ab08a5331a8bcd2c9c83c74' }, this._getTableControlRow("header"), h("div", { key: 'be1a282eb23580b8f713f27fe198bab1c18ba689', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: 'd5ef6c04334f48c26f01b61f587370c0ee58682f', class: "height-full width-full" }, h("calcite-loader", { key: 'b31c1977446ed6ca47e96a7a47673e03f938265e', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '07ce4a7741dc0197816f04e57c5d32cbc5666f0e', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
             .replace("{{total}}", total)
             .replace("{{selected}}", selected))) : undefined)), this._filterModal()));
     }

package/dist/collection/demos/crowdsource-manager.html

@@ -45,11 +45,17 @@
     // });
 
       function infoIconButtonClick(evt) {
-      }
+          console.log('Introduction window button clicked')
+        }
+
+        function coverPageIconButtonClick() {
+          console.log('cover page button clicked')
+        }
 
       function addValues() {
       const demo = document.getElementById("demo");
-      demo.addEventListener('infoIconButtonClick', infoIconButtonClick);
+      demo.addEventListener('showIntroductionWindow', infoIconButtonClick);
+      demo.addEventListener('showCoverPage', coverPageIconButtonClick);
       let headerSet = false;
       let custom = [];
       var vars = window.location.search.substring(1).split('&');
@@ -204,6 +210,8 @@
         }]
       ];
       demo.hideMapOnLoad = false;
+      //demo.coverPageEnabled = true;
+      demo.introductionWindowEnabled = true;
     }
   </script>
 </head>

package/dist/collection/utils/popupUtils.js

@@ -18,6 +18,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
+import { _prepareAttributeValue } from "./downloadUtils";
 import { loadModules } from "./loadModules";
 export class PopupUtils {
     /**
@@ -39,6 +40,7 @@ export class PopupUtils {
         }
         const layer = graphic.layer;
         const popupTitle = this._removeTags((_a = layer === null || layer === void 0 ? void 0 : layer.popupTemplate) === null || _a === void 0 ? void 0 : _a.title);
+        //resolve arcade expression from the popup title
         if (popupTitle.includes("{expression/expr") && ((_b = layer === null || layer === void 0 ? void 0 : layer.popupTemplate) === null || _b === void 0 ? void 0 : _b.expressionInfos) != null) {
             for (let i = 0; i < ((_c = layer.popupTemplate) === null || _c === void 0 ? void 0 : _c.expressionInfos.length); i++) {
                 const info = layer.popupTemplate.expressionInfos[i];
@@ -58,6 +60,17 @@ export class PopupUtils {
                 }
             }
         }
+        //Format field values
+        if (layer.popupTemplate.fieldInfos) {
+            layer.fields.forEach((field) => {
+                const attributeValue = graphic.attributes[field.name];
+                //get the field info from popupTemplate
+                const fieldInfo = layer.popupTemplate.fieldInfos.find((fInfo) => fInfo.fieldName.toLowerCase() === field.name.toLowerCase());
+                //format the attribute value
+                const formattedAttributeValue = _prepareAttributeValue(attributeValue, field.type, field.domain, fieldInfo === null || fieldInfo === void 0 ? void 0 : fieldInfo.format, this.intl);
+                attributes[`{${field.name.toUpperCase()}}`] = formattedAttributeValue;
+            });
+        }
         return popupTitle === null || popupTitle === void 0 ? void 0 : popupTitle.replace(/{.*?}/g, (placeholder) => {
             return attributes[placeholder.toUpperCase()] != null ? attributes[placeholder.toUpperCase()] : "";
         });
@@ -83,9 +96,11 @@ export class PopupUtils {
      * @protected
      */
     async _initModules() {
-        const [arcade] = await loadModules([
-            "esri/arcade"
+        const [arcade, intl] = await loadModules([
+            "esri/arcade",
+            "esri/intl"
         ]);
         this.arcade = arcade;
+        this.intl = intl;
     }
 }

package/dist/collection/utils/popupUtils.ts

@@ -14,6 +14,7 @@
 * limitations under the License.
 */
 
+import { _prepareAttributeValue } from "./downloadUtils";
 import { loadModules } from "./loadModules";
 
 export class PopupUtils {
@@ -23,6 +24,11 @@ export class PopupUtils {
 	 */
 	arcade: typeof import("esri/arcade");
 
+	/**
+	 * esri/intl: https://developers.arcgis.com/javascript/latest/api-reference/esri-intl.html
+	 */
+	intl: typeof import("esri/intl");
+
 	/**
 	 * Get the popup title that honors arcade expressions
 	 * @param graphic selected graphic
@@ -47,6 +53,7 @@ export class PopupUtils {
 		}
 		const layer = graphic.layer as __esri.FeatureLayer;
 		const popupTitle = this._removeTags(layer?.popupTemplate?.title as string);
+		//resolve arcade expression from the popup title
 		if (popupTitle.includes("{expression/expr") && layer?.popupTemplate?.expressionInfos != null) {
 			for (let i = 0; i < layer.popupTemplate?.expressionInfos.length; i++) {
 				const info = layer.popupTemplate.expressionInfos[i];
@@ -65,7 +72,18 @@ export class PopupUtils {
 				}
 			}
 		}
-
+		//Format field values
+		if (layer.popupTemplate.fieldInfos) {
+			layer.fields.forEach((field) => {
+				const attributeValue = graphic.attributes[field.name];
+				//get the field info from popupTemplate
+				const fieldInfo = layer.popupTemplate.fieldInfos.find((fInfo) => fInfo.fieldName.toLowerCase() === field.name.toLowerCase());
+				//format the attribute value
+				const formattedAttributeValue = _prepareAttributeValue(attributeValue, field.type, field.domain, fieldInfo?.format, this.intl);
+				attributes[`{${field.name.toUpperCase()}}`] = formattedAttributeValue;
+			})
+		}
+		
 		return popupTitle?.replace(/{.*?}/g, (placeholder: string) => {
 			return attributes[placeholder.toUpperCase()] != null ? (attributes[placeholder.toUpperCase()] as string) : "";
 		});
@@ -93,10 +111,12 @@ export class PopupUtils {
 	 * @protected
 	 */
 	protected async _initModules(): Promise<void> {
-		const [arcade] = await loadModules([
-			"esri/arcade"
+		const [arcade, intl] = await loadModules([
+			"esri/arcade",
+			"esri/intl"
 		]);
 		this.arcade = arcade;
+		this.intl = intl;
 	}
 
 }

package/dist/components/card-manager2.js

@@ -94,7 +94,7 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
         var _a, _b;
         const featuresClass = ((_a = this._graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "" : "display-none";
         const messageClass = ((_b = this._graphics) === null || _b === void 0 ? void 0 : _b.length) > 0 ? "display-none" : "";
-        return (h(Host, { key: 'c4b71cefeb5eec1e1312104c519dfb9ef1398d71' }, h("div", { key: '6c1539db40060f9295c8aa72af29eac5f9c67d8d', class: "overflow-auto height-full" }, h("calcite-shell", { key: '2a4f7b47e01e3f27528dbce5fe236187a0f57dab', class: "position-relative " + featuresClass }, h("div", { key: '4b226239c5b80210aa3d42d422bbc50a66bdcf59' }, h("info-card", { key: '23ec16e93def6ebf81ed86109a55aa3e667fb958', graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))), h("calcite-shell", { key: '8b385e91e35cfa4dc14aa67f300badf627119c39', class: "position-relative " + messageClass }, h("div", { key: 'a4cca3a463dbe115638c3b15d4613f7d719f153f', class: "padding-1" }, h("calcite-notice", { key: '91047393ac4f19864179f97631ffcdf48aaa47c1', icon: "table", open: true }, h("div", { key: 'c81f06e628d2811c3cedbae6a3e38fb972d0a759', slot: "message" }, this._translations.selectFeaturesToStart)))))));
+        return (h(Host, { key: 'c4b71cefeb5eec1e1312104c519dfb9ef1398d71' }, h("div", { key: '6c1539db40060f9295c8aa72af29eac5f9c67d8d', class: "overflow-auto height-full" }, h("calcite-shell", { key: '2a4f7b47e01e3f27528dbce5fe236187a0f57dab', class: "position-relative " + featuresClass }, h("div", { key: '4b226239c5b80210aa3d42d422bbc50a66bdcf59' }, h("info-card", { key: '55561c22c8685c3ba3daa25c51053fa47d553ba9', graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView }))), h("calcite-shell", { key: '8f9156bf9c08920e7731f50daeecb031e9135281', class: "position-relative " + messageClass }, h("div", { key: '0529f9a60349337716ba53f10551b08a34c48209', class: "padding-1" }, h("calcite-notice", { key: '812047f7628598fa6b20e3df00355efee584bb71', icon: "table", open: true }, h("div", { key: 'd7c1b7ab03de1fb30e8e84a6d331d43e69a9946e', slot: "message" }, this._translations.selectFeaturesToStart)))))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/components/consent-manager.js

@@ -5,7 +5,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getLocaleComponentStrings } from './locale.js';
-import { c as commonjsRequire, a as commonjsGlobal } from './esri-loader.js';
+import { a as commonjsRequire, c as commonjsGlobal } from './esri-loader.js';
 import { d as defineCustomElement$a } from './action.js';
 import { d as defineCustomElement$9 } from './action-menu.js';
 import { d as defineCustomElement$8 } from './button.js';

package/dist/components/crowdsource-manager.js

@@ -72,7 +72,8 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     constructor() {
         super();
         this.__registerHost();
-        this.infoIconButtonClick = createEvent(this, "infoIconButtonClick", 7);
+        this.showIntroductionWindow = createEvent(this, "showIntroductionWindow", 7);
+        this.showCoverPage = createEvent(this, "showCoverPage", 7);
         //--------------------------------------------------------------------------
         //
         //  Properties (protected)
@@ -102,7 +103,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         this.defaultLevel = "";
         this.defaultOid = "";
         this.defaultWebmap = "";
-        this.introductionPageEnabled = false;
+        this.introductionWindowEnabled = false;
         this.enableAutoRefresh = false;
         this.enableBasemap = true;
         this.enableColumnReorder = true;
@@ -251,7 +252,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     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 (h(Host, { key: 'aa063ae3fc59a7f3969aaa5b569fbd0ef09a1766' }, h("calcite-shell", { key: 'd5d5cdb201c24f2123089c5cd5f70f973aa24e78', class: "position-relative" }, h("calcite-panel", { key: 'c95bb56946b85574825160acf1411fdf7308cc8c', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
+        return (h(Host, { key: 'adf6957871aa364f3c0d65f949eb94587f065780' }, h("calcite-shell", { key: 'cbe60dd48a1ffb16ca5bf4d7bf7ee96272fed7a5', class: "position-relative" }, h("calcite-panel", { key: '19e98d7bd25c939f3d8860d68c61a5168730eb00', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
     }
     /**
      * Called after each render
@@ -372,13 +373,20 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         const contentClass = layoutMode === ELayoutMode.HORIZONTAL ? "" : "display-flex";
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
         return (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideTable), this._getTable(layoutMode, panelOpen, hideTable)), this.coverPageEnabled &&
+            h("div", { class: "floating-container", onClick: this.coverPageButtonClick.bind(this) }, h("calcite-button", { appearance: "solid", class: `floating-button ${themeClass}`, "icon-start": "content-minimal", kind: "neutral", label: "", round: true, scale: "l", "split-child": "primary", width: "auto" })), this.introductionWindowEnabled &&
             h("div", { class: "floating-container", onClick: this.infoButtonClick.bind(this) }, h("calcite-button", { appearance: "solid", class: `floating-button ${themeClass}`, "icon-start": "information-letter", kind: "neutral", label: "", round: true, scale: "l", "split-child": "primary", width: "auto" }))));
     }
     /**
      * Emit the event when info button clicked
      */
     infoButtonClick() {
-        this.infoIconButtonClick.emit();
+        this.showIntroductionWindow.emit();
+    }
+    /**
+   * Emit the event when cover page button clicked
+   */
+    coverPageButtonClick() {
+        this.showCoverPage.emit();
     }
     /**
      * Get the map and card nodes based for the current layout options
@@ -588,7 +596,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         "defaultLevel": [1, "default-level"],
         "defaultOid": [1, "default-oid"],
         "defaultWebmap": [1, "default-webmap"],
-        "introductionPageEnabled": [4, "introduction-page-enabled"],
+        "introductionWindowEnabled": [4, "introduction-window-enabled"],
         "enableAutoRefresh": [4, "enable-auto-refresh"],
         "enableBasemap": [4, "enable-basemap"],
         "enableColumnReorder": [4, "enable-column-reorder"],

package/dist/components/crowdsource-reporter.js

@@ -613,7 +613,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @returns Node
      */
     getCommentDetailsFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, graphics: this._selectedRelatedFeature, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, paginationEnabled: false, zoomAndScrollToSelected: false }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, graphics: this._selectedRelatedFeature, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, paginationEnabled: false }))));
     }
     /**
      * Returns the calcite-flow item for add comment

package/dist/components/downloadUtils.js

@@ -3155,4 +3155,4 @@ async function _prepareLabelsUsingExecutor(featureSet, labelFormat) {
 }
 //#endregion
 
-export { _typeof as _, downloadPDF as a, consolidateLabels as c, downloadCSV as d, removeDuplicateLabels as r };
+export { _prepareAttributeValue as _, downloadPDF as a, _typeof as b, consolidateLabels as c, downloadCSV as d, removeDuplicateLabels as r };

package/dist/components/esri-loader.js

@@ -308,4 +308,4 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 }(esriLoader, esriLoader.exports));
 
-export { commonjsGlobal as a, commonjsRequire as c, esriLoader as e, getDefaultExportFromCjs as g };
+export { commonjsRequire as a, commonjsGlobal as c, esriLoader as e, getDefaultExportFromCjs as g };

package/dist/components/feature-details2.js

@@ -33,7 +33,7 @@ import { d as defineCustomElement$3 } from './edit-card2.js';
 import { d as defineCustomElement$2 } from './feature-list2.js';
 import { d as defineCustomElement$1 } from './info-card2.js';
 
-const featureDetailsCss = ":host{display:block}.buttons-container{align-items:center;display:flex;padding:10px 0 10px 15px;color:var(--calcite-color-text-1) !important;background-color:var(--calcite-color-foreground-1) !important;border-block-start:1px solid var(--calcite-color-border-3);border-block-end:1px solid var(--calcite-color-border-3)}.comment-btn{display:flex;gap:5px;width:37px;font-size:var(--calcite-font-size--2);align-items:center}";
+const featureDetailsCss = ":host{display:block}.buttons-container{align-items:center;display:flex;padding:10px;color:var(--calcite-color-text-1) !important;background-color:var(--calcite-color-foreground-1) !important;border-block-start:1px solid var(--calcite-color-border-3);border-block-end:1px solid var(--calcite-color-border-3)}.comment-btn{display:flex;gap:5px;font-size:var(--calcite-font-size--2);align-items:center;padding:0 0.5rem}";
 const FeatureDetailsStyle0 = featureDetailsCss;
 
 const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails extends HTMLElement {
@@ -128,12 +128,12 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
         var _a, _b, _c, _d, _e;
         //When related features found show comments list of only those features else comments list will be empty
         const commentsListWhereClause = ((_a = this._relatedFeaturesOIDs) === null || _a === void 0 ? void 0 : _a.length) > 0 ? `objectId in(${this._relatedFeaturesOIDs})` : '1=0';
-        return (h("calcite-panel", { key: 'b8d1cc9d4d9040665be3c892f5738a179ab64eaf', "full-height": true }, h("info-card", { key: '0a31a068a4e80e34ba2435a7d8d8faaea271dac8', allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el, zoomAndScrollToSelected: true }), (this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) &&
-            h("div", { key: '8e27d13341a9b4ad37f87778e046a4e8e0b2778e', class: "buttons-container" }, this._commentsAvailable &&
-                h("div", { key: '3dd02fdbc107e7ce04e8aabb96a6748b68eeec6b', class: "comment-btn" }, h("span", { key: '5601fdb24ff385e0b6d2b9e5b86bde06b3c2d1b8' }, this._relatedFeaturesOIDs.length), h("calcite-icon", { key: '97a517d117a4d5a8c6798da9c9c82e46c39c25f8', icon: "speech-bubble", scale: 's' })), this._likeFieldAvailable &&
-                h("calcite-button", { key: '0d1ff14be9396ab3ff634e92208792f5fd3b8d36', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", onClick: this.onLikeButtonClick.bind(this), scale: 's' }, (_c = (_b = this._likeCount) !== null && _b !== void 0 ? _b : this._selectedGraphic.attributes[this._likeField]) !== null && _c !== void 0 ? _c : 0), this._dislikeFieldAvailable &&
-                h("calcite-button", { key: '34e362e083dbc13dffae7ad5544aa33a0421a51a', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", onClick: this.onDislikeButtonClick.bind(this), scale: 's' }, (_e = (_d = this._disLikeCount) !== null && _d !== void 0 ? _d : this._selectedGraphic.attributes[this._dislikeField]) !== null && _e !== void 0 ? _e : 0)), this.relatedTableId && this._commentsAvailable &&
-            h("feature-list", { key: '4abc53ab7679b07f0dd7413b97f447da736e5002', class: "height-full", mapView: this.mapView, pageSize: 5, ref: el => this._commentsList = el, selectedLayerId: this.relatedTableId, showInitialLoading: false, textSize: "small", whereClause: commentsListWhereClause })));
+        return (h("calcite-panel", { key: 'b8d1cc9d4d9040665be3c892f5738a179ab64eaf', "full-height": true }, h("info-card", { key: 'a4c7771bdf84f85b88bd6bf2544e2a1a985fdbbe', allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el }), (this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) &&
+            h("div", { key: '2d405f3f722eb4fe0de4212ec4ff3e4b8588db40', class: "buttons-container" }, this._commentsAvailable &&
+                h("div", { key: '9454b0cb93e665de20fafb4ca75e1a6d3198a03a', class: "comment-btn" }, h("span", { key: '8c682aa73f9c28b9db5266cfb5ad970f15535241' }, this._relatedFeaturesOIDs.length), h("calcite-icon", { key: 'd920e63f8d1d447afa732bd336f6a09e18ccbd2a', icon: "speech-bubble", scale: 's' })), this._likeFieldAvailable &&
+                h("calcite-button", { key: '6b68adcc0b24b1e8d71148182339fa1b6d7922a1', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", onClick: this.onLikeButtonClick.bind(this), scale: 's' }, (_c = (_b = this._likeCount) !== null && _b !== void 0 ? _b : this._selectedGraphic.attributes[this._likeField]) !== null && _c !== void 0 ? _c : 0), this._dislikeFieldAvailable &&
+                h("calcite-button", { key: '7c365fdaf5a3de12745e4a7b7a79dc8ec5e37cc0', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", onClick: this.onDislikeButtonClick.bind(this), scale: 's' }, (_e = (_d = this._disLikeCount) !== null && _d !== void 0 ? _d : this._selectedGraphic.attributes[this._dislikeField]) !== null && _e !== void 0 ? _e : 0)), this.relatedTableId && this._commentsAvailable &&
+            h("feature-list", { key: '7b2b92b001dcdeb51d7ae1c1b39dc263f5ed1934', class: "height-full", mapView: this.mapView, pageSize: 5, ref: el => this._commentsList = el, selectedLayerId: this.relatedTableId, showInitialLoading: false, textSize: "small", whereClause: commentsListWhereClause })));
     }
     /**
      * Load esri javascript api modules

package/dist/components/feature-list2.js

@@ -25,7 +25,7 @@ import { d as defineCustomElement$3 } from './progress.js';
 import { d as defineCustomElement$2 } from './scrim.js';
 import { d as defineCustomElement$1 } from './stack.js';
 
-const featureListCss = ":host{display:block}.width-full{width:100%}.pagination{display:flex;justify-content:center}.error-msg{padding:10px;width:calc(100% - 20px)}.feature-list-popup-title{font-weight:500;padding:10px 12px}.feature-list-popup-title-small{font-size:x-small;padding:10px 12px}";
+const featureListCss = ":host{display:block}.width-full{width:100%}.pagination{display:flex;justify-content:center}.error-msg{padding:10px;width:calc(100% - 20px)}.feature-list-popup-title{font-weight:500;padding:10px 12px}.feature-list-popup-title-small{font-size:small;padding:10px 12px}";
 const FeatureListStyle0 = featureListCss;
 
 const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends HTMLElement {
@@ -288,7 +288,7 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
         //use object id if popupTitle is null or undefined
         popupTitle = popupTitle !== null && popupTitle !== void 0 ? popupTitle : oId;
         const popupTitleClass = this.textSize === 'small' ? 'feature-list-popup-title-small' : 'feature-list-popup-title';
-        return (h("calcite-list-item", { onCalciteListItemSelect: (e) => { void this.featureClicked(e, selectedFeature); }, onMouseLeave: () => { void this.clearHighlights(); }, onMouseOver: () => { void this.onFeatureHover(selectedFeature); }, value: oId }, h("div", { class: popupTitleClass, slot: "content-start" }, popupTitle), h("calcite-icon", { icon: "chevron-right", scale: "s", slot: "content-end" })));
+        return (h("calcite-list-item", { onCalciteListItemSelect: (e) => { void this.featureClicked(e, selectedFeature); }, onMouseLeave: () => { void this.clearHighlights(); }, onMouseOver: () => { void this.onFeatureHover(selectedFeature); }, value: oId }, h("div", { class: popupTitleClass, slot: "content-start" }, popupTitle), h("calcite-icon", { flipRtl: true, icon: "chevron-right", scale: "s", slot: "content-end" })));
     }
     /**
      * Fetches the component's translations