@esri/solutions-components 0.8.17 → 0.8.19

package/dist/collection/components/create-related-feature/create-related-feature.js

@@ -3,6 +3,21 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 import { Host, h } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
 export class CreateRelatedFeature {
@@ -80,7 +95,7 @@ export class CreateRelatedFeature {
         this.reactiveUtils = reactiveUtils;
     }
     render() {
-        return (h(Host, { key: '383e8fac89d037f77241d856013202d1e04b28ba' }));
+        return (h(Host, { key: '9807b7dcad1f8305756e6098f1e64ef8caffcbac' }));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -187,6 +202,7 @@ export class CreateRelatedFeature {
      * @param parentRelationship Parent relationship
      * @param childRelationship Child relationship
      * @returns Attributes for related feature
+     * @protected
      */
     makeAttributesForRelatedFeature(parentFeature, parentRelationship, childRelationship) {
         const parentKeyField = parentRelationship.keyField;

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

@@ -79,8 +79,6 @@ export class CrowdsourceManager {
         this.theme = "light";
         this.zoomAndScrollToSelected = false;
         this.zoomToScale = undefined;
-        this.sortField = undefined;
-        this.sortOrder = undefined;
         this._expandPopup = this.hideMapOnLoad;
         this._hideFooter = false;
         this._hideTable = false;
@@ -187,7 +185,7 @@ export class CrowdsourceManager {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '686aeccc0f97c1eb8bc1b673d8816663e80fdf71' }, h("calcite-shell", { key: 'f3451483cdbafa8b68a00b71e9927bbff55781b9', class: "position-relative" }, h("calcite-panel", { key: '8256440e1cefa8f25bf1af1f9a1e87650c34462d', class: `width-full height-full border-width-0` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
+        return (h(Host, { key: '5cd7d2ea4be1216270e15afc3d090bfc672f5335' }, h("calcite-shell", { key: 'cb5b4104b698a0bc146c2f5f47bd03b7944025c1', class: "position-relative" }, h("calcite-panel", { key: 'cbf1848d59c485dd143d6051506fcd92215fa2ec', class: `width-full height-full border-width-0` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
     }
     /**
      * Called after each render
@@ -307,7 +305,8 @@ export class CrowdsourceManager {
     _getBody(layoutMode, panelOpen, hideTable) {
         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)), 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" }))));
+        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.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
@@ -360,10 +359,10 @@ export class CrowdsourceManager {
         const headerTheme = this.popupHeaderColor ? "" : !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
         const containerClass = this._isMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isMobile ? "display-none height-0" : "";
         return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass}`, style: {
-                '--calcite-color-foreground-1': this.popupHeaderColor, /* background color to apply to the popup header */
-                '--calcite-color-foreground-2': this.popupHeaderHoverColor, /* color that will be displayed on hover when expanding the popup header */
-                '--calcite-color-text-3': this.popupHeaderHoverTextColor, /* font color that will be displayed on hover when expanding the popup header */
-                '--calcite-color-text-2': this.popupHeaderTextColor, /* font color to apply to the popup header */
+                '--calcite-color-foreground-1': this.popupHeaderColor, /* background color that will be displayed on the popup header */
+                '--calcite-color-foreground-2': this.popupHeaderHoverColor, /* background color that will be displayed on button when hovered */
+                '--calcite-color-text-3': this.popupHeaderTextColor, /* font color that will be displayed on button */
+                '--calcite-color-text-2': this.popupHeaderTextColor, /* font color that will be displayed on popup header text*/
             } }, h("calcite-panel", null, !this._isMobile ? (h("div", { class: `display-flex align-items-center ${headerClass}`, slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information))) : undefined, h("calcite-action", { class: headerClass, disabled: this._tableOnly, icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end", text: "" }), !this._tableOnly ? h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)) : undefined, this._getCardNode())));
     }
     /**
@@ -408,7 +407,7 @@ export class CrowdsourceManager {
             ((_a = this.defaultGlobalId) === null || _a === void 0 ? void 0 : _a.indexOf(",")) > -1 ? this.defaultGlobalId.split(",") : [this.defaultGlobalId];
         const defaultOid = !this.defaultOid ? undefined :
             ((_b = this.defaultOid) === null || _b === void 0 ? void 0 : _b.indexOf(",")) > -1 ? this.defaultOid.split(",").map(o => parseInt(o, 10)) : [parseInt(this.defaultOid, 10)];
-        return (h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip)))) : undefined, h("div", { class: `width-full height-full position-relative` }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, sortField: this.sortField, sortOrder: this.sortOrder, zoomAndScrollToSelected: this.zoomAndScrollToSelected, zoomToScale: this.zoomToScale }))));
+        return (h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip)))) : undefined, h("div", { class: `width-full height-full position-relative` }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected, zoomToScale: this.zoomToScale }))));
     }
     /**
      * Update the component layout when its size changes
@@ -1155,40 +1154,6 @@ export class CrowdsourceManager {
                 },
                 "attribute": "zoom-to-scale",
                 "reflect": false
-            },
-            "sortField": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "string: Field using which table will be sorted"
-                },
-                "attribute": "sort-field",
-                "reflect": false
-            },
-            "sortOrder": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'asc' | 'desc'",
-                    "resolved": "\"asc\" | \"desc\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "string(asc/desc): Sorting order - Ascending or Descending"
-                },
-                "attribute": "sort-order",
-                "reflect": false
             }
         };
     }

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

@@ -62,13 +62,14 @@
 }
 
 .feature-pagination {
-  align-items: center;
-  margin: 5% 124%;
+  background-color: var(--calcite-color-foreground-1) !important;
+  border-block-end: 1px solid var(--calcite-color-border-3);
   display: flex;
+  justify-content: center;
+  padding: 5px 0;
 }
 
 .pagination-count {
-  width: 32px;
   color: var(--calcite-color-brand);
   border-bottom: 1px solid var(--calcite-color-brand);
   font-weight: bold;

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

@@ -232,6 +232,7 @@ export class CrowdsourceReporter {
      * On sort option click update the sort field and sort order
      * @param sortField sort field
      * @param sortOrder sort order
+     * @param sortOption selected sort option (Newest/Oldest/Highest Voted/Lowest Voted)
      */
     async sortOptionClick(sortField, sortOrder, sortOption) {
         this._updatedSorting = {
@@ -558,7 +559,7 @@ export class CrowdsourceReporter {
      */
     getFeatureDetailsFlowItem() {
         const showCommentBtn = this.reportingOptions[this._currentFeature.layer.id].comment && this._currentFeature.layer.relationships.length > 0;
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", slot: "header-actions-end", socialMedia: true, view: this.mapView }), h("calcite-panel", null, this._selectedFeature.length > 1 && this.getFeaturesPagination(), h("feature-details", { class: 'full-height', graphics: this._selectedFeature, mapView: this.mapView, onFeatureSelect: this.onCommentSelectFromList.bind(this), onLoadingStatus: (evt) => void this.updatingFeatureDetails(evt.detail), ref: el => this._featureDetails = el, reportingOptions: this.reportingOptions }), showCommentBtn &&
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", slot: "header-actions-end", socialMedia: true, view: this.mapView }), this._selectedFeature.length > 1 && this.getFeaturesPagination(), h("calcite-panel", null, h("feature-details", { class: 'full-height', graphics: this._selectedFeature, mapView: this.mapView, onFeatureSelect: this.onCommentSelectFromList.bind(this), onLoadingStatus: (evt) => void this.updatingFeatureDetails(evt.detail), ref: el => this._featureDetails = el, reportingOptions: this.reportingOptions }), showCommentBtn &&
             h("calcite-button", { appearance: "solid", onClick: () => this._flowItems = [...this._flowItems, "add-comment"], slot: "footer", width: "full" }, this._translations.comment))));
     }
     /**
@@ -567,7 +568,7 @@ export class CrowdsourceReporter {
      * @returns Node
      */
     getFeaturesPagination() {
-        return (h("div", { class: "feature-pagination", slot: "header-actions-start" }, h("div", null, h("calcite-button", { appearance: 'transparent', disabled: false, iconStart: "chevron-left", id: "solutions-back", onClick: () => void this._featureDetails.back(), scale: "s", width: "full" }), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("calcite-button", { appearance: 'transparent', class: 'pagination-action', onClick: () => void this._featureDetails.toggleListView(), scale: "s" }, h("span", { class: "pagination-count" }, this._getCount())), h("div", null, h("calcite-button", { appearance: "transparent", disabled: false, iconStart: "chevron-right", id: "solutions-next", onClick: () => void this._featureDetails.next(), scale: "s", width: "full" }), h("calcite-tooltip", { placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next)))));
+        return (h("div", { class: "feature-pagination" }, h("div", null, h("calcite-button", { appearance: 'transparent', disabled: false, iconStart: "chevron-left", id: "solutions-back", onClick: () => void this._featureDetails.back(), scale: "s", width: "full" }), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("calcite-button", { appearance: 'transparent', onClick: () => void this._featureDetails.toggleListView(), scale: "s" }, h("span", { class: "pagination-count" }, this._getCount())), h("div", null, h("calcite-button", { appearance: "transparent", disabled: false, iconStart: "chevron-right", id: "solutions-next", onClick: () => void this._featureDetails.next(), scale: "s", width: "full" }), h("calcite-tooltip", { placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next)))));
     }
     /**
      * Returns the calcite-flow item for comment details

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

@@ -3,6 +3,21 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 import { h } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
 import { getAllTables } from "../../utils/mapViewUtils";
@@ -94,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: 'c39c0eec021627b920972f7d4bce0d45bfe0a9c2', "full-height": true }, h("info-card", { key: 'e90cb427a1f874216afcfdf0a33804bf14fb6a2c', 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: 'ecfdf111612c92eacfd97dae7bb3080b7ad50e96', class: "buttons-container" }, this._commentsAvailable &&
-                h("div", { key: '07a8213e11585041fb1c5f56254447a720033f04', class: "comment-btn" }, h("span", { key: 'f4071fbd03372a0e88857962e9c31530e2dc693a' }, this._relatedFeaturesOIDs.length), h("calcite-icon", { key: '30258e1daae5f1e00d18dd4ec052861de46b45bf', icon: "speech-bubble", scale: 's' })), this._likeFieldAvailable &&
-                h("calcite-button", { key: 'fa76245789a29e49be06482fd8cd0244f44d19ab', 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: 'ac9adc799a93f08319b2f0b797cd5d4773b1a6cb', 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: '165b2ac0af65cbbab945a0dfd4ac878cc41af56c', 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: '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 })));
     }
     /**
      * Load esri javascript api modules
@@ -479,7 +494,7 @@ export class FeatureDetails {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted on demand when feature is selected using the list"
+                    "text": "Emitted on demand when comment is selected using the feature-list"
                 },
                 "complexType": {
                     "original": "__esri.Graphic",

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

@@ -102,9 +102,9 @@ export class FeatureList {
      * Renders the component.
      */
     render() {
-        return (h("calcite-panel", { key: '37f83a9c019e68213493f5e890324470389cd36f', "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { key: '671559375bb5fcdc8a01f9f10a82ab71edc0d836', label: "", scale: "m" }), this._featureItems.length === 0 && !this._isLoading &&
-            h("calcite-notice", { key: 'f6101de52464f2316bfbb83919036b4cf035f8b9', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: 'e49017399909f1d0b93ec4e24341b9042267977f', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: '2e90c0aec739fcce422ff730a39adc85b71a84cb', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
-            h("div", { key: '4b59248846c5b433bb88171c322070a13002f23d', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: '1ca5dbccdc59379999a94198d7ac6111e1ef547b', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, "start-item": "1", "total-items": this._featuresCount }))));
+        return (h("calcite-panel", { key: '9f702c6d98cc19704e0773e36fd969817ea7262e', "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { key: 'e9acf13f3444057b097d6b145c1a6e0118f150ea', label: "", scale: "m" }), this._featureItems.length === 0 && !this._isLoading &&
+            h("calcite-notice", { key: '8c7fa89e2da7490b04456e51f8534c2515a02399', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: '799d419e9c26b7928f15cb1cf9afa9f47cab0e94', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: '82c60b16ab586ad57f8f98bb08814f688102b166', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
+            h("div", { key: 'e5b789ea46c6bedfbe83f1323ffb89271c0b76ce', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: '4d30b5364fc4742f278157c5f2c21e75d4ecb0b8', 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 }))));
     }
     //--------------------------------------------------------------------------
     //
@@ -145,7 +145,9 @@ export class FeatureList {
      * @protected
      */
     async initializeFeatureItems() {
+        var _a;
         if (this._selectedLayer) {
+            void ((_a = this._pagination) === null || _a === void 0 ? void 0 : _a.goTo("start"));
             this._isLoading = this.showInitialLoading;
             this._featureItems = await this.queryPage(0);
             const query = {

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

@@ -104,4 +104,5 @@
 .pagination-count {
   color: var(--calcite-color-brand);
   border-bottom: 1px solid var(--calcite-color-brand);
+  font-weight: bold;
 }

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

@@ -80,8 +80,6 @@ export class LayerTable {
         this.shareIncludeEmbed = undefined;
         this.shareIncludeSocial = undefined;
         this.showNewestFirst = undefined;
-        this.sortField = undefined;
-        this.sortOrder = undefined;
         this.zoomAndScrollToSelected = undefined;
         this.zoomToScale = undefined;
         this._allIds = [];
@@ -309,7 +307,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: '69a8f1d8c41eb82d6f39f6c580f78369f372567f' }, h("calcite-shell", { key: '3cb7997d918af450d04b95e1a236e09400b30af1' }, this._getTableControlRow("header"), h("div", { key: '1f0e84f1759c0333acee402a603923ca96e7d9e4', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: 'b62bedc4c924f0d0a30e2746a532270c2a4d4a4b', class: "height-full width-full" }, h("calcite-loader", { key: 'e28017e4c3aba559774965f2cbff0fcb83f9ab2d', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: 'efc520212f53c3db46574c7caf5d9f9835b83a2c', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (h(Host, { key: '1077bca0d3f59ed86999449c2c5428e4aa65b30f' }, h("calcite-shell", { key: '02b7a7512cfdc8958251ae00709b971f9bfff6df' }, this._getTableControlRow("header"), h("div", { key: '83d03238c368cd332714f4434297a9a4f9d47ec4', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: '18927c7c65687c9df28f69b1e66f542be05e8c52', class: "height-full width-full" }, h("calcite-loader", { key: '51ed528d5676b983c27b50b098dd8785a3c7b591', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '4e51683f468b29b6dcdf1a588cdfedb37a02166f', 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()));
     }
@@ -1109,16 +1107,27 @@ export class LayerTable {
         this._deleteEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsDelete;
     }
     /**
-     * Sort the table with the configured field in the configured sort order
+     * Sort the table with the configured field and the sort order
      */
     async _sortTable() {
-        var _a, _b, _c, _d, _e, _f;
-        let sortField = this.sortField ? this.sortField : this._layer.objectIdField;
+        var _a, _b, _c, _d;
+        //By default sort the table using objectIdField and in descending order
+        let sortField = this._layer.objectIdField;
+        let sortOrder = 'desc';
+        let configuredLayer;
+        //get the sortField and sortOrder from the configuration
         if (((_c = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.layerOptions) === null || _b === void 0 ? void 0 : _b.layers) === null || _c === void 0 ? void 0 : _c.length) > 0) {
-            const configuredLayer = (_d = this.mapInfo.layerOptions) === null || _d === void 0 ? void 0 : _d.layers.filter((layer) => layer.id === this._layer.id);
-            sortField = ((_f = (_e = configuredLayer[0]) === null || _e === void 0 ? void 0 : _e.fields) === null || _f === void 0 ? void 0 : _f.includes(this.sortField)) ? this.sortField : this._layer.objectIdField;
+            configuredLayer = this.mapInfo.layerOptions.layers.filter((layer) => layer.id === this._layer.id);
+            if (configuredLayer && configuredLayer.length > 0) {
+                configuredLayer = configuredLayer[0];
+                //if sort field is defined and sortField is available in the fields then use it 
+                if (configuredLayer.sortField && ((_d = configuredLayer.fields) === null || _d === void 0 ? void 0 : _d.includes(configuredLayer.sortField))) {
+                    sortField = configuredLayer.sortField;
+                }
+                //use sort order if configured
+                sortOrder = (configuredLayer === null || configuredLayer === void 0 ? void 0 : configuredLayer.sortOrder) ? configuredLayer.sortOrder : "desc";
+            }
         }
-        const sortOrder = this.sortOrder ? this.sortOrder : 'desc';
         if (this._table && this._layer) {
             await this._table.when();
             await this._layer.when(() => {
@@ -1770,40 +1779,6 @@ export class LayerTable {
                 "attribute": "show-newest-first",
                 "reflect": false
             },
-            "sortField": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "string: Field using which table will be sorted"
-                },
-                "attribute": "sort-field",
-                "reflect": false
-            },
-            "sortOrder": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'asc' | 'desc'",
-                    "resolved": "\"asc\" | \"desc\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "string(asc/desc): Sorting order - Ascending or Descending"
-                },
-                "attribute": "sort-order",
-                "reflect": false
-            },
             "zoomAndScrollToSelected": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -29,7 +29,7 @@
 
   <link rel="stylesheet" href="https://jsdev.arcgis.com/4.30/esri/themes/light/main.css" />
   <!-- <link rel="stylesheet" href="https://jsdev.arcgis.com/4.29/esri/themes/dark/main.css" /> -->
-  <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.0.0/calcite.css" />
+  <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.8.2/calcite.css" />
 
   <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
   <link rel="stylesheet" href="../solutions-components.css" type="text/css">
@@ -175,7 +175,9 @@
               ],
               fieldOrder: [
                 "Your_Stars", "Route", "Location", "URL", "Avg_Stars", "Route_Type", "Rating", "Pitches", "Length", "Area_Latitude", "Area_Longitude", "ObjectId"
-              ]
+              ],
+              sortField: "Avg_Stars",
+              sortOrder: "asc"
             }],
             mapId: "91e220910a994da4abfb0d1763d64ecb"
           }

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

@@ -78,7 +78,7 @@
     <link rel="stylesheet" href="https://jsdev.arcgis.com/4.29/esri/themes/light/main.css"/>
     <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
     <link rel="stylesheet" href="../solutions-components.css" type="text/css">
-    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.0.0/calcite.css" />
+    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.8.2/calcite.css" />
 
     <script src="https://jsdev.arcgis.com/4.29/"></script>
     <script type="module" src="../solutions-components.esm.js"></script>

package/dist/collection/utils/interfaces.ts

@@ -470,6 +470,8 @@ export interface ILayerDef {
   sublayerId?: number;
   fields?: string[];
   fieldOrder?: string[];
+  sortField?: string;
+  sortOrder?: 'asc' | 'desc';
 }
 
 export interface IMapChange {

package/dist/components/create-related-feature2.js

@@ -89,7 +89,7 @@ const CreateRelatedFeature = /*@__PURE__*/ proxyCustomElement(class CreateRelate
         this.reactiveUtils = reactiveUtils;
     }
     render() {
-        return (h(Host, { key: '383e8fac89d037f77241d856013202d1e04b28ba' }));
+        return (h(Host, { key: '9807b7dcad1f8305756e6098f1e64ef8caffcbac' }));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -196,6 +196,7 @@ const CreateRelatedFeature = /*@__PURE__*/ proxyCustomElement(class CreateRelate
      * @param parentRelationship Parent relationship
      * @param childRelationship Child relationship
      * @returns Attributes for related feature
+     * @protected
      */
     makeAttributesForRelatedFeature(parentFeature, parentRelationship, childRelationship) {
         const parentKeyField = parentRelationship.keyField;

package/dist/components/crowdsource-manager.js

@@ -128,8 +128,6 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         this.theme = "light";
         this.zoomAndScrollToSelected = false;
         this.zoomToScale = undefined;
-        this.sortField = undefined;
-        this.sortOrder = undefined;
         this._expandPopup = this.hideMapOnLoad;
         this._hideFooter = false;
         this._hideTable = false;
@@ -236,7 +234,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '686aeccc0f97c1eb8bc1b673d8816663e80fdf71' }, h("calcite-shell", { key: 'f3451483cdbafa8b68a00b71e9927bbff55781b9', class: "position-relative" }, h("calcite-panel", { key: '8256440e1cefa8f25bf1af1f9a1e87650c34462d', class: `width-full height-full border-width-0` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
+        return (h(Host, { key: '5cd7d2ea4be1216270e15afc3d090bfc672f5335' }, h("calcite-shell", { key: 'cb5b4104b698a0bc146c2f5f47bd03b7944025c1', class: "position-relative" }, h("calcite-panel", { key: 'cbf1848d59c485dd143d6051506fcd92215fa2ec', class: `width-full height-full border-width-0` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
     }
     /**
      * Called after each render
@@ -356,7 +354,8 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     _getBody(layoutMode, panelOpen, hideTable) {
         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)), 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" }))));
+        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.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
@@ -409,10 +408,10 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         const headerTheme = this.popupHeaderColor ? "" : !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
         const containerClass = this._isMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isMobile ? "display-none height-0" : "";
         return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass}`, style: {
-                '--calcite-color-foreground-1': this.popupHeaderColor, /* background color to apply to the popup header */
-                '--calcite-color-foreground-2': this.popupHeaderHoverColor, /* color that will be displayed on hover when expanding the popup header */
-                '--calcite-color-text-3': this.popupHeaderHoverTextColor, /* font color that will be displayed on hover when expanding the popup header */
-                '--calcite-color-text-2': this.popupHeaderTextColor, /* font color to apply to the popup header */
+                '--calcite-color-foreground-1': this.popupHeaderColor, /* background color that will be displayed on the popup header */
+                '--calcite-color-foreground-2': this.popupHeaderHoverColor, /* background color that will be displayed on button when hovered */
+                '--calcite-color-text-3': this.popupHeaderTextColor, /* font color that will be displayed on button */
+                '--calcite-color-text-2': this.popupHeaderTextColor, /* font color that will be displayed on popup header text*/
             } }, h("calcite-panel", null, !this._isMobile ? (h("div", { class: `display-flex align-items-center ${headerClass}`, slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information))) : undefined, h("calcite-action", { class: headerClass, disabled: this._tableOnly, icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end", text: "" }), !this._tableOnly ? h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)) : undefined, this._getCardNode())));
     }
     /**
@@ -457,7 +456,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
             ((_a = this.defaultGlobalId) === null || _a === void 0 ? void 0 : _a.indexOf(",")) > -1 ? this.defaultGlobalId.split(",") : [this.defaultGlobalId];
         const defaultOid = !this.defaultOid ? undefined :
             ((_b = this.defaultOid) === null || _b === void 0 ? void 0 : _b.indexOf(",")) > -1 ? this.defaultOid.split(",").map(o => parseInt(o, 10)) : [parseInt(this.defaultOid, 10)];
-        return (h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip)))) : undefined, h("div", { class: `width-full height-full position-relative` }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, sortField: this.sortField, sortOrder: this.sortOrder, zoomAndScrollToSelected: this.zoomAndScrollToSelected, zoomToScale: this.zoomToScale }))));
+        return (h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip)))) : undefined, h("div", { class: `width-full height-full position-relative` }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected, zoomToScale: this.zoomToScale }))));
     }
     /**
      * Update the component layout when its size changes
@@ -596,8 +595,6 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         "theme": [1],
         "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
         "zoomToScale": [2, "zoom-to-scale"],
-        "sortField": [1, "sort-field"],
-        "sortOrder": [1, "sort-order"],
         "_expandPopup": [32],
         "_hideFooter": [32],
         "_hideTable": [32],

package/dist/components/crowdsource-reporter.js

@@ -55,7 +55,7 @@ import { d as defineCustomElement$4 } from './instant-apps-filter-list2.js';
 import { d as defineCustomElement$3 } from './instant-apps-social-share2.js';
 import { d as defineCustomElement$2 } from './layer-list2.js';
 
-const crowdsourceReporterCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.width-full{width:100% !important}.width-0{width:0}.height-full{height:100% !important}.height-0{height:0}.overflow-hidden{overflow:hidden}.border{border:1px solid var(--calcite-color-border-3)}.notice-msg{padding:10px;width:calc(100% - 20px)}.progress-bar{padding:12px}.footer-top-button{padding-bottom:7px}.footer-button{height:35px}.feature-pagination{align-items:center;margin:5% 124%;display:flex}.pagination-count{width:32px;color:var(--calcite-color-brand);border-bottom:1px solid var(--calcite-color-brand);font-weight:bold}.report-submitted-msg{position:absolute;z-index:1000}";
+const crowdsourceReporterCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.width-full{width:100% !important}.width-0{width:0}.height-full{height:100% !important}.height-0{height:0}.overflow-hidden{overflow:hidden}.border{border:1px solid var(--calcite-color-border-3)}.notice-msg{padding:10px;width:calc(100% - 20px)}.progress-bar{padding:12px}.footer-top-button{padding-bottom:7px}.footer-button{height:35px}.feature-pagination{background-color:var(--calcite-color-foreground-1) !important;border-block-end:1px solid var(--calcite-color-border-3);display:flex;justify-content:center;padding:5px 0}.pagination-count{color:var(--calcite-color-brand);border-bottom:1px solid var(--calcite-color-brand);font-weight:bold}.report-submitted-msg{position:absolute;z-index:1000}";
 const CrowdsourceReporterStyle0 = crowdsourceReporterCss;
 
 const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceReporter extends HTMLElement {
@@ -270,6 +270,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * On sort option click update the sort field and sort order
      * @param sortField sort field
      * @param sortOrder sort order
+     * @param sortOption selected sort option (Newest/Oldest/Highest Voted/Lowest Voted)
      */
     async sortOptionClick(sortField, sortOrder, sortOption) {
         this._updatedSorting = {
@@ -596,7 +597,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     getFeatureDetailsFlowItem() {
         const showCommentBtn = this.reportingOptions[this._currentFeature.layer.id].comment && this._currentFeature.layer.relationships.length > 0;
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", slot: "header-actions-end", socialMedia: true, view: this.mapView }), h("calcite-panel", null, this._selectedFeature.length > 1 && this.getFeaturesPagination(), h("feature-details", { class: 'full-height', graphics: this._selectedFeature, mapView: this.mapView, onFeatureSelect: this.onCommentSelectFromList.bind(this), onLoadingStatus: (evt) => void this.updatingFeatureDetails(evt.detail), ref: el => this._featureDetails = el, reportingOptions: this.reportingOptions }), showCommentBtn &&
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", slot: "header-actions-end", socialMedia: true, view: this.mapView }), this._selectedFeature.length > 1 && this.getFeaturesPagination(), h("calcite-panel", null, h("feature-details", { class: 'full-height', graphics: this._selectedFeature, mapView: this.mapView, onFeatureSelect: this.onCommentSelectFromList.bind(this), onLoadingStatus: (evt) => void this.updatingFeatureDetails(evt.detail), ref: el => this._featureDetails = el, reportingOptions: this.reportingOptions }), showCommentBtn &&
             h("calcite-button", { appearance: "solid", onClick: () => this._flowItems = [...this._flowItems, "add-comment"], slot: "footer", width: "full" }, this._translations.comment))));
     }
     /**
@@ -605,7 +606,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @returns Node
      */
     getFeaturesPagination() {
-        return (h("div", { class: "feature-pagination", slot: "header-actions-start" }, h("div", null, h("calcite-button", { appearance: 'transparent', disabled: false, iconStart: "chevron-left", id: "solutions-back", onClick: () => void this._featureDetails.back(), scale: "s", width: "full" }), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("calcite-button", { appearance: 'transparent', class: 'pagination-action', onClick: () => void this._featureDetails.toggleListView(), scale: "s" }, h("span", { class: "pagination-count" }, this._getCount())), h("div", null, h("calcite-button", { appearance: "transparent", disabled: false, iconStart: "chevron-right", id: "solutions-next", onClick: () => void this._featureDetails.next(), scale: "s", width: "full" }), h("calcite-tooltip", { placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next)))));
+        return (h("div", { class: "feature-pagination" }, h("div", null, h("calcite-button", { appearance: 'transparent', disabled: false, iconStart: "chevron-left", id: "solutions-back", onClick: () => void this._featureDetails.back(), scale: "s", width: "full" }), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("calcite-button", { appearance: 'transparent', onClick: () => void this._featureDetails.toggleListView(), scale: "s" }, h("span", { class: "pagination-count" }, this._getCount())), h("div", null, h("calcite-button", { appearance: "transparent", disabled: false, iconStart: "chevron-right", id: "solutions-next", onClick: () => void this._featureDetails.next(), scale: "s", width: "full" }), h("calcite-tooltip", { placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next)))));
     }
     /**
      * Returns the calcite-flow item for comment details

package/dist/components/feature-details2.js

@@ -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: 'c39c0eec021627b920972f7d4bce0d45bfe0a9c2', "full-height": true }, h("info-card", { key: 'e90cb427a1f874216afcfdf0a33804bf14fb6a2c', 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: 'ecfdf111612c92eacfd97dae7bb3080b7ad50e96', class: "buttons-container" }, this._commentsAvailable &&
-                h("div", { key: '07a8213e11585041fb1c5f56254447a720033f04', class: "comment-btn" }, h("span", { key: 'f4071fbd03372a0e88857962e9c31530e2dc693a' }, this._relatedFeaturesOIDs.length), h("calcite-icon", { key: '30258e1daae5f1e00d18dd4ec052861de46b45bf', icon: "speech-bubble", scale: 's' })), this._likeFieldAvailable &&
-                h("calcite-button", { key: 'fa76245789a29e49be06482fd8cd0244f44d19ab', 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: 'ac9adc799a93f08319b2f0b797cd5d4773b1a6cb', 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: '165b2ac0af65cbbab945a0dfd4ac878cc41af56c', 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: '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 })));
     }
     /**
      * Load esri javascript api modules