@esri/solutions-components 0.11.22 → 0.11.23

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

@@ -26,6 +26,7 @@ export class CardManager {
     constructor() {
         this.customInfoText = undefined;
         this.enableEditGeometry = false;
+        this.enableSnapping = false;
         this.isMobile = undefined;
         this.layer = undefined;
         this.locale = undefined;
@@ -141,14 +142,14 @@ export class CardManager {
         const heading = isTable ? this._translations.createRecord : this._translations.createFeature;
         const guideMsg = this.customInfoText ? this.customInfoText : this.selectingFeatureFromMap ? this._translations.selectFeaturesFromMapToStart : this._translations.selectFeaturesToStart;
         const showCreateFeatureOrRecordBtn = this.enableCreateFeatures && this.layer?.capabilities?.operations?.supportsAdd;
-        return (h(Host, { key: '5557aa4d80b859335e38db3f4255f4a61d00560f' }, h("div", { key: '6756e3314fc3444a982010a3cfa702d77f05f316', class: "overflow-auto height-full" }, h("calcite-shell", { key: '715eb7ed692a1d00347d44f20df370cf9a91ded5', class: "position-relative " + featuresClass }, h("div", { key: 'baf4e97c1884f477e4077a6dc8e59d98c77593a4', class: "position-static z-index-500" }, h("info-card", { key: '0b9b30182fbc3482e9edf49b79f68aec8cf86adc', enableEditGeometry: this.enableEditGeometry, graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, locale: this.locale, mapView: this.mapView, showCloseBtn: true }))), h("calcite-shell", { key: '94b646061956a78dec4f96d9d1d9dedc5ad6aee7', class: "position-relative " + messageClass }, h("calcite-panel", { key: '00b660d474234f8156f3d4c627626f5891754051' }, h("div", { key: 'adb0732ff59c4fdedb19367a32ad9e3e060ddb60', class: "padding-1" }, h("calcite-notice", { key: 'a2c88bd4a0827111b0d1f3056ae571b47e5b380b', icon: this.selectingFeatureFromMap ? "map" : "table", iconFlipRtl: true, open: true }, h("div", { key: 'bffc2630de3f0376b6ea5827c89f65dc605a5356', slot: "message" }, guideMsg))), !this.isMobile && showCreateFeatureOrRecordBtn && h("calcite-button", { key: '08bef5c20d6b60e17abcfc9fc19d7d1eb5d04b1c', disabled: !this.layer, onClick: () => this._createFeatureBtnClicked(), slot: "footer", width: "full" }, isTable ? this._translations.createRecord : this._translations.createFeature))), h("calcite-shell", { key: '833a8de60b491008006034c1696fcb29f1bb6a08', class: "position-relative " + createFeatureClass }, h("calcite-flow-item", { key: 'fe3e33e8c733266ac97d85a656aec4cb75d7fa1d', selected: true }, h("calcite-panel", { key: 'e8de18fa82d9a8ba377f02855080ac1e35ce181a', heading: heading }, h("calcite-action", { key: '063ed2e572c64056d20601085012b86980c5d304', class: "back-button hydrated", icon: "chevron-left", onClick: this._backFromCreateFeature.bind(this), scale: "s", slot: "header-actions-start", text: "" }), this.getEditorComponent(), this._showSubmitBtn && h("calcite-button", { key: 'add0dbef4bca18905717b92ff584d006ebd81ca8', appearance: "solid", class: "footer-top-button footer-button", onClick: () => void this._createFeature.submit(), slot: "footer", width: "full" }, this._translations.create)))))));
+        return (h(Host, { key: '803f5130e6f4fa0bf97cfdd2776e176786e736cc' }, h("div", { key: '7c0a756f5de5f536b52d2e9f6629593eb3c85781', class: "overflow-auto height-full" }, h("calcite-shell", { key: '9a6366bba429d5c29a5f1c556d6812f44d28ee2c', class: "position-relative " + featuresClass }, h("div", { key: '61cb9f7942eb209e5e0bd751ab4b5ca026086882', class: "position-static z-index-500" }, h("info-card", { key: '0c3b6f958384dab4bc1db2917a88215bafe330b1', enableEditGeometry: this.enableEditGeometry, enableSnapping: this.enableSnapping, graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, locale: this.locale, mapView: this.mapView, showCloseBtn: true }))), h("calcite-shell", { key: 'db9233d29cc88ddc6cb023bcf9e9190ecb721214', class: "position-relative " + messageClass }, h("calcite-panel", { key: '0d1c22a3ad3d2d2a56054b2e8609697987b45ca7' }, h("div", { key: 'cc5f7faa934f474ddca2d0ab74fd46dac240cc6f', class: "padding-1" }, h("calcite-notice", { key: '2c2771696892455fcb1ec24d895cd321a84a8f49', icon: this.selectingFeatureFromMap ? "map" : "table", iconFlipRtl: true, open: true }, h("div", { key: '0bbbd13e4e9a7b2240a85b41dbd00fc2a7e39c75', slot: "message" }, guideMsg))), !this.isMobile && showCreateFeatureOrRecordBtn && h("calcite-button", { key: '67bac627f68fc6bcda2b1a8965ab6d7fb12d2e4c', disabled: !this.layer, onClick: () => this._createFeatureBtnClicked(), slot: "footer", width: "full" }, isTable ? this._translations.createRecord : this._translations.createFeature))), h("calcite-shell", { key: 'cd44af48bb05fd6ac41c0d66bdd9e01826ece1a4', class: "position-relative " + createFeatureClass }, h("calcite-flow-item", { key: '648dfdc4fb559ecbf64ee43791e3d9799c346f1a', selected: true }, h("calcite-panel", { key: '855df56ed576e52c94dbe3cfa8f6d57427a37ba2', heading: heading }, h("calcite-action", { key: '156d1b20da3f02de66879531802aa2d2fb99b1ca', class: "back-button hydrated", icon: "chevron-left", onClick: this._backFromCreateFeature.bind(this), scale: "s", slot: "header-actions-start", text: "" }), this.getEditorComponent(), this._showSubmitBtn && h("calcite-button", { key: '9b4556876d579a4f2bd02849737cd55b55f87cbd', appearance: "solid", class: "footer-top-button footer-button", onClick: () => void this._createFeature.submit(), slot: "footer", width: "full" }, this._translations.create)))))));
     }
     /**
    * Returns the editor component for adding feature
    * @returns Node
    */
     getEditorComponent() {
-        return (h("div", null, this._showCreateFeatureComponent && h("create-feature", { customizeSubmit: true, locale: this.locale, mapView: this.mapView, onDrawComplete: () => { this._showSubmitBtn = true; }, onEditingAttachment: (evt) => { this._showSubmitBtn = !evt.detail; }, onProgressStatus: () => {
+        return (h("div", null, this._showCreateFeatureComponent && h("create-feature", { customizeSubmit: true, enableSnapping: this.enableSnapping, locale: this.locale, mapView: this.mapView, onDrawComplete: () => { this._showSubmitBtn = true; }, onEditingAttachment: (evt) => { this._showSubmitBtn = !evt.detail; }, onProgressStatus: () => {
                 setTimeout(() => {
                     this._isFeatureCreated = false;
                 }, 2000);
@@ -265,6 +266,26 @@ export class CardManager {
                 "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"
+            },
             "isMobile": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -19,7 +19,7 @@
 }
 
 /* Override to hide Editor settings panel collapsible */
-.esri-editor__panel-toolbar {
+.hide-editor-toolbar .esri-editor__panel-toolbar {
   display: none !important;
 }
 

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

@@ -26,6 +26,7 @@ export class CreateFeature {
     constructor() {
         this.customizeSubmit = false;
         this.enableSearch = false;
+        this.enableSnapping = false;
         this.floorLevel = undefined;
         this.formElements = undefined;
         this.isMobile = undefined;
@@ -291,8 +292,8 @@ export class CreateFeature {
         else if (this._currentPage === 'featureForm') {
             guidingMsg = this._translations.provideDetailsMsg;
         }
-        return (h(Fragment, { key: 'cb3462a70e0097e9b4ac9dac3f910fce6d30f8b5' }, showGuidingMsg && h("calcite-notice", { key: 'ddd908ac4b31f60d07de064ec1decae06b3d93bd', class: "notice-msg", icon: "lightbulb", kind: "success", open: true, ref: el => this._calciteNotice = el }, h("div", { key: '3cee10085fa29190d88d3d03d35f726d1b51651b', slot: "message" }, guidingMsg)), h("calcite-loader", { key: 'cf714d63a011712fa03c148c17a8811356e14859', class: loaderClass, label: "", scale: "s" }), h("div", { key: 'e20cb740a1d22795b397af191a26339d709aba0d', class: featureFormClass, id: "feature-form" }), this.enableSearch &&
-            h("div", { key: 'd2b439d3845b69527fdea2414c7b22078b0af4ea', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref", ref: el => this._searchDiv = el }), h("div", { key: '1f4e39aaaa93f4e2102767c04c5ad256e4f129e2', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
+        return (h(Fragment, { key: '07a1a08a5cd9d8c439870a2500922fbd6839dac9' }, showGuidingMsg && h("calcite-notice", { key: '5d846812fc38f9ca4e9bd997f5bc519fe8a4f21e', class: "notice-msg", icon: "lightbulb", kind: "success", open: true, ref: el => this._calciteNotice = el }, h("div", { key: '8ad1da020a728e19e5d2f3add15ec7c5a8bbdd9f', slot: "message" }, guidingMsg)), h("calcite-loader", { key: '39a0843ca8b16e60a7468908eb00d08a15703756', class: loaderClass, label: "", scale: "s" }), h("div", { key: '1ce7ea5afc559adc1b0d8d8d60696bcf5783453b', class: featureFormClass, id: "feature-form" }), this.enableSearch &&
+            h("div", { key: 'e2832e4a615051a7d0a6cd29de348ef2d0c65cb9', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref", ref: el => this._searchDiv = el }), h("div", { key: 'a3388a9cf013a7c7155119d12835dc996ec9c947', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -371,6 +372,9 @@ export class CreateFeature {
         const layerInfos = [];
         this._container = document.createElement("div");
         this._container?.classList.add("display-none");
+        if (!this.enableSnapping) {
+            this._container.classList.add("hide-editor-toolbar");
+        }
         const allMapLayers = await getAllLayers(this._updatedMapView);
         this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
         // if layer is selected then only use the layerInfos while initializing the editor widget
@@ -390,7 +394,8 @@ export class CreateFeature {
             view: this._updatedMapView,
             layerInfos: layerInfos,
             visibleElements: {
-                snappingControls: false,
+                settingsMenu: this.enableSnapping,
+                snappingControls: this.enableSnapping,
                 createFeaturesSection: true,
                 editFeaturesSection: false,
                 flow: false
@@ -749,6 +754,26 @@ export class CreateFeature {
                 "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"
+            },
             "floorLevel": {
                 "type": "string",
                 "mutable": false,

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

@@ -3,7 +3,7 @@
 }
 
 /* Override to hide Editor settings panel collapsible */
-.esri-editor__panel-toolbar {
+.hide-editor-toolbar .esri-editor__panel-toolbar {
   display: none !important;
 }
 

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: '5251d18b13ed90499cd960305773b6fb04efd4db' }, this.showGuidingMsg && h("calcite-notice", { key: '9f2902f8dab476734d3a70fad4e5cc7996f721a8', class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { key: '650f56b689cde544c96e24a966da7283efcdfcbe', slot: "message" }, this._translations.provideDetailsMsg)), h("calcite-loader", { key: 'be4c67978909e7dcf18fe8dece831b8830dee5d1', 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: '1d30ec71032cffd61c016cc846f59a8e437253de' }, h("calcite-shell", { key: '836f6e8cde7c3e5b177803b607e26a41bdea42a3', class: "position-relative" }, h("calcite-panel", { key: '0c968ccf6d19aa754b56dc5a3714e3b6f44dcac9', 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: '11cf5f3a1674460c6ab9d2979d621417431e7130' }, this._reportSubmitted && h("calcite-alert", { key: 'ab40068608e235cbbeda293d62f501c1bcc2a123', "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: '91e436fa80c41457465f0816b66e205793f5a91d', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '6dbcd02898e6328f343af94985f069d8261dce1f', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: 'fc97e5f02b5241af076243b7fa8bb19f29c3dad6', slot: "title" }, this._translations.error), h("div", { key: '9583f6bd62f2a36c50e8309a353dd634300aa835', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '0d216fc75481b249ee63468b2c0145ed7f09d09e', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '700a788d9f0f12200bee0625576571a8c352a6a1', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '28ef0e56c42d3d366e33374368461eba9bb5e896', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '90e8757ee650b3f55c456d0fd56a45dac6df263e', slot: "title" }, this._translations.error), h("div", { key: 'b819d951be7340af388767b40e423a279b33ea85', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '167d0cb576feaaa77279110ab40df63e1a6146ae' }, h("calcite-shell", { key: 'b4d83790aa3a47a9c336821c54bc3e0fa1d9e308', "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/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;
 }