@esri/solutions-components 0.11.22 → 0.11.24

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

@@ -23,12 +23,13 @@ import { loadModules } from "../../utils/loadModules";
 import { getLocaleComponentStrings } from "../../utils/locale";
 export class CreateRelatedFeature {
     constructor() {
+        this.customizeSubmit = false;
+        this.enableSnapping = false;
         this.locale = undefined;
         this.mapView = undefined;
-        this.table = undefined;
         this.selectedFeature = undefined;
-        this.customizeSubmit = false;
         this.showGuidingMsg = true;
+        this.table = undefined;
         this._editorLoading = false;
         this._translations = undefined;
     }
@@ -48,23 +49,23 @@ export class CreateRelatedFeature {
      * The Editor constructor
      */
     Editor;
-    /**
-   * esri/widgets/Editor: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Editor.html
-   * The Editor instance
-   */
-    _editor;
     /**
      * esri/core/reactiveUtils: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html
      */
     reactiveUtils;
+    /**
+     * boolean: Flag to maintain the add attachment
+     */
+    _addingAttachment;
     /**
      * HTMLDivElement: The node the editor will be added to
      */
     _container;
     /**
-     * boolean: Flag to maintain the add attachment
-     */
-    _addingAttachment;
+   * esri/widgets/Editor: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Editor.html
+   * The Editor instance
+   */
+    _editor;
     /**
      * boolean: Flag to maintain form submission using submit button
      */
@@ -172,7 +173,7 @@ export class CreateRelatedFeature {
     }
     render() {
         const loaderClass = this._editorLoading ? "" : "display-none";
-        return (h(Fragment, { key: '261308f81b5bbed3e136efbb2100db9c1e5994a4' }, this.showGuidingMsg && h("calcite-notice", { key: '3aca1d3f48e46208ce07f2ccdd76ac4af752162d', class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { key: 'f449d7dcde1cc75bf7470a75ae0ce915ef457459', slot: "message" }, this._translations.provideDetailsMsg)), h("calcite-loader", { key: 'e94e971b96ddba0ab36f27ffd4e37b820bb2432f', class: loaderClass, label: "", scale: "s" })));
+        return (h(Fragment, { key: '6c2bfcf17fc2ef0f1fc16c3c45d98b58101f629b' }, this.showGuidingMsg && h("calcite-notice", { key: 'df2091f0435ef5ee4adcf71e177e35429c831d63', class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { key: 'e0180f8e8d6c615507c18ad3d1b0c248d42a754f', slot: "message" }, this._translations.provideDetailsMsg)), h("calcite-loader", { key: '235fb4b02ee3f6576ad5620517da6386774cfb7d', class: loaderClass, label: "", scale: "s" })));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -198,11 +199,15 @@ export class CreateRelatedFeature {
         }
         this._container = document.createElement("div");
         this._container?.classList.add("display-none");
+        if (!this.enableSnapping) {
+            this._container.classList.add("hide-editor-toolbar");
+        }
         this._editor = new this.Editor({
             view: this.mapView,
             visibleElements: {
                 flow: true,
-                snappingControls: false
+                settingsMenu: this.enableSnapping,
+                snappingControls: this.enableSnapping,
             },
             container: this._container
         });
@@ -372,6 +377,46 @@ export class CreateRelatedFeature {
     }
     static get properties() {
         return {
+            "customizeSubmit": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: Set this to true when have a custom submit button in the app.\r\nThis will hide the header and footer elements of the editor and user needs to execute the submit method manually."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "customize-submit",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "enableSnapping": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true the snapping options will be exposed"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "enable-snapping",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "locale": {
                 "type": "string",
                 "mutable": false,
@@ -413,28 +458,6 @@ export class CreateRelatedFeature {
                 "getter": false,
                 "setter": false
             },
-            "table": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "__esri.FeatureLayer",
-                    "resolved": "FeatureLayer",
-                    "references": {
-                        "___esri": {
-                            "location": "global",
-                            "id": "global::___esri"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "__esri.FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html"
-                },
-                "getter": false,
-                "setter": false
-            },
             "selectedFeature": {
                 "type": "unknown",
                 "mutable": false,
@@ -457,7 +480,7 @@ export class CreateRelatedFeature {
                 "getter": false,
                 "setter": false
             },
-            "customizeSubmit": {
+            "showGuidingMsg": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -469,33 +492,35 @@ export class CreateRelatedFeature {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "boolean: Set this to true when have a custom submit button in the app.\r\nThis will hide the header and footer elements of the editor and user needs to execute the submit method manually."
+                    "text": "boolean: When true the notice message should be shown"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "customize-submit",
+                "attribute": "show-guiding-msg",
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "true"
             },
-            "showGuidingMsg": {
-                "type": "boolean",
+            "table": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "__esri.FeatureLayer",
+                    "resolved": "FeatureLayer",
+                    "references": {
+                        "___esri": {
+                            "location": "global",
+                            "id": "global::___esri"
+                        }
+                    }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "boolean: When true the notice message should be shown"
+                    "text": "__esri.FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html"
                 },
                 "getter": false,
-                "setter": false,
-                "attribute": "show-guiding-msg",
-                "reflect": false,
-                "defaultValue": "true"
+                "setter": false
             }
         };
     }

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

@@ -48,6 +48,7 @@ export class CrowdsourceManager {
         this.enableLegend = true;
         this.enableSearch = true;
         this.enableShare = false;
+        this.enableSnapping = true;
         this.enableZoom = true;
         this.locale = undefined;
         this.mapInfos = [];
@@ -277,7 +278,7 @@ export class CrowdsourceManager {
     render() {
         // only avoid border when we have a header color that is not white
         const borderClass = this.popupHeaderColor && this.popupHeaderColor !== "#FFFFFF" ? "border-width-0" : "";
-        return (h(Host, { key: '4ec349cf53a543077a3b938d5dad2e767f533181' }, h("calcite-shell", { key: '08c56e11ff814419aeb7295bba240b0e96856cae', class: "position-relative" }, h("calcite-panel", { key: 'aac7ff804b7e98f3b5d1b11dbc5ee8e18c9467ca', class: `width-full height-full ${borderClass}`, loading: this._isLoading }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter()), this._filterModal(), this._deleteModal()));
+        return (h(Host, { key: 'cb38f5440e7f36f0285b41a7193e58be94e6cbb7' }, h("calcite-shell", { key: 'dd7b80c00af2b2e28dd5cf7662cfc80d5a46f277', class: "position-relative" }, h("calcite-panel", { key: '5b38f18d4db6132822b622892b9eff5bffbdea2b', class: `width-full height-full ${borderClass}`, loading: this._isLoading }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter()), this._filterModal(), this._deleteModal()));
     }
     /**
      * Called after each render
@@ -508,7 +509,7 @@ export class CrowdsourceManager {
         const isTableLayout = this.appLayout === 'tableView';
         const cardManagerHeight = isTableLayout && this.mapInfos?.length > 1 ? "adjusted-height-100-51" : isMapLayout || isTableLayout ? "height-full" : (this._numSelected > 0 && !this._isMobile) ? "height-50" : !this._showInformationHeader ? "adjusted-height-50_25" : !this._isPortraitMobile ? "height-50" : "height-full";
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h("div", { class: `width-50 height-full ${themeClass}` }, h("card-manager", { class: `${cardManagerHeight} width-full`, customInfoText: this.customInfoText, enableCreateFeatures: this._enableCreateFeatures && !this._isMobile, enableEditGeometry: this?._mapInfo?.enableEditGeometry, isMobile: this._isPortraitMobile, layer: this._layer, locale: this.locale, mapView: this?._mapView, onBackFromCreateWorkFlow: () => {
+        return (h("div", { class: `width-50 height-full ${themeClass}` }, h("card-manager", { class: `${cardManagerHeight} width-full`, customInfoText: this.customInfoText, enableCreateFeatures: this._enableCreateFeatures && !this._isMobile, enableEditGeometry: this?._mapInfo?.enableEditGeometry, enableSnapping: this.enableSnapping, isMobile: this._isPortraitMobile, layer: this._layer, locale: this.locale, mapView: this?._mapView, onBackFromCreateWorkFlow: () => {
                 this._showInformationHeader = true;
             }, onCreateWorkFlowStarted: () => {
                 this.appLayout = this._layer.isTable ? "tableView" : "mapView";
@@ -1268,6 +1269,26 @@ export class CrowdsourceManager {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "enableSnapping": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true the snapping options will be exposed"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "enable-snapping",
+                "reflect": false,
+                "defaultValue": "true"
+            },
             "enableZoom": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -37,6 +37,7 @@ export class CrowdsourceReporter {
         this.enableLogin = undefined;
         this.enableNewReports = undefined;
         this.enableSearch = true;
+        this.enableSnapping = false;
         this.enableZoom = true;
         this.isMobile = undefined;
         this.layerExpressions = [];
@@ -390,7 +391,7 @@ export class CrowdsourceReporter {
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, { key: 'e9a4807ce84ddb099c3f25f562b03c178b69d91f' }, this._reportSubmitted && h("calcite-alert", { key: '4eb1a05f3bdb3abb65d34a59e7452b1cbb2aa011', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { key: 'b6b1cb628e7a6695230e11c0320a60eb7ac8c77e', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '3e5b98d155cb91950989229c54b58166d4072ba9', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '3ec867d92d44fc808415dbcf11cc0d4f64410ca1', slot: "title" }, this._translations.error), h("div", { key: 'b08a281438504605b23236622decfc632f5e980b', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '700ce59b43b4bcf5b3b5f269a05b7916aab03119', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: 'e3a853126b97fe73275b2908b7735dae0d8bacc4', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: 'af903aa26896dfbbe1deeac12aee1a6777e2c352', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: 'c88a104fbe9f0266c77c25a7067cfd4836e4ac81', slot: "title" }, this._translations.error), h("div", { key: 'a34b0543199de865a65ae426e49aa3cd13128126', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '0bf41b76dcd6e0c6c26b7e4ac03b2a6a100aacfb' }, h("calcite-shell", { key: '0e7c0a7f15a15677c73ea8a087f77332b34583cc', "content-behind": true }, this._getReporter())), this.isMobile && this.filterModal()));
+        return (h(Host, { key: 'b262a653d9af3a8f332f416af7f297cc15ac3355' }, this._reportSubmitted && h("calcite-alert", { key: 'efe33e5ec3ed708d21f8464aa70eb7ce9a258035', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '6c6a35bc84da9a13241313dd15dc4a5905f59866', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '21d8064c4bf5c0dd118cd012d9d30d2998011a00', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '93e68814f1f3cf62d9ed4d6673aec8124cfa0a4f', slot: "title" }, this._translations.error), h("div", { key: '156cd9169dbcbeafa605620938ba9aeccd0f9401', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '2cb152fe6734f80f6d9714c3597aaf064ffffd57', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '33369e8086740651ef26bfc765448fb6bded03fe', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '5b4fbac03c85e82e2bb11611772186140d0419e9', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '31bd9f781304d1493dcbbee5914369742c8c0e03', slot: "title" }, this._translations.error), h("div", { key: '7844073654d79069fe7e54c72ec7bc85a1e77436', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '17eca819f0141e4945deb8013aa662d5b3c27626' }, h("calcite-shell", { key: 'c07f28fa3733f6be3a22d813a267e77a05038f3e', "content-behind": true }, this._getReporter())), this.isMobile && this.filterModal()));
     }
     //--------------------------------------------------------------------------
     //
@@ -574,7 +575,7 @@ export class CrowdsourceReporter {
      * @protected
      */
     getFeatureCreateFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "feature-create" }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("create-feature", { customizeSubmit: true, enableSearch: true, floorLevel: this.floorLevel, formElements: this._formElements.find(elm => elm.id === this._selectedLayerId), isMobile: this.isMobile, locale: this.locale, mapView: this.mapView, onDrawComplete: this.onFormReady.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onModeChanged: this.backFromCreateFeaturePanel.bind(this), onProgressStatus: this.updatedProgressStatus.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId, submitNewReportsMessage: this.submitNewReportsMessage }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "feature-create" }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("create-feature", { customizeSubmit: true, enableSearch: true, enableSnapping: this.enableSnapping, floorLevel: this.floorLevel, formElements: this._formElements.find(elm => elm.id === this._selectedLayerId), isMobile: this.isMobile, locale: this.locale, mapView: this.mapView, onDrawComplete: this.onFormReady.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onModeChanged: this.backFromCreateFeaturePanel.bind(this), onProgressStatus: this.updatedProgressStatus.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId, submitNewReportsMessage: this.submitNewReportsMessage }))));
     }
     /**
      * Update the progress bar status when editor panel changes
@@ -742,7 +743,7 @@ export class CrowdsourceReporter {
      * @protected
      */
     async layerListLoaded(evt) {
-        // Check if user is present on the layer panel or if first component is feature list then only allow to store the non-reporting valid layers to avoid the feature visbility issue on map 
+        // Check if user is present on the layer panel or if first component is feature list then only allow to store the non-reporting valid layers to avoid the feature visbility issue on map
         const presentOnLayerListPanel = this._layerList && this._flowItems[this._flowItems.length - 1] === "layer-list" || this._flowItems[0] === "feature-list";
         if (presentOnLayerListPanel) {
             const layersListed = evt.detail;
@@ -942,7 +943,7 @@ export class CrowdsourceReporter {
      */
     getFeatureDetailsFlowItem() {
         const showCommentBtn = this._getLayersConfig(this._selectedLayerId)?.comment && this._selectedLayer.relationships.length > 0 && this._relatedTable;
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "feature-details" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, class: "share-node", embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, removePopoverOffset: true, 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, layerItemsHash: this._layerItemsHash, locale: this.locale, mapView: this.mapView, onAddComment: this.showAddCommentsPanel.bind(this), onCommentSelect: this.onCommentSelectFromList.bind(this), onFeatureSelectionChange: this.selectionChanged.bind(this), onLikeOrDislikeClicked: () => { void this._featureList.refresh(true); }, onLoadingStatus: (evt) => void this.updatingFeatureDetails(evt.detail), ref: el => this._featureDetails = el, reportingOptions: this.reportingOptions, showFullCommentTitle: this.showFullCommentTitle, showUserImageInCommentsList: this.showUserImageInCommentsList }), showCommentBtn &&
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "feature-details" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, class: "share-node", embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, removePopoverOffset: true, 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', enableSnapping: this.enableSnapping, graphics: this._selectedFeature, layerItemsHash: this._layerItemsHash, locale: this.locale, mapView: this.mapView, onAddComment: this.showAddCommentsPanel.bind(this), onCommentSelect: this.onCommentSelectFromList.bind(this), onFeatureSelectionChange: this.selectionChanged.bind(this), onLikeOrDislikeClicked: () => { void this._featureList.refresh(true); }, onLoadingStatus: (evt) => void this.updatingFeatureDetails(evt.detail), ref: el => this._featureDetails = el, reportingOptions: this.reportingOptions, showFullCommentTitle: this.showFullCommentTitle, showUserImageInCommentsList: this.showUserImageInCommentsList }), showCommentBtn &&
             h("calcite-button", { appearance: "solid", onClick: this.showAddCommentsPanel.bind(this), slot: "footer", width: "full" }, this.commentButtonText || this._translations.comment))));
     }
     /**
@@ -958,14 +959,14 @@ export class CrowdsourceReporter {
      * @returns Node
      */
     getCommentDetailsFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "comment-details" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, graphics: this._selectedRelatedFeature, highlightEnabled: false, isLoading: false, isMobile: false, locale: this.locale, mapView: this.mapView, paginationEnabled: false }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "comment-details" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, enableSnapping: this.enableSnapping, graphics: this._selectedRelatedFeature, highlightEnabled: false, isLoading: false, isMobile: false, locale: this.locale, mapView: this.mapView, paginationEnabled: false }))));
     }
     /**
      * Returns the calcite-flow item for add comment
      * @returns Node
      */
     getAddCommentFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromCreateRelatedFeaturePanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "add-comment" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateRelatedFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateRelatedFeaturePanel.bind(this), width: "full" }, this._translations.cancel))), h("calcite-panel", null, h("create-related-feature", { customizeSubmit: true, locale: this.locale, mapView: this.mapView, onFail: this.addCommentFailed.bind(this), onFormReady: this.onFormReady.bind(this), onIsActionPending: this.showSubmitCancelButton.bind(this), onSuccess: this.onCommentSubmitted.bind(this), ref: el => this._createRelatedFeature = el, selectedFeature: this._currentFeature, table: this._relatedTable }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromCreateRelatedFeaturePanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "add-comment" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateRelatedFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateRelatedFeaturePanel.bind(this), width: "full" }, this._translations.cancel))), h("calcite-panel", null, h("create-related-feature", { customizeSubmit: true, enableSnapping: this.enableSnapping, locale: this.locale, mapView: this.mapView, onFail: this.addCommentFailed.bind(this), onFormReady: this.onFormReady.bind(this), onIsActionPending: this.showSubmitCancelButton.bind(this), onSuccess: this.onCommentSubmitted.bind(this), ref: el => this._createRelatedFeature = el, selectedFeature: this._currentFeature, table: this._relatedTable }))));
     }
     /**
      * Sets the selected features and updates the first feature as the current selected feature
@@ -1680,6 +1681,26 @@ export class CrowdsourceReporter {
                 "reflect": false,
                 "defaultValue": "true"
             },
+            "enableSnapping": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true the snapping options will be exposed"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "enable-snapping",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "enableZoom": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/deduct-calculator/deduct-calculator.js

@@ -93,7 +93,7 @@ export class DeductCalculator {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: 'bef351adfb4972c2bd84709220171922a4649cd7' }, h("div", { key: '51065f0afbe4c2a2c2351f7a41a621d5d1dc8ba2', class: "label-display" }, h("calcite-label", { key: '3c9e587ef5b6becd188cb109ec4c262fdb829d92', class: "label-display" }, "Density %", this._getDensityInput()), h("calcite-label", { key: 'a274eddffc391680e55edc8582ba0c3ade78b48e', class: "label-display" }, "Type", this._getTypeInput()), h("calcite-label", { key: '300d544f83a425dc43d6725322d2381872b1acd9', class: "label-display" }, "Severity", this._getSeverityInput())), h("div", { key: '511ed7788c57fc3ff8e162f0b910b1ed2a974b3d' }, this._getCalculateInput())));
+        return (h(Host, { key: 'b2208eddc39e3112b21061b0718c07b40b5d555f' }, h("div", { key: '141f1411adb23fe1678bd4335c46c4de0c3a6f45', class: "label-display" }, h("calcite-label", { key: '78f7956efdfd7d88832e6fd031682b7f58046e34', class: "label-display" }, "Density %", this._getDensityInput()), h("calcite-label", { key: '1e38c3db3a4797efcd98b8b767578f734448ec8f', class: "label-display" }, "Type", this._getTypeInput()), h("calcite-label", { key: '1793f3b2babbcadce21c45f4224ddfe958ad6e2f', class: "label-display" }, "Severity", this._getSeverityInput())), h("div", { key: 'e7e16b0e165357f0da22617463aab443534f7ace' }, this._getCalculateInput())));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/delete-button/delete-button.js

@@ -101,7 +101,7 @@ export class DeleteButton {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '73d07f24703df76fdacc1b3a1ec80cfdd7bbee30' }, this.buttonType === "button" ? (h("calcite-button", { appearance: "outline", disabled: !this._deleteEndabled, id: "solutions-delete", kind: "danger", onClick: () => this._delete(), width: "full" }, this._translations.deleteCount.replace("{{n}}", this.ids.length.toString()))) : (h("calcite-action", { appearance: "solid", disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s", text: this._translations.delete }, h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage(), h("calcite-tooltip", { key: '803898895029bd098264b9144ff5ccee102d4ae8', placement: "bottom", "reference-element": this.buttonType === "button" ? "solutions-delete" : this.icon }, h("span", { key: 'a920ffea1849667cd58812a2c1813d2e066f0064' }, this._translations.delete))));
+        return (h(Host, { key: 'a8b845e5a7283318d4e313914e8bf992c5405d82' }, this.buttonType === "button" ? (h("calcite-button", { appearance: "outline", disabled: !this._deleteEndabled, id: "solutions-delete", kind: "danger", onClick: () => this._delete(), width: "full" }, this._translations.deleteCount.replace("{{n}}", this.ids.length.toString()))) : (h("calcite-action", { appearance: "solid", disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s", text: this._translations.delete }, h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage(), h("calcite-tooltip", { key: '63e746d5066e96a13066cae6d3ad0b23c81437dc', placement: "bottom", "reference-element": this.buttonType === "button" ? "solutions-delete" : this.icon }, h("span", { key: '9f6708e8ff0255d6634c69cb66d9544dc5b053ba' }, this._translations.delete))));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.

package/dist/collection/components/delete-dialog/delete-dialog.js

@@ -90,7 +90,7 @@ export class DeleteDialog {
     render() {
         const confirmMessage = this.ids.length === 1 ? this._translations?.confirmSingle :
             this._translations?.confirmMultiple;
-        return (h(Host, { key: 'd672a7218bc19c762c89b519b5d12c8d0122f770' }, h("calcite-dialog", { key: 'c43ba38dd9477869ae9797f98e3daafce09c5eae', heading: this._translations?.deleteFeature, kind: "danger", modal: true, onCalciteDialogClose: () => this._close(), open: this.open, widthScale: "s" }, h("div", { key: '481710981431c3bb10b8ec221604f0740f3f8772' }, confirmMessage), h("calcite-button", { key: '8f1fc8a1a66fbd25edbb8d7f99f223b5bfea0517', appearance: "outline", kind: "danger", onClick: () => this._close(), slot: "footer-end", width: "full" }, this._translations?.cancel), h("calcite-button", { key: '46830e28586f1d345de2b19a2d8198f36ae74f15', kind: "danger", loading: this._isDeleting, onClick: () => void this._deleteFeatures(), slot: "footer-end", width: "full" }, this._translations?.delete))));
+        return (h(Host, { key: 'c75cf86cce1b728837422e4102fd9cdffc33c78a' }, h("calcite-dialog", { key: '026e1b0a55ebd740f2352da820d5b15afa050f78', heading: this._translations?.deleteFeature, kind: "danger", modal: true, onCalciteDialogClose: () => this._close(), open: this.open, widthScale: "s" }, h("div", { key: '3f8e4aef2995387b758f1af8e1443253207998bc' }, confirmMessage), h("calcite-button", { key: '3005fafc853db910adc787290a328dcc161401bb', appearance: "outline", kind: "danger", onClick: () => this._close(), slot: "footer-end", width: "full" }, this._translations?.cancel), h("calcite-button", { key: '42e9da99a45f416fa9b9b5cfefdb10b045593ecb', kind: "danger", loading: this._isDeleting, onClick: () => void this._deleteFeatures(), slot: "footer-end", width: "full" }, this._translations?.delete))));
     }
     //--------------------------------------------------------------------------
     //

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

@@ -56,7 +56,7 @@
   background-color: var(--calcite-color-foreground-1) !important;
 }
 
-.esri-editor__panel-toolbar {
+.hide-editor-toolbar .esri-editor__panel-toolbar {
   display: none !important;
 }
 

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

@@ -25,11 +25,12 @@ import { getAllLayers } from "../../utils/mapViewUtils";
 export class EditCard {
     constructor() {
         this.enableEditGeometry = false;
+        this.enableSnapping = false;
+        this.graphicIndex = 0;
         this.graphics = undefined;
         this.locale = undefined;
         this.mapView = undefined;
         this.open = false;
-        this.graphicIndex = 0;
         this._editorLoading = false;
         this._translations = undefined;
     }
@@ -211,7 +212,7 @@ export class EditCard {
             !this.graphics[0].layer.editingEnabled : true;
         const tableNodeClass = this._editorLoading ? "display-none" : "position-absolute";
         const loadingClass = this._editorLoading ? "" : "display-none";
-        return (h(Host, { key: 'e181f65e7218ce0350de5dcab9049ff63a5d39c1' }, h("div", { key: '44bf2b5cf31c5acc7f65fb7ec50fd84e77c95470', class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { key: '97119476aa2a992ccadc1d61119f2640d195e7b1', class: "position-absolute" }, h("div", { key: 'f429decea684a6a22db89de89da3755bdbff19cc', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: '3ea908ef8dadd2f1c85bfac1b344f8b4441b8706', class: loadingClass, label: "", scale: "s" })))));
+        return (h(Host, { key: '8491a0fbeefc9533ed6898cf4734ec98dddd7f62' }, h("div", { key: 'a98e923e1d697559c37ce85fbd57fc1688171cb2', class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { key: 'ac5eed8a614523e1ddaad0eaf3b973faf28fdbf2', class: "position-absolute" }, h("div", { key: '63778d7c29d6fd26e0c8a534dc70da4a0e94075d', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: '641a987e8860222a1a3b6f64e700a16c03463c81', class: loadingClass, label: "", scale: "s" })))));
     }
     //--------------------------------------------------------------------------
     //
@@ -252,7 +253,8 @@ export class EditCard {
                 layerInfos,
                 visibleElements: {
                     flow: true,
-                    snappingControls: false
+                    settingsMenu: this.enableSnapping,
+                    snappingControls: this.enableSnapping,
                 },
                 container
             });
@@ -275,6 +277,9 @@ export class EditCard {
                     this.open = false;
                 }
             });
+            if (!this.enableSnapping) {
+                container.classList.add("hide-editor-toolbar");
+            }
             // had issues with destroy before adding like this
             this._editContainer.appendChild(container);
             this.editorInitialized.emit(this._editor);
@@ -349,6 +354,46 @@ export class EditCard {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "enableSnapping": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true the snapping options will be exposed"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "enable-snapping",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "graphicIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The index of the current graphic"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "graphic-index",
+                "reflect": false,
+                "defaultValue": "0"
+            },
             "graphics": {
                 "type": "unknown",
                 "mutable": true,
@@ -431,26 +476,6 @@ export class EditCard {
                 "attribute": "open",
                 "reflect": false,
                 "defaultValue": "false"
-            },
-            "graphicIndex": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The index of the current graphic"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "graphic-index",
-                "reflect": false,
-                "defaultValue": "0"
             }
         };
     }

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

@@ -23,6 +23,7 @@ import { loadModules } from "../../utils/loadModules";
 import { getAllTables } from "../../utils/mapViewUtils";
 export class FeatureDetails {
     constructor() {
+        this.enableSnapping = false;
         this.mapView = undefined;
         this.graphics = undefined;
         this.reportingOptions = undefined;
@@ -182,12 +183,12 @@ export class FeatureDetails {
     render() {
         //When related features found show comments list of only those features else comments list will be empty
         const commentsListWhereClause = this._relatedFeaturesOIDs?.length > 0 ? `objectId in(${this._relatedFeaturesOIDs})` : '1=0';
-        return (h("calcite-panel", { key: '577f06f7bc41875b38e07a44f3c734ccc839e596', "full-height": true }, h("info-card", { key: 'e815f75d02bcdfe9cc11796c913be2a6c2bfecd2', allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, locale: this.locale, mapView: this.mapView, onSelectionChanged: (e) => { this.featureSelectionChange.emit(e.detail); }, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el }), (this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) &&
-            h("div", { key: '16d0af6b0e75b595573bd0816744f03d9d6dec37', class: "buttons-container" }, this._commentsAvailable &&
-                h("calcite-button", { key: '550b3af830911a1437fa3e967492666ec8c5a2e4', appearance: "transparent", iconEnd: "speech-bubble", kind: "neutral", onClick: () => { this.addComment.emit(); }, scale: 'm' }, this._relatedFeaturesOIDs.length), this._likeFieldAvailable &&
-                h("calcite-button", { key: '741848445c2083f4c0a3d9464cd810deee4a1218', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onLikeButtonClick.bind(this), scale: 'm' }, this._likeCount ?? this._selectedGraphic.attributes[this._likeField] ?? 0), this._dislikeFieldAvailable &&
-                h("calcite-button", { key: '4d5e8ae279559dbf981b1b91238706adbd6ebeef', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onDislikeButtonClick.bind(this), scale: 'm' }, this._disLikeCount ?? this._selectedGraphic.attributes[this._dislikeField] ?? 0)), this.relatedTableId && this._commentsAvailable &&
-            h("feature-list", { key: '0daad9b37b13a05afc4b8a3a6eca70a7356afd8f', class: "height-full", locale: this.locale, mapView: this.mapView, onFeatureSelect: (e) => { this.commentSelect.emit(e.detail); }, pageSize: 5, ref: el => this._commentsList = el, selectedLayerId: this.relatedTableId, showErrorWhenNoFeatures: false, showFullTitle: this.showFullCommentTitle, showInitialLoading: false, showUserImageInList: this.showUserImageInCommentsList, textSize: "small", whereClause: commentsListWhereClause })));
+        return (h("calcite-panel", { key: '369276b48d989c7e15e86a507414e68b55c842b0', "full-height": true }, h("info-card", { key: '1cc64b674205bc2b1b7a7c65d9f99ae551daf89d', allowEditing: false, enableSnapping: this.enableSnapping, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, locale: this.locale, mapView: this.mapView, onSelectionChanged: (e) => { this.featureSelectionChange.emit(e.detail); }, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el }), (this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) &&
+            h("div", { key: '52d494236fbf3ea0db4894600885f25d8c9c021f', class: "buttons-container" }, this._commentsAvailable &&
+                h("calcite-button", { key: 'f9844e33d90a3d5c4b950e9d7dcbd8c1f2b541af', appearance: "transparent", iconEnd: "speech-bubble", kind: "neutral", onClick: () => { this.addComment.emit(); }, scale: 'm' }, this._relatedFeaturesOIDs.length), this._likeFieldAvailable &&
+                h("calcite-button", { key: '0912473490c6ada2ba3e3a703a37d26e752ee4d5', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onLikeButtonClick.bind(this), scale: 'm' }, this._likeCount ?? this._selectedGraphic.attributes[this._likeField] ?? 0), this._dislikeFieldAvailable &&
+                h("calcite-button", { key: 'e6d62adf0d5669f50b829e78bd2b224d1e400b36', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onDislikeButtonClick.bind(this), scale: 'm' }, this._disLikeCount ?? this._selectedGraphic.attributes[this._dislikeField] ?? 0)), this.relatedTableId && this._commentsAvailable &&
+            h("feature-list", { key: '8cd2570111a3425e6c4d9d8b7de1e2b522ce8833', class: "height-full", locale: this.locale, mapView: this.mapView, onFeatureSelect: (e) => { this.commentSelect.emit(e.detail); }, pageSize: 5, ref: el => this._commentsList = el, selectedLayerId: this.relatedTableId, showErrorWhenNoFeatures: false, showFullTitle: this.showFullCommentTitle, showInitialLoading: false, showUserImageInList: this.showUserImageInCommentsList, textSize: "small", whereClause: commentsListWhereClause })));
     }
     /**
      * Load esri javascript api modules
@@ -469,6 +470,26 @@ export class FeatureDetails {
     }
     static get properties() {
         return {
+            "enableSnapping": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true the snapping options will be exposed"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "enable-snapping",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "mapView": {
                 "type": "unknown",
                 "mutable": false,

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

@@ -235,10 +235,10 @@ export class FeatureList {
      */
     render() {
         const showSearch = this._canShowFullTextSearch();
-        return (h("calcite-panel", { key: '465989fd2befec544d5a49a355a70dc13b6962dc', "full-height": true, "full-width": true }, showSearch &&
-            h("calcite-input", { key: 'b09776016a6d854336b44bbfcb98eabbd50d1e95', class: "search", clearable: true, icon: "search", onCalciteInputChange: this._searchTextChanged.bind(this), placeholder: this._searchPlaceHolder, title: '', type: "search" }), this._isLoading && h("calcite-loader", { key: 'ac945c628e55c6dff43701c39d33c6a3a9ff8874', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
-            h("calcite-notice", { key: '00cb64af86c8cd8600cdf435f918131cc3e66a38', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: '29b8bd85b3cb55c6bfb6adc282f8e69a7f9ea2ce', slot: "message" }, this.filterByMapExtent ? this._translations.featureErrorMsgInCurrentMapView : this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: '002f3171e10af68d189c71dbd9fa86d3106f13a2', class: this.textSize === 'small' && !this.showFullTitle ? 'overflow-hidden' : '', label: "", ref: el => this._calciteList = el, "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
-            h("div", { key: '3df744fa6f86db8c092e10dee631907516985fc5', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: '0221928e0266e4b57c7ce5a34aa8ec758864312f', 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 }))));
+        return (h("calcite-panel", { key: 'da51d35e66ceea64f32ddf7872ac7133f98bfc48', "full-height": true, "full-width": true }, showSearch &&
+            h("calcite-input", { key: '04a50538873d5a87eb194edca98fa5a86818bfc4', class: "search", clearable: true, icon: "search", onCalciteInputChange: this._searchTextChanged.bind(this), placeholder: this._searchPlaceHolder, title: '', type: "search" }), this._isLoading && h("calcite-loader", { key: 'f89602c8d36c41d8ed5b028619853ba8e1dedbc9', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
+            h("calcite-notice", { key: '147d2072a916b9a0ec34d3819a8c88ded50673b1', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: 'ab769558c1489e9b24eff945b970230b5015a35c', slot: "message" }, this.filterByMapExtent ? this._translations.featureErrorMsgInCurrentMapView : this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: 'aa05260aa25bd5023be842969f6660950269221e', class: this.textSize === 'small' && !this.showFullTitle ? 'overflow-hidden' : '', label: "", ref: el => this._calciteList = el, "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
+            h("div", { key: '6db2614c585cc95605998c2ddd96e9d8980ed875', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: '59f0c7e97b02215ec717d902fdf6294ed7c82a67', 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 }))));
     }
     //--------------------------------------------------------------------------
     //