@esri/solutions-components 0.7.39 → 0.7.41

package/dist/collection/components/basemap-gallery/basemap-gallery.css

@@ -1,19 +1,19 @@
-/** @license
- * Copyright 2022 Esri
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-:host {
-  display: block;
-}
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host {
+  display: block;
+}

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

@@ -25,6 +25,8 @@ import { getAllLayers, getFeatureLayerView, getLayerOrTable, highlightFeatures }
 import { queryFeaturesByID } from "../../utils/queryUtils";
 export class CrowdsourceReporter {
     constructor() {
+        //HARDCODED IN EN
+        this._noLayerToDisplayErrorMsg = "Web map does not contain any editable layers.";
         this.description = undefined;
         this.isMobile = undefined;
         this.enableAnonymousAccess = undefined;
@@ -37,6 +39,8 @@ export class CrowdsourceReporter {
         this.mapView = undefined;
         this.layerId = undefined;
         this.objectId = undefined;
+        this.center = undefined;
+        this.level = undefined;
         this.reportButtonText = undefined;
         this.reportsHeader = undefined;
         this.reportSubmittedMessage = undefined;
@@ -168,7 +172,7 @@ export class CrowdsourceReporter {
      */
     getLayerListFlowItem() {
         return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports &&
-            h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._translations.noLayerToDisplayErrorMsg, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
+            h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._noLayerToDisplayErrorMsg, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
     }
     /**
      * Get the layer list for creating a report
@@ -176,7 +180,7 @@ export class CrowdsourceReporter {
      * @protected
      */
     getChooseCategoryFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._translations.createReportHeader, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", disabled: !this._selectedLayerId, onClick: this.navigateToCreateFeature.bind(this), width: "full" }, this._translations.next), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromSelectedPanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.chooseCategoryMsg)), h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._translations.noLayerToDisplayErrorMsg, onLayerSelect: this.highlightSelectedLayer.bind(this), showFeatureCount: false, showNextIcon: false }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._translations.createReportHeader, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", disabled: !this._selectedLayerId, onClick: this.navigateToCreateFeature.bind(this), width: "full" }, this._translations.next), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromSelectedPanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.chooseCategoryMsg)), h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._noLayerToDisplayErrorMsg, onLayerSelect: this.highlightSelectedLayer.bind(this), showFeatureCount: false, showNextIcon: false }))));
     }
     /**
      * Get Feature create form of the selected feature layer
@@ -522,11 +526,17 @@ export class CrowdsourceReporter {
      * @protected
      */
     async loadFeatureFromURLParams() {
+        if (this.center && this.level) {
+            await this.mapView.goTo({
+                center: this.center.split(';').map(Number),
+                zoom: this.level
+            });
+        }
         if (this.layerId && this.objectId) {
             const layer = await getLayerOrTable(this.mapView, this.layerId);
             if (layer) {
                 // only query if we have some ids...query with no ids will result in all features being returned
-                const featureSet = await queryFeaturesByID([Number(this.objectId)], layer, [], false, this.mapView.spatialReference);
+                const featureSet = await queryFeaturesByID([Number(this.objectId)], layer, [], true, this.mapView.spatialReference);
                 if (featureSet.length) {
                     //update the selectedFeature
                     this._selectedFeature = featureSet;
@@ -538,6 +548,7 @@ export class CrowdsourceReporter {
                     else {
                         this._flowItems = [...this._flowItems];
                     }
+                    await this.highlightOnMap(featureSet[0]);
                 }
             }
         }
@@ -760,6 +771,40 @@ export class CrowdsourceReporter {
                 "attribute": "object-id",
                 "reflect": false
             },
+            "center": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: Semicolon delimited numbers that will be used as the maps center point from URL params"
+                },
+                "attribute": "center",
+                "reflect": false
+            },
+            "level": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: Id of the zoom level from URL params"
+                },
+                "attribute": "level",
+                "reflect": false
+            },
             "reportButtonText": {
                 "type": "string",
                 "mutable": false,

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

@@ -24,6 +24,8 @@ import { getLocaleComponentStrings } from "../../utils/locale";
 import { formatNumber } from "../../utils/languageUtil";
 export class LayerList {
     constructor() {
+        //HARDCODED IN EN
+        this._noLayerToDisplayErrorMsg = "Web map does not contain any editable layers.";
         this.mapView = undefined;
         this.layers = undefined;
         this.noLayerErrorMsg = undefined;
@@ -76,7 +78,7 @@ export class LayerList {
      */
     render() {
         return (h(Fragment, null, this._isLoading && h("calcite-loader", { label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
-            h("calcite-notice", { class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { slot: "title" }, this._translations.error), h("div", { slot: "message" }, this.noLayerErrorMsg ? this.noLayerErrorMsg : this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
+            h("calcite-notice", { class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { slot: "title" }, this._translations.error), h("div", { slot: "message" }, this.noLayerErrorMsg ? this.noLayerErrorMsg : this._noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
             h("calcite-list", { "selection-appearance": "border", "selection-mode": this.showNextIcon ? "none" : "single-persist" }, this.renderLayerList())));
     }
     //--------------------------------------------------------------------------

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

@@ -91,6 +91,7 @@ export class LayerTable {
         this.showNewestFirst = undefined;
         this.zoomAndScrollToSelected = undefined;
         this._controlsThatFit = undefined;
+        this._csvExporting = false;
         this._fetchingData = false;
         this._filterActive = false;
         this._filterOpen = false;
@@ -367,8 +368,8 @@ export class LayerTable {
             if (cur && !cur.isOverflow) {
                 prev.push(cur.isDanger ?
                     this._getDangerAction(cur.icon, cur.label, cur.func, cur.disabled) :
-                    cur.isSublist ? (h("calcite-dropdown", { closeOnSelectDisabled: true, id: this._getId(cur.icon), onCalciteDropdownBeforeClose: () => this._forceShowHide(), ref: (el) => this._showHideDropdown = el }, this._getAction(cur.active, this._showHideOpen ? "chevron-down" : cur.icon, cur.indicator, cur.label, cur.func, cur.disabled, "trigger"), this._showHideOpen ? this._getFieldlist() : undefined)) :
-                        this._getAction(cur.active, cur.icon, cur.indicator, cur.label, cur.func, cur.disabled));
+                    cur.isSublist ? (h("calcite-dropdown", { closeOnSelectDisabled: true, id: this._getId(cur.icon), onCalciteDropdownBeforeClose: () => this._forceShowHide(), ref: (el) => this._showHideDropdown = el }, this._getAction(cur.active, this._showHideOpen ? "chevron-down" : cur.icon, cur.indicator, cur.label, cur.func, cur.disabled, cur.loading, "trigger"), this._showHideOpen ? this._getFieldlist() : undefined)) :
+                        this._getAction(cur.active, cur.icon, cur.indicator, cur.label, cur.func, cur.disabled, cur.loading));
             }
             return prev;
         }, []);
@@ -520,6 +521,7 @@ export class LayerTable {
                     indicator: false,
                     func: () => void this._exportToCSV(),
                     label: this._translations.exportCSV,
+                    loading: this._csvExporting,
                     disabled: featuresEmpty,
                     isOverflow: false
                 } : undefined, {
@@ -704,7 +706,7 @@ export class LayerTable {
     _getDropdown(id) {
         const dropdownItems = this._getDropdownItems();
         return dropdownItems.length > 0 ? (h("calcite-dropdown", { closeOnSelectDisabled: true, disabled: this._layer === undefined, id: "solutions-more", onCalciteDropdownBeforeClose: () => this._forceShowHide(), ref: (el) => this._moreDropdown = el }, h("calcite-action", { appearance: "solid", id: id, label: "", onClick: () => this._closeShowHide(), slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { "selection-mode": "none" }, dropdownItems.map(item => {
-            return (h("calcite-dropdown-group", { class: item.disabled ? "disabled" : "", selectionMode: item.disabled ? "none" : "single" }, h("calcite-dropdown-item", { iconStart: item.isSublist && this._showHideOpen ? "chevron-down" : item.icon, id: "solutions-subset-list", onClick: item.func }, item.label)));
+            return (h("calcite-dropdown-group", { class: item.disabled ? "disabled" : "", selectionMode: item.disabled ? "none" : "single" }, h("calcite-dropdown-item", { disabled: item.loading, iconStart: item.isSublist && this._showHideOpen ? "chevron-down" : item.loading ? "" : item.icon, id: "solutions-subset-list", onClick: item.func }, item.loading ? (h("div", { class: "display-flex" }, h("calcite-loader", { inline: true, label: item.label, scale: "m" }), item.label)) : item.label)));
         })), this._showHideOpen ? this._getFieldlist() : undefined)) : undefined;
     }
     /**
@@ -726,9 +728,9 @@ export class LayerTable {
      *
      * @returns VNode The node representing the DOM element that will contain the action
      */
-    _getAction(active, icon, indicator, label, func, disabled, slot) {
+    _getAction(active, icon, indicator, label, func, disabled, loading, slot) {
         const _disabled = this._layer === undefined ? true : disabled;
-        return (h("div", { class: "display-flex", id: this._getId(icon), slot: slot }, h("calcite-action", { active: active, appearance: "solid", disabled: _disabled, icon: icon, id: icon, indicator: indicator, label: label, onClick: func, text: label, textEnabled: true }), this._getToolTip("bottom", icon, label)));
+        return (h("div", { class: "display-flex", id: this._getId(icon), slot: slot }, h("calcite-action", { active: active, appearance: "solid", disabled: _disabled, icon: icon, id: icon, indicator: indicator, label: label, loading: loading, onClick: func, text: label, textEnabled: true }), this._getToolTip("bottom", icon, label)));
     }
     /**
      * Get an action and tooltip for share
@@ -1182,13 +1184,9 @@ export class LayerTable {
         const hitTestResult = await this.mapView.hitTest(evt.screenPoint, opts);
         if (hitTestResult.results.length > 0) {
             hitTestResult.results.forEach((result) => {
-                this._clearSelection();
                 const id = result.graphic.getObjectId();
                 const index = this._table.highlightIds.indexOf(id);
-                if (index > -1) {
-                    this._table.highlightIds.removeAt(index);
-                }
-                else {
+                if (index < 0) {
                     this._table.highlightIds.add(id);
                 }
             });
@@ -1196,6 +1194,9 @@ export class LayerTable {
                 this._table.filterBySelection();
             }
         }
+        else {
+            this._clearSelection();
+        }
     }
     /**
      * Select or deselect all rows
@@ -1284,11 +1285,26 @@ export class LayerTable {
             }
             return prev;
         }, []);
-        void downloadUtils.downloadCSV(null, //???
+        this._updateToolInfoLoading("export", true);
+        this._csvExporting = true;
+        await downloadUtils.downloadCSV(null, //???
         exportInfos, false, // formatUsingLayerPopup
         false, // removeDuplicates
         true, // addColumnTitle
         fields, true);
+        this._updateToolInfoLoading("export", false);
+        this._csvExporting = false;
+    }
+    /**
+     * Set the loading prop in the stored toolInfos
+     */
+    _updateToolInfoLoading(name, isLoading) {
+        this._toolInfos.some(tool => {
+            if ((tool === null || tool === void 0 ? void 0 : tool.icon) === name) {
+                tool.loading = isLoading;
+                return true;
+            }
+        });
     }
     /**
      * Refreshes the table and maintains the curent scroll position
@@ -1744,6 +1760,7 @@ export class LayerTable {
     static get states() {
         return {
             "_controlsThatFit": {},
+            "_csvExporting": {},
             "_fetchingData": {},
             "_filterActive": {},
             "_filterOpen": {},

package/dist/collection/components/map-fullscreen/map-fullscreen.css

@@ -1,19 +1,19 @@
-/** @license
- * Copyright 2022 Esri
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-:host {
-  display: block;
-}
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host {
+  display: block;
+}

package/dist/collection/components/map-legend/map-legend.css

@@ -1,3 +1,3 @@
-:host {
-  display: block;
-}
+:host {
+  display: block;
+}

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

@@ -115,8 +115,11 @@
               break;
             case 'oid':
               demo.objectId = value;
-            case 'center' || 'level':
-              demo[key] = value;
+            case 'center':
+              demo.center = value;
+              break;
+            case 'level':
+              demo.level = value;
               break;
           }
         }

package/dist/collection/utils/interfaces.ts

@@ -503,6 +503,7 @@ export interface IToolInfo {
   isDanger?: boolean;
   isOverflow: boolean;
   isSublist?: boolean;
+  loading?: boolean;
 }
 
 export interface IToolSizeInfo {

package/dist/collection/utils/queryUtils.js

@@ -95,6 +95,7 @@ export async function queryObjectIds(geometries, layer) {
 }
 /**
  * Query the layer for features that have the provided OIDs
+ * If no ids are provided all features will be returned
  *
  * @param ids array of ObjectIDs to be used to query for features in a layer
  * @param layer the layer to retrieve features from
@@ -119,6 +120,9 @@ export async function queryFeaturesByID(ids, layer, graphics, returnGeometry, ou
     if (fields) {
         q.outFields = fields;
     }
+    if (ids.length === 0) {
+        ids = await layer.queryObjectIds();
+    }
     const result = await layer.queryFeatures(q);
     graphics = graphics.concat(result.features);
     const remainingIds = ids.slice(num, ids.length);

package/dist/collection/utils/queryUtils.ts

@@ -114,6 +114,7 @@ export async function queryObjectIds(
 
 /**
  * Query the layer for features that have the provided OIDs
+ * If no ids are provided all features will be returned
  *
  * @param ids array of ObjectIDs to be used to query for features in a layer
  * @param layer the layer to retrieve features from
@@ -146,6 +147,10 @@ export async function queryFeaturesByID(
     q.outFields = fields;
   }
 
+  if (ids.length === 0) {
+    ids = await layer.queryObjectIds();
+  }
+
   const result = await layer.queryFeatures(q);
 
   graphics = graphics.concat(

package/dist/components/crowdsource-reporter.js

@@ -47,6 +47,8 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         super();
         this.__registerHost();
         this.togglePanel = createEvent(this, "togglePanel", 7);
+        //HARDCODED IN EN
+        this._noLayerToDisplayErrorMsg = "Web map does not contain any editable layers.";
         this.description = undefined;
         this.isMobile = undefined;
         this.enableAnonymousAccess = undefined;
@@ -59,6 +61,8 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         this.mapView = undefined;
         this.layerId = undefined;
         this.objectId = undefined;
+        this.center = undefined;
+        this.level = undefined;
         this.reportButtonText = undefined;
         this.reportsHeader = undefined;
         this.reportSubmittedMessage = undefined;
@@ -190,7 +194,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     getLayerListFlowItem() {
         return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports &&
-            h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._translations.noLayerToDisplayErrorMsg, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
+            h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._noLayerToDisplayErrorMsg, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
     }
     /**
      * Get the layer list for creating a report
@@ -198,7 +202,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @protected
      */
     getChooseCategoryFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._translations.createReportHeader, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", disabled: !this._selectedLayerId, onClick: this.navigateToCreateFeature.bind(this), width: "full" }, this._translations.next), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromSelectedPanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.chooseCategoryMsg)), h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._translations.noLayerToDisplayErrorMsg, onLayerSelect: this.highlightSelectedLayer.bind(this), showFeatureCount: false, showNextIcon: false }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._translations.createReportHeader, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", disabled: !this._selectedLayerId, onClick: this.navigateToCreateFeature.bind(this), width: "full" }, this._translations.next), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromSelectedPanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.chooseCategoryMsg)), h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._noLayerToDisplayErrorMsg, onLayerSelect: this.highlightSelectedLayer.bind(this), showFeatureCount: false, showNextIcon: false }))));
     }
     /**
      * Get Feature create form of the selected feature layer
@@ -544,11 +548,17 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @protected
      */
     async loadFeatureFromURLParams() {
+        if (this.center && this.level) {
+            await this.mapView.goTo({
+                center: this.center.split(';').map(Number),
+                zoom: this.level
+            });
+        }
         if (this.layerId && this.objectId) {
             const layer = await getLayerOrTable(this.mapView, this.layerId);
             if (layer) {
                 // only query if we have some ids...query with no ids will result in all features being returned
-                const featureSet = await queryFeaturesByID([Number(this.objectId)], layer, [], false, this.mapView.spatialReference);
+                const featureSet = await queryFeaturesByID([Number(this.objectId)], layer, [], true, this.mapView.spatialReference);
                 if (featureSet.length) {
                     //update the selectedFeature
                     this._selectedFeature = featureSet;
@@ -560,6 +570,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
                     else {
                         this._flowItems = [...this._flowItems];
                     }
+                    await this.highlightOnMap(featureSet[0]);
                 }
             }
         }
@@ -583,6 +594,8 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         "mapView": [16],
         "layerId": [1, "layer-id"],
         "objectId": [1, "object-id"],
+        "center": [1],
+        "level": [1],
         "reportButtonText": [1, "report-button-text"],
         "reportsHeader": [1, "reports-header"],
         "reportSubmittedMessage": [1, "report-submitted-message"],

package/dist/components/instant-apps-export.js

@@ -115,7 +115,7 @@ const printStyling = `
     flex-flow: row wrap;
   }
 
-  .instant-apps-export-print .esri-widget > *:not(.instant-apps-export-print__scale-bar-container > *) {
+  .instant-apps-export-print .esri-widget > *:not(.esri-scale-bar.esri-widget > *) {
     background: #fff;
     color: #323232;
   }
@@ -200,6 +200,10 @@ const printStyling = `
     left: 15px;
   }
 
+  .instant-apps-export-print__scale-bar-container .esri-scale-bar__label {
+    font-size: 10px;
+  }
+
   .instant-apps-export-print__scale-bar-container .esri-scale-bar__bar-container:nth-child(1n+3) {
     display: none;
   }
@@ -436,8 +440,7 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
         return (h("div", { ref: (el) => (this.printContainerEl = el) }, h("div", { class: CSS.print.base, ref: (el) => (this.printEl = el) }, printMap, legend, h("div", { class: CSS.print.contentContainer }, popup, extraContent))));
     }
     renderPrintMap() {
-        const scaleBar = this.renderScaleBar();
-        return (h("div", { class: CSS.print.viewContainer, ref: (el) => (this.viewContainerEl = el) }, h("div", { class: CSS.print.viewWrapper, ref: (el) => (this.viewWrapperEl = el) }, this.headerTitle ? h("instant-apps-header", { titleText: this.headerTitle, backgroundColor: "#fff", textColor: "#323232" }) : null, h("img", { class: CSS.print.view, ref: (el) => (this.viewEl = el) }), scaleBar)));
+        return (h("div", { class: CSS.print.viewContainer, ref: (el) => (this.viewContainerEl = el) }, h("div", { class: CSS.print.viewWrapper, ref: (el) => (this.viewWrapperEl = el) }, this.headerTitle ? h("instant-apps-header", { titleText: this.headerTitle, backgroundColor: "#fff", textColor: "#323232" }) : null, h("img", { class: CSS.print.view, ref: (el) => (this.viewEl = el) }), h("div", { class: CSS.print.scaleBarContainer, ref: this.handleScaleBarContainerEl.bind(this) }))));
     }
     renderLegend() {
         return h("div", { class: CSS.print.legendContainer, ref: (el) => (this.legendContainerEl = el) });
@@ -445,9 +448,6 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
     renderCompass() {
         return h("div", { class: CSS.print.compassContainer, ref: (el) => (this.compassContainerEl = el) });
     }
-    renderScaleBar() {
-        return h("div", { class: CSS.print.scaleBarContainer, ref: (el) => (this.scaleBarContainerEl = el) });
-    }
     renderPopup() {
         return (h("div", { class: CSS.print.popupContainer, ref: (el) => (this.popupContainerEl = el) }, h("div", { ref: (el) => (this.popupTitleEl = el), class: CSS.print.popupTitle }), h("div", { ref: (el) => (this.popupContentEl = el), class: CSS.print.popupContent })));
     }
@@ -591,7 +591,6 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
     handleWidgetCreation() {
         this.handleLegendCreation();
         this.handleCompassCreation();
-        this.handleScaleBarCreation();
     }
     handleLegendCreation() {
         var _a, _b;
@@ -646,24 +645,12 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
             this.compass = new Compass({ container, view });
         });
     }
-    handleScaleBarCreation() {
-        var _a, _b;
-        if (this.showScaleBar && this.includeMap && this.view != null && this.view.type === '2d' && this.scaleBarContainerEl != null) {
-            const map = this.view.map;
-            const scaleBarMap = (_b = (_a = this.scaleBar) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.map;
-            const checkId = (map === null || map === void 0 ? void 0 : map.portalItem.id) === (scaleBarMap === null || scaleBarMap === void 0 ? void 0 : scaleBarMap.portalItem.id) && this.scaleBarContainerEl.innerHTML;
-            if (!checkId) {
-                this.updateScaleBar();
-            }
-        }
-    }
     updateScaleBar() {
         var _a;
         (_a = this.view) === null || _a === void 0 ? void 0 : _a.when(async (view) => {
             var _a;
             (_a = this.scaleBar) === null || _a === void 0 ? void 0 : _a.destroy();
             this.scaleBar = null;
-            this.scaleBarContainerEl.innerHTML = '';
             const [ScaleBar] = await loadModules(['esri/widgets/ScaleBar']);
             this.scaleBar = new ScaleBar({ container: this.scaleBarContainerEl, unit: 'dual', view });
         });
@@ -844,7 +831,7 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
     }
     handleScaleBarSize() {
         var _a;
-        if (((_a = this.view) === null || _a === void 0 ? void 0 : _a.type) === '2d') {
+        if (this.showScaleBar && ((_a = this.view) === null || _a === void 0 ? void 0 : _a.type) === '2d') {
             if (this.scaleBarContainerEl != null) {
                 const topBar = this.scaleBarContainerEl.querySelector('.esri-scale-bar__line--top');
                 const bottomBar = this.scaleBarContainerEl.querySelector('.esri-scale-bar__line--bottom');
@@ -854,7 +841,7 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
         }
     }
     setScalebarWidth(bar, position) {
-        if (this.view != null && bar != null && this.screenshot != null) {
+        if (bar != null && this.screenshot != null) {
             const width = this.screenshot.data.width / 2;
             const barWidth = Number(bar.style.width.replace('px', ''));
             const widthPercentage = (barWidth / width) * 100;
@@ -866,6 +853,18 @@ const InstantAppsExport$1 = /*@__PURE__*/ proxyCustomElement(class InstantAppsEx
         (_a = this.screenshotPreview) === null || _a === void 0 ? void 0 : _a.remove();
         (_b = this.screenshotStyle) === null || _b === void 0 ? void 0 : _b.remove();
     }
+    handleScaleBarContainerEl(el) {
+        var _a, _b, _c;
+        if (this.showScaleBar && ((_a = this.view) === null || _a === void 0 ? void 0 : _a.type) === '2d') {
+            const map = this.view.map;
+            const scaleBarMap = (_c = (_b = this.scaleBar) === null || _b === void 0 ? void 0 : _b.view) === null || _c === void 0 ? void 0 : _c.map;
+            this.scaleBarContainerEl = el;
+            const checkId = (map === null || map === void 0 ? void 0 : map.portalItem.id) === (scaleBarMap === null || scaleBarMap === void 0 ? void 0 : scaleBarMap.portalItem.id);
+            if (!checkId) {
+                this.updateScaleBar();
+            }
+        }
+    }
     get el() { return this; }
     static get watchers() { return {
         "includeMap": ["watchIncludeMap"]