@esri/solutions-components 0.8.17 → 0.8.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/dist/cjs/calcite-alert_4.cjs.entry.js +1 -1
  2. package/dist/cjs/calcite-flow_6.cjs.entry.js +8 -7
  3. package/dist/cjs/card-manager_3.cjs.entry.js +18 -9
  4. package/dist/cjs/crowdsource-manager.cjs.entry.js +8 -9
  5. package/dist/cjs/crowdsource-reporter.cjs.entry.js +4 -3
  6. package/dist/cjs/feature-list.cjs.entry.js +5 -3
  7. package/dist/cjs/loader.cjs.js +1 -1
  8. package/dist/cjs/solutions-components.cjs.js +1 -1
  9. package/dist/collection/components/create-related-feature/create-related-feature.js +17 -1
  10. package/dist/collection/components/crowdsource-manager/crowdsource-manager.js +8 -43
  11. package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.css +4 -3
  12. package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.js +3 -2
  13. package/dist/collection/components/feature-details/feature-details.js +22 -7
  14. package/dist/collection/components/feature-list/feature-list.js +5 -3
  15. package/dist/collection/components/info-card/info-card.css +1 -0
  16. package/dist/collection/components/layer-table/layer-table.js +18 -43
  17. package/dist/collection/demos/crowdsource-manager.html +4 -2
  18. package/dist/collection/demos/crowdsource-reporter.html +1 -1
  19. package/dist/collection/utils/interfaces.ts +2 -0
  20. package/dist/components/create-related-feature2.js +2 -1
  21. package/dist/components/crowdsource-manager.js +8 -11
  22. package/dist/components/crowdsource-reporter.js +4 -3
  23. package/dist/components/feature-details2.js +6 -6
  24. package/dist/components/feature-list2.js +5 -3
  25. package/dist/components/info-card2.js +1 -1
  26. package/dist/components/layer-table2.js +18 -11
  27. package/dist/esm/calcite-alert_4.entry.js +1 -1
  28. package/dist/esm/calcite-flow_6.entry.js +8 -7
  29. package/dist/esm/card-manager_3.entry.js +18 -9
  30. package/dist/esm/crowdsource-manager.entry.js +8 -9
  31. package/dist/esm/crowdsource-reporter.entry.js +4 -3
  32. package/dist/esm/feature-list.entry.js +5 -3
  33. package/dist/esm/loader.js +1 -1
  34. package/dist/esm/solutions-components.js +1 -1
  35. package/dist/solutions-components/demos/crowdsource-manager.html +4 -2
  36. package/dist/solutions-components/demos/crowdsource-reporter.html +1 -1
  37. package/dist/solutions-components/{p-d4686851.entry.js → p-48c99a48.entry.js} +1 -1
  38. package/dist/solutions-components/p-64779bb2.entry.js +6 -0
  39. package/dist/solutions-components/p-6a598429.entry.js +6 -0
  40. package/dist/solutions-components/{p-d84fe0ee.entry.js → p-8cff32bd.entry.js} +1 -1
  41. package/dist/solutions-components/p-dae79b8d.entry.js +6 -0
  42. package/dist/solutions-components/{p-b6d47bab.entry.js → p-f6668347.entry.js} +3 -3
  43. package/dist/solutions-components/solutions-components.esm.js +1 -1
  44. package/dist/solutions-components/utils/interfaces.ts +2 -0
  45. package/dist/types/components/create-related-feature/create-related-feature.d.ts +16 -0
  46. package/dist/types/components/crowdsource-manager/crowdsource-manager.d.ts +0 -8
  47. package/dist/types/components/crowdsource-reporter/crowdsource-reporter.d.ts +1 -0
  48. package/dist/types/components/feature-details/feature-details.d.ts +16 -1
  49. package/dist/types/components/feature-list/feature-list.d.ts +4 -0
  50. package/dist/types/components/layer-table/layer-table.d.ts +1 -9
  51. package/dist/types/components.d.ts +1 -33
  52. package/dist/types/utils/interfaces.d.ts +2 -0
  53. package/package.json +1 -1
  54. package/dist/solutions-components/p-22aece81.entry.js +0 -6
  55. package/dist/solutions-components/p-e6abef31.entry.js +0 -6
  56. package/dist/solutions-components/p-e947332f.entry.js +0 -6
@@ -670,7 +670,7 @@ const EditCard = class {
670
670
  };
671
671
  EditCard.style = EditCardStyle0;
672
672
 
673
- const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}.padding-1-2{padding:0.5rem}.display-none{display:none !important}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.feature-node{position:relative !important}.feature-node .esri-features__footer{display:none !important}.button-container{justify-content:center;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-color-foreground-1) !important;height:100% !important}.overflow-hidden{overflow:hidden}.height-40{height:40px}.end-border{border-inline-end:1px solid var(--calcite-color-border-1)}.font-bold{font-weight:bold}.visibility-hidden{visibility:hidden;height:0px}.padding-inline-start-1{padding-inline-start:1rem}.border-width-0{border-width:0px}.pagination-action{position:relative;left:3px}.pagination-count{color:var(--calcite-color-brand);border-bottom:1px solid var(--calcite-color-brand)}";
673
+ const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}.padding-1-2{padding:0.5rem}.display-none{display:none !important}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.feature-node{position:relative !important}.feature-node .esri-features__footer{display:none !important}.button-container{justify-content:center;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-color-foreground-1) !important;height:100% !important}.overflow-hidden{overflow:hidden}.height-40{height:40px}.end-border{border-inline-end:1px solid var(--calcite-color-border-1)}.font-bold{font-weight:bold}.visibility-hidden{visibility:hidden;height:0px}.padding-inline-start-1{padding-inline-start:1rem}.border-width-0{border-width:0px}.pagination-action{position:relative;left:3px}.pagination-count{color:var(--calcite-color-brand);border-bottom:1px solid var(--calcite-color-brand);font-weight:bold}";
674
674
  const InfoCardStyle0 = infoCardCss;
675
675
 
676
676
  const InfoCard = class {
@@ -774,7 +774,7 @@ const CreateRelatedFeature = class {
774
774
  this.reactiveUtils = reactiveUtils;
775
775
  }
776
776
  render() {
777
- return (index.h(index.Host, { key: '383e8fac89d037f77241d856013202d1e04b28ba' }));
777
+ return (index.h(index.Host, { key: '9807b7dcad1f8305756e6098f1e64ef8caffcbac' }));
778
778
  }
779
779
  /**
780
780
  * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -881,6 +881,7 @@ const CreateRelatedFeature = class {
881
881
  * @param parentRelationship Parent relationship
882
882
  * @param childRelationship Child relationship
883
883
  * @returns Attributes for related feature
884
+ * @protected
884
885
  */
885
886
  makeAttributesForRelatedFeature(parentFeature, parentRelationship, childRelationship) {
886
887
  const parentKeyField = parentRelationship.keyField;
@@ -1027,12 +1028,12 @@ const FeatureDetails = class {
1027
1028
  var _a, _b, _c, _d, _e;
1028
1029
  //When related features found show comments list of only those features else comments list will be empty
1029
1030
  const commentsListWhereClause = ((_a = this._relatedFeaturesOIDs) === null || _a === void 0 ? void 0 : _a.length) > 0 ? `objectId in(${this._relatedFeaturesOIDs})` : '1=0';
1030
- return (index.h("calcite-panel", { key: 'c39c0eec021627b920972f7d4bce0d45bfe0a9c2', "full-height": true }, index.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) &&
1031
- index.h("div", { key: 'ecfdf111612c92eacfd97dae7bb3080b7ad50e96', class: "buttons-container" }, this._commentsAvailable &&
1032
- index.h("div", { key: '07a8213e11585041fb1c5f56254447a720033f04', class: "comment-btn" }, index.h("span", { key: 'f4071fbd03372a0e88857962e9c31530e2dc693a' }, this._relatedFeaturesOIDs.length), index.h("calcite-icon", { key: '30258e1daae5f1e00d18dd4ec052861de46b45bf', icon: "speech-bubble", scale: 's' })), this._likeFieldAvailable &&
1033
- index.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 &&
1034
- index.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 &&
1035
- index.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 })));
1031
+ return (index.h("calcite-panel", { key: 'b8d1cc9d4d9040665be3c892f5738a179ab64eaf', "full-height": true }, index.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) &&
1032
+ index.h("div", { key: '8e27d13341a9b4ad37f87778e046a4e8e0b2778e', class: "buttons-container" }, this._commentsAvailable &&
1033
+ index.h("div", { key: '3dd02fdbc107e7ce04e8aabb96a6748b68eeec6b', class: "comment-btn" }, index.h("span", { key: '5601fdb24ff385e0b6d2b9e5b86bde06b3c2d1b8' }, this._relatedFeaturesOIDs.length), index.h("calcite-icon", { key: '97a517d117a4d5a8c6798da9c9c82e46c39c25f8', icon: "speech-bubble", scale: 's' })), this._likeFieldAvailable &&
1034
+ index.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 &&
1035
+ index.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 &&
1036
+ index.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 })));
1036
1037
  }
1037
1038
  /**
1038
1039
  * Load esri javascript api modules
@@ -166,8 +166,6 @@ const LayerTable = class {
166
166
  this.shareIncludeEmbed = undefined;
167
167
  this.shareIncludeSocial = undefined;
168
168
  this.showNewestFirst = undefined;
169
- this.sortField = undefined;
170
- this.sortOrder = undefined;
171
169
  this.zoomAndScrollToSelected = undefined;
172
170
  this.zoomToScale = undefined;
173
171
  this._allIds = [];
@@ -395,7 +393,7 @@ const LayerTable = class {
395
393
  const selected = this.selectedIds.length.toString();
396
394
  const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
397
395
  this._validateActiveActions();
398
- return (index.h(index.Host, { key: '69a8f1d8c41eb82d6f39f6c580f78369f372567f' }, index.h("calcite-shell", { key: '3cb7997d918af450d04b95e1a236e09400b30af1' }, this._getTableControlRow("header"), index.h("div", { key: '1f0e84f1759c0333acee402a603923ca96e7d9e4', class: `width-full ${tableHeightClass}` }, index.h("calcite-panel", { key: 'b62bedc4c924f0d0a30e2746a532270c2a4d4a4b', class: "height-full width-full" }, index.h("calcite-loader", { key: 'e28017e4c3aba559774965f2cbff0fcb83f9ab2d', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), index.h("div", { key: 'efc520212f53c3db46574c7caf5d9f9835b83a2c', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (index.h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
396
+ return (index.h(index.Host, { key: '1077bca0d3f59ed86999449c2c5428e4aa65b30f' }, index.h("calcite-shell", { key: '02b7a7512cfdc8958251ae00709b971f9bfff6df' }, this._getTableControlRow("header"), index.h("div", { key: '83d03238c368cd332714f4434297a9a4f9d47ec4', class: `width-full ${tableHeightClass}` }, index.h("calcite-panel", { key: '18927c7c65687c9df28f69b1e66f542be05e8c52', class: "height-full width-full" }, index.h("calcite-loader", { key: '51ed528d5676b983c27b50b098dd8785a3c7b591', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), index.h("div", { key: '4e51683f468b29b6dcdf1a588cdfedb37a02166f', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (index.h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
399
397
  .replace("{{total}}", total)
400
398
  .replace("{{selected}}", selected))) : undefined)), this._filterModal()));
401
399
  }
@@ -1195,16 +1193,27 @@ const LayerTable = class {
1195
1193
  this._deleteEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsDelete;
1196
1194
  }
1197
1195
  /**
1198
- * Sort the table with the configured field in the configured sort order
1196
+ * Sort the table with the configured field and the sort order
1199
1197
  */
1200
1198
  async _sortTable() {
1201
- var _a, _b, _c, _d, _e, _f;
1202
- let sortField = this.sortField ? this.sortField : this._layer.objectIdField;
1199
+ var _a, _b, _c, _d;
1200
+ //By default sort the table using objectIdField and in descending order
1201
+ let sortField = this._layer.objectIdField;
1202
+ let sortOrder = 'desc';
1203
+ let configuredLayer;
1204
+ //get the sortField and sortOrder from the configuration
1203
1205
  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) {
1204
- const configuredLayer = (_d = this.mapInfo.layerOptions) === null || _d === void 0 ? void 0 : _d.layers.filter((layer) => layer.id === this._layer.id);
1205
- 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;
1206
+ configuredLayer = this.mapInfo.layerOptions.layers.filter((layer) => layer.id === this._layer.id);
1207
+ if (configuredLayer && configuredLayer.length > 0) {
1208
+ configuredLayer = configuredLayer[0];
1209
+ //if sort field is defined and sortField is available in the fields then use it
1210
+ if (configuredLayer.sortField && ((_d = configuredLayer.fields) === null || _d === void 0 ? void 0 : _d.includes(configuredLayer.sortField))) {
1211
+ sortField = configuredLayer.sortField;
1212
+ }
1213
+ //use sort order if configured
1214
+ sortOrder = (configuredLayer === null || configuredLayer === void 0 ? void 0 : configuredLayer.sortOrder) ? configuredLayer.sortOrder : "desc";
1215
+ }
1206
1216
  }
1207
- const sortOrder = this.sortOrder ? this.sortOrder : 'desc';
1208
1217
  if (this._table && this._layer) {
1209
1218
  await this._table.when();
1210
1219
  await this._layer.when(() => {
@@ -75,8 +75,6 @@ const CrowdsourceManager = class {
75
75
  this.theme = "light";
76
76
  this.zoomAndScrollToSelected = false;
77
77
  this.zoomToScale = undefined;
78
- this.sortField = undefined;
79
- this.sortOrder = undefined;
80
78
  this._expandPopup = this.hideMapOnLoad;
81
79
  this._hideFooter = false;
82
80
  this._hideTable = false;
@@ -183,7 +181,7 @@ const CrowdsourceManager = class {
183
181
  * Renders the component.
184
182
  */
185
183
  render() {
186
- return (index.h(index.Host, { key: '686aeccc0f97c1eb8bc1b673d8816663e80fdf71' }, index.h("calcite-shell", { key: 'f3451483cdbafa8b68a00b71e9927bbff55781b9', class: "position-relative" }, index.h("calcite-panel", { key: '8256440e1cefa8f25bf1af1f9a1e87650c34462d', class: `width-full height-full border-width-0` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
184
+ return (index.h(index.Host, { key: '5cd7d2ea4be1216270e15afc3d090bfc672f5335' }, index.h("calcite-shell", { key: 'cb5b4104b698a0bc146c2f5f47bd03b7944025c1', class: "position-relative" }, index.h("calcite-panel", { key: 'cbf1848d59c485dd143d6051506fcd92215fa2ec', class: `width-full height-full border-width-0` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
187
185
  }
188
186
  /**
189
187
  * Called after each render
@@ -303,7 +301,8 @@ const CrowdsourceManager = class {
303
301
  _getBody(layoutMode, panelOpen, hideTable) {
304
302
  const contentClass = layoutMode === interfaces.ELayoutMode.HORIZONTAL ? "" : "display-flex";
305
303
  const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
306
- return (index.h("calcite-panel", { class: "width-full height-full" }, index.h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideTable), this._getTable(layoutMode, panelOpen, hideTable)), index.h("div", { class: "floating-container", onClick: this.infoButtonClick.bind(this) }, index.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" }))));
304
+ return (index.h("calcite-panel", { class: "width-full height-full" }, index.h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideTable), this._getTable(layoutMode, panelOpen, hideTable)), this.coverPageEnabled &&
305
+ index.h("div", { class: "floating-container", onClick: this.infoButtonClick.bind(this) }, index.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" }))));
307
306
  }
308
307
  /**
309
308
  * Emit the event when info button clicked
@@ -356,10 +355,10 @@ const CrowdsourceManager = class {
356
355
  const headerTheme = this.popupHeaderColor ? "" : !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
357
356
  const containerClass = this._isMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isMobile ? "display-none height-0" : "";
358
357
  return (index.h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass}`, style: {
359
- '--calcite-color-foreground-1': this.popupHeaderColor, /* background color to apply to the popup header */
360
- '--calcite-color-foreground-2': this.popupHeaderHoverColor, /* color that will be displayed on hover when expanding the popup header */
361
- '--calcite-color-text-3': this.popupHeaderHoverTextColor, /* font color that will be displayed on hover when expanding the popup header */
362
- '--calcite-color-text-2': this.popupHeaderTextColor, /* font color to apply to the popup header */
358
+ '--calcite-color-foreground-1': this.popupHeaderColor, /* background color that will be displayed on the popup header */
359
+ '--calcite-color-foreground-2': this.popupHeaderHoverColor, /* background color that will be displayed on button when hovered */
360
+ '--calcite-color-text-3': this.popupHeaderTextColor, /* font color that will be displayed on button */
361
+ '--calcite-color-text-2': this.popupHeaderTextColor, /* font color that will be displayed on popup header text*/
363
362
  } }, index.h("calcite-panel", null, !this._isMobile ? (index.h("div", { class: `display-flex align-items-center ${headerClass}`, slot: "header-content" }, index.h("calcite-icon", { icon: "information", scale: "s" }), index.h("div", { class: "padding-inline-start-75" }, this._translations.information))) : undefined, index.h("calcite-action", { class: headerClass, disabled: this._tableOnly, icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end", text: "" }), !this._tableOnly ? index.h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, index.h("span", null, tooltip)) : undefined, this._getCardNode())));
364
363
  }
365
364
  /**
@@ -404,7 +403,7 @@ const CrowdsourceManager = class {
404
403
  ((_a = this.defaultGlobalId) === null || _a === void 0 ? void 0 : _a.indexOf(",")) > -1 ? this.defaultGlobalId.split(",") : [this.defaultGlobalId];
405
404
  const defaultOid = !this.defaultOid ? undefined :
406
405
  ((_b = this.defaultOid) === null || _b === void 0 ? void 0 : _b.indexOf(",")) > -1 ? this.defaultOid.split(",").map(o => parseInt(o, 10)) : [parseInt(this.defaultOid, 10)];
407
- return (index.h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (index.h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, index.h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), index.h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, index.h("span", null, tooltip)))) : undefined, index.h("div", { class: `width-full height-full position-relative` }, index.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 }))));
406
+ return (index.h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (index.h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, index.h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), index.h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, index.h("span", null, tooltip)))) : undefined, index.h("div", { class: `width-full height-full position-relative` }, index.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 }))));
408
407
  }
409
408
  /**
410
409
  * Update the component layout when its size changes
@@ -13,7 +13,7 @@ const mapViewUtils = require('./mapViewUtils-6e46ba33.js');
13
13
  require('./esri-loader-fce6a9cb.js');
14
14
  require('./interfaces-7cd0a48a.js');
15
15
 
16
- 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}";
16
+ 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}";
17
17
  const CrowdsourceReporterStyle0 = crowdsourceReporterCss;
18
18
 
19
19
  const CrowdsourceReporter = class {
@@ -227,6 +227,7 @@ const CrowdsourceReporter = class {
227
227
  * On sort option click update the sort field and sort order
228
228
  * @param sortField sort field
229
229
  * @param sortOrder sort order
230
+ * @param sortOption selected sort option (Newest/Oldest/Highest Voted/Lowest Voted)
230
231
  */
231
232
  async sortOptionClick(sortField, sortOrder, sortOption) {
232
233
  this._updatedSorting = {
@@ -553,7 +554,7 @@ const CrowdsourceReporter = class {
553
554
  */
554
555
  getFeatureDetailsFlowItem() {
555
556
  const showCommentBtn = this.reportingOptions[this._currentFeature.layer.id].comment && this._currentFeature.layer.relationships.length > 0;
556
- return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), index.h("instant-apps-social-share", { autoUpdateShareUrl: false, embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", slot: "header-actions-end", socialMedia: true, view: this.mapView }), index.h("calcite-panel", null, this._selectedFeature.length > 1 && this.getFeaturesPagination(), index.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 &&
557
+ return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), index.h("instant-apps-social-share", { autoUpdateShareUrl: false, 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(), index.h("calcite-panel", null, index.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 &&
557
558
  index.h("calcite-button", { appearance: "solid", onClick: () => this._flowItems = [...this._flowItems, "add-comment"], slot: "footer", width: "full" }, this._translations.comment))));
558
559
  }
559
560
  /**
@@ -562,7 +563,7 @@ const CrowdsourceReporter = class {
562
563
  * @returns Node
563
564
  */
564
565
  getFeaturesPagination() {
565
- return (index.h("div", { class: "feature-pagination", slot: "header-actions-start" }, index.h("div", null, index.h("calcite-button", { appearance: 'transparent', disabled: false, iconStart: "chevron-left", id: "solutions-back", onClick: () => void this._featureDetails.back(), scale: "s", width: "full" }), index.h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, index.h("span", null, this._translations.back))), index.h("calcite-button", { appearance: 'transparent', class: 'pagination-action', onClick: () => void this._featureDetails.toggleListView(), scale: "s" }, index.h("span", { class: "pagination-count" }, this._getCount())), index.h("div", null, index.h("calcite-button", { appearance: "transparent", disabled: false, iconStart: "chevron-right", id: "solutions-next", onClick: () => void this._featureDetails.next(), scale: "s", width: "full" }), index.h("calcite-tooltip", { placement: "top", "reference-element": "solutions-next" }, index.h("span", null, this._translations.next)))));
566
+ return (index.h("div", { class: "feature-pagination" }, index.h("div", null, index.h("calcite-button", { appearance: 'transparent', disabled: false, iconStart: "chevron-left", id: "solutions-back", onClick: () => void this._featureDetails.back(), scale: "s", width: "full" }), index.h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, index.h("span", null, this._translations.back))), index.h("calcite-button", { appearance: 'transparent', onClick: () => void this._featureDetails.toggleListView(), scale: "s" }, index.h("span", { class: "pagination-count" }, this._getCount())), index.h("div", null, index.h("calcite-button", { appearance: "transparent", disabled: false, iconStart: "chevron-right", id: "solutions-next", onClick: () => void this._featureDetails.next(), scale: "s", width: "full" }), index.h("calcite-tooltip", { placement: "top", "reference-element": "solutions-next" }, index.h("span", null, this._translations.next)))));
566
567
  }
567
568
  /**
568
569
  * Returns the calcite-flow item for comment details
@@ -98,9 +98,9 @@ const FeatureList = class {
98
98
  * Renders the component.
99
99
  */
100
100
  render() {
101
- return (index.h("calcite-panel", { key: '37f83a9c019e68213493f5e890324470389cd36f', "full-height": true, "full-width": true }, this._isLoading && index.h("calcite-loader", { key: '671559375bb5fcdc8a01f9f10a82ab71edc0d836', label: "", scale: "m" }), this._featureItems.length === 0 && !this._isLoading &&
102
- index.h("calcite-notice", { key: 'f6101de52464f2316bfbb83919036b4cf035f8b9', class: "error-msg", icon: "feature-details", kind: "info", open: true }, index.h("div", { key: 'e49017399909f1d0b93ec4e24341b9042267977f', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), index.h("calcite-list", { key: '2e90c0aec739fcce422ff730a39adc85b71a84cb', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
103
- index.h("div", { key: '4b59248846c5b433bb88171c322070a13002f23d', class: "width-full", slot: "footer" }, index.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 }))));
101
+ return (index.h("calcite-panel", { key: '9f702c6d98cc19704e0773e36fd969817ea7262e', "full-height": true, "full-width": true }, this._isLoading && index.h("calcite-loader", { key: 'e9acf13f3444057b097d6b145c1a6e0118f150ea', label: "", scale: "m" }), this._featureItems.length === 0 && !this._isLoading &&
102
+ index.h("calcite-notice", { key: '8c7fa89e2da7490b04456e51f8534c2515a02399', class: "error-msg", icon: "feature-details", kind: "info", open: true }, index.h("div", { key: '799d419e9c26b7928f15cb1cf9afa9f47cab0e94', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), index.h("calcite-list", { key: '82c60b16ab586ad57f8f98bb08814f688102b166', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
103
+ index.h("div", { key: 'e5b789ea46c6bedfbe83f1323ffb89271c0b76ce', class: "width-full", slot: "footer" }, index.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 }))));
104
104
  }
105
105
  //--------------------------------------------------------------------------
106
106
  //
@@ -141,7 +141,9 @@ const FeatureList = class {
141
141
  * @protected
142
142
  */
143
143
  async initializeFeatureItems() {
144
+ var _a;
144
145
  if (this._selectedLayer) {
146
+ void ((_a = this._pagination) === null || _a === void 0 ? void 0 : _a.goTo("start"));
145
147
  this._isLoading = this.showInitialLoading;
146
148
  this._featureItems = await this.queryPage(0);
147
149
  const query = {