@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.
- package/dist/cjs/calcite-alert_4.cjs.entry.js +1 -1
- package/dist/cjs/calcite-flow_6.cjs.entry.js +8 -7
- package/dist/cjs/card-manager_3.cjs.entry.js +18 -9
- package/dist/cjs/crowdsource-manager.cjs.entry.js +8 -9
- package/dist/cjs/crowdsource-reporter.cjs.entry.js +4 -3
- package/dist/cjs/feature-list.cjs.entry.js +5 -3
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/solutions-components.cjs.js +1 -1
- package/dist/collection/components/create-related-feature/create-related-feature.js +17 -1
- package/dist/collection/components/crowdsource-manager/crowdsource-manager.js +8 -43
- package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.css +4 -3
- package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.js +3 -2
- package/dist/collection/components/feature-details/feature-details.js +22 -7
- package/dist/collection/components/feature-list/feature-list.js +5 -3
- package/dist/collection/components/info-card/info-card.css +1 -0
- package/dist/collection/components/layer-table/layer-table.js +18 -43
- package/dist/collection/demos/crowdsource-manager.html +4 -2
- package/dist/collection/demos/crowdsource-reporter.html +1 -1
- package/dist/collection/utils/interfaces.ts +2 -0
- package/dist/components/create-related-feature2.js +2 -1
- package/dist/components/crowdsource-manager.js +8 -11
- package/dist/components/crowdsource-reporter.js +4 -3
- package/dist/components/feature-details2.js +6 -6
- package/dist/components/feature-list2.js +5 -3
- package/dist/components/info-card2.js +1 -1
- package/dist/components/layer-table2.js +18 -11
- package/dist/esm/calcite-alert_4.entry.js +1 -1
- package/dist/esm/calcite-flow_6.entry.js +8 -7
- package/dist/esm/card-manager_3.entry.js +18 -9
- package/dist/esm/crowdsource-manager.entry.js +8 -9
- package/dist/esm/crowdsource-reporter.entry.js +4 -3
- package/dist/esm/feature-list.entry.js +5 -3
- package/dist/esm/loader.js +1 -1
- package/dist/esm/solutions-components.js +1 -1
- package/dist/solutions-components/demos/crowdsource-manager.html +4 -2
- package/dist/solutions-components/demos/crowdsource-reporter.html +1 -1
- package/dist/solutions-components/{p-d4686851.entry.js → p-48c99a48.entry.js} +1 -1
- package/dist/solutions-components/p-64779bb2.entry.js +6 -0
- package/dist/solutions-components/p-6a598429.entry.js +6 -0
- package/dist/solutions-components/{p-d84fe0ee.entry.js → p-8cff32bd.entry.js} +1 -1
- package/dist/solutions-components/p-dae79b8d.entry.js +6 -0
- package/dist/solutions-components/{p-b6d47bab.entry.js → p-f6668347.entry.js} +3 -3
- package/dist/solutions-components/solutions-components.esm.js +1 -1
- package/dist/solutions-components/utils/interfaces.ts +2 -0
- package/dist/types/components/create-related-feature/create-related-feature.d.ts +16 -0
- package/dist/types/components/crowdsource-manager/crowdsource-manager.d.ts +0 -8
- package/dist/types/components/crowdsource-reporter/crowdsource-reporter.d.ts +1 -0
- package/dist/types/components/feature-details/feature-details.d.ts +16 -1
- package/dist/types/components/feature-list/feature-list.d.ts +4 -0
- package/dist/types/components/layer-table/layer-table.d.ts +1 -9
- package/dist/types/components.d.ts +1 -33
- package/dist/types/utils/interfaces.d.ts +2 -0
- package/package.json +1 -1
- package/dist/solutions-components/p-22aece81.entry.js +0 -6
- package/dist/solutions-components/p-e6abef31.entry.js +0 -6
- 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: ' | 
| 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: ' | 
| 1031 | 
            -
                        index.h("div", { key: ' | 
| 1032 | 
            -
                            index.h("div", { key: ' | 
| 1033 | 
            -
                            index.h("calcite-button", { key: ' | 
| 1034 | 
            -
                            index.h("calcite-button", { key: ' | 
| 1035 | 
            -
                        index.h("feature-list", { key: ' | 
| 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: ' | 
| 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  | 
| 1196 | 
            +
                 * Sort the table with the configured field and the sort order
         | 
| 1199 1197 | 
             
                 */
         | 
| 1200 1198 | 
             
                async _sortTable() {
         | 
| 1201 | 
            -
                    var _a, _b, _c, _d | 
| 1202 | 
            -
                     | 
| 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 | 
            -
                         | 
| 1205 | 
            -
                         | 
| 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: ' | 
| 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)),  | 
| 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  | 
| 360 | 
            -
                            '--calcite-color-foreground-2': this.popupHeaderHoverColor, /* color that will be displayed on  | 
| 361 | 
            -
                            '--calcite-color-text-3': this. | 
| 362 | 
            -
                            '--calcite-color-text-2': this.popupHeaderTextColor, /* font color  | 
| 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,  | 
| 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{ | 
| 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 }),  | 
| 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" | 
| 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: ' | 
| 102 | 
            -
                        index.h("calcite-notice", { key: ' | 
| 103 | 
            -
                        index.h("div", { key: ' | 
| 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 = {
         |